feat: adds dropdown icons and filtering

src/lib/vis/visualizations/vis1D/Vis1D.tsx

+import { DropdownContainer, DropdownItem, DropdownItemContainer, DropdownTrigger, Icon } from '@/lib/components';
 import { Button } from '@/lib/components/buttons';
+import { getDataTypeIcon } from '@/lib/components/DataTypeIcon';
 import { Input } from '@/lib/components/inputs';
 import { EntityPill } from '@/lib/components/pills/Pill';
 import { SettingsContainer } from '@/lib/vis/components/config';
 import html2canvas from 'html2canvas';
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { SchemaAttributeTypes } from 'ts-common';
 import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
 import { CustomChartPlotly } from './components/CustomChartPlotly';
 import { plotTypeOptions, preparePlotData } from './components/MakePlot';
@@ -102,7 +105,9 @@ const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({
 const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<Vis1DProps>) => {
   // !TODO: include relationship
   const mutablePlotTypes = [...plotTypeOptions];
-  const [attributeOptions, setAttributeOptions] = useState<string[]>([]);
+  const [attributeOptions, setAttributeOptions] = useState<{ name: string; type: string }[]>([]);
+  const [openXaxisLabel, setOpenXaxisLabel] = useState<boolean>(false);
+  const [filter, setFilter] = useState<string>('');
 
   useEffect(() => {
     if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
@@ -121,22 +126,29 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
     if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0 && settings.selectedEntity != '') {
       const labelNodes = graphMetadata.nodes.labels;
       if (labelNodes.includes(settings.selectedEntity)) {
-        const newAttributeOptions = Object.keys(graphMetadata.nodes.types[settings.selectedEntity].attributes);
+        const newAttributeOptions: { name: string; type: string }[] = Object.entries(
+          graphMetadata.nodes.types[settings.selectedEntity].attributes,
+        )
+          .filter(([key]) => key.toLowerCase().includes(filter.toLowerCase()))
+          .map(([key, value]) => ({
+            name: key,
+            type: value.attributeType,
+          }));
+
         if (settings.xAxisLabel === '') {
-          updateSettings({ xAxisLabel: newAttributeOptions[0] });
+          updateSettings({ xAxisLabel: newAttributeOptions[0].name });
 
           // !TODO: instead of contain "datum" chekc type: if it is date
-          if (newAttributeOptions[0].includes('Datum')) {
+          if (newAttributeOptions[0].name.includes('Datum')) {
             updateSettings({ groupData: 'yearly' });
           } else {
             updateSettings({ groupData: undefined });
           }
         }
-        newAttributeOptions.unshift(' ');
         setAttributeOptions(newAttributeOptions);
       }
     }
-  }, [graphMetadata, settings.selectedEntity]);
+  }, [graphMetadata, settings.selectedEntity, filter]);
 
   return (
     <SettingsContainer>
@@ -179,22 +191,44 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
           />
         </div>
         <div className="mb-2">
-          <Input
-            type="dropdown"
-            label="X-axis:"
-            value={settings.xAxisLabel}
-            options={attributeOptions}
-            onChange={value => {
-              const valueString = value as string;
-              updateSettings({ xAxisLabel: valueString });
+          <DropdownContainer open={openXaxisLabel} onOpenChange={setOpenXaxisLabel}>
+            <span>X Axis</span>
+            <DropdownTrigger title={settings.xAxisLabel} size="md" variant="outline" onClick={() => setOpenXaxisLabel(v => !v)} />
+            <DropdownItemContainer className="max-h-none">
+              <Input
+                label=""
+                type={'text'}
+                placeholder="Filter"
+                size="xs"
+                className="mb-1 rounded-sm w-full"
+                value={filter}
+                onClick={e => e.stopPropagation()}
+                onChange={v => setFilter(v)}
+              />
+              {attributeOptions.map(attr => (
+                <DropdownItem
+                  key={attr.name + attr.type}
+                  value={attr.name}
+                  className="w-full"
+                  onClick={value => {
+                    const valueString = value as string;
+                    updateSettings({ xAxisLabel: valueString });
 
-              if (!valueString.includes('Datum')) {
-                updateSettings({ groupData: undefined });
-              } else {
-                updateSettings({ groupData: 'monthly' });
-              }
-            }}
-          />
+                    if (!valueString.includes('Datum')) {
+                      updateSettings({ groupData: undefined });
+                    } else {
+                      updateSettings({ groupData: 'monthly' });
+                    }
+                    setOpenXaxisLabel(false);
+                  }}
+                >
+                  <div className="flex items-center gap-1">
+                    <Icon component={getDataTypeIcon(attr.type as SchemaAttributeTypes)} size={16} />
+                  </div>
+                </DropdownItem>
+              ))}
+            </DropdownItemContainer>
+          </DropdownContainer>
         </div>
         {(settings.plotType === 'scatter' || settings.plotType === 'line') && (
           <div className="mb-2">