From 3afe0563e9229afb108a67bc9c4abe557f30c2b1 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Mon, 13 May 2024 14:54:04 +0200
Subject: [PATCH] fix: vis configuration wrong width
---
.../lib/vis/components/config/panel.tsx | 28 +++---
.../vis/visualizations/tablevis/tablevis.tsx | 90 +++++++++----------
2 files changed, 58 insertions(+), 60 deletions(-)
diff --git a/libs/shared/lib/vis/components/config/panel.tsx b/libs/shared/lib/vis/components/config/panel.tsx
index ce1b1c9de..3e7d04c4e 100644
--- a/libs/shared/lib/vis/components/config/panel.tsx
+++ b/libs/shared/lib/vis/components/config/panel.tsx
@@ -45,7 +45,7 @@ export function ConfigPanel({ manager }: Props) {
</div>
</div>
{manager.activeVisualization && (
- <div className="border-b p-4">
+ <div className="border-b p-4 w-full">
<SettingsHeader name="Configuration" />
{manager.renderSettings()}
</div>
@@ -54,19 +54,19 @@ export function ConfigPanel({ manager }: Props) {
) : (
<div>
{session && session.currentSaveState && (
- <div className="flex flex-col p-4 border-b">
- <span className="text-sm font-bold">Connection details</span>
- <span className="text-xs font-semibold">Name</span>
- <span className="text-xs">{session.saveStates[session.currentSaveState].name}</span>
- <span className="text-xs font-semibold">Database</span>
- <span className="text-xs">{session.saveStates[session.currentSaveState].db.internalDatabaseName}</span>
- <span className="text-xs font-semibold">Protocol</span>
- <span className="text-xs">{session.saveStates[session.currentSaveState].db.protocol}</span>
- <span className="text-xs font-semibold">Hostname</span>
- <span className="text-xs">{session.saveStates[session.currentSaveState].db.url}</span>
- <span className="text-xs font-semibold">Port</span>
- <span className="text-xs">{session.saveStates[session.currentSaveState].db.port}</span>
- </div>
+ <div className="flex flex-col p-4 border-b">
+ <span className="text-sm font-bold">Connection details</span>
+ <span className="text-xs font-semibold">Name</span>
+ <span className="text-xs">{session.saveStates[session.currentSaveState].name}</span>
+ <span className="text-xs font-semibold">Database</span>
+ <span className="text-xs">{session.saveStates[session.currentSaveState].db.internalDatabaseName}</span>
+ <span className="text-xs font-semibold">Protocol</span>
+ <span className="text-xs">{session.saveStates[session.currentSaveState].db.protocol}</span>
+ <span className="text-xs font-semibold">Hostname</span>
+ <span className="text-xs">{session.saveStates[session.currentSaveState].db.url}</span>
+ <span className="text-xs font-semibold">Port</span>
+ <span className="text-xs">{session.saveStates[session.currentSaveState].db.port}</span>
+ </div>
)}
</div>
)}
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 7a8137151..fe64937cc 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -102,52 +102,50 @@ const TableSettings = ({
return (
<SettingsContainer>
- <div className="overflow-x-hidden w-6">
- <Input
- type="dropdown"
- label="Select entity"
- value={configuration.displayEntity}
- onChange={(val) => updateSettings({ displayEntity: val })}
- options={graphMetadata.nodes.labels}
- />
- <Input
- type="boolean"
- label="Show barplot"
- value={configuration.showBarplot}
- onChange={(val) => updateSettings({ showBarplot: val })}
- />
- <Input
- type="dropdown"
- label="Items per page"
- value={configuration.itemsPerPage}
- onChange={(val) => updateSettings({ itemsPerPage: val })}
- options={[10, 25, 50, 100]}
- />
- <div>
- <span className="text-sm">Attributes to display:</span>
- <Button
- className="w-full text-justify justify-start"
- type="secondary"
- variant="ghost"
- size="sm"
- onClick={toggleCollapseAttr}
- iconComponent={<ArrowDropDown />}
- >
- attributes:{' '}
- </Button>
- <div className="">
- {!areCollapsedAttr && (
- <Input
- type="checkbox"
- value={configuration.displayAttributes}
- options={selectedNodeAttributes}
- onChange={(val: string[] | string) => {
- const updatedVal = Array.isArray(val) ? val : [val];
- updateSettings({ displayAttributes: updatedVal });
- }}
- />
- )}
- </div>
+ <Input
+ type="dropdown"
+ label="Select entity"
+ value={configuration.displayEntity}
+ onChange={(val) => updateSettings({ displayEntity: val })}
+ options={graphMetadata.nodes.labels}
+ />
+ <Input
+ type="boolean"
+ label="Show barplot"
+ value={configuration.showBarplot}
+ onChange={(val) => updateSettings({ showBarplot: val })}
+ />
+ <Input
+ type="dropdown"
+ label="Items per page"
+ value={configuration.itemsPerPage}
+ onChange={(val) => updateSettings({ itemsPerPage: val })}
+ options={[10, 25, 50, 100]}
+ />
+ <div>
+ <span className="text-sm">Attributes to display:</span>
+ <Button
+ className="w-full text-justify justify-start"
+ type="secondary"
+ variant="ghost"
+ size="sm"
+ onClick={toggleCollapseAttr}
+ iconComponent={<ArrowDropDown />}
+ >
+ attributes:{' '}
+ </Button>
+ <div className="">
+ {!areCollapsedAttr && (
+ <Input
+ type="checkbox"
+ value={configuration.displayAttributes}
+ options={selectedNodeAttributes}
+ onChange={(val: string[] | string) => {
+ const updatedVal = Array.isArray(val) ? val : [val];
+ updateSettings({ displayAttributes: updatedVal });
+ }}
+ />
+ )}
</div>
</div>
</SettingsContainer>
--
GitLab