From a349c387e4d1b5796ec0e731d217cda62aa544f8 Mon Sep 17 00:00:00 2001
From: Marcos Pieras <pieras.marcos@gmail.com>
Date: Wed, 31 Jul 2024 08:33:07 +0000
Subject: [PATCH] feat: use standard entity pill for table vis settings
---
.../vis/visualizations/tablevis/tablevis.tsx | 112 +++++++++++-------
1 file changed, 68 insertions(+), 44 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 6121b4c12..bfe1a99ed 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -5,6 +5,7 @@ import { Input } from '@graphpolaris/shared/lib/components/inputs';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { useSearchResultData } from '@graphpolaris/shared/lib/data-access';
+import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill';
export type TableProps = {
id: string;
@@ -144,51 +145,74 @@ const TableSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
return (
<SettingsContainer>
- <Input
- type="dropdown"
- label="Select entity"
- value={settings.displayEntity}
- onChange={(val) => updateSettings({ displayEntity: val as string })}
- options={graphMetadata.nodes.labels}
- />
- <Input type="boolean" label="Show barplot" value={settings.showBarplot} onChange={(val) => updateSettings({ showBarplot: val })} />
- <Input
- type="dropdown"
- label="Items per page"
- value={settings.itemsPerPage}
- onChange={(val) => updateSettings({ itemsPerPage: val as number })}
- options={[10, 25, 50, 100]}
- />
- <Input
- type="number"
- label="Max Bars in Bar Plots"
- value={settings.maxBarsCount}
- onChange={(val) => updateSettings({ maxBarsCount: val })}
- />
- <div>
- <span className="text-sm">Attributes to display:</span>
- <Button
- className="w-full text-justify justify-start"
- variantType="secondary"
- variant="ghost"
- size="sm"
- onClick={toggleCollapseAttr}
- iconComponent="icon-[ic--baseline-arrow-drop-down]"
- >
- attributes:{' '}
- </Button>
- <div className="">
- {!areCollapsedAttr && (
- <Input
- type="checkbox"
- value={settings.displayAttributes}
- options={selectedNodeAttributes}
- onChange={(val: string[] | string) => {
- const updatedVal = Array.isArray(val) ? val : [val];
- updateSettings({ displayAttributes: updatedVal });
- }}
+ <div className="my-2">
+ <Input
+ className="w-full text-justify justify-center"
+ type="dropdown"
+ value={settings.displayEntity}
+ options={graphMetadata.nodes.labels}
+ onChange={(val) => updateSettings({ displayEntity: val as string })}
+ overrideRender={
+ <EntityPill
+ title={
+ <div className="flex flex-row justify-between items-center cursor-pointer">
+ <span>{settings.displayEntity || ''}</span>
+ <Button variantType="secondary" variant="ghost" size="2xs" iconComponent="icon-[ic--baseline-arrow-drop-down]" />
+ </div>
+ }
/>
- )}
+ }
+ ></Input>
+ <div className="my-2">
+ <Input
+ type="boolean"
+ label="Show barplot"
+ value={settings.showBarplot}
+ onChange={(val) => updateSettings({ showBarplot: val })}
+ />
+ </div>
+ <div className="my-2">
+ <Input
+ type="dropdown"
+ label="Items per page"
+ value={settings.itemsPerPage}
+ onChange={(val) => updateSettings({ itemsPerPage: val as number })}
+ options={[10, 25, 50, 100]}
+ />
+ </div>
+ <div className="my-2">
+ <Input
+ type="number"
+ label="Max Bars in Bar Plots"
+ value={settings.maxBarsCount}
+ onChange={(val) => updateSettings({ maxBarsCount: val })}
+ />
+ </div>
+ <div className="flex flex-col items-start space-y-2">
+ <span className="text-sm">Attributes to display:</span>
+ <Button
+ className="w-full text-justify justify-start"
+ variantType="secondary"
+ variant="ghost"
+ size="sm"
+ onClick={toggleCollapseAttr}
+ iconComponent={areCollapsedAttr ? 'icon-[ic--baseline-arrow-right]' : 'icon-[ic--baseline-arrow-drop-down]'}
+ >
+ attributes:{' '}
+ </Button>
+ <div className="">
+ {!areCollapsedAttr && (
+ <Input
+ type="checkbox"
+ value={settings.displayAttributes}
+ options={selectedNodeAttributes}
+ onChange={(val: string[] | string) => {
+ const updatedVal = Array.isArray(val) ? val : [val];
+ updateSettings({ displayAttributes: updatedVal });
+ }}
+ />
+ )}
+ </div>
</div>
</div>
</SettingsContainer>
--
GitLab