feat: use standard entity pill for table vis settings

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>