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 { appendChipsToZone, 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 },
+      pivot: { dimensions, measures, rows, originalColumns },
+      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,16 +119,42 @@
     ...timeGrainOptions,
   ];
 
-  function handleSelectValue(name) {
-    const selectedItem = allDimensionsMeasures.find(
-      (item) => item.id === name,
-    ) as PivotChipData;
-
-    metricsExplorerStore.addPivotField(
-      $exploreName,
-      selectedItem,
-      zone === "rows",
-    );
+  function handleSelectValue(name: string) {
+    let toAdd: PivotChipData[];
+
+    if (name.startsWith(TAG_PREFIX)) {
+      const tagName = name.slice(TAG_PREFIX.length);
+      const { dimensions: dims, measures: meas } = splitTagItems(
+        tagName,
+        $dimensionTagIndex,
+        $measureTagIndex,
+      );
+      toAdd = zone === "rows" ? dims : [...dims, ...meas];
+    } else {
+      const selectedItem = allDimensionsMeasures.find(
+        (item) => item.id === name,
+      ) as PivotChipData | undefined;
+      if (!selectedItem) return;
+      toAdd = [selectedItem];
+    }
+
+    if (toAdd.length === 0) return;
+
+    // appendChipsToZone dedups against both zones so a dimension never lands
+    // in rows and columns at once. The dropdown sources already exclude
+    // placed dimensions/measures, but time grains and tag bulk-adds can
+    // include items already present elsewhere — this is the catch.
+    if (zone === "rows") {
+      const next = appendChipsToZone($rows, $originalColumns, toAdd);
+      if (next.length !== $rows.length) {
+        metricsExplorerStore.setPivotRows($exploreName, next);
+      }
+    } else {
+      const next = appendChipsToZone($originalColumns, $rows, toAdd);
+      if (next.length !== $originalColumns.length) {
+        metricsExplorerStore.setPivotColumns($exploreName, next);
+      }
+    }
   }
 </script>
 

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,33 @@
     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 (newItems.length === 0) {
+          // Pure-measure tag dropped on rows, for instance: nothing to do.
+        } else if (replace) {
+          onUpdate(newItems);
+        } else {
+          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;