Add search bar to pivot UI (#4108)

* initial search progress

* sidebar recalc fix

* remove console log

web-common/src/features/dashboards/pivot/PivotDrag.svelte

@@ -2,7 +2,7 @@
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import DragList from "./DragList.svelte";
   import type { PivotSidebarSection, PivotChipData } from "./types";
-  import { beforeUpdate } from "svelte";
+  import { afterUpdate } from "svelte";
 </script>
 
 <script lang="ts">
@@ -12,8 +12,9 @@
 
   let container: HTMLDivElement;
 
-  beforeUpdate(() => {
+  afterUpdate(() => {
     if (!container) return;
+    console.log("bottom");
     calculateSize(container);
   });
 
@@ -67,6 +68,11 @@
     @apply pt-3 px-4;
     @apply flex flex-col gap-1 items-start;
     @apply w-full overflow-hidden flex-grow-0;
+    @apply border-b border-slate-200;
+  }
+
+  .container:last-child {
+    @apply border-b-0;
   }
 
   button {

web-common/src/features/dashboards/pivot/PivotSidebar.svelte

@@ -4,7 +4,9 @@
   import PivotDrag from "./PivotDrag.svelte";
   import { getAllowedTimeGrains } from "@rilldata/web-common/lib/time/grains";
   import { PivotChipType } from "./types";
-
+  // import { SearchIcon } from "lucide-svelte";
+  import type { PivotChipData } from "./types";
+  import Search from "@rilldata/web-common/components/icons/Search.svelte";
   const stateManagers = getStateManagers();
   const {
     selectors: {
@@ -14,6 +16,9 @@
 
   const timeControlsStore = useTimeControlStore(getStateManagers());
 
+  let inputEl: HTMLInputElement;
+  let searchText = "";
+
   $: allTimeGrains = getAllowedTimeGrains(
     new Date($timeControlsStore.timeStart!),
     new Date($timeControlsStore.timeEnd!),
@@ -32,18 +37,40 @@
   $: timeGrainOptions = allTimeGrains.filter(
     (tgo) => !usedTimeGrains.some((utg) => utg.id === tgo.id),
   );
+
+  $: filteredMeasures = filterBasedOnSearch($measures, searchText);
+
+  $: filteredDimensions = filterBasedOnSearch($dimensions, searchText);
+
+  function filterBasedOnSearch(fullList: PivotChipData[], search: string) {
+    return fullList.filter((d) =>
+      d.title.toLowerCase().includes(search.toLowerCase()),
+    );
+  }
 </script>
 
 <div class="sidebar">
-  <PivotDrag title="Time" items={timeGrainOptions} />
+  <div
+    class="flex w-full items-center p-2 h-[34px] gap-x-2 border-b border-slate-200"
+  >
+    <button on:click={() => inputEl.focus()}>
+      <Search size="16px" />
+    </button>
 
-  <span class="splitter" />
+    <input
+      bind:value={searchText}
+      bind:this={inputEl}
+      type="text"
+      placeholder="Search"
+      class="w-full h-full"
+    />
+  </div>
 
-  <PivotDrag title="Measures" items={$measures} />
+  <PivotDrag title="Time" items={timeGrainOptions} />
 
-  <span class="splitter" />
+  <PivotDrag title="Measures" items={filteredMeasures} />
 
-  <PivotDrag title="Dimensions" items={$dimensions} />
+  <PivotDrag title="Dimensions" items={filteredDimensions} />
 </div>
 
 <style lang="postcss">