feat: pivot click to add filter in canvas

web-common/src/components/table/tanstack-table-column-meta.ts

@@ -7,6 +7,8 @@ declare module "tanstack-table-8-svelte-5" {
     widthPercent?: number;
     marginLeft?: string;
     icon?: ComponentType<SvelteComponent>;
+    /** Full path of dimension name/value pairs from root to this header */
+    dimensionPath?: Record<string, string>;
     tooltipFormatter?: (value: unknown) => string | null | undefined;
   }
 }

web-common/src/features/canvas/CanvasComponent.svelte

@@ -45,6 +45,7 @@
     }
   }
   export let selected = false;
+  export let active = false;
   export let ghost = false;
   export let allowPointerEvents = true;
   export let editable = false;
@@ -66,6 +67,7 @@
   role="presentation"
   id={componentName}
   class:selected
+  class:active
   class:editable
   class:opacity-20={ghost}
   style:pointer-events={!allowPointerEvents ? "none" : "auto"}
@@ -111,4 +113,10 @@
 
     outline-style: solid !important;
   }
+
+  .active {
+    @apply shadow-md outline-primary-400 outline-[1.5px];
+
+    outline-style: solid !important;
+  }
 </style>

web-common/src/features/canvas/CanvasDashboardEmbed.svelte

@@ -26,10 +26,12 @@
       _maxWidth,
       filtersEnabledStore,
       themeName,
+      activeComponent: activeComponentStore,
     },
   } = getCanvasStore(canvasName, instanceId));
 
   $: components = $componentsStore;
+  $: activeComponentId = $activeComponentStore;
 
   $: filtersEnabled = $filtersEnabledStore;
   $: maxWidth = $_maxWidth;
@@ -56,6 +58,7 @@
         {components}
         {maxWidth}
         {navigationEnabled}
+        {activeComponentId}
       />
     {:else}
       <div class="size-full flex items-center justify-center">

web-common/src/features/canvas/StaticCanvasRow.svelte

@@ -14,6 +14,7 @@
   export let components: Map<string, BaseCanvasComponent>;
   export let heightUnit: string = "px";
   export let navigationEnabled: boolean = true;
+  export let activeComponentId: string | null = null;
 
   $: ({ height, items: _itemIds, widths: itemWidths } = row);
 
@@ -36,7 +37,11 @@
     {@const component = components.get(id)}
     <ItemWrapper type={component?.type} zIndex={4 - columnIndex}>
       {#if component}
-        <CanvasComponent {component} {navigationEnabled} />
+        <CanvasComponent
+          {component}
+          {navigationEnabled}
+          active={activeComponentId === id}
+        />
       {:else}
         <ComponentError error="No valid component {id} in project" />
       {/if}

web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte

@@ -79,5 +79,6 @@
   {pivotDataStore}
   pivotConfig={config}
   {pivotState}
+  {component}
   {widthScopeKey}
 />

web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte

@@ -4,13 +4,19 @@
   import PivotEmpty from "@rilldata/web-common/features/dashboards/pivot/PivotEmpty.svelte";
   import PivotError from "@rilldata/web-common/features/dashboards/pivot/PivotError.svelte";
   import PivotTable from "@rilldata/web-common/features/dashboards/pivot/PivotTable.svelte";
-  import {
-    type PivotDataStore,
-    type PivotDataStoreConfig,
-    type PivotState,
+  import type {
+    PivotDataStore,
+    PivotDataStoreConfig,
+    PivotState,
   } from "@rilldata/web-common/features/dashboards/pivot/types";
+  import type { PivotCanvasComponent } from "./index";
+  import {
+    createPivotClickToFilter,
+    type PivotClickToFilterResult,
+  } from "./pivot-click-to-filter";
 
-  import type { Readable, Writable } from "svelte/store";
+  import { onDestroy } from "svelte";
+  import { derived, get, type Readable, type Writable } from "svelte/store";
 
   export let schema: {
     isValid: boolean;
@@ -21,11 +27,62 @@
   export let pivotState: Writable<PivotState>;
   export let widthScopeKey: string;
   export let hasHeader = false;
+  export let component: PivotCanvasComponent;
 
   $: pivotColumns = splitPivotChips($pivotState.columns);
 
   $: hasColumnAndNoMeasure =
     pivotColumns.dimension.length > 0 && pivotColumns.measure.length === 0;
+
+  // FilterManager and metrics view for filter application
+  $: canvasEntity = component.parent;
+  $: filterManager = canvasEntity.filterManager;
+  $: spec = component.specStore;
+  $: metricsViewName = $spec?.metrics_view;
+  $: selfFilteredDimensions = component.selfFilteredDimensions;
+
+  $: whereFilterStore = derived(filterManager.filterMapStore, (filterMap) => {
+    return metricsViewName ? filterMap.get(metricsViewName) : undefined;
+  });
+
+  // Create click-to-filter orchestration; recreated when inputs become available
+  let clickToFilter: PivotClickToFilterResult | undefined;
+
+  $: {
+    clickToFilter?.destroy();
+    clickToFilter = undefined;
+
+    if (pivotDataStore && pivotConfig && metricsViewName) {
+      const componentId = component.id;
+      clickToFilter = createPivotClickToFilter({
+        pivotConfig,
+        pivotDataStore,
+        filterManager,
+        metricsViewName,
+        componentId,
+        activeComponent: canvasEntity.activeComponent,
+        selfFilteredDimensions,
+        whereFilterStore,
+        onBecomeActive: () => canvasEntity.setActiveComponent(componentId),
+        onBecomeInactive: () => {
+          if (get(canvasEntity.activeComponent) === componentId) {
+            canvasEntity.clearActiveComponent();
+          }
+        },
+      });
+    }
+  }
+
+  onDestroy(() => clickToFilter?.destroy());
+
+  // Unwrap stores from the factory result for template use
+  $: clickSelectionStore = clickToFilter?.clickSelection;
+  $: clickSelection = clickSelectionStore ? $clickSelectionStore : undefined;
+
+  $: rowSelectionStateStore = clickToFilter?.rowSelectionState;
+  $: rowSelectionState = rowSelectionStateStore
+    ? $rowSelectionStateStore
+    : undefined;
 </script>
 
 <div
@@ -53,6 +110,9 @@
         {pivotDataStore}
         config={pivotConfig}
         {pivotState}
+        {rowSelectionState}
+        {clickSelection}
+        enableClickToFilter
         setPivotExpanded={(expanded) => {
           pivotState.update((state) => ({
             ...state,
@@ -73,6 +133,8 @@
             rowPage: page,
           }));
         }}
+        onCellClickToFilter={clickToFilter?.handleCellClickToFilter}
+        onColumnHeaderClick={clickToFilter?.handleColumnHeaderClick}
       />
     {/if}
   {/if}

web-common/src/features/canvas/components/pivot/index.ts

@@ -54,6 +54,9 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
   config: Readable<PivotDataStoreConfig>;
   pivotDataStore: ReturnType<typeof usePivotForCanvas>;
   pivotState: Writable<PivotState>;
+  /** Dimensions the pivot itself has filtered via click-to-filter.
+   *  These are excluded from the pivot's own data query so all rows remain visible. */
+  selfFilteredDimensions: Writable<Set<string>>;
 
   constructor(resource: V1Resource, parent: CanvasEntity, path: ComponentPath) {
     const type = (resource.component?.state?.validSpec?.renderer ??
@@ -89,12 +92,14 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
     this.type = type;
 
     this.pivotState = writable(this.getInitPivotState(type));
+    this.selfFilteredDimensions = writable(new Set<string>());
 
     this.config = createPivotConfig(
       this.parent,
       this.specStore,
       this.pivotState,
       this.timeAndFilterStore,
+      this.selfFilteredDimensions,
     );
 
     this.pivotDataStore = usePivotForCanvas(
@@ -191,6 +196,12 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
   updateTableType(newTableType: "pivot" | "table") {
     if (!this.parent.fileArtifact) return;
 
+    // Clear active component if this pivot was the active one
+    if (get(this.parent.activeComponent) === this.id) {
+      this.parent.clearActiveComponent();
+    }
+    this.selfFilteredDimensions.set(new Set());
+
     this.type = newTableType;
 
     this.pivotState.set(this.getInitPivotState(newTableType));