Add tags support for pivot tables

web-common/src/components/menu/DashboardMetricsDraggableList.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import DraggableList from "@rilldata/web-common/components/draggable-list";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
   import DragHandle from "@rilldata/web-common/components/icons/DragHandle.svelte";
   import EyeIcon from "@rilldata/web-common/components/icons/Eye.svelte";
   import EyeOffIcon from "@rilldata/web-common/components/icons/EyeInvisible.svelte";
@@ -14,18 +13,20 @@
   import { Button } from "../button";
   import Search from "../search/Search.svelte";
   import DashboardMetricsTagRow from "./DashboardMetricsTagRow.svelte";
+  import TagFilterBanner from "./TagFilterBanner.svelte";
   import {
     applyHideAllInTag,
     applyOnlyShowTag,
     applyShowAllInTag,
-    buildTagIndex,
     computeTagVisibility,
+    type TagIndex,
   } from "./tag-utils";
 
   type SelectableItem = MetricsViewSpecMeasure | MetricsViewSpecDimension;
 
   export let selectedItems: string[];
   export let allItems: SelectableItem[] = [];
+  export let tagIndex: TagIndex;
   export let type: "measure" | "dimension" = "measure";
   export let onSelectedChange: (items: string[]) => void;
 
@@ -44,7 +45,6 @@
   $: tooltipText = `Choose ${type === "measure" ? "measures" : "dimensions"} to display`;
   $: pluralLabel = type === "measure" ? "measures" : "dimensions";
 
-  $: tagIndex = buildTagIndex(allItems);
   $: tags = tagIndex.tags;
 
   $: hasTags = tags.length > 0;
@@ -196,23 +196,8 @@
 
         <!-- Right column: shown/hidden lists -->
         <div class="flex flex-col flex-1 min-w-0">
-          {#if filterActive}
-            <div
-              class="flex items-center justify-between gap-x-2 px-3 py-1.5 bg-popover-accent"
-            >
-              <div class="text-xs text-fg-secondary truncate">
-                Filtered by tag
-                <span class="text-fg-primary font-medium">{selectedTag}</span>
-              </div>
-              <button
-                type="button"
-                class="flex items-center gap-x-1 text-xs text-theme-500 hover:text-theme-600 font-medium"
-                onclick={clearTagFilter}
-              >
-                <CancelCircle size="12px" />
-                Clear
-              </button>
-            </div>
+          {#if filterActive && selectedTag}
+            <TagFilterBanner tagName={selectedTag} onClear={clearTagFilter} />
           {/if}
 
           {#key selectedTag}

web-common/src/components/menu/TagFilterBanner.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import * as Tooltip from "@rilldata/web-common/components/tooltip-v2";
+  import CancelCircle from "../icons/CancelCircle.svelte";
+
+  type Props = {
+    tagName: string;
+    onClear: () => void;
+  };
+
+  let { tagName, onClear }: Props = $props();
+</script>
+
+<div class="flex items-center gap-x-1.5 px-3 py-1.5 bg-popover-accent border-b">
+  <span class="text-xs text-fg-secondary flex-none">Filter:</span>
+  <span class="truncate text-xs text-fg-primary font-medium flex-1 min-w-0">
+    {tagName}
+  </span>
+  <Tooltip.Root delayDuration={200}>
+    <Tooltip.Trigger>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          type="button"
+          class="flex-none text-icon-muted hover:text-fg-primary transition-colors"
+          onclick={onClear}
+          aria-label="Clear tag filter"
+        >
+          <CancelCircle size="14px" />
+        </button>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content
+      side="top"
+      class="bg-popover text-fg-primary z-popover text-xs px-2 py-1"
+    >
+      Clear filter
+    </Tooltip.Content>
+  </Tooltip.Root>
+</div>

web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte

@@ -15,6 +15,7 @@
       measures: { getMeasureByName, visibleMeasures },
       leaderboard: { leaderboardSortByMeasureName, leaderboardMeasureNames },
       dimensions: { visibleDimensions, allDimensions },
+      tags: { dimensionTagIndex },
     },
     actions: {
       contextColumn: { setContextColumn },
@@ -78,6 +79,7 @@
     onSelectedChange={(items) =>
       setDimensionVisibility(items, allDimensionNames)}
     allItems={$allDimensions}
+    tagIndex={$dimensionTagIndex}
     selectedItems={visibleDimensionsNames}
   />
   <LeaderboardMeasureNamesDropdown

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

@@ -18,11 +18,18 @@
 </script>
 
 <script lang="ts">
+  import { splitTagItems } from "./pivot-utils";
+
   export let zone: "rows" | "columns" | null = null;
 
+  // Prefix used to identify tag rows in the dropdown's flat name space.
+  // Tag names can collide with dimension/measure ids otherwise.
+  const TAG_PREFIX = "__tag__:";
+
   const {
     selectors: {
       pivot: { dimensions, measures },
+      tags: { combinedTagIndex, dimensionTagIndex, measureTagIndex },
     },
     exploreName,
   } = getStateManagers();
@@ -48,7 +55,36 @@
       !isGrainBigger($timeControlsStore.minTimeGrain, tgo.id),
   );
 
+  // Tag rows count items that are routable for the current zone: rows can
+  // only accept dimensions, so a tag of pure measures has nothing to add
+  // there and is hidden.
+  $: tagGroupItems = $combinedTagIndex.tags
+    .map((t) => {
+      const dimCount = $dimensionTagIndex.itemsByTag.get(t.name)?.length ?? 0;
+      const measCount = $measureTagIndex.itemsByTag.get(t.name)?.length ?? 0;
+      const usable = zone === "rows" ? dimCount : dimCount + measCount;
+      return { tag: t, dimCount, measCount, usable };
+    })
+    .filter((t) => t.usable > 0)
+    .map(({ tag, dimCount, measCount }) => ({
+      name: `${TAG_PREFIX}${tag.name}`,
+      label:
+        dimCount > 0 && measCount > 0
+          ? `${tag.name} (${dimCount} dim · ${measCount} meas)`
+          : dimCount > 0
+            ? `${tag.name} (${dimCount} dim)`
+            : `${tag.name} (${measCount} meas)`,
+    }));
+
   $: selectableGroups = [
+    ...(tagGroupItems.length > 0
+      ? [
+          <SearchableFilterSelectableGroup>{
+            name: "TAGS",
+            items: tagGroupItems,
+          },
+        ]
+      : []),
     ...(zone === "columns"
       ? [
           <SearchableFilterSelectableGroup>{
@@ -83,7 +119,21 @@
     ...timeGrainOptions,
   ];
 
-  function handleSelectValue(name) {
+  function handleSelectValue(name: string) {
+    if (name.startsWith(TAG_PREFIX)) {
+      const tagName = name.slice(TAG_PREFIX.length);
+      const { dimensions: dims, measures: meas } = splitTagItems(
+        tagName,
+        $dimensionTagIndex,
+        $measureTagIndex,
+      );
+      const toAdd = zone === "rows" ? dims : [...dims, ...meas];
+      for (const item of toAdd) {
+        metricsExplorerStore.addPivotField($exploreName, item, zone === "rows");
+      }
+      return;
+    }
+
     const selectedItem = allDimensionsMeasures.find(
       (item) => item.id === name,
     ) as PivotChipData;

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

@@ -26,12 +26,28 @@
   } from "@rilldata/web-common/features/dashboards/pivot/time-pill-utils";
   import { timePillSelectors } from "./time-pill-store";
 
-  export type Zone = "rows" | "columns" | "Time" | "Measures" | "Dimensions";
+  export type Zone =
+    | "rows"
+    | "columns"
+    | "Time"
+    | "Measures"
+    | "Dimensions"
+    | "tags";
+
+  // When a tag chip is being dragged the drop receivers do a bulk-add instead
+  // of the per-chip splice path. The dimensions and measures arrays are
+  // precomputed at drag-start so each receiver does not have to re-split.
+  export type TagDragPayload = {
+    tagName: string;
+    dimensions: PivotChipData[];
+    measures: PivotChipData[];
+  };
 
   export type DragData = {
     source: Zone;
     width: number;
     chip: PivotChipData;
+    tagPayload?: TagDragPayload;
   };
 
   export const dragDataStore = writable<null | DragData>(null);
@@ -70,10 +86,14 @@
     (i) => i.type !== PivotChipType.Measure,
   );
 
+  $: isTagDrag = !!dragData?.tagPayload;
+
   $: isValidDropZone =
     isDropLocation &&
     dragData &&
-    (zone === "columns" || dragChip?.type !== PivotChipType.Measure);
+    (isTagDrag ||
+      zone === "columns" ||
+      dragChip?.type !== PivotChipType.Measure);
 
   // Get available grains from the store
   const availableGrainsStore = timePillSelectors.getAvailableGrains("time");
@@ -134,12 +154,31 @@
     window.removeEventListener("mousemove", detectDragStart);
   }
 
-  function handleDrop() {
+  function handleDrop(e: MouseEvent) {
     if (zoneStartedDrag)
       $controllerStore?.abort("Drag cancelled - item dropped");
 
+    // Holding CMD (mac) or Ctrl flips the tag drop from append to replace,
+    // matching the click-side affordance on the tag row.
+    const replace = e.metaKey || e.ctrlKey;
+
     if (isValidDropZone) {
-      if (dragChip && ghostIndex !== null) {
+      if (dragData?.tagPayload) {
+        // Bulk-add path for tag drops. Skips ghost-index positioning since
+        // we are inserting multiple chips, not a single one. Cross-zone
+        // cleanup on replace happens in the auto-arrange zone or the click
+        // affordances on the tag row — DragList only manages its own zone.
+        const { dimensions, measures } = dragData.tagPayload;
+        const newItems =
+          zone === "rows" ? dimensions : [...dimensions, ...measures];
+        if (replace) {
+          onUpdate(newItems);
+        } else if (newItems.length > 0) {
+          const existing = new Set(items.map((c) => c.id));
+          const additions = newItems.filter((c) => !existing.has(c.id));
+          if (additions.length > 0) onUpdate([...items, ...additions]);
+        }
+      } else if (dragChip && ghostIndex !== null) {
         const temp = [...items];
 
         let chipToAdd = dragChip;

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import Pivot from "@rilldata/web-common/components/icons/Pivot.svelte";
+  import { modifierHeld } from "@rilldata/web-common/lib/modifier-key";
+  import { slide } from "svelte/transition";
+  import { dragDataStore } from "./DragList.svelte";
+  import type { PivotChipData } from "./types";
+
+  export let rows: PivotChipData[];
+  export let columns: PivotChipData[];
+  export let setRows: (items: PivotChipData[]) => void;
+  export let setColumns: (items: PivotChipData[]) => void;
+
+  $: dragData = $dragDataStore;
+  // Auto-arrange only makes sense for mixed tags: a pure-dim or pure-measure
+  // tag has a single natural target so the user can drop on Rows or Columns
+  // directly.
+  $: visible =
+    !!dragData?.tagPayload &&
+    dragData.tagPayload.dimensions.length > 0 &&
+    dragData.tagPayload.measures.length > 0;
+
+  let hover = false;
+
+  function handleDrop(e: MouseEvent) {
+    if (!dragData?.tagPayload) return;
+    const replace = e.metaKey || e.ctrlKey;
+    const { dimensions, measures } = dragData.tagPayload;
+    if (replace) {
+      // Both zones are set to the natural slice of the tag; cross-zone
+      // cleanup happens implicitly since the zones don't overlap.
+      setRows(dimensions);
+      setColumns(measures);
+    } else {
+      if (dimensions.length > 0) {
+        const existingRows = new Set(rows.map((c) => c.id));
+        const dimAdds = dimensions.filter((d) => !existingRows.has(d.id));
+        if (dimAdds.length > 0) setRows([...rows, ...dimAdds]);
+      }
+      if (measures.length > 0) {
+        const existingCols = new Set(columns.map((c) => c.id));
+        const measAdds = measures.filter((m) => !existingCols.has(m.id));
+        if (measAdds.length > 0) setColumns([...columns, ...measAdds]);
+      }
+    }
+    dragDataStore.set(null);
+    hover = false;
+  }
+</script>
+
+{#if visible && dragData?.tagPayload}
+  <div class="header-row" transition:slide={{ duration: 160, axis: "y" }}>
+    <span class="row-label">
+      <Pivot size="16px" /> Auto
+    </span>
+    <div
+      role="presentation"
+      class="auto-arrange-zone"
+      class:hover
+      class:replace={$modifierHeld}
+      onmouseenter={() => (hover = true)}
+      onmouseleave={() => (hover = false)}
+      onmouseup={handleDrop}
+      aria-label={$modifierHeld
+        ? "Drop here to replace rows and columns with this tag"
+        : "Drop here to auto-arrange tag"}
+    >
+      {#if $modifierHeld}
+        Drop to <strong>replace</strong>:
+        <strong>{dragData.tagPayload.dimensions.length}</strong>
+        {dragData.tagPayload.dimensions.length === 1 ? "dim" : "dims"}
+        → rows,
+        <strong>{dragData.tagPayload.measures.length}</strong>
+        {dragData.tagPayload.measures.length === 1 ? "measure" : "measures"}
+        → columns
+      {:else}
+        Drop here to split:
+        <strong>{dragData.tagPayload.dimensions.length}</strong>
+        {dragData.tagPayload.dimensions.length === 1 ? "dim" : "dims"}
+        → rows,
+        <strong>{dragData.tagPayload.measures.length}</strong>
+        {dragData.tagPayload.measures.length === 1 ? "measure" : "measures"}
+        → columns (<span class="kbd">⌘</span> + Drop to replace)
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style lang="postcss">
+  .header-row {
+    @apply flex items-center gap-x-2 px-2;
+  }
+
+  .row-label {
+    @apply w-20 flex items-center gap-x-1 flex-shrink-0 text-fg-secondary;
+  }
+
+  .auto-arrange-zone {
+    @apply flex-1 flex items-center justify-center gap-x-1;
+    @apply rounded-sm border border-dashed border-blue-400;
+    @apply bg-blue-50/50 text-fg-secondary text-xs;
+    @apply py-2 px-3;
+  }
+
+  .auto-arrange-zone.hover {
+    @apply bg-blue-100 border-blue-500 text-fg-primary;
+  }
+
+  .auto-arrange-zone.replace {
+    @apply border-amber-500 bg-amber-50/50;
+  }
+
+  .auto-arrange-zone.replace.hover {
+    @apply bg-amber-100 border-amber-600;
+  }
+
+  .kbd {
+    @apply inline-block px-1 py-px ml-1 rounded-sm border;
+    @apply text-[10px] font-mono text-fg-secondary;
+  }
+</style>