Revert "Disable search for non-string dimensions (#4517)"

This reverts commit 96322c2.

web-common/src/components/chip/removable-list-chip/RemovableListChip.svelte

@@ -29,7 +29,6 @@ are details left to the consumer of the component; this component should remain
   export let name: string;
   export let selectedValues: string[];
   export let allValues: string[] | null;
-  export let enableSearch = true;
 
   /** an optional type label that will appear in the tooltip */
   export let typeLabel: string;
@@ -55,29 +54,29 @@ are details left to the consumer of the component; this component should remain
 </script>
 
 <WithTogglableFloatingElement
-  alignment="start"
   bind:active
-  distance={8}
   let:toggleFloatingElement
+  distance={8}
+  alignment="start"
 >
   <Tooltip
-    activeDelay={60}
+    location="bottom"
     alignment="start"
     distance={8}
-    location="bottom"
+    activeDelay={60}
     suppress={active}
   >
     <Chip
-      {...colors}
-      {active}
-      {label}
+      removable
       on:click={() => {
         toggleFloatingElement();
         dispatch("click");
       }}
       on:remove={() => dispatch("remove")}
+      {active}
+      {...colors}
+      {label}
       outline
-      removable
     >
       <!-- remove button tooltip -->
       <svelte:fragment slot="remove-tooltip">
@@ -88,11 +87,11 @@ are details left to the consumer of the component; this component should remain
       </svelte:fragment>
       <!-- body -->
       <RemovableListBody
-        {active}
-        label={name}
-        show={1}
         slot="body"
+        label={name}
         values={selectedValues}
+        show={1}
+        {active}
       />
     </Chip>
     <div slot="tooltip-content" transition:fly={{ duration: 100, y: 4 }}>
@@ -109,15 +108,14 @@ are details left to the consumer of the component; this component should remain
     </div>
   </Tooltip>
   <RemovableListMenu
-    {allValues}
-    {enableSearch}
+    slot="floating-element"
     {excludeMode}
-    on:apply
-    on:click-outside={handleDismiss}
+    {allValues}
+    {selectedValues}
     on:escape={handleDismiss}
+    on:click-outside={handleDismiss}
+    on:apply
     on:search
     on:toggle
-    {selectedValues}
-    slot="floating-element"
   />
 </WithTogglableFloatingElement>

web-common/src/components/chip/removable-list-chip/RemovableListMenu.svelte

@@ -11,7 +11,6 @@
   export let excludeMode: boolean;
   export let selectedValues: string[];
   export let allValues: string[] | null = [];
-  export let enableSearch = true;
 
   let searchText = "";
 
@@ -38,27 +37,25 @@
 </script>
 
 <Menu
+  paddingTop={1}
+  paddingBottom={0}
+  rounded={false}
   focusOnMount={false}
-  maxHeight="400px"
   maxWidth="480px"
   minHeight="150px"
-  on:click-outside
+  maxHeight="400px"
   on:escape
-  paddingBottom={0}
-  paddingTop={1}
-  rounded={false}
+  on:click-outside
 >
-  {#if enableSearch}
-    <!-- the min-height is set to have about 3 entries in it -->
-    <div class="px-3 py-2">
-      <Search
-        bind:value={searchText}
-        on:input={onSearch}
-        label="Search list"
-        showBorderOnFocus={false}
-      />
-    </div>
-  {/if}
+  <!-- the min-height is set to have about 3 entries in it -->
+  <div class="px-3 py-2">
+    <Search
+      bind:value={searchText}
+      on:input={onSearch}
+      label="Search list"
+      showBorderOnFocus={false}
+    />
+  </div>
 
   <!-- apply a wrapped flex element to ensure proper bottom spacing between body and footer -->
   <div class="flex flex-col flex-1 overflow-auto w-full pb-1">
@@ -98,15 +95,15 @@
     {/if}
   </div>
   <Footer>
-    <Button on:click={toggleSelectAll} type="text">
+    <Button type="text" on:click={toggleSelectAll}>
       {#if allSelected}
         Deselect all
       {:else}
         Select all
       {/if}
     </Button>
 
-    <Button on:click={() => dispatch("toggle")} type="secondary">
+    <Button type="secondary" on:click={() => dispatch("toggle")}>
       {#if excludeMode}
         Include
       {:else}

web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { getDimensionType } from "@rilldata/web-common/features/dashboards/filters/dimension-filters/getDimensionType";
-
   /**
    * DimensionDisplay.svelte
    * -------------------------
@@ -9,7 +7,6 @@
    */
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
-  import { STRING_LIKES } from "@rilldata/web-common/lib/duckdb-data-types";
   import {
     createQueryServiceMetricsViewComparison,
     createQueryServiceMetricsViewTotals,
@@ -58,12 +55,6 @@
   let searchText = "";
 
   $: instanceId = $runtime.instanceId;
-  $: dimensionType = getDimensionType(
-    instanceId,
-    $metricsViewName,
-    dimensionName,
-  );
-  $: stringLikeDimension = STRING_LIKES.has($dimensionType.data ?? "");
 
   const timeControlsStore = useTimeControlStore(stateManagers);
 
@@ -167,10 +158,9 @@
         isRowsEmpty={!tableRows.length}
         isFetching={$sortedQuery?.isFetching}
         on:search={(event) => {
-          if (stringLikeDimension) searchText = event.detail;
+          searchText = event.detail;
         }}
         on:toggle-all-search-items={() => toggleAllSearchItems()}
-        enableSearch={stringLikeDimension}
       />
     </div>
 

web-common/src/features/dashboards/dimension-table/DimensionHeader.svelte

@@ -24,7 +24,6 @@
   export let isFetching: boolean;
   export let areAllTableRowsSelected = false;
   export let isRowsEmpty = true;
-  export let enableSearch = true;
 
   const dispatch = createEventDispatcher();
 
@@ -121,7 +120,7 @@
           <Close />
         </button>
       </div>
-    {:else if enableSearch}
+    {:else}
       <button
         class="flex items-center gap-x-2 p-1.5 text-gray-700"
         in:fly|global={{ x: 10, duration: 300 }}

web-common/src/features/dashboards/filters/FilterChips.svelte

@@ -75,9 +75,9 @@ The main feature-set component for dashboard filters
 </script>
 
 <div
-  class="grid items-center place-items-center"
   class:ui-copy-icon={true}
   class:ui-copy-icon-inactive={false}
+  class="grid items-center place-items-center"
   style:height={ROW_HEIGHT}
   style:width={ROW_HEIGHT}
 >
@@ -101,6 +101,7 @@ The main feature-set component for dashboard filters
             {name}
             {label}
             {selectedValues}
+            column={dimension.column}
             on:remove={() => removeDimensionFilter(name)}
             on:apply={(event) =>
               toggleDimensionValueSelection(name, event.detail, true)}

web-common/src/features/dashboards/filters/Filters.svelte

@@ -106,6 +106,7 @@
               {name}
               {label}
               {selectedValues}
+              column={dimensionName}
               on:remove={() => removeDimensionFilter(name)}
               on:apply={(event) =>
                 toggleDimensionValueSelection(name, event.detail, true)}

web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte

@@ -3,15 +3,13 @@
     defaultChipColors,
     excludeChipColors,
   } from "@rilldata/web-common/components/chip/chip-types";
-  import { getDimensionType } from "@rilldata/web-common/features/dashboards/filters/dimension-filters/getDimensionType";
-  import { STRING_LIKES } from "@rilldata/web-common/lib/duckdb-data-types";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import RemovableListChip from "../../../../components/chip/removable-list-chip/RemovableListChip.svelte";
   import { getFilterSearchList } from "../../selectors/index";
   import { getStateManagers } from "../../state-managers/state-managers";
 
   export let name: string;
   export let label: string;
+  export let column: string;
   export let selectedValues: string[];
 
   const StateManagers = getStateManagers();
@@ -20,7 +18,6 @@
     actions: {
       dimensionsFilter: { toggleDimensionFilterMode },
     },
-    metricsViewName,
   } = StateManagers;
 
   $: isInclude = !$dashboardStore.dimensionFilterExcludeMode.get(name);
@@ -30,26 +27,17 @@
   let allValues: Record<string, string[]> = {};
   let topListQuery: ReturnType<typeof getFilterSearchList> | undefined;
 
-  $: dimensionType = getDimensionType(
-    $runtime.instanceId,
-    $metricsViewName,
-    name,
-  );
-  $: stringLikeDimension = STRING_LIKES.has($dimensionType.data ?? "");
-
   $: if (isOpen) {
     topListQuery = getFilterSearchList(StateManagers, {
       dimension: name,
       searchText,
-      addNull: searchText.length !== 0 && "null".includes(searchText),
-      type: $dimensionType.data,
+      addNull: "null".includes(searchText),
     });
   }
 
   $: if (!$topListQuery?.isFetching) {
-    const topListData = $topListQuery?.data?.rows ?? [];
-    allValues[name] =
-      topListData.map((datum) => datum.dimensionValue as any) ?? [];
+    const topListData = $topListQuery?.data?.data ?? [];
+    allValues[name] = topListData.map((datum) => datum[column]) ?? [];
   }
 
   function getColorForChip(isInclude: boolean) {
@@ -66,22 +54,21 @@
 </script>
 
 <RemovableListChip
-  allValues={allValues[name]}
-  colors={getColorForChip(isInclude)}
-  enableSearch={stringLikeDimension}
-  excludeMode={!isInclude}
-  label="View filter"
-  name={isInclude ? label : `Exclude ${label}`}
+  on:remove
   on:apply
-  on:click={() => setOpen()}
   on:mount={() => setOpen()}
-  on:remove
+  on:click={() => setOpen()}
+  on:toggle={() => toggleDimensionFilterMode(name)}
   on:search={(event) => {
     handleSearch(event.detail);
   }}
-  on:toggle={() => toggleDimensionFilterMode(name)}
-  {selectedValues}
   typeLabel="dimension"
+  name={isInclude ? label : `Exclude ${label}`}
+  excludeMode={!isInclude}
+  colors={getColorForChip(isInclude)}
+  label="View filter"
+  {selectedValues}
+  allValues={allValues[name]}
 >
   <svelte:fragment slot="body-tooltip-content">
     Click to edit the the filters in this dimension