From d151c5f80dd4795db3e508495b3cbe7e68e29f43 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Sun, 11 Jan 2026 20:13:12 +0530
Subject: [PATCH 01/53] init pivot click filter

---
 .../pivot/CanvasPivotDisplay.svelte           |  1 +
 .../pivot/CanvasPivotRenderer.svelte          | 77 +++++++++++++++++++
 .../dashboards/pivot/PivotTable.svelte        | 15 +++-
 .../pivot/pivot-filter-extraction.ts          | 44 +++++++++++
 4 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts

diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
index 4bc857e4472..dfa14c78cb3 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte
@@ -78,4 +78,5 @@
   {pivotDataStore}
   pivotConfig={config}
   {pivotState}
+  {component}
 />
diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
index 1e183177beb..cd416df6417 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import ComponentError from "@rilldata/web-common/features/components/ComponentError.svelte";
+  import { extractDimensionFiltersFromExpression } from "@rilldata/web-common/features/dashboards/pivot/pivot-filter-extraction";
   import { splitPivotChips } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
   import PivotEmpty from "@rilldata/web-common/features/dashboards/pivot/PivotEmpty.svelte";
   import PivotError from "@rilldata/web-common/features/dashboards/pivot/PivotError.svelte";
@@ -9,7 +10,9 @@
     type PivotDataStoreConfig,
     type PivotState,
   } from "@rilldata/web-common/features/dashboards/pivot/types";
+  import type { PivotCanvasComponent } from "./index";
 
+  import { tick } from "svelte";
   import type { Readable, Writable } from "svelte/store";
 
   export let schema: {
@@ -20,11 +23,84 @@
   export let pivotConfig: Readable<PivotDataStoreConfig> | undefined;
   export let pivotState: Writable<PivotState>;
   export let hasHeader = false;
+  export let component: PivotCanvasComponent;
 
   $: pivotColumns = splitPivotChips($pivotState.columns);
 
   $: hasColumnAndNoMeasure =
     pivotColumns.dimension.length > 0 && pivotColumns.measure.length === 0;
+
+  // Extract FilterManager and metrics view for filter application
+  $: filterManager = component.parent.filterManager;
+  $: spec = component.specStore;
+  $: metricsViewName = $spec?.metrics_view;
+
+  // Click-to-filter callback
+  async function handleCellClickToFilter(rowId: string, columnId: string) {
+    if (!$pivotDataStore) return;
+
+    try {
+      // Set the active cell so the store computes activeCellFilters
+      pivotState.update((state) => ({
+        ...state,
+        activeCell: { rowId, columnId },
+      }));
+
+      // Wait for the next tick to allow the store to react and compute activeCellFilters
+      await tick();
+
+      // Get the computed activeCellFilters from the store
+      const activeCellFilters = $pivotDataStore.activeCellFilters;
+
+      if (!activeCellFilters) return;
+
+      // Extract dimension filters
+      const dimensionFilters = extractDimensionFiltersFromExpression(
+        activeCellFilters.filters,
+      );
+
+      if (dimensionFilters.length === 0) return;
+
+      // Apply all dimension filters at once by toggling them sequentially
+      // on the FilterState (which doesn't trigger URL updates), then apply to URL once
+      const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
+      if (!filterClass) return;
+
+      // Remove temporary filter status for all dimensions
+      dimensionFilters.forEach(({ dimensionName }) => {
+        filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
+      });
+
+      // Toggle all dimension values in the filter state
+      // Each call to toggleDimensionValueSelections returns the updated filter string
+      // but doesn't apply it to URL - we just need the final result
+      let filterString: string | null = null;
+      dimensionFilters.forEach(({ dimensionName, values }) => {
+        filterString = filterClass.toggleDimensionValueSelections(
+          dimensionName,
+          values,
+          false, // keepPillVisible
+          false, // isExclusiveFilter
+        );
+      });
+
+      // Apply to URL once with the final filter string
+      if (filterString !== null) {
+        await filterManager.applyFiltersToUrl(
+          new Map([[metricsViewName, filterString]]),
+        );
+      }
+
+      // TODO: Apply time range if present
+      // For now, time range application is deferred as it requires
+      // investigation into the proper mechanism (component.parent.timeState)
+      // if (activeCellFilters.timeRange) {
+      //   // Apply time range...
+      // }
+    } catch (error) {
+      console.error("Error applying cell filters:", error);
+    }
+  }
 </script>
 
 <div
@@ -71,6 +147,7 @@
             rowPage: page,
           }));
         }}
+        onCellClickToFilter={handleCellClickToFilter}
       />
     {/if}
   {/if}
diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte
index 32c9351b9e7..7f0a994fc71 100644
--- a/web-common/src/features/dashboards/pivot/PivotTable.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotTable.svelte
@@ -59,6 +59,9 @@
   export let setPivotRowLimitForExpanded:
     | ((expandIndex: string, limit: number) => void)
     | undefined = undefined;
+  export let onCellClickToFilter:
+    | ((rowId: string, columnId: string) => Promise<void>)
+    | undefined = undefined;
 
   const options: Readable<TableOptions<PivotDataRow>> = derived(
     [pivotDataStore, pivotState],
@@ -222,8 +225,16 @@
 
     if (rowHeader) {
       if (row.getCanExpand()) row.getToggleExpandedHandler()();
-    } else if (setPivotActiveCell && canShowDataViewer) {
-      setPivotActiveCell(rowId, columnId);
+    } else {
+      // Set active cell for dashboard (if enabled)
+      if (setPivotActiveCell && canShowDataViewer) {
+        setPivotActiveCell(rowId, columnId);
+      }
+
+      // Apply filters for canvas (if enabled)
+      if (onCellClickToFilter) {
+        onCellClickToFilter(rowId, columnId);
+      }
     }
   }
 
diff --git a/web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts b/web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts
new file mode 100644
index 00000000000..609c1b63106
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts
@@ -0,0 +1,44 @@
+import {
+  V1Operation,
+  type V1Expression,
+} from "@rilldata/web-common/runtime-client";
+
+export interface ExtractedFilter {
+  dimensionName: string;
+  values: string[];
+}
+
+/**
+ * Extracts dimension filters from a V1Expression structure.
+ * The expression is expected to be an AND operation containing IN operations.
+ *
+ * @param filters - The V1Expression containing dimension filters
+ * @returns Array of extracted dimension filters with their values
+ */
+export function extractDimensionFiltersFromExpression(
+  filters: V1Expression | undefined,
+): ExtractedFilter[] {
+  if (!filters?.cond?.exprs) return [];
+
+  const result: ExtractedFilter[] = [];
+
+  // Walk the AND expression tree
+  for (const expr of filters.cond.exprs) {
+    if (expr.cond?.op === V1Operation.OPERATION_IN) {
+      const ident = expr.cond.exprs?.[0]?.ident;
+      if (!ident) continue;
+
+      // Extract values (skip first expr which is the identifier)
+      const values = expr?.cond?.exprs
+        ?.slice(1)
+        .map((e) => e.val)
+        .filter((val): val is string => val !== undefined && val !== null);
+
+      if (values && values?.length > 0) {
+        result.push({ dimensionName: ident, values });
+      }
+    }
+  }
+
+  return result;
+}

From ee819cc152e1a398aa7e4a3637e531828d910680 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 2 Mar 2026 20:56:59 +0530
Subject: [PATCH 02/53] init pivot click to filter

---
 .../pivot/CanvasPivotRenderer.svelte          | 201 ++++++++++++------
 .../features/canvas/components/pivot/index.ts |   5 +
 .../features/canvas/components/pivot/util.ts  |  58 ++++-
 .../dashboards/pivot/FlatTable.svelte         |  39 +++-
 .../dashboards/pivot/NestedTable.svelte       |  45 +++-
 .../pivot/PivotExpandableCell.svelte          |  19 +-
 .../dashboards/pivot/PivotTable.svelte        |  30 ++-
 .../dashboards/pivot/pivot-data-store.ts      |   1 +
 .../dashboards/pivot/pivot-row-selection.ts   | 124 +++++++++++
 .../features/dashboards/pivot/pivot-utils.ts  |   2 +-
 .../src/features/dashboards/pivot/types.ts    |   1 +
 11 files changed, 440 insertions(+), 85 deletions(-)
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-row-selection.ts

diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
index cd416df6417..4f83c8729e7 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
   import ComponentError from "@rilldata/web-common/features/components/ComponentError.svelte";
   import { extractDimensionFiltersFromExpression } from "@rilldata/web-common/features/dashboards/pivot/pivot-filter-extraction";
-  import { splitPivotChips } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+  import {
+    computePivotRowSelection,
+    extractSelectionDimensionFilters,
+  } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
+  import {
+    getFiltersForCell,
+    splitPivotChips,
+  } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
   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";
@@ -12,8 +19,7 @@
   } from "@rilldata/web-common/features/dashboards/pivot/types";
   import type { PivotCanvasComponent } from "./index";
 
-  import { tick } from "svelte";
-  import type { Readable, Writable } from "svelte/store";
+  import { derived, get, type Readable, type Writable } from "svelte/store";
 
   export let schema: {
     isValid: boolean;
@@ -25,82 +31,140 @@
   export let hasHeader = false;
   export let component: PivotCanvasComponent;
 
+  // Track last clicked cell for ring indicator
+  let lastClickedCell: { rowId: string; columnId: string } | null = null;
+
   $: pivotColumns = splitPivotChips($pivotState.columns);
 
   $: hasColumnAndNoMeasure =
     pivotColumns.dimension.length > 0 && pivotColumns.measure.length === 0;
 
-  // Extract FilterManager and metrics view for filter application
+  // FilterManager and metrics view for filter application
   $: filterManager = component.parent.filterManager;
   $: spec = component.specStore;
   $: metricsViewName = $spec?.metrics_view;
-
-  // Click-to-filter callback
-  async function handleCellClickToFilter(rowId: string, columnId: string) {
-    if (!$pivotDataStore) return;
-
-    try {
-      // Set the active cell so the store computes activeCellFilters
-      pivotState.update((state) => ({
-        ...state,
-        activeCell: { rowId, columnId },
-      }));
-
-      // Wait for the next tick to allow the store to react and compute activeCellFilters
-      await tick();
-
-      // Get the computed activeCellFilters from the store
-      const activeCellFilters = $pivotDataStore.activeCellFilters;
-
-      if (!activeCellFilters) return;
-
-      // Extract dimension filters
-      const dimensionFilters = extractDimensionFiltersFromExpression(
-        activeCellFilters.filters,
-      );
-
-      if (dimensionFilters.length === 0) return;
-
-      // Apply all dimension filters at once by toggling them sequentially
-      // on the FilterState (which doesn't trigger URL updates), then apply to URL once
-      const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
-      if (!filterClass) return;
-
-      // Remove temporary filter status for all dimensions
-      dimensionFilters.forEach(({ dimensionName }) => {
-        filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
-      });
-
-      // Toggle all dimension values in the filter state
-      // Each call to toggleDimensionValueSelections returns the updated filter string
-      // but doesn't apply it to URL - we just need the final result
-      let filterString: string | null = null;
-      dimensionFilters.forEach(({ dimensionName, values }) => {
-        filterString = filterClass.toggleDimensionValueSelections(
-          dimensionName,
-          values,
-          false, // keepPillVisible
-          false, // isExclusiveFilter
-        );
-      });
-
-      // Apply to URL once with the final filter string
-      if (filterString !== null) {
-        await filterManager.applyFiltersToUrl(
-          new Map([[metricsViewName, filterString]]),
-        );
+  $: selfFilteredDimensions = component.selfFilteredDimensions;
+
+  // Reactively compute row selection state from the current filters.
+  // filterMapStore gives us Map<metricsViewName, V1Expression> that updates on URL changes.
+  $: whereFilterStore = derived(filterManager.filterMapStore, (filterMap) => {
+    return metricsViewName ? filterMap.get(metricsViewName) : undefined;
+  });
+
+  // Prune selfFilteredDimensions: remove any dimension whose filter was cleared
+  // (e.g., by toggling off all values, or clearing the filter pill externally).
+  // Uses get() to read selfFilteredDimensions non-reactively so this block
+  // only re-runs when whereFilterStore changes (not when we add dimensions).
+  $: {
+    const currentFilter = $whereFilterStore;
+    const activeDims = new Set(
+      currentFilter?.cond?.exprs
+        ?.map((e) => e.cond?.exprs?.[0]?.ident)
+        .filter(Boolean) ?? [],
+    );
+    const dims = get(selfFilteredDimensions);
+    let changed = false;
+    for (const dim of dims) {
+      if (!activeDims.has(dim)) {
+        dims.delete(dim);
+        changed = true;
       }
+    }
+    if (changed) {
+      selfFilteredDimensions.set(new Set(dims));
+    }
+  }
 
-      // TODO: Apply time range if present
-      // For now, time range application is deferred as it requires
-      // investigation into the proper mechanism (component.parent.timeState)
-      // if (activeCellFilters.timeRange) {
-      //   // Apply time range...
-      // }
-    } catch (error) {
-      console.error("Error applying cell filters:", error);
+  $: rowDimensionNames = pivotConfig
+    ? ($pivotConfig?.rowDimensionNames ?? [])
+    : [];
+
+  // Only compute selection state for dimensions the pivot itself filtered
+  $: dimensionFilterMap = extractSelectionDimensionFilters($whereFilterStore, [
+    ...$selfFilteredDimensions,
+  ]);
+
+  $: rowSelectionState =
+    pivotDataStore && $pivotDataStore?.data && pivotConfig && $pivotConfig
+      ? computePivotRowSelection(
+          $pivotConfig,
+          $pivotDataStore.data,
+          dimensionFilterMap,
+        )
+      : undefined;
+
+  // Click-to-filter: extract dimension filters for the clicked cell,
+  // then batch-toggle them on the FilterState and apply to URL once.
+  function handleCellClickToFilter(
+    rowId: string,
+    columnId: string,
+    event: MouseEvent,
+  ) {
+    if (!pivotDataStore || !$pivotDataStore || !pivotConfig || !$pivotConfig)
+      return;
+
+    const isExclusive = event.metaKey || event.ctrlKey;
+
+    // Compute filters for this cell directly (row + column dimensions)
+    const cellFilters = getFiltersForCell(
+      $pivotConfig,
+      rowId,
+      columnId,
+      $pivotDataStore.columnDimensionAxes ?? {},
+      $pivotDataStore.data,
+    );
+
+    if (!cellFilters.filters) return;
+
+    // Extract dimension name/value pairs from the filter expression
+    const dimensionFilters = extractDimensionFiltersFromExpression(
+      cellFilters.filters,
+    );
+
+    if (dimensionFilters.length === 0) return;
+
+    // Get the FilterState for this metrics view to batch updates
+    const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
+    if (!filterClass) return;
+
+    // Clear temporary filter status for all dimensions being toggled
+    dimensionFilters.forEach(({ dimensionName }) => {
+      filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
+    });
+
+    // Toggle each dimension's values on FilterState (no URL update per call)
+    let filterString: string | null = null;
+    dimensionFilters.forEach(({ dimensionName, values }) => {
+      filterString = filterClass.toggleDimensionValueSelections(
+        dimensionName,
+        values,
+        false, // keepPillVisible
+        isExclusive,
+      );
+    });
+
+    // Track clicked cell for ring indicator
+    lastClickedCell = { rowId, columnId };
+
+    // Mark these dimensions as self-filtered by the pivot
+    selfFilteredDimensions.update((dims) => {
+      const next = new Set(dims);
+      dimensionFilters.forEach(({ dimensionName }) => next.add(dimensionName));
+      return next;
+    });
+
+    // Single batch URL update with the final filter string
+    if (filterString !== null) {
+      filterManager.applyFiltersToUrl(
+        new Map([[metricsViewName, filterString]]),
+      );
     }
   }
+
+  // Clear clicked cell when the pivot has no self-applied filters
+  $: if ($selfFilteredDimensions.size === 0) {
+    lastClickedCell = null;
+  }
 </script>
 
 <div
@@ -127,6 +191,9 @@
         {pivotDataStore}
         config={pivotConfig}
         {pivotState}
+        {rowSelectionState}
+        clickedCell={lastClickedCell}
+        enableClickToFilter
         setPivotExpanded={(expanded) => {
           pivotState.update((state) => ({
             ...state,
diff --git a/web-common/src/features/canvas/components/pivot/index.ts b/web-common/src/features/canvas/components/pivot/index.ts
index 6ffa4559407..7ef56564d23 100644
--- a/web-common/src/features/canvas/components/pivot/index.ts
+++ b/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
@@ -87,12 +90,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(
diff --git a/web-common/src/features/canvas/components/pivot/util.ts b/web-common/src/features/canvas/components/pivot/util.ts
index ce81a4969f6..34a6d779c58 100644
--- a/web-common/src/features/canvas/components/pivot/util.ts
+++ b/web-common/src/features/canvas/components/pivot/util.ts
@@ -23,10 +23,35 @@ import type {
   V1MetricsViewSpec,
   V1TimeRange,
 } from "@rilldata/web-common/runtime-client";
-import { type Readable, type Writable, derived, writable } from "svelte/store";
+import {
+  type Readable,
+  type Writable,
+  derived,
+  readable,
+  writable,
+} from "svelte/store";
 import type { CanvasEntity } from "../../stores/canvas-entity";
 import type { PivotSpec, TableSpec } from "./";
 
+/**
+ * Strips filters for the pivot's own dimensions from the where filter.
+ * This lets the pivot query return all rows; selection highlighting
+ * (via rowSelectionState) shows which rows match the active filters.
+ * Same pattern as leaderboard's getFiltersForOtherDimensions but for
+ * multiple dimensions at once.
+ */
+function excludeOwnDimensionFilters(
+  where: V1Expression | undefined,
+  dimensionNames: string[],
+): V1Expression | undefined {
+  if (!where?.cond?.exprs || dimensionNames.length === 0) return where;
+  const dimSet = new Set(dimensionNames);
+  const filtered = where.cond.exprs.filter(
+    (e) => !dimSet.has(e.cond?.exprs?.[0]?.ident ?? ""),
+  );
+  return createAndExpression(filtered);
+}
+
 type CacheEntry = {
   store: ReturnType<typeof createPivotDataStore>;
   unsubscribe: () => void;
@@ -62,21 +87,44 @@ export function createPivotConfig(
   tableSpecStore: Readable<PivotSpec | TableSpec>,
   pivotState: Writable<PivotState>,
   timeAndFilterStore: Readable<TimeAndFilterStore>,
+  selfFilteredDimensions?: Readable<Set<string>>,
 ): Readable<PivotDataStoreConfig> {
+  const selfFilteredStore = selfFilteredDimensions ?? readable(null);
+
   return derived(
-    [canvas.specStore, tableSpecStore, pivotState, timeAndFilterStore],
-    ([$canvasData, $tableSpec, $pivotState, $timeAndFilterStore]) => {
+    [
+      canvas.specStore,
+      tableSpecStore,
+      pivotState,
+      timeAndFilterStore,
+      selfFilteredStore,
+    ],
+    ([
+      $canvasData,
+      $tableSpec,
+      $pivotState,
+      $timeAndFilterStore,
+      $selfFiltered,
+    ]) => {
       const { timeRange, comparisonTimeRange, where } = $timeAndFilterStore;
       const metricsViewName = $tableSpec.metrics_view;
       const metricsView =
         $canvasData?.data?.metricsViews[metricsViewName]?.state?.validSpec ??
         {};
 
+      let queryWhere: V1Expression | undefined;
+      if (!$selfFiltered || $selfFiltered.size === 0) {
+        queryWhere = where;
+      } else {
+        // Only exclude dimensions the pivot itself applied via click-to-filter
+        queryWhere = excludeOwnDimensionFilters(where, [...$selfFiltered]);
+      }
+
       return "columns" in $tableSpec
         ? processFlat(
             $tableSpec,
             $pivotState,
-            where,
+            queryWhere,
             metricsView,
             $timeAndFilterStore,
             comparisonTimeRange,
@@ -86,7 +134,7 @@ export function createPivotConfig(
         : processPivot(
             $tableSpec,
             $pivotState,
-            where,
+            queryWhere,
             metricsView,
             $timeAndFilterStore,
             comparisonTimeRange,
diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index 608eafa53ee..e3c7e172bc8 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -16,6 +16,7 @@
   import { cellInspectorStore } from "../stores/cell-inspector-store";
   import type { Cell, Column, HeaderGroup, Row } from "@tanstack/svelte-table";
   import { flexRender } from "@tanstack/svelte-table";
+  import type { PivotRowSelectionState } from "./pivot-row-selection";
   import type { PivotDataRow } from "./types";
 
   // State props
@@ -24,6 +25,9 @@
   export let dataRows: PivotDataRow[];
   export let hasMeasureContextColumns: boolean;
   export let canShowDataViewer = false;
+  export let enableClickToFilter = false;
+  export let rowSelectionState: PivotRowSelectionState | undefined = undefined;
+  export let clickedCell: { rowId: string; columnId: string } | null = null;
   export let activeCell: { rowId: string; columnId: string } | null | undefined;
 
   // Table props
@@ -88,6 +92,13 @@
     );
   }
 
+  function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
+    return (
+      cell.row.id === clickedCell?.rowId &&
+      cell.column.id === clickedCell?.columnId
+    );
+  }
+
   function hasBorderRight(columnId: string): boolean {
     if (!hasMeasureContextColumns) return true;
     const measureIndex = measures.findIndex((m) => m.name === columnId);
@@ -184,17 +195,26 @@
     <tr style:height="{before}px" />
     {#each virtualRows as row (row.index)}
       {@const cells = rows[row.index].getVisibleCells()}
-      <tr>
+      {@const rowId = rows[row.index].id}
+      {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
+      {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
+      <tr
+        class:selected-row={isSelected}
+        class:dimmed-row={hasSelection && !isSelected}
+      >
         {#each cells as cell (cell.id)}
           {@const result =
             typeof cell.column.columnDef.cell === "function"
               ? cell.column.columnDef.cell(cell.getContext())
               : cell.column.columnDef.cell}
           {@const isActive = isCellActive(cell)}
+          {@const isClicked = isCellClicked(cell)}
           <td
             class="ui-copy-number cell truncate"
             class:active-cell={isActive}
-            class:interactive-cell={canShowDataViewer &&
+            class:clicked-cell={isClicked}
+            class:interactive-cell={(canShowDataViewer ||
+              enableClickToFilter) &&
               cell.getValue() !== undefined}
             class:text-right={getMeasureColumn(cell.column)}
             class:border-r={hasBorderRight(cell.column.id)}
@@ -314,4 +334,19 @@
   .active-cell.cell {
     @apply bg-primary-50;
   }
+
+  .clicked-cell {
+    @apply ring-1 ring-inset ring-primary-400;
+  }
+
+  .selected-row .cell {
+    @apply bg-primary-50;
+  }
+  .selected-row:hover .cell {
+    @apply bg-primary-100;
+  }
+
+  .dimmed-row .cell {
+    @apply opacity-50;
+  }
 </style>
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index d1ac76697ff..da202114fdf 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -20,6 +20,7 @@
     calculateRowDimensionWidth,
     COLUMN_WIDTH_CONSTANTS as WIDTHS,
   } from "./pivot-column-width-utils";
+  import type { PivotRowSelectionState } from "./pivot-row-selection";
   import { isShowMoreRow } from "./pivot-utils";
   import type { PivotDataRow } from "./types";
 
@@ -32,6 +33,9 @@
   export let measures: MeasureColumnProps;
   export let totalsRow: PivotDataRow | undefined;
   export let canShowDataViewer = false;
+  export let enableClickToFilter = false;
+  export let rowSelectionState: PivotRowSelectionState | undefined = undefined;
+  export let clickedCell: { rowId: string; columnId: string } | null = null;
   export let activeCell: { rowId: string; columnId: string } | null | undefined;
 
   // Table props
@@ -160,6 +164,13 @@
     );
   }
 
+  function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
+    return (
+      cell.row.id === clickedCell?.rowId &&
+      cell.column.id === clickedCell?.columnId
+    );
+  }
+
   function shouldShowHeaderRightBorder(header: any, index: number): boolean {
     const isMeasure = isMeasureColumn(header, index);
     if (!isMeasure) return true;
@@ -329,17 +340,26 @@
     <tr style:height="{before}px" />
     {#each virtualRows as row (row.index)}
       {@const cells = rows[row.index].getVisibleCells()}
-      <tr class:show-more-row={isShowMoreRow(rows[row.index])}>
+      {@const rowId = rows[row.index].id}
+      {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
+      {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
+      <tr
+        class:show-more-row={isShowMoreRow(rows[row.index])}
+        class:selected-row={isSelected}
+        class:dimmed-row={hasSelection && !isSelected}
+      >
         {#each cells as cell, i (cell.id)}
           {@const result =
             typeof cell.column.columnDef.cell === "function"
               ? cell.column.columnDef.cell(cell.getContext())
               : cell.column.columnDef.cell}
           {@const isActive = isCellActive(cell)}
+          {@const isClicked = isCellClicked(cell)}
           <td
             class="ui-copy-number cell truncate group/cell"
             class:active-cell={isActive}
-            class:interactive-cell={canShowDataViewer}
+            class:clicked-cell={isClicked}
+            class:interactive-cell={canShowDataViewer || enableClickToFilter}
             class:border-r={shouldShowRightBorder(i)}
             data-value={cell.getValue()}
             data-rowid={cell.row.id}
@@ -502,6 +522,27 @@
     @apply bg-primary-50;
   }
 
+  .clicked-cell {
+    @apply ring-1 ring-inset ring-primary-400;
+  }
+
+  .selected-row .cell {
+    @apply bg-primary-50;
+  }
+  .selected-row:hover .cell {
+    @apply bg-primary-100;
+  }
+  .selected-row > td:first-of-type {
+    @apply bg-primary-50;
+  }
+  .selected-row:hover > td:first-of-type {
+    @apply bg-primary-100;
+  }
+
+  .dimmed-row .cell {
+    @apply opacity-50;
+  }
+
   /* Show more row styling */
   .show-more-row,
   .show-more-row .cell {
diff --git a/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte b/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte
index 019c247ea11..d477d3b12c3 100644
--- a/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte
@@ -15,18 +15,31 @@
   $: assembledAndCanExpand = assembled && canExpand;
 
   $: needsSpacer = row.depth >= 1 || (hasNestedDimensions && !canExpand);
+
+  function handleExpandClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (assembledAndCanExpand) {
+      row.getToggleExpandedHandler()();
+    }
+  }
 </script>
 
 <div
   role="presentation"
-  class="dimension-cell pointer-events-none"
+  class="dimension-cell"
   style:padding-left="{row.depth * 14}px"
-  class:cursor-pointer={assembledAndCanExpand}
 >
   {#if value === LOADING_CELL}
     <span class="loading-cell" />
   {:else if assembledAndCanExpand}
-    <div class="caret opacity-100 shrink-0" class:expanded>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div
+      role="button"
+      tabindex="-1"
+      class="caret opacity-100 shrink-0 cursor-pointer"
+      class:expanded
+      on:click={handleExpandClick}
+    >
       <ChevronRight size="16px" color="#9CA3AF" />
     </div>
   {:else if needsSpacer}
diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte
index a58acb637e8..8bcd63e9fc7 100644
--- a/web-common/src/features/dashboards/pivot/PivotTable.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotTable.svelte
@@ -62,8 +62,13 @@
     | ((expandIndex: string, limit: number) => void)
     | undefined = undefined;
   export let onCellClickToFilter:
-    | ((rowId: string, columnId: string) => Promise<void>)
+    | ((rowId: string, columnId: string, event: MouseEvent) => void)
     | undefined = undefined;
+  export let enableClickToFilter = false;
+  export let rowSelectionState:
+    | import("./pivot-row-selection").PivotRowSelectionState
+    | undefined = undefined;
+  export let clickedCell: { rowId: string; columnId: string } | null = null;
 
   const options: Readable<TableOptions<PivotDataRow>> = derived(
     [pivotDataStore, pivotState],
@@ -239,17 +244,26 @@
       return;
     }
 
-    if (rowHeader) {
+    if (rowHeader && !onCellClickToFilter) {
+      // Legacy expand behavior: when no filter callback, row headers expand/collapse.
+      // When onCellClickToFilter is present, expand is handled by the chevron icon
+      // in PivotExpandableCell (stopPropagation), so row header clicks filter instead.
       if (row.getCanExpand()) row.getToggleExpandedHandler()();
     } else {
-      // Set active cell for dashboard (if enabled)
+      // Skip totals row for filtering
+      const isTotalsRow = totalsRow && rowId === "0";
+      if (isTotalsRow && onCellClickToFilter) {
+        return;
+      }
+
+      // Set active cell for Explore data viewer (if enabled)
       if (setPivotActiveCell && canShowDataViewer) {
         setPivotActiveCell(rowId, columnId);
       }
 
-      // Apply filters for canvas (if enabled)
+      // Apply click-to-filter (Canvas or future Explore)
       if (onCellClickToFilter) {
-        onCellClickToFilter(rowId, columnId);
+        onCellClickToFilter(rowId, columnId, e);
       }
     }
   }
@@ -332,7 +346,10 @@
       {after}
       {totalRowSize}
       {canShowDataViewer}
+      {enableClickToFilter}
       {hasMeasureContextColumns}
+      {rowSelectionState}
+      {clickedCell}
       activeCell={$pivotState.activeCell}
       {assembled}
       {onMouseMove}
@@ -355,6 +372,9 @@
       {dataRows}
       {measures}
       {canShowDataViewer}
+      {enableClickToFilter}
+      {rowSelectionState}
+      {clickedCell}
       activeCell={$pivotState.activeCell}
       {assembled}
       {scrollLeft}
diff --git a/web-common/src/features/dashboards/pivot/pivot-data-store.ts b/web-common/src/features/dashboards/pivot/pivot-data-store.ts
index 142f293fbac..3b92af548e1 100644
--- a/web-common/src/features/dashboards/pivot/pivot-data-store.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-data-store.ts
@@ -705,6 +705,7 @@ export function createPivotDataStore(
                       totalsRowData: displayTotalsRow
                         ? totalsRowData
                         : undefined,
+                      columnDimensionAxes: columnDimensionAxes?.data,
                     };
                   },
                 ).subscribe(cellSet);
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
new file mode 100644
index 00000000000..616d9bb7d2b
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -0,0 +1,124 @@
+import { getValuesForExpandedKey } from "@rilldata/web-common/features/dashboards/pivot/pivot-expansion";
+import {
+  V1Operation,
+  type V1Expression,
+} from "@rilldata/web-common/runtime-client";
+import { getValuesInExpression } from "../stores/filter-utils";
+import { getValuesForFlatTable, isTimeDimension } from "./pivot-utils";
+import type { PivotDataRow, PivotDataStoreConfig } from "./types";
+
+export interface PivotRowSelectionState {
+  /** True if at least one row dimension has active filter selections */
+  hasActiveSelection: boolean;
+  /** Check if a specific row (by rowId) is selected based on current filters */
+  isRowSelected: (rowId: string) => boolean;
+}
+
+/**
+ * Extracts dimension name/value pairs for a given row without building
+ * full V1Expression objects. Used for determining row selection state
+ * and for click-to-filter. Filters out time dimensions.
+ */
+export function getDimensionValuesForRow(
+  config: PivotDataStoreConfig,
+  rowId: string,
+  tableData: PivotDataRow[],
+): Array<{ dimensionName: string; value: string }> {
+  const { rowDimensionNames, measureNames, isFlat } = config;
+
+  let values: string[];
+  if (isFlat) {
+    values = getValuesForFlatTable(
+      tableData,
+      rowDimensionNames,
+      rowId,
+      measureNames.length > 0,
+    );
+  } else {
+    values = getValuesForExpandedKey(
+      tableData,
+      rowDimensionNames,
+      rowId,
+      measureNames.length > 0,
+    );
+  }
+
+  return values
+    .map((value, index) => ({
+      dimensionName: rowDimensionNames[index],
+      value,
+    }))
+    .filter(
+      ({ dimensionName }) =>
+        !isTimeDimension(dimensionName, config.time.timeDimension),
+    );
+}
+
+/**
+ * Extracts dimension -> Set<values> from a V1Expression (whereFilter).
+ * Only considers IN expressions for selection matching; other filter types
+ * (LIKE, NIN, threshold) are ignored for highlighting purposes.
+ * Filters to only include dimensions present in rowDimensionNames.
+ */
+export function extractSelectionDimensionFilters(
+  whereFilter: V1Expression | undefined,
+  rowDimensionNames: string[],
+): Map<string, Set<string>> {
+  const result = new Map<string, Set<string>>();
+  if (!whereFilter?.cond?.exprs) return result;
+
+  for (const expr of whereFilter.cond.exprs) {
+    if (expr.cond?.op !== V1Operation.OPERATION_IN) continue;
+
+    const ident = expr.cond.exprs?.[0]?.ident;
+    if (!ident || !rowDimensionNames.includes(ident)) continue;
+
+    const values = getValuesInExpression(expr);
+    if (values.length > 0) {
+      result.set(ident, new Set(values as string[]));
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Computes selection state for pivot rows given current dimension filters.
+ *
+ * A row is "selected" if every one of its row dimensions that has an active
+ * filter contains the row's value for that dimension. Dimensions without
+ * active filters are treated as matching (they don't block selection).
+ *
+ * Returns a closure-based checker: the dimension filter map is built once,
+ * then each row is checked against it on demand (efficient for virtualized tables).
+ */
+export function computePivotRowSelection(
+  config: PivotDataStoreConfig,
+  tableData: PivotDataRow[],
+  dimensionFilters: Map<string, Set<string>>,
+): PivotRowSelectionState {
+  const hasActiveSelection = dimensionFilters.size > 0;
+
+  if (!hasActiveSelection) {
+    return {
+      hasActiveSelection: false,
+      isRowSelected: () => false,
+    };
+  }
+
+  return {
+    hasActiveSelection: true,
+    isRowSelected: (rowId: string) => {
+      const rowDimValues = getDimensionValuesForRow(config, rowId, tableData);
+      if (rowDimValues.length === 0) return false;
+
+      // A row is selected if every dimension that IS filtered
+      // contains the row's value for that dimension
+      return rowDimValues.every(({ dimensionName, value }) => {
+        const selectedSet = dimensionFilters.get(dimensionName);
+        if (!selectedSet) return true; // dimension not filtered; doesn't block
+        return selectedSet.has(value);
+      });
+    },
+  };
+}
diff --git a/web-common/src/features/dashboards/pivot/pivot-utils.ts b/web-common/src/features/dashboards/pivot/pivot-utils.ts
index 21c29083b78..d59d24d7d53 100644
--- a/web-common/src/features/dashboards/pivot/pivot-utils.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-utils.ts
@@ -530,7 +530,7 @@ export function getSortFilteredMeasureBody(
   return { sortFilteredMeasureBody, isMeasureSortAccessor, sortAccessor };
 }
 
-function getValuesForFlatTable(
+export function getValuesForFlatTable(
   tableData: PivotDataRow[],
   rowDimensions: string[],
   rowId: string,
diff --git a/web-common/src/features/dashboards/pivot/types.ts b/web-common/src/features/dashboards/pivot/types.ts
index 2e619a2ef69..14c94dd9437 100644
--- a/web-common/src/features/dashboards/pivot/types.ts
+++ b/web-common/src/features/dashboards/pivot/types.ts
@@ -30,6 +30,7 @@ export interface PivotDataState {
   reachedEndForRowData?: boolean;
   totalsRowData?: PivotDataRow;
   activeCellFilters?: PivotFilter;
+  columnDimensionAxes?: Record<string, string[]>;
 }
 
 export type PivotDataStore = Readable<PivotDataState>;

From a42b938ba5292aefc1165484b93f347b5fbcc60b Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 3 Mar 2026 19:40:24 +0530
Subject: [PATCH 03/53] add pivot filter state

---
 .../pivot/CanvasPivotRenderer.svelte          |  76 +++++++++---
 .../dashboards/pivot/FlatTable.svelte         |  24 ++--
 .../dashboards/pivot/NestedTable.svelte       |  24 ++--
 .../dashboards/pivot/PivotTable.svelte        |  23 ++--
 .../dashboards/pivot/pivot-row-selection.ts   | 117 +++++++++++++++++-
 5 files changed, 219 insertions(+), 45 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
index 4f83c8729e7..1d09aac8bd8 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
@@ -2,8 +2,12 @@
   import ComponentError from "@rilldata/web-common/features/components/ComponentError.svelte";
   import { extractDimensionFiltersFromExpression } from "@rilldata/web-common/features/dashboards/pivot/pivot-filter-extraction";
   import {
+    cellKey,
     computePivotRowSelection,
+    createEmptyClickSelectionState,
     extractSelectionDimensionFilters,
+    getFiltersForRowHeader,
+    type PivotClickSelectionState,
   } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
   import {
     getFiltersForCell,
@@ -31,8 +35,9 @@
   export let hasHeader = false;
   export let component: PivotCanvasComponent;
 
-  // Track last clicked cell for ring indicator
-  let lastClickedCell: { rowId: string; columnId: string } | null = null;
+  // Track click selections: row-header clicks and data-cell clicks
+  let clickSelection: PivotClickSelectionState =
+    createEmptyClickSelectionState();
 
   $: pivotColumns = splitPivotChips($pivotState.columns);
 
@@ -75,10 +80,6 @@
     }
   }
 
-  $: rowDimensionNames = pivotConfig
-    ? ($pivotConfig?.rowDimensionNames ?? [])
-    : [];
-
   // Only compute selection state for dimensions the pivot itself filtered
   $: dimensionFilterMap = extractSelectionDimensionFilters($whereFilterStore, [
     ...$selfFilteredDimensions,
@@ -93,11 +94,12 @@
         )
       : undefined;
 
-  // Click-to-filter: extract dimension filters for the clicked cell,
+  // Click-to-filter: extract dimension filters for the clicked cell or row header,
   // then batch-toggle them on the FilterState and apply to URL once.
   function handleCellClickToFilter(
     rowId: string,
     columnId: string,
+    isRowHeader: boolean,
     event: MouseEvent,
   ) {
     if (!pivotDataStore || !$pivotDataStore || !pivotConfig || !$pivotConfig)
@@ -105,14 +107,17 @@
 
     const isExclusive = event.metaKey || event.ctrlKey;
 
-    // Compute filters for this cell directly (row + column dimensions)
-    const cellFilters = getFiltersForCell(
-      $pivotConfig,
-      rowId,
-      columnId,
-      $pivotDataStore.columnDimensionAxes ?? {},
-      $pivotDataStore.data,
-    );
+    // Row header click: only row dimension filters
+    // Data cell click: row + column dimension filters
+    const cellFilters = isRowHeader
+      ? getFiltersForRowHeader($pivotConfig, rowId, $pivotDataStore.data)
+      : getFiltersForCell(
+          $pivotConfig,
+          rowId,
+          columnId,
+          $pivotDataStore.columnDimensionAxes ?? {},
+          $pivotDataStore.data,
+        );
 
     if (!cellFilters.filters) return;
 
@@ -143,8 +148,39 @@
       );
     });
 
-    // Track clicked cell for ring indicator
-    lastClickedCell = { rowId, columnId };
+    // Track click selection for visual highlighting.
+    // Exclusive mode clears all previous selections; normal mode accumulates.
+    const nextRowHeaders = isExclusive
+      ? new Set<string>()
+      : new Set(clickSelection.rowHeaderSelections);
+    const nextCells = isExclusive
+      ? new Set<string>()
+      : new Set(clickSelection.cellSelections);
+
+    if (isRowHeader) {
+      // Toggle: if already selected, the filter toggle above removed it
+      if (nextRowHeaders.has(rowId)) {
+        nextRowHeaders.delete(rowId);
+      } else {
+        nextRowHeaders.add(rowId);
+      }
+    } else {
+      const key = cellKey(rowId, columnId);
+      if (nextCells.has(key)) {
+        nextCells.delete(key);
+      } else {
+        nextCells.add(key);
+      }
+    }
+
+    const hasAny = nextRowHeaders.size > 0 || nextCells.size > 0;
+    clickSelection = {
+      rowHeaderSelections: nextRowHeaders,
+      cellSelections: nextCells,
+      hasAnySelection: hasAny,
+      isRowHeaderSelected: (rid) => nextRowHeaders.has(rid),
+      isCellSelected: (rid, cid) => nextCells.has(cellKey(rid, cid)),
+    };
 
     // Mark these dimensions as self-filtered by the pivot
     selfFilteredDimensions.update((dims) => {
@@ -161,9 +197,9 @@
     }
   }
 
-  // Clear clicked cell when the pivot has no self-applied filters
+  // Clear selection state when the pivot has no self-applied filters
   $: if ($selfFilteredDimensions.size === 0) {
-    lastClickedCell = null;
+    clickSelection = createEmptyClickSelectionState();
   }
 </script>
 
@@ -192,7 +228,7 @@
         config={pivotConfig}
         {pivotState}
         {rowSelectionState}
-        clickedCell={lastClickedCell}
+        {clickSelection}
         enableClickToFilter
         setPivotExpanded={(expanded) => {
           pivotState.update((state) => ({
diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index e3c7e172bc8..8dc825710cd 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -16,7 +16,10 @@
   import { cellInspectorStore } from "../stores/cell-inspector-store";
   import type { Cell, Column, HeaderGroup, Row } from "@tanstack/svelte-table";
   import { flexRender } from "@tanstack/svelte-table";
-  import type { PivotRowSelectionState } from "./pivot-row-selection";
+  import type {
+    PivotClickSelectionState,
+    PivotRowSelectionState,
+  } from "./pivot-row-selection";
   import type { PivotDataRow } from "./types";
 
   // State props
@@ -27,7 +30,7 @@
   export let canShowDataViewer = false;
   export let enableClickToFilter = false;
   export let rowSelectionState: PivotRowSelectionState | undefined = undefined;
-  export let clickedCell: { rowId: string; columnId: string } | null = null;
+  export let clickSelection: PivotClickSelectionState | undefined = undefined;
   export let activeCell: { rowId: string; columnId: string } | null | undefined;
 
   // Table props
@@ -93,10 +96,7 @@
   }
 
   function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
-    return (
-      cell.row.id === clickedCell?.rowId &&
-      cell.column.id === clickedCell?.columnId
-    );
+    return clickSelection?.isCellSelected(cell.row.id, cell.column.id) ?? false;
   }
 
   function hasBorderRight(columnId: string): boolean {
@@ -198,8 +198,10 @@
       {@const rowId = rows[row.index].id}
       {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
+      {@const isRowHeaderSelected =
+        clickSelection?.isRowHeaderSelected(rowId) ?? false}
       <tr
-        class:selected-row={isSelected}
+        class:selected-row={isSelected && isRowHeaderSelected}
         class:dimmed-row={hasSelection && !isSelected}
       >
         {#each cells as cell (cell.id)}
@@ -213,6 +215,7 @@
             class="ui-copy-number cell truncate"
             class:active-cell={isActive}
             class:clicked-cell={isClicked}
+            class:selected-cell={isClicked}
             class:interactive-cell={(canShowDataViewer ||
               enableClickToFilter) &&
               cell.getValue() !== undefined}
@@ -339,6 +342,13 @@
     @apply ring-1 ring-inset ring-primary-400;
   }
 
+  .selected-cell.cell {
+    @apply bg-primary-50;
+  }
+  .selected-cell.cell:hover {
+    @apply bg-primary-100;
+  }
+
   .selected-row .cell {
     @apply bg-primary-50;
   }
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index da202114fdf..a31c6ff92bd 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -20,7 +20,10 @@
     calculateRowDimensionWidth,
     COLUMN_WIDTH_CONSTANTS as WIDTHS,
   } from "./pivot-column-width-utils";
-  import type { PivotRowSelectionState } from "./pivot-row-selection";
+  import type {
+    PivotClickSelectionState,
+    PivotRowSelectionState,
+  } from "./pivot-row-selection";
   import { isShowMoreRow } from "./pivot-utils";
   import type { PivotDataRow } from "./types";
 
@@ -35,7 +38,7 @@
   export let canShowDataViewer = false;
   export let enableClickToFilter = false;
   export let rowSelectionState: PivotRowSelectionState | undefined = undefined;
-  export let clickedCell: { rowId: string; columnId: string } | null = null;
+  export let clickSelection: PivotClickSelectionState | undefined = undefined;
   export let activeCell: { rowId: string; columnId: string } | null | undefined;
 
   // Table props
@@ -165,10 +168,7 @@
   }
 
   function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
-    return (
-      cell.row.id === clickedCell?.rowId &&
-      cell.column.id === clickedCell?.columnId
-    );
+    return clickSelection?.isCellSelected(cell.row.id, cell.column.id) ?? false;
   }
 
   function shouldShowHeaderRightBorder(header: any, index: number): boolean {
@@ -343,9 +343,11 @@
       {@const rowId = rows[row.index].id}
       {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
+      {@const isRowHeaderSelected =
+        clickSelection?.isRowHeaderSelected(rowId) ?? false}
       <tr
         class:show-more-row={isShowMoreRow(rows[row.index])}
-        class:selected-row={isSelected}
+        class:selected-row={isSelected && isRowHeaderSelected}
         class:dimmed-row={hasSelection && !isSelected}
       >
         {#each cells as cell, i (cell.id)}
@@ -359,6 +361,7 @@
             class="ui-copy-number cell truncate group/cell"
             class:active-cell={isActive}
             class:clicked-cell={isClicked}
+            class:selected-cell={isClicked}
             class:interactive-cell={canShowDataViewer || enableClickToFilter}
             class:border-r={shouldShowRightBorder(i)}
             data-value={cell.getValue()}
@@ -526,6 +529,13 @@
     @apply ring-1 ring-inset ring-primary-400;
   }
 
+  .selected-cell.cell {
+    @apply bg-primary-50;
+  }
+  .selected-cell.cell:hover {
+    @apply bg-primary-100;
+  }
+
   .selected-row .cell {
     @apply bg-primary-50;
   }
diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte
index 8bcd63e9fc7..7561bca92d6 100644
--- a/web-common/src/features/dashboards/pivot/PivotTable.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotTable.svelte
@@ -10,6 +10,10 @@
     SHOW_MORE_BUTTON,
   } from "@rilldata/web-common/features/dashboards/pivot/pivot-constants";
   import { NUM_ROWS_PER_PAGE } from "@rilldata/web-common/features/dashboards/pivot/pivot-infinite-scroll";
+  import type {
+    PivotClickSelectionState,
+    PivotRowSelectionState,
+  } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
   import {
     isElement,
     splitPivotChips,
@@ -62,13 +66,16 @@
     | ((expandIndex: string, limit: number) => void)
     | undefined = undefined;
   export let onCellClickToFilter:
-    | ((rowId: string, columnId: string, event: MouseEvent) => void)
+    | ((
+        rowId: string,
+        columnId: string,
+        isRowHeader: boolean,
+        event: MouseEvent,
+      ) => void)
     | undefined = undefined;
   export let enableClickToFilter = false;
-  export let rowSelectionState:
-    | import("./pivot-row-selection").PivotRowSelectionState
-    | undefined = undefined;
-  export let clickedCell: { rowId: string; columnId: string } | null = null;
+  export let rowSelectionState: PivotRowSelectionState | undefined = undefined;
+  export let clickSelection: PivotClickSelectionState | undefined = undefined;
 
   const options: Readable<TableOptions<PivotDataRow>> = derived(
     [pivotDataStore, pivotState],
@@ -263,7 +270,7 @@
 
       // Apply click-to-filter (Canvas or future Explore)
       if (onCellClickToFilter) {
-        onCellClickToFilter(rowId, columnId, e);
+        onCellClickToFilter(rowId, columnId, rowHeader, e);
       }
     }
   }
@@ -349,7 +356,7 @@
       {enableClickToFilter}
       {hasMeasureContextColumns}
       {rowSelectionState}
-      {clickedCell}
+      {clickSelection}
       activeCell={$pivotState.activeCell}
       {assembled}
       {onMouseMove}
@@ -374,7 +381,7 @@
       {canShowDataViewer}
       {enableClickToFilter}
       {rowSelectionState}
-      {clickedCell}
+      {clickSelection}
       activeCell={$pivotState.activeCell}
       {assembled}
       {scrollLeft}
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 616d9bb7d2b..6bbf010e766 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -1,11 +1,59 @@
 import { getValuesForExpandedKey } from "@rilldata/web-common/features/dashboards/pivot/pivot-expansion";
+import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
+import type { TimeRangeString } from "@rilldata/web-common/lib/time/types";
 import {
   V1Operation,
   type V1Expression,
 } from "@rilldata/web-common/runtime-client";
-import { getValuesInExpression } from "../stores/filter-utils";
-import { getValuesForFlatTable, isTimeDimension } from "./pivot-utils";
-import type { PivotDataRow, PivotDataStoreConfig } from "./types";
+import {
+  createAndExpression,
+  createInExpression,
+  getValuesInExpression,
+} from "../stores/filter-utils";
+import {
+  getTimeForQuery,
+  getTimeGrainFromDimension,
+  getValuesForFlatTable,
+  isTimeDimension,
+} from "./pivot-utils";
+import type {
+  PivotDataRow,
+  PivotDataStoreConfig,
+  PivotFilter,
+  TimeFilters,
+} from "./types";
+
+/**
+ * Tracks which rows were selected via row-header clicks and which
+ * individual cells were selected via data-cell clicks. Supports
+ * mixed multi-select: row-header clicks and cell clicks can coexist.
+ */
+export interface PivotClickSelectionState {
+  /** rowIds selected via row-header clicks */
+  rowHeaderSelections: Set<string>;
+  /** "rowId:columnId" keys selected via data-cell clicks */
+  cellSelections: Set<string>;
+  /** Whether any selection exists at all */
+  hasAnySelection: boolean;
+  /** Check if a specific row was selected via row-header click */
+  isRowHeaderSelected: (rowId: string) => boolean;
+  /** Check if a specific cell was selected via data-cell click */
+  isCellSelected: (rowId: string, columnId: string) => boolean;
+}
+
+export function createEmptyClickSelectionState(): PivotClickSelectionState {
+  return {
+    rowHeaderSelections: new Set(),
+    cellSelections: new Set(),
+    hasAnySelection: false,
+    isRowHeaderSelected: () => false,
+    isCellSelected: () => false,
+  };
+}
+
+export function cellKey(rowId: string, columnId: string): string {
+  return `${rowId}:${columnId}`;
+}
 
 export interface PivotRowSelectionState {
   /** True if at least one row dimension has active filter selections */
@@ -122,3 +170,66 @@ export function computePivotRowSelection(
     },
   };
 }
+
+/**
+ * Like getFiltersForCell but only extracts row dimension filters.
+ * Used when clicking a row header (as opposed to a data cell).
+ */
+export function getFiltersForRowHeader(
+  config: PivotDataStoreConfig,
+  rowId: string,
+  tableData: PivotDataRow[],
+): PivotFilter {
+  const { rowDimensionNames, measureNames, isFlat } = config;
+
+  let values: string[];
+
+  if (isFlat) {
+    values = getValuesForFlatTable(
+      tableData,
+      rowDimensionNames,
+      rowId,
+      measureNames.length > 0,
+    );
+  } else {
+    values = getValuesForExpandedKey(
+      tableData,
+      rowDimensionNames,
+      rowId,
+      measureNames.length > 0,
+    );
+  }
+
+  const rowNestTimeFilters: TimeFilters[] = [];
+  const rowNestFilters = values
+    .map((value, index) =>
+      createInExpression(rowDimensionNames[index], [value]),
+    )
+    .filter((f) => {
+      if (
+        isTimeDimension(f.cond?.exprs?.[0].ident, config.time.timeDimension)
+      ) {
+        rowNestTimeFilters.push({
+          timeStart: f.cond?.exprs?.[1].val as string,
+          interval: getTimeGrainFromDimension(
+            f.cond?.exprs?.[0].ident as string,
+          ),
+        });
+        return false;
+      } else return true;
+    });
+
+  let rowFilters: V1Expression | undefined = undefined;
+  if (rowNestFilters.length) {
+    rowFilters = createAndExpression(rowNestFilters);
+  }
+
+  const timeRange: TimeRangeString = getTimeForQuery(
+    config.time,
+    rowNestTimeFilters,
+  );
+
+  const filters = mergeFilters(rowFilters, config.whereFilter);
+
+  return { filters, timeRange };
+}

From a6e5fa90ac5fb10f706c234ff825b8ca99a9eff0 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Thu, 5 Mar 2026 19:29:08 +0530
Subject: [PATCH 04/53] add column filtering

---
 .../table/tanstack-table-column-meta.ts       |   2 +
 .../pivot/CanvasPivotRenderer.svelte          | 200 ++--------
 .../components/pivot/pivot-click-to-filter.ts | 367 ++++++++++++++++++
 .../features/canvas/stores/filter-state.ts    |  45 +++
 .../dashboards/pivot/FlatTable.svelte         |  17 +-
 .../dashboards/pivot/NestedTable.svelte       | 157 ++++++--
 .../dashboards/pivot/PivotTable.svelte        |  19 +-
 .../dashboards/pivot/pivot-click-selection.ts |  73 ++++
 .../pivot/pivot-column-definition.ts          |   8 +
 .../pivot/pivot-filter-extraction.ts          |  44 ---
 .../dashboards/pivot/pivot-row-selection.ts   | 177 +++++----
 11 files changed, 786 insertions(+), 323 deletions(-)
 create mode 100644 web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-click-selection.ts
 delete mode 100644 web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts

diff --git a/web-common/src/components/table/tanstack-table-column-meta.ts b/web-common/src/components/table/tanstack-table-column-meta.ts
index 1272d3aa96f..7f956e4f22f 100644
--- a/web-common/src/components/table/tanstack-table-column-meta.ts
+++ b/web-common/src/components/table/tanstack-table-column-meta.ts
@@ -7,5 +7,7 @@ declare module "@tanstack/svelte-table" {
     widthPercent?: number;
     marginLeft?: string;
     icon?: ComponentType<SvelteComponent>;
+    /** Full path of dimension name/value pairs from root to this header */
+    dimensionPath?: Record<string, string>;
   }
 }
diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
index 1d09aac8bd8..faccf43eb0b 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
@@ -1,29 +1,22 @@
 <script lang="ts">
   import ComponentError from "@rilldata/web-common/features/components/ComponentError.svelte";
-  import { extractDimensionFiltersFromExpression } from "@rilldata/web-common/features/dashboards/pivot/pivot-filter-extraction";
-  import {
-    cellKey,
-    computePivotRowSelection,
-    createEmptyClickSelectionState,
-    extractSelectionDimensionFilters,
-    getFiltersForRowHeader,
-    type PivotClickSelectionState,
-  } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
-  import {
-    getFiltersForCell,
-    splitPivotChips,
-  } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+  import { splitPivotChips } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
   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 { derived, get, type Readable, type Writable } from "svelte/store";
+  import { onDestroy } from "svelte";
+  import { derived, type Readable, type Writable } from "svelte/store";
 
   export let schema: {
     isValid: boolean;
@@ -35,10 +28,6 @@
   export let hasHeader = false;
   export let component: PivotCanvasComponent;
 
-  // Track click selections: row-header clicks and data-cell clicks
-  let clickSelection: PivotClickSelectionState =
-    createEmptyClickSelectionState();
-
   $: pivotColumns = splitPivotChips($pivotState.columns);
 
   $: hasColumnAndNoMeasure =
@@ -50,157 +39,39 @@
   $: metricsViewName = $spec?.metrics_view;
   $: selfFilteredDimensions = component.selfFilteredDimensions;
 
-  // Reactively compute row selection state from the current filters.
-  // filterMapStore gives us Map<metricsViewName, V1Expression> that updates on URL changes.
   $: whereFilterStore = derived(filterManager.filterMapStore, (filterMap) => {
     return metricsViewName ? filterMap.get(metricsViewName) : undefined;
   });
 
-  // Prune selfFilteredDimensions: remove any dimension whose filter was cleared
-  // (e.g., by toggling off all values, or clearing the filter pill externally).
-  // Uses get() to read selfFilteredDimensions non-reactively so this block
-  // only re-runs when whereFilterStore changes (not when we add dimensions).
+  // Create click-to-filter orchestration; recreated when inputs become available
+  let clickToFilter: PivotClickToFilterResult | undefined;
+
   $: {
-    const currentFilter = $whereFilterStore;
-    const activeDims = new Set(
-      currentFilter?.cond?.exprs
-        ?.map((e) => e.cond?.exprs?.[0]?.ident)
-        .filter(Boolean) ?? [],
-    );
-    const dims = get(selfFilteredDimensions);
-    let changed = false;
-    for (const dim of dims) {
-      if (!activeDims.has(dim)) {
-        dims.delete(dim);
-        changed = true;
-      }
-    }
-    if (changed) {
-      selfFilteredDimensions.set(new Set(dims));
+    clickToFilter?.destroy();
+    clickToFilter = undefined;
+
+    if (pivotDataStore && pivotConfig && metricsViewName) {
+      clickToFilter = createPivotClickToFilter({
+        pivotConfig,
+        pivotDataStore,
+        filterManager,
+        metricsViewName,
+        selfFilteredDimensions,
+        whereFilterStore,
+      });
     }
   }
 
-  // Only compute selection state for dimensions the pivot itself filtered
-  $: dimensionFilterMap = extractSelectionDimensionFilters($whereFilterStore, [
-    ...$selfFilteredDimensions,
-  ]);
-
-  $: rowSelectionState =
-    pivotDataStore && $pivotDataStore?.data && pivotConfig && $pivotConfig
-      ? computePivotRowSelection(
-          $pivotConfig,
-          $pivotDataStore.data,
-          dimensionFilterMap,
-        )
-      : undefined;
-
-  // Click-to-filter: extract dimension filters for the clicked cell or row header,
-  // then batch-toggle them on the FilterState and apply to URL once.
-  function handleCellClickToFilter(
-    rowId: string,
-    columnId: string,
-    isRowHeader: boolean,
-    event: MouseEvent,
-  ) {
-    if (!pivotDataStore || !$pivotDataStore || !pivotConfig || !$pivotConfig)
-      return;
-
-    const isExclusive = event.metaKey || event.ctrlKey;
-
-    // Row header click: only row dimension filters
-    // Data cell click: row + column dimension filters
-    const cellFilters = isRowHeader
-      ? getFiltersForRowHeader($pivotConfig, rowId, $pivotDataStore.data)
-      : getFiltersForCell(
-          $pivotConfig,
-          rowId,
-          columnId,
-          $pivotDataStore.columnDimensionAxes ?? {},
-          $pivotDataStore.data,
-        );
-
-    if (!cellFilters.filters) return;
-
-    // Extract dimension name/value pairs from the filter expression
-    const dimensionFilters = extractDimensionFiltersFromExpression(
-      cellFilters.filters,
-    );
+  onDestroy(() => clickToFilter?.destroy());
 
-    if (dimensionFilters.length === 0) return;
+  // Unwrap stores from the factory result for template use
+  $: clickSelectionStore = clickToFilter?.clickSelection;
+  $: clickSelection = clickSelectionStore ? $clickSelectionStore : undefined;
 
-    // Get the FilterState for this metrics view to batch updates
-    const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
-    if (!filterClass) return;
-
-    // Clear temporary filter status for all dimensions being toggled
-    dimensionFilters.forEach(({ dimensionName }) => {
-      filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
-    });
-
-    // Toggle each dimension's values on FilterState (no URL update per call)
-    let filterString: string | null = null;
-    dimensionFilters.forEach(({ dimensionName, values }) => {
-      filterString = filterClass.toggleDimensionValueSelections(
-        dimensionName,
-        values,
-        false, // keepPillVisible
-        isExclusive,
-      );
-    });
-
-    // Track click selection for visual highlighting.
-    // Exclusive mode clears all previous selections; normal mode accumulates.
-    const nextRowHeaders = isExclusive
-      ? new Set<string>()
-      : new Set(clickSelection.rowHeaderSelections);
-    const nextCells = isExclusive
-      ? new Set<string>()
-      : new Set(clickSelection.cellSelections);
-
-    if (isRowHeader) {
-      // Toggle: if already selected, the filter toggle above removed it
-      if (nextRowHeaders.has(rowId)) {
-        nextRowHeaders.delete(rowId);
-      } else {
-        nextRowHeaders.add(rowId);
-      }
-    } else {
-      const key = cellKey(rowId, columnId);
-      if (nextCells.has(key)) {
-        nextCells.delete(key);
-      } else {
-        nextCells.add(key);
-      }
-    }
-
-    const hasAny = nextRowHeaders.size > 0 || nextCells.size > 0;
-    clickSelection = {
-      rowHeaderSelections: nextRowHeaders,
-      cellSelections: nextCells,
-      hasAnySelection: hasAny,
-      isRowHeaderSelected: (rid) => nextRowHeaders.has(rid),
-      isCellSelected: (rid, cid) => nextCells.has(cellKey(rid, cid)),
-    };
-
-    // Mark these dimensions as self-filtered by the pivot
-    selfFilteredDimensions.update((dims) => {
-      const next = new Set(dims);
-      dimensionFilters.forEach(({ dimensionName }) => next.add(dimensionName));
-      return next;
-    });
-
-    // Single batch URL update with the final filter string
-    if (filterString !== null) {
-      filterManager.applyFiltersToUrl(
-        new Map([[metricsViewName, filterString]]),
-      );
-    }
-  }
-
-  // Clear selection state when the pivot has no self-applied filters
-  $: if ($selfFilteredDimensions.size === 0) {
-    clickSelection = createEmptyClickSelectionState();
-  }
+  $: rowSelectionStateStore = clickToFilter?.rowSelectionState;
+  $: rowSelectionState = rowSelectionStateStore
+    ? $rowSelectionStateStore
+    : undefined;
 </script>
 
 <div
@@ -250,7 +121,8 @@
             rowPage: page,
           }));
         }}
-        onCellClickToFilter={handleCellClickToFilter}
+        onCellClickToFilter={clickToFilter?.handleCellClickToFilter}
+        onColumnHeaderClick={clickToFilter?.handleColumnHeaderClick}
       />
     {/if}
   {/if}
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
new file mode 100644
index 00000000000..70fa2a55710
--- /dev/null
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -0,0 +1,367 @@
+/**
+ * Factory that creates all click-to-filter orchestration logic for a
+ * canvas pivot component.
+ *
+ * Returns readable stores for selection/row-highlight state, click
+ * handlers for cells and column headers, and a destroy function for
+ * cleanup.
+ */
+import {
+  type PivotClickSelectionState,
+  buildClickSelection,
+  cellKey,
+  columnHeaderKey,
+  createEmptyClickSelectionState,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-click-selection";
+import {
+  type PivotRowSelectionState,
+  computePivotRowSelection,
+  extractDimensionFiltersFromExpression,
+  extractSelectionDimensionFilters,
+  getDimensionValuesForRow,
+  getFiltersForColumnHeader,
+  getFiltersForRowHeader,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
+import { getFiltersForCell } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+import type {
+  PivotDataStore,
+  PivotDataStoreConfig,
+} from "@rilldata/web-common/features/dashboards/pivot/types";
+import type { V1Expression } from "@rilldata/web-common/runtime-client";
+import {
+  type Readable,
+  type Writable,
+  derived,
+  get,
+  writable,
+} from "svelte/store";
+import type { FilterManager } from "../../stores/filter-manager";
+
+interface PivotClickToFilterArgs {
+  pivotConfig: Readable<PivotDataStoreConfig>;
+  pivotDataStore: PivotDataStore;
+  filterManager: FilterManager;
+  metricsViewName: string;
+  selfFilteredDimensions: Writable<Set<string>>;
+  whereFilterStore: Readable<V1Expression | undefined>;
+}
+
+export interface PivotClickToFilterResult {
+  clickSelection: Readable<PivotClickSelectionState>;
+  rowSelectionState: Readable<PivotRowSelectionState | undefined>;
+  handleCellClickToFilter: (
+    rowId: string,
+    columnId: string,
+    isRowHeader: boolean,
+  ) => void;
+  handleColumnHeaderClick: (dimensionPath: Record<string, string>) => void;
+  destroy: () => void;
+}
+
+export function createPivotClickToFilter(
+  args: PivotClickToFilterArgs,
+): PivotClickToFilterResult {
+  const {
+    pivotConfig,
+    pivotDataStore,
+    filterManager,
+    metricsViewName,
+    selfFilteredDimensions,
+    whereFilterStore,
+  } = args;
+
+  // --- Internal click selection state ---
+  const clickSelectionStore = writable<PivotClickSelectionState>(
+    createEmptyClickSelectionState(),
+  );
+
+  // --- Prune selfFilteredDimensions when filters are cleared externally ---
+  const pruneUnsub = whereFilterStore.subscribe(($whereFilter) => {
+    const activeDims = new Set(
+      $whereFilter?.cond?.exprs
+        ?.map((e) => e.cond?.exprs?.[0]?.ident)
+        .filter(Boolean) ?? [],
+    );
+    const dims = get(selfFilteredDimensions);
+    let changed = false;
+    for (const dim of dims) {
+      if (!activeDims.has(dim)) {
+        dims.delete(dim);
+        changed = true;
+      }
+    }
+    if (changed) {
+      selfFilteredDimensions.set(new Set(dims));
+    }
+  });
+
+  // --- Clear click selection when no self-filtered dimensions remain ---
+  const clearUnsub = selfFilteredDimensions.subscribe(($selfFiltered) => {
+    if ($selfFiltered.size === 0) {
+      clickSelectionStore.set(createEmptyClickSelectionState());
+    }
+  });
+
+  // --- Derived row selection state ---
+  const dimensionFilterMap = derived(
+    [whereFilterStore, selfFilteredDimensions],
+    ([$whereFilter, $selfFiltered]) =>
+      extractSelectionDimensionFilters($whereFilter, [...$selfFiltered]),
+  );
+
+  const rowSelectionState: Readable<PivotRowSelectionState | undefined> =
+    derived(
+      [pivotDataStore, pivotConfig, dimensionFilterMap],
+      ([$pivotData, $config, $dimFilterMap]) => {
+        if (!$pivotData?.data || !$config) return undefined;
+        return computePivotRowSelection(
+          $config,
+          $pivotData.data,
+          $dimFilterMap,
+        );
+      },
+    );
+
+  // --- Retained value computation for safe deselect ---
+
+  function collectRetainedDimensionValues(
+    remainingRowHeaders: Set<string>,
+    remainingCells: Set<string>,
+    remainingColHeaders: Set<string>,
+  ): Map<string, Set<string>> {
+    const retainedValues = new Map<string, Set<string>>();
+
+    const addRetainedValue = (dimensionName: string, value: string) => {
+      let valueSet = retainedValues.get(dimensionName);
+      if (!valueSet) {
+        valueSet = new Set();
+        retainedValues.set(dimensionName, valueSet);
+      }
+      valueSet.add(value);
+    };
+
+    const $config = get(pivotConfig);
+    const $data = get(pivotDataStore);
+    if (!$config || !$data?.data) return retainedValues;
+
+    // Values from remaining row header selections
+    for (const rowId of remainingRowHeaders) {
+      const rowDimValues = getDimensionValuesForRow($config, rowId, $data.data);
+      for (const { dimensionName, value } of rowDimValues) {
+        addRetainedValue(dimensionName, value);
+      }
+    }
+
+    // Values from remaining data cell selections (row + column dimensions)
+    for (const selectionKey of remainingCells) {
+      const separatorIndex = selectionKey.indexOf(":");
+      if (separatorIndex === -1) continue;
+      const rowId = selectionKey.slice(0, separatorIndex);
+      const columnId = selectionKey.slice(separatorIndex + 1);
+      const cellFilter = getFiltersForCell(
+        $config,
+        rowId,
+        columnId,
+        $data.columnDimensionAxes ?? {},
+        $data.data,
+      );
+      if (cellFilter.filters) {
+        const extractedFilters = extractDimensionFiltersFromExpression(
+          cellFilter.filters,
+        );
+        for (const { dimensionName, values } of extractedFilters) {
+          for (const value of values) addRetainedValue(dimensionName, value);
+        }
+      }
+    }
+
+    // Values from remaining column header selections
+    // Key format: JSON-serialised sorted entries, e.g. '[["dim","val"]]'
+    for (const headerKey of remainingColHeaders) {
+      try {
+        const entries: [string, string][] = JSON.parse(headerKey);
+        for (const [dimensionName, value] of entries) {
+          addRetainedValue(dimensionName, value);
+        }
+      } catch {
+        // Malformed key; skip
+      }
+    }
+
+    return retainedValues;
+  }
+
+  // --- Core filter application ---
+
+  function applyDimensionFilters(
+    filters: V1Expression,
+    isDeselect: boolean,
+    updateSelectionSets: (
+      rowHeaders: Set<string>,
+      cells: Set<string>,
+      colHeaders: Set<string>,
+    ) => void,
+  ) {
+    const dimensionFilters = extractDimensionFiltersFromExpression(filters);
+    if (dimensionFilters.length === 0) return;
+
+    const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
+    if (!filterClass) return;
+
+    // Update selection sets first so we can compute retained values
+    const $clickSelection = get(clickSelectionStore);
+    const updatedRowHeaders = new Set($clickSelection.rowHeaderSelections);
+    const updatedCells = new Set($clickSelection.cellSelections);
+    const updatedColHeaders = new Set($clickSelection.columnHeaderSelections);
+    updateSelectionSets(updatedRowHeaders, updatedCells, updatedColHeaders);
+
+    // Clear temporary filter status for all dimensions being changed
+    dimensionFilters.forEach(({ dimensionName }) => {
+      filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
+    });
+
+    let filterString: string | null = null;
+    if (isDeselect) {
+      // Compute which values are still needed by remaining selections
+      const retainedValues = collectRetainedDimensionValues(
+        updatedRowHeaders,
+        updatedCells,
+        updatedColHeaders,
+      );
+
+      // Only toggle (remove) values that are no longer referenced
+      dimensionFilters.forEach(({ dimensionName, values }) => {
+        const stillNeeded = retainedValues.get(dimensionName);
+        const orphanedValues = stillNeeded
+          ? values.filter((v) => !stillNeeded.has(v))
+          : values;
+
+        if (orphanedValues.length > 0) {
+          filterString = filterClass.toggleDimensionValueSelections(
+            dimensionName,
+            orphanedValues,
+            false,
+            false,
+          );
+        }
+      });
+
+      // If no values were actually removed, get current filter string for URL
+      if (filterString === null) {
+        dimensionFilters.forEach(({ dimensionName }) => {
+          filterString = filterClass.addDimensionValueSelections(
+            dimensionName,
+            [],
+          );
+        });
+      }
+    } else {
+      dimensionFilters.forEach(({ dimensionName, values }) => {
+        filterString = filterClass.addDimensionValueSelections(
+          dimensionName,
+          values,
+        );
+      });
+    }
+
+    clickSelectionStore.set(
+      buildClickSelection(updatedRowHeaders, updatedCells, updatedColHeaders),
+    );
+
+    // Mark these dimensions as self-filtered by the pivot
+    selfFilteredDimensions.update((dims) => {
+      const next = new Set(dims);
+      dimensionFilters.forEach(({ dimensionName }) => next.add(dimensionName));
+      return next;
+    });
+
+    // Single batch URL update with the final filter string
+    if (filterString !== null) {
+      filterManager.applyFiltersToUrl(
+        new Map([[metricsViewName, filterString]]),
+      );
+    }
+  }
+
+  // --- Click handlers ---
+
+  function handleCellClickToFilter(
+    rowId: string,
+    columnId: string,
+    isRowHeader: boolean,
+  ) {
+    const $config = get(pivotConfig);
+    const $data = get(pivotDataStore);
+    if (!$config || !$data?.data) return;
+
+    const $clickSelection = get(clickSelectionStore);
+
+    // Determine if this click is deselecting a previously selected element
+    const isDeselect = isRowHeader
+      ? $clickSelection.isRowHeaderSelected(rowId)
+      : $clickSelection.isCellSelected(rowId, columnId);
+
+    const cellFilters = isRowHeader
+      ? getFiltersForRowHeader($config, rowId, $data.data)
+      : getFiltersForCell(
+          $config,
+          rowId,
+          columnId,
+          $data.columnDimensionAxes ?? {},
+          $data.data,
+        );
+
+    if (!cellFilters.filters) return;
+
+    applyDimensionFilters(
+      cellFilters.filters,
+      isDeselect,
+      (nextRowHeaders, nextCells) => {
+        if (isRowHeader) {
+          if (nextRowHeaders.has(rowId)) nextRowHeaders.delete(rowId);
+          else nextRowHeaders.add(rowId);
+        } else {
+          const key = cellKey(rowId, columnId);
+          if (nextCells.has(key)) nextCells.delete(key);
+          else nextCells.add(key);
+        }
+      },
+    );
+  }
+
+  function handleColumnHeaderClick(dimensionPath: Record<string, string>) {
+    const $config = get(pivotConfig);
+    if (!$config) return;
+
+    const $clickSelection = get(clickSelectionStore);
+    const isDeselect = $clickSelection.isColumnHeaderSelected(dimensionPath);
+
+    const colFilters = getFiltersForColumnHeader($config, dimensionPath);
+    if (!colFilters.filters) return;
+
+    applyDimensionFilters(
+      colFilters.filters,
+      isDeselect,
+      (_nextRowHeaders, _nextCells, nextColHeaders) => {
+        const key = columnHeaderKey(dimensionPath);
+        if (nextColHeaders.has(key)) nextColHeaders.delete(key);
+        else nextColHeaders.add(key);
+      },
+    );
+  }
+
+  // --- Cleanup ---
+
+  function destroy() {
+    pruneUnsub();
+    clearUnsub();
+  }
+
+  return {
+    clickSelection: { subscribe: clickSelectionStore.subscribe },
+    rowSelectionState,
+    handleCellClickToFilter,
+    handleColumnHeaderClick,
+    destroy,
+  };
+}
diff --git a/web-common/src/features/canvas/stores/filter-state.ts b/web-common/src/features/canvas/stores/filter-state.ts
index c44aedcb3c0..ab18b1dd6d8 100644
--- a/web-common/src/features/canvas/stores/filter-state.ts
+++ b/web-common/src/features/canvas/stores/filter-state.ts
@@ -330,6 +330,51 @@ export class FilterState {
     );
   };
 
+  /**
+   * Adds dimension values to the filter without removing existing ones.
+   * Unlike toggleDimensionValueSelections, this never removes a value
+   * that is already present; it only appends new values.
+   */
+  addDimensionValueSelections = (
+    dimensionName: string,
+    dimensionValues: string[],
+  ) => {
+    const {
+      dimensionFilter: wf,
+      dimensionsWithInListFilter,
+      dimensionThresholdFilters,
+    } = get(this.parsed);
+
+    const exprIndex =
+      wf.cond?.exprs?.findIndex(
+        (e) => e.cond?.exprs?.[0].ident === dimensionName,
+      ) ?? -1;
+    const expr = wf.cond?.exprs?.[exprIndex];
+
+    if (!expr?.cond?.exprs) {
+      // No existing filter for this dimension; create one
+      const newExpr = createInExpression(dimensionName, dimensionValues);
+      wf.cond?.exprs?.push(newExpr);
+    } else {
+      // Append only values not already in the filter
+      const existing = getValuesInExpression(expr);
+      const existingSet = new Set(existing);
+      for (const val of dimensionValues) {
+        if (!existingSet.has(val)) {
+          existing.push(val);
+        }
+      }
+      const ident = expr.cond.exprs[0];
+      expr.cond.exprs = [ident, ...existing.map((v) => ({ val: v }))];
+    }
+
+    return getFilterParam(
+      wf,
+      dimensionThresholdFilters,
+      dimensionsWithInListFilter,
+    );
+  };
+
   applyDimensionInListMode = (dimensionName: string, values: string[]) => {
     const {
       dimensionFilter: wf,
diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index 8dc825710cd..18595b7e611 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -16,10 +16,8 @@
   import { cellInspectorStore } from "../stores/cell-inspector-store";
   import type { Cell, Column, HeaderGroup, Row } from "@tanstack/svelte-table";
   import { flexRender } from "@tanstack/svelte-table";
-  import type {
-    PivotClickSelectionState,
-    PivotRowSelectionState,
-  } from "./pivot-row-selection";
+  import type { PivotClickSelectionState } from "./pivot-click-selection";
+  import type { PivotRowSelectionState } from "./pivot-row-selection";
   import type { PivotDataRow } from "./types";
 
   // State props
@@ -200,9 +198,11 @@
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isRowHeaderSelected =
         clickSelection?.isRowHeaderSelected(rowId) ?? false}
+      {@const hasClickedCell =
+        clickSelection?.hasSelectedCellInRow(rowId) ?? false}
       <tr
         class:selected-row={isSelected && isRowHeaderSelected}
-        class:dimmed-row={hasSelection && !isSelected}
+        class:dimmed-row={hasSelection && !isSelected && !hasClickedCell}
       >
         {#each cells as cell (cell.id)}
           {@const result =
@@ -214,7 +214,6 @@
           <td
             class="ui-copy-number cell truncate"
             class:active-cell={isActive}
-            class:clicked-cell={isClicked}
             class:selected-cell={isClicked}
             class:interactive-cell={(canShowDataViewer ||
               enableClickToFilter) &&
@@ -338,12 +337,8 @@
     @apply bg-primary-50;
   }
 
-  .clicked-cell {
-    @apply ring-1 ring-inset ring-primary-400;
-  }
-
   .selected-cell.cell {
-    @apply bg-primary-50;
+    @apply bg-primary-50 ring-1 ring-inset ring-primary-400;
   }
   .selected-cell.cell:hover {
     @apply bg-primary-100;
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index a31c6ff92bd..20725694f92 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -10,6 +10,7 @@
   import type { Cell, HeaderGroup, Row } from "@tanstack/svelte-table";
   import { flexRender } from "@tanstack/svelte-table";
   import { cellInspectorStore } from "../stores/cell-inspector-store";
+  import type { PivotClickSelectionState } from "./pivot-click-selection";
   import {
     getRowNestedLabel,
     type DimensionColumnProps,
@@ -20,10 +21,7 @@
     calculateRowDimensionWidth,
     COLUMN_WIDTH_CONSTANTS as WIDTHS,
   } from "./pivot-column-width-utils";
-  import type {
-    PivotClickSelectionState,
-    PivotRowSelectionState,
-  } from "./pivot-row-selection";
+  import type { PivotRowSelectionState } from "./pivot-row-selection";
   import { isShowMoreRow } from "./pivot-utils";
   import type { PivotDataRow } from "./types";
 
@@ -54,9 +52,38 @@
   export let onCellClick: (e: MouseEvent) => void;
   export let onTableLeave: () => void;
   export let onCellCopy: (e: MouseEvent) => void;
+  export let onColumnHeaderClick:
+    | ((dimensionPath: Record<string, string>) => void)
+    | undefined = undefined;
 
   const HEADER_HEIGHT = 30;
 
+  // Hover state for column dimension headers
+  let hoveredColRange: { start: number; size: number } | null = null;
+
+  // Compute which leaf column indices are covered by selected column headers.
+  // Iterates header groups to find selected headers and collects their ranges.
+  $: selectedColIndices = (() => {
+    if (!clickSelection?.hasAnySelection) return new Set<number>();
+    const indices = new Set<number>();
+    for (const group of headerGroups) {
+      let colStart = 0;
+      for (const header of group.headers) {
+        const meta = header.column.columnDef.meta;
+        if (
+          meta?.dimensionPath &&
+          clickSelection.isColumnHeaderSelected(meta.dimensionPath)
+        ) {
+          for (let c = colStart; c < colStart + header.colSpan; c++) {
+            indices.add(c);
+          }
+        }
+        colStart += header.colSpan;
+      }
+    }
+    return indices;
+  })();
+
   let resizingMeasure = false;
   let initialMeasureIndexOnResize = 0;
   let initLengthOnResize = 0;
@@ -171,6 +198,24 @@
     return clickSelection?.isCellSelected(cell.row.id, cell.column.id) ?? false;
   }
 
+  function isHeaderInHoveredRange(
+    headerStart: number,
+    headerSize: number,
+  ): boolean {
+    if (!hoveredColRange) return false;
+    const hovEnd = hoveredColRange.start + hoveredColRange.size;
+    return (
+      headerStart >= hoveredColRange.start && headerStart + headerSize <= hovEnd
+    );
+  }
+
+  function isHoveredHeader(colStart: number, colSpan: number): boolean {
+    if (!hoveredColRange) return false;
+    return (
+      colStart === hoveredColRange.start && colSpan === hoveredColRange.size
+    );
+  }
+
   function shouldShowHeaderRightBorder(header: any, index: number): boolean {
     const isMeasure = isMeasureColumn(header, index);
     if (!isMeasure) return true;
@@ -279,7 +324,10 @@
   style:width="{totalLength + rowDimensionWidth}px"
   on:click={modified({ shift: onCellCopy, click: onCellClick })}
   on:mousemove={onMouseMove}
-  on:mouseleave={onTableLeave}
+  on:mouseleave={() => {
+    hoveredColRange = null;
+    onTableLeave();
+  }}
 >
   <colgroup>
     {#if rowDimensionName && rowDimensionWidth}
@@ -302,16 +350,57 @@
       <tr>
         {#each headerGroup.headers as header, i (header.id)}
           {@const sortDirection = header.column.getIsSorted()}
-          {@const icon = header.column.columnDef.meta?.icon}
-
-          <th colSpan={header.colSpan}>
+          {@const dimMeta = header.column.columnDef.meta}
+          {@const icon = dimMeta?.icon}
+          {@const isColDimHeader =
+            !header.isPlaceholder && !!dimMeta?.dimensionPath}
+          {@const colStart = headerGroup.headers
+            .slice(0, i)
+            .reduce((sum, h) => sum + h.colSpan, 0)}
+          {@const inHoverRange =
+            hoveredColRange && isHeaderInHoveredRange(colStart, header.colSpan)}
+          {@const isTheHoveredHeader =
+            inHoverRange && isHoveredHeader(colStart, header.colSpan)}
+          {@const isSelfSelected =
+            isColDimHeader &&
+            !!dimMeta.dimensionPath &&
+            (clickSelection?.isColumnHeaderSelected(dimMeta.dimensionPath) ??
+              false)}
+          {@const inSelectedRange =
+            selectedColIndices.size > 0 && selectedColIndices.has(colStart)}
+
+          <th
+            colSpan={header.colSpan}
+            class:col-dim-hover-self={isTheHoveredHeader}
+            class:col-dim-hover-child={inHoverRange && !isTheHoveredHeader}
+            class:selected-col-header={isSelfSelected}
+            class:in-selected-col-range={inSelectedRange && !isSelfSelected}
+            on:mouseenter={() => {
+              if (isColDimHeader) {
+                hoveredColRange = {
+                  start: colStart,
+                  size: header.colSpan,
+                };
+              }
+            }}
+            on:mouseleave={() => {
+              hoveredColRange = null;
+            }}
+          >
             <button
               class="header-cell"
-              class:cursor-pointer={header.column.getCanSort()}
+              class:cursor-pointer={header.column.getCanSort() ||
+                (isColDimHeader && !!onColumnHeaderClick)}
               class:select-none={header.column.getCanSort()}
               class:flex-row-reverse={isMeasureColumn(header, i)}
               class:border-r={shouldShowHeaderRightBorder(header, i)}
-              on:click={header.column.getToggleSortingHandler()}
+              on:click={(e) => {
+                if (isColDimHeader && onColumnHeaderClick) {
+                  onColumnHeaderClick(dimMeta.dimensionPath ?? {});
+                } else {
+                  header.column.getToggleSortingHandler()?.(e);
+                }
+              }}
             >
               {#if !header.isPlaceholder}
                 {#if icon}
@@ -345,10 +434,12 @@
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isRowHeaderSelected =
         clickSelection?.isRowHeaderSelected(rowId) ?? false}
+      {@const hasClickedCell =
+        clickSelection?.hasSelectedCellInRow(rowId) ?? false}
       <tr
         class:show-more-row={isShowMoreRow(rows[row.index])}
         class:selected-row={isSelected && isRowHeaderSelected}
-        class:dimmed-row={hasSelection && !isSelected}
+        class:dimmed-row={hasSelection && !isSelected && !hasClickedCell}
       >
         {#each cells as cell, i (cell.id)}
           {@const result =
@@ -357,11 +448,15 @@
               : cell.column.columnDef.cell}
           {@const isActive = isCellActive(cell)}
           {@const isClicked = isCellClicked(cell)}
+          {@const inHoveredCol =
+            hoveredColRange && isHeaderInHoveredRange(i, 1)}
+          {@const inSelectedCol = selectedColIndices.has(i)}
           <td
             class="ui-copy-number cell truncate group/cell"
             class:active-cell={isActive}
-            class:clicked-cell={isClicked}
             class:selected-cell={isClicked}
+            class:col-dim-hover-body={inHoveredCol}
+            class:selected-col-body={inSelectedCol}
             class:interactive-cell={canShowDataViewer || enableClickToFilter}
             class:border-r={shouldShowRightBorder(i)}
             data-value={cell.getValue()}
@@ -506,12 +601,12 @@
     @apply pl-5;
   }
 
-  tr:hover,
-  tr:hover .cell {
+  tbody tr:hover,
+  tbody tr:hover .cell {
     @apply bg-surface-hover;
   }
 
-  tr:hover .active-cell {
+  tbody tr:hover .active-cell {
     @apply bg-primary-100;
   }
 
@@ -525,12 +620,8 @@
     @apply bg-primary-50;
   }
 
-  .clicked-cell {
-    @apply ring-1 ring-inset ring-primary-400;
-  }
-
   .selected-cell.cell {
-    @apply bg-primary-50;
+    @apply bg-primary-50 ring-1 ring-inset ring-primary-400;
   }
   .selected-cell.cell:hover {
     @apply bg-primary-100;
@@ -542,10 +633,10 @@
   .selected-row:hover .cell {
     @apply bg-primary-100;
   }
-  .selected-row > td:first-of-type {
-    @apply bg-primary-50;
+  .with-row-dimension .selected-row > td:first-of-type {
+    @apply bg-primary-100;
   }
-  .selected-row:hover > td:first-of-type {
+  .with-row-dimension .selected-row:hover > td:first-of-type {
     @apply bg-primary-100;
   }
 
@@ -563,4 +654,24 @@
   .show-more-row:hover .cell {
     @apply bg-gray-100;
   }
+
+  /* Column dimension header hover: the hovered header itself */
+  .col-dim-hover-self .header-cell {
+    @apply bg-primary-100;
+  }
+
+  /* Column dimension header hover: child headers below the hovered one */
+  .col-dim-hover-child .header-cell,
+  .col-dim-hover-body.cell {
+    @apply bg-primary-50;
+  }
+
+  .selected-col-header .header-cell {
+    @apply bg-primary-100;
+  }
+
+  .in-selected-col-range .header-cell,
+  .selected-col-body.cell {
+    @apply bg-primary-50;
+  }
 </style>
diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte
index 7561bca92d6..ba9f2f46214 100644
--- a/web-common/src/features/dashboards/pivot/PivotTable.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotTable.svelte
@@ -10,10 +10,8 @@
     SHOW_MORE_BUTTON,
   } from "@rilldata/web-common/features/dashboards/pivot/pivot-constants";
   import { NUM_ROWS_PER_PAGE } from "@rilldata/web-common/features/dashboards/pivot/pivot-infinite-scroll";
-  import type {
-    PivotClickSelectionState,
-    PivotRowSelectionState,
-  } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
+  import type { PivotClickSelectionState } from "@rilldata/web-common/features/dashboards/pivot/pivot-click-selection";
+  import type { PivotRowSelectionState } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
   import {
     isElement,
     splitPivotChips,
@@ -66,12 +64,10 @@
     | ((expandIndex: string, limit: number) => void)
     | undefined = undefined;
   export let onCellClickToFilter:
-    | ((
-        rowId: string,
-        columnId: string,
-        isRowHeader: boolean,
-        event: MouseEvent,
-      ) => void)
+    | ((rowId: string, columnId: string, isRowHeader: boolean) => void)
+    | undefined = undefined;
+  export let onColumnHeaderClick:
+    | ((dimensionPath: Record<string, string>) => void)
     | undefined = undefined;
   export let enableClickToFilter = false;
   export let rowSelectionState: PivotRowSelectionState | undefined = undefined;
@@ -270,7 +266,7 @@
 
       // Apply click-to-filter (Canvas or future Explore)
       if (onCellClickToFilter) {
-        onCellClickToFilter(rowId, columnId, rowHeader, e);
+        onCellClickToFilter(rowId, columnId, rowHeader);
       }
     }
   }
@@ -382,6 +378,7 @@
       {enableClickToFilter}
       {rowSelectionState}
       {clickSelection}
+      {onColumnHeaderClick}
       activeCell={$pivotState.activeCell}
       {assembled}
       {scrollLeft}
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
new file mode 100644
index 00000000000..7d9596a5ccf
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -0,0 +1,73 @@
+/**
+ * Tracks which pivot elements (row headers, data cells, column headers)
+ * were selected via click-to-filter. Pure data types and key builders
+ * with no dependencies on other pivot modules.
+ */
+
+export interface PivotClickSelectionState {
+  /** rowIds selected via row-header clicks */
+  rowHeaderSelections: Set<string>;
+  /** "rowId:columnId" keys selected via data-cell clicks */
+  cellSelections: Set<string>;
+  /** "dimensionName:dimensionValue" keys selected via column-header clicks */
+  columnHeaderSelections: Set<string>;
+  /** Whether any selection exists at all */
+  hasAnySelection: boolean;
+  /** Check if a specific row was selected via row-header click */
+  isRowHeaderSelected: (rowId: string) => boolean;
+  /** Check if a specific cell was selected via data-cell click */
+  isCellSelected: (rowId: string, columnId: string) => boolean;
+  /** Check if any data cell in this row was selected via click */
+  hasSelectedCellInRow: (rowId: string) => boolean;
+  /** Check if a column header was selected via click */
+  isColumnHeaderSelected: (dimensionPath: Record<string, string>) => boolean;
+}
+
+export function createEmptyClickSelectionState(): PivotClickSelectionState {
+  return {
+    rowHeaderSelections: new Set(),
+    cellSelections: new Set(),
+    columnHeaderSelections: new Set(),
+    hasAnySelection: false,
+    isRowHeaderSelected: () => false,
+    isCellSelected: () => false,
+    hasSelectedCellInRow: () => false,
+    isColumnHeaderSelected: () => false,
+  };
+}
+
+export function cellKey(rowId: string, columnId: string) {
+  return `${rowId}:${columnId}`;
+}
+
+export function columnHeaderKey(dimensionPath: Record<string, string>): string {
+  return JSON.stringify(
+    Object.entries(dimensionPath).sort(([a], [b]) => a.localeCompare(b)),
+  );
+}
+
+export function buildClickSelection(
+  rowHeaders: Set<string>,
+  cells: Set<string>,
+  colHeaders: Set<string>,
+): PivotClickSelectionState {
+  const hasAny = rowHeaders.size > 0 || cells.size > 0 || colHeaders.size > 0;
+
+  // Build a set of rowIds that have at least one selected cell
+  const rowsWithSelectedCells = new Set<string>();
+  for (const key of cells) {
+    const sep = key.indexOf(":");
+    if (sep !== -1) rowsWithSelectedCells.add(key.slice(0, sep));
+  }
+
+  return {
+    rowHeaderSelections: rowHeaders,
+    cellSelections: cells,
+    columnHeaderSelections: colHeaders,
+    hasAnySelection: hasAny,
+    isRowHeaderSelected: (rid) => rowHeaders.has(rid),
+    isCellSelected: (rid, cid) => cells.has(cellKey(rid, cid)),
+    hasSelectedCellInRow: (rid) => rowsWithSelectedCells.has(rid),
+    isColumnHeaderSelected: (path) => colHeaders.has(columnHeaderKey(path)),
+  };
+}
diff --git a/web-common/src/features/dashboards/pivot/pivot-column-definition.ts b/web-common/src/features/dashboards/pivot/pivot-column-definition.ts
index d77c8f224e9..de0b36d6057 100644
--- a/web-common/src/features/dashboards/pivot/pivot-column-definition.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-column-definition.ts
@@ -116,9 +116,17 @@ function createColumnDefinitionForDimensions(
           [dimensionNames[level]]: value,
         });
 
+        const dimensionPath = {
+          ...colValuePair,
+          [dimensionNames[level]]: value,
+        };
+
         return {
           header: sanitizeHeaderValue(displayValue),
           columns: nestedColumns,
+          meta: {
+            dimensionPath,
+          },
         };
       })
       .filter((column) => column.columns.length > 0);
diff --git a/web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts b/web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts
deleted file mode 100644
index 609c1b63106..00000000000
--- a/web-common/src/features/dashboards/pivot/pivot-filter-extraction.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
-  V1Operation,
-  type V1Expression,
-} from "@rilldata/web-common/runtime-client";
-
-export interface ExtractedFilter {
-  dimensionName: string;
-  values: string[];
-}
-
-/**
- * Extracts dimension filters from a V1Expression structure.
- * The expression is expected to be an AND operation containing IN operations.
- *
- * @param filters - The V1Expression containing dimension filters
- * @returns Array of extracted dimension filters with their values
- */
-export function extractDimensionFiltersFromExpression(
-  filters: V1Expression | undefined,
-): ExtractedFilter[] {
-  if (!filters?.cond?.exprs) return [];
-
-  const result: ExtractedFilter[] = [];
-
-  // Walk the AND expression tree
-  for (const expr of filters.cond.exprs) {
-    if (expr.cond?.op === V1Operation.OPERATION_IN) {
-      const ident = expr.cond.exprs?.[0]?.ident;
-      if (!ident) continue;
-
-      // Extract values (skip first expr which is the identifier)
-      const values = expr?.cond?.exprs
-        ?.slice(1)
-        .map((e) => e.val)
-        .filter((val): val is string => val !== undefined && val !== null);
-
-      if (values && values?.length > 0) {
-        result.push({ dimensionName: ident, values });
-      }
-    }
-  }
-
-  return result;
-}
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 6bbf010e766..0ff74163b52 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -23,38 +23,6 @@ import type {
   TimeFilters,
 } from "./types";
 
-/**
- * Tracks which rows were selected via row-header clicks and which
- * individual cells were selected via data-cell clicks. Supports
- * mixed multi-select: row-header clicks and cell clicks can coexist.
- */
-export interface PivotClickSelectionState {
-  /** rowIds selected via row-header clicks */
-  rowHeaderSelections: Set<string>;
-  /** "rowId:columnId" keys selected via data-cell clicks */
-  cellSelections: Set<string>;
-  /** Whether any selection exists at all */
-  hasAnySelection: boolean;
-  /** Check if a specific row was selected via row-header click */
-  isRowHeaderSelected: (rowId: string) => boolean;
-  /** Check if a specific cell was selected via data-cell click */
-  isCellSelected: (rowId: string, columnId: string) => boolean;
-}
-
-export function createEmptyClickSelectionState(): PivotClickSelectionState {
-  return {
-    rowHeaderSelections: new Set(),
-    cellSelections: new Set(),
-    hasAnySelection: false,
-    isRowHeaderSelected: () => false,
-    isCellSelected: () => false,
-  };
-}
-
-export function cellKey(rowId: string, columnId: string): string {
-  return `${rowId}:${columnId}`;
-}
-
 export interface PivotRowSelectionState {
   /** True if at least one row dimension has active filter selections */
   hasActiveSelection: boolean;
@@ -62,6 +30,32 @@ export interface PivotRowSelectionState {
   isRowSelected: (rowId: string) => boolean;
 }
 
+/**
+ * Returns the raw dimension values for a row, including time dimensions.
+ * Shared by getDimensionValuesForRow (which filters out time) and
+ * getFiltersForRowHeader (which needs time for TimeFilters).
+ */
+function getRawRowValues(
+  config: PivotDataStoreConfig,
+  rowId: string,
+  tableData: PivotDataRow[],
+): string[] {
+  const { rowDimensionNames, measureNames, isFlat } = config;
+  return isFlat
+    ? getValuesForFlatTable(
+        tableData,
+        rowDimensionNames,
+        rowId,
+        measureNames.length > 0,
+      )
+    : getValuesForExpandedKey(
+        tableData,
+        rowDimensionNames,
+        rowId,
+        measureNames.length > 0,
+      );
+}
+
 /**
  * Extracts dimension name/value pairs for a given row without building
  * full V1Expression objects. Used for determining row selection state
@@ -72,28 +66,11 @@ export function getDimensionValuesForRow(
   rowId: string,
   tableData: PivotDataRow[],
 ): Array<{ dimensionName: string; value: string }> {
-  const { rowDimensionNames, measureNames, isFlat } = config;
-
-  let values: string[];
-  if (isFlat) {
-    values = getValuesForFlatTable(
-      tableData,
-      rowDimensionNames,
-      rowId,
-      measureNames.length > 0,
-    );
-  } else {
-    values = getValuesForExpandedKey(
-      tableData,
-      rowDimensionNames,
-      rowId,
-      measureNames.length > 0,
-    );
-  }
+  const values = getRawRowValues(config, rowId, tableData);
 
   return values
     .map((value, index) => ({
-      dimensionName: rowDimensionNames[index],
+      dimensionName: config.rowDimensionNames[index],
       value,
     }))
     .filter(
@@ -180,25 +157,8 @@ export function getFiltersForRowHeader(
   rowId: string,
   tableData: PivotDataRow[],
 ): PivotFilter {
-  const { rowDimensionNames, measureNames, isFlat } = config;
-
-  let values: string[];
-
-  if (isFlat) {
-    values = getValuesForFlatTable(
-      tableData,
-      rowDimensionNames,
-      rowId,
-      measureNames.length > 0,
-    );
-  } else {
-    values = getValuesForExpandedKey(
-      tableData,
-      rowDimensionNames,
-      rowId,
-      measureNames.length > 0,
-    );
-  }
+  const { rowDimensionNames } = config;
+  const values = getRawRowValues(config, rowId, tableData);
 
   const rowNestTimeFilters: TimeFilters[] = [];
   const rowNestFilters = values
@@ -233,3 +193,80 @@ export function getFiltersForRowHeader(
 
   return { filters, timeRange };
 }
+
+/**
+ * Builds filters for a column dimension header click.
+ * Accepts the full dimension path (all ancestor + self dimension values)
+ * so that clicking a nested column header filters on all parent dimensions too.
+ */
+export function getFiltersForColumnHeader(
+  config: PivotDataStoreConfig,
+  dimensionPath: Record<string, string>,
+): PivotFilter {
+  const defaultTimeRange = {
+    start: config.time.timeStart,
+    end: config.time.timeEnd,
+  };
+
+  const timeFilters: TimeFilters[] = [];
+  const dimExprs = Object.entries(dimensionPath)
+    .map(([name, value]) => {
+      const expr = createInExpression(name, [value]);
+      if (isTimeDimension(name, config.time.timeDimension)) {
+        timeFilters.push({
+          timeStart: value,
+          interval: getTimeGrainFromDimension(name),
+        });
+        return null;
+      }
+      return expr;
+    })
+    .filter(Boolean) as V1Expression[];
+
+  const timeRange =
+    timeFilters.length > 0
+      ? getTimeForQuery(config.time, timeFilters)
+      : defaultTimeRange;
+
+  const dimFilter =
+    dimExprs.length > 0 ? createAndExpression(dimExprs) : undefined;
+  const filters = mergeFilters(dimFilter, config.whereFilter);
+  return { filters, timeRange };
+}
+
+// --- Merged from pivot-filter-extraction.ts ---
+
+export interface ExtractedFilter {
+  dimensionName: string;
+  values: string[];
+}
+
+/**
+ * Extracts dimension filters from a V1Expression structure.
+ * The expression is expected to be an AND operation containing IN operations.
+ */
+export function extractDimensionFiltersFromExpression(
+  filters: V1Expression | undefined,
+): ExtractedFilter[] {
+  if (!filters?.cond?.exprs) return [];
+
+  const result: ExtractedFilter[] = [];
+
+  for (const expr of filters.cond.exprs) {
+    if (expr.cond?.op === V1Operation.OPERATION_IN) {
+      const ident = expr.cond.exprs?.[0]?.ident;
+      if (!ident) continue;
+
+      const values = expr?.cond?.exprs
+        ?.slice(1)
+        .map((e) => e.val)
+        .filter((val): val is string => val !== undefined && val !== null);
+
+      if (values?.length) {
+        result.push({ dimensionName: ident, values });
+      }
+    }
+  }
+
+  return result;
+}

From 56864b2ceb44b368c0bdeda1592ffb43357861c0 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 9 Mar 2026 19:18:22 +0530
Subject: [PATCH 05/53] fix highlighting on hover

---
 .../dashboards/pivot/NestedTable.svelte       | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 20725694f92..9a7d26f1708 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -216,6 +216,22 @@
     );
   }
 
+  // Returns true if this header should be highlighted as falling within a
+  // selected column range (i.e. it is a child of the clicked header).
+  function isInSelectedColRange(
+    colStart: number,
+    colSpan: number,
+    isSelfSelected: boolean,
+  ): boolean {
+    if (selectedColIndices.size === 0 || colSpan === 0 || isSelfSelected) {
+      return false;
+    }
+    for (let i = colStart; i < colStart + colSpan; i++) {
+      if (!selectedColIndices.has(i)) return false;
+    }
+    return true;
+  }
+
   function shouldShowHeaderRightBorder(header: any, index: number): boolean {
     const isMeasure = isMeasureColumn(header, index);
     if (!isMeasure) return true;
@@ -366,15 +382,18 @@
             !!dimMeta.dimensionPath &&
             (clickSelection?.isColumnHeaderSelected(dimMeta.dimensionPath) ??
               false)}
-          {@const inSelectedRange =
-            selectedColIndices.size > 0 && selectedColIndices.has(colStart)}
+          {@const inSelectedRange = isInSelectedColRange(
+            colStart,
+            header.colSpan,
+            isSelfSelected,
+          )}
 
           <th
             colSpan={header.colSpan}
             class:col-dim-hover-self={isTheHoveredHeader}
             class:col-dim-hover-child={inHoverRange && !isTheHoveredHeader}
             class:selected-col-header={isSelfSelected}
-            class:in-selected-col-range={inSelectedRange && !isSelfSelected}
+            class:in-selected-col-range={inSelectedRange}
             on:mouseenter={() => {
               if (isColDimHeader) {
                 hoveredColRange = {

From 79e944ba7749ace5f5ba4c8c296a2c7a42c39105 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 11 Mar 2026 18:42:13 +0530
Subject: [PATCH 06/53] flat table: add only left cells to filter

---
 .../components/pivot/pivot-click-to-filter.ts | 40 +++++++++++++++++--
 .../dashboards/pivot/FlatTable.svelte         | 32 +++++++++++++--
 .../dashboards/pivot/PivotTable.svelte        |  1 +
 .../dashboards/pivot/pivot-click-selection.ts | 10 +++++
 .../features/dashboards/pivot/pivot-utils.ts  |  6 +++
 5 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 70fa2a55710..34b6f975fd3 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -75,6 +75,9 @@ export function createPivotClickToFilter(
     createEmptyClickSelectionState(),
   );
 
+  // Maps rowId → dimension column index for dimension-cell clicks (flat table only)
+  const rowDimClickIndex = new Map<string, number>();
+
   // --- Prune selfFilteredDimensions when filters are cleared externally ---
   const pruneUnsub = whereFilterStore.subscribe(($whereFilter) => {
     const activeDims = new Set(
@@ -98,6 +101,7 @@ export function createPivotClickToFilter(
   // --- Clear click selection when no self-filtered dimensions remain ---
   const clearUnsub = selfFilteredDimensions.subscribe(($selfFiltered) => {
     if ($selfFiltered.size === 0) {
+      rowDimClickIndex.clear();
       clickSelectionStore.set(createEmptyClickSelectionState());
     }
   });
@@ -158,12 +162,18 @@ export function createPivotClickToFilter(
       if (separatorIndex === -1) continue;
       const rowId = selectionKey.slice(0, separatorIndex);
       const columnId = selectionKey.slice(separatorIndex + 1);
+      // For flat-table dimension cell clicks, only include dims up to the clicked column
+      const dimIdx = $config.isFlat
+        ? $config.rowDimensionNames.indexOf(columnId)
+        : -1;
+      const upToDimensionIndex = dimIdx >= 0 ? dimIdx : undefined;
       const cellFilter = getFiltersForCell(
         $config,
         rowId,
         columnId,
         $data.columnDimensionAxes ?? {},
         $data.data,
+        upToDimensionIndex,
       );
       if (cellFilter.filters) {
         const extractedFilters = extractDimensionFiltersFromExpression(
@@ -265,7 +275,12 @@ export function createPivotClickToFilter(
     }
 
     clickSelectionStore.set(
-      buildClickSelection(updatedRowHeaders, updatedCells, updatedColHeaders),
+      buildClickSelection(
+        updatedRowHeaders,
+        updatedCells,
+        updatedColHeaders,
+        rowDimClickIndex,
+      ),
     );
 
     // Mark these dimensions as self-filtered by the pivot
@@ -301,6 +316,14 @@ export function createPivotClickToFilter(
       ? $clickSelection.isRowHeaderSelected(rowId)
       : $clickSelection.isCellSelected(rowId, columnId);
 
+    // For flat-table dimension cell clicks, only filter up to (and including) the
+    // clicked column's dimension index, not all row dimensions.
+    const flatDimIdx =
+      !isRowHeader && $config.isFlat
+        ? $config.rowDimensionNames.indexOf(columnId)
+        : -1;
+    const upToDimensionIndex = flatDimIdx >= 0 ? flatDimIdx : undefined;
+
     const cellFilters = isRowHeader
       ? getFiltersForRowHeader($config, rowId, $data.data)
       : getFiltersForCell(
@@ -309,6 +332,7 @@ export function createPivotClickToFilter(
           columnId,
           $data.columnDimensionAxes ?? {},
           $data.data,
+          upToDimensionIndex,
         );
 
     if (!cellFilters.filters) return;
@@ -322,8 +346,18 @@ export function createPivotClickToFilter(
           else nextRowHeaders.add(rowId);
         } else {
           const key = cellKey(rowId, columnId);
-          if (nextCells.has(key)) nextCells.delete(key);
-          else nextCells.add(key);
+          if (nextCells.has(key)) {
+            nextCells.delete(key);
+            rowDimClickIndex.delete(rowId);
+          } else {
+            nextCells.add(key);
+            // Track which dimension index was clicked for visual classification
+            if (upToDimensionIndex !== undefined) {
+              rowDimClickIndex.set(rowId, upToDimensionIndex);
+            } else {
+              rowDimClickIndex.delete(rowId);
+            }
+          }
         }
       },
     );
diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index 18595b7e611..d09cfb1daf2 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -18,7 +18,7 @@
   import { flexRender } from "@tanstack/svelte-table";
   import type { PivotClickSelectionState } from "./pivot-click-selection";
   import type { PivotRowSelectionState } from "./pivot-row-selection";
-  import type { PivotDataRow } from "./types";
+  import type { PivotDataRow, PivotDataStoreConfig } from "./types";
 
   // State props
   export let assembled: boolean;
@@ -30,6 +30,7 @@
   export let rowSelectionState: PivotRowSelectionState | undefined = undefined;
   export let clickSelection: PivotClickSelectionState | undefined = undefined;
   export let activeCell: { rowId: string; columnId: string } | null | undefined;
+  export let config: PivotDataStoreConfig | undefined = undefined;
 
   // Table props
   export let headerGroups: HeaderGroup<PivotDataRow>[];
@@ -196,12 +197,12 @@
       {@const rowId = rows[row.index].id}
       {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
-      {@const isRowHeaderSelected =
-        clickSelection?.isRowHeaderSelected(rowId) ?? false}
       {@const hasClickedCell =
         clickSelection?.hasSelectedCellInRow(rowId) ?? false}
+      {@const clickedDimIdx =
+        clickSelection?.getClickedDimensionIndex(rowId) ?? -1}
       <tr
-        class:selected-row={isSelected && isRowHeaderSelected}
+        class:selected-row={isSelected && !hasClickedCell}
         class:dimmed-row={hasSelection && !isSelected && !hasClickedCell}
       >
         {#each cells as cell (cell.id)}
@@ -211,10 +212,17 @@
               : cell.column.columnDef.cell}
           {@const isActive = isCellActive(cell)}
           {@const isClicked = isCellClicked(cell)}
+          {@const colDimIdx =
+            config?.rowDimensionNames.indexOf(cell.column.id) ?? -1}
+          {@const isLeftOfClick =
+            clickedDimIdx >= 0 && colDimIdx >= 0 && colDimIdx < clickedDimIdx}
+          {@const isMutedCell = clickedDimIdx >= 0 && colDimIdx > clickedDimIdx}
           <td
             class="ui-copy-number cell truncate"
             class:active-cell={isActive}
             class:selected-cell={isClicked}
+            class:selected-context-cell={isLeftOfClick}
+            class:muted-cell={isMutedCell}
             class:interactive-cell={(canShowDataViewer ||
               enableClickToFilter) &&
               cell.getValue() !== undefined}
@@ -354,4 +362,20 @@
   .dimmed-row .cell {
     @apply opacity-50;
   }
+
+  /* Dimension cells to the left of the clicked cell: same primary background, no ring */
+  .selected-context-cell.cell {
+    @apply bg-primary-50;
+  }
+  .selected-context-cell.cell:hover {
+    @apply bg-primary-100;
+  }
+
+  /* Dimension cells to the right of the clicked cell: muted background */
+  .muted-cell.cell {
+    @apply bg-gray-50;
+  }
+  .muted-cell.cell:hover {
+    @apply bg-gray-100;
+  }
 </style>
diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte
index ba9f2f46214..9fe4a8b8a2f 100644
--- a/web-common/src/features/dashboards/pivot/PivotTable.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotTable.svelte
@@ -353,6 +353,7 @@
       {hasMeasureContextColumns}
       {rowSelectionState}
       {clickSelection}
+      config={$config}
       activeCell={$pivotState.activeCell}
       {assembled}
       {onMouseMove}
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 7d9596a5ccf..6b042cc3733 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -21,6 +21,12 @@ export interface PivotClickSelectionState {
   hasSelectedCellInRow: (rowId: string) => boolean;
   /** Check if a column header was selected via click */
   isColumnHeaderSelected: (dimensionPath: Record<string, string>) => boolean;
+  /**
+   * Returns the dimension column index that was clicked in this row
+   * (i.e. the index into rowDimensionNames), or -1 if no dimension cell
+   * was clicked (measure click, row-header click, or no selection).
+   */
+  getClickedDimensionIndex: (rowId: string) => number;
 }
 
 export function createEmptyClickSelectionState(): PivotClickSelectionState {
@@ -33,6 +39,7 @@ export function createEmptyClickSelectionState(): PivotClickSelectionState {
     isCellSelected: () => false,
     hasSelectedCellInRow: () => false,
     isColumnHeaderSelected: () => false,
+    getClickedDimensionIndex: () => -1,
   };
 }
 
@@ -50,6 +57,8 @@ export function buildClickSelection(
   rowHeaders: Set<string>,
   cells: Set<string>,
   colHeaders: Set<string>,
+  /** Maps rowId → dimension column index for dimension-cell clicks in flat tables */
+  rowDimClickIndex: Map<string, number> = new Map(),
 ): PivotClickSelectionState {
   const hasAny = rowHeaders.size > 0 || cells.size > 0 || colHeaders.size > 0;
 
@@ -69,5 +78,6 @@ export function buildClickSelection(
     isCellSelected: (rid, cid) => cells.has(cellKey(rid, cid)),
     hasSelectedCellInRow: (rid) => rowsWithSelectedCells.has(rid),
     isColumnHeaderSelected: (path) => colHeaders.has(columnHeaderKey(path)),
+    getClickedDimensionIndex: (rid) => rowDimClickIndex.get(rid) ?? -1,
   };
 }
diff --git a/web-common/src/features/dashboards/pivot/pivot-utils.ts b/web-common/src/features/dashboards/pivot/pivot-utils.ts
index 1bed466bcea..75589afd9a8 100644
--- a/web-common/src/features/dashboards/pivot/pivot-utils.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-utils.ts
@@ -561,6 +561,7 @@ export function getFiltersForCell(
   colId: string,
   colDimensionAxes: Record<string, string[]> = {},
   tableData: PivotDataRow[],
+  upToDimensionIndex?: number,
 ): PivotFilter {
   const { rowDimensionNames, measureNames, isFlat } = config;
   const defaultTimeRange = {
@@ -578,6 +579,11 @@ export function getFiltersForCell(
       rowId,
       measureNames.length > 0,
     );
+    // When clicking a dimension cell, only include dimensions up to (and including)
+    // the clicked column's index.
+    if (upToDimensionIndex !== undefined && upToDimensionIndex >= 0) {
+      values = values.slice(0, upToDimensionIndex + 1);
+    }
   } else {
     values = getValuesForExpandedKey(
       tableData,

From 152ae9480137810c7a161975335c5888650f76a5 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Fri, 13 Mar 2026 21:10:31 +0530
Subject: [PATCH 07/53] remove gray bg from totals row in nested

---
 web-common/src/features/dashboards/pivot/NestedTable.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 9a7d26f1708..748730af079 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -600,7 +600,7 @@
 
   /* The totals row */
   .with-totals-row tbody > tr:nth-of-type(2) {
-    @apply bg-surface-muted sticky z-20;
+    @apply bg-surface-background sticky z-20;
     top: var(--total-header-height);
     height: calc(var(--row-height) + 2px);
   }
@@ -610,7 +610,7 @@
     tbody
     > tr:nth-of-type(2)
     > td:first-of-type {
-    @apply font-semibold bg-surface-muted;
+    @apply font-semibold bg-surface-background;
   }
 
   .with-expandable-rows.with-totals-row

From 3c4190a0a27a1663850be7e5136ec8c77e0c59d5 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Sun, 15 Mar 2026 02:31:11 +0530
Subject: [PATCH 08/53] init active component state

---
 .../features/canvas/CanvasComponent.svelte    |  8 ++++
 .../canvas/CanvasDashboardEmbed.svelte        |  3 ++
 .../features/canvas/StaticCanvasRow.svelte    |  7 +++-
 .../pivot/CanvasPivotRenderer.svelte          | 14 ++++++-
 .../components/pivot/pivot-click-to-filter.ts | 41 ++++++++++++++++++-
 .../canvas/filters/CanvasFilters.svelte       |  8 +++-
 .../features/canvas/stores/canvas-entity.ts   |  9 ++++
 7 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/web-common/src/features/canvas/CanvasComponent.svelte b/web-common/src/features/canvas/CanvasComponent.svelte
index ae9624649b6..6c218ddcd1f 100644
--- a/web-common/src/features/canvas/CanvasComponent.svelte
+++ b/web-common/src/features/canvas/CanvasComponent.svelte
@@ -44,6 +44,7 @@
     }
   }
   export let selected = false;
+  export let active = false;
   export let ghost = false;
   export let allowPointerEvents = true;
   export let editable = false;
@@ -65,6 +66,7 @@
   role="presentation"
   id={componentName}
   class:selected
+  class:active
   class:editable
   class:opacity-20={ghost}
   style:pointer-events={!allowPointerEvents ? "none" : "auto"}
@@ -110,4 +112,10 @@
 
     outline-style: solid !important;
   }
+
+  .active {
+    @apply shadow-md outline-primary-400 outline-[1.5px];
+
+    outline-style: solid !important;
+  }
 </style>
diff --git a/web-common/src/features/canvas/CanvasDashboardEmbed.svelte b/web-common/src/features/canvas/CanvasDashboardEmbed.svelte
index 386e63c04a2..9a72c112d7c 100644
--- a/web-common/src/features/canvas/CanvasDashboardEmbed.svelte
+++ b/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">
diff --git a/web-common/src/features/canvas/StaticCanvasRow.svelte b/web-common/src/features/canvas/StaticCanvasRow.svelte
index 705dee55dd0..be327a41161 100644
--- a/web-common/src/features/canvas/StaticCanvasRow.svelte
+++ b/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}
diff --git a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
index faccf43eb0b..6309972b619 100644
--- a/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
+++ b/web-common/src/features/canvas/components/pivot/CanvasPivotRenderer.svelte
@@ -16,7 +16,7 @@
   } from "./pivot-click-to-filter";
 
   import { onDestroy } from "svelte";
-  import { derived, type Readable, type Writable } from "svelte/store";
+  import { derived, get, type Readable, type Writable } from "svelte/store";
 
   export let schema: {
     isValid: boolean;
@@ -34,7 +34,8 @@
     pivotColumns.dimension.length > 0 && pivotColumns.measure.length === 0;
 
   // FilterManager and metrics view for filter application
-  $: filterManager = component.parent.filterManager;
+  $: canvasEntity = component.parent;
+  $: filterManager = canvasEntity.filterManager;
   $: spec = component.specStore;
   $: metricsViewName = $spec?.metrics_view;
   $: selfFilteredDimensions = component.selfFilteredDimensions;
@@ -51,13 +52,22 @@
     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();
+          }
+        },
       });
     }
   }
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 34b6f975fd3..f3e963fbfb5 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -42,8 +42,12 @@ interface PivotClickToFilterArgs {
   pivotDataStore: PivotDataStore;
   filterManager: FilterManager;
   metricsViewName: string;
+  componentId: string;
+  activeComponent: Readable<string | null>;
   selfFilteredDimensions: Writable<Set<string>>;
   whereFilterStore: Readable<V1Expression | undefined>;
+  onBecomeActive?: () => void;
+  onBecomeInactive?: () => void;
 }
 
 export interface PivotClickToFilterResult {
@@ -66,8 +70,12 @@ export function createPivotClickToFilter(
     pivotDataStore,
     filterManager,
     metricsViewName,
+    componentId,
+    activeComponent,
     selfFilteredDimensions,
     whereFilterStore,
+    onBecomeActive,
+    onBecomeInactive,
   } = args;
 
   // --- Internal click selection state ---
@@ -103,6 +111,14 @@ export function createPivotClickToFilter(
     if ($selfFiltered.size === 0) {
       rowDimClickIndex.clear();
       clickSelectionStore.set(createEmptyClickSelectionState());
+      onBecomeInactive?.();
+    }
+  });
+
+  // --- Yield active state when another component becomes active ---
+  const activeUnsub = activeComponent.subscribe(($activeId) => {
+    if ($activeId !== null && $activeId !== componentId) {
+      selfFilteredDimensions.set(new Set());
     }
   });
 
@@ -215,6 +231,16 @@ export function createPivotClickToFilter(
     const dimensionFilters = extractDimensionFiltersFromExpression(filters);
     if (dimensionFilters.length === 0) return;
 
+    // Capture which dimensions were already in the global filter before this click.
+    // Dimensions present here were not added by this component and should not be
+    // excluded from its own query (they are not "self-filtered").
+    const preClickWhere = get(whereFilterStore);
+    const preExistingDims = new Set(
+      preClickWhere?.cond?.exprs
+        ?.map((e) => e.cond?.exprs?.[0]?.ident)
+        .filter(Boolean) ?? [],
+    );
+
     const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
     if (!filterClass) return;
 
@@ -283,12 +309,22 @@ export function createPivotClickToFilter(
       ),
     );
 
-    // Mark these dimensions as self-filtered by the pivot
+    // Mark only newly-added dimensions as self-filtered. Dimensions that were
+    // already in the global filter before this click are not owned by this
+    // component and must not be stripped from its own query.
+    const wasInactive = get(selfFilteredDimensions).size === 0;
     selfFilteredDimensions.update((dims) => {
       const next = new Set(dims);
-      dimensionFilters.forEach(({ dimensionName }) => next.add(dimensionName));
+      dimensionFilters.forEach(({ dimensionName }) => {
+        if (!preExistingDims.has(dimensionName)) {
+          next.add(dimensionName);
+        }
+      });
       return next;
     });
+    if (wasInactive && get(selfFilteredDimensions).size > 0) {
+      onBecomeActive?.();
+    }
 
     // Single batch URL update with the final filter string
     if (filterString !== null) {
@@ -389,6 +425,7 @@ export function createPivotClickToFilter(
   function destroy() {
     pruneUnsub();
     clearUnsub();
+    activeUnsub();
   }
 
   return {
diff --git a/web-common/src/features/canvas/filters/CanvasFilters.svelte b/web-common/src/features/canvas/filters/CanvasFilters.svelte
index 1145513b714..d7a928e8760 100644
--- a/web-common/src/features/canvas/filters/CanvasFilters.svelte
+++ b/web-common/src/features/canvas/filters/CanvasFilters.svelte
@@ -9,10 +9,10 @@
   import { getPanRangeForTimeRange } from "@rilldata/web-common/features/dashboards/state-managers/selectors/charts";
   import SuperPill from "@rilldata/web-common/features/dashboards/time-controls/super-pill/SuperPill.svelte";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
-  import CanvasComparisonPill from "./CanvasComparisonPill.svelte";
-  import CanvasFilterButton from "../../dashboards/filters/CanvasFilterButton.svelte";
   import { Tooltip } from "bits-ui";
+  import CanvasFilterButton from "../../dashboards/filters/CanvasFilterButton.svelte";
   import Metadata from "../../dashboards/time-controls/super-pill/components/Metadata.svelte";
+  import CanvasComparisonPill from "./CanvasComparisonPill.svelte";
 
   export let readOnly = false;
   export let maxWidth: number;
@@ -29,6 +29,7 @@
   $: ({ instanceId } = runtimeClient);
   $: ({
     canvasEntity: {
+      clearActiveComponent,
       filterManager: {
         allDimensionsStore,
         allMeasuresStore,
@@ -129,9 +130,12 @@
   }
 </script>
 
+<!-- FIX CLEAR ACTIVE COMPONENT  -->
 <div
+  role="presentation"
   class="flex flex-col gap-y-2 size-full pointer-events-none"
   style:max-width="{maxWidth}px"
+  on:click|capture={clearActiveComponent}
 >
   {#if hasTimeSeries}
     <div class="p-2 flex justify-between size-full py-0">
diff --git a/web-common/src/features/canvas/stores/canvas-entity.ts b/web-common/src/features/canvas/stores/canvas-entity.ts
index 022eee49cc7..24dc4223a1f 100644
--- a/web-common/src/features/canvas/stores/canvas-entity.ts
+++ b/web-common/src/features/canvas/stores/canvas-entity.ts
@@ -81,6 +81,7 @@ export class CanvasEntity {
   fileArtifact: FileArtifact | undefined;
 
   selectedComponent = writable<string | null>(null);
+  activeComponent = writable<string | null>(null);
   parsedContent: Readable<ReturnType<typeof parseDocument>>;
   public specStore: CanvasSpecResponseStore;
   // Tracks whether the canvas been loaded (and rows processed) for the first time
@@ -728,6 +729,14 @@ export class CanvasEntity {
     this.selectedComponent.set(id);
   };
 
+  setActiveComponent = (id: string) => {
+    this.activeComponent.set(id);
+  };
+
+  clearActiveComponent = () => {
+    this.activeComponent.set(null);
+  };
+
   removeComponent = (componentName: string) => {
     this.componentsStore.delete(componentName);
   };

From 2207f5e4f8c3b78defe7f23514571f9d455e3250 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Sun, 15 Mar 2026 02:44:28 +0530
Subject: [PATCH 09/53] upadate flat table styling

---
 .../dashboards/pivot/FlatTable.svelte         | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index d09cfb1daf2..6b69f52f1fb 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -13,9 +13,9 @@
   } from "@rilldata/web-common/features/dashboards/pivot/pivot-column-width-utils";
   import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import { modified } from "@rilldata/web-common/lib/actions/modified-click";
-  import { cellInspectorStore } from "../stores/cell-inspector-store";
   import type { Cell, Column, HeaderGroup, Row } from "@tanstack/svelte-table";
   import { flexRender } from "@tanstack/svelte-table";
+  import { cellInspectorStore } from "../stores/cell-inspector-store";
   import type { PivotClickSelectionState } from "./pivot-click-selection";
   import type { PivotRowSelectionState } from "./pivot-row-selection";
   import type { PivotDataRow, PivotDataStoreConfig } from "./types";
@@ -214,9 +214,17 @@
           {@const isClicked = isCellClicked(cell)}
           {@const colDimIdx =
             config?.rowDimensionNames.indexOf(cell.column.id) ?? -1}
+          {@const lastDimIdx = (config?.rowDimensionNames.length ?? 0) - 1}
           {@const isLeftOfClick =
-            clickedDimIdx >= 0 && colDimIdx >= 0 && colDimIdx < clickedDimIdx}
-          {@const isMutedCell = clickedDimIdx >= 0 && colDimIdx > clickedDimIdx}
+            clickedDimIdx >= 0 &&
+            (colDimIdx >= 0
+              ? colDimIdx < clickedDimIdx
+              : clickedDimIdx === lastDimIdx)}
+          {@const isMutedCell =
+            (clickedDimIdx >= 0 && colDimIdx > clickedDimIdx) ||
+            (colDimIdx === -1 &&
+              clickedDimIdx >= 0 &&
+              clickedDimIdx < lastDimIdx)}
           <td
             class="ui-copy-number cell truncate"
             class:active-cell={isActive}
@@ -373,9 +381,6 @@
 
   /* Dimension cells to the right of the clicked cell: muted background */
   .muted-cell.cell {
-    @apply bg-gray-50;
-  }
-  .muted-cell.cell:hover {
-    @apply bg-gray-100;
+    @apply bg-surface-muted;
   }
 </style>

From 80ab2c4e8c8b529c58f97e79e0da90a918892ef3 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 16 Mar 2026 19:11:03 +0530
Subject: [PATCH 10/53] fix clearing of active component from global filters
 interaction

---
 .../pivot/pivot-click-to-filter.spec.ts       | 136 ++++++++++++++++++
 .../components/pivot/pivot-click-to-filter.ts |   2 +-
 .../canvas/filters/CanvasFilters.svelte       |   1 -
 3 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
new file mode 100644
index 00000000000..ea492066473
--- /dev/null
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -0,0 +1,136 @@
+import { describe, expect, it, vi } from "vitest";
+import { get, writable, type Readable } from "svelte/store";
+import { createPivotClickToFilter } from "./pivot-click-to-filter";
+import type { PivotDataStoreConfig } from "@rilldata/web-common/features/dashboards/pivot/types";
+import type { V1Expression } from "@rilldata/web-common/runtime-client";
+import type { FilterManager } from "../../stores/filter-manager";
+
+/**
+ * Minimal stub for FilterManager; only the fields touched by the factory
+ * are provided. Everything else is left as `undefined` / `never`.
+ */
+function stubFilterManager(): FilterManager {
+  return {
+    metricsViewFilters: new Map(),
+    checkTemporaryFilter: vi.fn(),
+    applyFiltersToUrl: vi.fn(),
+  } as unknown as FilterManager;
+}
+
+function emptyConfig(): PivotDataStoreConfig {
+  return {
+    rowDimensionNames: ["country"],
+    colDimensionNames: [],
+    measureNames: ["total"],
+    isFlat: true,
+  } as unknown as PivotDataStoreConfig;
+}
+
+describe("pivot-click-to-filter: clearActiveComponent", () => {
+  it("should clear selfFilteredDimensions when activeComponent is set to null", () => {
+    const activeComponent = writable<string | null>(null);
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const whereFilter = writable<V1Expression | undefined>(undefined);
+    const pivotConfig = writable(emptyConfig());
+    const pivotDataStore = writable({ data: null }) as any;
+
+    const onBecomeActive = vi.fn();
+    const onBecomeInactive = vi.fn();
+
+    const result = createPivotClickToFilter({
+      pivotConfig: pivotConfig as Readable<PivotDataStoreConfig>,
+      pivotDataStore,
+      filterManager: stubFilterManager(),
+      metricsViewName: "mv1",
+      componentId: "pivot-1",
+      activeComponent,
+      selfFilteredDimensions,
+      whereFilterStore: whereFilter,
+      onBecomeActive,
+      onBecomeInactive,
+    });
+
+    // Simulate the pivot becoming active with some self-filtered dimensions
+    activeComponent.set("pivot-1");
+    selfFilteredDimensions.set(new Set(["country"]));
+    onBecomeInactive.mockClear();
+    onBecomeActive.mockClear();
+
+    // Now simulate clearActiveComponent: set activeComponent to null
+    activeComponent.set(null);
+
+    // The self-filtered dimensions should be cleared
+    expect(get(selfFilteredDimensions).size).toBe(0);
+
+    // onBecomeInactive should have been called
+    expect(onBecomeInactive).toHaveBeenCalled();
+
+    result.destroy();
+  });
+
+  it("should clear selfFilteredDimensions when another component becomes active", () => {
+    const activeComponent = writable<string | null>(null);
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const whereFilter = writable<V1Expression | undefined>(undefined);
+    const pivotConfig = writable(emptyConfig());
+    const pivotDataStore = writable({ data: null }) as any;
+
+    const onBecomeInactive = vi.fn();
+
+    const result = createPivotClickToFilter({
+      pivotConfig: pivotConfig as Readable<PivotDataStoreConfig>,
+      pivotDataStore,
+      filterManager: stubFilterManager(),
+      metricsViewName: "mv1",
+      componentId: "pivot-1",
+      activeComponent,
+      selfFilteredDimensions,
+      whereFilterStore: whereFilter,
+      onBecomeInactive,
+    });
+
+    // Simulate active pivot with self-filtered dimensions
+    activeComponent.set("pivot-1");
+    selfFilteredDimensions.set(new Set(["country"]));
+    onBecomeInactive.mockClear();
+
+    // Another component becomes active
+    activeComponent.set("pivot-2");
+
+    expect(get(selfFilteredDimensions).size).toBe(0);
+    expect(onBecomeInactive).toHaveBeenCalled();
+
+    result.destroy();
+  });
+
+  it("should NOT clear selfFilteredDimensions when this component is set as active", () => {
+    const activeComponent = writable<string | null>(null);
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const whereFilter = writable<V1Expression | undefined>(undefined);
+    const pivotConfig = writable(emptyConfig());
+    const pivotDataStore = writable({ data: null }) as any;
+
+    const result = createPivotClickToFilter({
+      pivotConfig: pivotConfig as Readable<PivotDataStoreConfig>,
+      pivotDataStore,
+      filterManager: stubFilterManager(),
+      metricsViewName: "mv1",
+      componentId: "pivot-1",
+      activeComponent,
+      selfFilteredDimensions,
+      whereFilterStore: whereFilter,
+    });
+
+    // Simulate active pivot with self-filtered dimensions
+    selfFilteredDimensions.set(new Set(["country"]));
+
+    // Set this component as active
+    activeComponent.set("pivot-1");
+
+    // selfFilteredDimensions should remain unchanged
+    expect(get(selfFilteredDimensions).size).toBe(1);
+    expect(get(selfFilteredDimensions).has("country")).toBe(true);
+
+    result.destroy();
+  });
+});
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index f3e963fbfb5..94ce888f424 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -117,7 +117,7 @@ export function createPivotClickToFilter(
 
   // --- Yield active state when another component becomes active ---
   const activeUnsub = activeComponent.subscribe(($activeId) => {
-    if ($activeId !== null && $activeId !== componentId) {
+    if ($activeId !== componentId) {
       selfFilteredDimensions.set(new Set());
     }
   });
diff --git a/web-common/src/features/canvas/filters/CanvasFilters.svelte b/web-common/src/features/canvas/filters/CanvasFilters.svelte
index d7a928e8760..21ab309e8cb 100644
--- a/web-common/src/features/canvas/filters/CanvasFilters.svelte
+++ b/web-common/src/features/canvas/filters/CanvasFilters.svelte
@@ -130,7 +130,6 @@
   }
 </script>
 
-<!-- FIX CLEAR ACTIVE COMPONENT  -->
 <div
   role="presentation"
   class="flex flex-col gap-y-2 size-full pointer-events-none"

From 598a7d952386aa64ee14d0fabe3efa6889ae6943 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 23 Mar 2026 17:43:21 +0530
Subject: [PATCH 11/53] add row header and column header highlighting on cell
 click

---
 .gitignore                                    |  1 +
 .../dashboards/pivot/NestedTable.svelte       | 50 +++++++++++++++++++
 .../dashboards/pivot/pivot-click-selection.ts | 12 ++++-
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index dca5a1cc6b8..6ca11757edb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -97,6 +97,7 @@ latest.txt
 .claude/notes/
 .claude/plans/
 .claude/worktrees/
+.claude/projects/
 
 # Vite temp files
 vite.config.ts.timestamp-*
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 748730af079..f5f7eafaf8f 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -84,6 +84,35 @@
     return indices;
   })();
 
+  // Compute which leaf column indices have a cell selected via click-to-filter.
+  // Uses the last header group (leaf columns) to map column IDs to indices.
+  $: cellSelectedColIndices = (() => {
+    if (!clickSelection?.selectedCellColumnIds?.size) return new Set<number>();
+    const leafGroup = headerGroups[headerGroups.length - 1];
+    if (!leafGroup) return new Set<number>();
+    const indices = new Set<number>();
+    let colIdx = 0;
+    for (const header of leafGroup.headers) {
+      if (clickSelection.selectedCellColumnIds.has(header.column.id)) {
+        indices.add(colIdx);
+      }
+      colIdx += header.colSpan;
+    }
+    return indices;
+  })();
+
+  // Check if a header (by its leaf column range) contains any cell-selected columns
+  function isInCellSelectedColRange(
+    colStart: number,
+    colSpan: number,
+  ): boolean {
+    if (cellSelectedColIndices.size === 0) return false;
+    for (let i = colStart; i < colStart + colSpan; i++) {
+      if (cellSelectedColIndices.has(i)) return true;
+    }
+    return false;
+  }
+
   let resizingMeasure = false;
   let initialMeasureIndexOnResize = 0;
   let initLengthOnResize = 0;
@@ -387,6 +416,10 @@
             header.colSpan,
             isSelfSelected,
           )}
+          {@const inCellSelectedCol = isInCellSelectedColRange(
+            colStart,
+            header.colSpan,
+          )}
 
           <th
             colSpan={header.colSpan}
@@ -394,6 +427,7 @@
             class:col-dim-hover-child={inHoverRange && !isTheHoveredHeader}
             class:selected-col-header={isSelfSelected}
             class:in-selected-col-range={inSelectedRange}
+            class:cell-selected-col-header={inCellSelectedCol}
             on:mouseenter={() => {
               if (isColDimHeader) {
                 hoveredColRange = {
@@ -476,6 +510,7 @@
             class:selected-cell={isClicked}
             class:col-dim-hover-body={inHoveredCol}
             class:selected-col-body={inSelectedCol}
+            class:cell-selected-row-header={i === 0 && hasClickedCell}
             class:interactive-cell={canShowDataViewer || enableClickToFilter}
             class:border-r={shouldShowRightBorder(i)}
             data-value={cell.getValue()}
@@ -693,4 +728,19 @@
   .selected-col-body.cell {
     @apply bg-primary-50;
   }
+
+  /* Cross-highlights for cell click-to-filter selections */
+  .cell-selected-col-header .header-cell {
+    @apply bg-primary-50;
+  }
+
+  .cell-selected-row-header.cell {
+    @apply bg-primary-50;
+  }
+  .with-row-dimension tr > td.cell-selected-row-header:first-of-type {
+    @apply bg-primary-50;
+  }
+  .with-row-dimension tr:hover > td.cell-selected-row-header:first-of-type {
+    @apply bg-primary-100;
+  }
 </style>
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 6b042cc3733..3b8fd4e8422 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -21,6 +21,8 @@ export interface PivotClickSelectionState {
   hasSelectedCellInRow: (rowId: string) => boolean;
   /** Check if a column header was selected via click */
   isColumnHeaderSelected: (dimensionPath: Record<string, string>) => boolean;
+  /** Column IDs that have at least one selected cell (for highlighting column headers) */
+  selectedCellColumnIds: Set<string>;
   /**
    * Returns the dimension column index that was clicked in this row
    * (i.e. the index into rowDimensionNames), or -1 if no dimension cell
@@ -39,6 +41,7 @@ export function createEmptyClickSelectionState(): PivotClickSelectionState {
     isCellSelected: () => false,
     hasSelectedCellInRow: () => false,
     isColumnHeaderSelected: () => false,
+    selectedCellColumnIds: new Set(),
     getClickedDimensionIndex: () => -1,
   };
 }
@@ -62,11 +65,15 @@ export function buildClickSelection(
 ): PivotClickSelectionState {
   const hasAny = rowHeaders.size > 0 || cells.size > 0 || colHeaders.size > 0;
 
-  // Build a set of rowIds that have at least one selected cell
+  // Build sets of rowIds and columnIds that have at least one selected cell
   const rowsWithSelectedCells = new Set<string>();
+  const columnsWithSelectedCells = new Set<string>();
   for (const key of cells) {
     const sep = key.indexOf(":");
-    if (sep !== -1) rowsWithSelectedCells.add(key.slice(0, sep));
+    if (sep !== -1) {
+      rowsWithSelectedCells.add(key.slice(0, sep));
+      columnsWithSelectedCells.add(key.slice(sep + 1));
+    }
   }
 
   return {
@@ -78,6 +85,7 @@ export function buildClickSelection(
     isCellSelected: (rid, cid) => cells.has(cellKey(rid, cid)),
     hasSelectedCellInRow: (rid) => rowsWithSelectedCells.has(rid),
     isColumnHeaderSelected: (path) => colHeaders.has(columnHeaderKey(path)),
+    selectedCellColumnIds: columnsWithSelectedCells,
     getClickedDimensionIndex: (rid) => rowDimClickIndex.get(rid) ?? -1,
   };
 }

From 341d193427689b94eb8ec674cb40dbfe0159df74 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 23 Mar 2026 17:48:18 +0530
Subject: [PATCH 12/53] preserve hover when col header already has bg primary
 from cell

---
 web-common/src/features/dashboards/pivot/NestedTable.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index f5f7eafaf8f..88d5eaabb0e 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -733,6 +733,9 @@
   .cell-selected-col-header .header-cell {
     @apply bg-primary-50;
   }
+  .cell-selected-col-header.col-dim-hover-self .header-cell {
+    @apply bg-primary-100;
+  }
 
   .cell-selected-row-header.cell {
     @apply bg-primary-50;

From 4473fb091622824d1c0d8d1331f0dd5f2bbc7f75 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 23 Mar 2026 19:56:41 +0530
Subject: [PATCH 13/53] clear active component properly on global filter change

---
 .../canvas/filters/CanvasFilters.svelte       |  2 --
 .../features/canvas/stores/canvas-entity.ts   |  2 ++
 .../features/canvas/stores/filter-manager.ts  | 21 ++++++++++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/web-common/src/features/canvas/filters/CanvasFilters.svelte b/web-common/src/features/canvas/filters/CanvasFilters.svelte
index 21ab309e8cb..e98efb3971f 100644
--- a/web-common/src/features/canvas/filters/CanvasFilters.svelte
+++ b/web-common/src/features/canvas/filters/CanvasFilters.svelte
@@ -29,7 +29,6 @@
   $: ({ instanceId } = runtimeClient);
   $: ({
     canvasEntity: {
-      clearActiveComponent,
       filterManager: {
         allDimensionsStore,
         allMeasuresStore,
@@ -134,7 +133,6 @@
   role="presentation"
   class="flex flex-col gap-y-2 size-full pointer-events-none"
   style:max-width="{maxWidth}px"
-  on:click|capture={clearActiveComponent}
 >
   {#if hasTimeSeries}
     <div class="p-2 flex justify-between size-full py-0">
diff --git a/web-common/src/features/canvas/stores/canvas-entity.ts b/web-common/src/features/canvas/stores/canvas-entity.ts
index 24dc4223a1f..272060041a8 100644
--- a/web-common/src/features/canvas/stores/canvas-entity.ts
+++ b/web-common/src/features/canvas/stores/canvas-entity.ts
@@ -325,10 +325,12 @@ export class CanvasEntity {
           pinnedFilters,
           filterExpressions,
         );
+        this.filterManager.onFilterChange = () => this.clearActiveComponent();
       }
     } else {
       // need to find a better way to initialize this in certain contextx - bgh
       this.filterManager = new FilterManager({}, "", [], {});
+      this.filterManager.onFilterChange = () => this.clearActiveComponent();
     }
 
     this.processRows({ canvas, components, metricsViews, filePath });
diff --git a/web-common/src/features/canvas/stores/filter-manager.ts b/web-common/src/features/canvas/stores/filter-manager.ts
index 94351e2c04c..63d44e8464a 100644
--- a/web-common/src/features/canvas/stores/filter-manager.ts
+++ b/web-common/src/features/canvas/stores/filter-manager.ts
@@ -1,3 +1,4 @@
+import { goto } from "$app/navigation";
 import { DimensionFilterMode } from "@rilldata/web-common/features/dashboards/filters/dimension-filters/constants";
 import type { MeasureFilterEntry } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
 import { type DimensionFilterItem } from "@rilldata/web-common/features/dashboards/state-managers/selectors/dimension-filters";
@@ -15,19 +16,18 @@ import {
 import {
   derived,
   get,
+  writable,
   type Readable,
   type Writable,
-  writable,
 } from "svelte/store";
-import { ExploreStateURLParams } from "../../dashboards/url-state/url-params";
-import { goto } from "$app/navigation";
-import { FilterState } from "./filter-state";
 import { getDimensionDisplayName } from "../../dashboards/filters/getDisplayName";
-import type { ParsedFilters } from "./filter-state";
 import {
   createAndExpression,
   flattenInExpressionValues,
 } from "../../dashboards/stores/filter-utils";
+import { ExploreStateURLParams } from "../../dashboards/url-state/url-params";
+import type { ParsedFilters } from "./filter-state";
+import { FilterState } from "./filter-state";
 
 export type UIFilters = {
   dimensionFilters: Map<string, DimensionFilterItem>;
@@ -63,6 +63,9 @@ export class FilterManager {
   defaultPinnedFilterKeysStore = writable<Set<string>>(new Set());
   temporaryFilterKeysStore = writable<Map<string, boolean>>(new Map());
 
+  // Fires when a global filter mutation is committed (via actions or clearAllFilters).
+  onFilterChange?: () => void;
+
   allDimensionsStore = writable<DimensionLookup>(new Map());
   allMeasuresStore = writable<MeasureLookup>(new Map());
 
@@ -521,6 +524,7 @@ export class FilterManager {
       searchText: string,
       metricsViewNames: string[],
     ) => {
+      this.onFilterChange?.();
       this.checkTemporaryFilter(dimensionName, metricsViewNames);
       const map = new Map<string, string | null>();
 
@@ -540,6 +544,7 @@ export class FilterManager {
       dimensionName: string,
       metricsViewNames: string[],
     ) => {
+      this.onFilterChange?.();
       this.checkTemporaryFilter(dimensionName, metricsViewNames);
       this.checkPinnedFilter(dimensionName, metricsViewNames);
 
@@ -573,6 +578,7 @@ export class FilterManager {
       dimensionName: string,
       metricsViewNames: string[],
     ) => {
+      this.onFilterChange?.();
       this.checkTemporaryFilter(dimensionName, metricsViewNames);
 
       const map = new Map<string, string | null>();
@@ -595,6 +601,7 @@ export class FilterManager {
       values: string[],
       metricsViewNames: string[],
     ) => {
+      this.onFilterChange?.();
       this.checkTemporaryFilter(dimensionName, metricsViewNames);
       const map = new Map<string, string | null>();
 
@@ -619,6 +626,7 @@ export class FilterManager {
       keepPillVisible?: boolean,
       isExclusiveFilter?: boolean,
     ) => {
+      this.onFilterChange?.();
       this.checkTemporaryFilter(dimensionName, metricsViewNames);
 
       const newFilters = new Map<string, string | null>();
@@ -646,6 +654,7 @@ export class FilterManager {
       oldDimension: string,
       metricsViewNames: string[],
     ) => {
+      this.onFilterChange?.();
       this.checkTemporaryFilter(filter.measure, metricsViewNames);
 
       const newFilters = new Map<string, string | null>();
@@ -671,6 +680,7 @@ export class FilterManager {
       measureName: string,
       metricsViewNames: string[],
     ) => {
+      this.onFilterChange?.();
       this.checkTemporaryFilter(measureName, metricsViewNames);
       this.checkPinnedFilter(measureName, metricsViewNames);
 
@@ -743,6 +753,7 @@ export class FilterManager {
   // Unclear on what this actually should do - bgh
   // Go to defaults or truly clear all filters?
   clearAllFilters = async () => {
+    this.onFilterChange?.();
     this.temporaryFilterKeysStore.set(new Map());
     const existingParams = new URLSearchParams(window.location.search);
     const filterParamsToDelete = Array.from(existingParams.keys()).filter(

From b6d883b7418ae72bd589cdb10f92c0bf40723bce Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 23 Mar 2026 23:34:14 +0530
Subject: [PATCH 14/53] fix hilighting on flat table selection

---
 .../dashboards/pivot/FlatTable.svelte         | 26 +++++++++++++------
 .../dashboards/pivot/pivot-row-selection.ts   | 11 ++++++++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index 6b69f52f1fb..de6a632efb6 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -98,6 +98,8 @@
     return clickSelection?.isCellSelected(cell.row.id, cell.column.id) ?? false;
   }
 
+  $: lastDimIdx = (config?.rowDimensionNames.length ?? 0) - 1;
+
   function hasBorderRight(columnId: string): boolean {
     if (!hasMeasureContextColumns) return true;
     const measureIndex = measures.findIndex((m) => m.name === columnId);
@@ -201,8 +203,17 @@
         clickSelection?.hasSelectedCellInRow(rowId) ?? false}
       {@const clickedDimIdx =
         clickSelection?.getClickedDimensionIndex(rowId) ?? -1}
+      {@const effectiveDimIdx = hasClickedCell
+        ? clickedDimIdx >= 0
+          ? clickedDimIdx
+          : lastDimIdx
+        : isSelected
+          ? (rowSelectionState?.maxFilteredDimensionIndex ?? -1)
+          : -1}
       <tr
-        class:selected-row={isSelected && !hasClickedCell}
+        class:selected-row={isSelected &&
+          !hasClickedCell &&
+          effectiveDimIdx < 0}
         class:dimmed-row={hasSelection && !isSelected && !hasClickedCell}
       >
         {#each cells as cell (cell.id)}
@@ -214,17 +225,16 @@
           {@const isClicked = isCellClicked(cell)}
           {@const colDimIdx =
             config?.rowDimensionNames.indexOf(cell.column.id) ?? -1}
-          {@const lastDimIdx = (config?.rowDimensionNames.length ?? 0) - 1}
           {@const isLeftOfClick =
-            clickedDimIdx >= 0 &&
+            effectiveDimIdx >= 0 &&
             (colDimIdx >= 0
-              ? colDimIdx < clickedDimIdx
-              : clickedDimIdx === lastDimIdx)}
+              ? colDimIdx <= effectiveDimIdx
+              : effectiveDimIdx === lastDimIdx)}
           {@const isMutedCell =
-            (clickedDimIdx >= 0 && colDimIdx > clickedDimIdx) ||
+            (effectiveDimIdx >= 0 && colDimIdx > effectiveDimIdx) ||
             (colDimIdx === -1 &&
-              clickedDimIdx >= 0 &&
-              clickedDimIdx < lastDimIdx)}
+              effectiveDimIdx >= 0 &&
+              effectiveDimIdx < lastDimIdx)}
           <td
             class="ui-copy-number cell truncate"
             class:active-cell={isActive}
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 0ff74163b52..9e433e32c02 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -28,6 +28,8 @@ export interface PivotRowSelectionState {
   hasActiveSelection: boolean;
   /** Check if a specific row (by rowId) is selected based on current filters */
   isRowSelected: (rowId: string) => boolean;
+  /** Highest row dimension index with an active selection filter, or -1 */
+  maxFilteredDimensionIndex: number;
 }
 
 /**
@@ -124,15 +126,24 @@ export function computePivotRowSelection(
 ): PivotRowSelectionState {
   const hasActiveSelection = dimensionFilters.size > 0;
 
+  const maxFilteredDimensionIndex = hasActiveSelection
+    ? config.rowDimensionNames.reduce(
+        (max, name, idx) => (dimensionFilters.has(name) ? idx : max),
+        -1,
+      )
+    : -1;
+
   if (!hasActiveSelection) {
     return {
       hasActiveSelection: false,
       isRowSelected: () => false,
+      maxFilteredDimensionIndex: -1,
     };
   }
 
   return {
     hasActiveSelection: true,
+    maxFilteredDimensionIndex,
     isRowSelected: (rowId: string) => {
       const rowDimValues = getDimensionValuesForRow(config, rowId, tableData);
       if (rowDimValues.length === 0) return false;

From fd4e2090f320c74c1a35e82d1bb392f596d704a7 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 23 Mar 2026 23:55:40 +0530
Subject: [PATCH 15/53] click to filter state management recommended fixes

---
 .../components/pivot/pivot-click-to-filter.ts | 63 +++++++++++++------
 .../features/canvas/components/pivot/util.ts  | 19 +++---
 .../features/canvas/stores/canvas-entity.ts   |  4 ++
 .../dashboards/pivot/pivot-row-selection.ts   | 21 +++++++
 4 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 94ce888f424..1d5fa2e9469 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -18,6 +18,7 @@ import {
   computePivotRowSelection,
   extractDimensionFiltersFromExpression,
   extractSelectionDimensionFilters,
+  getActiveDimensionNames,
   getDimensionValuesForRow,
   getFiltersForColumnHeader,
   getFiltersForRowHeader,
@@ -86,23 +87,26 @@ export function createPivotClickToFilter(
   // Maps rowId → dimension column index for dimension-cell clicks (flat table only)
   const rowDimClickIndex = new Map<string, number>();
 
+  // Svelte store subscriptions fire synchronously on setup. This flag prevents
+  // onBecomeInactive from firing during the initial subscription cascade before
+  // the factory has been fully wired into the component tree.
+  let initialized = false;
+
   // --- Prune selfFilteredDimensions when filters are cleared externally ---
   const pruneUnsub = whereFilterStore.subscribe(($whereFilter) => {
-    const activeDims = new Set(
-      $whereFilter?.cond?.exprs
-        ?.map((e) => e.cond?.exprs?.[0]?.ident)
-        .filter(Boolean) ?? [],
-    );
+    const activeDims = getActiveDimensionNames($whereFilter);
     const dims = get(selfFilteredDimensions);
+    const pruned = new Set<string>();
     let changed = false;
     for (const dim of dims) {
-      if (!activeDims.has(dim)) {
-        dims.delete(dim);
+      if (activeDims.has(dim)) {
+        pruned.add(dim);
+      } else {
         changed = true;
       }
     }
     if (changed) {
-      selfFilteredDimensions.set(new Set(dims));
+      selfFilteredDimensions.set(pruned);
     }
   });
 
@@ -111,7 +115,9 @@ export function createPivotClickToFilter(
     if ($selfFiltered.size === 0) {
       rowDimClickIndex.clear();
       clickSelectionStore.set(createEmptyClickSelectionState());
-      onBecomeInactive?.();
+      if (initialized) {
+        onBecomeInactive?.();
+      }
     }
   });
 
@@ -122,6 +128,8 @@ export function createPivotClickToFilter(
     }
   });
 
+  initialized = true;
+
   // --- Derived row selection state ---
   const dimensionFilterMap = derived(
     [whereFilterStore, selfFilteredDimensions],
@@ -142,6 +150,23 @@ export function createPivotClickToFilter(
       },
     );
 
+  // --- Helpers ---
+
+  /** Check if any remaining cell selection for a row is a dimension column. */
+  function rowHasDimensionCell(
+    cells: Set<string>,
+    rowId: string,
+    config: PivotDataStoreConfig,
+  ): boolean {
+    const prefix = rowId + ":";
+    for (const key of cells) {
+      if (!key.startsWith(prefix)) continue;
+      const colId = key.slice(prefix.length);
+      if (config.rowDimensionNames.includes(colId)) return true;
+    }
+    return false;
+  }
+
   // --- Retained value computation for safe deselect ---
 
   function collectRetainedDimensionValues(
@@ -217,8 +242,6 @@ export function createPivotClickToFilter(
     return retainedValues;
   }
 
-  // --- Core filter application ---
-
   function applyDimensionFilters(
     filters: V1Expression,
     isDeselect: boolean,
@@ -234,12 +257,7 @@ export function createPivotClickToFilter(
     // Capture which dimensions were already in the global filter before this click.
     // Dimensions present here were not added by this component and should not be
     // excluded from its own query (they are not "self-filtered").
-    const preClickWhere = get(whereFilterStore);
-    const preExistingDims = new Set(
-      preClickWhere?.cond?.exprs
-        ?.map((e) => e.cond?.exprs?.[0]?.ident)
-        .filter(Boolean) ?? [],
-    );
+    const preExistingDims = getActiveDimensionNames(get(whereFilterStore));
 
     const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
     if (!filterClass) return;
@@ -384,13 +402,20 @@ export function createPivotClickToFilter(
           const key = cellKey(rowId, columnId);
           if (nextCells.has(key)) {
             nextCells.delete(key);
-            rowDimClickIndex.delete(rowId);
+            // Only remove the dimension click index if no remaining cell
+            // selection for this row is a dimension cell. Otherwise a
+            // measure-cell deselect would corrupt the dimension highlight.
+            if (!rowHasDimensionCell(nextCells, rowId, $config)) {
+              rowDimClickIndex.delete(rowId);
+            }
           } else {
             nextCells.add(key);
             // Track which dimension index was clicked for visual classification
             if (upToDimensionIndex !== undefined) {
               rowDimClickIndex.set(rowId, upToDimensionIndex);
-            } else {
+            } else if (!rowDimClickIndex.has(rowId)) {
+              // Only clear if there is no existing dimension cell index for
+              // this row; a prior dimension click should be preserved.
               rowDimClickIndex.delete(rowId);
             }
           }
diff --git a/web-common/src/features/canvas/components/pivot/util.ts b/web-common/src/features/canvas/components/pivot/util.ts
index ade3182860d..2e2226896d7 100644
--- a/web-common/src/features/canvas/components/pivot/util.ts
+++ b/web-common/src/features/canvas/components/pivot/util.ts
@@ -18,10 +18,11 @@ import {
 import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
-import type {
-  V1Expression,
-  V1MetricsViewSpec,
-  V1TimeRange,
+import {
+  V1Operation,
+  type V1Expression,
+  type V1MetricsViewSpec,
+  type V1TimeRange,
 } from "@rilldata/web-common/runtime-client";
 import {
   type Readable,
@@ -46,9 +47,13 @@ function excludeOwnDimensionFilters(
 ): V1Expression | undefined {
   if (!where?.cond?.exprs || dimensionNames.length === 0) return where;
   const dimSet = new Set(dimensionNames);
-  const filtered = where.cond.exprs.filter(
-    (e) => !dimSet.has(e.cond?.exprs?.[0]?.ident ?? ""),
-  );
+  // Only exclude IN expressions whose ident matches a self-filtered dimension.
+  // Other filter types (LIKE, NIN) are never produced by click-to-filter and
+  // must be preserved even if they share a dimension name.
+  const filtered = where.cond.exprs.filter((e) => {
+    if (e.cond?.op !== V1Operation.OPERATION_IN) return true;
+    return !dimSet.has(e.cond?.exprs?.[0]?.ident ?? "");
+  });
   return createAndExpression(filtered);
 }
 
diff --git a/web-common/src/features/canvas/stores/canvas-entity.ts b/web-common/src/features/canvas/stores/canvas-entity.ts
index 272060041a8..4d8cbb5c67e 100644
--- a/web-common/src/features/canvas/stores/canvas-entity.ts
+++ b/web-common/src/features/canvas/stores/canvas-entity.ts
@@ -325,6 +325,10 @@ export class CanvasEntity {
           pinnedFilters,
           filterExpressions,
         );
+        // Clears the active component when a global filter changes through
+        // FilterManager.actions.* (user-driven filter UI). Pivot click-to-filter
+        // bypasses actions and mutates FilterState directly, so it does NOT
+        // trigger this callback; see pivot-click-to-filter.ts for details.
         this.filterManager.onFilterChange = () => this.clearActiveComponent();
       }
     } else {
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 9e433e32c02..8fdc9a4d494 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -281,3 +281,24 @@ export function extractDimensionFiltersFromExpression(
 
   return result;
 }
+
+/**
+ * Returns the set of dimension names present in a top-level AND expression.
+ * Checks that each sub-expression is an IN operation before extracting the
+ * ident, so LIKE/NIN/other filter types are not incorrectly included.
+ *
+ * Shared by pruneUnsub, excludeOwnDimensionFilters, and preExistingDims
+ * to ensure consistent dimension detection across the codebase.
+ */
+export function getActiveDimensionNames(
+  expr: V1Expression | undefined,
+): Set<string> {
+  if (!expr?.cond?.exprs) return new Set();
+  const names = new Set<string>();
+  for (const sub of expr.cond.exprs) {
+    if (sub.cond?.op !== V1Operation.OPERATION_IN) continue;
+    const ident = sub.cond.exprs?.[0]?.ident;
+    if (ident) names.add(ident);
+  }
+  return names;
+}

From ad368ec44ce2c0e26650eb52bed9083ba4882f68 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 24 Mar 2026 00:48:53 +0530
Subject: [PATCH 16/53] fix flat table bug when clicked and scrolled

---
 .../features/canvas/components/pivot/util.ts  |  2 +
 .../dashboards/pivot/pivot-data-store.ts      | 51 +++++++++++--------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/util.ts b/web-common/src/features/canvas/components/pivot/util.ts
index 2e2226896d7..82d29a32593 100644
--- a/web-common/src/features/canvas/components/pivot/util.ts
+++ b/web-common/src/features/canvas/components/pivot/util.ts
@@ -223,6 +223,7 @@ export function processPivot(
         ...state,
         rowPage: 1,
       }));
+      config.pivot.rowPage = 1;
     }
   }
 
@@ -309,6 +310,7 @@ export function processFlat(
         ...state,
         rowPage: 1,
       }));
+      config.pivot.rowPage = 1;
     }
   }
 
diff --git a/web-common/src/features/dashboards/pivot/pivot-data-store.ts b/web-common/src/features/dashboards/pivot/pivot-data-store.ts
index 3ac88574f5d..df516ebe0ed 100644
--- a/web-common/src/features/dashboards/pivot/pivot-data-store.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-data-store.ts
@@ -1,3 +1,4 @@
+import type { ConnectError } from "@connectrpc/connect";
 import { getDimensionFilterWithSearch } from "@rilldata/web-common/features/dashboards/dimension-table/dimension-table-utils";
 import {
   calculateEffectiveRowLimit,
@@ -14,7 +15,6 @@ import type {
   V1MetricsViewAggregationResponse,
   V1MetricsViewAggregationSort,
 } from "@rilldata/web-common/runtime-client";
-import type { ConnectError } from "@connectrpc/connect";
 import type { CreateQueryResult } from "@tanstack/svelte-query";
 import type { ColumnDef } from "@tanstack/svelte-table";
 import { type Readable, derived, readable } from "svelte/store";
@@ -170,23 +170,6 @@ export function createTableCellQuery(
   );
 }
 
-/**
- * Stores the last pivot data and column def to be used when there is no data
- * to be displayed. This is to avoid the table from flickering when there is no
- * data to be displayed.
- */
-let lastPivotData: PivotDataRow[] = [];
-let lastPivotColumnDef: ColumnDef<PivotDataRow>[] = [];
-let lastTotalColumns: number = 0;
-
-/**
- * The expanded table has to iterate over itself to find nested dimension values
- * which are being expanded. Since the expanded values are added in one go, the previously
- * expanded values are not available in the table data. This map stores the expanded table
- * data for each pivot config. This is cleared when the pivot config changes.
- */
-let expandedTableMap: Record<string, PivotDataRow[]> = {};
-
 /**
  * Main store for pivot table data
  *
@@ -219,6 +202,15 @@ export function createPivotDataStore(
   ctx: PivotDashboardContext,
   configStore: Readable<PivotDataStoreConfig>,
 ): PivotDataStore {
+  // Per-instance caching: avoids flicker when data is loading and prevents
+  // cross-contamination when multiple pivot stores exist simultaneously
+  let lastPivotData: PivotDataRow[] = [];
+  let lastPivotColumnDef: ColumnDef<PivotDataRow>[] = [];
+  let lastTotalColumns: number = 0;
+  let lastProcessedRowPage: number = 0;
+  let lastProcessedConfigKey: string = "";
+  let expandedTableMap: Record<string, PivotDataRow[]> = {};
+
   /**
    * Derive a store using pivot config
    */
@@ -561,16 +553,28 @@ export function createPivotDataStore(
                   rowMeasureTotalsAxesQuery?.totals?.[anchorDimension] || [],
                 );
 
+                // Track config key to detect context changes and prevent
+                // re-accumulating cached data on config re-derivations
+                const configKey = getPivotConfigKey(config);
+                if (configKey !== lastProcessedConfigKey) {
+                  lastProcessedRowPage = 0;
+                  lastProcessedConfigKey = configKey;
+                }
+
                 let pivotSkeleton = mergedRowTotals;
                 if (!isFlat && rowPage > 1) {
-                  pivotSkeleton = [...lastPivotData, ...mergedRowTotals];
+                  if (rowPage > lastProcessedRowPage) {
+                    pivotSkeleton = [...lastPivotData, ...mergedRowTotals];
+                  } else {
+                    pivotSkeleton = lastPivotData as PivotDataRow[];
+                  }
                 }
 
                 let pivotData: PivotDataRow[] = [];
                 let cellData: PivotDataRow[] = [];
                 let isCellDataEmpty = false;
-                if (getPivotConfigKey(config) in expandedTableMap) {
-                  pivotData = expandedTableMap[getPivotConfigKey(config)];
+                if (configKey in expandedTableMap) {
+                  pivotData = expandedTableMap[configKey];
                 } else {
                   if (tableCellData === null) {
                     cellData = pivotSkeleton as PivotDataRow[];
@@ -594,8 +598,10 @@ export function createPivotDataStore(
 
                   let tableDataWithCells: PivotDataRow[] = [];
                   if (isFlat) {
-                    if (rowPage > 1) {
+                    if (rowPage > 1 && rowPage > lastProcessedRowPage) {
                       tableDataWithCells = [...lastPivotData, ...cellData];
+                    } else if (rowPage > 1) {
+                      tableDataWithCells = lastPivotData;
                     } else {
                       tableDataWithCells = cellData;
                     }
@@ -676,6 +682,7 @@ export function createPivotDataStore(
                     }
 
                     lastPivotData = tableDataExpanded;
+                    lastProcessedRowPage = rowPage;
                     lastPivotColumnDef = columnDef;
                     lastTotalColumns = totalColumns;
 

From 939a0a6c6c6c96f6264e01d743fb75ff42113b0a Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 17:13:51 +0530
Subject: [PATCH 17/53] cursor-default for totals row

---
 web-common/src/features/dashboards/pivot/FlatTable.svelte | 8 +++++---
 .../src/features/dashboards/pivot/NestedTable.svelte      | 7 +++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index c8c8c41e179..5b3032ed314 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -204,6 +204,7 @@
       {@const rowId = rows[row.index].id}
       {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
+      {@const isTotalsRow = !!totalsRow && rowId === "0"}
       {@const hasClickedCell =
         clickSelection?.hasSelectedCellInRow(rowId) ?? false}
       {@const clickedDimIdx =
@@ -249,8 +250,9 @@
             class:selected-cell={isClicked}
             class:selected-context-cell={isLeftOfClick}
             class:muted-cell={isMutedCell}
-            class:interactive-cell={(canShowDataViewer ||
-              enableClickToFilter) &&
+            class:interactive-cell={(isTotalsRow
+              ? canShowDataViewer
+              : canShowDataViewer || enableClickToFilter) &&
               cell.getValue() !== undefined}
             class:text-right={getMeasureColumn(cell.column)}
             class:border-r={hasBorderRight(cell.column.id)}
@@ -295,7 +297,7 @@
 
   table {
     @apply p-0 m-0 border-spacing-0 border-separate w-fit;
-    @apply font-normal;
+    @apply font-normal cursor-default;
     @apply bg-surface-background table-fixed;
   }
 
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 5d3cd7032c2..0ae23e7c028 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -483,6 +483,7 @@
     {#each virtualRows as row (row.index)}
       {@const cells = rows[row.index].getVisibleCells()}
       {@const rowId = rows[row.index].id}
+      {@const isTotalsRow = !!totalsRow && rowId === "0"}
       {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isRowHeaderSelected =
@@ -514,7 +515,9 @@
             class:col-dim-hover-body={inHoveredCol}
             class:selected-col-body={inSelectedCol}
             class:cell-selected-row-header={i === 0 && hasClickedCell}
-            class:interactive-cell={canShowDataViewer || enableClickToFilter}
+            class:interactive-cell={isTotalsRow
+              ? canShowDataViewer
+              : canShowDataViewer || enableClickToFilter}
             class:border-r={shouldShowRightBorder(i)}
             data-value={tooltipValue}
             data-rowid={cell.row.id}
@@ -558,7 +561,7 @@
 
   table {
     @apply p-0 m-0 border-spacing-0 border-separate w-fit;
-    @apply font-normal;
+    @apply font-normal cursor-default;
     @apply bg-surface-background table-fixed;
   }
 

From 88cab919f8339641242e4f2d384773821cd21773 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 17:38:01 +0530
Subject: [PATCH 18/53] single selection in a row in flat table

---
 .../pivot/pivot-click-to-filter.spec.ts       | 367 +++++++++++++++---
 .../components/pivot/pivot-click-to-filter.ts | 154 ++++++++
 2 files changed, 467 insertions(+), 54 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index ea492066473..177c5763c2f 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -1,23 +1,109 @@
-import { describe, expect, it, vi } from "vitest";
+import type {
+  PivotDataRow,
+  PivotDataStore,
+  PivotDataStoreConfig,
+  PivotFilter,
+} from "@rilldata/web-common/features/dashboards/pivot/types";
+import {
+  V1Operation,
+  type V1Expression,
+} from "@rilldata/web-common/runtime-client";
 import { get, writable, type Readable } from "svelte/store";
-import { createPivotClickToFilter } from "./pivot-click-to-filter";
-import type { PivotDataStoreConfig } from "@rilldata/web-common/features/dashboards/pivot/types";
-import type { V1Expression } from "@rilldata/web-common/runtime-client";
+import { describe, expect, it, vi } from "vitest";
 import type { FilterManager } from "../../stores/filter-manager";
+import { createPivotClickToFilter } from "./pivot-click-to-filter";
+
+// Partial mocks: override only the filter-extraction functions while keeping
+// the rest of each module's real exports (extractDimensionFiltersFromExpression,
+// getActiveDimensionNames, etc.) which the factory depends on.
+vi.mock(
+  "@rilldata/web-common/features/dashboards/pivot/pivot-utils",
+  async () => ({
+    ...(await vi.importActual(
+      "@rilldata/web-common/features/dashboards/pivot/pivot-utils",
+    )),
+    getFiltersForCell: vi.fn(() => ({ filters: undefined, timeRange: null })),
+  }),
+);
+
+vi.mock(
+  "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection",
+  async () => ({
+    ...(await vi.importActual(
+      "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection",
+    )),
+    getFiltersForRowHeader: vi.fn(() => ({
+      filters: undefined,
+      timeRange: null,
+    })),
+  }),
+);
+
+import { getFiltersForCell } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+
+/** Build a V1Expression with a single IN clause: dimensionName IN (values) */
+function makeInFilter(dimensionName: string, values: string[]): V1Expression {
+  return {
+    cond: {
+      op: V1Operation.OPERATION_AND,
+      exprs: [
+        {
+          cond: {
+            op: V1Operation.OPERATION_IN,
+            exprs: [
+              { ident: dimensionName },
+              ...values.map((v) => ({ val: v })),
+            ],
+          },
+        },
+      ],
+    },
+  };
+}
+
+/** Build a PivotFilter with no time range (sufficient for these tests). */
+function makePivotFilter(dimensionName: string, values: string[]): PivotFilter {
+  return {
+    filters: makeInFilter(dimensionName, values),
+    timeRange: { start: undefined, end: undefined },
+  };
+}
 
 /**
- * Minimal stub for FilterManager; only the fields touched by the factory
- * are provided. Everything else is left as `undefined` / `never`.
+ * Stub for FilterManager. The factory only accesses `metricsViewFilters`
+ * (via `.get`/`.set`), `checkTemporaryFilter`, and `applyFiltersToUrl`.
+ * A plain Map structurally satisfies the `.get`/`.set` calls at runtime.
  */
-function stubFilterManager(): FilterManager {
+function stubFilterManager() {
   return {
-    metricsViewFilters: new Map(),
+    metricsViewFilters: new Map<
+      string,
+      {
+        addDimensionValueSelections: ReturnType<typeof vi.fn>;
+        toggleDimensionValueSelections: ReturnType<typeof vi.fn>;
+      }
+    >(),
     checkTemporaryFilter: vi.fn(),
     applyFiltersToUrl: vi.fn(),
   } as unknown as FilterManager;
 }
 
-function emptyConfig(): PivotDataStoreConfig {
+/** Create a FilterManager with a working filterClass stub for a metrics view */
+function stubFilterManagerWithClass(metricsViewName: string) {
+  const fm = stubFilterManager();
+  const filterClass = {
+    addDimensionValueSelections: vi.fn(() => "filter-string"),
+    toggleDimensionValueSelections: vi.fn(() => "filter-string"),
+  };
+  (fm.metricsViewFilters as unknown as Map<string, typeof filterClass>).set(
+    metricsViewName,
+    filterClass,
+  );
+  return { fm, filterClass };
+}
+
+/** Stub config with only the fields the factory reads. */
+function emptyConfig() {
   return {
     rowDimensionNames: ["country"],
     colDimensionNames: [],
@@ -26,29 +112,74 @@ function emptyConfig(): PivotDataStoreConfig {
   } as unknown as PivotDataStoreConfig;
 }
 
+function flatConfigTwoDims() {
+  return {
+    rowDimensionNames: ["country", "city"],
+    colDimensionNames: [],
+    measureNames: ["revenue"],
+    isFlat: true,
+  } as unknown as PivotDataStoreConfig;
+}
+
+function nestedConfig() {
+  return {
+    rowDimensionNames: ["country"],
+    colDimensionNames: [],
+    measureNames: ["revenue"],
+    isFlat: false,
+  } as unknown as PivotDataStoreConfig;
+}
+
+/** Build a PivotDataStore with the given data rows and optional axes. */
+function stubPivotDataStore(
+  data: PivotDataRow[],
+  columnDimensionAxes: Record<string, string[]> = {},
+): PivotDataStore {
+  return writable({
+    isFetching: false,
+    data,
+    columnDef: [],
+    assembled: true,
+    totalColumns: 0,
+    columnDimensionAxes,
+  });
+}
+
+/**
+ * Build the args object for createPivotClickToFilter with sensible defaults.
+ * Callers override only what they need.
+ */
+function createFactoryArgs(
+  overrides: Partial<Parameters<typeof createPivotClickToFilter>[0]> = {},
+): Parameters<typeof createPivotClickToFilter>[0] {
+  return {
+    pivotConfig: writable(emptyConfig()) as Readable<PivotDataStoreConfig>,
+    pivotDataStore: stubPivotDataStore([]),
+    filterManager: stubFilterManager(),
+    metricsViewName: "mv1",
+    componentId: "pivot-1",
+    activeComponent: writable<string | null>(null),
+    selfFilteredDimensions: writable<Set<string>>(new Set()),
+    whereFilterStore: writable<V1Expression | undefined>(undefined),
+    ...overrides,
+  };
+}
+
 describe("pivot-click-to-filter: clearActiveComponent", () => {
   it("should clear selfFilteredDimensions when activeComponent is set to null", () => {
     const activeComponent = writable<string | null>(null);
     const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const whereFilter = writable<V1Expression | undefined>(undefined);
-    const pivotConfig = writable(emptyConfig());
-    const pivotDataStore = writable({ data: null }) as any;
-
     const onBecomeActive = vi.fn();
     const onBecomeInactive = vi.fn();
 
-    const result = createPivotClickToFilter({
-      pivotConfig: pivotConfig as Readable<PivotDataStoreConfig>,
-      pivotDataStore,
-      filterManager: stubFilterManager(),
-      metricsViewName: "mv1",
-      componentId: "pivot-1",
-      activeComponent,
-      selfFilteredDimensions,
-      whereFilterStore: whereFilter,
-      onBecomeActive,
-      onBecomeInactive,
-    });
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        activeComponent,
+        selfFilteredDimensions,
+        onBecomeActive,
+        onBecomeInactive,
+      }),
+    );
 
     // Simulate the pivot becoming active with some self-filtered dimensions
     activeComponent.set("pivot-1");
@@ -71,23 +202,15 @@ describe("pivot-click-to-filter: clearActiveComponent", () => {
   it("should clear selfFilteredDimensions when another component becomes active", () => {
     const activeComponent = writable<string | null>(null);
     const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const whereFilter = writable<V1Expression | undefined>(undefined);
-    const pivotConfig = writable(emptyConfig());
-    const pivotDataStore = writable({ data: null }) as any;
-
     const onBecomeInactive = vi.fn();
 
-    const result = createPivotClickToFilter({
-      pivotConfig: pivotConfig as Readable<PivotDataStoreConfig>,
-      pivotDataStore,
-      filterManager: stubFilterManager(),
-      metricsViewName: "mv1",
-      componentId: "pivot-1",
-      activeComponent,
-      selfFilteredDimensions,
-      whereFilterStore: whereFilter,
-      onBecomeInactive,
-    });
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        activeComponent,
+        selfFilteredDimensions,
+        onBecomeInactive,
+      }),
+    );
 
     // Simulate active pivot with self-filtered dimensions
     activeComponent.set("pivot-1");
@@ -106,20 +229,13 @@ describe("pivot-click-to-filter: clearActiveComponent", () => {
   it("should NOT clear selfFilteredDimensions when this component is set as active", () => {
     const activeComponent = writable<string | null>(null);
     const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const whereFilter = writable<V1Expression | undefined>(undefined);
-    const pivotConfig = writable(emptyConfig());
-    const pivotDataStore = writable({ data: null }) as any;
-
-    const result = createPivotClickToFilter({
-      pivotConfig: pivotConfig as Readable<PivotDataStoreConfig>,
-      pivotDataStore,
-      filterManager: stubFilterManager(),
-      metricsViewName: "mv1",
-      componentId: "pivot-1",
-      activeComponent,
-      selfFilteredDimensions,
-      whereFilterStore: whereFilter,
-    });
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        activeComponent,
+        selfFilteredDimensions,
+      }),
+    );
 
     // Simulate active pivot with self-filtered dimensions
     selfFilteredDimensions.set(new Set(["country"]));
@@ -134,3 +250,146 @@ describe("pivot-click-to-filter: clearActiveComponent", () => {
     result.destroy();
   });
 });
+
+describe("pivot-click-to-filter: flat table single-cell-per-row", () => {
+  /** Flat table data: two rows, each with country and city dimensions */
+  const flatTableData = [
+    { country: "US", city: "NYC", revenue: 100 },
+    { country: "UK", city: "London", revenue: 200 },
+  ];
+
+  function setupFlat() {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    // Configure getFiltersForCell mock to return appropriate filters per column
+    vi.mocked(getFiltersForCell).mockImplementation(
+      (_config, _rowId, colId, _axes, _data, _upTo) => {
+        if (colId === "country") return makePivotFilter("country", ["US"]);
+        if (colId === "city") return makePivotFilter("city", ["NYC"]);
+        return makePivotFilter("country", ["US"]);
+      },
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(
+          flatConfigTwoDims(),
+        ) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(flatTableData),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    return { result, filterClass, selfFilteredDimensions, fm };
+  }
+
+  it("should replace existing cell in the same row for flat tables", () => {
+    const { result, filterClass } = setupFlat();
+
+    // Click on country column in row 0
+    result.handleCellClickToFilter("0", "country", false);
+
+    let sel = get(result.clickSelection);
+    expect(sel.isCellSelected("0", "country")).toBe(true);
+    expect(sel.cellSelections.size).toBe(1);
+
+    // Now click on city column in the same row 0; should replace, not accumulate
+    result.handleCellClickToFilter("0", "city", false);
+
+    sel = get(result.clickSelection);
+    expect(sel.isCellSelected("0", "country")).toBe(false);
+    expect(sel.isCellSelected("0", "city")).toBe(true);
+    expect(sel.cellSelections.size).toBe(1);
+
+    // toggleDimensionValueSelections should have been called to remove old values
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalled();
+
+    result.destroy();
+  });
+
+  it("should still allow deselect by re-clicking the same cell", () => {
+    const { result } = setupFlat();
+
+    // Click on country in row 0
+    result.handleCellClickToFilter("0", "country", false);
+    let sel = get(result.clickSelection);
+    expect(sel.isCellSelected("0", "country")).toBe(true);
+
+    // Click on the same cell again to deselect
+    result.handleCellClickToFilter("0", "country", false);
+    sel = get(result.clickSelection);
+    expect(sel.isCellSelected("0", "country")).toBe(false);
+    expect(sel.cellSelections.size).toBe(0);
+
+    result.destroy();
+  });
+
+  it("should allow selections across different rows independently", () => {
+    const { result } = setupFlat();
+
+    // Click on country in row 0
+    result.handleCellClickToFilter("0", "country", false);
+
+    // Click on country in row 1 (different row; not a replacement)
+    vi.mocked(getFiltersForCell).mockImplementation(() =>
+      makePivotFilter("country", ["UK"]),
+    );
+    result.handleCellClickToFilter("1", "country", false);
+
+    const sel = get(result.clickSelection);
+    expect(sel.isCellSelected("0", "country")).toBe(true);
+    expect(sel.isCellSelected("1", "country")).toBe(true);
+    expect(sel.cellSelections.size).toBe(2);
+
+    result.destroy();
+  });
+});
+
+describe("pivot-click-to-filter: nested table multi-select", () => {
+  function setupNested() {
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    vi.mocked(getFiltersForCell).mockImplementation(() =>
+      makePivotFilter("country", ["US"]),
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(nestedConfig()) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore([
+          {
+            country: "US",
+            revenue: 100,
+            subRows: [{ country: "US-East", revenue: 50 }],
+          },
+        ]),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+      }),
+    );
+
+    return { result, filterClass };
+  }
+
+  it("should allow multiple cells in the same row for nested tables", () => {
+    const { result } = setupNested();
+
+    // Click on two different columns in the same row
+    result.handleCellClickToFilter("0", "revenue", false);
+    let sel = get(result.clickSelection);
+    expect(sel.isCellSelected("0", "revenue")).toBe(true);
+
+    result.handleCellClickToFilter("0", "other_measure", false);
+    sel = get(result.clickSelection);
+
+    // Both should be selected (no replacement in nested mode)
+    expect(sel.isCellSelected("0", "revenue")).toBe(true);
+    expect(sel.isCellSelected("0", "other_measure")).toBe(true);
+    expect(sel.cellSelections.size).toBe(2);
+
+    result.destroy();
+  });
+});
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 1d5fa2e9469..39771a3213b 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -167,6 +167,16 @@ export function createPivotClickToFilter(
     return false;
   }
 
+  /** Returns all cell keys in `cells` that belong to the given row. */
+  function getCellKeysForRow(cells: Set<string>, rowId: string): string[] {
+    const prefix = rowId + ":";
+    const result: string[] = [];
+    for (const key of cells) {
+      if (key.startsWith(prefix)) result.push(key);
+    }
+    return result;
+  }
+
   // --- Retained value computation for safe deselect ---
 
   function collectRetainedDimensionValues(
@@ -352,6 +362,104 @@ export function createPivotClickToFilter(
     }
   }
 
+  /**
+   * Atomically replaces one cell selection with another in a single URL update.
+   * Used by flat tables where only one cell per row is allowed.
+   */
+  function applyReplacementFilters(
+    oldFilters: V1Expression,
+    newFilters: V1Expression,
+    updateSelectionSets: (
+      rowHeaders: Set<string>,
+      cells: Set<string>,
+      colHeaders: Set<string>,
+    ) => void,
+  ) {
+    const oldDimFilters = extractDimensionFiltersFromExpression(oldFilters);
+    const newDimFilters = extractDimensionFiltersFromExpression(newFilters);
+    if (oldDimFilters.length === 0 && newDimFilters.length === 0) return;
+
+    const allDimFilters = [...oldDimFilters, ...newDimFilters];
+    const preExistingDims = getActiveDimensionNames(get(whereFilterStore));
+
+    const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
+    if (!filterClass) return;
+
+    // Clone and update selection sets (remove old key, add new key)
+    const $clickSelection = get(clickSelectionStore);
+    const updatedRowHeaders = new Set($clickSelection.rowHeaderSelections);
+    const updatedCells = new Set($clickSelection.cellSelections);
+    const updatedColHeaders = new Set($clickSelection.columnHeaderSelections);
+    updateSelectionSets(updatedRowHeaders, updatedCells, updatedColHeaders);
+
+    // Clear temporary filter status for all affected dimensions
+    allDimFilters.forEach(({ dimensionName }) => {
+      filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
+    });
+
+    let filterString: string | null = null;
+
+    // Phase 1: Remove orphaned values from old cell
+    const retainedValues = collectRetainedDimensionValues(
+      updatedRowHeaders,
+      updatedCells,
+      updatedColHeaders,
+    );
+
+    oldDimFilters.forEach(({ dimensionName, values }) => {
+      const stillNeeded = retainedValues.get(dimensionName);
+      const orphanedValues = stillNeeded
+        ? values.filter((v) => !stillNeeded.has(v))
+        : values;
+      if (orphanedValues.length > 0) {
+        filterString = filterClass.toggleDimensionValueSelections(
+          dimensionName,
+          orphanedValues,
+          false,
+          false,
+        );
+      }
+    });
+
+    // Phase 2: Add new cell's values
+    newDimFilters.forEach(({ dimensionName, values }) => {
+      filterString = filterClass.addDimensionValueSelections(
+        dimensionName,
+        values,
+      );
+    });
+
+    clickSelectionStore.set(
+      buildClickSelection(
+        updatedRowHeaders,
+        updatedCells,
+        updatedColHeaders,
+        rowDimClickIndex,
+      ),
+    );
+
+    // Mark newly-added dimensions as self-filtered
+    const wasInactive = get(selfFilteredDimensions).size === 0;
+    selfFilteredDimensions.update((dims) => {
+      const next = new Set(dims);
+      allDimFilters.forEach(({ dimensionName }) => {
+        if (!preExistingDims.has(dimensionName)) {
+          next.add(dimensionName);
+        }
+      });
+      return next;
+    });
+    if (wasInactive && get(selfFilteredDimensions).size > 0) {
+      onBecomeActive?.();
+    }
+
+    if (filterString !== null) {
+      filterManager.applyFiltersToUrl(
+        new Map([[metricsViewName, filterString]]),
+      );
+    }
+  }
+
   // --- Click handlers ---
 
   function handleCellClickToFilter(
@@ -391,6 +499,52 @@ export function createPivotClickToFilter(
 
     if (!cellFilters.filters) return;
 
+    // Flat table: replace existing cell selection in the same row instead of
+    // accumulating. Nested tables allow multi-select within a row.
+    if ($config.isFlat && !isRowHeader && !isDeselect) {
+      const existingKeys = getCellKeysForRow(
+        $clickSelection.cellSelections,
+        rowId,
+      );
+      if (existingKeys.length > 0) {
+        // Compute old cell's filters so we can remove its orphaned values
+        const oldKey = existingKeys[0];
+        const oldColumnId = oldKey.slice(oldKey.indexOf(":") + 1);
+        const oldFlatDimIdx = $config.rowDimensionNames.indexOf(oldColumnId);
+        const oldUpToDimIdx = oldFlatDimIdx >= 0 ? oldFlatDimIdx : undefined;
+        const oldCellFilters = getFiltersForCell(
+          $config,
+          rowId,
+          oldColumnId,
+          $data.columnDimensionAxes ?? {},
+          $data.data,
+          oldUpToDimIdx,
+        );
+
+        if (oldCellFilters.filters) {
+          applyReplacementFilters(
+            oldCellFilters.filters,
+            cellFilters.filters,
+            (_nextRowHeaders, nextCells) => {
+              // Remove all existing cell keys for this row
+              for (const k of existingKeys) {
+                nextCells.delete(k);
+              }
+              // Add the new cell
+              nextCells.add(cellKey(rowId, columnId));
+              // Update rowDimClickIndex for visual classification
+              if (upToDimensionIndex !== undefined) {
+                rowDimClickIndex.set(rowId, upToDimensionIndex);
+              } else {
+                rowDimClickIndex.delete(rowId);
+              }
+            },
+          );
+          return;
+        }
+      }
+    }
+
     applyDimensionFilters(
       cellFilters.filters,
       isDeselect,

From 0b1a08725caba33af0bf7e47412ed2c60266bff9 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 18:12:10 +0530
Subject: [PATCH 19/53] preserve cell selection by value

---
 .../pivot/pivot-click-to-filter.spec.ts       | 150 ++++++++---
 .../components/pivot/pivot-click-to-filter.ts | 243 ++++++++----------
 .../dashboards/pivot/FlatTable.svelte         |  19 +-
 .../dashboards/pivot/NestedTable.svelte       |  17 +-
 .../dashboards/pivot/PivotTable.svelte        |   9 +-
 .../dashboards/pivot/pivot-click-selection.ts | 105 +++++---
 .../dashboards/pivot/pivot-row-selection.ts   |  74 +++++-
 .../features/dashboards/pivot/pivot-utils.ts  |  81 ++++++
 8 files changed, 468 insertions(+), 230 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 177c5763c2f..398e309dd46 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -1,3 +1,4 @@
+import { getFiltersFromRow } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
 import type {
   PivotDataRow,
   PivotDataStore,
@@ -10,6 +11,7 @@ import {
 } from "@rilldata/web-common/runtime-client";
 import { get, writable, type Readable } from "svelte/store";
 import { describe, expect, it, vi } from "vitest";
+import { dimKeyFromRow } from "../../../dashboards/pivot/pivot-click-selection";
 import type { FilterManager } from "../../stores/filter-manager";
 import { createPivotClickToFilter } from "./pivot-click-to-filter";
 
@@ -22,7 +24,7 @@ vi.mock(
     ...(await vi.importActual(
       "@rilldata/web-common/features/dashboards/pivot/pivot-utils",
     )),
-    getFiltersForCell: vi.fn(() => ({ filters: undefined, timeRange: null })),
+    getFiltersFromRow: vi.fn(() => ({ filters: undefined, timeRange: null })),
   }),
 );
 
@@ -32,15 +34,13 @@ vi.mock(
     ...(await vi.importActual(
       "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection",
     )),
-    getFiltersForRowHeader: vi.fn(() => ({
+    getFiltersForRowData: vi.fn(() => ({
       filters: undefined,
       timeRange: null,
     })),
   }),
 );
 
-import { getFiltersForCell } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
-
 /** Build a V1Expression with a single IN clause: dimensionName IN (values) */
 function makeInFilter(dimensionName: string, values: string[]): V1Expression {
   return {
@@ -253,18 +253,23 @@ describe("pivot-click-to-filter: clearActiveComponent", () => {
 
 describe("pivot-click-to-filter: flat table single-cell-per-row", () => {
   /** Flat table data: two rows, each with country and city dimensions */
-  const flatTableData = [
+  const flatTableData: PivotDataRow[] = [
     { country: "US", city: "NYC", revenue: 100 },
     { country: "UK", city: "London", revenue: 200 },
   ];
 
+  const row0 = flatTableData[0];
+  const row1 = flatTableData[1];
+  const row0DimKey = dimKeyFromRow(row0, ["country", "city"]);
+  const row1DimKey = dimKeyFromRow(row1, ["country", "city"]);
+
   function setupFlat() {
     const selfFilteredDimensions = writable<Set<string>>(new Set());
     const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
-    // Configure getFiltersForCell mock to return appropriate filters per column
-    vi.mocked(getFiltersForCell).mockImplementation(
-      (_config, _rowId, colId, _axes, _data, _upTo) => {
+    // Configure getFiltersFromRow mock to return appropriate filters per column
+    vi.mocked(getFiltersFromRow).mockImplementation(
+      (_config, _rowData, colId) => {
         if (colId === "country") return makePivotFilter("country", ["US"]);
         if (colId === "city") return makePivotFilter("city", ["NYC"]);
         return makePivotFilter("country", ["US"]);
@@ -290,22 +295,22 @@ describe("pivot-click-to-filter: flat table single-cell-per-row", () => {
     const { result, filterClass } = setupFlat();
 
     // Click on country column in row 0
-    result.handleCellClickToFilter("0", "country", false);
+    result.handleCellClickToFilter("0", "country", false, row0);
 
     let sel = get(result.clickSelection);
-    expect(sel.isCellSelected("0", "country")).toBe(true);
+    expect(sel.isCellSelected(row0DimKey, "country")).toBe(true);
     expect(sel.cellSelections.size).toBe(1);
 
     // Now click on city column in the same row 0; should replace, not accumulate
-    result.handleCellClickToFilter("0", "city", false);
+    result.handleCellClickToFilter("0", "city", false, row0);
 
     sel = get(result.clickSelection);
-    expect(sel.isCellSelected("0", "country")).toBe(false);
-    expect(sel.isCellSelected("0", "city")).toBe(true);
+    expect(sel.isCellSelected(row0DimKey, "country")).toBe(false);
+    expect(sel.isCellSelected(row0DimKey, "city")).toBe(true);
     expect(sel.cellSelections.size).toBe(1);
 
-    // toggleDimensionValueSelections should have been called to remove old values
-    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalled();
+    // addDimensionValueSelections should have been called for the new cell values
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalled();
 
     result.destroy();
   });
@@ -314,14 +319,14 @@ describe("pivot-click-to-filter: flat table single-cell-per-row", () => {
     const { result } = setupFlat();
 
     // Click on country in row 0
-    result.handleCellClickToFilter("0", "country", false);
+    result.handleCellClickToFilter("0", "country", false, row0);
     let sel = get(result.clickSelection);
-    expect(sel.isCellSelected("0", "country")).toBe(true);
+    expect(sel.isCellSelected(row0DimKey, "country")).toBe(true);
 
     // Click on the same cell again to deselect
-    result.handleCellClickToFilter("0", "country", false);
+    result.handleCellClickToFilter("0", "country", false, row0);
     sel = get(result.clickSelection);
-    expect(sel.isCellSelected("0", "country")).toBe(false);
+    expect(sel.isCellSelected(row0DimKey, "country")).toBe(false);
     expect(sel.cellSelections.size).toBe(0);
 
     result.destroy();
@@ -331,17 +336,17 @@ describe("pivot-click-to-filter: flat table single-cell-per-row", () => {
     const { result } = setupFlat();
 
     // Click on country in row 0
-    result.handleCellClickToFilter("0", "country", false);
+    result.handleCellClickToFilter("0", "country", false, row0);
 
     // Click on country in row 1 (different row; not a replacement)
-    vi.mocked(getFiltersForCell).mockImplementation(() =>
+    vi.mocked(getFiltersFromRow).mockImplementation(() =>
       makePivotFilter("country", ["UK"]),
     );
-    result.handleCellClickToFilter("1", "country", false);
+    result.handleCellClickToFilter("1", "country", false, row1);
 
     const sel = get(result.clickSelection);
-    expect(sel.isCellSelected("0", "country")).toBe(true);
-    expect(sel.isCellSelected("1", "country")).toBe(true);
+    expect(sel.isCellSelected(row0DimKey, "country")).toBe(true);
+    expect(sel.isCellSelected(row1DimKey, "country")).toBe(true);
     expect(sel.cellSelections.size).toBe(2);
 
     result.destroy();
@@ -349,23 +354,28 @@ describe("pivot-click-to-filter: flat table single-cell-per-row", () => {
 });
 
 describe("pivot-click-to-filter: nested table multi-select", () => {
+  const nestedData: PivotDataRow[] = [
+    {
+      country: "US",
+      revenue: 100,
+      subRows: [{ country: "US-East", revenue: 50 }],
+    },
+  ];
+
+  const row0 = nestedData[0];
+  const row0DimKey = dimKeyFromRow(row0, ["country"]);
+
   function setupNested() {
     const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
-    vi.mocked(getFiltersForCell).mockImplementation(() =>
+    vi.mocked(getFiltersFromRow).mockImplementation(() =>
       makePivotFilter("country", ["US"]),
     );
 
     const result = createPivotClickToFilter(
       createFactoryArgs({
         pivotConfig: writable(nestedConfig()) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore([
-          {
-            country: "US",
-            revenue: 100,
-            subRows: [{ country: "US-East", revenue: 50 }],
-          },
-        ]),
+        pivotDataStore: stubPivotDataStore(nestedData),
         filterManager: fm,
         activeComponent: writable<string | null>("pivot-1"),
       }),
@@ -378,18 +388,84 @@ describe("pivot-click-to-filter: nested table multi-select", () => {
     const { result } = setupNested();
 
     // Click on two different columns in the same row
-    result.handleCellClickToFilter("0", "revenue", false);
+    result.handleCellClickToFilter("0", "revenue", false, row0);
     let sel = get(result.clickSelection);
-    expect(sel.isCellSelected("0", "revenue")).toBe(true);
+    expect(sel.isCellSelected(row0DimKey, "revenue")).toBe(true);
 
-    result.handleCellClickToFilter("0", "other_measure", false);
+    result.handleCellClickToFilter("0", "other_measure", false, row0);
     sel = get(result.clickSelection);
 
     // Both should be selected (no replacement in nested mode)
-    expect(sel.isCellSelected("0", "revenue")).toBe(true);
-    expect(sel.isCellSelected("0", "other_measure")).toBe(true);
+    expect(sel.isCellSelected(row0DimKey, "revenue")).toBe(true);
+    expect(sel.isCellSelected(row0DimKey, "other_measure")).toBe(true);
     expect(sel.cellSelections.size).toBe(2);
 
     result.destroy();
   });
 });
+
+describe("pivot-click-to-filter: selection survives sorting", () => {
+  it("should identify same row after data order changes (simulated sort)", () => {
+    const { fm } = stubFilterManagerWithClass("mv1");
+
+    const dataBeforeSort: PivotDataRow[] = [
+      { country: "US", revenue: 100 },
+      { country: "UK", revenue: 200 },
+    ];
+
+    const pivotDataStore = writable({
+      isFetching: false,
+      data: dataBeforeSort,
+      columnDef: [],
+      assembled: true,
+      totalColumns: 0,
+      columnDimensionAxes: {},
+    });
+
+    vi.mocked(getFiltersFromRow).mockImplementation(() =>
+      makePivotFilter("country", ["US"]),
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(emptyConfig()) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: pivotDataStore as unknown as PivotDataStore,
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+      }),
+    );
+
+    const usRow = dataBeforeSort[0];
+    const usDimKey = dimKeyFromRow(usRow, ["country"]);
+
+    // Click on US row (index 0 before sort)
+    result.handleCellClickToFilter("0", "total", false, usRow);
+
+    let sel = get(result.clickSelection);
+    expect(sel.isCellSelected(usDimKey, "total")).toBe(true);
+
+    // Simulate sorting: UK now comes first, US second
+    const dataAfterSort: PivotDataRow[] = [
+      { country: "UK", revenue: 200 },
+      { country: "US", revenue: 100 },
+    ];
+    pivotDataStore.set({
+      isFetching: false,
+      data: dataAfterSort,
+      columnDef: [],
+      assembled: true,
+      totalColumns: 0,
+      columnDimensionAxes: {},
+    });
+
+    // The selection should still match US, not the row at index 0 (which is now UK)
+    sel = get(result.clickSelection);
+    expect(sel.isCellSelected(usDimKey, "total")).toBe(true);
+
+    // UK's dimKey should NOT be selected
+    const ukDimKey = dimKeyFromRow(dataAfterSort[0], ["country"]);
+    expect(sel.isCellSelected(ukDimKey, "total")).toBe(false);
+
+    result.destroy();
+  });
+});
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 39771a3213b..fa90c3dc2d7 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -2,16 +2,22 @@
  * Factory that creates all click-to-filter orchestration logic for a
  * canvas pivot component.
  *
+ * Selections are keyed by dimension values (dimKey) rather than
+ * positional TanStack row indices, so they survive sorting and
+ * data refreshes.
+ *
  * Returns readable stores for selection/row-highlight state, click
  * handlers for cells and column headers, and a destroy function for
  * cleanup.
  */
 import {
   type PivotClickSelectionState,
+  type SelectionEntry,
   buildClickSelection,
   cellKey,
   columnHeaderKey,
   createEmptyClickSelectionState,
+  dimKeyFromRow,
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-click-selection";
 import {
   type PivotRowSelectionState,
@@ -19,12 +25,12 @@ import {
   extractDimensionFiltersFromExpression,
   extractSelectionDimensionFilters,
   getActiveDimensionNames,
-  getDimensionValuesForRow,
   getFiltersForColumnHeader,
-  getFiltersForRowHeader,
+  getFiltersForRowData,
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
-import { getFiltersForCell } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+import { getFiltersFromRow } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
 import type {
+  PivotDataRow,
   PivotDataStore,
   PivotDataStoreConfig,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
@@ -58,6 +64,7 @@ export interface PivotClickToFilterResult {
     rowId: string,
     columnId: string,
     isRowHeader: boolean,
+    rowData: PivotDataRow,
   ) => void;
   handleColumnHeaderClick: (dimensionPath: Record<string, string>) => void;
   destroy: () => void;
@@ -84,9 +91,6 @@ export function createPivotClickToFilter(
     createEmptyClickSelectionState(),
   );
 
-  // Maps rowId → dimension column index for dimension-cell clicks (flat table only)
-  const rowDimClickIndex = new Map<string, number>();
-
   // Svelte store subscriptions fire synchronously on setup. This flag prevents
   // onBecomeInactive from firing during the initial subscription cascade before
   // the factory has been fully wired into the component tree.
@@ -113,7 +117,6 @@ export function createPivotClickToFilter(
   // --- Clear click selection when no self-filtered dimensions remain ---
   const clearUnsub = selfFilteredDimensions.subscribe(($selfFiltered) => {
     if ($selfFiltered.size === 0) {
-      rowDimClickIndex.clear();
       clickSelectionStore.set(createEmptyClickSelectionState());
       if (initialized) {
         onBecomeInactive?.();
@@ -152,27 +155,17 @@ export function createPivotClickToFilter(
 
   // --- Helpers ---
 
-  /** Check if any remaining cell selection for a row is a dimension column. */
-  function rowHasDimensionCell(
-    cells: Set<string>,
-    rowId: string,
-    config: PivotDataStoreConfig,
-  ): boolean {
-    const prefix = rowId + ":";
-    for (const key of cells) {
-      if (!key.startsWith(prefix)) continue;
-      const colId = key.slice(prefix.length);
-      if (config.rowDimensionNames.includes(colId)) return true;
-    }
-    return false;
-  }
-
-  /** Returns all cell keys in `cells` that belong to the given row. */
-  function getCellKeysForRow(cells: Set<string>, rowId: string): string[] {
-    const prefix = rowId + ":";
-    const result: string[] = [];
-    for (const key of cells) {
-      if (key.startsWith(prefix)) result.push(key);
+  /** Capture dimension name→value pairs from a PivotDataRow. */
+  function captureDimValues(
+    rowData: PivotDataRow,
+    rowDimensionNames: string[],
+  ): Record<string, string> {
+    const result: Record<string, string> = {};
+    for (const dim of rowDimensionNames) {
+      const val = rowData[dim];
+      if (typeof val === "string" || typeof val === "number") {
+        result[dim] = String(val);
+      }
     }
     return result;
   }
@@ -180,8 +173,8 @@ export function createPivotClickToFilter(
   // --- Retained value computation for safe deselect ---
 
   function collectRetainedDimensionValues(
-    remainingRowHeaders: Set<string>,
-    remainingCells: Set<string>,
+    remainingRowHeaders: Map<string, SelectionEntry>,
+    remainingCells: Map<string, SelectionEntry>,
     remainingColHeaders: Set<string>,
   ): Map<string, Set<string>> {
     const retainedValues = new Map<string, Set<string>>();
@@ -195,49 +188,21 @@ export function createPivotClickToFilter(
       valueSet.add(value);
     };
 
-    const $config = get(pivotConfig);
-    const $data = get(pivotDataStore);
-    if (!$config || !$data?.data) return retainedValues;
-
-    // Values from remaining row header selections
-    for (const rowId of remainingRowHeaders) {
-      const rowDimValues = getDimensionValuesForRow($config, rowId, $data.data);
-      for (const { dimensionName, value } of rowDimValues) {
-        addRetainedValue(dimensionName, value);
+    // Values from remaining row header selections (stored dimValues)
+    for (const entry of remainingRowHeaders.values()) {
+      for (const [dim, val] of Object.entries(entry.dimValues)) {
+        addRetainedValue(dim, val);
       }
     }
 
-    // Values from remaining data cell selections (row + column dimensions)
-    for (const selectionKey of remainingCells) {
-      const separatorIndex = selectionKey.indexOf(":");
-      if (separatorIndex === -1) continue;
-      const rowId = selectionKey.slice(0, separatorIndex);
-      const columnId = selectionKey.slice(separatorIndex + 1);
-      // For flat-table dimension cell clicks, only include dims up to the clicked column
-      const dimIdx = $config.isFlat
-        ? $config.rowDimensionNames.indexOf(columnId)
-        : -1;
-      const upToDimensionIndex = dimIdx >= 0 ? dimIdx : undefined;
-      const cellFilter = getFiltersForCell(
-        $config,
-        rowId,
-        columnId,
-        $data.columnDimensionAxes ?? {},
-        $data.data,
-        upToDimensionIndex,
-      );
-      if (cellFilter.filters) {
-        const extractedFilters = extractDimensionFiltersFromExpression(
-          cellFilter.filters,
-        );
-        for (const { dimensionName, values } of extractedFilters) {
-          for (const value of values) addRetainedValue(dimensionName, value);
-        }
+    // Values from remaining data cell selections (stored dimValues)
+    for (const entry of remainingCells.values()) {
+      for (const [dim, val] of Object.entries(entry.dimValues)) {
+        addRetainedValue(dim, val);
       }
     }
 
     // Values from remaining column header selections
-    // Key format: JSON-serialised sorted entries, e.g. '[["dim","val"]]'
     for (const headerKey of remainingColHeaders) {
       try {
         const entries: [string, string][] = JSON.parse(headerKey);
@@ -256,17 +221,15 @@ export function createPivotClickToFilter(
     filters: V1Expression,
     isDeselect: boolean,
     updateSelectionSets: (
-      rowHeaders: Set<string>,
-      cells: Set<string>,
+      rowHeaders: Map<string, SelectionEntry>,
+      cells: Map<string, SelectionEntry>,
       colHeaders: Set<string>,
     ) => void,
   ) {
     const dimensionFilters = extractDimensionFiltersFromExpression(filters);
     if (dimensionFilters.length === 0) return;
 
-    // Capture which dimensions were already in the global filter before this click.
-    // Dimensions present here were not added by this component and should not be
-    // excluded from its own query (they are not "self-filtered").
+    // Capture which dimensions were already in the global filter before this click
     const preExistingDims = getActiveDimensionNames(get(whereFilterStore));
 
     const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
@@ -274,8 +237,8 @@ export function createPivotClickToFilter(
 
     // Update selection sets first so we can compute retained values
     const $clickSelection = get(clickSelectionStore);
-    const updatedRowHeaders = new Set($clickSelection.rowHeaderSelections);
-    const updatedCells = new Set($clickSelection.cellSelections);
+    const updatedRowHeaders = new Map($clickSelection.rowHeaderSelections);
+    const updatedCells = new Map($clickSelection.cellSelections);
     const updatedColHeaders = new Set($clickSelection.columnHeaderSelections);
     updateSelectionSets(updatedRowHeaders, updatedCells, updatedColHeaders);
 
@@ -329,17 +292,10 @@ export function createPivotClickToFilter(
     }
 
     clickSelectionStore.set(
-      buildClickSelection(
-        updatedRowHeaders,
-        updatedCells,
-        updatedColHeaders,
-        rowDimClickIndex,
-      ),
+      buildClickSelection(updatedRowHeaders, updatedCells, updatedColHeaders),
     );
 
-    // Mark only newly-added dimensions as self-filtered. Dimensions that were
-    // already in the global filter before this click are not owned by this
-    // component and must not be stripped from its own query.
+    // Mark only newly-added dimensions as self-filtered
     const wasInactive = get(selfFilteredDimensions).size === 0;
     selfFilteredDimensions.update((dims) => {
       const next = new Set(dims);
@@ -370,8 +326,8 @@ export function createPivotClickToFilter(
     oldFilters: V1Expression,
     newFilters: V1Expression,
     updateSelectionSets: (
-      rowHeaders: Set<string>,
-      cells: Set<string>,
+      rowHeaders: Map<string, SelectionEntry>,
+      cells: Map<string, SelectionEntry>,
       colHeaders: Set<string>,
     ) => void,
   ) {
@@ -387,8 +343,8 @@ export function createPivotClickToFilter(
 
     // Clone and update selection sets (remove old key, add new key)
     const $clickSelection = get(clickSelectionStore);
-    const updatedRowHeaders = new Set($clickSelection.rowHeaderSelections);
-    const updatedCells = new Set($clickSelection.cellSelections);
+    const updatedRowHeaders = new Map($clickSelection.rowHeaderSelections);
+    const updatedCells = new Map($clickSelection.cellSelections);
     const updatedColHeaders = new Set($clickSelection.columnHeaderSelections);
     updateSelectionSets(updatedRowHeaders, updatedCells, updatedColHeaders);
 
@@ -430,12 +386,7 @@ export function createPivotClickToFilter(
     });
 
     clickSelectionStore.set(
-      buildClickSelection(
-        updatedRowHeaders,
-        updatedCells,
-        updatedColHeaders,
-        rowDimClickIndex,
-      ),
+      buildClickSelection(updatedRowHeaders, updatedCells, updatedColHeaders),
     );
 
     // Mark newly-added dimensions as self-filtered
@@ -463,20 +414,23 @@ export function createPivotClickToFilter(
   // --- Click handlers ---
 
   function handleCellClickToFilter(
-    rowId: string,
+    _rowId: string,
     columnId: string,
     isRowHeader: boolean,
+    rowData: PivotDataRow,
   ) {
     const $config = get(pivotConfig);
     const $data = get(pivotDataStore);
     if (!$config || !$data?.data) return;
 
+    const dk = dimKeyFromRow(rowData, $config.rowDimensionNames);
+    const dimValues = captureDimValues(rowData, $config.rowDimensionNames);
     const $clickSelection = get(clickSelectionStore);
 
     // Determine if this click is deselecting a previously selected element
     const isDeselect = isRowHeader
-      ? $clickSelection.isRowHeaderSelected(rowId)
-      : $clickSelection.isCellSelected(rowId, columnId);
+      ? $clickSelection.isRowHeaderSelected(dk)
+      : $clickSelection.isCellSelected(dk, columnId);
 
     // For flat-table dimension cell clicks, only filter up to (and including) the
     // clicked column's dimension index, not all row dimensions.
@@ -487,37 +441,50 @@ export function createPivotClickToFilter(
     const upToDimensionIndex = flatDimIdx >= 0 ? flatDimIdx : undefined;
 
     const cellFilters = isRowHeader
-      ? getFiltersForRowHeader($config, rowId, $data.data)
-      : getFiltersForCell(
+      ? getFiltersForRowData($config, rowData)
+      : getFiltersFromRow(
           $config,
-          rowId,
+          rowData,
           columnId,
           $data.columnDimensionAxes ?? {},
-          $data.data,
           upToDimensionIndex,
         );
 
     if (!cellFilters.filters) return;
 
+    // Build the dimValues to store; for partial dimension clicks, only keep
+    // dimensions up to the clicked index
+    const storedDimValues =
+      upToDimensionIndex !== undefined
+        ? Object.fromEntries(
+            Object.entries(dimValues).filter(([dim]) => {
+              const idx = $config.rowDimensionNames.indexOf(dim);
+              return idx >= 0 && idx <= upToDimensionIndex;
+            }),
+          )
+        : dimValues;
+
     // Flat table: replace existing cell selection in the same row instead of
     // accumulating. Nested tables allow multi-select within a row.
     if ($config.isFlat && !isRowHeader && !isDeselect) {
-      const existingKeys = getCellKeysForRow(
-        $clickSelection.cellSelections,
-        rowId,
-      );
-      if (existingKeys.length > 0) {
+      // Find existing cell keys for this dimKey
+      const existingEntries: [string, SelectionEntry][] = [];
+      for (const [key, entry] of $clickSelection.cellSelections) {
+        if (entry.dimKey === dk) {
+          existingEntries.push([key, entry]);
+        }
+      }
+
+      if (existingEntries.length > 0) {
         // Compute old cell's filters so we can remove its orphaned values
-        const oldKey = existingKeys[0];
-        const oldColumnId = oldKey.slice(oldKey.indexOf(":") + 1);
-        const oldFlatDimIdx = $config.rowDimensionNames.indexOf(oldColumnId);
-        const oldUpToDimIdx = oldFlatDimIdx >= 0 ? oldFlatDimIdx : undefined;
-        const oldCellFilters = getFiltersForCell(
+        const [, oldEntry] = existingEntries[0];
+        const oldDimIdx = $config.rowDimensionNames.indexOf(oldEntry.columnId);
+        const oldUpToDimIdx = oldDimIdx >= 0 ? oldDimIdx : undefined;
+        const oldCellFilters = getFiltersFromRow(
           $config,
-          rowId,
-          oldColumnId,
+          rowData,
+          oldEntry.columnId,
           $data.columnDimensionAxes ?? {},
-          $data.data,
           oldUpToDimIdx,
         );
 
@@ -527,17 +494,17 @@ export function createPivotClickToFilter(
             cellFilters.filters,
             (_nextRowHeaders, nextCells) => {
               // Remove all existing cell keys for this row
-              for (const k of existingKeys) {
-                nextCells.delete(k);
+              for (const [key] of existingEntries) {
+                nextCells.delete(key);
               }
               // Add the new cell
-              nextCells.add(cellKey(rowId, columnId));
-              // Update rowDimClickIndex for visual classification
-              if (upToDimensionIndex !== undefined) {
-                rowDimClickIndex.set(rowId, upToDimensionIndex);
-              } else {
-                rowDimClickIndex.delete(rowId);
-              }
+              const newKey = cellKey(dk, columnId);
+              nextCells.set(newKey, {
+                dimKey: dk,
+                dimValues: storedDimValues,
+                columnId,
+                dimClickIndex: upToDimensionIndex,
+              });
             },
           );
           return;
@@ -550,28 +517,26 @@ export function createPivotClickToFilter(
       isDeselect,
       (nextRowHeaders, nextCells) => {
         if (isRowHeader) {
-          if (nextRowHeaders.has(rowId)) nextRowHeaders.delete(rowId);
-          else nextRowHeaders.add(rowId);
+          if (nextRowHeaders.has(dk)) {
+            nextRowHeaders.delete(dk);
+          } else {
+            nextRowHeaders.set(dk, {
+              dimKey: dk,
+              dimValues,
+              columnId,
+            });
+          }
         } else {
-          const key = cellKey(rowId, columnId);
+          const key = cellKey(dk, columnId);
           if (nextCells.has(key)) {
             nextCells.delete(key);
-            // Only remove the dimension click index if no remaining cell
-            // selection for this row is a dimension cell. Otherwise a
-            // measure-cell deselect would corrupt the dimension highlight.
-            if (!rowHasDimensionCell(nextCells, rowId, $config)) {
-              rowDimClickIndex.delete(rowId);
-            }
           } else {
-            nextCells.add(key);
-            // Track which dimension index was clicked for visual classification
-            if (upToDimensionIndex !== undefined) {
-              rowDimClickIndex.set(rowId, upToDimensionIndex);
-            } else if (!rowDimClickIndex.has(rowId)) {
-              // Only clear if there is no existing dimension cell index for
-              // this row; a prior dimension click should be preserved.
-              rowDimClickIndex.delete(rowId);
-            }
+            nextCells.set(key, {
+              dimKey: dk,
+              dimValues: storedDimValues,
+              columnId,
+              dimClickIndex: upToDimensionIndex,
+            });
           }
         }
       },
diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index 5b3032ed314..2703e7653a0 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -21,7 +21,10 @@
   } from "tanstack-table-8-svelte-5";
   import { flexRender } from "tanstack-table-8-svelte-5";
   import { cellInspectorStore } from "../stores/cell-inspector-store";
-  import type { PivotClickSelectionState } from "./pivot-click-selection";
+  import {
+    type PivotClickSelectionState,
+    dimKeyFromRow,
+  } from "./pivot-click-selection";
   import type { PivotRowSelectionState } from "./pivot-row-selection";
   import type { PivotDataRow, PivotDataStoreConfig } from "./types";
 
@@ -100,7 +103,11 @@
   }
 
   function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
-    return clickSelection?.isCellSelected(cell.row.id, cell.column.id) ?? false;
+    const dk = dimKeyFromRow(
+      cell.row.original,
+      config?.rowDimensionNames ?? [],
+    );
+    return clickSelection?.isCellSelected(dk, cell.column.id) ?? false;
   }
 
   $: lastDimIdx = (config?.rowDimensionNames.length ?? 0) - 1;
@@ -202,13 +209,15 @@
     {#each virtualRows as row (row.index)}
       {@const cells = rows[row.index].getVisibleCells()}
       {@const rowId = rows[row.index].id}
-      {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
+      {@const rowData = rows[row.index].original}
+      {@const dk = dimKeyFromRow(rowData, config?.rowDimensionNames ?? [])}
+      {@const isSelected = rowSelectionState?.isRowSelected(rowData) ?? false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isTotalsRow = !!totalsRow && rowId === "0"}
       {@const hasClickedCell =
-        clickSelection?.hasSelectedCellInRow(rowId) ?? false}
+        clickSelection?.hasSelectedCellInRow(dk) ?? false}
       {@const clickedDimIdx =
-        clickSelection?.getClickedDimensionIndex(rowId) ?? -1}
+        clickSelection?.getClickedDimensionIndex(dk) ?? -1}
       {@const effectiveDimIdx = hasClickedCell
         ? clickedDimIdx >= 0
           ? clickedDimIdx
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 0ae23e7c028..b1c881b22d4 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -10,7 +10,10 @@
   import type { Cell, HeaderGroup, Row } from "tanstack-table-8-svelte-5";
   import { flexRender } from "tanstack-table-8-svelte-5";
   import { cellInspectorStore } from "../stores/cell-inspector-store";
-  import type { PivotClickSelectionState } from "./pivot-click-selection";
+  import {
+    type PivotClickSelectionState,
+    dimKeyFromRow,
+  } from "./pivot-click-selection";
   import {
     getRowNestedLabel,
     type DimensionColumnProps,
@@ -122,6 +125,7 @@
   $: hasRowDimension = rowDimensions.length > 0;
   $: hasExpandableRows = rowDimensions.length > 1;
   $: hasMeasures = measures.length > 0;
+  $: rowDimensionNames = rowDimensions.map((d) => d.name);
   $: rowDimensionLabel = getRowNestedLabel(rowDimensions);
   $: rowDimensionName = rowDimensionLabel ? rowDimensionLabel : null;
 
@@ -224,7 +228,8 @@
   }
 
   function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
-    return clickSelection?.isCellSelected(cell.row.id, cell.column.id) ?? false;
+    const dk = dimKeyFromRow(cell.row.original, rowDimensionNames);
+    return clickSelection?.isCellSelected(dk, cell.column.id) ?? false;
   }
 
   function isHeaderInHoveredRange(
@@ -483,13 +488,15 @@
     {#each virtualRows as row (row.index)}
       {@const cells = rows[row.index].getVisibleCells()}
       {@const rowId = rows[row.index].id}
+      {@const rowData = rows[row.index].original}
+      {@const dk = dimKeyFromRow(rowData, rowDimensionNames)}
       {@const isTotalsRow = !!totalsRow && rowId === "0"}
-      {@const isSelected = rowSelectionState?.isRowSelected(rowId) ?? false}
+      {@const isSelected = rowSelectionState?.isRowSelected(rowData) ?? false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isRowHeaderSelected =
-        clickSelection?.isRowHeaderSelected(rowId) ?? false}
+        clickSelection?.isRowHeaderSelected(dk) ?? false}
       {@const hasClickedCell =
-        clickSelection?.hasSelectedCellInRow(rowId) ?? false}
+        clickSelection?.hasSelectedCellInRow(dk) ?? false}
       <tr
         class:show-more-row={isShowMoreRow(rows[row.index])}
         class:selected-row={isSelected && isRowHeaderSelected}
diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte
index 1700ec9c0d5..aa02eae2eb2 100644
--- a/web-common/src/features/dashboards/pivot/PivotTable.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotTable.svelte
@@ -64,7 +64,12 @@
     | ((expandIndex: string, limit: number) => void)
     | undefined = undefined;
   export let onCellClickToFilter:
-    | ((rowId: string, columnId: string, isRowHeader: boolean) => void)
+    | ((
+        rowId: string,
+        columnId: string,
+        isRowHeader: boolean,
+        rowData: PivotDataRow,
+      ) => void)
     | undefined = undefined;
   export let onColumnHeaderClick:
     | ((dimensionPath: Record<string, string>) => void)
@@ -266,7 +271,7 @@
 
       // Apply click-to-filter (Canvas or future Explore)
       if (onCellClickToFilter) {
-        onCellClickToFilter(rowId, columnId, rowHeader);
+        onCellClickToFilter(rowId, columnId, rowHeader, row.original);
       }
     }
   }
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 3b8fd4e8422..51721ba235a 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -1,24 +1,62 @@
 /**
  * Tracks which pivot elements (row headers, data cells, column headers)
- * were selected via click-to-filter. Pure data types and key builders
- * with no dependencies on other pivot modules.
+ * were selected via click-to-filter.
+ *
+ * Selections are keyed by dimension values (dimKey), not positional row
+ * indices, so they remain stable across sorting and data refreshes.
  */
 
+import type { PivotDataRow } from "./types";
+
+/**
+ * Produces a stable string key from a row's dimension values.
+ * Uses NUL as separator since dimension values won't contain it.
+ */
+export function dimKeyFromRow(
+  rowData: PivotDataRow,
+  rowDimensionNames: string[],
+): string {
+  return rowDimensionNames.map((d) => String(rowData[d] ?? "")).join("\0");
+}
+
+export function cellKey(dimKey: string, columnId: string) {
+  return `${dimKey}\t${columnId}`;
+}
+
+export function columnHeaderKey(dimensionPath: Record<string, string>): string {
+  return JSON.stringify(
+    Object.entries(dimensionPath).sort(([a], [b]) => a.localeCompare(b)),
+  );
+}
+
+// ---- Selection entry (stored per cell / row-header click) ----
+
+export interface SelectionEntry {
+  dimKey: string;
+  /** Row dimension name→value pairs captured at click time */
+  dimValues: Record<string, string>;
+  columnId: string;
+  /** For flat-table dimension cell clicks: the index into rowDimensionNames */
+  dimClickIndex?: number;
+}
+
+// ---- Selection state ----
+
 export interface PivotClickSelectionState {
-  /** rowIds selected via row-header clicks */
-  rowHeaderSelections: Set<string>;
-  /** "rowId:columnId" keys selected via data-cell clicks */
-  cellSelections: Set<string>;
-  /** "dimensionName:dimensionValue" keys selected via column-header clicks */
+  /** dimKey → entry for row-header clicks */
+  rowHeaderSelections: Map<string, SelectionEntry>;
+  /** "dimKey\tcolumnId" → entry for data-cell clicks */
+  cellSelections: Map<string, SelectionEntry>;
+  /** Serialised dimension-path keys for column-header clicks */
   columnHeaderSelections: Set<string>;
   /** Whether any selection exists at all */
   hasAnySelection: boolean;
   /** Check if a specific row was selected via row-header click */
-  isRowHeaderSelected: (rowId: string) => boolean;
+  isRowHeaderSelected: (dimKey: string) => boolean;
   /** Check if a specific cell was selected via data-cell click */
-  isCellSelected: (rowId: string, columnId: string) => boolean;
+  isCellSelected: (dimKey: string, columnId: string) => boolean;
   /** Check if any data cell in this row was selected via click */
-  hasSelectedCellInRow: (rowId: string) => boolean;
+  hasSelectedCellInRow: (dimKey: string) => boolean;
   /** Check if a column header was selected via click */
   isColumnHeaderSelected: (dimensionPath: Record<string, string>) => boolean;
   /** Column IDs that have at least one selected cell (for highlighting column headers) */
@@ -28,13 +66,13 @@ export interface PivotClickSelectionState {
    * (i.e. the index into rowDimensionNames), or -1 if no dimension cell
    * was clicked (measure click, row-header click, or no selection).
    */
-  getClickedDimensionIndex: (rowId: string) => number;
+  getClickedDimensionIndex: (dimKey: string) => number;
 }
 
 export function createEmptyClickSelectionState(): PivotClickSelectionState {
   return {
-    rowHeaderSelections: new Set(),
-    cellSelections: new Set(),
+    rowHeaderSelections: new Map(),
+    cellSelections: new Map(),
     columnHeaderSelections: new Set(),
     hasAnySelection: false,
     isRowHeaderSelected: () => false,
@@ -46,33 +84,26 @@ export function createEmptyClickSelectionState(): PivotClickSelectionState {
   };
 }
 
-export function cellKey(rowId: string, columnId: string) {
-  return `${rowId}:${columnId}`;
-}
-
-export function columnHeaderKey(dimensionPath: Record<string, string>): string {
-  return JSON.stringify(
-    Object.entries(dimensionPath).sort(([a], [b]) => a.localeCompare(b)),
-  );
-}
-
 export function buildClickSelection(
-  rowHeaders: Set<string>,
-  cells: Set<string>,
+  rowHeaders: Map<string, SelectionEntry>,
+  cells: Map<string, SelectionEntry>,
   colHeaders: Set<string>,
-  /** Maps rowId → dimension column index for dimension-cell clicks in flat tables */
-  rowDimClickIndex: Map<string, number> = new Map(),
 ): PivotClickSelectionState {
   const hasAny = rowHeaders.size > 0 || cells.size > 0 || colHeaders.size > 0;
 
-  // Build sets of rowIds and columnIds that have at least one selected cell
+  // Build sets of dimKeys and columnIds that have at least one selected cell
   const rowsWithSelectedCells = new Set<string>();
   const columnsWithSelectedCells = new Set<string>();
-  for (const key of cells) {
-    const sep = key.indexOf(":");
-    if (sep !== -1) {
-      rowsWithSelectedCells.add(key.slice(0, sep));
-      columnsWithSelectedCells.add(key.slice(sep + 1));
+  for (const entry of cells.values()) {
+    rowsWithSelectedCells.add(entry.dimKey);
+    columnsWithSelectedCells.add(entry.columnId);
+  }
+
+  // Build a map of dimKey → dimClickIndex for quick lookup
+  const dimClickIndexByKey = new Map<string, number>();
+  for (const entry of cells.values()) {
+    if (entry.dimClickIndex !== undefined && entry.dimClickIndex >= 0) {
+      dimClickIndexByKey.set(entry.dimKey, entry.dimClickIndex);
     }
   }
 
@@ -81,11 +112,11 @@ export function buildClickSelection(
     cellSelections: cells,
     columnHeaderSelections: colHeaders,
     hasAnySelection: hasAny,
-    isRowHeaderSelected: (rid) => rowHeaders.has(rid),
-    isCellSelected: (rid, cid) => cells.has(cellKey(rid, cid)),
-    hasSelectedCellInRow: (rid) => rowsWithSelectedCells.has(rid),
+    isRowHeaderSelected: (dk) => rowHeaders.has(dk),
+    isCellSelected: (dk, cid) => cells.has(cellKey(dk, cid)),
+    hasSelectedCellInRow: (dk) => rowsWithSelectedCells.has(dk),
     isColumnHeaderSelected: (path) => colHeaders.has(columnHeaderKey(path)),
     selectedCellColumnIds: columnsWithSelectedCells,
-    getClickedDimensionIndex: (rid) => rowDimClickIndex.get(rid) ?? -1,
+    getClickedDimensionIndex: (dk) => dimClickIndexByKey.get(dk) ?? -1,
   };
 }
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 8fdc9a4d494..dbcbc4de558 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -26,8 +26,8 @@ import type {
 export interface PivotRowSelectionState {
   /** True if at least one row dimension has active filter selections */
   hasActiveSelection: boolean;
-  /** Check if a specific row (by rowId) is selected based on current filters */
-  isRowSelected: (rowId: string) => boolean;
+  /** Check if a row is selected based on current filters (reads values from row data directly) */
+  isRowSelected: (rowData: PivotDataRow) => boolean;
   /** Highest row dimension index with an active selection filter, or -1 */
   maxFilteredDimensionIndex: number;
 }
@@ -81,6 +81,70 @@ export function getDimensionValuesForRow(
     );
 }
 
+/**
+ * Like getDimensionValuesForRow but reads values directly from a PivotDataRow
+ * instead of using positional rowId indexing. Stable across sorting.
+ */
+export function getDimensionValuesFromRowData(
+  config: PivotDataStoreConfig,
+  rowData: PivotDataRow,
+): Array<{ dimensionName: string; value: string }> {
+  return config.rowDimensionNames
+    .filter((dim) => !isTimeDimension(dim, config.time.timeDimension))
+    .map((dim) => ({
+      dimensionName: dim,
+      value: String(rowData[dim] ?? ""),
+    }))
+    .filter(({ value }) => value !== "");
+}
+
+/**
+ * Like getFiltersForRowHeader but reads values directly from a PivotDataRow.
+ * Stable across sorting.
+ */
+export function getFiltersForRowData(
+  config: PivotDataStoreConfig,
+  rowData: PivotDataRow,
+): PivotFilter {
+  const { rowDimensionNames } = config;
+
+  const rowNestTimeFilters: TimeFilters[] = [];
+  const rowNestFilters = rowDimensionNames
+    .map((dim) => {
+      const value = rowData[dim];
+      if (value === undefined || value === null) return null;
+      return createInExpression(dim, [String(value)]);
+    })
+    .filter((f): f is V1Expression => {
+      if (!f) return false;
+      if (
+        isTimeDimension(f.cond?.exprs?.[0].ident, config.time.timeDimension)
+      ) {
+        rowNestTimeFilters.push({
+          timeStart: f.cond?.exprs?.[1].val as string,
+          interval: getTimeGrainFromDimension(
+            f.cond?.exprs?.[0].ident as string,
+          ),
+        });
+        return false;
+      }
+      return true;
+    });
+
+  let rowFilters: V1Expression | undefined = undefined;
+  if (rowNestFilters.length) {
+    rowFilters = createAndExpression(rowNestFilters);
+  }
+
+  const timeRange: TimeRangeString = getTimeForQuery(
+    config.time,
+    rowNestTimeFilters,
+  );
+
+  const filters = mergeFilters(rowFilters, config.whereFilter);
+  return { filters, timeRange };
+}
+
 /**
  * Extracts dimension -> Set<values> from a V1Expression (whereFilter).
  * Only considers IN expressions for selection matching; other filter types
@@ -121,7 +185,7 @@ export function extractSelectionDimensionFilters(
  */
 export function computePivotRowSelection(
   config: PivotDataStoreConfig,
-  tableData: PivotDataRow[],
+  _tableData: PivotDataRow[],
   dimensionFilters: Map<string, Set<string>>,
 ): PivotRowSelectionState {
   const hasActiveSelection = dimensionFilters.size > 0;
@@ -144,8 +208,8 @@ export function computePivotRowSelection(
   return {
     hasActiveSelection: true,
     maxFilteredDimensionIndex,
-    isRowSelected: (rowId: string) => {
-      const rowDimValues = getDimensionValuesForRow(config, rowId, tableData);
+    isRowSelected: (rowData: PivotDataRow) => {
+      const rowDimValues = getDimensionValuesFromRowData(config, rowData);
       if (rowDimValues.length === 0) return false;
 
       // A row is selected if every dimension that IS filtered
diff --git a/web-common/src/features/dashboards/pivot/pivot-utils.ts b/web-common/src/features/dashboards/pivot/pivot-utils.ts
index 6c3574a4737..f92148feb7f 100644
--- a/web-common/src/features/dashboards/pivot/pivot-utils.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-utils.ts
@@ -646,6 +646,87 @@ export function getFiltersForCell(
   return { filters, timeRange };
 }
 
+/**
+ * Like getFiltersForCell but reads dimension values directly from a
+ * PivotDataRow object instead of doing parseInt(rowId) array indexing.
+ * This makes selections stable across sorting and data refreshes.
+ */
+export function getFiltersFromRow(
+  config: PivotDataStoreConfig,
+  rowData: PivotDataRow,
+  colId: string,
+  colDimensionAxes: Record<string, string[]> = {},
+  upToDimensionIndex?: number,
+): PivotFilter {
+  const { rowDimensionNames, measureNames, isFlat } = config;
+  const defaultTimeRange = {
+    start: config.time.timeStart,
+    end: config.time.timeEnd,
+  };
+
+  // Extract dimension values directly from the row data object
+  let dimNames = rowDimensionNames;
+  if (upToDimensionIndex !== undefined && upToDimensionIndex >= 0) {
+    dimNames = rowDimensionNames.slice(0, upToDimensionIndex + 1);
+  }
+
+  const rowNestTimeFilters: TimeFilters[] = [];
+  const rowNestFilters = dimNames
+    .map((dim) => {
+      const value = rowData[dim];
+      if (value === undefined || value === null) return null;
+      return createInExpression(dim, [String(value)]);
+    })
+    .filter((f): f is V1Expression => {
+      if (!f) return false;
+      if (
+        isTimeDimension(f.cond?.exprs?.[0].ident, config.time.timeDimension)
+      ) {
+        rowNestTimeFilters.push({
+          timeStart: f.cond?.exprs?.[1].val as string,
+          interval: getTimeGrainFromDimension(
+            f.cond?.exprs?.[0].ident as string,
+          ),
+        });
+        return false;
+      }
+      return true;
+    });
+
+  let rowFilters: V1Expression | undefined = undefined;
+  if (rowNestFilters.length) {
+    rowFilters = createAndExpression(rowNestFilters);
+  }
+
+  const timeRangeRow: TimeRangeString = getTimeForQuery(
+    config.time,
+    rowNestTimeFilters,
+  );
+
+  // Get filters for column dimensions
+  let columnFilters: V1Expression | undefined;
+  let timeRangeCol: TimeRangeString;
+  const firstDimension = rowDimensionNames?.[0];
+  if (firstDimension === colId || measureNames.includes(colId) || isFlat) {
+    columnFilters = undefined;
+    timeRangeCol = defaultTimeRange;
+  } else {
+    const { filters, timeRange } = getColumnFiltersFromMinimizedAccessor(
+      config,
+      colId,
+      colDimensionAxes,
+    );
+    columnFilters = filters;
+    timeRangeCol = timeRange;
+  }
+
+  const timeRange = mergeTimeStrings(timeRangeRow, timeRangeCol);
+  const cellFilters = mergeFilters(rowFilters, columnFilters);
+  const filters = mergeFilters(cellFilters, config.whereFilter);
+
+  return { filters, timeRange };
+}
+
 export function getErrorFromResponse(
   queryResult: QueryObserverResult<
     V1MetricsViewAggregationResponse,

From 7db22d3fea0bb749aa303d800bd102a0bca271e9 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 18:15:50 +0530
Subject: [PATCH 20/53] use existing util for test

---
 .../pivot/pivot-click-to-filter.spec.ts       | 29 ++++---------------
 1 file changed, 5 insertions(+), 24 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 398e309dd46..2597a49fa24 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -6,9 +6,10 @@ import type {
   PivotFilter,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
 import {
-  V1Operation,
-  type V1Expression,
-} from "@rilldata/web-common/runtime-client";
+  createAndExpression,
+  createInExpression,
+} from "@rilldata/web-common/features/dashboards/stores/filter-utils";
+import type { V1Expression } from "@rilldata/web-common/runtime-client";
 import { get, writable, type Readable } from "svelte/store";
 import { describe, expect, it, vi } from "vitest";
 import { dimKeyFromRow } from "../../../dashboards/pivot/pivot-click-selection";
@@ -41,30 +42,10 @@ vi.mock(
   }),
 );
 
-/** Build a V1Expression with a single IN clause: dimensionName IN (values) */
-function makeInFilter(dimensionName: string, values: string[]): V1Expression {
-  return {
-    cond: {
-      op: V1Operation.OPERATION_AND,
-      exprs: [
-        {
-          cond: {
-            op: V1Operation.OPERATION_IN,
-            exprs: [
-              { ident: dimensionName },
-              ...values.map((v) => ({ val: v })),
-            ],
-          },
-        },
-      ],
-    },
-  };
-}
-
 /** Build a PivotFilter with no time range (sufficient for these tests). */
 function makePivotFilter(dimensionName: string, values: string[]): PivotFilter {
   return {
-    filters: makeInFilter(dimensionName, values),
+    filters: createAndExpression([createInExpression(dimensionName, values)]),
     timeRange: { start: undefined, end: undefined },
   };
 }

From 7bc00963ed71f98d3f2ef211696bf4e5544d3744 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 18:55:20 +0530
Subject: [PATCH 21/53] show null dimension values in flat table

---
 .../src/features/dashboards/pivot/pivot-column-definition.ts  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web-common/src/features/dashboards/pivot/pivot-column-definition.ts b/web-common/src/features/dashboards/pivot/pivot-column-definition.ts
index b7413b99218..b4255bb40c7 100644
--- a/web-common/src/features/dashboards/pivot/pivot-column-definition.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-column-definition.ts
@@ -320,12 +320,14 @@ function getFlatColumnDef(
         accessorFn: (row) => row[d.name],
         header: d.label || d.name,
         cell: ({ getValue }) => {
-          return formatDimensionValue(
+          const value = formatDimensionValue(
             getValue() as string,
             i,
             config.time,
             rowDimensionNames,
           );
+          if (value === null) return "null";
+          return value;
         },
       };
     },

From af3c1b3fb7d48186b34eb847460bcba670adcb2c Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 19:08:19 +0530
Subject: [PATCH 22/53] support filtering from null cell

---
 .../pivot/pivot-click-to-filter.spec.ts       |  74 ++++++++++-
 .../components/pivot/pivot-click-to-filter.ts |  14 ++-
 .../features/canvas/stores/filter-state.ts    |   4 +-
 .../dashboards/pivot/pivot-click-selection.ts |   4 +-
 .../pivot/pivot-null-filters.spec.ts          | 117 ++++++++++++++++++
 .../dashboards/pivot/pivot-row-selection.ts   |   7 +-
 .../features/dashboards/pivot/pivot-utils.ts  |   3 +-
 .../src/features/dashboards/pivot/types.ts    |   2 +-
 8 files changed, 209 insertions(+), 16 deletions(-)
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-null-filters.spec.ts

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 2597a49fa24..09903d4b77b 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -43,7 +43,10 @@ vi.mock(
 );
 
 /** Build a PivotFilter with no time range (sufficient for these tests). */
-function makePivotFilter(dimensionName: string, values: string[]): PivotFilter {
+function makePivotFilter(
+  dimensionName: string,
+  values: (string | null)[],
+): PivotFilter {
   return {
     filters: createAndExpression([createInExpression(dimensionName, values)]),
     timeRange: { start: undefined, end: undefined },
@@ -385,6 +388,75 @@ describe("pivot-click-to-filter: nested table multi-select", () => {
   });
 });
 
+describe("pivot-click-to-filter: null dimension values", () => {
+  const nullData: PivotDataRow[] = [
+    { country: null, revenue: 100 },
+    { country: "US", revenue: 200 },
+  ];
+
+  const nullRow = nullData[0];
+  const nullDimKey = dimKeyFromRow(nullRow, ["country"]);
+
+  function setupNull() {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    // Mock getFiltersFromRow to return a filter with null value
+    vi.mocked(getFiltersFromRow).mockImplementation((_config, rowData) => {
+      const value = rowData["country"];
+      return makePivotFilter("country", [value as string]);
+    });
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(emptyConfig()) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(nullData),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    return { result, filterClass, selfFilteredDimensions };
+  }
+
+  it("should select a cell with a null dimension value", () => {
+    const { result, filterClass } = setupNull();
+
+    // Click on a row where country is null
+    result.handleCellClickToFilter("0", "total", false, nullRow);
+
+    const sel = get(result.clickSelection);
+    expect(sel.isCellSelected(nullDimKey, "total")).toBe(true);
+    expect(sel.cellSelections.size).toBe(1);
+
+    // The filter should have been applied
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
+      "country",
+      [null],
+    );
+
+    result.destroy();
+  });
+
+  it("should deselect a cell with a null dimension value", () => {
+    const { result, filterClass } = setupNull();
+
+    // Select then deselect
+    result.handleCellClickToFilter("0", "total", false, nullRow);
+    result.handleCellClickToFilter("0", "total", false, nullRow);
+
+    const sel = get(result.clickSelection);
+    expect(sel.isCellSelected(nullDimKey, "total")).toBe(false);
+    expect(sel.cellSelections.size).toBe(0);
+
+    // Toggle should have been called to remove the null value
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalled();
+
+    result.destroy();
+  });
+});
+
 describe("pivot-click-to-filter: selection survives sorting", () => {
   it("should identify same row after data order changes (simulated sort)", () => {
     const { fm } = stubFilterManagerWithClass("mv1");
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index fa90c3dc2d7..db2dcba910c 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -159,11 +159,13 @@ export function createPivotClickToFilter(
   function captureDimValues(
     rowData: PivotDataRow,
     rowDimensionNames: string[],
-  ): Record<string, string> {
-    const result: Record<string, string> = {};
+  ): Record<string, string | null> {
+    const result: Record<string, string | null> = {};
     for (const dim of rowDimensionNames) {
       const val = rowData[dim];
-      if (typeof val === "string" || typeof val === "number") {
+      if (val === null || val === undefined) {
+        result[dim] = null;
+      } else if (typeof val === "string" || typeof val === "number") {
         result[dim] = String(val);
       }
     }
@@ -176,10 +178,10 @@ export function createPivotClickToFilter(
     remainingRowHeaders: Map<string, SelectionEntry>,
     remainingCells: Map<string, SelectionEntry>,
     remainingColHeaders: Set<string>,
-  ): Map<string, Set<string>> {
-    const retainedValues = new Map<string, Set<string>>();
+  ): Map<string, Set<string | null>> {
+    const retainedValues = new Map<string, Set<string | null>>();
 
-    const addRetainedValue = (dimensionName: string, value: string) => {
+    const addRetainedValue = (dimensionName: string, value: string | null) => {
       let valueSet = retainedValues.get(dimensionName);
       if (!valueSet) {
         valueSet = new Set();
diff --git a/web-common/src/features/canvas/stores/filter-state.ts b/web-common/src/features/canvas/stores/filter-state.ts
index ab18b1dd6d8..e13b9382064 100644
--- a/web-common/src/features/canvas/stores/filter-state.ts
+++ b/web-common/src/features/canvas/stores/filter-state.ts
@@ -264,7 +264,7 @@ export class FilterState {
 
   toggleDimensionValueSelections = (
     dimensionName: string,
-    dimensionValues: string[],
+    dimensionValues: (string | null)[],
     keepPillVisible?: boolean,
     isExclusiveFilter?: boolean,
     exclude: boolean = false,
@@ -337,7 +337,7 @@ export class FilterState {
    */
   addDimensionValueSelections = (
     dimensionName: string,
-    dimensionValues: string[],
+    dimensionValues: (string | null)[],
   ) => {
     const {
       dimensionFilter: wf,
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 51721ba235a..1921c500e1d 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -33,8 +33,8 @@ export function columnHeaderKey(dimensionPath: Record<string, string>): string {
 
 export interface SelectionEntry {
   dimKey: string;
-  /** Row dimension name→value pairs captured at click time */
-  dimValues: Record<string, string>;
+  /** Row dimension name→value pairs captured at click time; null for null dimension values */
+  dimValues: Record<string, string | null>;
   columnId: string;
   /** For flat-table dimension cell clicks: the index into rowDimensionNames */
   dimClickIndex?: number;
diff --git a/web-common/src/features/dashboards/pivot/pivot-null-filters.spec.ts b/web-common/src/features/dashboards/pivot/pivot-null-filters.spec.ts
new file mode 100644
index 00000000000..3fff66e335e
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-null-filters.spec.ts
@@ -0,0 +1,117 @@
+import {
+  createAndExpression,
+  createInExpression,
+} from "@rilldata/web-common/features/dashboards/stores/filter-utils";
+import type { PivotDataStoreConfig } from "@rilldata/web-common/features/dashboards/pivot/types";
+import { V1Operation } from "@rilldata/web-common/runtime-client";
+import { describe, expect, it } from "vitest";
+import {
+  extractDimensionFiltersFromExpression,
+  getFiltersForRowData,
+} from "./pivot-row-selection";
+import { getFiltersFromRow } from "./pivot-utils";
+
+/** Minimal config for testing row-dimension filter generation. */
+function makeConfig(
+  rowDimensionNames: string[],
+  isFlat = true,
+): PivotDataStoreConfig {
+  return {
+    rowDimensionNames,
+    colDimensionNames: [],
+    measureNames: ["revenue"],
+    isFlat,
+    time: {
+      timeDimension: "",
+      timeStart: undefined,
+      timeEnd: undefined,
+    },
+    whereFilter: undefined,
+  } as unknown as PivotDataStoreConfig;
+}
+
+describe("getFiltersFromRow: null dimension values", () => {
+  it("should produce a filter for a null dimension value", () => {
+    const config = makeConfig(["country"]);
+    const rowData = { country: null, revenue: 100 };
+
+    const result = getFiltersFromRow(config, rowData, "country");
+
+    // The filter should exist and contain an IN expression for null
+    expect(result.filters).toBeDefined();
+    expect(result.filters?.cond?.op).toBe(V1Operation.OPERATION_AND);
+
+    const exprs = result.filters?.cond?.exprs ?? [];
+    const countryExpr = exprs.find(
+      (e) => e.cond?.exprs?.[0]?.ident === "country",
+    );
+    expect(countryExpr).toBeDefined();
+    expect(countryExpr?.cond?.op).toBe(V1Operation.OPERATION_IN);
+    expect(countryExpr?.cond?.exprs?.[1]?.val).toBeNull();
+  });
+
+  it("should produce filters for a mix of null and non-null dimensions", () => {
+    const config = makeConfig(["country", "city"]);
+    const rowData = { country: "US", city: null, revenue: 100 };
+
+    const result = getFiltersFromRow(config, rowData, "city");
+
+    expect(result.filters).toBeDefined();
+    const exprs = result.filters?.cond?.exprs ?? [];
+
+    const countryExpr = exprs.find(
+      (e) => e.cond?.exprs?.[0]?.ident === "country",
+    );
+    const cityExpr = exprs.find((e) => e.cond?.exprs?.[0]?.ident === "city");
+
+    expect(countryExpr).toBeDefined();
+    expect(countryExpr?.cond?.exprs?.[1]?.val).toBe("US");
+
+    expect(cityExpr).toBeDefined();
+    expect(cityExpr?.cond?.exprs?.[1]?.val).toBeNull();
+  });
+});
+
+describe("getFiltersForRowData: null dimension values", () => {
+  it("should produce a filter for a null dimension value", () => {
+    const config = makeConfig(["country"]);
+    const rowData = { country: null, revenue: 100 };
+
+    const result = getFiltersForRowData(config, rowData);
+
+    expect(result.filters).toBeDefined();
+    expect(result.filters?.cond?.op).toBe(V1Operation.OPERATION_AND);
+
+    const exprs = result.filters?.cond?.exprs ?? [];
+    const countryExpr = exprs.find(
+      (e) => e.cond?.exprs?.[0]?.ident === "country",
+    );
+    expect(countryExpr).toBeDefined();
+    expect(countryExpr?.cond?.exprs?.[1]?.val).toBeNull();
+  });
+});
+
+describe("extractDimensionFiltersFromExpression: null values", () => {
+  it("should include null values when extracting dimension filters", () => {
+    const expr = createAndExpression([createInExpression("country", [null])]);
+
+    const result = extractDimensionFiltersFromExpression(expr);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].dimensionName).toBe("country");
+    expect(result[0].values).toContain(null);
+  });
+
+  it("should include both null and string values", () => {
+    const expr = createAndExpression([
+      createInExpression("country", ["US", null]),
+    ]);
+
+    const result = extractDimensionFiltersFromExpression(expr);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].dimensionName).toBe("country");
+    expect(result[0].values).toContain("US");
+    expect(result[0].values).toContain(null);
+  });
+});
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index dbcbc4de558..9a006ff463b 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -112,7 +112,8 @@ export function getFiltersForRowData(
   const rowNestFilters = rowDimensionNames
     .map((dim) => {
       const value = rowData[dim];
-      if (value === undefined || value === null) return null;
+      if (value === undefined) return null;
+      if (value === null) return createInExpression(dim, [null]);
       return createInExpression(dim, [String(value)]);
     })
     .filter((f): f is V1Expression => {
@@ -313,7 +314,7 @@ export function getFiltersForColumnHeader(
 
 export interface ExtractedFilter {
   dimensionName: string;
-  values: string[];
+  values: (string | null)[];
 }
 
 /**
@@ -335,7 +336,7 @@ export function extractDimensionFiltersFromExpression(
       const values = expr?.cond?.exprs
         ?.slice(1)
         .map((e) => e.val)
-        .filter((val): val is string => val !== undefined && val !== null);
+        .filter((val): val is string | null => val !== undefined);
 
       if (values?.length) {
         result.push({ dimensionName: ident, values });
diff --git a/web-common/src/features/dashboards/pivot/pivot-utils.ts b/web-common/src/features/dashboards/pivot/pivot-utils.ts
index f92148feb7f..332179468bf 100644
--- a/web-common/src/features/dashboards/pivot/pivot-utils.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-utils.ts
@@ -674,7 +674,8 @@ export function getFiltersFromRow(
   const rowNestFilters = dimNames
     .map((dim) => {
       const value = rowData[dim];
-      if (value === undefined || value === null) return null;
+      if (value === undefined) return null;
+      if (value === null) return createInExpression(dim, [null]);
       return createInExpression(dim, [String(value)]);
     })
     .filter((f): f is V1Expression => {
diff --git a/web-common/src/features/dashboards/pivot/types.ts b/web-common/src/features/dashboards/pivot/types.ts
index efb791e0d33..2e8b8528567 100644
--- a/web-common/src/features/dashboards/pivot/types.ts
+++ b/web-common/src/features/dashboards/pivot/types.ts
@@ -68,7 +68,7 @@ export type PivotTableMode = "flat" | "nest";
 export interface PivotDataRow {
   subRows?: PivotDataRow[];
 
-  [key: string]: string | number | PivotDataRow[] | undefined;
+  [key: string]: string | number | null | PivotDataRow[] | undefined;
 }
 
 export interface TimeFilters {

From 975b7b502fc4624cce573ad556c2906a64f0f350 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 19:24:38 +0530
Subject: [PATCH 23/53] collapse selected cells border

---
 .../src/features/dashboards/pivot/FlatTable.svelte  | 13 ++++++++++---
 .../features/dashboards/pivot/NestedTable.svelte    | 13 ++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index 2703e7653a0..3a775a1d1f7 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -384,10 +384,17 @@
     @apply bg-primary-50;
   }
 
-  .selected-cell.cell {
-    @apply bg-primary-50 ring-1 ring-inset ring-primary-400;
+  td.selected-cell.cell {
+    @apply bg-primary-50 relative z-[1];
+    box-shadow: 0 0 0 1px theme(colors.primary.400);
   }
-  .selected-cell.cell:hover {
+  /* The totals row is z-20 and covers the outset top shadow; use an inset top border instead */
+  .with-measure tbody > tr:nth-of-type(3) > td.selected-cell.cell {
+    box-shadow:
+      0 0 0 1px theme(colors.primary.400),
+      inset 0 1px 0 0 theme(colors.primary.400);
+  }
+  td.selected-cell.cell:hover {
     @apply bg-primary-100;
   }
 
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index b1c881b22d4..22c71ed40e4 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -689,10 +689,17 @@
     @apply bg-primary-50;
   }
 
-  .selected-cell.cell {
-    @apply bg-primary-50 ring-1 ring-inset ring-primary-400;
+  td.selected-cell.cell {
+    @apply bg-primary-50 relative z-[1];
+    box-shadow: 0 0 0 1px theme(colors.primary.400);
   }
-  .selected-cell.cell:hover {
+  /* The totals row is z-20 and covers the outset top shadow; use an inset top border instead */
+  .with-totals-row tbody > tr:nth-of-type(3) > td.selected-cell.cell {
+    box-shadow:
+      0 0 0 1px theme(colors.primary.400),
+      inset 0 1px 0 0 theme(colors.primary.400);
+  }
+  td.selected-cell.cell:hover {
     @apply bg-primary-100;
   }
 

From ce26a6c69a776089d23cca29264267db2bf01cec Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 19:29:38 +0530
Subject: [PATCH 24/53] clear active component when changing table type in
 canvas

---
 web-common/src/features/canvas/components/pivot/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web-common/src/features/canvas/components/pivot/index.ts b/web-common/src/features/canvas/components/pivot/index.ts
index 6df96d8e767..9ac4b0a5ddb 100644
--- a/web-common/src/features/canvas/components/pivot/index.ts
+++ b/web-common/src/features/canvas/components/pivot/index.ts
@@ -194,6 +194,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));

From a75eb23dd5d9259273020226e1dcd217b06ea832 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 19:34:01 +0530
Subject: [PATCH 25/53] fix selected cell styling adjacent to row header

---
 .../dashboards/pivot/NestedTable.svelte        | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 22c71ed40e4..44830258bd1 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -693,12 +693,28 @@
     @apply bg-primary-50 relative z-[1];
     box-shadow: 0 0 0 1px theme(colors.primary.400);
   }
-  /* The totals row is z-20 and covers the outset top shadow; use an inset top border instead */
+  /* The sticky row header (z-10) covers the outset left shadow; add inset left border */
+  td.cell-selected-row-header + td.selected-cell.cell {
+    box-shadow:
+      0 0 0 1px theme(colors.primary.400),
+      inset 1px 0 0 0 theme(colors.primary.400);
+  }
+  /* The totals row is z-20 and covers the outset top shadow; add inset top border */
   .with-totals-row tbody > tr:nth-of-type(3) > td.selected-cell.cell {
     box-shadow:
       0 0 0 1px theme(colors.primary.400),
       inset 0 1px 0 0 theme(colors.primary.400);
   }
+  /* Both: right after totals AND next to sticky row header */
+  .with-totals-row
+    tbody
+    > tr:nth-of-type(3)
+    > td.cell-selected-row-header
+    + td.selected-cell.cell {
+    box-shadow:
+      0 0 0 1px theme(colors.primary.400),
+      inset 1px 1px 0 0 theme(colors.primary.400);
+  }
   td.selected-cell.cell:hover {
     @apply bg-primary-100;
   }

From e0f1cb05cce874690f4e10389b04194e4361c16e Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 20:09:44 +0530
Subject: [PATCH 26/53] higlight parent header for row and column dimension
 selected header cell

---
 .../components/pivot/pivot-click-to-filter.ts | 47 +++++++++++++----
 .../dashboards/pivot/NestedTable.svelte       | 52 ++++++++++++++++++-
 .../dashboards/pivot/pivot-click-selection.ts | 23 ++++++++
 .../dashboards/pivot/pivot-row-selection.ts   | 26 ++++++++--
 4 files changed, 132 insertions(+), 16 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index db2dcba910c..59c00d97067 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -25,10 +25,15 @@ import {
   extractDimensionFiltersFromExpression,
   extractSelectionDimensionFilters,
   getActiveDimensionNames,
+  getDimensionValuesForRow,
   getFiltersForColumnHeader,
   getFiltersForRowData,
+  getFiltersForRowHeader,
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
-import { getFiltersFromRow } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+import {
+  getFiltersForCell,
+  getFiltersFromRow,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
 import type {
   PivotDataRow,
   PivotDataStore,
@@ -416,7 +421,7 @@ export function createPivotClickToFilter(
   // --- Click handlers ---
 
   function handleCellClickToFilter(
-    _rowId: string,
+    rowId: string,
     columnId: string,
     isRowHeader: boolean,
     rowData: PivotDataRow,
@@ -426,9 +431,19 @@ export function createPivotClickToFilter(
     if (!$config || !$data?.data) return;
 
     const dk = dimKeyFromRow(rowData, $config.rowDimensionNames);
-    const dimValues = captureDimValues(rowData, $config.rowDimensionNames);
     const $clickSelection = get(clickSelectionStore);
 
+    // In nested mode, row data stores all values under rowDimensions[0],
+    // so we must use positional rowId navigation to get correct dim→value pairs.
+    const isNested = !$config.isFlat;
+    const dimValues = isNested
+      ? Object.fromEntries(
+          getDimensionValuesForRow($config, rowId, $data.data).map(
+            ({ dimensionName, value }) => [dimensionName, value],
+          ),
+        )
+      : captureDimValues(rowData, $config.rowDimensionNames);
+
     // Determine if this click is deselecting a previously selected element
     const isDeselect = isRowHeader
       ? $clickSelection.isRowHeaderSelected(dk)
@@ -443,14 +458,24 @@ export function createPivotClickToFilter(
     const upToDimensionIndex = flatDimIdx >= 0 ? flatDimIdx : undefined;
 
     const cellFilters = isRowHeader
-      ? getFiltersForRowData($config, rowData)
-      : getFiltersFromRow(
-          $config,
-          rowData,
-          columnId,
-          $data.columnDimensionAxes ?? {},
-          upToDimensionIndex,
-        );
+      ? isNested
+        ? getFiltersForRowHeader($config, rowId, $data.data)
+        : getFiltersForRowData($config, rowData)
+      : isNested
+        ? getFiltersForCell(
+            $config,
+            rowId,
+            columnId,
+            $data.columnDimensionAxes ?? {},
+            $data.data,
+          )
+        : getFiltersFromRow(
+            $config,
+            rowData,
+            columnId,
+            $data.columnDimensionAxes ?? {},
+            upToDimensionIndex,
+          );
 
     if (!cellFilters.filters) return;
 
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 44830258bd1..b6e8d1ebc77 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -104,6 +104,24 @@
     return indices;
   })();
 
+  // Compute TanStack row IDs that are ancestors of any row-header-selected row.
+  // Used to highlight parent row headers when a child row header is selected.
+  $: ancestorRowIdsOfSelectedHeaders = (() => {
+    if (!clickSelection?.rowHeaderSelections?.size) return new Set<string>();
+    const ancestorIds = new Set<string>();
+    for (const row of rows) {
+      const dk = dimKeyFromRow(row.original, rowDimensionNames);
+      if (clickSelection.isRowHeaderSelected(dk)) {
+        let id = row.id;
+        while (id.includes(".")) {
+          id = id.substring(0, id.lastIndexOf("."));
+          ancestorIds.add(id);
+        }
+      }
+    }
+    return ancestorIds;
+  })();
+
   // Check if a header (by its leaf column range) contains any cell-selected columns
   function isInCellSelectedColRange(
     colStart: number,
@@ -425,6 +443,14 @@
             colStart,
             header.colSpan,
           )}
+          {@const isAncestorOfSelected =
+            isColDimHeader &&
+            !isSelfSelected &&
+            !!dimMeta.dimensionPath &&
+            (clickSelection?.isAncestorOfSelectedColumnHeader(
+              dimMeta.dimensionPath,
+            ) ??
+              false)}
 
           <th
             colSpan={header.colSpan}
@@ -433,6 +459,7 @@
             class:selected-col-header={isSelfSelected}
             class:in-selected-col-range={inSelectedRange}
             class:cell-selected-col-header={inCellSelectedCol}
+            class:ancestor-selected-col-header={isAncestorOfSelected}
             onmouseenter={() => {
               if (isColDimHeader) {
                 hoveredColRange = {
@@ -491,16 +518,24 @@
       {@const rowData = rows[row.index].original}
       {@const dk = dimKeyFromRow(rowData, rowDimensionNames)}
       {@const isTotalsRow = !!totalsRow && rowId === "0"}
-      {@const isSelected = rowSelectionState?.isRowSelected(rowData) ?? false}
+      {@const isSelected =
+        rowSelectionState?.isRowSelected(rowData, rows[row.index].depth) ??
+        false}
       {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isRowHeaderSelected =
         clickSelection?.isRowHeaderSelected(dk) ?? false}
       {@const hasClickedCell =
         clickSelection?.hasSelectedCellInRow(dk) ?? false}
+      {@const isAncestorOfSelectedHeader =
+        ancestorRowIdsOfSelectedHeaders.has(rowId)}
       <tr
         class:show-more-row={isShowMoreRow(rows[row.index])}
         class:selected-row={isSelected && isRowHeaderSelected}
-        class:dimmed-row={hasSelection && !isSelected && !hasClickedCell}
+        class:dimmed-row={hasSelection &&
+          !isSelected &&
+          !hasClickedCell &&
+          !isAncestorOfSelectedHeader}
+        class:ancestor-of-selected-row={isAncestorOfSelectedHeader}
       >
         {#each cells as cell, i (cell.id)}
           {@const result =
@@ -784,4 +819,17 @@
   .with-row-dimension tr:hover > td.cell-selected-row-header:first-of-type {
     @apply bg-primary-100;
   }
+
+  /* Parent row header highlight when a child row header is selected */
+  .with-row-dimension .ancestor-of-selected-row > td:first-of-type {
+    @apply bg-primary-50;
+  }
+  .with-row-dimension .ancestor-of-selected-row:hover > td:first-of-type {
+    @apply bg-primary-100;
+  }
+
+  /* Parent column header highlight when a child column header is selected */
+  .ancestor-selected-col-header .header-cell {
+    @apply bg-primary-50;
+  }
 </style>
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 1921c500e1d..6bf73fe09bc 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -67,6 +67,10 @@ export interface PivotClickSelectionState {
    * was clicked (measure click, row-header click, or no selection).
    */
   getClickedDimensionIndex: (dimKey: string) => number;
+  /** Check if a column header is an ancestor of any selected column header */
+  isAncestorOfSelectedColumnHeader: (
+    dimensionPath: Record<string, string>,
+  ) => boolean;
 }
 
 export function createEmptyClickSelectionState(): PivotClickSelectionState {
@@ -81,6 +85,7 @@ export function createEmptyClickSelectionState(): PivotClickSelectionState {
     isColumnHeaderSelected: () => false,
     selectedCellColumnIds: new Set(),
     getClickedDimensionIndex: () => -1,
+    isAncestorOfSelectedColumnHeader: () => false,
   };
 }
 
@@ -99,6 +104,13 @@ export function buildClickSelection(
     columnsWithSelectedCells.add(entry.columnId);
   }
 
+  // Pre-parse selected column header paths for ancestor checks
+  const parsedColHeaders: Record<string, string>[] = [];
+  for (const key of colHeaders) {
+    const entries: [string, string][] = JSON.parse(key);
+    parsedColHeaders.push(Object.fromEntries(entries));
+  }
+
   // Build a map of dimKey → dimClickIndex for quick lookup
   const dimClickIndexByKey = new Map<string, number>();
   for (const entry of cells.values()) {
@@ -118,5 +130,16 @@ export function buildClickSelection(
     isColumnHeaderSelected: (path) => colHeaders.has(columnHeaderKey(path)),
     selectedCellColumnIds: columnsWithSelectedCells,
     getClickedDimensionIndex: (dk) => dimClickIndexByKey.get(dk) ?? -1,
+    isAncestorOfSelectedColumnHeader: (path) => {
+      if (parsedColHeaders.length === 0) return false;
+      const pathEntries = Object.entries(path);
+      const pathSize = pathEntries.length;
+      return parsedColHeaders.some((selectedPath) => {
+        // Must be a strict superset (selected has more entries)
+        if (Object.keys(selectedPath).length <= pathSize) return false;
+        // Every entry in this header's path must exist in the selected path
+        return pathEntries.every(([k, v]) => selectedPath[k] === v);
+      });
+    },
   };
 }
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 9a006ff463b..3dde1ba5617 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -26,8 +26,12 @@ import type {
 export interface PivotRowSelectionState {
   /** True if at least one row dimension has active filter selections */
   hasActiveSelection: boolean;
-  /** Check if a row is selected based on current filters (reads values from row data directly) */
-  isRowSelected: (rowData: PivotDataRow) => boolean;
+  /**
+   * Check if a row is selected based on current filters.
+   * For nested tables, pass the row's depth so the value under
+   * rowDimensions[0] is checked against the correct dimension filter.
+   */
+  isRowSelected: (rowData: PivotDataRow, depth?: number) => boolean;
   /** Highest row dimension index with an active selection filter, or -1 */
   maxFilteredDimensionIndex: number;
 }
@@ -209,7 +213,23 @@ export function computePivotRowSelection(
   return {
     hasActiveSelection: true,
     maxFilteredDimensionIndex,
-    isRowSelected: (rowData: PivotDataRow) => {
+    isRowSelected: (rowData: PivotDataRow, depth?: number) => {
+      // In nested mode, all rows store their value under rowDimensions[0]
+      // but the actual dimension is rowDimensionNames[depth]. When depth
+      // is provided, use it for correct dimension mapping.
+      if (depth !== undefined && !config.isFlat) {
+        const firstDim = config.rowDimensionNames[0];
+        const actualDim = config.rowDimensionNames[depth];
+        const value = rowData[firstDim];
+        if (value === undefined) return false;
+        const strValue = String(value ?? "");
+        if (!strValue) return false;
+
+        const selectedSet = dimensionFilters.get(actualDim);
+        if (!selectedSet) return true; // dimension not filtered; doesn't block
+        return selectedSet.has(strValue);
+      }
+
       const rowDimValues = getDimensionValuesFromRowData(config, rowData);
       if (rowDimValues.length === 0) return false;
 

From e06b427a93dd247d10f3895d5205127b701e4695 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 20:13:09 +0530
Subject: [PATCH 27/53] highlight parent row header on child row cell click

---
 .../src/features/dashboards/pivot/NestedTable.svelte  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index b6e8d1ebc77..5623bbe4faa 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -104,14 +104,17 @@
     return indices;
   })();
 
-  // Compute TanStack row IDs that are ancestors of any row-header-selected row.
-  // Used to highlight parent row headers when a child row header is selected.
+  // Compute TanStack row IDs that are ancestors of any selected child row
+  // (row header click or cell click). Used to highlight parent row headers.
   $: ancestorRowIdsOfSelectedHeaders = (() => {
-    if (!clickSelection?.rowHeaderSelections?.size) return new Set<string>();
+    if (!clickSelection?.hasAnySelection) return new Set<string>();
     const ancestorIds = new Set<string>();
     for (const row of rows) {
       const dk = dimKeyFromRow(row.original, rowDimensionNames);
-      if (clickSelection.isRowHeaderSelected(dk)) {
+      if (
+        clickSelection.isRowHeaderSelected(dk) ||
+        clickSelection.hasSelectedCellInRow(dk)
+      ) {
         let id = row.id;
         while (id.includes(".")) {
           id = id.substring(0, id.lastIndexOf("."));

From 97d39d6bd17b38b3d7ef0e131950ac00357a922d Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 20:27:49 +0530
Subject: [PATCH 28/53] fix tests

---
 .../components/pivot/pivot-click-to-filter.spec.ts   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 09903d4b77b..869f9e1a9ac 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -1,4 +1,7 @@
-import { getFiltersFromRow } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
+import {
+  getFiltersForCell,
+  getFiltersFromRow,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
 import type {
   PivotDataRow,
   PivotDataStore,
@@ -26,6 +29,7 @@ vi.mock(
       "@rilldata/web-common/features/dashboards/pivot/pivot-utils",
     )),
     getFiltersFromRow: vi.fn(() => ({ filters: undefined, timeRange: null })),
+    getFiltersForCell: vi.fn(() => ({ filters: undefined, timeRange: null })),
   }),
 );
 
@@ -39,6 +43,10 @@ vi.mock(
       filters: undefined,
       timeRange: null,
     })),
+    getFiltersForRowHeader: vi.fn(() => ({
+      filters: undefined,
+      timeRange: null,
+    })),
   }),
 );
 
@@ -352,7 +360,7 @@ describe("pivot-click-to-filter: nested table multi-select", () => {
   function setupNested() {
     const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
-    vi.mocked(getFiltersFromRow).mockImplementation(() =>
+    vi.mocked(getFiltersForCell).mockImplementation(() =>
       makePivotFilter("country", ["US"]),
     );
 

From 4373ff8911e33eefbb3270a313adf3198ec90819 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 20:48:42 +0530
Subject: [PATCH 29/53] exclusive selection of column headers based on depth

---
 .../pivot/pivot-click-to-filter.spec.ts       | 238 +++++++++++++++++-
 .../components/pivot/pivot-click-to-filter.ts |  79 +++++-
 2 files changed, 312 insertions(+), 5 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 869f9e1a9ac..b2c13fb506a 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -1,3 +1,4 @@
+import { getFiltersForColumnHeader } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
 import {
   getFiltersForCell,
   getFiltersFromRow,
@@ -15,7 +16,10 @@ import {
 import type { V1Expression } from "@rilldata/web-common/runtime-client";
 import { get, writable, type Readable } from "svelte/store";
 import { describe, expect, it, vi } from "vitest";
-import { dimKeyFromRow } from "../../../dashboards/pivot/pivot-click-selection";
+import {
+  columnHeaderKey,
+  dimKeyFromRow,
+} from "../../../dashboards/pivot/pivot-click-selection";
 import type { FilterManager } from "../../stores/filter-manager";
 import { createPivotClickToFilter } from "./pivot-click-to-filter";
 
@@ -47,6 +51,10 @@ vi.mock(
       filters: undefined,
       timeRange: null,
     })),
+    getFiltersForColumnHeader: vi.fn(() => ({
+      filters: undefined,
+      timeRange: null,
+    })),
   }),
 );
 
@@ -61,6 +69,18 @@ function makePivotFilter(
   };
 }
 
+/** Build a PivotFilter with multiple dimensions (for column header tests). */
+function makeMultiDimPivotFilter(
+  dims: Array<{ name: string; values: (string | null)[] }>,
+): PivotFilter {
+  return {
+    filters: createAndExpression(
+      dims.map(({ name, values }) => createInExpression(name, values)),
+    ),
+    timeRange: { start: undefined, end: undefined },
+  };
+}
+
 /**
  * Stub for FilterManager. The factory only accesses `metricsViewFilters`
  * (via `.get`/`.set`), `checkTemporaryFilter`, and `applyFiltersToUrl`.
@@ -122,6 +142,21 @@ function nestedConfig() {
   } as unknown as PivotDataStoreConfig;
 }
 
+function nestedConfigWithColDims() {
+  return {
+    rowDimensionNames: ["country"],
+    colDimensionNames: ["region", "category", "product"],
+    measureNames: ["revenue"],
+    isFlat: false,
+    whereFilter: createAndExpression([]),
+    time: {
+      timeDimension: "",
+      timeStart: undefined,
+      timeEnd: undefined,
+    },
+  } as unknown as PivotDataStoreConfig;
+}
+
 /** Build a PivotDataStore with the given data rows and optional axes. */
 function stubPivotDataStore(
   data: PivotDataRow[],
@@ -530,3 +565,204 @@ describe("pivot-click-to-filter: selection survives sorting", () => {
     result.destroy();
   });
 });
+
+describe("pivot-click-to-filter: column header level selection constraint", () => {
+  // Level 0 (1 key): { region: "NA" }
+  // Level 1 (2 keys): { region: "NA", category: "Electronics" }
+  // Level 2 (3 keys): { region: "NA", category: "Electronics", product: "Laptop" }
+
+  function setupColumnHeaders() {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    vi.mocked(getFiltersForColumnHeader).mockImplementation(
+      (_config, dimensionPath) => {
+        const dims = Object.entries(dimensionPath).map(([name, value]) => ({
+          name,
+          values: [value],
+        }));
+        return makeMultiDimPivotFilter(dims);
+      },
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(
+          nestedConfigWithColDims(),
+        ) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore([]),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    return { result, filterClass, selfFilteredDimensions, fm };
+  }
+
+  it("should allow multiple selections at the same level", () => {
+    const { result } = setupColumnHeaders();
+
+    // Select two different level-0 headers
+    result.handleColumnHeaderClick({ region: "NA" });
+    result.handleColumnHeaderClick({ region: "EU" });
+
+    const sel = get(result.clickSelection);
+    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
+    expect(sel.isColumnHeaderSelected({ region: "EU" })).toBe(true);
+    expect(sel.columnHeaderSelections.size).toBe(2);
+
+    result.destroy();
+  });
+
+  it("should replace column header selections when clicking a different level", () => {
+    const { result, filterClass } = setupColumnHeaders();
+
+    // Select a level-0 header
+    result.handleColumnHeaderClick({ region: "NA" });
+
+    let sel = get(result.clickSelection);
+    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
+    expect(sel.columnHeaderSelections.size).toBe(1);
+
+    // Now click a level-1 header (different level); should replace
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+
+    sel = get(result.clickSelection);
+    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(false);
+    expect(
+      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
+    ).toBe(true);
+    expect(sel.columnHeaderSelections.size).toBe(1);
+
+    // New values should have been added
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
+      "category",
+      ["Electronics"],
+    );
+
+    result.destroy();
+  });
+
+  it("should remove orphaned values when switching to a level with different dimensions", () => {
+    const { result, filterClass } = setupColumnHeaders();
+
+    // Select level-0: { region: "NA" }
+    result.handleColumnHeaderClick({ region: "NA" });
+
+    // Switch to level-0 with different value, then switch to level-1
+    // First, let's select { region: "EU" } at level 0 (same level, accumulates)
+    result.handleColumnHeaderClick({ region: "EU" });
+
+    // Now switch to level-1: { region: "NA", category: "Electronics" }
+    // "EU" is no longer needed (only "NA" is in the new selection)
+    filterClass.toggleDimensionValueSelections.mockClear();
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+
+    // "EU" should have been toggled off as orphaned
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "region",
+      ["EU"],
+      false,
+      false,
+    );
+
+    result.destroy();
+  });
+
+  it("should replace multiple same-level selections when switching levels", () => {
+    const { result } = setupColumnHeaders();
+
+    // Select two level-0 headers
+    result.handleColumnHeaderClick({ region: "NA" });
+    result.handleColumnHeaderClick({ region: "EU" });
+
+    let sel = get(result.clickSelection);
+    expect(sel.columnHeaderSelections.size).toBe(2);
+
+    // Now click a level-1 header; both level-0 selections should be removed
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+
+    sel = get(result.clickSelection);
+    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(false);
+    expect(sel.isColumnHeaderSelected({ region: "EU" })).toBe(false);
+    expect(
+      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
+    ).toBe(true);
+    expect(sel.columnHeaderSelections.size).toBe(1);
+
+    result.destroy();
+  });
+
+  it("should still allow deselect by re-clicking the same header", () => {
+    const { result } = setupColumnHeaders();
+
+    // Select a level-1 header
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+
+    let sel = get(result.clickSelection);
+    expect(
+      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
+    ).toBe(true);
+
+    // Click it again to deselect
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+
+    sel = get(result.clickSelection);
+    expect(
+      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
+    ).toBe(false);
+    expect(sel.columnHeaderSelections.size).toBe(0);
+
+    result.destroy();
+  });
+
+  it("should allow fresh selection at any level after all headers are deselected", () => {
+    const { result } = setupColumnHeaders();
+
+    // Select and deselect a level-0 header
+    result.handleColumnHeaderClick({ region: "NA" });
+    result.handleColumnHeaderClick({ region: "NA" });
+
+    let sel = get(result.clickSelection);
+    expect(sel.columnHeaderSelections.size).toBe(0);
+
+    // Now select a level-1 header; should work as a fresh add
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+
+    sel = get(result.clickSelection);
+    expect(
+      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
+    ).toBe(true);
+    expect(sel.columnHeaderSelections.size).toBe(1);
+
+    result.destroy();
+  });
+
+  it("should not remove shared dimension values when switching levels", () => {
+    const { result, filterClass } = setupColumnHeaders();
+
+    // Select level-0: { region: "NA" }
+    result.handleColumnHeaderClick({ region: "NA" });
+
+    // Switch to level-1: { region: "NA", category: "Electronics" }
+    // "region: NA" is shared; it should NOT be orphaned/removed
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+
+    // toggleDimensionValueSelections should NOT have been called with "region"
+    // because "NA" is still needed by the new selection
+    const toggleCalls = filterClass.toggleDimensionValueSelections.mock.calls;
+    const regionToggleCalls = toggleCalls.filter(
+      (call: unknown[]) => call[0] === "region",
+    );
+    expect(regionToggleCalls.length).toBe(0);
+
+    // addDimensionValueSelections should have been called for the new values
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
+      "category",
+      ["Electronics"],
+    );
+
+    result.destroy();
+  });
+});
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 59c00d97067..229126d6c1c 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -30,6 +30,7 @@ import {
   getFiltersForRowData,
   getFiltersForRowHeader,
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
+import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import {
   getFiltersForCell,
   getFiltersFromRow,
@@ -177,6 +178,21 @@ export function createPivotClickToFilter(
     return result;
   }
 
+  /** Determine the nesting level of a column header from its serialized key. */
+  function getColumnHeaderLevel(headerKey: string): number {
+    const entries = JSON.parse(headerKey) as [string, string][];
+    return entries.length;
+  }
+
+  /**
+   * Returns the level of currently selected column headers, or -1 if none.
+   * All selected headers are at the same level due to level-switch enforcement.
+   */
+  function getCurrentColumnHeaderLevel(colHeaders: Set<string>): number {
+    for (const key of colHeaders) return getColumnHeaderLevel(key);
+    return -1;
+  }
+
   // --- Retained value computation for safe deselect ---
 
   function collectRetainedDimensionValues(
@@ -326,8 +342,10 @@ export function createPivotClickToFilter(
   }
 
   /**
-   * Atomically replaces one cell selection with another in a single URL update.
-   * Used by flat tables where only one cell per row is allowed.
+   * Atomically replaces old selections with new ones in a single URL update.
+   * Phase 1: removes orphaned filter values from old selections.
+   * Phase 2: adds new selection's filter values.
+   * Used by flat table single-cell-per-row and column header level switching.
    */
   function applyReplacementFilters(
     oldFilters: V1Expression,
@@ -362,7 +380,7 @@ export function createPivotClickToFilter(
 
     let filterString: string | null = null;
 
-    // Phase 1: Remove orphaned values from old cell
+    // Phase 1: Remove orphaned values from old selections
     const retainedValues = collectRetainedDimensionValues(
       updatedRowHeaders,
       updatedCells,
@@ -384,7 +402,7 @@ export function createPivotClickToFilter(
       }
     });
 
-    // Phase 2: Add new cell's values
+    // Phase 2: Add new selection's values
     newDimFilters.forEach(({ dimensionName, values }) => {
       filterString = filterClass.addDimensionValueSelections(
         dimensionName,
@@ -418,6 +436,42 @@ export function createPivotClickToFilter(
     }
   }
 
+  /**
+   * Builds a combined old-filters expression from all existing column header
+   * selections, then delegates to applyReplacementFilters.
+   */
+  function applyColumnHeaderLevelSwitch(
+    oldColumnHeaders: Set<string>,
+    newDimensionPath: Record<string, string>,
+    newFilters: V1Expression,
+  ) {
+    const $config = get(pivotConfig);
+    if (!$config) return;
+
+    // Build combined old filters from all existing column header selections
+    const oldExprs: V1Expression[] = [];
+    for (const oldKey of oldColumnHeaders) {
+      const entries = JSON.parse(oldKey) as [string, string][];
+      const oldPath = Object.fromEntries(entries) as Record<string, string>;
+      const oldColFilters = getFiltersForColumnHeader($config, oldPath);
+      if (oldColFilters.filters?.cond?.exprs) {
+        oldExprs.push(...oldColFilters.filters.cond.exprs);
+      }
+    }
+
+    const oldFilters = createAndExpression(oldExprs);
+    const newKey = columnHeaderKey(newDimensionPath);
+
+    applyReplacementFilters(
+      oldFilters,
+      newFilters,
+      (_nextRowHeaders, _nextCells, nextColHeaders) => {
+        nextColHeaders.clear();
+        nextColHeaders.add(newKey);
+      },
+    );
+  }
+
   // --- Click handlers ---
 
   function handleCellClickToFilter(
@@ -580,6 +634,23 @@ export function createPivotClickToFilter(
     const colFilters = getFiltersForColumnHeader($config, dimensionPath);
     if (!colFilters.filters) return;
 
+    // Enforce single-level constraint: if clicking a header at a different
+    // level than existing selections, replace all old selections atomically.
+    const clickLevel = Object.keys(dimensionPath).length;
+    const currentLevel = getCurrentColumnHeaderLevel(
+      $clickSelection.columnHeaderSelections,
+    );
+
+    if (!isDeselect && currentLevel !== -1 && clickLevel !== currentLevel) {
+      applyColumnHeaderLevelSwitch(
+        $clickSelection.columnHeaderSelections,
+        dimensionPath,
+        colFilters.filters,
+      );
+      return;
+    }
+
+    // Same level or deselect: use existing toggle behavior
     applyDimensionFilters(
       colFilters.filters,
       isDeselect,

From 505985f44935a1791544eae4cc94e6d430187b64 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 30 Mar 2026 21:15:27 +0530
Subject: [PATCH 30/53] highlight crossection cells as muted

---
 .../dashboards/pivot/NestedTable.svelte       | 52 ++++++++++++++++++-
 .../dashboards/pivot/pivot-click-selection.ts |  5 ++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 5623bbe4faa..591c5ee95b7 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -66,6 +66,8 @@
 
   // Compute which leaf column indices are covered by selected column headers.
   // Iterates header groups to find selected headers and collects their ranges.
+  $: hasCrossSelection = clickSelection?.hasCrossSelection ?? false;
+
   $: selectedColIndices = (() => {
     if (!clickSelection?.hasAnySelection) return new Set<number>();
     const indices = new Set<number>();
@@ -533,7 +535,9 @@
         ancestorRowIdsOfSelectedHeaders.has(rowId)}
       <tr
         class:show-more-row={isShowMoreRow(rows[row.index])}
-        class:selected-row={isSelected && isRowHeaderSelected}
+        class:selected-row={isSelected &&
+          isRowHeaderSelected &&
+          !hasCrossSelection}
         class:dimmed-row={hasSelection &&
           !isSelected &&
           !hasClickedCell &&
@@ -550,6 +554,17 @@
           {@const inHoveredCol =
             hoveredColRange && isHeaderInHoveredRange(i, 1)}
           {@const inSelectedCol = selectedColIndices.has(i)}
+          {@const isIntersectionCell =
+            hasCrossSelection && isRowHeaderSelected && inSelectedCol && i > 0}
+          {@const isRowArmCell =
+            hasCrossSelection && isRowHeaderSelected && !inSelectedCol && i > 0}
+          {@const isColArmCell =
+            hasCrossSelection &&
+            inSelectedCol &&
+            !isRowHeaderSelected &&
+            !isAncestorOfSelectedHeader}
+          {@const isCrossSelectedRowHeader =
+            hasCrossSelection && isRowHeaderSelected && i === 0}
           {@const tooltipValue = cell.column.columnDef.meta?.tooltipFormatter
             ? cell.column.columnDef.meta.tooltipFormatter(cell.getValue())
             : cell.getValue()}
@@ -558,8 +573,12 @@
             class:active-cell={isActive}
             class:selected-cell={isClicked}
             class:col-dim-hover-body={inHoveredCol}
-            class:selected-col-body={inSelectedCol}
+            class:selected-col-body={inSelectedCol && !hasCrossSelection}
             class:cell-selected-row-header={i === 0 && hasClickedCell}
+            class:cross-intersection={isIntersectionCell}
+            class:cross-row-arm={isRowArmCell}
+            class:cross-col-arm={isColArmCell}
+            class:cross-selected-row-header={isCrossSelectedRowHeader}
             class:interactive-cell={isTotalsRow
               ? canShowDataViewer
               : canShowDataViewer || enableClickToFilter}
@@ -770,6 +789,35 @@
     @apply bg-primary-100;
   }
 
+  /* Cross-selection: intersection cells (both selected row + selected col) */
+  .cross-intersection.cell {
+    @apply bg-primary-50;
+  }
+  .cross-intersection.cell:hover {
+    @apply bg-primary-100;
+  }
+  tbody tr:hover .cross-intersection.cell {
+    @apply bg-primary-100;
+  }
+
+  /* Cross-selection: arm cells (muted) */
+  .cross-row-arm.cell,
+  .cross-col-arm.cell {
+    @apply bg-surface-muted;
+  }
+  tbody tr:hover .cross-row-arm.cell,
+  tbody tr:hover .cross-col-arm.cell {
+    @apply bg-surface-muted;
+  }
+
+  /* Cross-selection: row header cell for selected row (stays highlighted) */
+  .with-row-dimension tr > td.cross-selected-row-header:first-of-type {
+    @apply bg-primary-100;
+  }
+  .with-row-dimension tr:hover > td.cross-selected-row-header:first-of-type {
+    @apply bg-primary-100;
+  }
+
   .dimmed-row .cell {
     @apply opacity-50;
   }
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 6bf73fe09bc..93813beb488 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -51,6 +51,8 @@ export interface PivotClickSelectionState {
   columnHeaderSelections: Set<string>;
   /** Whether any selection exists at all */
   hasAnySelection: boolean;
+  /** Whether both row-header and column-header selections exist (cross-selection) */
+  hasCrossSelection: boolean;
   /** Check if a specific row was selected via row-header click */
   isRowHeaderSelected: (dimKey: string) => boolean;
   /** Check if a specific cell was selected via data-cell click */
@@ -79,6 +81,7 @@ export function createEmptyClickSelectionState(): PivotClickSelectionState {
     cellSelections: new Map(),
     columnHeaderSelections: new Set(),
     hasAnySelection: false,
+    hasCrossSelection: false,
     isRowHeaderSelected: () => false,
     isCellSelected: () => false,
     hasSelectedCellInRow: () => false,
@@ -95,6 +98,7 @@ export function buildClickSelection(
   colHeaders: Set<string>,
 ): PivotClickSelectionState {
   const hasAny = rowHeaders.size > 0 || cells.size > 0 || colHeaders.size > 0;
+  const hasCrossSelection = rowHeaders.size > 0 && colHeaders.size > 0;
 
   // Build sets of dimKeys and columnIds that have at least one selected cell
   const rowsWithSelectedCells = new Set<string>();
@@ -124,6 +128,7 @@ export function buildClickSelection(
     cellSelections: cells,
     columnHeaderSelections: colHeaders,
     hasAnySelection: hasAny,
+    hasCrossSelection,
     isRowHeaderSelected: (dk) => rowHeaders.has(dk),
     isCellSelected: (dk, cid) => cells.has(cellKey(dk, cid)),
     hasSelectedCellInRow: (dk) => rowsWithSelectedCells.has(dk),

From cf8382da4d966b091d4f0ba50160a50677d8a002 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 31 Mar 2026 15:42:49 +0530
Subject: [PATCH 31/53] abstract away css computation

---
 .../dashboards/pivot/FlatTable.svelte         |  98 ++---
 .../dashboards/pivot/NestedTable.svelte       | 289 +++++--------
 .../pivot/pivot-cell-classes.spec.ts          | 407 ++++++++++++++++++
 .../dashboards/pivot/pivot-cell-classes.ts    | 218 ++++++++++
 .../pivot/pivot-selection-indices.spec.ts     |  97 +++++
 .../pivot/pivot-selection-indices.ts          | 153 +++++++
 6 files changed, 1021 insertions(+), 241 deletions(-)
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
 create mode 100644 web-common/src/features/dashboards/pivot/pivot-selection-indices.ts

diff --git a/web-common/src/features/dashboards/pivot/FlatTable.svelte b/web-common/src/features/dashboards/pivot/FlatTable.svelte
index 3a775a1d1f7..68f656916ed 100644
--- a/web-common/src/features/dashboards/pivot/FlatTable.svelte
+++ b/web-common/src/features/dashboards/pivot/FlatTable.svelte
@@ -13,14 +13,14 @@
   } from "@rilldata/web-common/features/dashboards/pivot/pivot-column-width-utils";
   import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import { modified } from "@rilldata/web-common/lib/actions/modified-click";
-  import type {
-    Cell,
-    Column,
-    HeaderGroup,
-    Row,
-  } from "tanstack-table-8-svelte-5";
+  import type { Column, HeaderGroup, Row } from "tanstack-table-8-svelte-5";
   import { flexRender } from "tanstack-table-8-svelte-5";
   import { cellInspectorStore } from "../stores/cell-inspector-store";
+  import {
+    computeEffectiveDimIdx,
+    flatCellState,
+    flatRowState,
+  } from "./pivot-cell-classes";
   import {
     type PivotClickSelectionState,
     dimKeyFromRow,
@@ -95,19 +95,8 @@
     return measures.find((m) => m.name === columnId);
   }
 
-  function isCellActive(cell: Cell<PivotDataRow, unknown>) {
-    return (
-      cell.row.id === activeCell?.rowId &&
-      cell.column.id === activeCell?.columnId
-    );
-  }
-
-  function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
-    const dk = dimKeyFromRow(
-      cell.row.original,
-      config?.rowDimensionNames ?? [],
-    );
-    return clickSelection?.isCellSelected(dk, cell.column.id) ?? false;
+  function isCellActive(rowId: string, columnId: string) {
+    return rowId === activeCell?.rowId && columnId === activeCell?.columnId;
   }
 
   $: lastDimIdx = (config?.rowDimensionNames.length ?? 0) - 1;
@@ -211,58 +200,51 @@
       {@const rowId = rows[row.index].id}
       {@const rowData = rows[row.index].original}
       {@const dk = dimKeyFromRow(rowData, config?.rowDimensionNames ?? [])}
-      {@const isSelected = rowSelectionState?.isRowSelected(rowData) ?? false}
-      {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isTotalsRow = !!totalsRow && rowId === "0"}
+      {@const isSelected = rowSelectionState?.isRowSelected(rowData) ?? false}
       {@const hasClickedCell =
         clickSelection?.hasSelectedCellInRow(dk) ?? false}
-      {@const clickedDimIdx =
-        clickSelection?.getClickedDimensionIndex(dk) ?? -1}
-      {@const effectiveDimIdx = hasClickedCell
-        ? clickedDimIdx >= 0
-          ? clickedDimIdx
-          : lastDimIdx
-        : isSelected
-          ? (rowSelectionState?.maxFilteredDimensionIndex ?? -1)
-          : -1}
-      <tr
-        class:selected-row={isSelected &&
-          !hasClickedCell &&
-          effectiveDimIdx < 0}
-        class:dimmed-row={hasSelection && !isSelected && !hasClickedCell}
-      >
+      {@const effectiveDimIdx = computeEffectiveDimIdx(
+        hasClickedCell,
+        clickSelection?.getClickedDimensionIndex(dk) ?? -1,
+        lastDimIdx,
+        isSelected,
+        rowSelectionState?.maxFilteredDimensionIndex ?? -1,
+      )}
+      {@const rs = flatRowState({
+        isSelected,
+        hasSelection: rowSelectionState?.hasActiveSelection ?? false,
+        hasClickedCell,
+        effectiveDimIdx,
+      })}
+      <tr class:selected-row={rs.selectedRow} class:dimmed-row={rs.dimmedRow}>
         {#each cells as cell (cell.id)}
           {@const result =
             typeof cell.column.columnDef.cell === "function"
               ? cell.column.columnDef.cell(cell.getContext())
               : cell.column.columnDef.cell}
-          {@const isActive = isCellActive(cell)}
-          {@const isClicked = isCellClicked(cell)}
-          {@const colDimIdx =
-            config?.rowDimensionNames.indexOf(cell.column.id) ?? -1}
-          {@const isLeftOfClick =
-            effectiveDimIdx >= 0 &&
-            (colDimIdx >= 0
-              ? colDimIdx <= effectiveDimIdx
-              : effectiveDimIdx === lastDimIdx)}
-          {@const isMutedCell =
-            (effectiveDimIdx >= 0 && colDimIdx > effectiveDimIdx) ||
-            (colDimIdx === -1 &&
-              effectiveDimIdx >= 0 &&
-              effectiveDimIdx < lastDimIdx)}
+          {@const cs = flatCellState({
+            isActive: isCellActive(cell.row.id, cell.column.id),
+            isClicked:
+              clickSelection?.isCellSelected(dk, cell.column.id) ?? false,
+            colDimIdx: config?.rowDimensionNames.indexOf(cell.column.id) ?? -1,
+            effectiveDimIdx,
+            lastDimIdx,
+            isTotalsRow,
+            canShowDataViewer,
+            enableClickToFilter,
+            hasValue: cell.getValue() !== undefined,
+          })}
           {@const tooltipValue = cell.column.columnDef.meta?.tooltipFormatter
             ? cell.column.columnDef.meta.tooltipFormatter(cell.getValue())
             : cell.getValue()}
           <td
             class="ui-copy-number cell truncate"
-            class:active-cell={isActive}
-            class:selected-cell={isClicked}
-            class:selected-context-cell={isLeftOfClick}
-            class:muted-cell={isMutedCell}
-            class:interactive-cell={(isTotalsRow
-              ? canShowDataViewer
-              : canShowDataViewer || enableClickToFilter) &&
-              cell.getValue() !== undefined}
+            class:active-cell={cs.activeCell}
+            class:selected-cell={cs.selectedCell}
+            class:selected-context-cell={cs.selectedContextCell}
+            class:muted-cell={cs.mutedCell}
+            class:interactive-cell={cs.interactiveCell}
             class:text-right={getMeasureColumn(cell.column)}
             class:border-r={hasBorderRight(cell.column.id)}
             class:total-label={cell.getValue() === "Total"}
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 591c5ee95b7..cfe9ca59e45 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -7,9 +7,14 @@
   import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
   import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import { modified } from "@rilldata/web-common/lib/actions/modified-click";
-  import type { Cell, HeaderGroup, Row } from "tanstack-table-8-svelte-5";
+  import type { HeaderGroup, Row } from "tanstack-table-8-svelte-5";
   import { flexRender } from "tanstack-table-8-svelte-5";
   import { cellInspectorStore } from "../stores/cell-inspector-store";
+  import {
+    nestedCellState,
+    nestedHeaderState,
+    nestedRowState,
+  } from "./pivot-cell-classes";
   import {
     type PivotClickSelectionState,
     dimKeyFromRow,
@@ -25,6 +30,16 @@
     COLUMN_WIDTH_CONSTANTS as WIDTHS,
   } from "./pivot-column-width-utils";
   import type { PivotRowSelectionState } from "./pivot-row-selection";
+  import {
+    computeAncestorRowIds,
+    computeCellSelectedColIndices,
+    computeSelectedColIndices,
+    type HoveredColRange,
+    isHeaderInHoveredRange,
+    isHoveredHeader,
+    isInCellSelectedColRange,
+    isInSelectedColRange,
+  } from "./pivot-selection-indices";
   import { isShowMoreRow } from "./pivot-utils";
   import type { PivotDataRow } from "./types";
 
@@ -62,82 +77,22 @@
   const HEADER_HEIGHT = 30;
 
   // Hover state for column dimension headers
-  let hoveredColRange: { start: number; size: number } | null = null;
+  let hoveredColRange: HoveredColRange | null = null;
 
-  // Compute which leaf column indices are covered by selected column headers.
-  // Iterates header groups to find selected headers and collects their ranges.
   $: hasCrossSelection = clickSelection?.hasCrossSelection ?? false;
-
-  $: selectedColIndices = (() => {
-    if (!clickSelection?.hasAnySelection) return new Set<number>();
-    const indices = new Set<number>();
-    for (const group of headerGroups) {
-      let colStart = 0;
-      for (const header of group.headers) {
-        const meta = header.column.columnDef.meta;
-        if (
-          meta?.dimensionPath &&
-          clickSelection.isColumnHeaderSelected(meta.dimensionPath)
-        ) {
-          for (let c = colStart; c < colStart + header.colSpan; c++) {
-            indices.add(c);
-          }
-        }
-        colStart += header.colSpan;
-      }
-    }
-    return indices;
-  })();
-
-  // Compute which leaf column indices have a cell selected via click-to-filter.
-  // Uses the last header group (leaf columns) to map column IDs to indices.
-  $: cellSelectedColIndices = (() => {
-    if (!clickSelection?.selectedCellColumnIds?.size) return new Set<number>();
-    const leafGroup = headerGroups[headerGroups.length - 1];
-    if (!leafGroup) return new Set<number>();
-    const indices = new Set<number>();
-    let colIdx = 0;
-    for (const header of leafGroup.headers) {
-      if (clickSelection.selectedCellColumnIds.has(header.column.id)) {
-        indices.add(colIdx);
-      }
-      colIdx += header.colSpan;
-    }
-    return indices;
-  })();
-
-  // Compute TanStack row IDs that are ancestors of any selected child row
-  // (row header click or cell click). Used to highlight parent row headers.
-  $: ancestorRowIdsOfSelectedHeaders = (() => {
-    if (!clickSelection?.hasAnySelection) return new Set<string>();
-    const ancestorIds = new Set<string>();
-    for (const row of rows) {
-      const dk = dimKeyFromRow(row.original, rowDimensionNames);
-      if (
-        clickSelection.isRowHeaderSelected(dk) ||
-        clickSelection.hasSelectedCellInRow(dk)
-      ) {
-        let id = row.id;
-        while (id.includes(".")) {
-          id = id.substring(0, id.lastIndexOf("."));
-          ancestorIds.add(id);
-        }
-      }
-    }
-    return ancestorIds;
-  })();
-
-  // Check if a header (by its leaf column range) contains any cell-selected columns
-  function isInCellSelectedColRange(
-    colStart: number,
-    colSpan: number,
-  ): boolean {
-    if (cellSelectedColIndices.size === 0) return false;
-    for (let i = colStart; i < colStart + colSpan; i++) {
-      if (cellSelectedColIndices.has(i)) return true;
-    }
-    return false;
-  }
+  $: selectedColIndices = computeSelectedColIndices(
+    clickSelection,
+    headerGroups,
+  );
+  $: cellSelectedColIndices = computeCellSelectedColIndices(
+    clickSelection,
+    headerGroups,
+  );
+  $: ancestorRowIdsOfSelectedHeaders = computeAncestorRowIds(
+    clickSelection,
+    rows,
+    rowDimensionNames,
+  );
 
   let resizingMeasure = false;
   let initialMeasureIndexOnResize = 0;
@@ -243,50 +198,8 @@
     percentOfChangeDuringResize = (scrollLeft + offset) / totalLength;
   }
 
-  function isCellActive(cell: Cell<PivotDataRow, unknown>) {
-    return (
-      cell.row.id === activeCell?.rowId &&
-      cell.column.id === activeCell?.columnId
-    );
-  }
-
-  function isCellClicked(cell: Cell<PivotDataRow, unknown>) {
-    const dk = dimKeyFromRow(cell.row.original, rowDimensionNames);
-    return clickSelection?.isCellSelected(dk, cell.column.id) ?? false;
-  }
-
-  function isHeaderInHoveredRange(
-    headerStart: number,
-    headerSize: number,
-  ): boolean {
-    if (!hoveredColRange) return false;
-    const hovEnd = hoveredColRange.start + hoveredColRange.size;
-    return (
-      headerStart >= hoveredColRange.start && headerStart + headerSize <= hovEnd
-    );
-  }
-
-  function isHoveredHeader(colStart: number, colSpan: number): boolean {
-    if (!hoveredColRange) return false;
-    return (
-      colStart === hoveredColRange.start && colSpan === hoveredColRange.size
-    );
-  }
-
-  // Returns true if this header should be highlighted as falling within a
-  // selected column range (i.e. it is a child of the clicked header).
-  function isInSelectedColRange(
-    colStart: number,
-    colSpan: number,
-    isSelfSelected: boolean,
-  ): boolean {
-    if (selectedColIndices.size === 0 || colSpan === 0 || isSelfSelected) {
-      return false;
-    }
-    for (let i = colStart; i < colStart + colSpan; i++) {
-      if (!selectedColIndices.has(i)) return false;
-    }
-    return true;
+  function isCellActive(rowId: string, columnId: string) {
+    return rowId === activeCell?.rowId && columnId === activeCell?.columnId;
   }
 
   function shouldShowHeaderRightBorder(header: any, index: number): boolean {
@@ -430,41 +343,51 @@
           {@const colStart = headerGroup.headers
             .slice(0, i)
             .reduce((sum, h) => sum + h.colSpan, 0)}
-          {@const inHoverRange =
-            hoveredColRange && isHeaderInHoveredRange(colStart, header.colSpan)}
-          {@const isTheHoveredHeader =
-            inHoverRange && isHoveredHeader(colStart, header.colSpan)}
-          {@const isSelfSelected =
-            isColDimHeader &&
-            !!dimMeta.dimensionPath &&
-            (clickSelection?.isColumnHeaderSelected(dimMeta.dimensionPath) ??
-              false)}
-          {@const inSelectedRange = isInSelectedColRange(
-            colStart,
-            header.colSpan,
-            isSelfSelected,
-          )}
-          {@const inCellSelectedCol = isInCellSelectedColRange(
+          {@const inHoverRange = isHeaderInHoveredRange(
             colStart,
             header.colSpan,
+            hoveredColRange,
           )}
-          {@const isAncestorOfSelected =
+          {@const isSelfSelected =
             isColDimHeader &&
-            !isSelfSelected &&
             !!dimMeta.dimensionPath &&
-            (clickSelection?.isAncestorOfSelectedColumnHeader(
-              dimMeta.dimensionPath,
-            ) ??
+            (clickSelection?.isColumnHeaderSelected(dimMeta.dimensionPath) ??
               false)}
+          {@const hs = nestedHeaderState({
+            isTheHoveredHeader:
+              inHoverRange &&
+              isHoveredHeader(colStart, header.colSpan, hoveredColRange),
+            inHoverRange,
+            isSelfSelected,
+            inSelectedRange: isInSelectedColRange(
+              colStart,
+              header.colSpan,
+              isSelfSelected,
+              selectedColIndices,
+            ),
+            inCellSelectedCol: isInCellSelectedColRange(
+              colStart,
+              header.colSpan,
+              cellSelectedColIndices,
+            ),
+            isAncestorOfSelected:
+              isColDimHeader &&
+              !isSelfSelected &&
+              !!dimMeta.dimensionPath &&
+              (clickSelection?.isAncestorOfSelectedColumnHeader(
+                dimMeta.dimensionPath,
+              ) ??
+                false),
+          })}
 
           <th
             colSpan={header.colSpan}
-            class:col-dim-hover-self={isTheHoveredHeader}
-            class:col-dim-hover-child={inHoverRange && !isTheHoveredHeader}
-            class:selected-col-header={isSelfSelected}
-            class:in-selected-col-range={inSelectedRange}
-            class:cell-selected-col-header={inCellSelectedCol}
-            class:ancestor-selected-col-header={isAncestorOfSelected}
+            class:col-dim-hover-self={hs.colDimHoverSelf}
+            class:col-dim-hover-child={hs.colDimHoverChild}
+            class:selected-col-header={hs.selectedColHeader}
+            class:in-selected-col-range={hs.inSelectedColRange}
+            class:cell-selected-col-header={hs.cellSelectedColHeader}
+            class:ancestor-selected-col-header={hs.ancestorSelectedColHeader}
             onmouseenter={() => {
               if (isColDimHeader) {
                 hoveredColRange = {
@@ -526,62 +449,62 @@
       {@const isSelected =
         rowSelectionState?.isRowSelected(rowData, rows[row.index].depth) ??
         false}
-      {@const hasSelection = rowSelectionState?.hasActiveSelection ?? false}
       {@const isRowHeaderSelected =
         clickSelection?.isRowHeaderSelected(dk) ?? false}
       {@const hasClickedCell =
         clickSelection?.hasSelectedCellInRow(dk) ?? false}
       {@const isAncestorOfSelectedHeader =
         ancestorRowIdsOfSelectedHeaders.has(rowId)}
+      {@const rs = nestedRowState({
+        isSelected,
+        hasSelection: rowSelectionState?.hasActiveSelection ?? false,
+        isRowHeaderSelected,
+        hasClickedCell,
+        hasCrossSelection,
+        isAncestorOfSelectedHeader,
+        isShowMore: isShowMoreRow(rows[row.index]),
+      })}
       <tr
-        class:show-more-row={isShowMoreRow(rows[row.index])}
-        class:selected-row={isSelected &&
-          isRowHeaderSelected &&
-          !hasCrossSelection}
-        class:dimmed-row={hasSelection &&
-          !isSelected &&
-          !hasClickedCell &&
-          !isAncestorOfSelectedHeader}
-        class:ancestor-of-selected-row={isAncestorOfSelectedHeader}
+        class:show-more-row={rs.showMoreRow}
+        class:selected-row={rs.selectedRow}
+        class:dimmed-row={rs.dimmedRow}
+        class:ancestor-of-selected-row={rs.ancestorOfSelectedRow}
       >
         {#each cells as cell, i (cell.id)}
           {@const result =
             typeof cell.column.columnDef.cell === "function"
               ? cell.column.columnDef.cell(cell.getContext())
               : cell.column.columnDef.cell}
-          {@const isActive = isCellActive(cell)}
-          {@const isClicked = isCellClicked(cell)}
-          {@const inHoveredCol =
-            hoveredColRange && isHeaderInHoveredRange(i, 1)}
-          {@const inSelectedCol = selectedColIndices.has(i)}
-          {@const isIntersectionCell =
-            hasCrossSelection && isRowHeaderSelected && inSelectedCol && i > 0}
-          {@const isRowArmCell =
-            hasCrossSelection && isRowHeaderSelected && !inSelectedCol && i > 0}
-          {@const isColArmCell =
-            hasCrossSelection &&
-            inSelectedCol &&
-            !isRowHeaderSelected &&
-            !isAncestorOfSelectedHeader}
-          {@const isCrossSelectedRowHeader =
-            hasCrossSelection && isRowHeaderSelected && i === 0}
+          {@const cs = nestedCellState({
+            isActive: isCellActive(cell.row.id, cell.column.id),
+            isClicked:
+              clickSelection?.isCellSelected(dk, cell.column.id) ?? false,
+            cellIndex: i,
+            hasClickedCell,
+            inHoveredCol: isHeaderInHoveredRange(i, 1, hoveredColRange),
+            inSelectedCol: selectedColIndices.has(i),
+            isRowHeaderSelected,
+            hasCrossSelection,
+            isAncestorOfSelectedHeader,
+            isTotalsRow,
+            canShowDataViewer,
+            enableClickToFilter,
+          })}
           {@const tooltipValue = cell.column.columnDef.meta?.tooltipFormatter
             ? cell.column.columnDef.meta.tooltipFormatter(cell.getValue())
             : cell.getValue()}
           <td
             class="ui-copy-number cell truncate group/cell"
-            class:active-cell={isActive}
-            class:selected-cell={isClicked}
-            class:col-dim-hover-body={inHoveredCol}
-            class:selected-col-body={inSelectedCol && !hasCrossSelection}
-            class:cell-selected-row-header={i === 0 && hasClickedCell}
-            class:cross-intersection={isIntersectionCell}
-            class:cross-row-arm={isRowArmCell}
-            class:cross-col-arm={isColArmCell}
-            class:cross-selected-row-header={isCrossSelectedRowHeader}
-            class:interactive-cell={isTotalsRow
-              ? canShowDataViewer
-              : canShowDataViewer || enableClickToFilter}
+            class:active-cell={cs.activeCell}
+            class:selected-cell={cs.selectedCell}
+            class:col-dim-hover-body={cs.colDimHoverBody}
+            class:selected-col-body={cs.selectedColBody}
+            class:cell-selected-row-header={cs.cellSelectedRowHeader}
+            class:cross-intersection={cs.crossIntersection}
+            class:cross-row-arm={cs.crossRowArm}
+            class:cross-col-arm={cs.crossColArm}
+            class:cross-selected-row-header={cs.crossSelectedRowHeader}
+            class:interactive-cell={cs.interactiveCell}
             class:border-r={shouldShowRightBorder(i)}
             data-value={tooltipValue}
             data-rowid={cell.row.id}
diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
new file mode 100644
index 00000000000..c2cffaf793a
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
@@ -0,0 +1,407 @@
+import { describe, expect, it } from "vitest";
+import {
+  computeEffectiveDimIdx,
+  flatCellState,
+  flatRowState,
+  nestedCellState,
+  nestedHeaderState,
+  nestedRowState,
+} from "./pivot-cell-classes";
+
+// ---- computeEffectiveDimIdx ----
+
+describe("computeEffectiveDimIdx", () => {
+  it("returns clickedDimIdx when cell is clicked and index is valid", () => {
+    expect(computeEffectiveDimIdx(true, 1, 2, false, -1)).toBe(1);
+  });
+
+  it("falls back to lastDimIdx when clicked but dimIdx is -1", () => {
+    expect(computeEffectiveDimIdx(true, -1, 2, false, -1)).toBe(2);
+  });
+
+  it("uses maxFilteredDimensionIndex when row is selected but no cell clicked", () => {
+    expect(computeEffectiveDimIdx(false, -1, 2, true, 1)).toBe(1);
+  });
+
+  it("returns -1 when nothing is selected", () => {
+    expect(computeEffectiveDimIdx(false, -1, 2, false, -1)).toBe(-1);
+  });
+});
+
+// ---- flatRowState ----
+
+describe("flatRowState", () => {
+  it("returns selectedRow when row is selected without cell clicks", () => {
+    const result = flatRowState({
+      isSelected: true,
+      hasSelection: true,
+      hasClickedCell: false,
+      effectiveDimIdx: -1,
+    });
+    expect(result.selectedRow).toBe(true);
+  });
+
+  it("does not return selectedRow when a cell is clicked", () => {
+    const result = flatRowState({
+      isSelected: true,
+      hasSelection: true,
+      hasClickedCell: true,
+      effectiveDimIdx: 0,
+    });
+    expect(result.selectedRow).toBe(false);
+  });
+
+  it("returns dimmedRow for unselected rows during active selection", () => {
+    const result = flatRowState({
+      isSelected: false,
+      hasSelection: true,
+      hasClickedCell: false,
+      effectiveDimIdx: -1,
+    });
+    expect(result.dimmedRow).toBe(true);
+  });
+
+  it("returns all false when no selection is active", () => {
+    const result = flatRowState({
+      isSelected: false,
+      hasSelection: false,
+      hasClickedCell: false,
+      effectiveDimIdx: -1,
+    });
+    expect(result.selectedRow).toBe(false);
+    expect(result.dimmedRow).toBe(false);
+  });
+});
+
+// ---- flatCellState ----
+
+describe("flatCellState", () => {
+  const base = {
+    isActive: false,
+    isClicked: false,
+    colDimIdx: -1,
+    effectiveDimIdx: -1,
+    lastDimIdx: 1,
+    isTotalsRow: false,
+    canShowDataViewer: false,
+    enableClickToFilter: false,
+    hasValue: true,
+  };
+
+  it("returns activeCell when cell is active", () => {
+    expect(flatCellState({ ...base, isActive: true }).activeCell).toBe(true);
+  });
+
+  it("returns selectedCell when cell is clicked", () => {
+    expect(flatCellState({ ...base, isClicked: true }).selectedCell).toBe(true);
+  });
+
+  it("returns selectedContextCell for dimension cells left of click", () => {
+    const result = flatCellState({
+      ...base,
+      colDimIdx: 0,
+      effectiveDimIdx: 1,
+      lastDimIdx: 1,
+    });
+    expect(result.selectedContextCell).toBe(true);
+  });
+
+  it("returns selectedContextCell for measure cols when clicked at last dim", () => {
+    const result = flatCellState({
+      ...base,
+      colDimIdx: -1,
+      effectiveDimIdx: 1,
+      lastDimIdx: 1,
+    });
+    expect(result.selectedContextCell).toBe(true);
+  });
+
+  it("returns mutedCell for dimension cells right of click", () => {
+    const result = flatCellState({
+      ...base,
+      colDimIdx: 1,
+      effectiveDimIdx: 0,
+      lastDimIdx: 1,
+    });
+    expect(result.mutedCell).toBe(true);
+  });
+
+  it("returns mutedCell for measure cols when not clicked at last dim", () => {
+    const result = flatCellState({
+      ...base,
+      colDimIdx: -1,
+      effectiveDimIdx: 0,
+      lastDimIdx: 1,
+    });
+    expect(result.mutedCell).toBe(true);
+  });
+
+  it("returns interactiveCell with enableClickToFilter and value", () => {
+    const result = flatCellState({
+      ...base,
+      enableClickToFilter: true,
+      hasValue: true,
+    });
+    expect(result.interactiveCell).toBe(true);
+  });
+
+  it("does not return interactiveCell for totals row without canShowDataViewer", () => {
+    const result = flatCellState({
+      ...base,
+      isTotalsRow: true,
+      enableClickToFilter: true,
+      hasValue: true,
+    });
+    expect(result.interactiveCell).toBe(false);
+  });
+
+  it("returns all false for a plain unselected cell", () => {
+    const result = flatCellState(base);
+    expect(result.activeCell).toBe(false);
+    expect(result.selectedCell).toBe(false);
+    expect(result.selectedContextCell).toBe(false);
+    expect(result.mutedCell).toBe(false);
+    expect(result.interactiveCell).toBe(false);
+  });
+});
+
+// ---- nestedRowState ----
+
+describe("nestedRowState", () => {
+  const base = {
+    isSelected: false,
+    hasSelection: false,
+    isRowHeaderSelected: false,
+    hasClickedCell: false,
+    hasCrossSelection: false,
+    isAncestorOfSelectedHeader: false,
+    isShowMore: false,
+  };
+
+  it("returns showMoreRow for show more rows", () => {
+    expect(nestedRowState({ ...base, isShowMore: true }).showMoreRow).toBe(
+      true,
+    );
+  });
+
+  it("returns selectedRow when row header is selected without cross-selection", () => {
+    const result = nestedRowState({
+      ...base,
+      isSelected: true,
+      isRowHeaderSelected: true,
+    });
+    expect(result.selectedRow).toBe(true);
+  });
+
+  it("does not return selectedRow during cross-selection", () => {
+    const result = nestedRowState({
+      ...base,
+      isSelected: true,
+      isRowHeaderSelected: true,
+      hasCrossSelection: true,
+    });
+    expect(result.selectedRow).toBe(false);
+  });
+
+  it("returns dimmedRow for non-selected rows", () => {
+    const result = nestedRowState({
+      ...base,
+      hasSelection: true,
+    });
+    expect(result.dimmedRow).toBe(true);
+  });
+
+  it("does not dim ancestor rows", () => {
+    const result = nestedRowState({
+      ...base,
+      hasSelection: true,
+      isAncestorOfSelectedHeader: true,
+    });
+    expect(result.dimmedRow).toBe(false);
+    expect(result.ancestorOfSelectedRow).toBe(true);
+  });
+});
+
+// ---- nestedCellState ----
+
+describe("nestedCellState", () => {
+  const base = {
+    isActive: false,
+    isClicked: false,
+    cellIndex: 1,
+    hasClickedCell: false,
+    inHoveredCol: false,
+    inSelectedCol: false,
+    isRowHeaderSelected: false,
+    hasCrossSelection: false,
+    isAncestorOfSelectedHeader: false,
+    isTotalsRow: false,
+    canShowDataViewer: false,
+    enableClickToFilter: false,
+  };
+
+  it("returns crossIntersection when row+col selected", () => {
+    const result = nestedCellState({
+      ...base,
+      hasCrossSelection: true,
+      isRowHeaderSelected: true,
+      inSelectedCol: true,
+    });
+    expect(result.crossIntersection).toBe(true);
+    expect(result.crossRowArm).toBe(false);
+    expect(result.crossColArm).toBe(false);
+  });
+
+  it("returns crossRowArm for selected row, unselected column", () => {
+    const result = nestedCellState({
+      ...base,
+      hasCrossSelection: true,
+      isRowHeaderSelected: true,
+      inSelectedCol: false,
+    });
+    expect(result.crossRowArm).toBe(true);
+  });
+
+  it("returns crossColArm for selected column, unselected row", () => {
+    const result = nestedCellState({
+      ...base,
+      hasCrossSelection: true,
+      inSelectedCol: true,
+      isRowHeaderSelected: false,
+    });
+    expect(result.crossColArm).toBe(true);
+  });
+
+  it("does not return crossColArm for ancestor rows", () => {
+    const result = nestedCellState({
+      ...base,
+      hasCrossSelection: true,
+      inSelectedCol: true,
+      isAncestorOfSelectedHeader: true,
+    });
+    expect(result.crossColArm).toBe(false);
+  });
+
+  it("returns crossSelectedRowHeader for row header in cross-selection", () => {
+    const result = nestedCellState({
+      ...base,
+      cellIndex: 0,
+      hasCrossSelection: true,
+      isRowHeaderSelected: true,
+    });
+    expect(result.crossSelectedRowHeader).toBe(true);
+    // Row header should NOT get crossIntersection
+    expect(result.crossIntersection).toBe(false);
+  });
+
+  it("returns cellSelectedRowHeader for row header with clicked cell", () => {
+    const result = nestedCellState({
+      ...base,
+      cellIndex: 0,
+      hasClickedCell: true,
+    });
+    expect(result.cellSelectedRowHeader).toBe(true);
+  });
+
+  it("returns colDimHoverBody for cells in hovered column", () => {
+    expect(
+      nestedCellState({ ...base, inHoveredCol: true }).colDimHoverBody,
+    ).toBe(true);
+  });
+
+  it("returns selectedColBody without cross-selection", () => {
+    expect(
+      nestedCellState({ ...base, inSelectedCol: true }).selectedColBody,
+    ).toBe(true);
+  });
+
+  it("does not return selectedColBody during cross-selection", () => {
+    const result = nestedCellState({
+      ...base,
+      inSelectedCol: true,
+      hasCrossSelection: true,
+    });
+    expect(result.selectedColBody).toBe(false);
+  });
+
+  it("returns interactiveCell with enableClickToFilter", () => {
+    expect(
+      nestedCellState({ ...base, enableClickToFilter: true }).interactiveCell,
+    ).toBe(true);
+  });
+
+  it("returns all false for a plain cell", () => {
+    const result = nestedCellState(base);
+    expect(result.activeCell).toBe(false);
+    expect(result.selectedCell).toBe(false);
+    expect(result.crossIntersection).toBe(false);
+    expect(result.crossRowArm).toBe(false);
+    expect(result.crossColArm).toBe(false);
+    expect(result.interactiveCell).toBe(false);
+  });
+});
+
+// ---- nestedHeaderState ----
+
+describe("nestedHeaderState", () => {
+  const base = {
+    isTheHoveredHeader: false,
+    inHoverRange: false,
+    isSelfSelected: false,
+    inSelectedRange: false,
+    inCellSelectedCol: false,
+    isAncestorOfSelected: false,
+  };
+
+  it("returns colDimHoverSelf for hovered header", () => {
+    const result = nestedHeaderState({
+      ...base,
+      isTheHoveredHeader: true,
+      inHoverRange: true,
+    });
+    expect(result.colDimHoverSelf).toBe(true);
+    expect(result.colDimHoverChild).toBe(false);
+  });
+
+  it("returns colDimHoverChild for child in hover range", () => {
+    expect(
+      nestedHeaderState({ ...base, inHoverRange: true }).colDimHoverChild,
+    ).toBe(true);
+  });
+
+  it("returns selectedColHeader when self selected", () => {
+    expect(
+      nestedHeaderState({ ...base, isSelfSelected: true }).selectedColHeader,
+    ).toBe(true);
+  });
+
+  it("returns inSelectedColRange when in range", () => {
+    expect(
+      nestedHeaderState({ ...base, inSelectedRange: true }).inSelectedColRange,
+    ).toBe(true);
+  });
+
+  it("returns cellSelectedColHeader when has cell selection", () => {
+    expect(
+      nestedHeaderState({ ...base, inCellSelectedCol: true })
+        .cellSelectedColHeader,
+    ).toBe(true);
+  });
+
+  it("returns ancestorSelectedColHeader when ancestor of selected", () => {
+    expect(
+      nestedHeaderState({ ...base, isAncestorOfSelected: true })
+        .ancestorSelectedColHeader,
+    ).toBe(true);
+  });
+
+  it("returns all false with no state", () => {
+    const result = nestedHeaderState(base);
+    expect(result.colDimHoverSelf).toBe(false);
+    expect(result.colDimHoverChild).toBe(false);
+    expect(result.selectedColHeader).toBe(false);
+    expect(result.inSelectedColRange).toBe(false);
+    expect(result.cellSelectedColHeader).toBe(false);
+    expect(result.ancestorSelectedColHeader).toBe(false);
+  });
+});
diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
new file mode 100644
index 00000000000..960351e9638
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
@@ -0,0 +1,218 @@
+/**
+ * Pure functions that compute boolean flags for pivot table cell, row,
+ * and header styling.
+ *
+ * Returns plain objects of booleans so callers can use Svelte's
+ * scoped `class:` directives directly
+ */
+
+// ---- Flat table ----
+
+export interface FlatRowContext {
+  isSelected: boolean;
+  hasSelection: boolean;
+  hasClickedCell: boolean;
+  effectiveDimIdx: number;
+}
+
+export interface FlatRowState {
+  selectedRow: boolean;
+  dimmedRow: boolean;
+}
+
+export interface FlatCellContext {
+  isActive: boolean;
+  isClicked: boolean;
+  /** Index into rowDimensionNames; -1 for measure columns */
+  colDimIdx: number;
+  effectiveDimIdx: number;
+  lastDimIdx: number;
+  isTotalsRow: boolean;
+  canShowDataViewer: boolean;
+  enableClickToFilter: boolean;
+  hasValue: boolean;
+}
+
+export interface FlatCellState {
+  activeCell: boolean;
+  selectedCell: boolean;
+  selectedContextCell: boolean;
+  mutedCell: boolean;
+  interactiveCell: boolean;
+}
+
+/**
+ * Compute the effective dimension index for a flat table row.
+ * This determines the "depth" at which the user clicked a dimension cell,
+ * which in turn drives muted/context styling for other dimension cells.
+ */
+export function computeEffectiveDimIdx(
+  hasClickedCell: boolean,
+  clickedDimIdx: number,
+  lastDimIdx: number,
+  isSelected: boolean,
+  maxFilteredDimensionIndex: number,
+): number {
+  if (hasClickedCell) {
+    return clickedDimIdx >= 0 ? clickedDimIdx : lastDimIdx;
+  }
+  if (isSelected) {
+    return maxFilteredDimensionIndex;
+  }
+  return -1;
+}
+
+/** Boolean flags for a flat table <tr> */
+export function flatRowState(ctx: FlatRowContext): FlatRowState {
+  return {
+    selectedRow:
+      ctx.isSelected && !ctx.hasClickedCell && ctx.effectiveDimIdx < 0,
+    dimmedRow: ctx.hasSelection && !ctx.isSelected && !ctx.hasClickedCell,
+  };
+}
+
+/** Boolean flags for a flat table <td> (selection-related only) */
+export function flatCellState(ctx: FlatCellContext): FlatCellState {
+  return {
+    activeCell: ctx.isActive,
+    selectedCell: ctx.isClicked,
+    selectedContextCell:
+      ctx.effectiveDimIdx >= 0 &&
+      (ctx.colDimIdx >= 0
+        ? ctx.colDimIdx <= ctx.effectiveDimIdx
+        : ctx.effectiveDimIdx === ctx.lastDimIdx),
+    mutedCell:
+      (ctx.effectiveDimIdx >= 0 && ctx.colDimIdx > ctx.effectiveDimIdx) ||
+      (ctx.colDimIdx === -1 &&
+        ctx.effectiveDimIdx >= 0 &&
+        ctx.effectiveDimIdx < ctx.lastDimIdx),
+    interactiveCell:
+      (ctx.isTotalsRow
+        ? ctx.canShowDataViewer
+        : ctx.canShowDataViewer || ctx.enableClickToFilter) && ctx.hasValue,
+  };
+}
+
+// ---- Nested table ----
+
+export interface NestedRowContext {
+  isSelected: boolean;
+  hasSelection: boolean;
+  isRowHeaderSelected: boolean;
+  hasClickedCell: boolean;
+  hasCrossSelection: boolean;
+  isAncestorOfSelectedHeader: boolean;
+  isShowMore: boolean;
+}
+
+export interface NestedRowState {
+  showMoreRow: boolean;
+  selectedRow: boolean;
+  dimmedRow: boolean;
+  ancestorOfSelectedRow: boolean;
+}
+
+export interface NestedCellContext {
+  isActive: boolean;
+  isClicked: boolean;
+  /** 0 = row header column; > 0 = data/measure columns */
+  cellIndex: number;
+  hasClickedCell: boolean;
+  inHoveredCol: boolean;
+  inSelectedCol: boolean;
+  isRowHeaderSelected: boolean;
+  hasCrossSelection: boolean;
+  isAncestorOfSelectedHeader: boolean;
+  isTotalsRow: boolean;
+  canShowDataViewer: boolean;
+  enableClickToFilter: boolean;
+}
+
+export interface NestedCellState {
+  activeCell: boolean;
+  selectedCell: boolean;
+  colDimHoverBody: boolean;
+  selectedColBody: boolean;
+  cellSelectedRowHeader: boolean;
+  crossIntersection: boolean;
+  crossRowArm: boolean;
+  crossColArm: boolean;
+  crossSelectedRowHeader: boolean;
+  interactiveCell: boolean;
+}
+
+export interface NestedHeaderContext {
+  isTheHoveredHeader: boolean;
+  inHoverRange: boolean;
+  isSelfSelected: boolean;
+  inSelectedRange: boolean;
+  inCellSelectedCol: boolean;
+  isAncestorOfSelected: boolean;
+}
+
+export interface NestedHeaderState {
+  colDimHoverSelf: boolean;
+  colDimHoverChild: boolean;
+  selectedColHeader: boolean;
+  inSelectedColRange: boolean;
+  cellSelectedColHeader: boolean;
+  ancestorSelectedColHeader: boolean;
+}
+
+/** Boolean flags for a nested table <tr> */
+export function nestedRowState(ctx: NestedRowContext): NestedRowState {
+  return {
+    showMoreRow: ctx.isShowMore,
+    selectedRow:
+      ctx.isSelected && ctx.isRowHeaderSelected && !ctx.hasCrossSelection,
+    dimmedRow:
+      ctx.hasSelection &&
+      !ctx.isSelected &&
+      !ctx.hasClickedCell &&
+      !ctx.isAncestorOfSelectedHeader,
+    ancestorOfSelectedRow: ctx.isAncestorOfSelectedHeader,
+  };
+}
+
+/** Boolean flags for a nested table <td> (selection-related only) */
+export function nestedCellState(ctx: NestedCellContext): NestedCellState {
+  return {
+    activeCell: ctx.isActive,
+    selectedCell: ctx.isClicked,
+    colDimHoverBody: ctx.inHoveredCol,
+    selectedColBody: ctx.inSelectedCol && !ctx.hasCrossSelection,
+    cellSelectedRowHeader: ctx.cellIndex === 0 && ctx.hasClickedCell,
+    crossIntersection:
+      ctx.hasCrossSelection &&
+      ctx.isRowHeaderSelected &&
+      ctx.inSelectedCol &&
+      ctx.cellIndex > 0,
+    crossRowArm:
+      ctx.hasCrossSelection &&
+      ctx.isRowHeaderSelected &&
+      !ctx.inSelectedCol &&
+      ctx.cellIndex > 0,
+    crossColArm:
+      ctx.hasCrossSelection &&
+      ctx.inSelectedCol &&
+      !ctx.isRowHeaderSelected &&
+      !ctx.isAncestorOfSelectedHeader,
+    crossSelectedRowHeader:
+      ctx.hasCrossSelection && ctx.isRowHeaderSelected && ctx.cellIndex === 0,
+    interactiveCell: ctx.isTotalsRow
+      ? ctx.canShowDataViewer
+      : ctx.canShowDataViewer || ctx.enableClickToFilter,
+  };
+}
+
+/** Boolean flags for a nested table <th> (column header) */
+export function nestedHeaderState(ctx: NestedHeaderContext): NestedHeaderState {
+  return {
+    colDimHoverSelf: ctx.isTheHoveredHeader,
+    colDimHoverChild: ctx.inHoverRange && !ctx.isTheHoveredHeader,
+    selectedColHeader: ctx.isSelfSelected,
+    inSelectedColRange: ctx.inSelectedRange,
+    cellSelectedColHeader: ctx.inCellSelectedCol,
+    ancestorSelectedColHeader: ctx.isAncestorOfSelected,
+  };
+}
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
new file mode 100644
index 00000000000..3626ce806dd
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+import {
+  isHeaderInHoveredRange,
+  isHoveredHeader,
+  isInSelectedColRange,
+  isInCellSelectedColRange,
+} from "./pivot-selection-indices";
+
+// ---- isHeaderInHoveredRange ----
+
+describe("isHeaderInHoveredRange", () => {
+  it("returns true when header is within hovered range", () => {
+    expect(isHeaderInHoveredRange(2, 1, { start: 0, size: 4 })).toBe(true);
+  });
+
+  it("returns true when header exactly matches hovered range", () => {
+    expect(isHeaderInHoveredRange(0, 4, { start: 0, size: 4 })).toBe(true);
+  });
+
+  it("returns false when header extends beyond hovered range", () => {
+    expect(isHeaderInHoveredRange(2, 3, { start: 0, size: 4 })).toBe(false);
+  });
+
+  it("returns false when header is before hovered range", () => {
+    expect(isHeaderInHoveredRange(0, 1, { start: 2, size: 2 })).toBe(false);
+  });
+
+  it("returns false when no hover", () => {
+    expect(isHeaderInHoveredRange(0, 1, null)).toBe(false);
+  });
+});
+
+// ---- isHoveredHeader ----
+
+describe("isHoveredHeader", () => {
+  it("returns true when header is the exact hovered header", () => {
+    expect(isHoveredHeader(2, 3, { start: 2, size: 3 })).toBe(true);
+  });
+
+  it("returns false when start differs", () => {
+    expect(isHoveredHeader(0, 3, { start: 2, size: 3 })).toBe(false);
+  });
+
+  it("returns false when size differs", () => {
+    expect(isHoveredHeader(2, 1, { start: 2, size: 3 })).toBe(false);
+  });
+
+  it("returns false when no hover", () => {
+    expect(isHoveredHeader(0, 1, null)).toBe(false);
+  });
+});
+
+// ---- isInSelectedColRange ----
+
+describe("isInSelectedColRange", () => {
+  it("returns true when all columns in range are selected", () => {
+    const indices = new Set([0, 1, 2, 3]);
+    expect(isInSelectedColRange(1, 2, false, indices)).toBe(true);
+  });
+
+  it("returns false when not all columns in range are selected", () => {
+    const indices = new Set([0, 2]);
+    expect(isInSelectedColRange(0, 3, false, indices)).toBe(false);
+  });
+
+  it("returns false when self-selected (avoid double-highlighting)", () => {
+    const indices = new Set([0, 1]);
+    expect(isInSelectedColRange(0, 2, true, indices)).toBe(false);
+  });
+
+  it("returns false when no selections", () => {
+    expect(isInSelectedColRange(0, 2, false, new Set())).toBe(false);
+  });
+
+  it("returns false when colSpan is 0", () => {
+    const indices = new Set([0]);
+    expect(isInSelectedColRange(0, 0, false, indices)).toBe(false);
+  });
+});
+
+// ---- isInCellSelectedColRange ----
+
+describe("isInCellSelectedColRange", () => {
+  it("returns true when any column in range has a cell selected", () => {
+    const indices = new Set([3]);
+    expect(isInCellSelectedColRange(2, 3, indices)).toBe(true);
+  });
+
+  it("returns false when no columns in range have a cell selected", () => {
+    const indices = new Set([5]);
+    expect(isInCellSelectedColRange(0, 3, indices)).toBe(false);
+  });
+
+  it("returns false with empty set", () => {
+    expect(isInCellSelectedColRange(0, 3, new Set())).toBe(false);
+  });
+});
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
new file mode 100644
index 00000000000..9ac97e32bf2
--- /dev/null
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
@@ -0,0 +1,153 @@
+/**
+ * Pure functions for computing column/row selection indices from
+ * PivotClickSelectionState and TanStack header groups. Extracted
+ * from NestedTable.svelte's reactive $: blocks to enable testing
+ * and reuse.
+ */
+
+import type { HeaderGroup, Row } from "tanstack-table-8-svelte-5";
+import type { PivotClickSelectionState } from "./pivot-click-selection";
+import { dimKeyFromRow } from "./pivot-click-selection";
+import type { PivotDataRow } from "./types";
+
+/**
+ * Compute the set of leaf column indices that fall within any
+ * selected column header's span. Iterates all header groups to
+ * find headers whose dimensionPath matches the selection.
+ */
+export function computeSelectedColIndices(
+  clickSelection: PivotClickSelectionState | undefined,
+  headerGroups: HeaderGroup<PivotDataRow>[],
+): Set<number> {
+  if (!clickSelection?.hasAnySelection) return new Set();
+  const indices = new Set<number>();
+  for (const group of headerGroups) {
+    let colStart = 0;
+    for (const header of group.headers) {
+      const meta = header.column.columnDef.meta;
+      if (
+        meta?.dimensionPath &&
+        clickSelection.isColumnHeaderSelected(meta.dimensionPath)
+      ) {
+        for (let c = colStart; c < colStart + header.colSpan; c++) {
+          indices.add(c);
+        }
+      }
+      colStart += header.colSpan;
+    }
+  }
+  return indices;
+}
+
+/**
+ * Compute the set of leaf column indices that have at least one
+ * cell selected via click-to-filter. Uses the last header group
+ * (leaf columns) to map column IDs to indices.
+ */
+export function computeCellSelectedColIndices(
+  clickSelection: PivotClickSelectionState | undefined,
+  headerGroups: HeaderGroup<PivotDataRow>[],
+): Set<number> {
+  if (!clickSelection?.selectedCellColumnIds?.size) return new Set();
+  const leafGroup = headerGroups[headerGroups.length - 1];
+  if (!leafGroup) return new Set();
+  const indices = new Set<number>();
+  let colIdx = 0;
+  for (const header of leafGroup.headers) {
+    if (clickSelection.selectedCellColumnIds.has(header.column.id)) {
+      indices.add(colIdx);
+    }
+    colIdx += header.colSpan;
+  }
+  return indices;
+}
+
+/**
+ * Compute TanStack row IDs that are ancestors of any selected
+ * child row (row header click or cell click). Used to highlight
+ * parent row headers in nested tables.
+ */
+export function computeAncestorRowIds(
+  clickSelection: PivotClickSelectionState | undefined,
+  rows: Row<PivotDataRow>[],
+  rowDimensionNames: string[],
+): Set<string> {
+  if (!clickSelection?.hasAnySelection) return new Set();
+  const ancestorIds = new Set<string>();
+  for (const row of rows) {
+    const dk = dimKeyFromRow(row.original, rowDimensionNames);
+    if (
+      clickSelection.isRowHeaderSelected(dk) ||
+      clickSelection.hasSelectedCellInRow(dk)
+    ) {
+      let id = row.id;
+      while (id.includes(".")) {
+        id = id.substring(0, id.lastIndexOf("."));
+        ancestorIds.add(id);
+      }
+    }
+  }
+  return ancestorIds;
+}
+
+// ---- Column header hover/selection range helpers ----
+
+export interface HoveredColRange {
+  start: number;
+  size: number;
+}
+
+/** Check if a header (by its leaf column range) falls within the hovered range */
+export function isHeaderInHoveredRange(
+  headerStart: number,
+  headerSize: number,
+  hoveredColRange: HoveredColRange | null,
+): boolean {
+  if (!hoveredColRange) return false;
+  const hovEnd = hoveredColRange.start + hoveredColRange.size;
+  return (
+    headerStart >= hoveredColRange.start && headerStart + headerSize <= hovEnd
+  );
+}
+
+/** Check if a header IS the exact hovered header */
+export function isHoveredHeader(
+  colStart: number,
+  colSpan: number,
+  hoveredColRange: HoveredColRange | null,
+): boolean {
+  if (!hoveredColRange) return false;
+  return colStart === hoveredColRange.start && colSpan === hoveredColRange.size;
+}
+
+/**
+ * Check if a header should be highlighted as falling within a
+ * selected column range (child of a clicked column header).
+ */
+export function isInSelectedColRange(
+  colStart: number,
+  colSpan: number,
+  isSelfSelected: boolean,
+  selectedColIndices: Set<number>,
+): boolean {
+  if (selectedColIndices.size === 0 || colSpan === 0 || isSelfSelected) {
+    return false;
+  }
+  for (let i = colStart; i < colStart + colSpan; i++) {
+    if (!selectedColIndices.has(i)) return false;
+  }
+  return true;
+}
+
+/** Check if a header (by its leaf column range) contains any cell-selected columns */
+export function isInCellSelectedColRange(
+  colStart: number,
+  colSpan: number,
+  cellSelectedColIndices: Set<number>,
+): boolean {
+  if (cellSelectedColIndices.size === 0) return false;
+  for (let i = colStart; i < colStart + colSpan; i++) {
+    if (cellSelectedColIndices.has(i)) return true;
+  }
+  return false;
+}

From 9cf2a62de6eeed910c21ed7da5fc36694d68c8d3 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 1 Apr 2026 01:34:26 +0530
Subject: [PATCH 32/53] review

---
 .../canvas/components/pivot/pivot-click-to-filter.spec.ts  | 5 +----
 .../canvas/components/pivot/pivot-click-to-filter.ts       | 7 +++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index b2c13fb506a..81c9d657a2d 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -16,10 +16,7 @@ import {
 import type { V1Expression } from "@rilldata/web-common/runtime-client";
 import { get, writable, type Readable } from "svelte/store";
 import { describe, expect, it, vi } from "vitest";
-import {
-  columnHeaderKey,
-  dimKeyFromRow,
-} from "../../../dashboards/pivot/pivot-click-selection";
+import { dimKeyFromRow } from "../../../dashboards/pivot/pivot-click-selection";
 import type { FilterManager } from "../../stores/filter-manager";
 import { createPivotClickToFilter } from "./pivot-click-to-filter";
 
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 229126d6c1c..e32d3e6fa47 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -30,7 +30,6 @@ import {
   getFiltersForRowData,
   getFiltersForRowHeader,
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
-import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import {
   getFiltersForCell,
   getFiltersFromRow,
@@ -40,6 +39,7 @@ import type {
   PivotDataStore,
   PivotDataStoreConfig,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
+import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { V1Expression } from "@rilldata/web-common/runtime-client";
 import {
   type Readable,
@@ -189,8 +189,8 @@ export function createPivotClickToFilter(
    * All selected headers are at the same level due to level-switch enforcement.
    */
   function getCurrentColumnHeaderLevel(colHeaders: Set<string>): number {
-    for (const key of colHeaders) return getColumnHeaderLevel(key);
-    return -1;
+    const first = colHeaders.values().next().value as string | undefined;
+    return first !== undefined ? getColumnHeaderLevel(first) : -1;
   }
 
   // --- Retained value computation for safe deselect ---
@@ -333,7 +333,6 @@ export function createPivotClickToFilter(
       onBecomeActive?.();
     }
 
-    // Single batch URL update with the final filter string
     if (filterString !== null) {
       filterManager.applyFiltersToUrl(
         new Map([[metricsViewName, filterString]]),

From 932377b66979296547f037021a14f49d17eed29e Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 1 Apr 2026 01:50:53 +0530
Subject: [PATCH 33/53] add border to header cells

---
 .../src/features/dashboards/pivot/NestedTable.svelte   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index cfe9ca59e45..a85b0fe7cb3 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -706,7 +706,8 @@
     @apply bg-primary-100;
   }
   .with-row-dimension .selected-row > td:first-of-type {
-    @apply bg-primary-100;
+    @apply bg-primary-100 relative z-[1];
+    box-shadow: 0 0 0 1px theme(colors.primary.400);
   }
   .with-row-dimension .selected-row:hover > td:first-of-type {
     @apply bg-primary-100;
@@ -735,7 +736,8 @@
 
   /* Cross-selection: row header cell for selected row (stays highlighted) */
   .with-row-dimension tr > td.cross-selected-row-header:first-of-type {
-    @apply bg-primary-100;
+    @apply bg-primary-100 relative z-[1];
+    box-shadow: 0 0 0 1px theme(colors.primary.400);
   }
   .with-row-dimension tr:hover > td.cross-selected-row-header:first-of-type {
     @apply bg-primary-100;
@@ -770,6 +772,10 @@
   .selected-col-header .header-cell {
     @apply bg-primary-100;
   }
+  .selected-col-header {
+    @apply relative z-[1];
+    box-shadow: 0 0 0 1px theme(colors.primary.400);
+  }
 
   .in-selected-col-range .header-cell,
   .selected-col-body.cell {

From c4995407dda517647ec81be031f3007b960e65d4 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 1 Apr 2026 01:56:08 +0530
Subject: [PATCH 34/53] fix border for row header

---
 .../src/features/dashboards/pivot/NestedTable.svelte      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index a85b0fe7cb3..8c9e7d2a1b8 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -706,8 +706,8 @@
     @apply bg-primary-100;
   }
   .with-row-dimension .selected-row > td:first-of-type {
-    @apply bg-primary-100 relative z-[1];
-    box-shadow: 0 0 0 1px theme(colors.primary.400);
+    @apply bg-primary-100;
+    box-shadow: inset 0 0 0 1px theme(colors.primary.400);
   }
   .with-row-dimension .selected-row:hover > td:first-of-type {
     @apply bg-primary-100;
@@ -736,8 +736,8 @@
 
   /* Cross-selection: row header cell for selected row (stays highlighted) */
   .with-row-dimension tr > td.cross-selected-row-header:first-of-type {
-    @apply bg-primary-100 relative z-[1];
-    box-shadow: 0 0 0 1px theme(colors.primary.400);
+    @apply bg-primary-100;
+    box-shadow: inset 0 0 0 1px theme(colors.primary.400);
   }
   .with-row-dimension tr:hover > td.cross-selected-row-header:first-of-type {
     @apply bg-primary-100;

From 579ed712a61e8d2f1ca412bb7dd25fd56a1c5772 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 1 Apr 2026 02:06:32 +0530
Subject: [PATCH 35/53] fix overlapping text on scroll

---
 web-common/src/features/dashboards/pivot/NestedTable.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 8c9e7d2a1b8..e3868fd4c9d 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -707,7 +707,7 @@
   }
   .with-row-dimension .selected-row > td:first-of-type {
     @apply bg-primary-100;
-    box-shadow: inset 0 0 0 1px theme(colors.primary.400);
+    box-shadow: 0 0 0 1px theme(colors.primary.400);
   }
   .with-row-dimension .selected-row:hover > td:first-of-type {
     @apply bg-primary-100;
@@ -744,7 +744,7 @@
   }
 
   .dimmed-row .cell {
-    @apply opacity-50;
+    @apply text-fg-primary/50;
   }
 
   /* Show more row styling */

From 76e05da64efb00c000c50bb9f4f835643611b3af Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 1 Apr 2026 02:12:02 +0530
Subject: [PATCH 36/53] fix border bottom styling

---
 .../src/features/dashboards/pivot/NestedTable.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index e3868fd4c9d..3922c7d8204 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -707,7 +707,9 @@
   }
   .with-row-dimension .selected-row > td:first-of-type {
     @apply bg-primary-100;
-    box-shadow: 0 0 0 1px theme(colors.primary.400);
+    box-shadow:
+      0 0 0 1px theme(colors.primary.400),
+      inset 0 -1px 0 0 theme(colors.primary.400);
   }
   .with-row-dimension .selected-row:hover > td:first-of-type {
     @apply bg-primary-100;
@@ -737,7 +739,9 @@
   /* Cross-selection: row header cell for selected row (stays highlighted) */
   .with-row-dimension tr > td.cross-selected-row-header:first-of-type {
     @apply bg-primary-100;
-    box-shadow: inset 0 0 0 1px theme(colors.primary.400);
+    box-shadow:
+      0 0 0 1px theme(colors.primary.400),
+      inset 0 -1px 0 0 theme(colors.primary.400);
   }
   .with-row-dimension tr:hover > td.cross-selected-row-header:first-of-type {
     @apply bg-primary-100;
@@ -774,7 +778,9 @@
   }
   .selected-col-header {
     @apply relative z-[1];
-    box-shadow: 0 0 0 1px theme(colors.primary.400);
+    box-shadow:
+      0 0 0 1px theme(colors.primary.400),
+      inset 0 -1px 0 0 theme(colors.primary.400);
   }
 
   .in-selected-col-range .header-cell,

From 21079ae34f517c2b60fe876ed5e45bf1a416db47 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Thu, 2 Apr 2026 14:07:08 +0530
Subject: [PATCH 37/53] fix bug when selecting child dimensions

---
 .../pivot/pivot-click-to-filter.spec.ts       | 225 ++++++++++++++++--
 .../components/pivot/pivot-click-to-filter.ts |  10 +-
 .../dashboards/pivot/NestedTable.svelte       |  19 +-
 .../dashboards/pivot/pivot-click-selection.ts |  39 +++
 .../dashboards/pivot/pivot-row-selection.ts   |  34 ++-
 .../pivot/pivot-selection-indices.ts          |   7 +-
 6 files changed, 305 insertions(+), 29 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 81c9d657a2d..71d796af62e 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -1,4 +1,7 @@
-import { getFiltersForColumnHeader } from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
+import {
+  getFiltersForColumnHeader,
+  getFiltersForRowHeader,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection";
 import {
   getFiltersForCell,
   getFiltersFromRow,
@@ -16,7 +19,10 @@ import {
 import type { V1Expression } from "@rilldata/web-common/runtime-client";
 import { get, writable, type Readable } from "svelte/store";
 import { describe, expect, it, vi } from "vitest";
-import { dimKeyFromRow } from "../../../dashboards/pivot/pivot-click-selection";
+import {
+  dimKeyFromDimValues,
+  dimKeyFromRow,
+} from "../../../dashboards/pivot/pivot-click-selection";
 import type { FilterManager } from "../../stores/filter-manager";
 import { createPivotClickToFilter } from "./pivot-click-to-filter";
 
@@ -29,8 +35,18 @@ vi.mock(
     ...(await vi.importActual(
       "@rilldata/web-common/features/dashboards/pivot/pivot-utils",
     )),
-    getFiltersFromRow: vi.fn(() => ({ filters: undefined, timeRange: null })),
-    getFiltersForCell: vi.fn(() => ({ filters: undefined, timeRange: null })),
+    getFiltersFromRow: vi.fn(
+      (): PivotFilter => ({
+        filters: undefined,
+        timeRange: { start: undefined, end: undefined },
+      }),
+    ),
+    getFiltersForCell: vi.fn(
+      (): PivotFilter => ({
+        filters: undefined,
+        timeRange: { start: undefined, end: undefined },
+      }),
+    ),
   }),
 );
 
@@ -40,18 +56,24 @@ vi.mock(
     ...(await vi.importActual(
       "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection",
     )),
-    getFiltersForRowData: vi.fn(() => ({
-      filters: undefined,
-      timeRange: null,
-    })),
-    getFiltersForRowHeader: vi.fn(() => ({
-      filters: undefined,
-      timeRange: null,
-    })),
-    getFiltersForColumnHeader: vi.fn(() => ({
-      filters: undefined,
-      timeRange: null,
-    })),
+    getFiltersForRowData: vi.fn(
+      (): PivotFilter => ({
+        filters: undefined,
+        timeRange: { start: undefined, end: undefined },
+      }),
+    ),
+    getFiltersForRowHeader: vi.fn(
+      (): PivotFilter => ({
+        filters: undefined,
+        timeRange: { start: undefined, end: undefined },
+      }),
+    ),
+    getFiltersForColumnHeader: vi.fn(
+      (): PivotFilter => ({
+        filters: undefined,
+        timeRange: { start: undefined, end: undefined },
+      }),
+    ),
   }),
 );
 
@@ -139,6 +161,20 @@ function nestedConfig() {
   } as unknown as PivotDataStoreConfig;
 }
 
+function nestedConfigTwoDims() {
+  return {
+    rowDimensionNames: ["outer", "inner"],
+    colDimensionNames: [],
+    measureNames: ["revenue"],
+    isFlat: false,
+    time: {
+      timeDimension: "",
+      timeStart: undefined,
+      timeEnd: undefined,
+    },
+  } as unknown as PivotDataStoreConfig;
+}
+
 function nestedConfigWithColDims() {
   return {
     rowDimensionNames: ["country"],
@@ -428,6 +464,163 @@ describe("pivot-click-to-filter: nested table multi-select", () => {
   });
 });
 
+describe("pivot-click-to-filter: nested table cross-parent selection isolation", () => {
+  // Two outer rows A and B, each with inner row X.
+  // Clicking on X under A should NOT highlight X under B.
+  //
+  // pivotDataStore.data does NOT include the totals row (TanStack prepends it).
+  // getValuesForExpandedKey adjusts indices[0] by -1 to map TanStack rowIds
+  // back to this array.
+  //
+  // TanStack rowIds: "0" → totals, "1" → A, "2" → B, "1.0" → X-under-A, "2.0" → X-under-B
+  // After adjustment: "1" maps to data[0]=A, "2" maps to data[1]=B
+  const nestedTwoDimData: PivotDataRow[] = [
+    {
+      outer: "A",
+      revenue: 100,
+      subRows: [{ outer: "X", inner: "X", revenue: 50 }],
+    },
+    {
+      outer: "B",
+      revenue: 200,
+      subRows: [{ outer: "X", inner: "X", revenue: 75 }],
+    },
+  ];
+
+  // The inner row data as the component sees it (value mapped to first dim)
+  const innerRowXUnderA = nestedTwoDimData[0].subRows![0];
+
+  function setupNestedTwoDims() {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    // For nested cell clicks, getFiltersForCell is called
+    vi.mocked(getFiltersForCell).mockImplementation(
+      (_config, rowId, _colId, _axes, _data) => {
+        // Return filters based on which inner row was clicked
+        if (rowId === "1.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["A"] },
+            { name: "inner", values: ["X"] },
+          ]);
+        }
+        if (rowId === "2.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["B"] },
+            { name: "inner", values: ["X"] },
+          ]);
+        }
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    // For nested row header clicks
+    vi.mocked(getFiltersForRowHeader).mockImplementation(
+      (_config, rowId, _data) => {
+        if (rowId === "1.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["A"] },
+            { name: "inner", values: ["X"] },
+          ]);
+        }
+        if (rowId === "2.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["B"] },
+            { name: "inner", values: ["X"] },
+          ]);
+        }
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(
+          nestedConfigTwoDims(),
+        ) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(nestedTwoDimData),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    return { result, filterClass, selfFilteredDimensions };
+  }
+
+  it("should produce distinct dimKeys for same inner value under different parents", () => {
+    // Verify that dimKeyFromDimValues produces different keys
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    const dkB = dimKeyFromDimValues({ outer: "B", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(dkA).not.toBe(dkB);
+    expect(dkA).toBe("A\0X");
+    expect(dkB).toBe("B\0X");
+  });
+
+  it("should NOT select X under B when clicking X under A", () => {
+    const { result } = setupNestedTwoDims();
+
+    // Click on cell in inner row X under parent A (rowId "1.0")
+    result.handleCellClickToFilter("1.0", "revenue", false, innerRowXUnderA);
+
+    const sel = get(result.clickSelection);
+
+    // X under A should be selected
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isCellSelected(dkA, "revenue")).toBe(true);
+
+    // X under B should NOT be selected
+    const dkB = dimKeyFromDimValues({ outer: "B", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isCellSelected(dkB, "revenue")).toBe(false);
+
+    expect(sel.cellSelections.size).toBe(1);
+
+    result.destroy();
+  });
+
+  it("should NOT select row header X under B when clicking row header X under A", () => {
+    const { result } = setupNestedTwoDims();
+
+    // Click on row header for inner row X under parent A
+    result.handleCellClickToFilter("1.0", "outer", true, innerRowXUnderA);
+
+    const sel = get(result.clickSelection);
+
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    const dkB = dimKeyFromDimValues({ outer: "B", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+
+    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
+    expect(sel.isRowHeaderSelected(dkB)).toBe(false);
+    expect(sel.rowHeaderSelections.size).toBe(1);
+
+    result.destroy();
+  });
+});
+
 describe("pivot-click-to-filter: null dimension values", () => {
   const nullData: PivotDataRow[] = [
     { country: null, revenue: 100 },
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index e32d3e6fa47..03bf79bd13a 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -17,6 +17,7 @@ import {
   cellKey,
   columnHeaderKey,
   createEmptyClickSelectionState,
+  dimKeyFromDimValues,
   dimKeyFromRow,
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-click-selection";
 import {
@@ -483,7 +484,6 @@ export function createPivotClickToFilter(
     const $data = get(pivotDataStore);
     if (!$config || !$data?.data) return;
 
-    const dk = dimKeyFromRow(rowData, $config.rowDimensionNames);
     const $clickSelection = get(clickSelectionStore);
 
     // In nested mode, row data stores all values under rowDimensions[0],
@@ -497,6 +497,14 @@ export function createPivotClickToFilter(
         )
       : captureDimValues(rowData, $config.rowDimensionNames);
 
+    // For nested child rows (depth > 0), build dimKey from the fully-resolved
+    // dimValues (which include parent dimension values); dimKeyFromRow only
+    // sees rowDimensions[0] and would produce identical keys across parents.
+    const isNestedChild = isNested && rowId.includes(".");
+    const dk = isNestedChild
+      ? dimKeyFromDimValues(dimValues, $config.rowDimensionNames)
+      : dimKeyFromRow(rowData, $config.rowDimensionNames);
+
     // Determine if this click is deselecting a previously selected element
     const isDeselect = isRowHeader
       ? $clickSelection.isRowHeaderSelected(dk)
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 3922c7d8204..9db37ce7758 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -18,6 +18,7 @@
   import {
     type PivotClickSelectionState,
     dimKeyFromRow,
+    nestedDimKeyFromRow,
   } from "./pivot-click-selection";
   import {
     getRowNestedLabel,
@@ -444,15 +445,25 @@
       {@const cells = rows[row.index].getVisibleCells()}
       {@const rowId = rows[row.index].id}
       {@const rowData = rows[row.index].original}
-      {@const dk = dimKeyFromRow(rowData, rowDimensionNames)}
+      {@const dk =
+        rows[row.index].depth > 0
+          ? nestedDimKeyFromRow(rows[row.index], rowDimensionNames)
+          : dimKeyFromRow(rowData, rowDimensionNames)}
       {@const isTotalsRow = !!totalsRow && rowId === "0"}
-      {@const isSelected =
-        rowSelectionState?.isRowSelected(rowData, rows[row.index].depth) ??
-        false}
+      {@const filterSelected =
+        rowSelectionState?.isRowSelected(
+          rowData,
+          rows[row.index].depth,
+          rows[row.index].getParentRows().map((r) => r.original),
+        ) ?? false}
       {@const isRowHeaderSelected =
         clickSelection?.isRowHeaderSelected(dk) ?? false}
       {@const hasClickedCell =
         clickSelection?.hasSelectedCellInRow(dk) ?? false}
+      {@const isSelected =
+        rows[row.index].depth > 0 && clickSelection?.hasAnySelection
+          ? filterSelected && (isRowHeaderSelected || hasClickedCell)
+          : filterSelected}
       {@const isAncestorOfSelectedHeader =
         ancestorRowIdsOfSelectedHeaders.has(rowId)}
       {@const rs = nestedRowState({
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 93813beb488..1f1fc19b68b 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -6,11 +6,16 @@
  * indices, so they remain stable across sorting and data refreshes.
  */
 
+import type { Row } from "tanstack-table-8-svelte-5";
 import type { PivotDataRow } from "./types";
 
 /**
  * Produces a stable string key from a row's dimension values.
  * Uses NUL as separator since dimension values won't contain it.
+ *
+ * WARNING: In nested tables, rows only store their own value under
+ * rowDimensionNames[0], so this function will NOT include parent
+ * dimension values. Use dimKeyFromDimValues instead for nested tables.
  */
 export function dimKeyFromRow(
   rowData: PivotDataRow,
@@ -19,6 +24,40 @@ export function dimKeyFromRow(
   return rowDimensionNames.map((d) => String(rowData[d] ?? "")).join("\0");
 }
 
+/**
+ * Produces a stable string key from resolved dimension name→value pairs.
+ * For nested tables, callers should resolve all ancestor values first
+ * (e.g. via getDimensionValuesForRow) so the key is unique across
+ * different parents.
+ */
+export function dimKeyFromDimValues(
+  dimValues: Record<string, string | null>,
+  rowDimensionNames: string[],
+): string {
+  return rowDimensionNames.map((d) => String(dimValues[d] ?? "")).join("\0");
+}
+
+/**
+ * Produces a stable dimKey for a TanStack Row in a nested table by
+ * walking the parent chain. Each row at depth N stores its value under
+ * rowDimensionNames[0]; the actual dimension is rowDimensionNames[depth].
+ * Returns a NUL-separated key incorporating all ancestor values.
+ */
+export function nestedDimKeyFromRow(
+  row: Row<PivotDataRow>,
+  rowDimensionNames: string[],
+): string {
+  const firstDim = rowDimensionNames[0];
+  // Collect values from root to current row
+  const ancestors = row.getParentRows();
+  const chain = [...ancestors, row];
+  const values = rowDimensionNames.map((_, i) => {
+    const r = chain[i];
+    return r ? String(r.original[firstDim] ?? "") : "";
+  });
+  return values.join("\0");
+}
+
 export function cellKey(dimKey: string, columnId: string) {
   return `${dimKey}\t${columnId}`;
 }
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 3dde1ba5617..62f3bb5b058 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -28,10 +28,15 @@ export interface PivotRowSelectionState {
   hasActiveSelection: boolean;
   /**
    * Check if a row is selected based on current filters.
-   * For nested tables, pass the row's depth so the value under
-   * rowDimensions[0] is checked against the correct dimension filter.
+   * For nested tables, pass the row's depth and parentRows so the value
+   * under rowDimensions[0] is checked against the correct dimension filter
+   * and all ancestor dimensions are also verified.
    */
-  isRowSelected: (rowData: PivotDataRow, depth?: number) => boolean;
+  isRowSelected: (
+    rowData: PivotDataRow,
+    depth?: number,
+    parentRows?: PivotDataRow[],
+  ) => boolean;
   /** Highest row dimension index with an active selection filter, or -1 */
   maxFilteredDimensionIndex: number;
 }
@@ -213,7 +218,11 @@ export function computePivotRowSelection(
   return {
     hasActiveSelection: true,
     maxFilteredDimensionIndex,
-    isRowSelected: (rowData: PivotDataRow, depth?: number) => {
+    isRowSelected: (
+      rowData: PivotDataRow,
+      depth?: number,
+      parentRows?: PivotDataRow[],
+    ) => {
       // In nested mode, all rows store their value under rowDimensions[0]
       // but the actual dimension is rowDimensionNames[depth]. When depth
       // is provided, use it for correct dimension mapping.
@@ -226,8 +235,21 @@ export function computePivotRowSelection(
         if (!strValue) return false;
 
         const selectedSet = dimensionFilters.get(actualDim);
-        if (!selectedSet) return true; // dimension not filtered; doesn't block
-        return selectedSet.has(strValue);
+        if (selectedSet && !selectedSet.has(strValue)) return false;
+
+        // Also verify all ancestor dimensions match their filters.
+        // parentRows[i] is at depth i and stores its value under firstDim.
+        if (parentRows) {
+          for (let i = 0; i < parentRows.length; i++) {
+            const ancestorDim = config.rowDimensionNames[i];
+            const ancestorSet = dimensionFilters.get(ancestorDim);
+            if (!ancestorSet) continue;
+            const ancestorValue = String(parentRows[i][firstDim] ?? "");
+            if (!ancestorValue || !ancestorSet.has(ancestorValue)) return false;
+          }
+        }
+
+        return true;
       }
 
       const rowDimValues = getDimensionValuesFromRowData(config, rowData);
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
index 9ac97e32bf2..845ba67d9d9 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
@@ -7,7 +7,7 @@
 
 import type { HeaderGroup, Row } from "tanstack-table-8-svelte-5";
 import type { PivotClickSelectionState } from "./pivot-click-selection";
-import { dimKeyFromRow } from "./pivot-click-selection";
+import { dimKeyFromRow, nestedDimKeyFromRow } from "./pivot-click-selection";
 import type { PivotDataRow } from "./types";
 
 /**
@@ -75,7 +75,10 @@ export function computeAncestorRowIds(
   if (!clickSelection?.hasAnySelection) return new Set();
   const ancestorIds = new Set<string>();
   for (const row of rows) {
-    const dk = dimKeyFromRow(row.original, rowDimensionNames);
+    const dk =
+      row.depth > 0
+        ? nestedDimKeyFromRow(row, rowDimensionNames)
+        : dimKeyFromRow(row.original, rowDimensionNames);
     if (
       clickSelection.isRowHeaderSelected(dk) ||
       clickSelection.hasSelectedCellInRow(dk)

From 610c58be56f97e142efc60e339d1ff7a31d7766e Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 21 Apr 2026 19:17:20 +0530
Subject: [PATCH 38/53] redo nested table rules

---
 .../pivot/pivot-click-to-filter.spec.ts       | 547 ++++++++++++++++++
 .../components/pivot/pivot-click-to-filter.ts | 474 ++++++++++-----
 .../dashboards/pivot/NestedTable.svelte       |   6 +
 .../dashboards/pivot/pivot-cell-classes.ts    |   4 +
 .../dashboards/pivot/pivot-click-selection.ts |  27 +
 .../dashboards/pivot/pivot-row-selection.ts   | 132 +----
 .../features/dashboards/pivot/pivot-utils.ts  | 285 ++++-----
 7 files changed, 1054 insertions(+), 421 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 71d796af62e..ea3cee03112 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -956,3 +956,550 @@ describe("pivot-click-to-filter: column header level selection constraint", () =
     result.destroy();
   });
 });
+
+describe("pivot-click-to-filter: nesting level must match", () => {
+  // Data: outer=A has child inner=X; outer=B has child inner=Y
+  const nestedData: PivotDataRow[] = [
+    {
+      outer: "A",
+      revenue: 100,
+      subRows: [{ outer: "X", inner: "X", revenue: 50 }],
+    },
+    {
+      outer: "B",
+      revenue: 200,
+      subRows: [{ outer: "Y", inner: "Y", revenue: 75 }],
+    },
+  ];
+
+  const parentRowA: PivotDataRow = nestedData[0];
+  const childRowXUnderA: PivotDataRow = nestedData[0].subRows![0];
+  const parentRowB: PivotDataRow = nestedData[1];
+
+  function setupNestingLevelTest() {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    // Parent row header clicks: only "outer" filter
+    vi.mocked(getFiltersForRowHeader).mockImplementation(
+      (_config, rowId, _data) => {
+        if (rowId === "1") return makePivotFilter("outer", ["A"]);
+        if (rowId === "2") return makePivotFilter("outer", ["B"]);
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    // Child cell clicks: "outer" + "inner" filter
+    vi.mocked(getFiltersForCell).mockImplementation(
+      (_config, rowId, _colId) => {
+        if (rowId === "1.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["A"] },
+            { name: "inner", values: ["X"] },
+          ]);
+        }
+        if (rowId === "2.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["B"] },
+            { name: "inner", values: ["Y"] },
+          ]);
+        }
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(
+          nestedConfigTwoDims(),
+        ) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(nestedData),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    return { result, filterClass, selfFilteredDimensions };
+  }
+
+  it("should reset when parent is selected then child cell is clicked", () => {
+    const { result, filterClass } = setupNestingLevelTest();
+
+    // Click parent row header A (depth 0)
+    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+
+    let sel = get(result.clickSelection);
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
+    expect(sel.currentRowDepth).toBe(0);
+
+    // Now click child cell X under A (depth 1) — should reset parent selection
+    filterClass.addDimensionValueSelections.mockClear();
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+
+    sel = get(result.clickSelection);
+
+    // Parent selection should be gone
+    expect(sel.isRowHeaderSelected(dkA)).toBe(false);
+    // Child cell should be selected
+    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
+    expect(sel.currentRowDepth).toBe(1);
+
+    // Old parent value should have been removed via toggleDimensionValueSelections
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "outer",
+      ["A"],
+      false,
+      false,
+    );
+
+    result.destroy();
+  });
+
+  it("should reset when child is selected then parent header is clicked", () => {
+    const { result, filterClass } = setupNestingLevelTest();
+
+    // Click child cell X under A (depth 1)
+    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+
+    let sel = get(result.clickSelection);
+    expect(sel.currentRowDepth).toBe(1);
+
+    // Now click parent header B (depth 0) — should reset child selection
+    filterClass.addDimensionValueSelections.mockClear();
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    result.handleCellClickToFilter("2", "outer", true, parentRowB);
+
+    sel = get(result.clickSelection);
+
+    // Child cell should be gone
+    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isCellSelected(dkChild, "revenue")).toBe(false);
+
+    // Parent B should be selected
+    const dkB = dimKeyFromDimValues({ outer: "B", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isRowHeaderSelected(dkB)).toBe(true);
+    expect(sel.currentRowDepth).toBe(0);
+
+    result.destroy();
+  });
+
+  it("should NOT reset when clicks are at the same nesting level", () => {
+    const { result } = setupNestingLevelTest();
+
+    // Click parent header A (depth 0)
+    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+
+    // Click parent header B (depth 0) — same level, should accumulate
+    result.handleCellClickToFilter("2", "outer", true, parentRowB);
+
+    const sel = get(result.clickSelection);
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+    const dkB = dimKeyFromDimValues({ outer: "B", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
+    expect(sel.isRowHeaderSelected(dkB)).toBe(true);
+    expect(sel.currentRowDepth).toBe(0);
+
+    result.destroy();
+  });
+});
+
+describe("pivot-click-to-filter: bordered-header anchoring", () => {
+  // Same data as nesting level tests
+  const nestedData: PivotDataRow[] = [
+    {
+      outer: "A",
+      revenue: 100,
+      subRows: [{ outer: "X", inner: "X", revenue: 50 }],
+    },
+    {
+      outer: "B",
+      revenue: 200,
+      subRows: [{ outer: "Y", inner: "Y", revenue: 75 }],
+    },
+  ];
+
+  const parentRowA: PivotDataRow = nestedData[0];
+  const childRowXUnderA: PivotDataRow = nestedData[0].subRows![0];
+
+  function setupAnchoringTest() {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    vi.mocked(getFiltersForRowHeader).mockImplementation(
+      (_config, rowId, _data) => {
+        if (rowId === "1") return makePivotFilter("outer", ["A"]);
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    vi.mocked(getFiltersForCell).mockImplementation(
+      (_config, rowId, _colId) => {
+        if (rowId === "1.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["A"] },
+            { name: "inner", values: ["X"] },
+          ]);
+        }
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(
+          nestedConfigTwoDims(),
+        ) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(nestedData),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    return { result, filterClass, selfFilteredDimensions };
+  }
+
+  it("clicking derived-blue header adds border without filter change", () => {
+    const { result, filterClass } = setupAnchoringTest();
+
+    // Click child cell X under A
+    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+    filterClass.addDimensionValueSelections.mockClear();
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    // Now click parent header A (derived-blue from child selection)
+    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+
+    const sel = get(result.clickSelection);
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+
+    // Header should now be bordered
+    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
+
+    // Child cell should still be selected
+    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
+
+    // No filter changes should have occurred
+    expect(filterClass.addDimensionValueSelections).not.toHaveBeenCalled();
+    expect(filterClass.toggleDimensionValueSelections).not.toHaveBeenCalled();
+
+    result.destroy();
+  });
+
+  it("re-clicking bordered header with children removes border only", () => {
+    const { result, filterClass } = setupAnchoringTest();
+
+    // Click child cell, then border the parent
+    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+    filterClass.addDimensionValueSelections.mockClear();
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    // Re-click the bordered parent header
+    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+
+    const sel = get(result.clickSelection);
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+
+    // Border should be removed
+    expect(sel.isRowHeaderSelected(dkA)).toBe(false);
+
+    // Child cell should still be selected
+    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
+
+    // No filter changes
+    expect(filterClass.addDimensionValueSelections).not.toHaveBeenCalled();
+    expect(filterClass.toggleDimensionValueSelections).not.toHaveBeenCalled();
+
+    result.destroy();
+  });
+
+  it("bordered header persists when child cell is deselected", () => {
+    const { result, filterClass } = setupAnchoringTest();
+
+    // Click child cell, then border the parent
+    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+    filterClass.addDimensionValueSelections.mockClear();
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    // Deselect the child cell
+    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+
+    const sel = get(result.clickSelection);
+
+    // Child cell should be gone
+    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isCellSelected(dkChild, "revenue")).toBe(false);
+
+    // Bordered parent should still be there
+    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
+
+    // "inner" and "outer" from child should be removed (orphaned)
+    // but "outer"="A" should be retained by the bordered header
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "inner",
+      ["X"],
+      false,
+      false,
+    );
+    // "outer"="A" should NOT be removed since the bordered header retains it
+    const outerToggleCalls =
+      filterClass.toggleDimensionValueSelections.mock.calls.filter(
+        (call: unknown[]) => call[0] === "outer",
+      );
+    expect(outerToggleCalls.length).toBe(0);
+
+    result.destroy();
+  });
+});
+
+describe("pivot-click-to-filter: parent×parent promotion", () => {
+  // Nested rows: outer > inner, columns: region > category
+  const nestedData: PivotDataRow[] = [
+    {
+      outer: "Zoom",
+      revenue: 100,
+      subRows: [{ outer: "US-East", inner: "US-East", revenue: 50 }],
+    },
+  ];
+
+  const parentRowZoom: PivotDataRow = nestedData[0];
+  const childRowUSEast: PivotDataRow = nestedData[0].subRows![0];
+
+  it("bordered parent + parent column click promotes to parent×parent", () => {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    // Child cell clicks return outer+inner filters
+    vi.mocked(getFiltersForCell).mockImplementation(
+      (_config, rowId, colId) => {
+        if (rowId === "1.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["Zoom"] },
+            { name: "inner", values: ["US-East"] },
+            { name: "region", values: ["NA"] },
+          ]);
+        }
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    vi.mocked(getFiltersForColumnHeader).mockImplementation(
+      (_config, path) => {
+        if (path["quarter"]) {
+          return makePivotFilter("quarter", [path["quarter"]]);
+        }
+        return {
+          filters: undefined,
+          timeRange: { start: undefined, end: undefined },
+        };
+      },
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable(
+          nestedConfigTwoDims(),
+        ) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(nestedData),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    // Click 1: child cell (Zoom > US-East × NA region)
+    result.handleCellClickToFilter("1.0", "revenue", false, childRowUSEast);
+
+    // Click 2: border the parent header (Zoom)
+    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
+
+    let sel = get(result.clickSelection);
+    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
+      "outer",
+      "inner",
+    ]);
+    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
+    expect(sel.cellSelections.size).toBe(1);
+
+    // Click 3: parent column header Q3
+    filterClass.addDimensionValueSelections.mockClear();
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    result.handleColumnHeaderClick({ quarter: "Q3" });
+
+    sel = get(result.clickSelection);
+
+    // Cell selections should be cleared (promoted to parent×parent)
+    expect(sel.cellSelections.size).toBe(0);
+
+    // Row header should still be there
+    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
+
+    // Column header should be selected
+    expect(sel.isColumnHeaderSelected({ quarter: "Q3" })).toBe(true);
+
+    // Child filter values (inner, region) should have been removed
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "inner",
+      ["US-East"],
+      false,
+      false,
+    );
+
+    // New column filter should have been added
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
+      "quarter",
+      ["Q3"],
+    );
+
+    result.destroy();
+  });
+});
+
+describe("pivot-click-to-filter: deselect retains shared column filters", () => {
+  it("should retain column dimension values still needed by remaining cells", () => {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+    // Two rows: New York and Bronx; column: status=Closed, type=Intersection
+    const data: PivotDataRow[] = [
+      { borough: "New York", revenue: 100 },
+      { borough: "Bronx", revenue: 200 },
+    ];
+
+    // Cell clicks return row + column filters
+    vi.mocked(getFiltersFromRow).mockImplementation(
+      (_config, rowData, _colId) => {
+        const borough = rowData["borough"] as string;
+        return makeMultiDimPivotFilter([
+          { name: "borough", values: [borough] },
+          { name: "status", values: ["Closed"] },
+          { name: "type", values: ["Intersection"] },
+        ]);
+      },
+    );
+
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable({
+          rowDimensionNames: ["borough"],
+          colDimensionNames: ["status", "type"],
+          measureNames: ["revenue"],
+          isFlat: true,
+        }) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(data),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    // Click cell 1: New York × Closed > Intersection
+    result.handleCellClickToFilter("1", "revenue", false, data[0]);
+
+    // Click cell 2: Bronx × Closed > Intersection
+    result.handleCellClickToFilter("2", "revenue", false, data[1]);
+
+    // Verify both cells are selected
+    const dkNY = dimKeyFromRow(data[0], ["borough"]);
+    const dkBronx = dimKeyFromRow(data[1], ["borough"]);
+    let sel = get(result.clickSelection);
+    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
+    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(true);
+
+    // Now deselect Bronx
+    filterClass.addDimensionValueSelections.mockClear();
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    result.handleCellClickToFilter("2", "revenue", false, data[1]);
+
+    sel = get(result.clickSelection);
+    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(false);
+    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
+
+    // "borough"="Bronx" should be removed (orphaned)
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "borough",
+      ["Bronx"],
+      false,
+      false,
+    );
+
+    // "status"="Closed" and "type"="Intersection" should NOT be removed
+    // because Cell 1 (New York) still needs them
+    const statusToggleCalls =
+      filterClass.toggleDimensionValueSelections.mock.calls.filter(
+        (call: unknown[]) => call[0] === "status",
+      );
+    const typeToggleCalls =
+      filterClass.toggleDimensionValueSelections.mock.calls.filter(
+        (call: unknown[]) => call[0] === "type",
+      );
+    expect(statusToggleCalls.length).toBe(0);
+    expect(typeToggleCalls.length).toBe(0);
+
+    result.destroy();
+  });
+});
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 03bf79bd13a..8af65c25f61 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -21,6 +21,7 @@ import {
   dimKeyFromRow,
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-click-selection";
 import {
+  type ExtractedFilter,
   type PivotRowSelectionState,
   computePivotRowSelection,
   extractDimensionFiltersFromExpression,
@@ -37,6 +38,7 @@ import {
 } from "@rilldata/web-common/features/dashboards/pivot/pivot-utils";
 import type {
   PivotDataRow,
+  PivotDataState,
   PivotDataStore,
   PivotDataStoreConfig,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
@@ -241,52 +243,54 @@ export function createPivotClickToFilter(
     return retainedValues;
   }
 
-  function applyDimensionFilters(
-    filters: V1Expression,
-    isDeselect: boolean,
+  /**
+   * Shared skeleton for all filter updates: clones selection state, applies
+   * removals and additions to the FilterManager, updates stores, and syncs URL.
+   */
+  function applyFilterUpdate(opts: {
+    removals: ExtractedFilter[];
+    additions: ExtractedFilter[];
     updateSelectionSets: (
       rowHeaders: Map<string, SelectionEntry>,
       cells: Map<string, SelectionEntry>,
       colHeaders: Set<string>,
-    ) => void,
-  ) {
-    const dimensionFilters = extractDimensionFiltersFromExpression(filters);
-    if (dimensionFilters.length === 0) return;
+    ) => void;
+  }) {
+    const { removals, additions, updateSelectionSets } = opts;
+    const allDimFilters = [...removals, ...additions];
+    if (allDimFilters.length === 0) return;
 
-    // Capture which dimensions were already in the global filter before this click
     const preExistingDims = getActiveDimensionNames(get(whereFilterStore));
-
     const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
     if (!filterClass) return;
 
-    // Update selection sets first so we can compute retained values
+    // Clone and update selection sets
     const $clickSelection = get(clickSelectionStore);
     const updatedRowHeaders = new Map($clickSelection.rowHeaderSelections);
     const updatedCells = new Map($clickSelection.cellSelections);
     const updatedColHeaders = new Set($clickSelection.columnHeaderSelections);
     updateSelectionSets(updatedRowHeaders, updatedCells, updatedColHeaders);
 
-    // Clear temporary filter status for all dimensions being changed
-    dimensionFilters.forEach(({ dimensionName }) => {
+    // Clear temporary filter status for all affected dimensions
+    allDimFilters.forEach(({ dimensionName }) => {
       filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
     });
 
     let filterString: string | null = null;
-    if (isDeselect) {
-      // Compute which values are still needed by remaining selections
+
+    // Remove orphaned values
+    if (removals.length > 0) {
       const retainedValues = collectRetainedDimensionValues(
         updatedRowHeaders,
         updatedCells,
         updatedColHeaders,
       );
 
-      // Only toggle (remove) values that are no longer referenced
-      dimensionFilters.forEach(({ dimensionName, values }) => {
+      for (const { dimensionName, values } of removals) {
         const stillNeeded = retainedValues.get(dimensionName);
         const orphanedValues = stillNeeded
           ? values.filter((v) => !stillNeeded.has(v))
           : values;
-
         if (orphanedValues.length > 0) {
           filterString = filterClass.toggleDimensionValueSelections(
             dimensionName,
@@ -295,24 +299,26 @@ export function createPivotClickToFilter(
             false,
           );
         }
-      });
+      }
 
-      // If no values were actually removed, get current filter string for URL
-      if (filterString === null) {
-        dimensionFilters.forEach(({ dimensionName }) => {
+      // If no orphans were found (all values still retained by other
+      // selections), get the current filter string for URL sync.
+      if (filterString === null && additions.length === 0) {
+        for (const { dimensionName } of removals) {
           filterString = filterClass.addDimensionValueSelections(
             dimensionName,
             [],
           );
-        });
+        }
       }
-    } else {
-      dimensionFilters.forEach(({ dimensionName, values }) => {
-        filterString = filterClass.addDimensionValueSelections(
-          dimensionName,
-          values,
-        );
-      });
+    }
+
+    // Add new values
+    for (const { dimensionName, values } of additions) {
+      filterString = filterClass.addDimensionValueSelections(
+        dimensionName,
+        values,
+      );
     }
 
     clickSelectionStore.set(
@@ -323,7 +329,7 @@ export function createPivotClickToFilter(
     const wasInactive = get(selfFilteredDimensions).size === 0;
     selfFilteredDimensions.update((dims) => {
       const next = new Set(dims);
-      dimensionFilters.forEach(({ dimensionName }) => {
+      allDimFilters.forEach(({ dimensionName }) => {
         if (!preExistingDims.has(dimensionName)) {
           next.add(dimensionName);
         }
@@ -341,6 +347,25 @@ export function createPivotClickToFilter(
     }
   }
 
+  function applyDimensionFilters(
+    filters: V1Expression,
+    isDeselect: boolean,
+    updateSelectionSets: (
+      rowHeaders: Map<string, SelectionEntry>,
+      cells: Map<string, SelectionEntry>,
+      colHeaders: Set<string>,
+    ) => void,
+  ) {
+    const dimensionFilters = extractDimensionFiltersFromExpression(filters);
+    if (dimensionFilters.length === 0) return;
+
+    applyFilterUpdate({
+      removals: isDeselect ? dimensionFilters : [],
+      additions: isDeselect ? [] : dimensionFilters,
+      updateSelectionSets,
+    });
+  }
+
   /**
    * Atomically replaces old selections with new ones in a single URL update.
    * Phase 1: removes orphaned filter values from old selections.
@@ -360,80 +385,11 @@ export function createPivotClickToFilter(
     const newDimFilters = extractDimensionFiltersFromExpression(newFilters);
     if (oldDimFilters.length === 0 && newDimFilters.length === 0) return;
 
-    const allDimFilters = [...oldDimFilters, ...newDimFilters];
-    const preExistingDims = getActiveDimensionNames(get(whereFilterStore));
-
-    const filterClass = filterManager.metricsViewFilters.get(metricsViewName);
-    if (!filterClass) return;
-
-    // Clone and update selection sets (remove old key, add new key)
-    const $clickSelection = get(clickSelectionStore);
-    const updatedRowHeaders = new Map($clickSelection.rowHeaderSelections);
-    const updatedCells = new Map($clickSelection.cellSelections);
-    const updatedColHeaders = new Set($clickSelection.columnHeaderSelections);
-    updateSelectionSets(updatedRowHeaders, updatedCells, updatedColHeaders);
-
-    // Clear temporary filter status for all affected dimensions
-    allDimFilters.forEach(({ dimensionName }) => {
-      filterManager.checkTemporaryFilter(dimensionName, [metricsViewName]);
+    applyFilterUpdate({
+      removals: oldDimFilters,
+      additions: newDimFilters,
+      updateSelectionSets,
     });
-
-    let filterString: string | null = null;
-
-    // Phase 1: Remove orphaned values from old selections
-    const retainedValues = collectRetainedDimensionValues(
-      updatedRowHeaders,
-      updatedCells,
-      updatedColHeaders,
-    );
-
-    oldDimFilters.forEach(({ dimensionName, values }) => {
-      const stillNeeded = retainedValues.get(dimensionName);
-      const orphanedValues = stillNeeded
-        ? values.filter((v) => !stillNeeded.has(v))
-        : values;
-      if (orphanedValues.length > 0) {
-        filterString = filterClass.toggleDimensionValueSelections(
-          dimensionName,
-          orphanedValues,
-          false,
-          false,
-        );
-      }
-    });
-
-    // Phase 2: Add new selection's values
-    newDimFilters.forEach(({ dimensionName, values }) => {
-      filterString = filterClass.addDimensionValueSelections(
-        dimensionName,
-        values,
-      );
-    });
-
-    clickSelectionStore.set(
-      buildClickSelection(updatedRowHeaders, updatedCells, updatedColHeaders),
-    );
-
-    // Mark newly-added dimensions as self-filtered
-    const wasInactive = get(selfFilteredDimensions).size === 0;
-    selfFilteredDimensions.update((dims) => {
-      const next = new Set(dims);
-      allDimFilters.forEach(({ dimensionName }) => {
-        if (!preExistingDims.has(dimensionName)) {
-          next.add(dimensionName);
-        }
-      });
-      return next;
-    });
-    if (wasInactive && get(selfFilteredDimensions).size > 0) {
-      onBecomeActive?.();
-    }
-
-    if (filterString !== null) {
-      filterManager.applyFiltersToUrl(
-        new Map([[metricsViewName, filterString]]),
-      );
-    }
   }
 
   /**
@@ -472,8 +428,118 @@ export function createPivotClickToFilter(
     );
   }
 
+  /**
+   * Clears all existing row/cell/column selections and removes their
+   * filter values. Called when a new click's nesting depth doesn't match.
+   * Collects dimension values directly from selection entries to build removals.
+   */
+  function applyRowLevelReset(selection: PivotClickSelectionState) {
+    // Collect all dimension values from existing selections
+    const dimValuesByName = new Map<string, Set<string | null>>();
+    const addValue = (name: string, value: string | null) => {
+      let set = dimValuesByName.get(name);
+      if (!set) {
+        set = new Set();
+        dimValuesByName.set(name, set);
+      }
+      set.add(value);
+    };
+
+    for (const entry of selection.rowHeaderSelections.values()) {
+      for (const [name, value] of Object.entries(entry.dimValues)) {
+        addValue(name, value);
+      }
+    }
+    for (const entry of selection.cellSelections.values()) {
+      for (const [name, value] of Object.entries(entry.dimValues)) {
+        addValue(name, value);
+      }
+    }
+    for (const colKey of selection.columnHeaderSelections) {
+      const entries = JSON.parse(colKey) as [string, string][];
+      for (const [name, value] of entries) {
+        addValue(name, value);
+      }
+    }
+
+    const removals: ExtractedFilter[] = [...dimValuesByName.entries()].map(
+      ([dimensionName, values]) => ({
+        dimensionName,
+        values: [...values],
+      }),
+    );
+
+    applyFilterUpdate({
+      removals,
+      additions: [],
+      updateSelectionSets: (rowHeaders, cells, colHeaders) => {
+        rowHeaders.clear();
+        cells.clear();
+        colHeaders.clear();
+      },
+    });
+  }
+
   // --- Click handlers ---
 
+  /**
+   * Flat table single-cell-per-row: if the same row already has a selected
+   * dimension cell, atomically replace it with the new click. Returns true
+   * if the replacement was handled, false to fall through to normal toggle.
+   */
+  function tryFlatTableCellReplacement(
+    config: PivotDataStoreConfig,
+    selection: PivotClickSelectionState,
+    data: PivotDataState,
+    dk: string,
+    columnId: string,
+    rowData: PivotDataRow,
+    newFilters: V1Expression,
+    storedDimValues: Record<string, string | null>,
+    upToDimensionIndex: number | undefined,
+  ): boolean {
+    // Find existing cell keys for this dimKey (same row)
+    const existingEntries: [string, SelectionEntry][] = [];
+    for (const [key, entry] of selection.cellSelections) {
+      if (entry.dimKey === dk) {
+        existingEntries.push([key, entry]);
+      }
+    }
+    if (existingEntries.length === 0) return false;
+
+    // Compute old cell's filters so we can remove its orphaned values
+    const [, oldEntry] = existingEntries[0];
+    const oldDimIdx = config.rowDimensionNames.indexOf(oldEntry.columnId);
+    const oldUpToDimIdx = oldDimIdx >= 0 ? oldDimIdx : undefined;
+    const oldCellFilters = getFiltersFromRow(
+      config,
+      rowData,
+      oldEntry.columnId,
+      data.columnDimensionAxes ?? {},
+      oldUpToDimIdx,
+    );
+
+    if (!oldCellFilters.filters) return false;
+
+    applyReplacementFilters(
+      oldCellFilters.filters,
+      newFilters,
+      (_nextRowHeaders, nextCells) => {
+        for (const [key] of existingEntries) {
+          nextCells.delete(key);
+        }
+        const newKey = cellKey(dk, columnId);
+        nextCells.set(newKey, {
+          dimKey: dk,
+          dimValues: storedDimValues,
+          columnId,
+          dimClickIndex: upToDimensionIndex,
+        });
+      },
+    );
+    return true;
+  }
+
   function handleCellClickToFilter(
     rowId: string,
     columnId: string,
@@ -510,6 +576,72 @@ export function createPivotClickToFilter(
       ? $clickSelection.isRowHeaderSelected(dk)
       : $clickSelection.isCellSelected(dk, columnId);
 
+    // Row nesting depth for nested tables
+    const clickRowDepth = isNested
+      ? Object.keys(dimValues).length - 1
+      : undefined;
+
+    // Bordered-header anchoring for nested tables.
+    // If clicking a row header whose dimension values are already in the filter
+    // (derived-blue from child cell selections), toggle the border only without
+    // changing filters. This must be checked BEFORE the nesting level reset
+    // since anchoring is an explicit exception to the level-switch rule.
+    if (isRowHeader && isNested) {
+      const isDerivedBlue = [...$clickSelection.cellSelections.values()].some(
+        (entry) =>
+          Object.entries(dimValues).every(
+            ([dim, val]) => entry.dimValues[dim] === val,
+          ),
+      );
+
+      if (!isDeselect && isDerivedBlue) {
+        // Header is derived-blue: add border without filter change
+        const $sel = get(clickSelectionStore);
+        const updated = new Map($sel.rowHeaderSelections);
+        updated.set(dk, {
+          dimKey: dk,
+          dimValues,
+          columnId,
+          rowDepth: clickRowDepth,
+        });
+        clickSelectionStore.set(
+          buildClickSelection(
+            updated,
+            new Map($sel.cellSelections),
+            new Set($sel.columnHeaderSelections),
+          ),
+        );
+        return;
+      }
+
+      if (isDeselect && isDerivedBlue) {
+        // Bordered header with child selections: remove border only, no filter change
+        const $sel = get(clickSelectionStore);
+        const updated = new Map($sel.rowHeaderSelections);
+        updated.delete(dk);
+        clickSelectionStore.set(
+          buildClickSelection(
+            updated,
+            new Map($sel.cellSelections),
+            new Set($sel.columnHeaderSelections),
+          ),
+        );
+        return;
+      }
+    }
+
+    // Nesting level must match. In nested tables, mismatched depths
+    // reset everything and the new click starts fresh.
+    if (
+      isNested &&
+      !isDeselect &&
+      clickRowDepth !== undefined &&
+      $clickSelection.currentRowDepth >= 0 &&
+      clickRowDepth !== $clickSelection.currentRowDepth
+    ) {
+      applyRowLevelReset($clickSelection);
+    }
+
     // For flat-table dimension cell clicks, only filter up to (and including) the
     // clicked column's dimension index, not all row dimensions.
     const flatDimIdx =
@@ -542,7 +674,7 @@ export function createPivotClickToFilter(
 
     // Build the dimValues to store; for partial dimension clicks, only keep
     // dimensions up to the clicked index
-    const storedDimValues =
+    let storedDimValues: Record<string, string | null> =
       upToDimensionIndex !== undefined
         ? Object.fromEntries(
             Object.entries(dimValues).filter(([dim]) => {
@@ -550,54 +682,39 @@ export function createPivotClickToFilter(
               return idx >= 0 && idx <= upToDimensionIndex;
             }),
           )
-        : dimValues;
+        : { ...dimValues };
+
+    // For data cell clicks (not row headers), also capture column dimension
+    // values so collectRetainedDimensionValues can detect shared column filters
+    // during deselect. Without this, deselecting one cell would orphan column
+    // filter values still needed by other cells in the same column.
+    if (!isRowHeader) {
+      const colDimNames = new Set($config.colDimensionNames);
+      const allDimFilters = extractDimensionFiltersFromExpression(
+        cellFilters.filters,
+      );
+      for (const { dimensionName, values } of allDimFilters) {
+        if (colDimNames.has(dimensionName) && !(dimensionName in storedDimValues)) {
+          storedDimValues[dimensionName] = values[0] ?? null;
+        }
+      }
+    }
 
     // Flat table: replace existing cell selection in the same row instead of
     // accumulating. Nested tables allow multi-select within a row.
     if ($config.isFlat && !isRowHeader && !isDeselect) {
-      // Find existing cell keys for this dimKey
-      const existingEntries: [string, SelectionEntry][] = [];
-      for (const [key, entry] of $clickSelection.cellSelections) {
-        if (entry.dimKey === dk) {
-          existingEntries.push([key, entry]);
-        }
-      }
-
-      if (existingEntries.length > 0) {
-        // Compute old cell's filters so we can remove its orphaned values
-        const [, oldEntry] = existingEntries[0];
-        const oldDimIdx = $config.rowDimensionNames.indexOf(oldEntry.columnId);
-        const oldUpToDimIdx = oldDimIdx >= 0 ? oldDimIdx : undefined;
-        const oldCellFilters = getFiltersFromRow(
-          $config,
-          rowData,
-          oldEntry.columnId,
-          $data.columnDimensionAxes ?? {},
-          oldUpToDimIdx,
-        );
-
-        if (oldCellFilters.filters) {
-          applyReplacementFilters(
-            oldCellFilters.filters,
-            cellFilters.filters,
-            (_nextRowHeaders, nextCells) => {
-              // Remove all existing cell keys for this row
-              for (const [key] of existingEntries) {
-                nextCells.delete(key);
-              }
-              // Add the new cell
-              const newKey = cellKey(dk, columnId);
-              nextCells.set(newKey, {
-                dimKey: dk,
-                dimValues: storedDimValues,
-                columnId,
-                dimClickIndex: upToDimensionIndex,
-              });
-            },
-          );
-          return;
-        }
-      }
+      const handled = tryFlatTableCellReplacement(
+        $config,
+        $clickSelection,
+        $data,
+        dk,
+        columnId,
+        rowData,
+        cellFilters.filters,
+        storedDimValues,
+        upToDimensionIndex,
+      );
+      if (handled) return;
     }
 
     applyDimensionFilters(
@@ -612,6 +729,7 @@ export function createPivotClickToFilter(
               dimKey: dk,
               dimValues,
               columnId,
+              rowDepth: clickRowDepth,
             });
           }
         } else {
@@ -624,6 +742,7 @@ export function createPivotClickToFilter(
               dimValues: storedDimValues,
               columnId,
               dimClickIndex: upToDimensionIndex,
+              rowDepth: clickRowDepth,
             });
           }
         }
@@ -657,6 +776,65 @@ export function createPivotClickToFilter(
       return;
     }
 
+    // Parent×parent promotion. If bordered row headers exist alongside
+    // child cell selections, clicking a parent column header clears child
+    // selections and promotes to parent-row × parent-column.
+    if (
+      !isDeselect &&
+      $clickSelection.rowHeaderSelections.size > 0 &&
+      $clickSelection.cellSelections.size > 0
+    ) {
+      const newKey = columnHeaderKey(dimensionPath);
+
+      // Build removals from all child cell selections
+      const cellRemovals = new Map<string, Set<string | null>>();
+      for (const entry of $clickSelection.cellSelections.values()) {
+        for (const [name, value] of Object.entries(entry.dimValues)) {
+          let set = cellRemovals.get(name);
+          if (!set) {
+            set = new Set();
+            cellRemovals.set(name, set);
+          }
+          set.add(value);
+        }
+      }
+
+      // Also remove old column header values
+      for (const colKey of $clickSelection.columnHeaderSelections) {
+        const entries = JSON.parse(colKey) as [string, string][];
+        for (const [name, value] of entries) {
+          let set = cellRemovals.get(name);
+          if (!set) {
+            set = new Set();
+            cellRemovals.set(name, set);
+          }
+          set.add(value);
+        }
+      }
+
+      const removals: ExtractedFilter[] = [...cellRemovals.entries()].map(
+        ([dimensionName, values]) => ({
+          dimensionName,
+          values: [...values],
+        }),
+      );
+
+      const newDimFilters = extractDimensionFiltersFromExpression(
+        colFilters.filters,
+      );
+
+      applyFilterUpdate({
+        removals,
+        additions: newDimFilters,
+        updateSelectionSets: (_nextRowHeaders, nextCells, nextColHeaders) => {
+          nextCells.clear();
+          nextColHeaders.clear();
+          nextColHeaders.add(newKey);
+        },
+      });
+      return;
+    }
+
     // Same level or deselect: use existing toggle behavior
     applyDimensionFilters(
       colFilters.filters,
diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index 9db37ce7758..e0005c0e336 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -514,6 +514,7 @@
             class:cross-intersection={cs.crossIntersection}
             class:cross-row-arm={cs.crossRowArm}
             class:cross-col-arm={cs.crossColArm}
+            class:partial-aggregate-cell={cs.partialAggregateCell}
             class:cross-selected-row-header={cs.crossSelectedRowHeader}
             class:interactive-cell={cs.interactiveCell}
             class:border-r={shouldShowRightBorder(i)}
@@ -825,6 +826,11 @@
     @apply bg-primary-100;
   }
 
+  /* Grey background for data cells on parent rows that partially contain filtered data */
+  .partial-aggregate-cell.cell {
+    @apply bg-surface-muted;
+  }
+
   /* Parent column header highlight when a child column header is selected */
   .ancestor-selected-col-header .header-cell {
     @apply bg-primary-50;
diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
index 960351e9638..b5db656f492 100644
--- a/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
@@ -134,6 +134,8 @@ export interface NestedCellState {
   colDimHoverBody: boolean;
   selectedColBody: boolean;
   cellSelectedRowHeader: boolean;
+  /** Grey background for data cells on parent rows that partially contain filtered data */
+  partialAggregateCell: boolean;
   crossIntersection: boolean;
   crossRowArm: boolean;
   crossColArm: boolean;
@@ -182,6 +184,8 @@ export function nestedCellState(ctx: NestedCellContext): NestedCellState {
     colDimHoverBody: ctx.inHoveredCol,
     selectedColBody: ctx.inSelectedCol && !ctx.hasCrossSelection,
     cellSelectedRowHeader: ctx.cellIndex === 0 && ctx.hasClickedCell,
+    partialAggregateCell:
+      ctx.isAncestorOfSelectedHeader && ctx.cellIndex > 0 && !ctx.hasCrossSelection,
     crossIntersection:
       ctx.hasCrossSelection &&
       ctx.isRowHeaderSelected &&
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 1f1fc19b68b..1ed5efe7de8 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -77,6 +77,8 @@ export interface SelectionEntry {
   columnId: string;
   /** For flat-table dimension cell clicks: the index into rowDimensionNames */
   dimClickIndex?: number;
+  /** Row nesting depth for nested tables: 0 = parent, 1 = first child, etc. */
+  rowDepth?: number;
 }
 
 // ---- Selection state ----
@@ -112,6 +114,11 @@ export interface PivotClickSelectionState {
   isAncestorOfSelectedColumnHeader: (
     dimensionPath: Record<string, string>,
   ) => boolean;
+  /**
+   * Returns the row nesting depth of existing selections, or -1 if none.
+   * All row selections are at the same depth (enforced by nesting level matching).
+   */
+  currentRowDepth: number;
 }
 
 export function createEmptyClickSelectionState(): PivotClickSelectionState {
@@ -128,6 +135,7 @@ export function createEmptyClickSelectionState(): PivotClickSelectionState {
     selectedCellColumnIds: new Set(),
     getClickedDimensionIndex: () => -1,
     isAncestorOfSelectedColumnHeader: () => false,
+    currentRowDepth: -1,
   };
 }
 
@@ -162,12 +170,31 @@ export function buildClickSelection(
     }
   }
 
+  // Derive current row depth from the first row-level selection found.
+  // All selections are at the same depth (enforced by nesting level matching).
+  let currentRowDepth = -1;
+  for (const entry of rowHeaders.values()) {
+    if (entry.rowDepth !== undefined) {
+      currentRowDepth = entry.rowDepth;
+      break;
+    }
+  }
+  if (currentRowDepth === -1) {
+    for (const entry of cells.values()) {
+      if (entry.rowDepth !== undefined) {
+        currentRowDepth = entry.rowDepth;
+        break;
+      }
+    }
+  }
+
   return {
     rowHeaderSelections: rowHeaders,
     cellSelections: cells,
     columnHeaderSelections: colHeaders,
     hasAnySelection: hasAny,
     hasCrossSelection,
+    currentRowDepth,
     isRowHeaderSelected: (dk) => rowHeaders.has(dk),
     isCellSelected: (dk, cid) => cells.has(cellKey(dk, cid)),
     hasSelectedCellInRow: (dk) => rowsWithSelectedCells.has(dk),
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 62f3bb5b058..fdf98b37f7a 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -1,18 +1,11 @@
 import { getValuesForExpandedKey } from "@rilldata/web-common/features/dashboards/pivot/pivot-expansion";
-import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
-import type { TimeRangeString } from "@rilldata/web-common/lib/time/types";
 import {
   V1Operation,
   type V1Expression,
 } from "@rilldata/web-common/runtime-client";
+import { getValuesInExpression } from "../stores/filter-utils";
 import {
-  createAndExpression,
-  createInExpression,
-  getValuesInExpression,
-} from "../stores/filter-utils";
-import {
-  getTimeForQuery,
-  getTimeGrainFromDimension,
+  buildPivotFilter,
   getValuesForFlatTable,
   isTimeDimension,
 } from "./pivot-utils";
@@ -20,7 +13,6 @@ import type {
   PivotDataRow,
   PivotDataStoreConfig,
   PivotFilter,
-  TimeFilters,
 } from "./types";
 
 export interface PivotRowSelectionState {
@@ -44,7 +36,7 @@ export interface PivotRowSelectionState {
 /**
  * Returns the raw dimension values for a row, including time dimensions.
  * Shared by getDimensionValuesForRow (which filters out time) and
- * getFiltersForRowHeader (which needs time for TimeFilters).
+ * getFiltersForRowHeader (which passes entries to buildPivotFilter).
  */
 function getRawRowValues(
   config: PivotDataStoreConfig,
@@ -115,44 +107,13 @@ export function getFiltersForRowData(
   config: PivotDataStoreConfig,
   rowData: PivotDataRow,
 ): PivotFilter {
-  const { rowDimensionNames } = config;
-
-  const rowNestTimeFilters: TimeFilters[] = [];
-  const rowNestFilters = rowDimensionNames
-    .map((dim) => {
-      const value = rowData[dim];
-      if (value === undefined) return null;
-      if (value === null) return createInExpression(dim, [null]);
-      return createInExpression(dim, [String(value)]);
-    })
-    .filter((f): f is V1Expression => {
-      if (!f) return false;
-      if (
-        isTimeDimension(f.cond?.exprs?.[0].ident, config.time.timeDimension)
-      ) {
-        rowNestTimeFilters.push({
-          timeStart: f.cond?.exprs?.[1].val as string,
-          interval: getTimeGrainFromDimension(
-            f.cond?.exprs?.[0].ident as string,
-          ),
-        });
-        return false;
-      }
-      return true;
-    });
-
-  let rowFilters: V1Expression | undefined = undefined;
-  if (rowNestFilters.length) {
-    rowFilters = createAndExpression(rowNestFilters);
-  }
-
-  const timeRange: TimeRangeString = getTimeForQuery(
-    config.time,
-    rowNestTimeFilters,
-  );
-
-  const filters = mergeFilters(rowFilters, config.whereFilter);
-  return { filters, timeRange };
+  const dimEntries = config.rowDimensionNames
+    .filter((dim) => rowData[dim] !== undefined)
+    .map((dim) => ({
+      name: dim,
+      value: rowData[dim] === null ? null : String(rowData[dim]),
+    }));
+  return buildPivotFilter(config, dimEntries);
 }
 
 /**
@@ -275,41 +236,12 @@ export function getFiltersForRowHeader(
   rowId: string,
   tableData: PivotDataRow[],
 ): PivotFilter {
-  const { rowDimensionNames } = config;
   const values = getRawRowValues(config, rowId, tableData);
-
-  const rowNestTimeFilters: TimeFilters[] = [];
-  const rowNestFilters = values
-    .map((value, index) =>
-      createInExpression(rowDimensionNames[index], [value]),
-    )
-    .filter((f) => {
-      if (
-        isTimeDimension(f.cond?.exprs?.[0].ident, config.time.timeDimension)
-      ) {
-        rowNestTimeFilters.push({
-          timeStart: f.cond?.exprs?.[1].val as string,
-          interval: getTimeGrainFromDimension(
-            f.cond?.exprs?.[0].ident as string,
-          ),
-        });
-        return false;
-      } else return true;
-    });
-
-  let rowFilters: V1Expression | undefined = undefined;
-  if (rowNestFilters.length) {
-    rowFilters = createAndExpression(rowNestFilters);
-  }
-
-  const timeRange: TimeRangeString = getTimeForQuery(
-    config.time,
-    rowNestTimeFilters,
-  );
-
-  const filters = mergeFilters(rowFilters, config.whereFilter);
-
-  return { filters, timeRange };
+  const dimEntries = values.map((value, index) => ({
+    name: config.rowDimensionNames[index],
+    value,
+  }));
+  return buildPivotFilter(config, dimEntries);
 }
 
 /**
@@ -321,35 +253,11 @@ export function getFiltersForColumnHeader(
   config: PivotDataStoreConfig,
   dimensionPath: Record<string, string>,
 ): PivotFilter {
-  const defaultTimeRange = {
-    start: config.time.timeStart,
-    end: config.time.timeEnd,
-  };
-
-  const timeFilters: TimeFilters[] = [];
-  const dimExprs = Object.entries(dimensionPath)
-    .map(([name, value]) => {
-      const expr = createInExpression(name, [value]);
-      if (isTimeDimension(name, config.time.timeDimension)) {
-        timeFilters.push({
-          timeStart: value,
-          interval: getTimeGrainFromDimension(name),
-        });
-        return null;
-      }
-      return expr;
-    })
-    .filter(Boolean) as V1Expression[];
-
-  const timeRange =
-    timeFilters.length > 0
-      ? getTimeForQuery(config.time, timeFilters)
-      : defaultTimeRange;
-
-  const dimFilter =
-    dimExprs.length > 0 ? createAndExpression(dimExprs) : undefined;
-  const filters = mergeFilters(dimFilter, config.whereFilter);
-  return { filters, timeRange };
+  const dimEntries = Object.entries(dimensionPath).map(([name, value]) => ({
+    name,
+    value,
+  }));
+  return buildPivotFilter(config, dimEntries);
 }
 
 // --- Merged from pivot-filter-extraction.ts ---
diff --git a/web-common/src/features/dashboards/pivot/pivot-utils.ts b/web-common/src/features/dashboards/pivot/pivot-utils.ts
index 332179468bf..821afec7b8a 100644
--- a/web-common/src/features/dashboards/pivot/pivot-utils.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-utils.ts
@@ -311,59 +311,80 @@ export function sortAcessors(accessors: string[]) {
   });
 }
 
-function getColumnFiltersFromMinimizedAccessor(
+/**
+ * Extract column dimension name/value pairs from a minimized accessor string.
+ * Used by getFiltersForCell/getFiltersFromRow to combine with row dim entries
+ * before passing to buildPivotFilter.
+ */
+function getColumnDimEntriesFromAccessor(
   config: PivotDataStoreConfig,
   accessor: string,
   columnDimensionAxes: Record<string, string[]> = {},
-) {
+): Array<{ name: string; value: string }> {
   const { colDimensionNames } = config;
-
-  // Strip the measure string from the accessor
   const [accessorWithoutMeasure] = accessor.split("m");
   const accessorParts = accessorWithoutMeasure.split("_");
 
-  let colDimensionFilters: V1Expression[];
+  if (accessorParts[0] === "") return [];
+
+  return accessorParts.map((part) => {
+    const { c, v } = extractNumbers(part);
+    const name = colDimensionNames[c];
+    const value = columnDimensionAxes[name][v];
+    return { name, value };
+  });
+}
+
+/**
+ * Legacy wrapper: returns column filters as V1Expression + timeRange.
+ * Still used by sorting and other non-click-to-filter code paths.
+ */
+function getColumnFiltersFromMinimizedAccessor(
+  config: PivotDataStoreConfig,
+  accessor: string,
+  columnDimensionAxes: Record<string, string[]> = {},
+) {
+  const entries = getColumnDimEntriesFromAccessor(
+    config,
+    accessor,
+    columnDimensionAxes,
+  );
+
   const timeFilters: TimeFilters[] = [];
-  if (accessorParts[0] === "") {
-    // There are no column dimensions in the accessor
-    colDimensionFilters = [];
-  } else {
-    colDimensionFilters = accessorParts
-      .map((part) => {
-        const { c, v } = extractNumbers(part);
-        const columnDimensionName = colDimensionNames[c];
-        const value = columnDimensionAxes[columnDimensionName][v];
-
-        return createInExpression(columnDimensionName, [value]);
-      })
-      .filter((colFilter) => {
-        if (
-          isTimeDimension(
-            colFilter.cond?.exprs?.[0].ident,
-            config.time.timeDimension,
-          )
-        ) {
-          timeFilters.push({
-            timeStart: colFilter.cond?.exprs?.[1].val as string,
-            interval: getTimeGrainFromDimension(
-              colFilter.cond?.exprs?.[0].ident as string,
-            ),
-          });
-          return false;
-        } else return true;
+  const dimExprs: V1Expression[] = [];
+
+  for (const { name, value } of entries) {
+    if (isTimeDimension(name, config.time.timeDimension)) {
+      timeFilters.push({
+        timeStart: value,
+        interval: getTimeGrainFromDimension(name),
       });
+    } else {
+      dimExprs.push(createInExpression(name, [value]));
+    }
   }
 
-  let filterForSort: V1Expression | undefined;
+  const filterForSort =
+    dimExprs.length > 0 ? createAndExpression(dimExprs) : undefined;
+  const timeRange: TimeRangeString = getTimeForQuery(config.time, timeFilters);
+  return { filters: filterForSort, timeRange };
+}
 
-  if (colDimensionFilters.length) {
-    filterForSort = createAndExpression(colDimensionFilters);
+/**
+ * Returns column dimension entries for a cell click, or an empty array
+ * when the column is a row header dimension, a measure, or the table is flat.
+ */
+function getColumnDimEntries(
+  config: PivotDataStoreConfig,
+  colId: string,
+  colDimensionAxes: Record<string, string[]>,
+): Array<{ name: string; value: string }> {
+  const { rowDimensionNames, measureNames, isFlat } = config;
+  const firstDimension = rowDimensionNames?.[0];
+  if (firstDimension === colId || measureNames.includes(colId) || isFlat) {
+    return [];
   }
-  const timeRange: TimeRangeString = getTimeForQuery(config.time, timeFilters);
-  return {
-    filters: filterForSort,
-    timeRange,
-  };
+  return getColumnDimEntriesFromAccessor(config, colId, colDimensionAxes);
 }
 
 /**
@@ -555,6 +576,50 @@ export function getValuesForFlatTable(
   return dimensionValues;
 }
 
+/**
+ * Shared core for all pivot filter builders. Takes dimension name/value pairs,
+ * separates time dimensions into TimeFilters, creates IN expressions for the rest,
+ * computes the narrowed time range, and merges everything with optional extra filters.
+ *
+ * Every public getFiltersFor* function delegates here after extracting its
+ * dimension entries from whichever data source it uses (positional rowId,
+ * direct rowData, column header path, etc.).
+ */
+export function buildPivotFilter(
+  config: PivotDataStoreConfig,
+  dimEntries: Array<{ name: string; value: string | null }>,
+  extraFilters?: V1Expression,
+): PivotFilter {
+  const timeFilters: TimeFilters[] = [];
+  const dimExprs: V1Expression[] = [];
+
+  for (const { name, value } of dimEntries) {
+    const expr = createInExpression(name, [value]);
+    if (isTimeDimension(name, config.time.timeDimension)) {
+      timeFilters.push({
+        timeStart: value as string,
+        interval: getTimeGrainFromDimension(name),
+      });
+    } else {
+      dimExprs.push(expr);
+    }
+  }
+
+  const dimFilter =
+    dimExprs.length > 0 ? createAndExpression(dimExprs) : undefined;
+  const timeRange = getTimeForQuery(config.time, timeFilters);
+
+  let filters: V1Expression | undefined;
+  if (extraFilters) {
+    const combined = mergeFilters(dimFilter, extraFilters);
+    filters = mergeFilters(combined, config.whereFilter);
+  } else {
+    filters = mergeFilters(dimFilter, config.whereFilter);
+  }
+
+  return { filters, timeRange };
+}
+
 export function getFiltersForCell(
   config: PivotDataStoreConfig,
   rowId: string,
@@ -564,23 +629,15 @@ export function getFiltersForCell(
   upToDimensionIndex?: number,
 ): PivotFilter {
   const { rowDimensionNames, measureNames, isFlat } = config;
-  const defaultTimeRange = {
-    start: config.time.timeStart,
-    end: config.time.timeEnd,
-  };
 
   let values: string[];
-
   if (isFlat) {
-    // TODO: Update this when columns can be mixed with measures
     values = getValuesForFlatTable(
       tableData,
       rowDimensionNames,
       rowId,
       measureNames.length > 0,
     );
-    // When clicking a dimension cell, only include dimensions up to (and including)
-    // the clicked column's index.
     if (upToDimensionIndex !== undefined && upToDimensionIndex >= 0) {
       values = values.slice(0, upToDimensionIndex + 1);
     }
@@ -593,57 +650,13 @@ export function getFiltersForCell(
     );
   }
 
-  const rowNestTimeFilters: TimeFilters[] = [];
-  const rowNestFilters = values
-    .map((value, index) =>
-      createInExpression(rowDimensionNames[index], [value]),
-    )
-    .filter((f) => {
-      if (
-        isTimeDimension(f.cond?.exprs?.[0].ident, config.time.timeDimension)
-      ) {
-        rowNestTimeFilters.push({
-          timeStart: f.cond?.exprs?.[1].val as string,
-          interval: getTimeGrainFromDimension(
-            f.cond?.exprs?.[0].ident as string,
-          ),
-        });
-        return false;
-      } else return true;
-    });
-
-  let rowFilters: V1Expression | undefined = undefined;
-  if (rowNestFilters.length) {
-    rowFilters = createAndExpression(rowNestFilters);
-  }
-
-  const timeRangeRow: TimeRangeString = getTimeForQuery(
-    config.time,
-    rowNestTimeFilters,
-  );
-
-  // Get filters for column dimensions
-  let columnFilters: V1Expression | undefined;
-  let timeRangeCol: TimeRangeString;
-  const firstDimension = rowDimensionNames?.[0];
-  if (firstDimension === colId || measureNames.includes(colId) || isFlat) {
-    columnFilters = undefined;
-    timeRangeCol = defaultTimeRange;
-  } else {
-    const { filters, timeRange } = getColumnFiltersFromMinimizedAccessor(
-      config,
-      colId,
-      colDimensionAxes,
-    );
-    columnFilters = filters;
-    timeRangeCol = timeRange;
-  }
+  const rowEntries = values.map((value, index) => ({
+    name: rowDimensionNames[index],
+    value,
+  }));
 
-  const timeRange = mergeTimeStrings(timeRangeRow, timeRangeCol);
-  const cellFilters = mergeFilters(rowFilters, columnFilters);
-  const filters = mergeFilters(cellFilters, config.whereFilter);
-
-  return { filters, timeRange };
+  const colEntries = getColumnDimEntries(config, colId, colDimensionAxes);
+  return buildPivotFilter(config, [...rowEntries, ...colEntries]);
 }
 
 /**
@@ -658,74 +671,24 @@ export function getFiltersFromRow(
   colDimensionAxes: Record<string, string[]> = {},
   upToDimensionIndex?: number,
 ): PivotFilter {
-  const { rowDimensionNames, measureNames, isFlat } = config;
-  const defaultTimeRange = {
-    start: config.time.timeStart,
-    end: config.time.timeEnd,
-  };
-
-  // Extract dimension values directly from the row data object
-  let dimNames = rowDimensionNames;
+  let dimNames = config.rowDimensionNames;
   if (upToDimensionIndex !== undefined && upToDimensionIndex >= 0) {
-    dimNames = rowDimensionNames.slice(0, upToDimensionIndex + 1);
+    dimNames = config.rowDimensionNames.slice(0, upToDimensionIndex + 1);
   }
 
-  const rowNestTimeFilters: TimeFilters[] = [];
-  const rowNestFilters = dimNames
-    .map((dim) => {
-      const value = rowData[dim];
-      if (value === undefined) return null;
-      if (value === null) return createInExpression(dim, [null]);
-      return createInExpression(dim, [String(value)]);
-    })
-    .filter((f): f is V1Expression => {
-      if (!f) return false;
-      if (
-        isTimeDimension(f.cond?.exprs?.[0].ident, config.time.timeDimension)
-      ) {
-        rowNestTimeFilters.push({
-          timeStart: f.cond?.exprs?.[1].val as string,
-          interval: getTimeGrainFromDimension(
-            f.cond?.exprs?.[0].ident as string,
-          ),
-        });
-        return false;
-      }
-      return true;
-    });
-
-  let rowFilters: V1Expression | undefined = undefined;
-  if (rowNestFilters.length) {
-    rowFilters = createAndExpression(rowNestFilters);
-  }
-
-  const timeRangeRow: TimeRangeString = getTimeForQuery(
-    config.time,
-    rowNestTimeFilters,
-  );
-
-  // Get filters for column dimensions
-  let columnFilters: V1Expression | undefined;
-  let timeRangeCol: TimeRangeString;
-  const firstDimension = rowDimensionNames?.[0];
-  if (firstDimension === colId || measureNames.includes(colId) || isFlat) {
-    columnFilters = undefined;
-    timeRangeCol = defaultTimeRange;
-  } else {
-    const { filters, timeRange } = getColumnFiltersFromMinimizedAccessor(
-      config,
-      colId,
-      colDimensionAxes,
-    );
-    columnFilters = filters;
-    timeRangeCol = timeRange;
+  const rowEntries: Array<{ name: string; value: string | null }> = [];
+  for (const dim of dimNames) {
+    const val = rowData[dim];
+    if (val === undefined) continue;
+    if (val === null) {
+      rowEntries.push({ name: dim, value: null });
+    } else if (typeof val === "string" || typeof val === "number") {
+      rowEntries.push({ name: dim, value: String(val) });
+    }
   }
 
-  const timeRange = mergeTimeStrings(timeRangeRow, timeRangeCol);
-  const cellFilters = mergeFilters(rowFilters, columnFilters);
-  const filters = mergeFilters(cellFilters, config.whereFilter);
-
-  return { filters, timeRange };
+  const colEntries = getColumnDimEntries(config, colId, colDimensionAxes);
+  return buildPivotFilter(config, [...rowEntries, ...colEntries]);
 }
 
 export function getErrorFromResponse(

From fa48335ed59f24e18576e465dc5a05501290816f Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 21 Apr 2026 20:00:11 +0530
Subject: [PATCH 39/53] exclusive selection of measure cell and parent row
 header

---
 .../pivot/pivot-click-to-filter.spec.ts       | 592 +++++++-----------
 .../components/pivot/pivot-click-to-filter.ts | 428 +++++++------
 .../dashboards/pivot/pivot-click-selection.ts |  27 -
 3 files changed, 472 insertions(+), 575 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index ea3cee03112..737618db6de 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -957,207 +957,120 @@ describe("pivot-click-to-filter: column header level selection constraint", () =
   });
 });
 
-describe("pivot-click-to-filter: nesting level must match", () => {
-  // Data: outer=A has child inner=X; outer=B has child inner=Y
-  const nestedData: PivotDataRow[] = [
-    {
-      outer: "A",
-      revenue: 100,
-      subRows: [{ outer: "X", inner: "X", revenue: 50 }],
-    },
-    {
-      outer: "B",
-      revenue: 200,
-      subRows: [{ outer: "Y", inner: "Y", revenue: 75 }],
-    },
-  ];
-
-  const parentRowA: PivotDataRow = nestedData[0];
-  const childRowXUnderA: PivotDataRow = nestedData[0].subRows![0];
-  const parentRowB: PivotDataRow = nestedData[1];
-
-  function setupNestingLevelTest() {
+describe("pivot-click-to-filter: deselect retains shared column filters", () => {
+  it("should retain column dimension values still needed by remaining cells", () => {
     const selfFilteredDimensions = writable<Set<string>>(new Set());
     const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
-    // Parent row header clicks: only "outer" filter
-    vi.mocked(getFiltersForRowHeader).mockImplementation(
-      (_config, rowId, _data) => {
-        if (rowId === "1") return makePivotFilter("outer", ["A"]);
-        if (rowId === "2") return makePivotFilter("outer", ["B"]);
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
-      },
-    );
+    // Two rows: New York and Bronx; column: status=Closed, type=Intersection
+    const data: PivotDataRow[] = [
+      { borough: "New York", revenue: 100 },
+      { borough: "Bronx", revenue: 200 },
+    ];
 
-    // Child cell clicks: "outer" + "inner" filter
-    vi.mocked(getFiltersForCell).mockImplementation(
-      (_config, rowId, _colId) => {
-        if (rowId === "1.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["A"] },
-            { name: "inner", values: ["X"] },
-          ]);
-        }
-        if (rowId === "2.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["B"] },
-            { name: "inner", values: ["Y"] },
-          ]);
-        }
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
+    // Cell clicks return row + column filters
+    vi.mocked(getFiltersFromRow).mockImplementation(
+      (_config, rowData, _colId) => {
+        const borough = rowData["borough"] as string;
+        return makeMultiDimPivotFilter([
+          { name: "borough", values: [borough] },
+          { name: "status", values: ["Closed"] },
+          { name: "type", values: ["Intersection"] },
+        ]);
       },
     );
 
     const result = createPivotClickToFilter(
       createFactoryArgs({
-        pivotConfig: writable(
-          nestedConfigTwoDims(),
-        ) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(nestedData),
+        pivotConfig: writable({
+          rowDimensionNames: ["borough"],
+          colDimensionNames: ["status", "type"],
+          measureNames: ["revenue"],
+          isFlat: true,
+        }) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(data),
         filterManager: fm,
         activeComponent: writable<string | null>("pivot-1"),
         selfFilteredDimensions,
       }),
     );
 
-    return { result, filterClass, selfFilteredDimensions };
-  }
-
-  it("should reset when parent is selected then child cell is clicked", () => {
-    const { result, filterClass } = setupNestingLevelTest();
+    // Click cell 1: New York × Closed > Intersection
+    result.handleCellClickToFilter("1", "revenue", false, data[0]);
 
-    // Click parent row header A (depth 0)
-    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+    // Click cell 2: Bronx × Closed > Intersection
+    result.handleCellClickToFilter("2", "revenue", false, data[1]);
 
+    // Verify both cells are selected
+    const dkNY = dimKeyFromRow(data[0], ["borough"]);
+    const dkBronx = dimKeyFromRow(data[1], ["borough"]);
     let sel = get(result.clickSelection);
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
-    expect(sel.currentRowDepth).toBe(0);
+    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
+    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(true);
 
-    // Now click child cell X under A (depth 1) — should reset parent selection
+    // Now deselect Bronx
     filterClass.addDimensionValueSelections.mockClear();
     filterClass.toggleDimensionValueSelections.mockClear();
 
-    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+    result.handleCellClickToFilter("2", "revenue", false, data[1]);
 
     sel = get(result.clickSelection);
+    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(false);
+    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
 
-    // Parent selection should be gone
-    expect(sel.isRowHeaderSelected(dkA)).toBe(false);
-    // Child cell should be selected
-    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
-    expect(sel.currentRowDepth).toBe(1);
-
-    // Old parent value should have been removed via toggleDimensionValueSelections
+    // "borough"="Bronx" should be removed (orphaned)
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "outer",
-      ["A"],
+      "borough",
+      ["Bronx"],
       false,
       false,
     );
 
-    result.destroy();
-  });
-
-  it("should reset when child is selected then parent header is clicked", () => {
-    const { result, filterClass } = setupNestingLevelTest();
-
-    // Click child cell X under A (depth 1)
-    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
-
-    let sel = get(result.clickSelection);
-    expect(sel.currentRowDepth).toBe(1);
-
-    // Now click parent header B (depth 0) — should reset child selection
-    filterClass.addDimensionValueSelections.mockClear();
-    filterClass.toggleDimensionValueSelections.mockClear();
-
-    result.handleCellClickToFilter("2", "outer", true, parentRowB);
-
-    sel = get(result.clickSelection);
-
-    // Child cell should be gone
-    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isCellSelected(dkChild, "revenue")).toBe(false);
-
-    // Parent B should be selected
-    const dkB = dimKeyFromDimValues({ outer: "B", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isRowHeaderSelected(dkB)).toBe(true);
-    expect(sel.currentRowDepth).toBe(0);
-
-    result.destroy();
-  });
-
-  it("should NOT reset when clicks are at the same nesting level", () => {
-    const { result } = setupNestingLevelTest();
-
-    // Click parent header A (depth 0)
-    result.handleCellClickToFilter("1", "outer", true, parentRowA);
-
-    // Click parent header B (depth 0) — same level, should accumulate
-    result.handleCellClickToFilter("2", "outer", true, parentRowB);
-
-    const sel = get(result.clickSelection);
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
-    const dkB = dimKeyFromDimValues({ outer: "B", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
-    expect(sel.isRowHeaderSelected(dkB)).toBe(true);
-    expect(sel.currentRowDepth).toBe(0);
+    // "status"="Closed" and "type"="Intersection" should NOT be removed
+    // because Cell 1 (New York) still needs them
+    const statusToggleCalls =
+      filterClass.toggleDimensionValueSelections.mock.calls.filter(
+        (call: unknown[]) => call[0] === "status",
+      );
+    const typeToggleCalls =
+      filterClass.toggleDimensionValueSelections.mock.calls.filter(
+        (call: unknown[]) => call[0] === "type",
+      );
+    expect(statusToggleCalls.length).toBe(0);
+    expect(typeToggleCalls.length).toBe(0);
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: bordered-header anchoring", () => {
-  // Same data as nesting level tests
+describe("pivot-click-to-filter: header/cell mutual exclusivity", () => {
+  // Nested data: outer=Zoom has child inner=US-East; outer=Airtable has child inner=US-West
   const nestedData: PivotDataRow[] = [
     {
-      outer: "A",
+      outer: "Zoom",
       revenue: 100,
-      subRows: [{ outer: "X", inner: "X", revenue: 50 }],
+      subRows: [{ outer: "US-East", inner: "US-East", revenue: 50 }],
     },
     {
-      outer: "B",
+      outer: "Airtable",
       revenue: 200,
-      subRows: [{ outer: "Y", inner: "Y", revenue: 75 }],
+      subRows: [{ outer: "US-West", inner: "US-West", revenue: 75 }],
     },
   ];
 
-  const parentRowA: PivotDataRow = nestedData[0];
-  const childRowXUnderA: PivotDataRow = nestedData[0].subRows![0];
+  const parentRowZoom: PivotDataRow = nestedData[0];
+  const childRowUSEastUnderZoom: PivotDataRow = nestedData[0].subRows![0];
+  const parentRowAirtable: PivotDataRow = nestedData[1];
+  const childRowUSWestUnderAirtable: PivotDataRow = nestedData[1].subRows![0];
 
-  function setupAnchoringTest() {
+  function setupMutualExclusivityTest() {
     const selfFilteredDimensions = writable<Set<string>>(new Set());
     const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
     vi.mocked(getFiltersForRowHeader).mockImplementation(
       (_config, rowId, _data) => {
-        if (rowId === "1") return makePivotFilter("outer", ["A"]);
+        if (rowId === "1") return makePivotFilter("outer", ["Zoom"]);
+        if (rowId === "2") return makePivotFilter("outer", ["Airtable"]);
         return {
           filters: undefined,
           timeRange: { start: undefined, end: undefined },
@@ -1169,8 +1082,14 @@ describe("pivot-click-to-filter: bordered-header anchoring", () => {
       (_config, rowId, _colId) => {
         if (rowId === "1.0") {
           return makeMultiDimPivotFilter([
-            { name: "outer", values: ["A"] },
-            { name: "inner", values: ["X"] },
+            { name: "outer", values: ["Zoom"] },
+            { name: "inner", values: ["US-East"] },
+          ]);
+        }
+        if (rowId === "2.0") {
+          return makeMultiDimPivotFilter([
+            { name: "outer", values: ["Airtable"] },
+            { name: "inner", values: ["US-West"] },
           ]);
         }
         return {
@@ -1195,257 +1114,201 @@ describe("pivot-click-to-filter: bordered-header anchoring", () => {
     return { result, filterClass, selfFilteredDimensions };
   }
 
-  it("clicking derived-blue header adds border without filter change", () => {
-    const { result, filterClass } = setupAnchoringTest();
-
-    // Click child cell X under A
-    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
-    filterClass.addDimensionValueSelections.mockClear();
-    filterClass.toggleDimensionValueSelections.mockClear();
-
-    // Now click parent header A (derived-blue from child selection)
-    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+  it("row header click evicts child cells under it", () => {
+    const { result, filterClass } = setupMutualExclusivityTest();
 
-    const sel = get(result.clickSelection);
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+    // Select child cell under Zoom
+    result.handleCellClickToFilter(
+      "1.0",
+      "revenue",
+      false,
+      childRowUSEastUnderZoom,
+    );
+    const dkChild = dimKeyFromDimValues({ outer: "Zoom", inner: "US-East" }, [
       "outer",
       "inner",
     ]);
+    expect(get(result.clickSelection).isCellSelected(dkChild, "revenue")).toBe(
+      true,
+    );
 
-    // Header should now be bordered
-    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
+    // Now click Zoom parent header
+    filterClass.toggleDimensionValueSelections.mockClear();
+    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
 
-    // Child cell should still be selected
-    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+    const sel = get(result.clickSelection);
+    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
       "outer",
       "inner",
     ]);
-    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
 
-    // No filter changes should have occurred
-    expect(filterClass.addDimensionValueSelections).not.toHaveBeenCalled();
-    expect(filterClass.toggleDimensionValueSelections).not.toHaveBeenCalled();
+    // Header should be selected, child cell should be gone
+    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
+    expect(sel.isCellSelected(dkChild, "revenue")).toBe(false);
+
+    // inner=US-East should have been removed (orphaned by cell eviction)
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "inner",
+      ["US-East"],
+      false,
+      false,
+    );
 
     result.destroy();
   });
 
-  it("re-clicking bordered header with children removes border only", () => {
-    const { result, filterClass } = setupAnchoringTest();
-
-    // Click child cell, then border the parent
-    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
-    result.handleCellClickToFilter("1", "outer", true, parentRowA);
-    filterClass.addDimensionValueSelections.mockClear();
-    filterClass.toggleDimensionValueSelections.mockClear();
-
-    // Re-click the bordered parent header
-    result.handleCellClickToFilter("1", "outer", true, parentRowA);
+  it("cell click evicts ancestor row header", () => {
+    const { result, filterClass } = setupMutualExclusivityTest();
 
-    const sel = get(result.clickSelection);
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+    // Select Zoom parent header
+    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
+    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
       "outer",
       "inner",
     ]);
+    expect(get(result.clickSelection).isRowHeaderSelected(dkZoom)).toBe(true);
 
-    // Border should be removed
-    expect(sel.isRowHeaderSelected(dkA)).toBe(false);
+    // Now click child cell under Zoom
+    filterClass.addDimensionValueSelections.mockClear();
+    result.handleCellClickToFilter(
+      "1.0",
+      "revenue",
+      false,
+      childRowUSEastUnderZoom,
+    );
 
-    // Child cell should still be selected
-    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
+    const sel = get(result.clickSelection);
+    const dkChild = dimKeyFromDimValues({ outer: "Zoom", inner: "US-East" }, [
       "outer",
       "inner",
     ]);
-    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
 
-    // No filter changes
-    expect(filterClass.addDimensionValueSelections).not.toHaveBeenCalled();
-    expect(filterClass.toggleDimensionValueSelections).not.toHaveBeenCalled();
+    // Cell should be selected, header should be gone
+    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
+    expect(sel.isRowHeaderSelected(dkZoom)).toBe(false);
 
     result.destroy();
   });
 
-  it("bordered header persists when child cell is deselected", () => {
-    const { result, filterClass } = setupAnchoringTest();
+  it("different lineage coexists: header + cell under different parent", () => {
+    const { result } = setupMutualExclusivityTest();
 
-    // Click child cell, then border the parent
-    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
-    result.handleCellClickToFilter("1", "outer", true, parentRowA);
-    filterClass.addDimensionValueSelections.mockClear();
-    filterClass.toggleDimensionValueSelections.mockClear();
+    // Select Zoom parent header
+    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
 
-    // Deselect the child cell
-    result.handleCellClickToFilter("1.0", "revenue", false, childRowXUnderA);
+    // Select child cell under Airtable (different lineage)
+    result.handleCellClickToFilter(
+      "2.0",
+      "revenue",
+      false,
+      childRowUSWestUnderAirtable,
+    );
 
     const sel = get(result.clickSelection);
-
-    // Child cell should be gone
-    const dkChild = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isCellSelected(dkChild, "revenue")).toBe(false);
-
-    // Bordered parent should still be there
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "" }, [
+    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
       "outer",
       "inner",
     ]);
-    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
-
-    // "inner" and "outer" from child should be removed (orphaned)
-    // but "outer"="A" should be retained by the bordered header
-    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "inner",
-      ["X"],
-      false,
-      false,
+    const dkAirtableChild = dimKeyFromDimValues(
+      { outer: "Airtable", inner: "US-West" },
+      ["outer", "inner"],
     );
-    // "outer"="A" should NOT be removed since the bordered header retains it
-    const outerToggleCalls =
-      filterClass.toggleDimensionValueSelections.mock.calls.filter(
-        (call: unknown[]) => call[0] === "outer",
-      );
-    expect(outerToggleCalls.length).toBe(0);
+
+    // Both should coexist
+    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
+    expect(sel.isCellSelected(dkAirtableChild, "revenue")).toBe(true);
 
     result.destroy();
   });
-});
-
-describe("pivot-click-to-filter: parent×parent promotion", () => {
-  // Nested rows: outer > inner, columns: region > category
-  const nestedData: PivotDataRow[] = [
-    {
-      outer: "Zoom",
-      revenue: 100,
-      subRows: [{ outer: "US-East", inner: "US-East", revenue: 50 }],
-    },
-  ];
 
-  const parentRowZoom: PivotDataRow = nestedData[0];
-  const childRowUSEast: PivotDataRow = nestedData[0].subRows![0];
-
-  it("bordered parent + parent column click promotes to parent×parent", () => {
+  it("column header evicts cells under it", () => {
     const selfFilteredDimensions = writable<Set<string>>(new Set());
     const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
-    // Child cell clicks return outer+inner filters
-    vi.mocked(getFiltersForCell).mockImplementation(
-      (_config, rowId, colId) => {
-        if (rowId === "1.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["Zoom"] },
-            { name: "inner", values: ["US-East"] },
-            { name: "region", values: ["NA"] },
-          ]);
-        }
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
+    const data: PivotDataRow[] = [{ country: "US", revenue: 100 }];
+
+    vi.mocked(getFiltersFromRow).mockImplementation(
+      (_config, _rowData, _colId) => {
+        return makeMultiDimPivotFilter([
+          { name: "country", values: ["US"] },
+          { name: "region", values: ["NA"] },
+        ]);
       },
     );
 
     vi.mocked(getFiltersForColumnHeader).mockImplementation(
       (_config, path) => {
-        if (path["quarter"]) {
-          return makePivotFilter("quarter", [path["quarter"]]);
-        }
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
+        return makePivotFilter("region", [path["region"]]);
       },
     );
 
     const result = createPivotClickToFilter(
       createFactoryArgs({
-        pivotConfig: writable(
-          nestedConfigTwoDims(),
-        ) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(nestedData),
+        pivotConfig: writable({
+          rowDimensionNames: ["country"],
+          colDimensionNames: ["region"],
+          measureNames: ["revenue"],
+          isFlat: true,
+        }) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(data),
         filterManager: fm,
         activeComponent: writable<string | null>("pivot-1"),
         selfFilteredDimensions,
       }),
     );
 
-    // Click 1: child cell (Zoom > US-East × NA region)
-    result.handleCellClickToFilter("1.0", "revenue", false, childRowUSEast);
-
-    // Click 2: border the parent header (Zoom)
-    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
-
-    let sel = get(result.clickSelection);
-    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
-    expect(sel.cellSelections.size).toBe(1);
+    // Select cell in NA column
+    result.handleCellClickToFilter("1", "revenue", false, data[0]);
+    const dkUS = dimKeyFromRow(data[0], ["country"]);
+    expect(get(result.clickSelection).isCellSelected(dkUS, "revenue")).toBe(
+      true,
+    );
 
-    // Click 3: parent column header Q3
-    filterClass.addDimensionValueSelections.mockClear();
+    // Click NA column header — should evict the cell
     filterClass.toggleDimensionValueSelections.mockClear();
+    result.handleColumnHeaderClick({ region: "NA" });
 
-    result.handleColumnHeaderClick({ quarter: "Q3" });
-
-    sel = get(result.clickSelection);
-
-    // Cell selections should be cleared (promoted to parent×parent)
-    expect(sel.cellSelections.size).toBe(0);
-
-    // Row header should still be there
-    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
-
-    // Column header should be selected
-    expect(sel.isColumnHeaderSelected({ quarter: "Q3" })).toBe(true);
+    const sel = get(result.clickSelection);
+    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
+    expect(sel.isCellSelected(dkUS, "revenue")).toBe(false);
 
-    // Child filter values (inner, region) should have been removed
+    // country=US should have been removed (orphaned by cell eviction)
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "inner",
-      ["US-East"],
+      "country",
+      ["US"],
       false,
       false,
     );
 
-    // New column filter should have been added
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
-      "quarter",
-      ["Q3"],
-    );
-
     result.destroy();
   });
-});
 
-describe("pivot-click-to-filter: deselect retains shared column filters", () => {
-  it("should retain column dimension values still needed by remaining cells", () => {
+  it("cell click evicts ancestor column header", () => {
     const selfFilteredDimensions = writable<Set<string>>(new Set());
     const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
-    // Two rows: New York and Bronx; column: status=Closed, type=Intersection
-    const data: PivotDataRow[] = [
-      { borough: "New York", revenue: 100 },
-      { borough: "Bronx", revenue: 200 },
-    ];
+    const data: PivotDataRow[] = [{ country: "US", revenue: 100 }];
 
-    // Cell clicks return row + column filters
     vi.mocked(getFiltersFromRow).mockImplementation(
-      (_config, rowData, _colId) => {
-        const borough = rowData["borough"] as string;
+      (_config, _rowData, _colId) => {
         return makeMultiDimPivotFilter([
-          { name: "borough", values: [borough] },
-          { name: "status", values: ["Closed"] },
-          { name: "type", values: ["Intersection"] },
+          { name: "country", values: ["US"] },
+          { name: "region", values: ["NA"] },
         ]);
       },
     );
 
+    vi.mocked(getFiltersForColumnHeader).mockImplementation(
+      (_config, path) => {
+        return makePivotFilter("region", [path["region"]]);
+      },
+    );
+
     const result = createPivotClickToFilter(
       createFactoryArgs({
         pivotConfig: writable({
-          rowDimensionNames: ["borough"],
-          colDimensionNames: ["status", "type"],
+          rowDimensionNames: ["country"],
+          colDimensionNames: ["region"],
           measureNames: ["revenue"],
           isFlat: true,
         }) as Readable<PivotDataStoreConfig>,
@@ -1456,49 +1319,70 @@ describe("pivot-click-to-filter: deselect retains shared column filters", () =>
       }),
     );
 
-    // Click cell 1: New York × Closed > Intersection
+    // Select NA column header
+    result.handleColumnHeaderClick({ region: "NA" });
+    expect(
+      get(result.clickSelection).isColumnHeaderSelected({ region: "NA" }),
+    ).toBe(true);
+
+    // Click cell in NA column — should evict the column header
     result.handleCellClickToFilter("1", "revenue", false, data[0]);
 
-    // Click cell 2: Bronx × Closed > Intersection
-    result.handleCellClickToFilter("2", "revenue", false, data[1]);
+    const sel = get(result.clickSelection);
+    const dkUS = dimKeyFromRow(data[0], ["country"]);
+    expect(sel.isCellSelected(dkUS, "revenue")).toBe(true);
+    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(false);
 
-    // Verify both cells are selected
-    const dkNY = dimKeyFromRow(data[0], ["borough"]);
-    const dkBronx = dimKeyFromRow(data[1], ["borough"]);
-    let sel = get(result.clickSelection);
-    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
-    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(true);
+    result.destroy();
+  });
 
-    // Now deselect Bronx
-    filterClass.addDimensionValueSelections.mockClear();
-    filterClass.toggleDimensionValueSelections.mockClear();
+  it("column header + cell in different column coexist", () => {
+    const selfFilteredDimensions = writable<Set<string>>(new Set());
+    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
 
-    result.handleCellClickToFilter("2", "revenue", false, data[1]);
+    const data: PivotDataRow[] = [{ country: "US", revenue: 100 }];
 
-    sel = get(result.clickSelection);
-    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(false);
-    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
+    // Cell click returns region=EU (different from the NA header)
+    vi.mocked(getFiltersFromRow).mockImplementation(
+      (_config, _rowData, _colId) => {
+        return makeMultiDimPivotFilter([
+          { name: "country", values: ["US"] },
+          { name: "region", values: ["EU"] },
+        ]);
+      },
+    );
 
-    // "borough"="Bronx" should be removed (orphaned)
-    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "borough",
-      ["Bronx"],
-      false,
-      false,
+    vi.mocked(getFiltersForColumnHeader).mockImplementation(
+      (_config, path) => {
+        return makePivotFilter("region", [path["region"]]);
+      },
     );
 
-    // "status"="Closed" and "type"="Intersection" should NOT be removed
-    // because Cell 1 (New York) still needs them
-    const statusToggleCalls =
-      filterClass.toggleDimensionValueSelections.mock.calls.filter(
-        (call: unknown[]) => call[0] === "status",
-      );
-    const typeToggleCalls =
-      filterClass.toggleDimensionValueSelections.mock.calls.filter(
-        (call: unknown[]) => call[0] === "type",
-      );
-    expect(statusToggleCalls.length).toBe(0);
-    expect(typeToggleCalls.length).toBe(0);
+    const result = createPivotClickToFilter(
+      createFactoryArgs({
+        pivotConfig: writable({
+          rowDimensionNames: ["country"],
+          colDimensionNames: ["region"],
+          measureNames: ["revenue"],
+          isFlat: true,
+        }) as Readable<PivotDataStoreConfig>,
+        pivotDataStore: stubPivotDataStore(data),
+        filterManager: fm,
+        activeComponent: writable<string | null>("pivot-1"),
+        selfFilteredDimensions,
+      }),
+    );
+
+    // Select NA column header
+    result.handleColumnHeaderClick({ region: "NA" });
+
+    // Select cell in EU column (different lineage)
+    result.handleCellClickToFilter("1", "revenue", false, data[0]);
+
+    const sel = get(result.clickSelection);
+    const dkUS = dimKeyFromRow(data[0], ["country"]);
+    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
+    expect(sel.isCellSelected(dkUS, "revenue")).toBe(true);
 
     result.destroy();
   });
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 8af65c25f61..8cd9dcf0a8e 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -428,56 +428,116 @@ export function createPivotClickToFilter(
     );
   }
 
+  // --- Lineage-aware mutual exclusivity helpers ---
+
   /**
-   * Clears all existing row/cell/column selections and removes their
-   * filter values. Called when a new click's nesting depth doesn't match.
-   * Collects dimension values directly from selection entries to build removals.
+   * Check if a cell is "under" a header: the header's dimension values are
+   * a subset of the cell's dimValues.
    */
-  function applyRowLevelReset(selection: PivotClickSelectionState) {
-    // Collect all dimension values from existing selections
-    const dimValuesByName = new Map<string, Set<string | null>>();
-    const addValue = (name: string, value: string | null) => {
-      let set = dimValuesByName.get(name);
-      if (!set) {
-        set = new Set();
-        dimValuesByName.set(name, set);
-      }
-      set.add(value);
-    };
+  function isDimSubset(
+    subset: Record<string, string | null>,
+    superset: Record<string, string | null>,
+  ): boolean {
+    return Object.entries(subset).every(
+      ([dim, val]) => dim in superset && superset[dim] === val,
+    );
+  }
 
-    for (const entry of selection.rowHeaderSelections.values()) {
-      for (const [name, value] of Object.entries(entry.dimValues)) {
-        addValue(name, value);
+  /**
+   * Find cell selection keys whose dimValues contain all of the header's
+   * dimension values (i.e., cells "under" the header).
+   */
+  function findCellsUnderRowHeader(
+    selection: PivotClickSelectionState,
+    headerDimValues: Record<string, string | null>,
+  ): string[] {
+    const keys: string[] = [];
+    for (const [key, entry] of selection.cellSelections) {
+      if (isDimSubset(headerDimValues, entry.dimValues)) {
+        keys.push(key);
       }
     }
-    for (const entry of selection.cellSelections.values()) {
-      for (const [name, value] of Object.entries(entry.dimValues)) {
-        addValue(name, value);
+    return keys;
+  }
+
+  /**
+   * Find row header dimKeys whose dimValues are a subset of the cell's dimValues
+   * (i.e., headers that are "above" the cell).
+   */
+  function findRowHeadersAboveCell(
+    selection: PivotClickSelectionState,
+    cellDimValues: Record<string, string | null>,
+  ): string[] {
+    const keys: string[] = [];
+    for (const [dk, entry] of selection.rowHeaderSelections) {
+      if (isDimSubset(entry.dimValues, cellDimValues)) {
+        keys.push(dk);
       }
     }
+    return keys;
+  }
+
+  /**
+   * Find column header keys whose dimension path values are all present
+   * in the cell's dimValues (i.e., column headers "above" the cell).
+   */
+  function findColHeadersAboveCell(
+    selection: PivotClickSelectionState,
+    cellDimValues: Record<string, string | null>,
+  ): string[] {
+    const keys: string[] = [];
     for (const colKey of selection.columnHeaderSelections) {
       const entries = JSON.parse(colKey) as [string, string][];
-      for (const [name, value] of entries) {
-        addValue(name, value);
+      const allMatch = entries.every(
+        ([name, value]) =>
+          name in cellDimValues && cellDimValues[name] === value,
+      );
+      if (allMatch) {
+        keys.push(colKey);
       }
     }
+    return keys;
+  }
 
-    const removals: ExtractedFilter[] = [...dimValuesByName.entries()].map(
-      ([dimensionName, values]) => ({
-        dimensionName,
-        values: [...values],
-      }),
-    );
+  /**
+   * Find cell selection keys whose dimValues contain all of the column header's
+   * dimension path values (i.e., cells "under" the column header).
+   */
+  function findCellsUnderColHeader(
+    selection: PivotClickSelectionState,
+    dimensionPath: Record<string, string>,
+  ): string[] {
+    const keys: string[] = [];
+    for (const [key, entry] of selection.cellSelections) {
+      const allMatch = Object.entries(dimensionPath).every(
+        ([name, value]) =>
+          name in entry.dimValues && entry.dimValues[name] === value,
+      );
+      if (allMatch) {
+        keys.push(key);
+      }
+    }
+    return keys;
+  }
 
-    applyFilterUpdate({
-      removals,
-      additions: [],
-      updateSelectionSets: (rowHeaders, cells, colHeaders) => {
-        rowHeaders.clear();
-        cells.clear();
-        colHeaders.clear();
-      },
-    });
+  /**
+   * Collect dimension values from a set of selection entries as removals.
+   */
+  function collectRemovalsFromEntries(
+    entries: SelectionEntry[],
+  ): Map<string, Set<string | null>> {
+    const byDim = new Map<string, Set<string | null>>();
+    for (const entry of entries) {
+      for (const [name, value] of Object.entries(entry.dimValues)) {
+        let set = byDim.get(name);
+        if (!set) {
+          set = new Set();
+          byDim.set(name, set);
+        }
+        set.add(value);
+      }
+    }
+    return byDim;
   }
 
   // --- Click handlers ---
@@ -576,72 +636,6 @@ export function createPivotClickToFilter(
       ? $clickSelection.isRowHeaderSelected(dk)
       : $clickSelection.isCellSelected(dk, columnId);
 
-    // Row nesting depth for nested tables
-    const clickRowDepth = isNested
-      ? Object.keys(dimValues).length - 1
-      : undefined;
-
-    // Bordered-header anchoring for nested tables.
-    // If clicking a row header whose dimension values are already in the filter
-    // (derived-blue from child cell selections), toggle the border only without
-    // changing filters. This must be checked BEFORE the nesting level reset
-    // since anchoring is an explicit exception to the level-switch rule.
-    if (isRowHeader && isNested) {
-      const isDerivedBlue = [...$clickSelection.cellSelections.values()].some(
-        (entry) =>
-          Object.entries(dimValues).every(
-            ([dim, val]) => entry.dimValues[dim] === val,
-          ),
-      );
-
-      if (!isDeselect && isDerivedBlue) {
-        // Header is derived-blue: add border without filter change
-        const $sel = get(clickSelectionStore);
-        const updated = new Map($sel.rowHeaderSelections);
-        updated.set(dk, {
-          dimKey: dk,
-          dimValues,
-          columnId,
-          rowDepth: clickRowDepth,
-        });
-        clickSelectionStore.set(
-          buildClickSelection(
-            updated,
-            new Map($sel.cellSelections),
-            new Set($sel.columnHeaderSelections),
-          ),
-        );
-        return;
-      }
-
-      if (isDeselect && isDerivedBlue) {
-        // Bordered header with child selections: remove border only, no filter change
-        const $sel = get(clickSelectionStore);
-        const updated = new Map($sel.rowHeaderSelections);
-        updated.delete(dk);
-        clickSelectionStore.set(
-          buildClickSelection(
-            updated,
-            new Map($sel.cellSelections),
-            new Set($sel.columnHeaderSelections),
-          ),
-        );
-        return;
-      }
-    }
-
-    // Nesting level must match. In nested tables, mismatched depths
-    // reset everything and the new click starts fresh.
-    if (
-      isNested &&
-      !isDeselect &&
-      clickRowDepth !== undefined &&
-      $clickSelection.currentRowDepth >= 0 &&
-      clickRowDepth !== $clickSelection.currentRowDepth
-    ) {
-      applyRowLevelReset($clickSelection);
-    }
-
     // For flat-table dimension cell clicks, only filter up to (and including) the
     // clicked column's dimension index, not all row dimensions.
     const flatDimIdx =
@@ -674,7 +668,7 @@ export function createPivotClickToFilter(
 
     // Build the dimValues to store; for partial dimension clicks, only keep
     // dimensions up to the clicked index
-    let storedDimValues: Record<string, string | null> =
+    const storedDimValues: Record<string, string | null> =
       upToDimensionIndex !== undefined
         ? Object.fromEntries(
             Object.entries(dimValues).filter(([dim]) => {
@@ -694,7 +688,10 @@ export function createPivotClickToFilter(
         cellFilters.filters,
       );
       for (const { dimensionName, values } of allDimFilters) {
-        if (colDimNames.has(dimensionName) && !(dimensionName in storedDimValues)) {
+        if (
+          colDimNames.has(dimensionName) &&
+          !(dimensionName in storedDimValues)
+        ) {
           storedDimValues[dimensionName] = values[0] ?? null;
         }
       }
@@ -717,37 +714,111 @@ export function createPivotClickToFilter(
       if (handled) return;
     }
 
-    applyDimensionFilters(
-      cellFilters.filters,
-      isDeselect,
-      (nextRowHeaders, nextCells) => {
-        if (isRowHeader) {
-          if (nextRowHeaders.has(dk)) {
+    if (isDeselect) {
+      // Deselect: simple toggle off
+      applyDimensionFilters(
+        cellFilters.filters,
+        true,
+        (nextRowHeaders, nextCells) => {
+          if (isRowHeader) {
             nextRowHeaders.delete(dk);
           } else {
-            nextRowHeaders.set(dk, {
-              dimKey: dk,
-              dimValues,
-              columnId,
-              rowDepth: clickRowDepth,
-            });
+            nextCells.delete(cellKey(dk, columnId));
           }
-        } else {
-          const key = cellKey(dk, columnId);
-          if (nextCells.has(key)) {
-            nextCells.delete(key);
-          } else {
-            nextCells.set(key, {
-              dimKey: dk,
-              dimValues: storedDimValues,
-              columnId,
-              dimClickIndex: upToDimensionIndex,
-              rowDepth: clickRowDepth,
-            });
+        },
+      );
+      return;
+    }
+
+    // Mutual exclusivity: headers and cells under the same lineage cannot
+    // coexist. When adding a new selection, evict the opposite domain.
+    if (isRowHeader) {
+      // Clicking a row header: evict cells under this header
+      const cellKeysToEvict = findCellsUnderRowHeader(
+        $clickSelection,
+        dimValues,
+      );
+      const evictedEntries = cellKeysToEvict
+        .map((k) => $clickSelection.cellSelections.get(k))
+        .filter(Boolean) as SelectionEntry[];
+      const evictedDimValues = collectRemovalsFromEntries(evictedEntries);
+
+      const removals: ExtractedFilter[] = [...evictedDimValues.entries()].map(
+        ([dimensionName, values]) => ({
+          dimensionName,
+          values: [...values],
+        }),
+      );
+
+      const additions = extractDimensionFiltersFromExpression(
+        cellFilters.filters,
+      );
+
+      applyFilterUpdate({
+        removals,
+        additions,
+        updateSelectionSets: (nextRowHeaders, nextCells) => {
+          for (const k of cellKeysToEvict) nextCells.delete(k);
+          nextRowHeaders.set(dk, { dimKey: dk, dimValues, columnId });
+        },
+      });
+    } else {
+      // Clicking a measure cell: evict ancestor row headers and column headers
+      const rowHeaderKeysToEvict = findRowHeadersAboveCell(
+        $clickSelection,
+        storedDimValues,
+      );
+      const colHeaderKeysToEvict = findColHeadersAboveCell(
+        $clickSelection,
+        storedDimValues,
+      );
+
+      const evictedRowEntries = rowHeaderKeysToEvict
+        .map((k) => $clickSelection.rowHeaderSelections.get(k))
+        .filter(Boolean) as SelectionEntry[];
+
+      const evictedDimValues = collectRemovalsFromEntries(evictedRowEntries);
+
+      // Also collect column header dimension values for removal
+      for (const colKey of colHeaderKeysToEvict) {
+        const entries = JSON.parse(colKey) as [string, string][];
+        for (const [name, value] of entries) {
+          let set = evictedDimValues.get(name);
+          if (!set) {
+            set = new Set();
+            evictedDimValues.set(name, set);
           }
+          set.add(value);
         }
-      },
-    );
+      }
+
+      const removals: ExtractedFilter[] = [...evictedDimValues.entries()].map(
+        ([dimensionName, values]) => ({
+          dimensionName,
+          values: [...values],
+        }),
+      );
+
+      const additions = extractDimensionFiltersFromExpression(
+        cellFilters.filters,
+      );
+
+      applyFilterUpdate({
+        removals,
+        additions,
+        updateSelectionSets: (nextRowHeaders, nextCells, nextColHeaders) => {
+          for (const k of rowHeaderKeysToEvict) nextRowHeaders.delete(k);
+          for (const k of colHeaderKeysToEvict) nextColHeaders.delete(k);
+          const key = cellKey(dk, columnId);
+          nextCells.set(key, {
+            dimKey: dk,
+            dimValues: storedDimValues,
+            columnId,
+            dimClickIndex: upToDimensionIndex,
+          });
+        },
+      });
+    }
   }
 
   function handleColumnHeaderClick(dimensionPath: Record<string, string>) {
@@ -776,75 +847,44 @@ export function createPivotClickToFilter(
       return;
     }
 
-    // Parent×parent promotion. If bordered row headers exist alongside
-    // child cell selections, clicking a parent column header clears child
-    // selections and promotes to parent-row × parent-column.
-    if (
-      !isDeselect &&
-      $clickSelection.rowHeaderSelections.size > 0 &&
-      $clickSelection.cellSelections.size > 0
-    ) {
-      const newKey = columnHeaderKey(dimensionPath);
-
-      // Build removals from all child cell selections
-      const cellRemovals = new Map<string, Set<string | null>>();
-      for (const entry of $clickSelection.cellSelections.values()) {
-        for (const [name, value] of Object.entries(entry.dimValues)) {
-          let set = cellRemovals.get(name);
-          if (!set) {
-            set = new Set();
-            cellRemovals.set(name, set);
-          }
-          set.add(value);
-        }
-      }
-
-      // Also remove old column header values
-      for (const colKey of $clickSelection.columnHeaderSelections) {
-        const entries = JSON.parse(colKey) as [string, string][];
-        for (const [name, value] of entries) {
-          let set = cellRemovals.get(name);
-          if (!set) {
-            set = new Set();
-            cellRemovals.set(name, set);
-          }
-          set.add(value);
-        }
-      }
-
-      const removals: ExtractedFilter[] = [...cellRemovals.entries()].map(
-        ([dimensionName, values]) => ({
-          dimensionName,
-          values: [...values],
-        }),
-      );
-
-      const newDimFilters = extractDimensionFiltersFromExpression(
+    if (isDeselect) {
+      applyDimensionFilters(
         colFilters.filters,
-      );
-
-      applyFilterUpdate({
-        removals,
-        additions: newDimFilters,
-        updateSelectionSets: (_nextRowHeaders, nextCells, nextColHeaders) => {
-          nextCells.clear();
-          nextColHeaders.clear();
-          nextColHeaders.add(newKey);
+        true,
+        (_nextRowHeaders, _nextCells, nextColHeaders) => {
+          nextColHeaders.delete(columnHeaderKey(dimensionPath));
         },
-      });
+      );
       return;
     }
 
-    // Same level or deselect: use existing toggle behavior
-    applyDimensionFilters(
-      colFilters.filters,
-      isDeselect,
-      (_nextRowHeaders, _nextCells, nextColHeaders) => {
-        const key = columnHeaderKey(dimensionPath);
-        if (nextColHeaders.has(key)) nextColHeaders.delete(key);
-        else nextColHeaders.add(key);
-      },
+    // Mutual exclusivity: evict cells under this column header
+    const cellKeysToEvict = findCellsUnderColHeader(
+      $clickSelection,
+      dimensionPath,
+    );
+    const evictedEntries = cellKeysToEvict
+      .map((k) => $clickSelection.cellSelections.get(k))
+      .filter(Boolean) as SelectionEntry[];
+    const evictedDimValues = collectRemovalsFromEntries(evictedEntries);
+
+    const removals: ExtractedFilter[] = [...evictedDimValues.entries()].map(
+      ([dimensionName, values]) => ({
+        dimensionName,
+        values: [...values],
+      }),
     );
+
+    const additions = extractDimensionFiltersFromExpression(colFilters.filters);
+
+    applyFilterUpdate({
+      removals,
+      additions,
+      updateSelectionSets: (_nextRowHeaders, nextCells, nextColHeaders) => {
+        for (const k of cellKeysToEvict) nextCells.delete(k);
+        nextColHeaders.add(columnHeaderKey(dimensionPath));
+      },
+    });
   }
 
   // --- Cleanup ---
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 1ed5efe7de8..1f1fc19b68b 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -77,8 +77,6 @@ export interface SelectionEntry {
   columnId: string;
   /** For flat-table dimension cell clicks: the index into rowDimensionNames */
   dimClickIndex?: number;
-  /** Row nesting depth for nested tables: 0 = parent, 1 = first child, etc. */
-  rowDepth?: number;
 }
 
 // ---- Selection state ----
@@ -114,11 +112,6 @@ export interface PivotClickSelectionState {
   isAncestorOfSelectedColumnHeader: (
     dimensionPath: Record<string, string>,
   ) => boolean;
-  /**
-   * Returns the row nesting depth of existing selections, or -1 if none.
-   * All row selections are at the same depth (enforced by nesting level matching).
-   */
-  currentRowDepth: number;
 }
 
 export function createEmptyClickSelectionState(): PivotClickSelectionState {
@@ -135,7 +128,6 @@ export function createEmptyClickSelectionState(): PivotClickSelectionState {
     selectedCellColumnIds: new Set(),
     getClickedDimensionIndex: () => -1,
     isAncestorOfSelectedColumnHeader: () => false,
-    currentRowDepth: -1,
   };
 }
 
@@ -170,31 +162,12 @@ export function buildClickSelection(
     }
   }
 
-  // Derive current row depth from the first row-level selection found.
-  // All selections are at the same depth (enforced by nesting level matching).
-  let currentRowDepth = -1;
-  for (const entry of rowHeaders.values()) {
-    if (entry.rowDepth !== undefined) {
-      currentRowDepth = entry.rowDepth;
-      break;
-    }
-  }
-  if (currentRowDepth === -1) {
-    for (const entry of cells.values()) {
-      if (entry.rowDepth !== undefined) {
-        currentRowDepth = entry.rowDepth;
-        break;
-      }
-    }
-  }
-
   return {
     rowHeaderSelections: rowHeaders,
     cellSelections: cells,
     columnHeaderSelections: colHeaders,
     hasAnySelection: hasAny,
     hasCrossSelection,
-    currentRowDepth,
     isRowHeaderSelected: (dk) => rowHeaders.has(dk),
     isCellSelected: (dk, cid) => cells.has(cellKey(dk, cid)),
     hasSelectedCellInRow: (dk) => rowsWithSelectedCells.has(dk),

From c5d4097a5050988b05cd237e74a15e087ac79025 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 21 Apr 2026 20:09:08 +0530
Subject: [PATCH 40/53] improve tests, remove redudant setup

---
 .../pivot/pivot-click-to-filter.spec.ts       | 1322 +++++------------
 1 file changed, 363 insertions(+), 959 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 737618db6de..5462795a590 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -26,27 +26,19 @@ import {
 import type { FilterManager } from "../../stores/filter-manager";
 import { createPivotClickToFilter } from "./pivot-click-to-filter";
 
-// Partial mocks: override only the filter-extraction functions while keeping
-// the rest of each module's real exports (extractDimensionFiltersFromExpression,
-// getActiveDimensionNames, etc.) which the factory depends on.
+// ---------------------------------------------------------------------------
+// Partial mocks: override only filter-extraction functions; keep real exports
+// (extractDimensionFiltersFromExpression, getActiveDimensionNames, etc.)
+// ---------------------------------------------------------------------------
+
 vi.mock(
   "@rilldata/web-common/features/dashboards/pivot/pivot-utils",
   async () => ({
     ...(await vi.importActual(
       "@rilldata/web-common/features/dashboards/pivot/pivot-utils",
     )),
-    getFiltersFromRow: vi.fn(
-      (): PivotFilter => ({
-        filters: undefined,
-        timeRange: { start: undefined, end: undefined },
-      }),
-    ),
-    getFiltersForCell: vi.fn(
-      (): PivotFilter => ({
-        filters: undefined,
-        timeRange: { start: undefined, end: undefined },
-      }),
-    ),
+    getFiltersFromRow: vi.fn((): PivotFilter => EMPTY_FILTER),
+    getFiltersForCell: vi.fn((): PivotFilter => EMPTY_FILTER),
   }),
 );
 
@@ -56,41 +48,23 @@ vi.mock(
     ...(await vi.importActual(
       "@rilldata/web-common/features/dashboards/pivot/pivot-row-selection",
     )),
-    getFiltersForRowData: vi.fn(
-      (): PivotFilter => ({
-        filters: undefined,
-        timeRange: { start: undefined, end: undefined },
-      }),
-    ),
-    getFiltersForRowHeader: vi.fn(
-      (): PivotFilter => ({
-        filters: undefined,
-        timeRange: { start: undefined, end: undefined },
-      }),
-    ),
-    getFiltersForColumnHeader: vi.fn(
-      (): PivotFilter => ({
-        filters: undefined,
-        timeRange: { start: undefined, end: undefined },
-      }),
-    ),
+    getFiltersForRowData: vi.fn((): PivotFilter => EMPTY_FILTER),
+    getFiltersForRowHeader: vi.fn((): PivotFilter => EMPTY_FILTER),
+    getFiltersForColumnHeader: vi.fn((): PivotFilter => EMPTY_FILTER),
   }),
 );
 
-/** Build a PivotFilter with no time range (sufficient for these tests). */
-function makePivotFilter(
-  dimensionName: string,
-  values: (string | null)[],
-): PivotFilter {
-  return {
-    filters: createAndExpression([createInExpression(dimensionName, values)]),
-    timeRange: { start: undefined, end: undefined },
-  };
-}
+// ---------------------------------------------------------------------------
+// Shared test helpers
+// ---------------------------------------------------------------------------
+
+const EMPTY_FILTER: PivotFilter = {
+  filters: undefined,
+  timeRange: { start: undefined, end: undefined },
+};
 
-/** Build a PivotFilter with multiple dimensions (for column header tests). */
-function makeMultiDimPivotFilter(
-  dims: Array<{ name: string; values: (string | null)[] }>,
+function filter(
+  ...dims: Array<{ name: string; values: (string | null)[] }>
 ): PivotFilter {
   return {
     filters: createAndExpression(
@@ -100,11 +74,18 @@ function makeMultiDimPivotFilter(
   };
 }
 
-/**
- * Stub for FilterManager. The factory only accesses `metricsViewFilters`
- * (via `.get`/`.set`), `checkTemporaryFilter`, and `applyFiltersToUrl`.
- * A plain Map structurally satisfies the `.get`/`.set` calls at runtime.
- */
+/** Shorthand: single-dimension filter */
+function filter1(name: string, values: (string | null)[]): PivotFilter {
+  return filter({ name, values });
+}
+
+function dk(
+  dims: Record<string, string | null>,
+  order: string[],
+): string {
+  return dimKeyFromDimValues(dims, order);
+}
+
 function stubFilterManager() {
   return {
     metricsViewFilters: new Map<
@@ -119,7 +100,6 @@ function stubFilterManager() {
   } as unknown as FilterManager;
 }
 
-/** Create a FilterManager with a working filterClass stub for a metrics view */
 function stubFilterManagerWithClass(metricsViewName: string) {
   const fm = stubFilterManager();
   const filterClass = {
@@ -133,64 +113,20 @@ function stubFilterManagerWithClass(metricsViewName: string) {
   return { fm, filterClass };
 }
 
-/** Stub config with only the fields the factory reads. */
-function emptyConfig() {
-  return {
-    rowDimensionNames: ["country"],
-    colDimensionNames: [],
-    measureNames: ["total"],
-    isFlat: true,
-  } as unknown as PivotDataStoreConfig;
-}
-
-function flatConfigTwoDims() {
-  return {
-    rowDimensionNames: ["country", "city"],
-    colDimensionNames: [],
-    measureNames: ["revenue"],
-    isFlat: true,
-  } as unknown as PivotDataStoreConfig;
-}
-
-function nestedConfig() {
-  return {
-    rowDimensionNames: ["country"],
-    colDimensionNames: [],
-    measureNames: ["revenue"],
-    isFlat: false,
-  } as unknown as PivotDataStoreConfig;
-}
-
-function nestedConfigTwoDims() {
+function makeConfig(
+  overrides: Partial<PivotDataStoreConfig> & {
+    rowDimensionNames: string[];
+    measureNames: string[];
+  },
+) {
   return {
-    rowDimensionNames: ["outer", "inner"],
     colDimensionNames: [],
-    measureNames: ["revenue"],
     isFlat: false,
-    time: {
-      timeDimension: "",
-      timeStart: undefined,
-      timeEnd: undefined,
-    },
-  } as unknown as PivotDataStoreConfig;
-}
-
-function nestedConfigWithColDims() {
-  return {
-    rowDimensionNames: ["country"],
-    colDimensionNames: ["region", "category", "product"],
-    measureNames: ["revenue"],
-    isFlat: false,
-    whereFilter: createAndExpression([]),
-    time: {
-      timeDimension: "",
-      timeStart: undefined,
-      timeEnd: undefined,
-    },
+    time: { timeDimension: "", timeStart: undefined, timeEnd: undefined },
+    ...overrides,
   } as unknown as PivotDataStoreConfig;
 }
 
-/** Build a PivotDataStore with the given data rows and optional axes. */
 function stubPivotDataStore(
   data: PivotDataRow[],
   columnDimensionAxes: Record<string, string[]> = {},
@@ -205,15 +141,13 @@ function stubPivotDataStore(
   });
 }
 
-/**
- * Build the args object for createPivotClickToFilter with sensible defaults.
- * Callers override only what they need.
- */
 function createFactoryArgs(
   overrides: Partial<Parameters<typeof createPivotClickToFilter>[0]> = {},
 ): Parameters<typeof createPivotClickToFilter>[0] {
   return {
-    pivotConfig: writable(emptyConfig()) as Readable<PivotDataStoreConfig>,
+    pivotConfig: writable(
+      makeConfig({ rowDimensionNames: ["country"], measureNames: ["total"], isFlat: true }),
+    ) as Readable<PivotDataStoreConfig>,
     pivotDataStore: stubPivotDataStore([]),
     filterManager: stubFilterManager(),
     metricsViewName: "mv1",
@@ -225,41 +159,50 @@ function createFactoryArgs(
   };
 }
 
-describe("pivot-click-to-filter: clearActiveComponent", () => {
-  it("should clear selfFilteredDimensions when activeComponent is set to null", () => {
-    const activeComponent = writable<string | null>(null);
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const onBecomeActive = vi.fn();
-    const onBecomeInactive = vi.fn();
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        activeComponent,
-        selfFilteredDimensions,
-        onBecomeActive,
-        onBecomeInactive,
-      }),
-    );
-
-    // Simulate the pivot becoming active with some self-filtered dimensions
-    activeComponent.set("pivot-1");
-    selfFilteredDimensions.set(new Set(["country"]));
-    onBecomeInactive.mockClear();
-    onBecomeActive.mockClear();
+/** Create factory with a working filterClass and active component */
+function setup(
+  config: PivotDataStoreConfig,
+  data: PivotDataRow[],
+  columnDimensionAxes: Record<string, string[]> = {},
+) {
+  const selfFilteredDimensions = writable<Set<string>>(new Set());
+  const { fm, filterClass } = stubFilterManagerWithClass("mv1");
+
+  const result = createPivotClickToFilter(
+    createFactoryArgs({
+      pivotConfig: writable(config) as Readable<PivotDataStoreConfig>,
+      pivotDataStore: stubPivotDataStore(data, columnDimensionAxes),
+      filterManager: fm,
+      activeComponent: writable<string | null>("pivot-1"),
+      selfFilteredDimensions,
+    }),
+  );
 
-    // Now simulate clearActiveComponent: set activeComponent to null
-    activeComponent.set(null);
+  return { result, filterClass, selfFilteredDimensions, fm };
+}
 
-    // The self-filtered dimensions should be cleared
-    expect(get(selfFilteredDimensions).size).toBe(0);
+/** Read current click selection */
+function sel(result: ReturnType<typeof setup>["result"]) {
+  return get(result.clickSelection);
+}
 
-    // onBecomeInactive should have been called
-    expect(onBecomeInactive).toHaveBeenCalled();
+/** Assert that toggle was NOT called for a given dimension */
+function expectNoToggle(
+  filterClass: ReturnType<typeof stubFilterManagerWithClass>["filterClass"],
+  dimensionName: string,
+) {
+  const calls = filterClass.toggleDimensionValueSelections.mock.calls.filter(
+    (call: unknown[]) => call[0] === dimensionName,
+  );
+  expect(calls.length).toBe(0);
+}
 
-    result.destroy();
-  });
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
 
-  it("should clear selfFilteredDimensions when another component becomes active", () => {
+describe("clearActiveComponent", () => {
+  it("clears selfFilteredDimensions when activeComponent changes", () => {
     const activeComponent = writable<string | null>(null);
     const selfFilteredDimensions = writable<Set<string>>(new Set());
     const onBecomeInactive = vi.fn();
@@ -272,436 +215,240 @@ describe("pivot-click-to-filter: clearActiveComponent", () => {
       }),
     );
 
-    // Simulate active pivot with self-filtered dimensions
     activeComponent.set("pivot-1");
     selfFilteredDimensions.set(new Set(["country"]));
     onBecomeInactive.mockClear();
 
     // Another component becomes active
     activeComponent.set("pivot-2");
-
     expect(get(selfFilteredDimensions).size).toBe(0);
     expect(onBecomeInactive).toHaveBeenCalled();
 
     result.destroy();
   });
 
-  it("should NOT clear selfFilteredDimensions when this component is set as active", () => {
+  it("does NOT clear when this component is set as active", () => {
     const activeComponent = writable<string | null>(null);
     const selfFilteredDimensions = writable<Set<string>>(new Set());
 
     const result = createPivotClickToFilter(
-      createFactoryArgs({
-        activeComponent,
-        selfFilteredDimensions,
-      }),
+      createFactoryArgs({ activeComponent, selfFilteredDimensions }),
     );
 
-    // Simulate active pivot with self-filtered dimensions
     selfFilteredDimensions.set(new Set(["country"]));
-
-    // Set this component as active
     activeComponent.set("pivot-1");
 
-    // selfFilteredDimensions should remain unchanged
-    expect(get(selfFilteredDimensions).size).toBe(1);
     expect(get(selfFilteredDimensions).has("country")).toBe(true);
-
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: flat table single-cell-per-row", () => {
-  /** Flat table data: two rows, each with country and city dimensions */
-  const flatTableData: PivotDataRow[] = [
+describe("flat table: single-cell-per-row", () => {
+  const config = makeConfig({
+    rowDimensionNames: ["country", "city"],
+    measureNames: ["revenue"],
+    isFlat: true,
+  });
+  const data: PivotDataRow[] = [
     { country: "US", city: "NYC", revenue: 100 },
     { country: "UK", city: "London", revenue: 200 },
   ];
-
-  const row0 = flatTableData[0];
-  const row1 = flatTableData[1];
-  const row0DimKey = dimKeyFromRow(row0, ["country", "city"]);
-  const row1DimKey = dimKeyFromRow(row1, ["country", "city"]);
+  const dkRow0 = dimKeyFromRow(data[0], ["country", "city"]);
+  const dkRow1 = dimKeyFromRow(data[1], ["country", "city"]);
 
   function setupFlat() {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    // Configure getFiltersFromRow mock to return appropriate filters per column
-    vi.mocked(getFiltersFromRow).mockImplementation(
-      (_config, _rowData, colId) => {
-        if (colId === "country") return makePivotFilter("country", ["US"]);
-        if (colId === "city") return makePivotFilter("city", ["NYC"]);
-        return makePivotFilter("country", ["US"]);
-      },
-    );
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable(
-          flatConfigTwoDims(),
-        ) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(flatTableData),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
-
-    return { result, filterClass, selfFilteredDimensions, fm };
+    vi.mocked(getFiltersFromRow).mockImplementation((_cfg, _row, colId) => {
+      if (colId === "country") return filter1("country", ["US"]);
+      if (colId === "city") return filter1("city", ["NYC"]);
+      return filter1("country", ["US"]);
+    });
+    return setup(config, data);
   }
 
-  it("should replace existing cell in the same row for flat tables", () => {
-    const { result, filterClass } = setupFlat();
-
-    // Click on country column in row 0
-    result.handleCellClickToFilter("0", "country", false, row0);
-
-    let sel = get(result.clickSelection);
-    expect(sel.isCellSelected(row0DimKey, "country")).toBe(true);
-    expect(sel.cellSelections.size).toBe(1);
-
-    // Now click on city column in the same row 0; should replace, not accumulate
-    result.handleCellClickToFilter("0", "city", false, row0);
+  it("replaces existing cell in the same row", () => {
+    const { result } = setupFlat();
 
-    sel = get(result.clickSelection);
-    expect(sel.isCellSelected(row0DimKey, "country")).toBe(false);
-    expect(sel.isCellSelected(row0DimKey, "city")).toBe(true);
-    expect(sel.cellSelections.size).toBe(1);
+    result.handleCellClickToFilter("0", "country", false, data[0]);
+    expect(sel(result).isCellSelected(dkRow0, "country")).toBe(true);
 
-    // addDimensionValueSelections should have been called for the new cell values
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalled();
+    result.handleCellClickToFilter("0", "city", false, data[0]);
+    expect(sel(result).isCellSelected(dkRow0, "country")).toBe(false);
+    expect(sel(result).isCellSelected(dkRow0, "city")).toBe(true);
+    expect(sel(result).cellSelections.size).toBe(1);
 
     result.destroy();
   });
 
-  it("should still allow deselect by re-clicking the same cell", () => {
+  it("deselects by re-clicking the same cell", () => {
     const { result } = setupFlat();
 
-    // Click on country in row 0
-    result.handleCellClickToFilter("0", "country", false, row0);
-    let sel = get(result.clickSelection);
-    expect(sel.isCellSelected(row0DimKey, "country")).toBe(true);
-
-    // Click on the same cell again to deselect
-    result.handleCellClickToFilter("0", "country", false, row0);
-    sel = get(result.clickSelection);
-    expect(sel.isCellSelected(row0DimKey, "country")).toBe(false);
-    expect(sel.cellSelections.size).toBe(0);
+    result.handleCellClickToFilter("0", "country", false, data[0]);
+    result.handleCellClickToFilter("0", "country", false, data[0]);
+    expect(sel(result).cellSelections.size).toBe(0);
 
     result.destroy();
   });
 
-  it("should allow selections across different rows independently", () => {
+  it("allows selections across different rows", () => {
     const { result } = setupFlat();
 
-    // Click on country in row 0
-    result.handleCellClickToFilter("0", "country", false, row0);
-
-    // Click on country in row 1 (different row; not a replacement)
+    result.handleCellClickToFilter("0", "country", false, data[0]);
     vi.mocked(getFiltersFromRow).mockImplementation(() =>
-      makePivotFilter("country", ["UK"]),
+      filter1("country", ["UK"]),
     );
-    result.handleCellClickToFilter("1", "country", false, row1);
+    result.handleCellClickToFilter("1", "country", false, data[1]);
 
-    const sel = get(result.clickSelection);
-    expect(sel.isCellSelected(row0DimKey, "country")).toBe(true);
-    expect(sel.isCellSelected(row1DimKey, "country")).toBe(true);
-    expect(sel.cellSelections.size).toBe(2);
+    expect(sel(result).isCellSelected(dkRow0, "country")).toBe(true);
+    expect(sel(result).isCellSelected(dkRow1, "country")).toBe(true);
+    expect(sel(result).cellSelections.size).toBe(2);
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: nested table multi-select", () => {
-  const nestedData: PivotDataRow[] = [
-    {
-      country: "US",
-      revenue: 100,
-      subRows: [{ country: "US-East", revenue: 50 }],
-    },
+describe("nested table: multi-select", () => {
+  const config = makeConfig({
+    rowDimensionNames: ["country"],
+    measureNames: ["revenue"],
+  });
+  const data: PivotDataRow[] = [
+    { country: "US", revenue: 100, subRows: [{ country: "US-East", revenue: 50 }] },
   ];
+  const dkRow0 = dimKeyFromRow(data[0], ["country"]);
 
-  const row0 = nestedData[0];
-  const row0DimKey = dimKeyFromRow(row0, ["country"]);
-
-  function setupNested() {
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
+  it("allows multiple cells in the same row", () => {
     vi.mocked(getFiltersForCell).mockImplementation(() =>
-      makePivotFilter("country", ["US"]),
+      filter1("country", ["US"]),
     );
+    const { result } = setup(config, data);
 
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable(nestedConfig()) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(nestedData),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-      }),
-    );
-
-    return { result, filterClass };
-  }
-
-  it("should allow multiple cells in the same row for nested tables", () => {
-    const { result } = setupNested();
-
-    // Click on two different columns in the same row
-    result.handleCellClickToFilter("0", "revenue", false, row0);
-    let sel = get(result.clickSelection);
-    expect(sel.isCellSelected(row0DimKey, "revenue")).toBe(true);
+    result.handleCellClickToFilter("0", "revenue", false, data[0]);
+    result.handleCellClickToFilter("0", "other_measure", false, data[0]);
 
-    result.handleCellClickToFilter("0", "other_measure", false, row0);
-    sel = get(result.clickSelection);
-
-    // Both should be selected (no replacement in nested mode)
-    expect(sel.isCellSelected(row0DimKey, "revenue")).toBe(true);
-    expect(sel.isCellSelected(row0DimKey, "other_measure")).toBe(true);
-    expect(sel.cellSelections.size).toBe(2);
+    expect(sel(result).isCellSelected(dkRow0, "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dkRow0, "other_measure")).toBe(true);
+    expect(sel(result).cellSelections.size).toBe(2);
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: nested table cross-parent selection isolation", () => {
-  // Two outer rows A and B, each with inner row X.
-  // Clicking on X under A should NOT highlight X under B.
-  //
-  // pivotDataStore.data does NOT include the totals row (TanStack prepends it).
-  // getValuesForExpandedKey adjusts indices[0] by -1 to map TanStack rowIds
-  // back to this array.
-  //
-  // TanStack rowIds: "0" → totals, "1" → A, "2" → B, "1.0" → X-under-A, "2.0" → X-under-B
-  // After adjustment: "1" maps to data[0]=A, "2" maps to data[1]=B
-  const nestedTwoDimData: PivotDataRow[] = [
-    {
-      outer: "A",
-      revenue: 100,
-      subRows: [{ outer: "X", inner: "X", revenue: 50 }],
-    },
-    {
-      outer: "B",
-      revenue: 200,
-      subRows: [{ outer: "X", inner: "X", revenue: 75 }],
-    },
+describe("nested table: cross-parent selection isolation", () => {
+  const config = makeConfig({
+    rowDimensionNames: ["outer", "inner"],
+    measureNames: ["revenue"],
+  });
+  const data: PivotDataRow[] = [
+    { outer: "A", revenue: 100, subRows: [{ outer: "X", inner: "X", revenue: 50 }] },
+    { outer: "B", revenue: 200, subRows: [{ outer: "X", inner: "X", revenue: 75 }] },
   ];
-
-  // The inner row data as the component sees it (value mapped to first dim)
-  const innerRowXUnderA = nestedTwoDimData[0].subRows![0];
-
-  function setupNestedTwoDims() {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    // For nested cell clicks, getFiltersForCell is called
-    vi.mocked(getFiltersForCell).mockImplementation(
-      (_config, rowId, _colId, _axes, _data) => {
-        // Return filters based on which inner row was clicked
-        if (rowId === "1.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["A"] },
-            { name: "inner", values: ["X"] },
-          ]);
-        }
-        if (rowId === "2.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["B"] },
-            { name: "inner", values: ["X"] },
-          ]);
-        }
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
-      },
-    );
-
-    // For nested row header clicks
-    vi.mocked(getFiltersForRowHeader).mockImplementation(
-      (_config, rowId, _data) => {
-        if (rowId === "1.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["A"] },
-            { name: "inner", values: ["X"] },
-          ]);
-        }
-        if (rowId === "2.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["B"] },
-            { name: "inner", values: ["X"] },
-          ]);
-        }
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
-      },
-    );
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable(
-          nestedConfigTwoDims(),
-        ) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(nestedTwoDimData),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
-
-    return { result, filterClass, selfFilteredDimensions };
+  const innerRowXUnderA = data[0].subRows![0];
+  const dims = ["outer", "inner"];
+
+  function setupCrossParent() {
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1.0") return filter({ name: "outer", values: ["A"] }, { name: "inner", values: ["X"] });
+      if (rowId === "2.0") return filter({ name: "outer", values: ["B"] }, { name: "inner", values: ["X"] });
+      return EMPTY_FILTER;
+    });
+    vi.mocked(getFiltersForRowHeader).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1.0") return filter({ name: "outer", values: ["A"] }, { name: "inner", values: ["X"] });
+      if (rowId === "2.0") return filter({ name: "outer", values: ["B"] }, { name: "inner", values: ["X"] });
+      return EMPTY_FILTER;
+    });
+    return setup(config, data);
   }
 
-  it("should produce distinct dimKeys for same inner value under different parents", () => {
-    // Verify that dimKeyFromDimValues produces different keys
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    const dkB = dimKeyFromDimValues({ outer: "B", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(dkA).not.toBe(dkB);
-    expect(dkA).toBe("A\0X");
-    expect(dkB).toBe("B\0X");
+  it("produces distinct dimKeys for same inner value under different parents", () => {
+    expect(dk({ outer: "A", inner: "X" }, dims)).toBe("A\0X");
+    expect(dk({ outer: "B", inner: "X" }, dims)).toBe("B\0X");
+    expect(dk({ outer: "A", inner: "X" }, dims)).not.toBe(
+      dk({ outer: "B", inner: "X" }, dims),
+    );
   });
 
-  it("should NOT select X under B when clicking X under A", () => {
-    const { result } = setupNestedTwoDims();
+  it("does NOT select X under B when clicking X under A", () => {
+    const { result } = setupCrossParent();
 
-    // Click on cell in inner row X under parent A (rowId "1.0")
     result.handleCellClickToFilter("1.0", "revenue", false, innerRowXUnderA);
 
-    const sel = get(result.clickSelection);
-
-    // X under A should be selected
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isCellSelected(dkA, "revenue")).toBe(true);
-
-    // X under B should NOT be selected
-    const dkB = dimKeyFromDimValues({ outer: "B", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(sel.isCellSelected(dkB, "revenue")).toBe(false);
-
-    expect(sel.cellSelections.size).toBe(1);
+    expect(sel(result).isCellSelected(dk({ outer: "A", inner: "X" }, dims), "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dk({ outer: "B", inner: "X" }, dims), "revenue")).toBe(false);
+    expect(sel(result).cellSelections.size).toBe(1);
 
     result.destroy();
   });
 
-  it("should NOT select row header X under B when clicking row header X under A", () => {
-    const { result } = setupNestedTwoDims();
+  it("does NOT select row header X under B when clicking X under A", () => {
+    const { result } = setupCrossParent();
 
-    // Click on row header for inner row X under parent A
     result.handleCellClickToFilter("1.0", "outer", true, innerRowXUnderA);
 
-    const sel = get(result.clickSelection);
-
-    const dkA = dimKeyFromDimValues({ outer: "A", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-    const dkB = dimKeyFromDimValues({ outer: "B", inner: "X" }, [
-      "outer",
-      "inner",
-    ]);
-
-    expect(sel.isRowHeaderSelected(dkA)).toBe(true);
-    expect(sel.isRowHeaderSelected(dkB)).toBe(false);
-    expect(sel.rowHeaderSelections.size).toBe(1);
+    expect(sel(result).isRowHeaderSelected(dk({ outer: "A", inner: "X" }, dims))).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dk({ outer: "B", inner: "X" }, dims))).toBe(false);
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: null dimension values", () => {
-  const nullData: PivotDataRow[] = [
+describe("null dimension values", () => {
+  const config = makeConfig({
+    rowDimensionNames: ["country"],
+    measureNames: ["total"],
+    isFlat: true,
+  });
+  const data: PivotDataRow[] = [
     { country: null, revenue: 100 },
     { country: "US", revenue: 200 },
   ];
-
-  const nullRow = nullData[0];
-  const nullDimKey = dimKeyFromRow(nullRow, ["country"]);
+  const dkNull = dimKeyFromRow(data[0], ["country"]);
 
   function setupNull() {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    // Mock getFiltersFromRow to return a filter with null value
-    vi.mocked(getFiltersFromRow).mockImplementation((_config, rowData) => {
-      const value = rowData["country"];
-      return makePivotFilter("country", [value as string]);
-    });
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable(emptyConfig()) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(nullData),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
+    vi.mocked(getFiltersFromRow).mockImplementation((_cfg, rowData) =>
+      filter1("country", [rowData["country"] as string]),
     );
-
-    return { result, filterClass, selfFilteredDimensions };
+    return setup(config, data);
   }
 
-  it("should select a cell with a null dimension value", () => {
+  it("selects a cell with null dimension value", () => {
     const { result, filterClass } = setupNull();
 
-    // Click on a row where country is null
-    result.handleCellClickToFilter("0", "total", false, nullRow);
-
-    const sel = get(result.clickSelection);
-    expect(sel.isCellSelected(nullDimKey, "total")).toBe(true);
-    expect(sel.cellSelections.size).toBe(1);
-
-    // The filter should have been applied
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
-      "country",
-      [null],
-    );
+    result.handleCellClickToFilter("0", "total", false, data[0]);
+    expect(sel(result).isCellSelected(dkNull, "total")).toBe(true);
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith("country", [null]);
 
     result.destroy();
   });
 
-  it("should deselect a cell with a null dimension value", () => {
+  it("deselects a cell with null dimension value", () => {
     const { result, filterClass } = setupNull();
 
-    // Select then deselect
-    result.handleCellClickToFilter("0", "total", false, nullRow);
-    result.handleCellClickToFilter("0", "total", false, nullRow);
+    result.handleCellClickToFilter("0", "total", false, data[0]);
+    result.handleCellClickToFilter("0", "total", false, data[0]);
 
-    const sel = get(result.clickSelection);
-    expect(sel.isCellSelected(nullDimKey, "total")).toBe(false);
-    expect(sel.cellSelections.size).toBe(0);
-
-    // Toggle should have been called to remove the null value
+    expect(sel(result).cellSelections.size).toBe(0);
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalled();
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: selection survives sorting", () => {
-  it("should identify same row after data order changes (simulated sort)", () => {
+describe("selection survives sorting", () => {
+  it("identifies same row after data order changes", () => {
     const { fm } = stubFilterManagerWithClass("mv1");
+    const config = makeConfig({
+      rowDimensionNames: ["country"],
+      measureNames: ["total"],
+      isFlat: true,
+    });
 
-    const dataBeforeSort: PivotDataRow[] = [
+    const dataBefore: PivotDataRow[] = [
       { country: "US", revenue: 100 },
       { country: "UK", revenue: 200 },
     ];
-
     const pivotDataStore = writable({
       isFetching: false,
-      data: dataBeforeSort,
+      data: dataBefore,
       columnDef: [],
       assembled: true,
       totalColumns: 0,
@@ -709,680 +456,337 @@ describe("pivot-click-to-filter: selection survives sorting", () => {
     });
 
     vi.mocked(getFiltersFromRow).mockImplementation(() =>
-      makePivotFilter("country", ["US"]),
+      filter1("country", ["US"]),
     );
 
     const result = createPivotClickToFilter(
       createFactoryArgs({
-        pivotConfig: writable(emptyConfig()) as Readable<PivotDataStoreConfig>,
+        pivotConfig: writable(config) as Readable<PivotDataStoreConfig>,
         pivotDataStore: pivotDataStore as unknown as PivotDataStore,
         filterManager: fm,
         activeComponent: writable<string | null>("pivot-1"),
       }),
     );
 
-    const usRow = dataBeforeSort[0];
-    const usDimKey = dimKeyFromRow(usRow, ["country"]);
-
-    // Click on US row (index 0 before sort)
-    result.handleCellClickToFilter("0", "total", false, usRow);
-
-    let sel = get(result.clickSelection);
-    expect(sel.isCellSelected(usDimKey, "total")).toBe(true);
+    const usDk = dimKeyFromRow(dataBefore[0], ["country"]);
+    result.handleCellClickToFilter("0", "total", false, dataBefore[0]);
+    expect(sel(result).isCellSelected(usDk, "total")).toBe(true);
 
-    // Simulate sorting: UK now comes first, US second
-    const dataAfterSort: PivotDataRow[] = [
-      { country: "UK", revenue: 200 },
-      { country: "US", revenue: 100 },
-    ];
+    // Simulate sort: UK now first
     pivotDataStore.set({
       isFetching: false,
-      data: dataAfterSort,
+      data: [{ country: "UK", revenue: 200 }, { country: "US", revenue: 100 }],
       columnDef: [],
       assembled: true,
       totalColumns: 0,
       columnDimensionAxes: {},
     });
 
-    // The selection should still match US, not the row at index 0 (which is now UK)
-    sel = get(result.clickSelection);
-    expect(sel.isCellSelected(usDimKey, "total")).toBe(true);
-
-    // UK's dimKey should NOT be selected
-    const ukDimKey = dimKeyFromRow(dataAfterSort[0], ["country"]);
-    expect(sel.isCellSelected(ukDimKey, "total")).toBe(false);
+    expect(sel(result).isCellSelected(usDk, "total")).toBe(true);
+    expect(sel(result).isCellSelected(dimKeyFromRow({ country: "UK" }, ["country"]), "total")).toBe(false);
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: column header level selection constraint", () => {
-  // Level 0 (1 key): { region: "NA" }
-  // Level 1 (2 keys): { region: "NA", category: "Electronics" }
-  // Level 2 (3 keys): { region: "NA", category: "Electronics", product: "Laptop" }
-
-  function setupColumnHeaders() {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    vi.mocked(getFiltersForColumnHeader).mockImplementation(
-      (_config, dimensionPath) => {
-        const dims = Object.entries(dimensionPath).map(([name, value]) => ({
-          name,
-          values: [value],
-        }));
-        return makeMultiDimPivotFilter(dims);
-      },
-    );
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable(
-          nestedConfigWithColDims(),
-        ) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore([]),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
+describe("column header level selection constraint", () => {
+  const config = makeConfig({
+    rowDimensionNames: ["country"],
+    colDimensionNames: ["region", "category", "product"],
+    measureNames: ["revenue"],
+    whereFilter: createAndExpression([]),
+  });
 
-    return { result, filterClass, selfFilteredDimensions, fm };
+  function setupColHeaders() {
+    vi.mocked(getFiltersForColumnHeader).mockImplementation((_cfg, path) => {
+      const dims = Object.entries(path).map(([name, value]) => ({
+        name,
+        values: [value],
+      }));
+      return filter(...dims);
+    });
+    return setup(config, []);
   }
 
-  it("should allow multiple selections at the same level", () => {
-    const { result } = setupColumnHeaders();
+  it("allows multiple selections at the same level", () => {
+    const { result } = setupColHeaders();
 
-    // Select two different level-0 headers
     result.handleColumnHeaderClick({ region: "NA" });
     result.handleColumnHeaderClick({ region: "EU" });
 
-    const sel = get(result.clickSelection);
-    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
-    expect(sel.isColumnHeaderSelected({ region: "EU" })).toBe(true);
-    expect(sel.columnHeaderSelections.size).toBe(2);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(true);
+    expect(sel(result).isColumnHeaderSelected({ region: "EU" })).toBe(true);
+    expect(sel(result).columnHeaderSelections.size).toBe(2);
 
     result.destroy();
   });
 
-  it("should replace column header selections when clicking a different level", () => {
-    const { result, filterClass } = setupColumnHeaders();
+  it("replaces selections when clicking a different level", () => {
+    const { result, filterClass } = setupColHeaders();
 
-    // Select a level-0 header
     result.handleColumnHeaderClick({ region: "NA" });
-
-    let sel = get(result.clickSelection);
-    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
-    expect(sel.columnHeaderSelections.size).toBe(1);
-
-    // Now click a level-1 header (different level); should replace
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
-    sel = get(result.clickSelection);
-    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(false);
-    expect(
-      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
-    ).toBe(true);
-    expect(sel.columnHeaderSelections.size).toBe(1);
-
-    // New values should have been added
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
-      "category",
-      ["Electronics"],
-    );
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(false);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA", category: "Electronics" })).toBe(true);
+    expect(sel(result).columnHeaderSelections.size).toBe(1);
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith("category", ["Electronics"]);
 
     result.destroy();
   });
 
-  it("should remove orphaned values when switching to a level with different dimensions", () => {
-    const { result, filterClass } = setupColumnHeaders();
+  it("removes orphaned values when switching levels", () => {
+    const { result, filterClass } = setupColHeaders();
 
-    // Select level-0: { region: "NA" }
     result.handleColumnHeaderClick({ region: "NA" });
-
-    // Switch to level-0 with different value, then switch to level-1
-    // First, let's select { region: "EU" } at level 0 (same level, accumulates)
     result.handleColumnHeaderClick({ region: "EU" });
-
-    // Now switch to level-1: { region: "NA", category: "Electronics" }
-    // "EU" is no longer needed (only "NA" is in the new selection)
     filterClass.toggleDimensionValueSelections.mockClear();
+
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
-    // "EU" should have been toggled off as orphaned
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "region",
-      ["EU"],
-      false,
-      false,
+      "region", ["EU"], false, false,
     );
 
     result.destroy();
   });
 
-  it("should replace multiple same-level selections when switching levels", () => {
-    const { result } = setupColumnHeaders();
+  it("replaces multiple same-level selections when switching levels", () => {
+    const { result } = setupColHeaders();
 
-    // Select two level-0 headers
     result.handleColumnHeaderClick({ region: "NA" });
     result.handleColumnHeaderClick({ region: "EU" });
-
-    let sel = get(result.clickSelection);
-    expect(sel.columnHeaderSelections.size).toBe(2);
-
-    // Now click a level-1 header; both level-0 selections should be removed
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
-    sel = get(result.clickSelection);
-    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(false);
-    expect(sel.isColumnHeaderSelected({ region: "EU" })).toBe(false);
-    expect(
-      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
-    ).toBe(true);
-    expect(sel.columnHeaderSelections.size).toBe(1);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(false);
+    expect(sel(result).isColumnHeaderSelected({ region: "EU" })).toBe(false);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA", category: "Electronics" })).toBe(true);
+    expect(sel(result).columnHeaderSelections.size).toBe(1);
 
     result.destroy();
   });
 
-  it("should still allow deselect by re-clicking the same header", () => {
-    const { result } = setupColumnHeaders();
+  it("deselects by re-clicking the same header", () => {
+    const { result } = setupColHeaders();
 
-    // Select a level-1 header
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
-
-    let sel = get(result.clickSelection);
-    expect(
-      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
-    ).toBe(true);
-
-    // Click it again to deselect
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
-    sel = get(result.clickSelection);
-    expect(
-      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
-    ).toBe(false);
-    expect(sel.columnHeaderSelections.size).toBe(0);
-
+    expect(sel(result).columnHeaderSelections.size).toBe(0);
     result.destroy();
   });
 
-  it("should allow fresh selection at any level after all headers are deselected", () => {
-    const { result } = setupColumnHeaders();
+  it("allows fresh selection at any level after all deselected", () => {
+    const { result } = setupColHeaders();
 
-    // Select and deselect a level-0 header
-    result.handleColumnHeaderClick({ region: "NA" });
     result.handleColumnHeaderClick({ region: "NA" });
+    result.handleColumnHeaderClick({ region: "NA" }); // deselect
 
-    let sel = get(result.clickSelection);
-    expect(sel.columnHeaderSelections.size).toBe(0);
-
-    // Now select a level-1 header; should work as a fresh add
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
-
-    sel = get(result.clickSelection);
-    expect(
-      sel.isColumnHeaderSelected({ region: "NA", category: "Electronics" }),
-    ).toBe(true);
-    expect(sel.columnHeaderSelections.size).toBe(1);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA", category: "Electronics" })).toBe(true);
+    expect(sel(result).columnHeaderSelections.size).toBe(1);
 
     result.destroy();
   });
 
-  it("should not remove shared dimension values when switching levels", () => {
-    const { result, filterClass } = setupColumnHeaders();
+  it("does not remove shared dimension values when switching levels", () => {
+    const { result, filterClass } = setupColHeaders();
 
-    // Select level-0: { region: "NA" }
     result.handleColumnHeaderClick({ region: "NA" });
-
-    // Switch to level-1: { region: "NA", category: "Electronics" }
-    // "region: NA" is shared; it should NOT be orphaned/removed
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
-    // toggleDimensionValueSelections should NOT have been called with "region"
-    // because "NA" is still needed by the new selection
-    const toggleCalls = filterClass.toggleDimensionValueSelections.mock.calls;
-    const regionToggleCalls = toggleCalls.filter(
-      (call: unknown[]) => call[0] === "region",
-    );
-    expect(regionToggleCalls.length).toBe(0);
-
-    // addDimensionValueSelections should have been called for the new values
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
-      "category",
-      ["Electronics"],
-    );
+    expectNoToggle(filterClass, "region");
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith("category", ["Electronics"]);
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: deselect retains shared column filters", () => {
-  it("should retain column dimension values still needed by remaining cells", () => {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    // Two rows: New York and Bronx; column: status=Closed, type=Intersection
+describe("deselect retains shared column filters", () => {
+  it("retains column dimension values still needed by remaining cells", () => {
+    const config = makeConfig({
+      rowDimensionNames: ["borough"],
+      colDimensionNames: ["status", "type"],
+      measureNames: ["revenue"],
+      isFlat: true,
+    });
     const data: PivotDataRow[] = [
       { borough: "New York", revenue: 100 },
       { borough: "Bronx", revenue: 200 },
     ];
 
-    // Cell clicks return row + column filters
-    vi.mocked(getFiltersFromRow).mockImplementation(
-      (_config, rowData, _colId) => {
-        const borough = rowData["borough"] as string;
-        return makeMultiDimPivotFilter([
-          { name: "borough", values: [borough] },
-          { name: "status", values: ["Closed"] },
-          { name: "type", values: ["Intersection"] },
-        ]);
-      },
-    );
+    vi.mocked(getFiltersFromRow).mockImplementation((_cfg, rowData) => {
+      return filter(
+        { name: "borough", values: [rowData["borough"] as string] },
+        { name: "status", values: ["Closed"] },
+        { name: "type", values: ["Intersection"] },
+      );
+    });
 
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable({
-          rowDimensionNames: ["borough"],
-          colDimensionNames: ["status", "type"],
-          measureNames: ["revenue"],
-          isFlat: true,
-        }) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(data),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
+    const { result, filterClass } = setup(config, data);
 
-    // Click cell 1: New York × Closed > Intersection
     result.handleCellClickToFilter("1", "revenue", false, data[0]);
-
-    // Click cell 2: Bronx × Closed > Intersection
     result.handleCellClickToFilter("2", "revenue", false, data[1]);
 
-    // Verify both cells are selected
     const dkNY = dimKeyFromRow(data[0], ["borough"]);
     const dkBronx = dimKeyFromRow(data[1], ["borough"]);
-    let sel = get(result.clickSelection);
-    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
-    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dkNY, "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dkBronx, "revenue")).toBe(true);
 
-    // Now deselect Bronx
-    filterClass.addDimensionValueSelections.mockClear();
     filterClass.toggleDimensionValueSelections.mockClear();
-
     result.handleCellClickToFilter("2", "revenue", false, data[1]);
 
-    sel = get(result.clickSelection);
-    expect(sel.isCellSelected(dkBronx, "revenue")).toBe(false);
-    expect(sel.isCellSelected(dkNY, "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dkBronx, "revenue")).toBe(false);
+    expect(sel(result).isCellSelected(dkNY, "revenue")).toBe(true);
 
-    // "borough"="Bronx" should be removed (orphaned)
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "borough",
-      ["Bronx"],
-      false,
-      false,
+      "borough", ["Bronx"], false, false,
     );
-
-    // "status"="Closed" and "type"="Intersection" should NOT be removed
-    // because Cell 1 (New York) still needs them
-    const statusToggleCalls =
-      filterClass.toggleDimensionValueSelections.mock.calls.filter(
-        (call: unknown[]) => call[0] === "status",
-      );
-    const typeToggleCalls =
-      filterClass.toggleDimensionValueSelections.mock.calls.filter(
-        (call: unknown[]) => call[0] === "type",
-      );
-    expect(statusToggleCalls.length).toBe(0);
-    expect(typeToggleCalls.length).toBe(0);
+    expectNoToggle(filterClass, "status");
+    expectNoToggle(filterClass, "type");
 
     result.destroy();
   });
 });
 
-describe("pivot-click-to-filter: header/cell mutual exclusivity", () => {
-  // Nested data: outer=Zoom has child inner=US-East; outer=Airtable has child inner=US-West
+describe("header/cell mutual exclusivity", () => {
+  const nestedConfig = makeConfig({
+    rowDimensionNames: ["outer", "inner"],
+    measureNames: ["revenue"],
+  });
   const nestedData: PivotDataRow[] = [
-    {
-      outer: "Zoom",
-      revenue: 100,
-      subRows: [{ outer: "US-East", inner: "US-East", revenue: 50 }],
-    },
-    {
-      outer: "Airtable",
-      revenue: 200,
-      subRows: [{ outer: "US-West", inner: "US-West", revenue: 75 }],
-    },
+    { outer: "Zoom", revenue: 100, subRows: [{ outer: "US-East", inner: "US-East", revenue: 50 }] },
+    { outer: "Airtable", revenue: 200, subRows: [{ outer: "US-West", inner: "US-West", revenue: 75 }] },
   ];
+  const dims = ["outer", "inner"];
+  const parentZoom = nestedData[0];
+  const childUSEast = nestedData[0].subRows![0];
+  const childUSWest = nestedData[1].subRows![0];
 
-  const parentRowZoom: PivotDataRow = nestedData[0];
-  const childRowUSEastUnderZoom: PivotDataRow = nestedData[0].subRows![0];
-  const parentRowAirtable: PivotDataRow = nestedData[1];
-  const childRowUSWestUnderAirtable: PivotDataRow = nestedData[1].subRows![0];
-
-  function setupMutualExclusivityTest() {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    vi.mocked(getFiltersForRowHeader).mockImplementation(
-      (_config, rowId, _data) => {
-        if (rowId === "1") return makePivotFilter("outer", ["Zoom"]);
-        if (rowId === "2") return makePivotFilter("outer", ["Airtable"]);
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
-      },
-    );
-
-    vi.mocked(getFiltersForCell).mockImplementation(
-      (_config, rowId, _colId) => {
-        if (rowId === "1.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["Zoom"] },
-            { name: "inner", values: ["US-East"] },
-          ]);
-        }
-        if (rowId === "2.0") {
-          return makeMultiDimPivotFilter([
-            { name: "outer", values: ["Airtable"] },
-            { name: "inner", values: ["US-West"] },
-          ]);
-        }
-        return {
-          filters: undefined,
-          timeRange: { start: undefined, end: undefined },
-        };
-      },
-    );
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable(
-          nestedConfigTwoDims(),
-        ) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(nestedData),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
-
-    return { result, filterClass, selfFilteredDimensions };
+  function setupNested() {
+    vi.mocked(getFiltersForRowHeader).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1") return filter1("outer", ["Zoom"]);
+      if (rowId === "2") return filter1("outer", ["Airtable"]);
+      return EMPTY_FILTER;
+    });
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1.0") return filter({ name: "outer", values: ["Zoom"] }, { name: "inner", values: ["US-East"] });
+      if (rowId === "2.0") return filter({ name: "outer", values: ["Airtable"] }, { name: "inner", values: ["US-West"] });
+      return EMPTY_FILTER;
+    });
+    return setup(nestedConfig, nestedData);
   }
 
   it("row header click evicts child cells under it", () => {
-    const { result, filterClass } = setupMutualExclusivityTest();
-
-    // Select child cell under Zoom
-    result.handleCellClickToFilter(
-      "1.0",
-      "revenue",
-      false,
-      childRowUSEastUnderZoom,
-    );
-    const dkChild = dimKeyFromDimValues({ outer: "Zoom", inner: "US-East" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(get(result.clickSelection).isCellSelected(dkChild, "revenue")).toBe(
-      true,
-    );
-
-    // Now click Zoom parent header
-    filterClass.toggleDimensionValueSelections.mockClear();
-    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
+    const { result, filterClass } = setupNested();
+    const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
+    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
 
-    const sel = get(result.clickSelection);
-    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
+    result.handleCellClickToFilter("1.0", "revenue", false, childUSEast);
+    expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(true);
 
-    // Header should be selected, child cell should be gone
-    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
-    expect(sel.isCellSelected(dkChild, "revenue")).toBe(false);
+    filterClass.toggleDimensionValueSelections.mockClear();
+    result.handleCellClickToFilter("1", "outer", true, parentZoom);
 
-    // inner=US-East should have been removed (orphaned by cell eviction)
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(true);
+    expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(false);
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "inner",
-      ["US-East"],
-      false,
-      false,
+      "inner", ["US-East"], false, false,
     );
 
     result.destroy();
   });
 
   it("cell click evicts ancestor row header", () => {
-    const { result, filterClass } = setupMutualExclusivityTest();
-
-    // Select Zoom parent header
-    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
-    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
-    expect(get(result.clickSelection).isRowHeaderSelected(dkZoom)).toBe(true);
-
-    // Now click child cell under Zoom
-    filterClass.addDimensionValueSelections.mockClear();
-    result.handleCellClickToFilter(
-      "1.0",
-      "revenue",
-      false,
-      childRowUSEastUnderZoom,
-    );
+    const { result } = setupNested();
+    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
 
-    const sel = get(result.clickSelection);
-    const dkChild = dimKeyFromDimValues({ outer: "Zoom", inner: "US-East" }, [
-      "outer",
-      "inner",
-    ]);
+    result.handleCellClickToFilter("1", "outer", true, parentZoom);
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(true);
 
-    // Cell should be selected, header should be gone
-    expect(sel.isCellSelected(dkChild, "revenue")).toBe(true);
-    expect(sel.isRowHeaderSelected(dkZoom)).toBe(false);
+    result.handleCellClickToFilter("1.0", "revenue", false, childUSEast);
+
+    expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(false);
 
     result.destroy();
   });
 
   it("different lineage coexists: header + cell under different parent", () => {
-    const { result } = setupMutualExclusivityTest();
-
-    // Select Zoom parent header
-    result.handleCellClickToFilter("1", "outer", true, parentRowZoom);
+    const { result } = setupNested();
 
-    // Select child cell under Airtable (different lineage)
-    result.handleCellClickToFilter(
-      "2.0",
-      "revenue",
-      false,
-      childRowUSWestUnderAirtable,
-    );
+    result.handleCellClickToFilter("1", "outer", true, parentZoom);
+    result.handleCellClickToFilter("2.0", "revenue", false, childUSWest);
 
-    const sel = get(result.clickSelection);
-    const dkZoom = dimKeyFromDimValues({ outer: "Zoom", inner: "" }, [
-      "outer",
-      "inner",
-    ]);
-    const dkAirtableChild = dimKeyFromDimValues(
-      { outer: "Airtable", inner: "US-West" },
-      ["outer", "inner"],
-    );
-
-    // Both should coexist
-    expect(sel.isRowHeaderSelected(dkZoom)).toBe(true);
-    expect(sel.isCellSelected(dkAirtableChild, "revenue")).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dk({ outer: "Zoom", inner: "" }, dims))).toBe(true);
+    expect(sel(result).isCellSelected(dk({ outer: "Airtable", inner: "US-West" }, dims), "revenue")).toBe(true);
 
     result.destroy();
   });
 
-  it("column header evicts cells under it", () => {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    const data: PivotDataRow[] = [{ country: "US", revenue: 100 }];
+  // Column header mutual exclusivity uses flat config with column dims
+  const flatWithColConfig = makeConfig({
+    rowDimensionNames: ["country"],
+    colDimensionNames: ["region"],
+    measureNames: ["revenue"],
+    isFlat: true,
+  });
+  const flatData: PivotDataRow[] = [{ country: "US", revenue: 100 }];
 
-    vi.mocked(getFiltersFromRow).mockImplementation(
-      (_config, _rowData, _colId) => {
-        return makeMultiDimPivotFilter([
-          { name: "country", values: ["US"] },
-          { name: "region", values: ["NA"] },
-        ]);
-      },
+  function setupFlatWithCol(cellRegion: string) {
+    vi.mocked(getFiltersFromRow).mockImplementation(() =>
+      filter({ name: "country", values: ["US"] }, { name: "region", values: [cellRegion] }),
     );
-
-    vi.mocked(getFiltersForColumnHeader).mockImplementation(
-      (_config, path) => {
-        return makePivotFilter("region", [path["region"]]);
-      },
+    vi.mocked(getFiltersForColumnHeader).mockImplementation((_cfg, path) =>
+      filter1("region", [path["region"]]),
     );
+    return setup(flatWithColConfig, flatData);
+  }
 
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable({
-          rowDimensionNames: ["country"],
-          colDimensionNames: ["region"],
-          measureNames: ["revenue"],
-          isFlat: true,
-        }) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(data),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
+  it("column header evicts cells under it", () => {
+    const { result, filterClass } = setupFlatWithCol("NA");
+    const dkUS = dimKeyFromRow(flatData[0], ["country"]);
 
-    // Select cell in NA column
-    result.handleCellClickToFilter("1", "revenue", false, data[0]);
-    const dkUS = dimKeyFromRow(data[0], ["country"]);
-    expect(get(result.clickSelection).isCellSelected(dkUS, "revenue")).toBe(
-      true,
-    );
+    result.handleCellClickToFilter("1", "revenue", false, flatData[0]);
+    expect(sel(result).isCellSelected(dkUS, "revenue")).toBe(true);
 
-    // Click NA column header — should evict the cell
     filterClass.toggleDimensionValueSelections.mockClear();
     result.handleColumnHeaderClick({ region: "NA" });
 
-    const sel = get(result.clickSelection);
-    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
-    expect(sel.isCellSelected(dkUS, "revenue")).toBe(false);
-
-    // country=US should have been removed (orphaned by cell eviction)
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(true);
+    expect(sel(result).isCellSelected(dkUS, "revenue")).toBe(false);
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "country",
-      ["US"],
-      false,
-      false,
+      "country", ["US"], false, false,
     );
 
     result.destroy();
   });
 
   it("cell click evicts ancestor column header", () => {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    const data: PivotDataRow[] = [{ country: "US", revenue: 100 }];
-
-    vi.mocked(getFiltersFromRow).mockImplementation(
-      (_config, _rowData, _colId) => {
-        return makeMultiDimPivotFilter([
-          { name: "country", values: ["US"] },
-          { name: "region", values: ["NA"] },
-        ]);
-      },
-    );
-
-    vi.mocked(getFiltersForColumnHeader).mockImplementation(
-      (_config, path) => {
-        return makePivotFilter("region", [path["region"]]);
-      },
-    );
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable({
-          rowDimensionNames: ["country"],
-          colDimensionNames: ["region"],
-          measureNames: ["revenue"],
-          isFlat: true,
-        }) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(data),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
+    const { result } = setupFlatWithCol("NA");
+    const dkUS = dimKeyFromRow(flatData[0], ["country"]);
 
-    // Select NA column header
     result.handleColumnHeaderClick({ region: "NA" });
-    expect(
-      get(result.clickSelection).isColumnHeaderSelected({ region: "NA" }),
-    ).toBe(true);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(true);
 
-    // Click cell in NA column — should evict the column header
-    result.handleCellClickToFilter("1", "revenue", false, data[0]);
+    result.handleCellClickToFilter("1", "revenue", false, flatData[0]);
 
-    const sel = get(result.clickSelection);
-    const dkUS = dimKeyFromRow(data[0], ["country"]);
-    expect(sel.isCellSelected(dkUS, "revenue")).toBe(true);
-    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(false);
+    expect(sel(result).isCellSelected(dkUS, "revenue")).toBe(true);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(false);
 
     result.destroy();
   });
 
   it("column header + cell in different column coexist", () => {
-    const selfFilteredDimensions = writable<Set<string>>(new Set());
-    const { fm, filterClass } = stubFilterManagerWithClass("mv1");
-
-    const data: PivotDataRow[] = [{ country: "US", revenue: 100 }];
-
-    // Cell click returns region=EU (different from the NA header)
-    vi.mocked(getFiltersFromRow).mockImplementation(
-      (_config, _rowData, _colId) => {
-        return makeMultiDimPivotFilter([
-          { name: "country", values: ["US"] },
-          { name: "region", values: ["EU"] },
-        ]);
-      },
-    );
-
-    vi.mocked(getFiltersForColumnHeader).mockImplementation(
-      (_config, path) => {
-        return makePivotFilter("region", [path["region"]]);
-      },
-    );
-
-    const result = createPivotClickToFilter(
-      createFactoryArgs({
-        pivotConfig: writable({
-          rowDimensionNames: ["country"],
-          colDimensionNames: ["region"],
-          measureNames: ["revenue"],
-          isFlat: true,
-        }) as Readable<PivotDataStoreConfig>,
-        pivotDataStore: stubPivotDataStore(data),
-        filterManager: fm,
-        activeComponent: writable<string | null>("pivot-1"),
-        selfFilteredDimensions,
-      }),
-    );
+    const { result } = setupFlatWithCol("EU"); // cell is in EU column
+    const dkUS = dimKeyFromRow(flatData[0], ["country"]);
 
-    // Select NA column header
-    result.handleColumnHeaderClick({ region: "NA" });
-
-    // Select cell in EU column (different lineage)
-    result.handleCellClickToFilter("1", "revenue", false, data[0]);
+    result.handleColumnHeaderClick({ region: "NA" }); // header is NA
+    result.handleCellClickToFilter("1", "revenue", false, flatData[0]);
 
-    const sel = get(result.clickSelection);
-    const dkUS = dimKeyFromRow(data[0], ["country"]);
-    expect(sel.isColumnHeaderSelected({ region: "NA" })).toBe(true);
-    expect(sel.isCellSelected(dkUS, "revenue")).toBe(true);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(true);
+    expect(sel(result).isCellSelected(dkUS, "revenue")).toBe(true);
 
     result.destroy();
   });

From 46b2d4bc07c1160db2191afd95ed07fb04928712 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 21 Apr 2026 20:15:39 +0530
Subject: [PATCH 41/53] fix null selection bug in flat tables

---
 .../dashboards/pivot/pivot-row-selection.ts   | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index fdf98b37f7a..7abacf9d9dd 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -89,14 +89,17 @@ export function getDimensionValuesForRow(
 export function getDimensionValuesFromRowData(
   config: PivotDataStoreConfig,
   rowData: PivotDataRow,
-): Array<{ dimensionName: string; value: string }> {
+): Array<{ dimensionName: string; value: string | null }> {
   return config.rowDimensionNames
     .filter((dim) => !isTimeDimension(dim, config.time.timeDimension))
-    .map((dim) => ({
-      dimensionName: dim,
-      value: String(rowData[dim] ?? ""),
-    }))
-    .filter(({ value }) => value !== "");
+    .map((dim) => {
+      const val = rowData[dim];
+      return {
+        dimensionName: dim,
+        value: val === null || val === undefined ? null : String(val),
+      };
+    })
+    .filter(({ value }) => value !== undefined);
 }
 
 /**
@@ -217,10 +220,12 @@ export function computePivotRowSelection(
       if (rowDimValues.length === 0) return false;
 
       // A row is selected if every dimension that IS filtered
-      // contains the row's value for that dimension
+      // contains the row's value for that dimension.
+      // Null values only match if null is explicitly in the filter set.
       return rowDimValues.every(({ dimensionName, value }) => {
         const selectedSet = dimensionFilters.get(dimensionName);
         if (!selectedSet) return true; // dimension not filtered; doesn't block
+        if (value === null) return selectedSet.has(null as unknown as string);
         return selectedSet.has(value);
       });
     },

From 9ba211e491a6832dcc56b30f248529a55b39f7c8 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Thu, 23 Apr 2026 17:41:07 +0530
Subject: [PATCH 42/53] fix row header parent deselection bug

---
 .../pivot/pivot-click-to-filter.spec.ts       | 66 ++++++++++++++++++
 .../components/pivot/pivot-click-to-filter.ts | 68 ++++++++++++++++++-
 2 files changed, 131 insertions(+), 3 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 5462795a590..7eadbcf077e 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -667,6 +667,10 @@ describe("header/cell mutual exclusivity", () => {
     vi.mocked(getFiltersForRowHeader).mockImplementation((_cfg, rowId) => {
       if (rowId === "1") return filter1("outer", ["Zoom"]);
       if (rowId === "2") return filter1("outer", ["Airtable"]);
+      if (rowId === "1.0")
+        return filter({ name: "outer", values: ["Zoom"] }, { name: "inner", values: ["US-East"] });
+      if (rowId === "2.0")
+        return filter({ name: "outer", values: ["Airtable"] }, { name: "inner", values: ["US-West"] });
       return EMPTY_FILTER;
     });
     vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
@@ -725,6 +729,68 @@ describe("header/cell mutual exclusivity", () => {
     result.destroy();
   });
 
+  it("parent row header click evicts child row header under it", () => {
+    const { result, filterClass } = setupNested();
+    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
+
+    // Select child row header first
+    result.handleCellClickToFilter("1.0", "inner", true, childUSEast);
+    expect(sel(result).isRowHeaderSelected(dkChild)).toBe(true);
+
+    // Click parent row header — child must be evicted
+    filterClass.toggleDimensionValueSelections.mockClear();
+    result.handleCellClickToFilter("1", "outer", true, parentZoom);
+
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dkChild)).toBe(false);
+    expect(sel(result).rowHeaderSelections.size).toBe(1);
+    // Orphaned inner value is removed from the global filter
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "inner", ["US-East"], false, false,
+    );
+
+    result.destroy();
+  });
+
+  it("child row header click evicts ancestor row header above it", () => {
+    const { result } = setupNested();
+    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
+
+    // Select parent first
+    result.handleCellClickToFilter("1", "outer", true, parentZoom);
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(true);
+
+    // Click child row header — parent must be evicted
+    result.handleCellClickToFilter("1.0", "inner", true, childUSEast);
+
+    expect(sel(result).isRowHeaderSelected(dkChild)).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(false);
+    expect(sel(result).rowHeaderSelections.size).toBe(1);
+
+    result.destroy();
+  });
+
+  it("parent row header click keeps sibling-lineage row headers intact", () => {
+    const { result } = setupNested();
+    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkAirtableChild = dk({ outer: "Airtable", inner: "US-West" }, dims);
+
+    // Select a child under a different parent first
+    result.handleCellClickToFilter("2.0", "inner", true, childUSWest);
+    expect(sel(result).isRowHeaderSelected(dkAirtableChild)).toBe(true);
+
+    // Click Zoom parent — Airtable's child header is a different lineage, must coexist
+    result.handleCellClickToFilter("1", "outer", true, parentZoom);
+
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dkAirtableChild)).toBe(true);
+    expect(sel(result).rowHeaderSelections.size).toBe(2);
+
+    result.destroy();
+  });
+
   // Column header mutual exclusivity uses flat config with column dims
   const flatWithColConfig = makeConfig({
     rowDimensionNames: ["country"],
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 8cd9dcf0a8e..245df064bea 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -477,6 +477,45 @@ export function createPivotClickToFilter(
     return keys;
   }
 
+  /**
+   * Find row header dimKeys that are descendants of the clicked header (its
+   * dimValues are a strict superset of the clicked header's dimValues).
+   * Strictness excludes the clicked header itself from the eviction set.
+   */
+  function findRowHeadersUnderRowHeader(
+    selection: PivotClickSelectionState,
+    headerDimValues: Record<string, string | null>,
+    clickedDk: string,
+  ): string[] {
+    const keys: string[] = [];
+    for (const [dk, entry] of selection.rowHeaderSelections) {
+      if (dk === clickedDk) continue;
+      if (isDimSubset(headerDimValues, entry.dimValues)) {
+        keys.push(dk);
+      }
+    }
+    return keys;
+  }
+
+  /**
+   * Find row header dimKeys that are ancestors of the clicked header (its
+   * dimValues are a strict subset of the clicked header's dimValues).
+   */
+  function findRowHeadersAboveRowHeader(
+    selection: PivotClickSelectionState,
+    headerDimValues: Record<string, string | null>,
+    clickedDk: string,
+  ): string[] {
+    const keys: string[] = [];
+    for (const [dk, entry] of selection.rowHeaderSelections) {
+      if (dk === clickedDk) continue;
+      if (isDimSubset(entry.dimValues, headerDimValues)) {
+        keys.push(dk);
+      }
+    }
+    return keys;
+  }
+
   /**
    * Find column header keys whose dimension path values are all present
    * in the cell's dimValues (i.e., column headers "above" the cell).
@@ -733,15 +772,37 @@ export function createPivotClickToFilter(
     // Mutual exclusivity: headers and cells under the same lineage cannot
     // coexist. When adding a new selection, evict the opposite domain.
     if (isRowHeader) {
-      // Clicking a row header: evict cells under this header
+      // Clicking a row header: evict cells under this header, plus any row
+      // headers in the same lineage (both descendants and ancestors).
       const cellKeysToEvict = findCellsUnderRowHeader(
         $clickSelection,
         dimValues,
       );
-      const evictedEntries = cellKeysToEvict
+      const descendantHeaderKeysToEvict = findRowHeadersUnderRowHeader(
+        $clickSelection,
+        dimValues,
+        dk,
+      );
+      const ancestorHeaderKeysToEvict = findRowHeadersAboveRowHeader(
+        $clickSelection,
+        dimValues,
+        dk,
+      );
+      const rowHeaderKeysToEvict = [
+        ...descendantHeaderKeysToEvict,
+        ...ancestorHeaderKeysToEvict,
+      ];
+
+      const evictedCellEntries = cellKeysToEvict
         .map((k) => $clickSelection.cellSelections.get(k))
         .filter(Boolean) as SelectionEntry[];
-      const evictedDimValues = collectRemovalsFromEntries(evictedEntries);
+      const evictedHeaderEntries = rowHeaderKeysToEvict
+        .map((k) => $clickSelection.rowHeaderSelections.get(k))
+        .filter(Boolean) as SelectionEntry[];
+      const evictedDimValues = collectRemovalsFromEntries([
+        ...evictedCellEntries,
+        ...evictedHeaderEntries,
+      ]);
 
       const removals: ExtractedFilter[] = [...evictedDimValues.entries()].map(
         ([dimensionName, values]) => ({
@@ -759,6 +820,7 @@ export function createPivotClickToFilter(
         additions,
         updateSelectionSets: (nextRowHeaders, nextCells) => {
           for (const k of cellKeysToEvict) nextCells.delete(k);
+          for (const k of rowHeaderKeysToEvict) nextRowHeaders.delete(k);
           nextRowHeaders.set(dk, { dimKey: dk, dimValues, columnId });
         },
       });

From ba45f71042dcfc3b27d5e18ee29718a610e61644 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Thu, 23 Apr 2026 18:30:31 +0530
Subject: [PATCH 43/53] fix grey totals row bug

---
 .../pivot/pivot-cell-classes.spec.ts          | 145 ++++++++++++++++++
 .../pivot/pivot-selection-indices.spec.ts     |  93 ++++++++++-
 .../pivot/pivot-selection-indices.ts          |  33 ++--
 3 files changed, 261 insertions(+), 10 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
index c2cffaf793a..36497552e35 100644
--- a/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
@@ -7,6 +7,8 @@ import {
   nestedHeaderState,
   nestedRowState,
 } from "./pivot-cell-classes";
+import { computePivotRowSelection } from "./pivot-row-selection";
+import type { PivotDataRow, PivotDataStoreConfig } from "./types";
 
 // ---- computeEffectiveDimIdx ----
 
@@ -405,3 +407,146 @@ describe("nestedHeaderState", () => {
     expect(result.ancestorSelectedColHeader).toBe(false);
   });
 });
+
+describe("3-dimension nested table: row header click styling by depth", () => {
+  const config: PivotDataStoreConfig = {
+    rowDimensionNames: ["A", "B", "C"],
+    measureNames: ["revenue"],
+    colDimensionNames: [],
+    isFlat: false,
+    time: { timeDimension: "", timeStart: undefined, timeEnd: undefined },
+  } as unknown as PivotDataStoreConfig;
+
+  const aRow: PivotDataRow = { A: "a1", revenue: 100 };
+  const bRow: PivotDataRow = { A: "b1", revenue: 50 };
+  const cRow: PivotDataRow = { A: "c1", revenue: 25 };
+
+  function rowSelectionFor(filters: Record<string, string>) {
+    const dimensionFilters = new Map<string, Set<string>>();
+    for (const [dim, val] of Object.entries(filters)) {
+      dimensionFilters.set(dim, new Set([val]));
+    }
+    return computePivotRowSelection(config, [], dimensionFilters);
+  }
+
+  const aClickedFilters = { A: "a1" };
+  const bClickedFilters = { A: "a1", B: "b1" };
+  const cClickedFilters = { A: "a1", B: "b1", C: "c1" };
+
+  // hasAnySelection is true whenever a row header is selected
+  const hasAnySelection = true;
+  const hasCrossSelection = false;
+
+  function rowState(opts: {
+    row: PivotDataRow;
+    depth: number;
+    parents: PivotDataRow[];
+    isRowHeaderSelected: boolean;
+    isAncestorOfSelectedHeader: boolean;
+    filters: Record<string, string>;
+  }) {
+    const rs = rowSelectionFor(opts.filters);
+    const filterSelected = rs.isRowSelected(opts.row, opts.depth, opts.parents);
+    const hasClickedCell = false;
+    const isSelected =
+      opts.depth > 0 && hasAnySelection
+        ? filterSelected && (opts.isRowHeaderSelected || hasClickedCell)
+        : filterSelected;
+    return nestedRowState({
+      isSelected,
+      hasSelection: rs.hasActiveSelection,
+      isRowHeaderSelected: opts.isRowHeaderSelected,
+      hasClickedCell,
+      hasCrossSelection,
+      isAncestorOfSelectedHeader: opts.isAncestorOfSelectedHeader,
+      isShowMore: false,
+    });
+  }
+
+  function measureCellState(isAncestorOfSelectedHeader: boolean) {
+    return nestedCellState({
+      isActive: false,
+      isClicked: false,
+      cellIndex: 1, // measure column
+      hasClickedCell: false,
+      inHoveredCol: false,
+      inSelectedCol: false,
+      isRowHeaderSelected: false,
+      hasCrossSelection,
+      isAncestorOfSelectedHeader,
+      isTotalsRow: false,
+      canShowDataViewer: false,
+      enableClickToFilter: true,
+    });
+  }
+
+  it("A clicked: A row gets selectedRow (blue), not partial-aggregate", () => {
+    const rs = rowState({
+      row: aRow,
+      depth: 0,
+      parents: [],
+      isRowHeaderSelected: true,
+      isAncestorOfSelectedHeader: false,
+      filters: aClickedFilters,
+    });
+    expect(rs.selectedRow).toBe(true);
+    expect(rs.dimmedRow).toBe(false);
+    expect(measureCellState(false).partialAggregateCell).toBe(false);
+  });
+
+  it("B clicked: B row gets selectedRow (blue), not partial-aggregate", () => {
+    const rs = rowState({
+      row: bRow,
+      depth: 1,
+      parents: [aRow],
+      isRowHeaderSelected: true,
+      isAncestorOfSelectedHeader: false,
+      filters: bClickedFilters,
+    });
+    expect(rs.selectedRow).toBe(true);
+    expect(rs.dimmedRow).toBe(false);
+    expect(measureCellState(false).partialAggregateCell).toBe(false);
+  });
+
+  it("B clicked: A row is ancestor — partial-aggregate (grey) on measure cells", () => {
+    const rs = rowState({
+      row: aRow,
+      depth: 0,
+      parents: [],
+      isRowHeaderSelected: false,
+      isAncestorOfSelectedHeader: true,
+      filters: bClickedFilters,
+    });
+    expect(rs.ancestorOfSelectedRow).toBe(true);
+    expect(rs.selectedRow).toBe(false);
+    expect(measureCellState(true).partialAggregateCell).toBe(true);
+  });
+
+  it("C clicked: C row gets selectedRow (blue), not partial-aggregate", () => {
+    const rs = rowState({
+      row: cRow,
+      depth: 2,
+      parents: [aRow, bRow],
+      isRowHeaderSelected: true,
+      isAncestorOfSelectedHeader: false,
+      filters: cClickedFilters,
+    });
+    expect(rs.selectedRow).toBe(true);
+    expect(rs.dimmedRow).toBe(false);
+    expect(measureCellState(false).partialAggregateCell).toBe(false);
+  });
+
+  it("C clicked: B row is ancestor — partial-aggregate (grey) on measure cells", () => {
+    const rs = rowState({
+      row: bRow,
+      depth: 1,
+      parents: [aRow],
+      isRowHeaderSelected: false,
+      isAncestorOfSelectedHeader: true,
+      filters: cClickedFilters,
+    });
+    expect(rs.ancestorOfSelectedRow).toBe(true);
+    expect(rs.selectedRow).toBe(false);
+    expect(measureCellState(true).partialAggregateCell).toBe(true);
+  });
+});
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
index 3626ce806dd..9264de2afb5 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
@@ -1,10 +1,17 @@
+import type { Row } from "tanstack-table-8-svelte-5";
 import { describe, expect, it } from "vitest";
 import {
+  buildClickSelection,
+  nestedDimKeyFromRow,
+} from "./pivot-click-selection";
+import {
+  computeAncestorRowIds,
   isHeaderInHoveredRange,
   isHoveredHeader,
-  isInSelectedColRange,
   isInCellSelectedColRange,
+  isInSelectedColRange,
 } from "./pivot-selection-indices";
+import type { PivotDataRow } from "./types";
 
 // ---- isHeaderInHoveredRange ----
 
@@ -95,3 +102,87 @@ describe("isInCellSelectedColRange", () => {
     expect(isInCellSelectedColRange(0, 3, new Set())).toBe(false);
   });
 });
+
+describe("computeAncestorRowIds", () => {
+  // Build a minimal fake TanStack Row tree for a 3-dim table.
+  // In nested mode, each row stores its own value under rowDimensions[0].
+  function makeRow(
+    id: string,
+    depth: number,
+    originalFirstDimValue: string,
+    parents: Row<PivotDataRow>[],
+  ): Row<PivotDataRow> {
+    return {
+      id,
+      depth,
+      original: { A: originalFirstDimValue } as PivotDataRow,
+      getParentRows: () => parents,
+    } as unknown as Row<PivotDataRow>;
+  }
+
+  const rowDimensionNames = ["A", "B", "C"];
+
+  // Tree: A expanded, B expanded. Visible rows: aRow, bRow, c1Row, c2Row.
+  const aRow = makeRow("1", 0, "a_val", []);
+  const bRow = makeRow("1.0", 1, "b_val", [aRow]);
+  const c1Row = makeRow("1.0.0", 2, "c1_val", [aRow, bRow]);
+  const c2Row = makeRow("1.0.1", 2, "c2_val", [aRow, bRow]);
+  const allRows = [aRow, bRow, c1Row, c2Row];
+
+  it("B header clicked with C rows visible: B's own id is NOT in ancestor set", () => {
+    // Simulate a B row-header click. dk built via the same path
+    // handleCellClickToFilter uses for nested child rows.
+    const dkB = ["a_val", "b_val", ""].join("\0");
+    const rowHeaders = new Map([
+      [
+        dkB,
+        {
+          dimKey: dkB,
+          dimValues: { A: "a_val", B: "b_val" },
+          columnId: "B",
+        },
+      ],
+    ]);
+    const selection = buildClickSelection(rowHeaders, new Map(), new Set());
+
+    const ids = computeAncestorRowIds(selection, allRows, rowDimensionNames);
+
+    // A's rowId "1" should be in the set (A is an ancestor of B).
+    expect(ids.has("1")).toBe(true);
+    // B's own rowId "1.0" must NOT be in the set — B is the clicked row.
+    expect(ids.has("1.0")).toBe(false);
+  });
+
+  it("B header clicked and a C row has a null leaf value: B is NOT in ancestor set", () => {
+    // Real-world shape: some C rows have a null firstDim value (e.g., a
+    // landmark is null for a given city+agency pair). `nestedDimKeyFromRow`
+    // then produces the same dk for that C row as for its B parent, which
+    // without depth-matching would cause B's own rowId to be incorrectly
+    // added to the ancestor set and its measure cells to render as grey.
+    const c1RowNullLeaf = makeRow("1.0.0", 2, "", [aRow, bRow]);
+    const rows = [aRow, bRow, c1RowNullLeaf, c2Row];
+
+    const dkB = ["a_val", "b_val", ""].join("\0");
+    const rowHeaders = new Map([
+      [
+        dkB,
+        {
+          dimKey: dkB,
+          dimValues: { A: "a_val", B: "b_val" },
+          columnId: "B",
+        },
+      ],
+    ]);
+    const selection = buildClickSelection(rowHeaders, new Map(), new Set());
+
+    // Sanity: the C row with the null leaf collides with B's dk.
+    expect(nestedDimKeyFromRow(c1RowNullLeaf, rowDimensionNames)).toBe(dkB);
+
+    const ids = computeAncestorRowIds(selection, rows, rowDimensionNames);
+
+    expect(ids.has("1")).toBe(true);
+    // Depth-matching must exclude the depth-2 collider from triggering
+    // the ancestor walk; B's rowId must not end up in the set.
+    expect(ids.has("1.0")).toBe(false);
+  });
+});
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
index 845ba67d9d9..decfd780f01 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
@@ -73,26 +73,41 @@ export function computeAncestorRowIds(
   rowDimensionNames: string[],
 ): Set<string> {
   if (!clickSelection?.hasAnySelection) return new Set();
+
+  const selectedDepthByDk = new Map<string, number>();
+  for (const [dk, entry] of clickSelection.rowHeaderSelections) {
+    selectedDepthByDk.set(dk, countSelectedDims(entry.dimValues) - 1);
+  }
+  for (const entry of clickSelection.cellSelections.values()) {
+    const depth = countSelectedDims(entry.dimValues) - 1;
+    const prior = selectedDepthByDk.get(entry.dimKey);
+    if (prior === undefined || depth < prior) {
+      selectedDepthByDk.set(entry.dimKey, depth);
+    }
+  }
+
   const ancestorIds = new Set<string>();
   for (const row of rows) {
     const dk =
       row.depth > 0
         ? nestedDimKeyFromRow(row, rowDimensionNames)
         : dimKeyFromRow(row.original, rowDimensionNames);
-    if (
-      clickSelection.isRowHeaderSelected(dk) ||
-      clickSelection.hasSelectedCellInRow(dk)
-    ) {
-      let id = row.id;
-      while (id.includes(".")) {
-        id = id.substring(0, id.lastIndexOf("."));
-        ancestorIds.add(id);
-      }
+    const selectedDepth = selectedDepthByDk.get(dk);
+    if (selectedDepth === undefined) continue;
+    if (row.depth !== selectedDepth) continue;
+    let id = row.id;
+    while (id.includes(".")) {
+      id = id.substring(0, id.lastIndexOf("."));
+      ancestorIds.add(id);
     }
   }
   return ancestorIds;
 }
 
+function countSelectedDims(dimValues: Record<string, string | null>): number {
+  return Object.keys(dimValues).length;
+}
+
 // ---- Column header hover/selection range helpers ----
 
 export interface HoveredColRange {

From 0eb7bcecd3deec02841b94b723c598bbda05b2e0 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Thu, 23 Apr 2026 20:18:13 +0530
Subject: [PATCH 44/53] fix stale column filter

---
 .../pivot/pivot-click-to-filter.spec.ts       | 32 +++++++++++++++++++
 .../components/pivot/pivot-click-to-filter.ts | 30 +++++++++++------
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 7eadbcf077e..2f4a848e91a 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -600,6 +600,38 @@ describe("column header level selection constraint", () => {
 
     result.destroy();
   });
+
+  it("removes shared child-level dim values on child-to-parent level switch across multiple children", () => {
+    const { result, filterClass } = setupColHeaders();
+
+    // Two leaf (level 2) col headers sharing category=Electronics
+    result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
+    result.handleColumnHeaderClick({ region: "EU", category: "Electronics" });
+    filterClass.toggleDimensionValueSelections.mockClear();
+
+    // Click parent (level 1) — should replace both, dropping the shared
+    // category value since the new selection doesn't mention category
+    result.handleColumnHeaderClick({ region: "NA" });
+
+    expect(sel(result).columnHeaderSelections.size).toBe(1);
+    expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(true);
+
+    // Shared category=Electronics must be toggled off exactly once and not
+    // re-added by a duplicate toggle
+    const categoryCalls =
+      filterClass.toggleDimensionValueSelections.mock.calls.filter(
+        (c: unknown[]) => c[0] === "category",
+      );
+    expect(categoryCalls.length).toBe(1);
+    expect(categoryCalls[0]).toEqual([
+      "category",
+      ["Electronics"],
+      false,
+      false,
+    ]);
+
+    result.destroy();
+  });
 });
 
 describe("deselect retains shared column filters", () => {
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 245df064bea..646f42c95e0 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -42,7 +42,10 @@ import type {
   PivotDataStore,
   PivotDataStoreConfig,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
-import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
+import {
+  createAndExpression,
+  createInExpression,
+} from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { V1Expression } from "@rilldata/web-common/runtime-client";
 import {
   type Readable,
@@ -401,19 +404,26 @@ export function createPivotClickToFilter(
     newDimensionPath: Record<string, string>,
     newFilters: V1Expression,
   ) {
-    const $config = get(pivotConfig);
-    if (!$config) return;
-
-    // Build combined old filters from all existing column header selections
-    const oldExprs: V1Expression[] = [];
+    // Aggregate values per dimension across all old column header selections.
+    // Deduping matters: without it, a dimension value shared across multiple
+    // old headers (e.g. Y=Y1 in both {X:X1,Y:Y1} and {X:X2,Y:Y1}) emits
+    // duplicate IN exprs, which later cause toggleDimensionValueSelections to
+    // re-toggle (remove then re-add) the shared value.
+    const valuesByDim = new Map<string, Set<string>>();
     for (const oldKey of oldColumnHeaders) {
       const entries = JSON.parse(oldKey) as [string, string][];
-      const oldPath = Object.fromEntries(entries) as Record<string, string>;
-      const oldColFilters = getFiltersForColumnHeader($config, oldPath);
-      if (oldColFilters.filters?.cond?.exprs) {
-        oldExprs.push(...oldColFilters.filters.cond.exprs);
+      for (const [dim, value] of entries) {
+        let set = valuesByDim.get(dim);
+        if (!set) {
+          set = new Set();
+          valuesByDim.set(dim, set);
+        }
+        set.add(value);
       }
     }
+    const oldExprs: V1Expression[] = [...valuesByDim.entries()].map(
+      ([dim, values]) => createInExpression(dim, [...values]),
+    );
 
     const oldFilters = createAndExpression(oldExprs);
     const newKey = columnHeaderKey(newDimensionPath);

From 586e105d92d038776b513bf054f7302ded3bdcad Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Thu, 23 Apr 2026 20:31:41 +0530
Subject: [PATCH 45/53] fix null visual state

---
 .../pivot/pivot-click-to-filter.spec.ts       | 198 ++++++++++++++----
 .../pivot/pivot-cell-classes.spec.ts          |  66 ++++++
 .../dashboards/pivot/pivot-cell-classes.ts    |   4 +-
 .../dashboards/pivot/pivot-row-selection.ts   |  31 ++-
 4 files changed, 243 insertions(+), 56 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 2f4a848e91a..595829edbbd 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -79,10 +79,7 @@ function filter1(name: string, values: (string | null)[]): PivotFilter {
   return filter({ name, values });
 }
 
-function dk(
-  dims: Record<string, string | null>,
-  order: string[],
-): string {
+function dk(dims: Record<string, string | null>, order: string[]): string {
   return dimKeyFromDimValues(dims, order);
 }
 
@@ -146,7 +143,11 @@ function createFactoryArgs(
 ): Parameters<typeof createPivotClickToFilter>[0] {
   return {
     pivotConfig: writable(
-      makeConfig({ rowDimensionNames: ["country"], measureNames: ["total"], isFlat: true }),
+      makeConfig({
+        rowDimensionNames: ["country"],
+        measureNames: ["total"],
+        isFlat: true,
+      }),
     ) as Readable<PivotDataStoreConfig>,
     pivotDataStore: stubPivotDataStore([]),
     filterManager: stubFilterManager(),
@@ -312,7 +313,11 @@ describe("nested table: multi-select", () => {
     measureNames: ["revenue"],
   });
   const data: PivotDataRow[] = [
-    { country: "US", revenue: 100, subRows: [{ country: "US-East", revenue: 50 }] },
+    {
+      country: "US",
+      revenue: 100,
+      subRows: [{ country: "US-East", revenue: 50 }],
+    },
   ];
   const dkRow0 = dimKeyFromRow(data[0], ["country"]);
 
@@ -339,21 +344,45 @@ describe("nested table: cross-parent selection isolation", () => {
     measureNames: ["revenue"],
   });
   const data: PivotDataRow[] = [
-    { outer: "A", revenue: 100, subRows: [{ outer: "X", inner: "X", revenue: 50 }] },
-    { outer: "B", revenue: 200, subRows: [{ outer: "X", inner: "X", revenue: 75 }] },
+    {
+      outer: "A",
+      revenue: 100,
+      subRows: [{ outer: "X", inner: "X", revenue: 50 }],
+    },
+    {
+      outer: "B",
+      revenue: 200,
+      subRows: [{ outer: "X", inner: "X", revenue: 75 }],
+    },
   ];
   const innerRowXUnderA = data[0].subRows![0];
   const dims = ["outer", "inner"];
 
   function setupCrossParent() {
     vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
-      if (rowId === "1.0") return filter({ name: "outer", values: ["A"] }, { name: "inner", values: ["X"] });
-      if (rowId === "2.0") return filter({ name: "outer", values: ["B"] }, { name: "inner", values: ["X"] });
+      if (rowId === "1.0")
+        return filter(
+          { name: "outer", values: ["A"] },
+          { name: "inner", values: ["X"] },
+        );
+      if (rowId === "2.0")
+        return filter(
+          { name: "outer", values: ["B"] },
+          { name: "inner", values: ["X"] },
+        );
       return EMPTY_FILTER;
     });
     vi.mocked(getFiltersForRowHeader).mockImplementation((_cfg, rowId) => {
-      if (rowId === "1.0") return filter({ name: "outer", values: ["A"] }, { name: "inner", values: ["X"] });
-      if (rowId === "2.0") return filter({ name: "outer", values: ["B"] }, { name: "inner", values: ["X"] });
+      if (rowId === "1.0")
+        return filter(
+          { name: "outer", values: ["A"] },
+          { name: "inner", values: ["X"] },
+        );
+      if (rowId === "2.0")
+        return filter(
+          { name: "outer", values: ["B"] },
+          { name: "inner", values: ["X"] },
+        );
       return EMPTY_FILTER;
     });
     return setup(config, data);
@@ -372,8 +401,18 @@ describe("nested table: cross-parent selection isolation", () => {
 
     result.handleCellClickToFilter("1.0", "revenue", false, innerRowXUnderA);
 
-    expect(sel(result).isCellSelected(dk({ outer: "A", inner: "X" }, dims), "revenue")).toBe(true);
-    expect(sel(result).isCellSelected(dk({ outer: "B", inner: "X" }, dims), "revenue")).toBe(false);
+    expect(
+      sel(result).isCellSelected(
+        dk({ outer: "A", inner: "X" }, dims),
+        "revenue",
+      ),
+    ).toBe(true);
+    expect(
+      sel(result).isCellSelected(
+        dk({ outer: "B", inner: "X" }, dims),
+        "revenue",
+      ),
+    ).toBe(false);
     expect(sel(result).cellSelections.size).toBe(1);
 
     result.destroy();
@@ -384,8 +423,12 @@ describe("nested table: cross-parent selection isolation", () => {
 
     result.handleCellClickToFilter("1.0", "outer", true, innerRowXUnderA);
 
-    expect(sel(result).isRowHeaderSelected(dk({ outer: "A", inner: "X" }, dims))).toBe(true);
-    expect(sel(result).isRowHeaderSelected(dk({ outer: "B", inner: "X" }, dims))).toBe(false);
+    expect(
+      sel(result).isRowHeaderSelected(dk({ outer: "A", inner: "X" }, dims)),
+    ).toBe(true);
+    expect(
+      sel(result).isRowHeaderSelected(dk({ outer: "B", inner: "X" }, dims)),
+    ).toBe(false);
 
     result.destroy();
   });
@@ -415,7 +458,10 @@ describe("null dimension values", () => {
 
     result.handleCellClickToFilter("0", "total", false, data[0]);
     expect(sel(result).isCellSelected(dkNull, "total")).toBe(true);
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith("country", [null]);
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
+      "country",
+      [null],
+    );
 
     result.destroy();
   });
@@ -475,7 +521,10 @@ describe("selection survives sorting", () => {
     // Simulate sort: UK now first
     pivotDataStore.set({
       isFetching: false,
-      data: [{ country: "UK", revenue: 200 }, { country: "US", revenue: 100 }],
+      data: [
+        { country: "UK", revenue: 200 },
+        { country: "US", revenue: 100 },
+      ],
       columnDef: [],
       assembled: true,
       totalColumns: 0,
@@ -483,7 +532,12 @@ describe("selection survives sorting", () => {
     });
 
     expect(sel(result).isCellSelected(usDk, "total")).toBe(true);
-    expect(sel(result).isCellSelected(dimKeyFromRow({ country: "UK" }, ["country"]), "total")).toBe(false);
+    expect(
+      sel(result).isCellSelected(
+        dimKeyFromRow({ country: "UK" }, ["country"]),
+        "total",
+      ),
+    ).toBe(false);
 
     result.destroy();
   });
@@ -528,9 +582,17 @@ describe("column header level selection constraint", () => {
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
     expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(false);
-    expect(sel(result).isColumnHeaderSelected({ region: "NA", category: "Electronics" })).toBe(true);
+    expect(
+      sel(result).isColumnHeaderSelected({
+        region: "NA",
+        category: "Electronics",
+      }),
+    ).toBe(true);
     expect(sel(result).columnHeaderSelections.size).toBe(1);
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith("category", ["Electronics"]);
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
+      "category",
+      ["Electronics"],
+    );
 
     result.destroy();
   });
@@ -545,7 +607,10 @@ describe("column header level selection constraint", () => {
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "region", ["EU"], false, false,
+      "region",
+      ["EU"],
+      false,
+      false,
     );
 
     result.destroy();
@@ -560,7 +625,12 @@ describe("column header level selection constraint", () => {
 
     expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(false);
     expect(sel(result).isColumnHeaderSelected({ region: "EU" })).toBe(false);
-    expect(sel(result).isColumnHeaderSelected({ region: "NA", category: "Electronics" })).toBe(true);
+    expect(
+      sel(result).isColumnHeaderSelected({
+        region: "NA",
+        category: "Electronics",
+      }),
+    ).toBe(true);
     expect(sel(result).columnHeaderSelections.size).toBe(1);
 
     result.destroy();
@@ -583,7 +653,12 @@ describe("column header level selection constraint", () => {
     result.handleColumnHeaderClick({ region: "NA" }); // deselect
 
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
-    expect(sel(result).isColumnHeaderSelected({ region: "NA", category: "Electronics" })).toBe(true);
+    expect(
+      sel(result).isColumnHeaderSelected({
+        region: "NA",
+        category: "Electronics",
+      }),
+    ).toBe(true);
     expect(sel(result).columnHeaderSelections.size).toBe(1);
 
     result.destroy();
@@ -596,7 +671,10 @@ describe("column header level selection constraint", () => {
     result.handleColumnHeaderClick({ region: "NA", category: "Electronics" });
 
     expectNoToggle(filterClass, "region");
-    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith("category", ["Electronics"]);
+    expect(filterClass.addDimensionValueSelections).toHaveBeenCalledWith(
+      "category",
+      ["Electronics"],
+    );
 
     result.destroy();
   });
@@ -672,7 +750,10 @@ describe("deselect retains shared column filters", () => {
     expect(sel(result).isCellSelected(dkNY, "revenue")).toBe(true);
 
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "borough", ["Bronx"], false, false,
+      "borough",
+      ["Bronx"],
+      false,
+      false,
     );
     expectNoToggle(filterClass, "status");
     expectNoToggle(filterClass, "type");
@@ -687,8 +768,16 @@ describe("header/cell mutual exclusivity", () => {
     measureNames: ["revenue"],
   });
   const nestedData: PivotDataRow[] = [
-    { outer: "Zoom", revenue: 100, subRows: [{ outer: "US-East", inner: "US-East", revenue: 50 }] },
-    { outer: "Airtable", revenue: 200, subRows: [{ outer: "US-West", inner: "US-West", revenue: 75 }] },
+    {
+      outer: "Zoom",
+      revenue: 100,
+      subRows: [{ outer: "US-East", inner: "US-East", revenue: 50 }],
+    },
+    {
+      outer: "Airtable",
+      revenue: 200,
+      subRows: [{ outer: "US-West", inner: "US-West", revenue: 75 }],
+    },
   ];
   const dims = ["outer", "inner"];
   const parentZoom = nestedData[0];
@@ -700,14 +789,28 @@ describe("header/cell mutual exclusivity", () => {
       if (rowId === "1") return filter1("outer", ["Zoom"]);
       if (rowId === "2") return filter1("outer", ["Airtable"]);
       if (rowId === "1.0")
-        return filter({ name: "outer", values: ["Zoom"] }, { name: "inner", values: ["US-East"] });
+        return filter(
+          { name: "outer", values: ["Zoom"] },
+          { name: "inner", values: ["US-East"] },
+        );
       if (rowId === "2.0")
-        return filter({ name: "outer", values: ["Airtable"] }, { name: "inner", values: ["US-West"] });
+        return filter(
+          { name: "outer", values: ["Airtable"] },
+          { name: "inner", values: ["US-West"] },
+        );
       return EMPTY_FILTER;
     });
     vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
-      if (rowId === "1.0") return filter({ name: "outer", values: ["Zoom"] }, { name: "inner", values: ["US-East"] });
-      if (rowId === "2.0") return filter({ name: "outer", values: ["Airtable"] }, { name: "inner", values: ["US-West"] });
+      if (rowId === "1.0")
+        return filter(
+          { name: "outer", values: ["Zoom"] },
+          { name: "inner", values: ["US-East"] },
+        );
+      if (rowId === "2.0")
+        return filter(
+          { name: "outer", values: ["Airtable"] },
+          { name: "inner", values: ["US-West"] },
+        );
       return EMPTY_FILTER;
     });
     return setup(nestedConfig, nestedData);
@@ -727,7 +830,10 @@ describe("header/cell mutual exclusivity", () => {
     expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(true);
     expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(false);
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "inner", ["US-East"], false, false,
+      "inner",
+      ["US-East"],
+      false,
+      false,
     );
 
     result.destroy();
@@ -755,8 +861,15 @@ describe("header/cell mutual exclusivity", () => {
     result.handleCellClickToFilter("1", "outer", true, parentZoom);
     result.handleCellClickToFilter("2.0", "revenue", false, childUSWest);
 
-    expect(sel(result).isRowHeaderSelected(dk({ outer: "Zoom", inner: "" }, dims))).toBe(true);
-    expect(sel(result).isCellSelected(dk({ outer: "Airtable", inner: "US-West" }, dims), "revenue")).toBe(true);
+    expect(
+      sel(result).isRowHeaderSelected(dk({ outer: "Zoom", inner: "" }, dims)),
+    ).toBe(true);
+    expect(
+      sel(result).isCellSelected(
+        dk({ outer: "Airtable", inner: "US-West" }, dims),
+        "revenue",
+      ),
+    ).toBe(true);
 
     result.destroy();
   });
@@ -779,7 +892,10 @@ describe("header/cell mutual exclusivity", () => {
     expect(sel(result).rowHeaderSelections.size).toBe(1);
     // Orphaned inner value is removed from the global filter
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "inner", ["US-East"], false, false,
+      "inner",
+      ["US-East"],
+      false,
+      false,
     );
 
     result.destroy();
@@ -834,7 +950,10 @@ describe("header/cell mutual exclusivity", () => {
 
   function setupFlatWithCol(cellRegion: string) {
     vi.mocked(getFiltersFromRow).mockImplementation(() =>
-      filter({ name: "country", values: ["US"] }, { name: "region", values: [cellRegion] }),
+      filter(
+        { name: "country", values: ["US"] },
+        { name: "region", values: [cellRegion] },
+      ),
     );
     vi.mocked(getFiltersForColumnHeader).mockImplementation((_cfg, path) =>
       filter1("region", [path["region"]]),
@@ -855,7 +974,10 @@ describe("header/cell mutual exclusivity", () => {
     expect(sel(result).isColumnHeaderSelected({ region: "NA" })).toBe(true);
     expect(sel(result).isCellSelected(dkUS, "revenue")).toBe(false);
     expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
-      "country", ["US"], false, false,
+      "country",
+      ["US"],
+      false,
+      false,
     );
 
     result.destroy();
diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
index 36497552e35..b359e4fcec5 100644
--- a/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
@@ -550,3 +550,69 @@ describe("3-dimension nested table: row header click styling by depth", () => {
     expect(measureCellState(true).partialAggregateCell).toBe(true);
   });
 });
+
+describe("null dimension value handling in isRowSelected", () => {
+  const flatConfig: PivotDataStoreConfig = {
+    rowDimensionNames: ["country"],
+    measureNames: ["revenue"],
+    colDimensionNames: ["region"],
+    isFlat: true,
+    time: { timeDimension: "", timeStart: undefined, timeEnd: undefined },
+  } as unknown as PivotDataStoreConfig;
+
+  const nestedConfig: PivotDataStoreConfig = {
+    rowDimensionNames: ["country", "city"],
+    measureNames: ["revenue"],
+    colDimensionNames: ["region"],
+    isFlat: false,
+    time: { timeDimension: "", timeStart: undefined, timeEnd: undefined },
+  } as unknown as PivotDataStoreConfig;
+
+  it("flat: null row is selected when null is in its own dimension's filter set", () => {
+    const dimensionFilters = new Map<string, Set<string | null>>([
+      ["country", new Set([null])],
+    ]);
+    const rs = computePivotRowSelection(flatConfig, [], dimensionFilters);
+    const nullRow: PivotDataRow = { country: null, revenue: 100 };
+    expect(rs.isRowSelected(nullRow)).toBe(true);
+  });
+
+  it("nested: null-valued row is not short-circuited as unselected when only a non-row-dim is filtered", () => {
+    const dimensionFilters = new Map<string, Set<string | null>>([
+      ["region", new Set(["NA"])],
+    ]);
+    const rs = computePivotRowSelection(nestedConfig, [], dimensionFilters);
+    // In nested mode the row at depth 0 stores its value under rowDimensionNames[0] (country)
+    const nullRow: PivotDataRow = { country: null, revenue: 100 };
+    expect(rs.isRowSelected(nullRow, 0, [])).toBe(true);
+  });
+
+  it("nested: null-valued row is selected when null is in its own dimension's filter set", () => {
+    const dimensionFilters = new Map<string, Set<string | null>>([
+      ["country", new Set([null])],
+    ]);
+    const rs = computePivotRowSelection(nestedConfig, [], dimensionFilters);
+    const nullRow: PivotDataRow = { country: null, revenue: 100 };
+    expect(rs.isRowSelected(nullRow, 0, [])).toBe(true);
+  });
+
+  it("nested: child under null parent is selected when ancestor filter is null", () => {
+    const dimensionFilters = new Map<string, Set<string | null>>([
+      ["country", new Set([null])],
+    ]);
+    const rs = computePivotRowSelection(nestedConfig, [], dimensionFilters);
+    // Parent row at depth 0 has null country; child at depth 1 stores city under country key (firstDim)
+    const parent: PivotDataRow = { country: null, revenue: 100 };
+    const child: PivotDataRow = { country: "NYC", revenue: 50 };
+    expect(rs.isRowSelected(child, 1, [parent])).toBe(true);
+  });
+
+  it("nested: non-null row is NOT selected when filter is only null", () => {
+    const dimensionFilters = new Map<string, Set<string | null>>([
+      ["country", new Set([null])],
+    ]);
+    const rs = computePivotRowSelection(nestedConfig, [], dimensionFilters);
+    const usRow: PivotDataRow = { country: "US", revenue: 100 };
+    expect(rs.isRowSelected(usRow, 0, [])).toBe(false);
+  });
+});
diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
index b5db656f492..c16223ead02 100644
--- a/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
@@ -185,7 +185,9 @@ export function nestedCellState(ctx: NestedCellContext): NestedCellState {
     selectedColBody: ctx.inSelectedCol && !ctx.hasCrossSelection,
     cellSelectedRowHeader: ctx.cellIndex === 0 && ctx.hasClickedCell,
     partialAggregateCell:
-      ctx.isAncestorOfSelectedHeader && ctx.cellIndex > 0 && !ctx.hasCrossSelection,
+      ctx.isAncestorOfSelectedHeader &&
+      ctx.cellIndex > 0 &&
+      !ctx.hasCrossSelection,
     crossIntersection:
       ctx.hasCrossSelection &&
       ctx.isRowHeaderSelected &&
diff --git a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
index 7abacf9d9dd..90c56691b8a 100644
--- a/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-row-selection.ts
@@ -9,11 +9,7 @@ import {
   getValuesForFlatTable,
   isTimeDimension,
 } from "./pivot-utils";
-import type {
-  PivotDataRow,
-  PivotDataStoreConfig,
-  PivotFilter,
-} from "./types";
+import type { PivotDataRow, PivotDataStoreConfig, PivotFilter } from "./types";
 
 export interface PivotRowSelectionState {
   /** True if at least one row dimension has active filter selections */
@@ -128,8 +124,8 @@ export function getFiltersForRowData(
 export function extractSelectionDimensionFilters(
   whereFilter: V1Expression | undefined,
   rowDimensionNames: string[],
-): Map<string, Set<string>> {
-  const result = new Map<string, Set<string>>();
+): Map<string, Set<string | null>> {
+  const result = new Map<string, Set<string | null>>();
   if (!whereFilter?.cond?.exprs) return result;
 
   for (const expr of whereFilter.cond.exprs) {
@@ -140,7 +136,7 @@ export function extractSelectionDimensionFilters(
 
     const values = getValuesInExpression(expr);
     if (values.length > 0) {
-      result.set(ident, new Set(values as string[]));
+      result.set(ident, new Set(values as (string | null)[]));
     }
   }
 
@@ -160,7 +156,7 @@ export function extractSelectionDimensionFilters(
 export function computePivotRowSelection(
   config: PivotDataStoreConfig,
   _tableData: PivotDataRow[],
-  dimensionFilters: Map<string, Set<string>>,
+  dimensionFilters: Map<string, Set<string | null>>,
 ): PivotRowSelectionState {
   const hasActiveSelection = dimensionFilters.size > 0;
 
@@ -193,13 +189,12 @@ export function computePivotRowSelection(
       if (depth !== undefined && !config.isFlat) {
         const firstDim = config.rowDimensionNames[0];
         const actualDim = config.rowDimensionNames[depth];
-        const value = rowData[firstDim];
-        if (value === undefined) return false;
-        const strValue = String(value ?? "");
-        if (!strValue) return false;
+        const raw = rowData[firstDim];
+        if (raw === undefined) return false;
+        const value = raw === null ? null : String(raw);
 
         const selectedSet = dimensionFilters.get(actualDim);
-        if (selectedSet && !selectedSet.has(strValue)) return false;
+        if (selectedSet && !selectedSet.has(value)) return false;
 
         // Also verify all ancestor dimensions match their filters.
         // parentRows[i] is at depth i and stores its value under firstDim.
@@ -208,8 +203,11 @@ export function computePivotRowSelection(
             const ancestorDim = config.rowDimensionNames[i];
             const ancestorSet = dimensionFilters.get(ancestorDim);
             if (!ancestorSet) continue;
-            const ancestorValue = String(parentRows[i][firstDim] ?? "");
-            if (!ancestorValue || !ancestorSet.has(ancestorValue)) return false;
+            const ancestorRaw = parentRows[i][firstDim];
+            if (ancestorRaw === undefined) return false;
+            const ancestorValue =
+              ancestorRaw === null ? null : String(ancestorRaw);
+            if (!ancestorSet.has(ancestorValue)) return false;
           }
         }
 
@@ -225,7 +223,6 @@ export function computePivotRowSelection(
       return rowDimValues.every(({ dimensionName, value }) => {
         const selectedSet = dimensionFilters.get(dimensionName);
         if (!selectedSet) return true; // dimension not filtered; doesn't block
-        if (value === null) return selectedSet.has(null as unknown as string);
         return selectedSet.has(value);
       });
     },

From 0efd49cfe248ebc89a0f1ef75429e94507573481 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Thu, 30 Apr 2026 20:28:52 +0530
Subject: [PATCH 46/53] fix child null selection bug

---
 .../pivot/pivot-click-to-filter.spec.ts       | 12 ++---
 .../dashboards/pivot/pivot-click-selection.ts | 49 +++++++++++++-----
 .../pivot/pivot-selection-indices.spec.ts     | 50 +++++++++++++------
 3 files changed, 79 insertions(+), 32 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 595829edbbd..4e4234faf5d 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -819,7 +819,7 @@ describe("header/cell mutual exclusivity", () => {
   it("row header click evicts child cells under it", () => {
     const { result, filterClass } = setupNested();
     const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
-    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkZoom = dk({ outer: "Zoom" }, dims);
 
     result.handleCellClickToFilter("1.0", "revenue", false, childUSEast);
     expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(true);
@@ -841,7 +841,7 @@ describe("header/cell mutual exclusivity", () => {
 
   it("cell click evicts ancestor row header", () => {
     const { result } = setupNested();
-    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkZoom = dk({ outer: "Zoom" }, dims);
     const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
 
     result.handleCellClickToFilter("1", "outer", true, parentZoom);
@@ -862,7 +862,7 @@ describe("header/cell mutual exclusivity", () => {
     result.handleCellClickToFilter("2.0", "revenue", false, childUSWest);
 
     expect(
-      sel(result).isRowHeaderSelected(dk({ outer: "Zoom", inner: "" }, dims)),
+      sel(result).isRowHeaderSelected(dk({ outer: "Zoom" }, dims)),
     ).toBe(true);
     expect(
       sel(result).isCellSelected(
@@ -876,7 +876,7 @@ describe("header/cell mutual exclusivity", () => {
 
   it("parent row header click evicts child row header under it", () => {
     const { result, filterClass } = setupNested();
-    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkZoom = dk({ outer: "Zoom" }, dims);
     const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
 
     // Select child row header first
@@ -903,7 +903,7 @@ describe("header/cell mutual exclusivity", () => {
 
   it("child row header click evicts ancestor row header above it", () => {
     const { result } = setupNested();
-    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkZoom = dk({ outer: "Zoom" }, dims);
     const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
 
     // Select parent first
@@ -922,7 +922,7 @@ describe("header/cell mutual exclusivity", () => {
 
   it("parent row header click keeps sibling-lineage row headers intact", () => {
     const { result } = setupNested();
-    const dkZoom = dk({ outer: "Zoom", inner: "" }, dims);
+    const dkZoom = dk({ outer: "Zoom" }, dims);
     const dkAirtableChild = dk({ outer: "Airtable", inner: "US-West" }, dims);
 
     // Select a child under a different parent first
diff --git a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
index 1f1fc19b68b..baaf4120135 100644
--- a/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-click-selection.ts
@@ -9,10 +9,23 @@
 import type { Row } from "tanstack-table-8-svelte-5";
 import type { PivotDataRow } from "./types";
 
+// Distinct sentinel for null dimension values so a null at depth N does not
+// collide with "no value at depth N" (e.g. a depth-0 row whose deeper
+// dimensions are simply absent from rowData).
+const NULL_KEY_SENTINEL = "<NULL>";
+
+function encodeKeyValue(value: unknown): string {
+  return value === null ? NULL_KEY_SENTINEL : String(value);
+}
+
 /**
  * Produces a stable string key from a row's dimension values.
  * Uses NUL as separator since dimension values won't contain it.
  *
+ * Truncates to the deepest dimension that is actually present in rowData,
+ * so a depth-0 row in a nested table (which only stores rowDimensionNames[0])
+ * does not collide with a deeper row whose later dimensions happen to be null.
+ *
  * WARNING: In nested tables, rows only store their own value under
  * rowDimensionNames[0], so this function will NOT include parent
  * dimension values. Use dimKeyFromDimValues instead for nested tables.
@@ -21,41 +34,53 @@ export function dimKeyFromRow(
   rowData: PivotDataRow,
   rowDimensionNames: string[],
 ): string {
-  return rowDimensionNames.map((d) => String(rowData[d] ?? "")).join("\0");
+  let lastIdx = rowDimensionNames.length - 1;
+  while (lastIdx >= 0 && !(rowDimensionNames[lastIdx] in rowData)) {
+    lastIdx--;
+  }
+  return rowDimensionNames
+    .slice(0, lastIdx + 1)
+    .map((d) => encodeKeyValue(rowData[d]))
+    .join("\0");
 }
 
 /**
  * Produces a stable string key from resolved dimension name→value pairs.
  * For nested tables, callers should resolve all ancestor values first
  * (e.g. via getDimensionValuesForRow) so the key is unique across
- * different parents.
+ * different parents. Truncates to the deepest dimension that is actually
+ * present in dimValues so depth-N keys do not collide with deeper rows
+ * whose later dimensions are null.
  */
 export function dimKeyFromDimValues(
   dimValues: Record<string, string | null>,
   rowDimensionNames: string[],
 ): string {
-  return rowDimensionNames.map((d) => String(dimValues[d] ?? "")).join("\0");
+  let lastIdx = rowDimensionNames.length - 1;
+  while (lastIdx >= 0 && !(rowDimensionNames[lastIdx] in dimValues)) {
+    lastIdx--;
+  }
+  return rowDimensionNames
+    .slice(0, lastIdx + 1)
+    .map((d) => encodeKeyValue(dimValues[d]))
+    .join("\0");
 }
 
 /**
  * Produces a stable dimKey for a TanStack Row in a nested table by
  * walking the parent chain. Each row at depth N stores its value under
  * rowDimensionNames[0]; the actual dimension is rowDimensionNames[depth].
- * Returns a NUL-separated key incorporating all ancestor values.
+ * Returns a NUL-separated key with one component per chain entry, so a
+ * depth-0 row produces a 1-component key and a depth-N row produces an
+ * (N+1)-component key.
  */
 export function nestedDimKeyFromRow(
   row: Row<PivotDataRow>,
   rowDimensionNames: string[],
 ): string {
   const firstDim = rowDimensionNames[0];
-  // Collect values from root to current row
-  const ancestors = row.getParentRows();
-  const chain = [...ancestors, row];
-  const values = rowDimensionNames.map((_, i) => {
-    const r = chain[i];
-    return r ? String(r.original[firstDim] ?? "") : "";
-  });
-  return values.join("\0");
+  const chain = [...row.getParentRows(), row];
+  return chain.map((r) => encodeKeyValue(r.original[firstDim])).join("\0");
 }
 
 export function cellKey(dimKey: string, columnId: string) {
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
index 9264de2afb5..ec445fc7078 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
@@ -109,7 +109,7 @@ describe("computeAncestorRowIds", () => {
   function makeRow(
     id: string,
     depth: number,
-    originalFirstDimValue: string,
+    originalFirstDimValue: string | null,
     parents: Row<PivotDataRow>[],
   ): Row<PivotDataRow> {
     return {
@@ -131,8 +131,9 @@ describe("computeAncestorRowIds", () => {
 
   it("B header clicked with C rows visible: B's own id is NOT in ancestor set", () => {
     // Simulate a B row-header click. dk built via the same path
-    // handleCellClickToFilter uses for nested child rows.
-    const dkB = ["a_val", "b_val", ""].join("\0");
+    // handleCellClickToFilter uses for nested child rows: only includes
+    // dimensions up to the clicked row's depth.
+    const dkB = ["a_val", "b_val"].join("\0");
     const rowHeaders = new Map([
       [
         dkB,
@@ -153,16 +154,15 @@ describe("computeAncestorRowIds", () => {
     expect(ids.has("1.0")).toBe(false);
   });
 
-  it("B header clicked and a C row has a null leaf value: B is NOT in ancestor set", () => {
+  it("B header clicked and a C row has a null leaf value: keys do not collide", () => {
     // Real-world shape: some C rows have a null firstDim value (e.g., a
-    // landmark is null for a given city+agency pair). `nestedDimKeyFromRow`
-    // then produces the same dk for that C row as for its B parent, which
-    // without depth-matching would cause B's own rowId to be incorrectly
-    // added to the ancestor set and its measure cells to render as grey.
-    const c1RowNullLeaf = makeRow("1.0.0", 2, "", [aRow, bRow]);
+    // landmark is null for a given city+agency pair). The dimKey for
+    // such a child row must remain distinct from its B parent's dk so
+    // B's own selection does not bleed into a null-valued descendant.
+    const c1RowNullLeaf = makeRow("1.0.0", 2, null, [aRow, bRow]);
     const rows = [aRow, bRow, c1RowNullLeaf, c2Row];
 
-    const dkB = ["a_val", "b_val", ""].join("\0");
+    const dkB = ["a_val", "b_val"].join("\0");
     const rowHeaders = new Map([
       [
         dkB,
@@ -175,14 +175,36 @@ describe("computeAncestorRowIds", () => {
     ]);
     const selection = buildClickSelection(rowHeaders, new Map(), new Set());
 
-    // Sanity: the C row with the null leaf collides with B's dk.
-    expect(nestedDimKeyFromRow(c1RowNullLeaf, rowDimensionNames)).toBe(dkB);
+    // Keys at different depths must never collide, even when a deeper
+    // row's leaf value is null.
+    expect(nestedDimKeyFromRow(c1RowNullLeaf, rowDimensionNames)).not.toBe(dkB);
 
     const ids = computeAncestorRowIds(selection, rows, rowDimensionNames);
 
     expect(ids.has("1")).toBe(true);
-    // Depth-matching must exclude the depth-2 collider from triggering
-    // the ancestor walk; B's rowId must not end up in the set.
     expect(ids.has("1.0")).toBe(false);
   });
+
+  it("A (depth-0) header clicked: a depth-1 child with null value is not selected", () => {
+    const bRowNull = makeRow("1.0", 1, null, [aRow]);
+
+    const dkA = nestedDimKeyFromRow(aRow, rowDimensionNames); // depth 0
+    const dkBNull = nestedDimKeyFromRow(bRowNull, rowDimensionNames); // depth 1, null
+    expect(dkA).not.toBe(dkBNull);
+
+    const rowHeaders = new Map([
+      [
+        dkA,
+        {
+          dimKey: dkA,
+          dimValues: { A: "a_val" },
+          columnId: "A",
+        },
+      ],
+    ]);
+    const selection = buildClickSelection(rowHeaders, new Map(), new Set());
+
+    expect(selection.isRowHeaderSelected(dkA)).toBe(true);
+    expect(selection.isRowHeaderSelected(dkBNull)).toBe(false);
+  });
 });

From 6a828b7d6a0f0edb360a9144bb514026789ec4ac Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 5 May 2026 03:07:23 +0530
Subject: [PATCH 47/53] fix measure cell child header eviction

---
 .../pivot/pivot-click-to-filter.spec.ts       | 387 ++++++++++++++++++
 .../components/pivot/pivot-click-to-filter.ts | 299 +++++++-------
 2 files changed, 524 insertions(+), 162 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index 4e4234faf5d..a8630e6c103 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -939,6 +939,393 @@ describe("header/cell mutual exclusivity", () => {
     result.destroy();
   });
 
+  it("parent row cell click evicts child row headers under it", () => {
+    const { result, filterClass } = setupNested();
+    const dkChildHeader = dk({ outer: "Zoom", inner: "US-East" }, dims);
+    const dkZoom = dk({ outer: "Zoom" }, dims);
+
+    // Select a child row header first
+    result.handleCellClickToFilter("1.0", "inner", true, childUSEast);
+    expect(sel(result).isRowHeaderSelected(dkChildHeader)).toBe(true);
+
+    // Click parent row's measure cell — child row header must be evicted
+    filterClass.toggleDimensionValueSelections.mockClear();
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1") return filter1("outer", ["Zoom"]);
+      return EMPTY_FILTER;
+    });
+    result.handleCellClickToFilter("1", "revenue", false, parentZoom);
+
+    expect(sel(result).isCellSelected(dkZoom, "revenue")).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dkChildHeader)).toBe(false);
+    expect(sel(result).rowHeaderSelections.size).toBe(0);
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "inner",
+      ["US-East"],
+      false,
+      false,
+    );
+
+    result.destroy();
+  });
+
+  it("child row cell click evicts ancestor parent row header", () => {
+    const { result } = setupNested();
+    const dkZoom = dk({ outer: "Zoom" }, dims);
+    const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
+
+    // Select parent row header first
+    result.handleCellClickToFilter("1", "outer", true, parentZoom);
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(true);
+
+    // Click child row's measure cell — parent row header must be evicted
+    result.handleCellClickToFilter("1.0", "revenue", false, childUSEast);
+
+    expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dkZoom)).toBe(false);
+    expect(sel(result).rowHeaderSelections.size).toBe(0);
+
+    result.destroy();
+  });
+
+  it("parent row cell click evicts child row cells under it", () => {
+    const { result, filterClass } = setupNested();
+    const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
+    const dkZoom = dk({ outer: "Zoom" }, dims);
+
+    // Select a child measure cell first
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1.0")
+        return filter(
+          { name: "outer", values: ["Zoom"] },
+          { name: "inner", values: ["US-East"] },
+        );
+      return EMPTY_FILTER;
+    });
+    result.handleCellClickToFilter("1.0", "revenue", false, childUSEast);
+    expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(true);
+
+    // Click the parent row's measure cell — child cell must be evicted
+    filterClass.toggleDimensionValueSelections.mockClear();
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1") return filter1("outer", ["Zoom"]);
+      return EMPTY_FILTER;
+    });
+    result.handleCellClickToFilter("1", "revenue", false, parentZoom);
+
+    expect(sel(result).isCellSelected(dkZoom, "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(false);
+    expect(sel(result).cellSelections.size).toBe(1);
+    // Orphaned inner value is removed from the global filter
+    expect(filterClass.toggleDimensionValueSelections).toHaveBeenCalledWith(
+      "inner",
+      ["US-East"],
+      false,
+      false,
+    );
+
+    result.destroy();
+  });
+
+  it("parent row cell click evicts multiple child row cells under it", () => {
+    const { result } = setupNested();
+    const dkChildEast = dk({ outer: "Zoom", inner: "US-East" }, dims);
+    const dkChildExpanded = nestedData[0].subRows!;
+    // Add a second child to the Zoom parent for this test
+    const childUSWestUnderZoom = {
+      outer: "US-West",
+      inner: "US-West",
+      revenue: 25,
+    };
+    nestedData[0].subRows = [...dkChildExpanded, childUSWestUnderZoom];
+
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1.0")
+        return filter(
+          { name: "outer", values: ["Zoom"] },
+          { name: "inner", values: ["US-East"] },
+        );
+      if (rowId === "1.1")
+        return filter(
+          { name: "outer", values: ["Zoom"] },
+          { name: "inner", values: ["US-West"] },
+        );
+      if (rowId === "1") return filter1("outer", ["Zoom"]);
+      return EMPTY_FILTER;
+    });
+
+    result.handleCellClickToFilter("1.0", "revenue", false, childUSEast);
+    result.handleCellClickToFilter(
+      "1.1",
+      "revenue",
+      false,
+      childUSWestUnderZoom,
+    );
+    expect(sel(result).cellSelections.size).toBe(2);
+
+    // Click parent row cell — both children evicted
+    result.handleCellClickToFilter("1", "revenue", false, parentZoom);
+
+    expect(
+      sel(result).isCellSelected(dk({ outer: "Zoom" }, dims), "revenue"),
+    ).toBe(true);
+    expect(sel(result).isCellSelected(dkChildEast, "revenue")).toBe(false);
+    expect(sel(result).cellSelections.size).toBe(1);
+
+    // Restore data for subsequent tests
+    nestedData[0].subRows = dkChildExpanded;
+    result.destroy();
+  });
+
+  it("child row cell click evicts ancestor parent row cell", () => {
+    const { result } = setupNested();
+    const dkZoom = dk({ outer: "Zoom" }, dims);
+    const dkChild = dk({ outer: "Zoom", inner: "US-East" }, dims);
+
+    // Select parent row cell first
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1") return filter1("outer", ["Zoom"]);
+      if (rowId === "1.0")
+        return filter(
+          { name: "outer", values: ["Zoom"] },
+          { name: "inner", values: ["US-East"] },
+        );
+      return EMPTY_FILTER;
+    });
+    result.handleCellClickToFilter("1", "revenue", false, parentZoom);
+    expect(sel(result).isCellSelected(dkZoom, "revenue")).toBe(true);
+
+    // Click child row cell — parent cell must be evicted
+    result.handleCellClickToFilter("1.0", "revenue", false, childUSEast);
+
+    expect(sel(result).isCellSelected(dkChild, "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dkZoom, "revenue")).toBe(false);
+    expect(sel(result).cellSelections.size).toBe(1);
+
+    result.destroy();
+  });
+
+  it("parent row cell click keeps sibling-lineage cells intact", () => {
+    const { result } = setupNested();
+    const dkAirtableChild = dk({ outer: "Airtable", inner: "US-West" }, dims);
+
+    // Select a cell under Airtable parent
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "2.0")
+        return filter(
+          { name: "outer", values: ["Airtable"] },
+          { name: "inner", values: ["US-West"] },
+        );
+      if (rowId === "1") return filter1("outer", ["Zoom"]);
+      return EMPTY_FILTER;
+    });
+    result.handleCellClickToFilter("2.0", "revenue", false, childUSWest);
+    expect(sel(result).isCellSelected(dkAirtableChild, "revenue")).toBe(true);
+
+    // Click Zoom parent row cell — Airtable's child cell is a different
+    // lineage and must coexist
+    result.handleCellClickToFilter("1", "revenue", false, parentZoom);
+
+    expect(
+      sel(result).isCellSelected(dk({ outer: "Zoom" }, dims), "revenue"),
+    ).toBe(true);
+    expect(sel(result).isCellSelected(dkAirtableChild, "revenue")).toBe(true);
+    expect(sel(result).cellSelections.size).toBe(2);
+
+    result.destroy();
+  });
+
+  it("parent cell + same-row sibling-column cells coexist (not lineage)", () => {
+    const { result } = setupNested();
+    const dkZoom = dk({ outer: "Zoom" }, dims);
+
+    vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId) => {
+      if (rowId === "1") return filter1("outer", ["Zoom"]);
+      return EMPTY_FILTER;
+    });
+
+    // Two cells in the same parent row, different columns: same dimValues,
+    // not in a strict subset/superset relationship — both must coexist.
+    result.handleCellClickToFilter("1", "revenue", false, parentZoom);
+    result.handleCellClickToFilter("1", "other_measure", false, parentZoom);
+
+    expect(sel(result).isCellSelected(dkZoom, "revenue")).toBe(true);
+    expect(sel(result).isCellSelected(dkZoom, "other_measure")).toBe(true);
+    expect(sel(result).cellSelections.size).toBe(2);
+
+    result.destroy();
+  });
+
+  // Nested rows + nested columns: parent-row cell click should evict every
+  // child-row cell in that lineage regardless of which column the parent or
+  // child cells sit in. Cell-on-cell row lineage ignores column dims.
+  describe("with column dimensions", () => {
+    const nestedColConfig = makeConfig({
+      rowDimensionNames: ["outer", "inner"],
+      colDimensionNames: ["quarter", "env"],
+      measureNames: ["revenue"],
+    });
+    const colData: PivotDataRow[] = [
+      {
+        outer: "Zoom",
+        revenue: 100,
+        subRows: [
+          { outer: "US-East", inner: "US-East", revenue: 50 },
+          { outer: "US-West", inner: "US-West", revenue: 30 },
+        ],
+      },
+    ];
+    const colDims = ["outer", "inner"];
+    const parentZoomCol = colData[0];
+    const childEastCol = colData[0].subRows![0];
+    const childWestCol = colData[0].subRows![1];
+
+    function setupNestedWithCols() {
+      // Children sit at different leaf columns (Q1×Prod and Q2×Dev).
+      vi.mocked(getFiltersForCell).mockImplementation((_cfg, rowId, colId) => {
+        if (rowId === "1.0" && colId === "child_east_col")
+          return filter(
+            { name: "outer", values: ["Zoom"] },
+            { name: "inner", values: ["US-East"] },
+            { name: "quarter", values: ["Q1"] },
+            { name: "env", values: ["Prod"] },
+          );
+        if (rowId === "1.1" && colId === "child_west_col")
+          return filter(
+            { name: "outer", values: ["Zoom"] },
+            { name: "inner", values: ["US-West"] },
+            { name: "quarter", values: ["Q2"] },
+            { name: "env", values: ["Dev"] },
+          );
+        // Parent row at totals column (no col dims)
+        if (rowId === "1" && colId === "totals_col")
+          return filter1("outer", ["Zoom"]);
+        // Parent row at quarter-aggregate column (one col dim)
+        if (rowId === "1" && colId === "q1_total_col")
+          return filter(
+            { name: "outer", values: ["Zoom"] },
+            { name: "quarter", values: ["Q1"] },
+          );
+        // Parent row at quarter+env leaf column (both col dims)
+        if (rowId === "1" && colId === "q1_prod_col")
+          return filter(
+            { name: "outer", values: ["Zoom"] },
+            { name: "quarter", values: ["Q1"] },
+            { name: "env", values: ["Prod"] },
+          );
+        return EMPTY_FILTER;
+      });
+      return setup(nestedColConfig, colData);
+    }
+
+    it("parent cell at totals column evicts all child cells", () => {
+      const { result } = setupNestedWithCols();
+      const dkChildEast = dk({ outer: "Zoom", inner: "US-East" }, colDims);
+      const dkChildWest = dk({ outer: "Zoom", inner: "US-West" }, colDims);
+      const dkZoom = dk({ outer: "Zoom" }, colDims);
+
+      result.handleCellClickToFilter(
+        "1.0",
+        "child_east_col",
+        false,
+        childEastCol,
+      );
+      result.handleCellClickToFilter(
+        "1.1",
+        "child_west_col",
+        false,
+        childWestCol,
+      );
+      expect(sel(result).cellSelections.size).toBe(2);
+
+      result.handleCellClickToFilter("1", "totals_col", false, parentZoomCol);
+
+      expect(sel(result).isCellSelected(dkZoom, "totals_col")).toBe(true);
+      expect(sel(result).isCellSelected(dkChildEast, "child_east_col")).toBe(
+        false,
+      );
+      expect(sel(result).isCellSelected(dkChildWest, "child_west_col")).toBe(
+        false,
+      );
+      expect(sel(result).cellSelections.size).toBe(1);
+
+      result.destroy();
+    });
+
+    it("parent cell at quarter-aggregate column evicts all child cells across columns", () => {
+      const { result } = setupNestedWithCols();
+      const dkChildEast = dk({ outer: "Zoom", inner: "US-East" }, colDims);
+      const dkChildWest = dk({ outer: "Zoom", inner: "US-West" }, colDims);
+      const dkZoom = dk({ outer: "Zoom" }, colDims);
+
+      // Children sit at different quarters
+      result.handleCellClickToFilter(
+        "1.0",
+        "child_east_col",
+        false,
+        childEastCol,
+      );
+      result.handleCellClickToFilter(
+        "1.1",
+        "child_west_col",
+        false,
+        childWestCol,
+      );
+      expect(sel(result).cellSelections.size).toBe(2);
+
+      // Click parent's Q1-total cell — both children must be evicted even
+      // though one is at Q2.
+      result.handleCellClickToFilter("1", "q1_total_col", false, parentZoomCol);
+
+      expect(sel(result).isCellSelected(dkZoom, "q1_total_col")).toBe(true);
+      expect(sel(result).isCellSelected(dkChildEast, "child_east_col")).toBe(
+        false,
+      );
+      expect(sel(result).isCellSelected(dkChildWest, "child_west_col")).toBe(
+        false,
+      );
+      expect(sel(result).cellSelections.size).toBe(1);
+
+      result.destroy();
+    });
+
+    it("parent cell at leaf column evicts all child cells across columns", () => {
+      const { result } = setupNestedWithCols();
+      const dkChildEast = dk({ outer: "Zoom", inner: "US-East" }, colDims);
+      const dkChildWest = dk({ outer: "Zoom", inner: "US-West" }, colDims);
+      const dkZoom = dk({ outer: "Zoom" }, colDims);
+
+      result.handleCellClickToFilter(
+        "1.0",
+        "child_east_col",
+        false,
+        childEastCol,
+      );
+      result.handleCellClickToFilter(
+        "1.1",
+        "child_west_col",
+        false,
+        childWestCol,
+      );
+      expect(sel(result).cellSelections.size).toBe(2);
+
+      // Click parent's Q1×Prod leaf cell — both children must be evicted
+      // regardless of which column they sit in.
+      result.handleCellClickToFilter("1", "q1_prod_col", false, parentZoomCol);
+
+      expect(sel(result).isCellSelected(dkZoom, "q1_prod_col")).toBe(true);
+      expect(sel(result).isCellSelected(dkChildEast, "child_east_col")).toBe(
+        false,
+      );
+      expect(sel(result).isCellSelected(dkChildWest, "child_west_col")).toBe(
+        false,
+      );
+      expect(sel(result).cellSelections.size).toBe(1);
+
+      result.destroy();
+    });
+  });
+
   // Column header mutual exclusivity uses flat config with column dims
   const flatWithColConfig = makeConfig({
     rowDimensionNames: ["country"],
diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
index 646f42c95e0..16d7ababd10 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.ts
@@ -441,8 +441,8 @@ export function createPivotClickToFilter(
   // --- Lineage-aware mutual exclusivity helpers ---
 
   /**
-   * Check if a cell is "under" a header: the header's dimension values are
-   * a subset of the cell's dimValues.
+   * Check whether every (k, v) in `subset` is present in `superset`. Equal
+   * records also satisfy this; callers needing strictness compare key counts.
    */
   function isDimSubset(
     subset: Record<string, string | null>,
@@ -454,73 +454,53 @@ export function createPivotClickToFilter(
   }
 
   /**
-   * Find cell selection keys whose dimValues contain all of the header's
-   * dimension values (i.e., cells "under" the header).
+   * Project a dimValues record down to row dimensions only. Row-lineage is
+   * determined entirely by row dimensions; column dimensions describe which
+   * intersection was clicked, not the lineage. Row-header entries already
+   * carry row-dim-only dimValues, so this is a no-op for them.
    */
-  function findCellsUnderRowHeader(
-    selection: PivotClickSelectionState,
-    headerDimValues: Record<string, string | null>,
-  ): string[] {
-    const keys: string[] = [];
-    for (const [key, entry] of selection.cellSelections) {
-      if (isDimSubset(headerDimValues, entry.dimValues)) {
-        keys.push(key);
-      }
-    }
-    return keys;
-  }
-
-  /**
-   * Find row header dimKeys whose dimValues are a subset of the cell's dimValues
-   * (i.e., headers that are "above" the cell).
-   */
-  function findRowHeadersAboveCell(
-    selection: PivotClickSelectionState,
-    cellDimValues: Record<string, string | null>,
-  ): string[] {
-    const keys: string[] = [];
-    for (const [dk, entry] of selection.rowHeaderSelections) {
-      if (isDimSubset(entry.dimValues, cellDimValues)) {
-        keys.push(dk);
-      }
-    }
-    return keys;
-  }
-
-  /**
-   * Find row header dimKeys that are descendants of the clicked header (its
-   * dimValues are a strict superset of the clicked header's dimValues).
-   * Strictness excludes the clicked header itself from the eviction set.
-   */
-  function findRowHeadersUnderRowHeader(
-    selection: PivotClickSelectionState,
-    headerDimValues: Record<string, string | null>,
-    clickedDk: string,
-  ): string[] {
-    const keys: string[] = [];
-    for (const [dk, entry] of selection.rowHeaderSelections) {
-      if (dk === clickedDk) continue;
-      if (isDimSubset(headerDimValues, entry.dimValues)) {
-        keys.push(dk);
-      }
+  function rowDimsOnly(
+    dimValues: Record<string, string | null>,
+    rowDimensionNames: string[],
+  ): Record<string, string | null> {
+    const result: Record<string, string | null> = {};
+    for (const dim of rowDimensionNames) {
+      if (dim in dimValues) result[dim] = dimValues[dim];
     }
-    return keys;
+    return result;
   }
 
   /**
-   * Find row header dimKeys that are ancestors of the clicked header (its
-   * dimValues are a strict subset of the clicked header's dimValues).
+   * Find selection entries whose row dimValues are a descendant
+   * (`direction: "descendants"`) or strict ancestor (`direction: "ancestors"`)
+   * of the clicked element's row dimValues.
+   *
+   * Ancestors are always strict (equal row dims excluded). Descendants are
+   * strict by default; pass `includeSelf` to also evict same-row entries
+   * (used by row-header clicks, which take over the row's filter scope).
+   *
+   * Works uniformly for cell selections and row-header selections because
+   * both store dimValues that are row-dim-only after projection.
    */
-  function findRowHeadersAboveRowHeader(
-    selection: PivotClickSelectionState,
-    headerDimValues: Record<string, string | null>,
-    clickedDk: string,
+  function findEntriesInRowLineage(
+    entries: Map<string, SelectionEntry>,
+    clickedRowDims: Record<string, string | null>,
+    rowDimensionNames: string[],
+    direction: "ancestors" | "descendants",
+    includeSelf = false,
   ): string[] {
+    const clickedSize = Object.keys(clickedRowDims).length;
     const keys: string[] = [];
-    for (const [dk, entry] of selection.rowHeaderSelections) {
-      if (dk === clickedDk) continue;
-      if (isDimSubset(entry.dimValues, headerDimValues)) {
-        keys.push(dk);
+    for (const [key, entry] of entries) {
+      const entryRowDims = rowDimsOnly(entry.dimValues, rowDimensionNames);
+      const entrySize = Object.keys(entryRowDims).length;
+      if (direction === "descendants") {
+        if (entrySize < clickedSize) continue;
+        if (entrySize === clickedSize && !includeSelf) continue;
+        if (isDimSubset(clickedRowDims, entryRowDims)) keys.push(key);
+      } else {
+        if (entrySize >= clickedSize) continue;
+        if (isDimSubset(entryRowDims, clickedRowDims)) keys.push(key);
       }
     }
     return keys;
@@ -779,118 +759,113 @@ export function createPivotClickToFilter(
       return;
     }
 
-    // Mutual exclusivity: headers and cells under the same lineage cannot
-    // coexist. When adding a new selection, evict the opposite domain.
-    if (isRowHeader) {
-      // Clicking a row header: evict cells under this header, plus any row
-      // headers in the same lineage (both descendants and ancestors).
-      const cellKeysToEvict = findCellsUnderRowHeader(
-        $clickSelection,
-        dimValues,
-      );
-      const descendantHeaderKeysToEvict = findRowHeadersUnderRowHeader(
-        $clickSelection,
-        dimValues,
-        dk,
-      );
-      const ancestorHeaderKeysToEvict = findRowHeadersAboveRowHeader(
-        $clickSelection,
-        dimValues,
-        dk,
-      );
-      const rowHeaderKeysToEvict = [
-        ...descendantHeaderKeysToEvict,
-        ...ancestorHeaderKeysToEvict,
-      ];
-
-      const evictedCellEntries = cellKeysToEvict
-        .map((k) => $clickSelection.cellSelections.get(k))
-        .filter(Boolean) as SelectionEntry[];
-      const evictedHeaderEntries = rowHeaderKeysToEvict
-        .map((k) => $clickSelection.rowHeaderSelections.get(k))
-        .filter(Boolean) as SelectionEntry[];
-      const evictedDimValues = collectRemovalsFromEntries([
-        ...evictedCellEntries,
-        ...evictedHeaderEntries,
-      ]);
-
-      const removals: ExtractedFilter[] = [...evictedDimValues.entries()].map(
-        ([dimensionName, values]) => ({
-          dimensionName,
-          values: [...values],
-        }),
-      );
-
-      const additions = extractDimensionFiltersFromExpression(
-        cellFilters.filters,
-      );
-
-      applyFilterUpdate({
-        removals,
-        additions,
-        updateSelectionSets: (nextRowHeaders, nextCells) => {
-          for (const k of cellKeysToEvict) nextCells.delete(k);
-          for (const k of rowHeaderKeysToEvict) nextRowHeaders.delete(k);
-          nextRowHeaders.set(dk, { dimKey: dk, dimValues, columnId });
-        },
-      });
-    } else {
-      // Clicking a measure cell: evict ancestor row headers and column headers
-      const rowHeaderKeysToEvict = findRowHeadersAboveCell(
-        $clickSelection,
-        storedDimValues,
-      );
-      const colHeaderKeysToEvict = findColHeadersAboveCell(
-        $clickSelection,
-        storedDimValues,
-      );
-
-      const evictedRowEntries = rowHeaderKeysToEvict
-        .map((k) => $clickSelection.rowHeaderSelections.get(k))
-        .filter(Boolean) as SelectionEntry[];
-
-      const evictedDimValues = collectRemovalsFromEntries(evictedRowEntries);
+    // Mutual exclusivity: headers and cells in the same row lineage cannot
+    // coexist. When adding a new selection, evict every entry whose row dims
+    // are a strict ancestor or descendant of the click — across both row
+    // headers and cells. Same-row siblings (equal row dims) coexist.
+    const clickedRowDims = isRowHeader
+      ? dimValues
+      : rowDimsOnly(storedDimValues, $config.rowDimensionNames);
+
+    // Cell-on-cell row lineage eviction is nested-only: flat tables handle
+    // same-row replacement via tryFlatTableCellReplacement, and cross-row
+    // flat cells don't form a parent/child lineage.
+    const evictCells = isRowHeader || isNested;
+
+    // Row-header clicks also evict same-row cells (header takes over row's
+    // filter scope). Cell-on-cell eviction is strict so same-row sibling
+    // cells in different columns coexist.
+    const cellKeysToEvict = evictCells
+      ? [
+          ...findEntriesInRowLineage(
+            $clickSelection.cellSelections,
+            clickedRowDims,
+            $config.rowDimensionNames,
+            "descendants",
+            isRowHeader,
+          ),
+          ...(isRowHeader
+            ? []
+            : findEntriesInRowLineage(
+                $clickSelection.cellSelections,
+                clickedRowDims,
+                $config.rowDimensionNames,
+                "ancestors",
+              )),
+        ]
+      : [];
+    const rowHeaderKeysToEvict = [
+      ...findEntriesInRowLineage(
+        $clickSelection.rowHeaderSelections,
+        clickedRowDims,
+        $config.rowDimensionNames,
+        "descendants",
+      ),
+      ...findEntriesInRowLineage(
+        $clickSelection.rowHeaderSelections,
+        clickedRowDims,
+        $config.rowDimensionNames,
+        "ancestors",
+      ),
+    ];
+    const colHeaderKeysToEvict = isRowHeader
+      ? []
+      : findColHeadersAboveCell($clickSelection, storedDimValues);
+
+    const evictedCellEntries = cellKeysToEvict
+      .map((k) => $clickSelection.cellSelections.get(k))
+      .filter(Boolean) as SelectionEntry[];
+    const evictedHeaderEntries = rowHeaderKeysToEvict
+      .map((k) => $clickSelection.rowHeaderSelections.get(k))
+      .filter(Boolean) as SelectionEntry[];
+    const evictedDimValues = collectRemovalsFromEntries([
+      ...evictedCellEntries,
+      ...evictedHeaderEntries,
+    ]);
 
-      // Also collect column header dimension values for removal
-      for (const colKey of colHeaderKeysToEvict) {
-        const entries = JSON.parse(colKey) as [string, string][];
-        for (const [name, value] of entries) {
-          let set = evictedDimValues.get(name);
-          if (!set) {
-            set = new Set();
-            evictedDimValues.set(name, set);
-          }
-          set.add(value);
+    // Also collect column header dimension values for removal
+    for (const colKey of colHeaderKeysToEvict) {
+      const entries = JSON.parse(colKey) as [string, string][];
+      for (const [name, value] of entries) {
+        let set = evictedDimValues.get(name);
+        if (!set) {
+          set = new Set();
+          evictedDimValues.set(name, set);
         }
+        set.add(value);
       }
+    }
 
-      const removals: ExtractedFilter[] = [...evictedDimValues.entries()].map(
-        ([dimensionName, values]) => ({
-          dimensionName,
-          values: [...values],
-        }),
-      );
+    const removals: ExtractedFilter[] = [...evictedDimValues.entries()].map(
+      ([dimensionName, values]) => ({
+        dimensionName,
+        values: [...values],
+      }),
+    );
 
-      const additions = extractDimensionFiltersFromExpression(
-        cellFilters.filters,
-      );
+    const additions = extractDimensionFiltersFromExpression(
+      cellFilters.filters,
+    );
 
-      applyFilterUpdate({
-        removals,
-        additions,
-        updateSelectionSets: (nextRowHeaders, nextCells, nextColHeaders) => {
-          for (const k of rowHeaderKeysToEvict) nextRowHeaders.delete(k);
-          for (const k of colHeaderKeysToEvict) nextColHeaders.delete(k);
-          const key = cellKey(dk, columnId);
-          nextCells.set(key, {
+    applyFilterUpdate({
+      removals,
+      additions,
+      updateSelectionSets: (nextRowHeaders, nextCells, nextColHeaders) => {
+        for (const k of cellKeysToEvict) nextCells.delete(k);
+        for (const k of rowHeaderKeysToEvict) nextRowHeaders.delete(k);
+        for (const k of colHeaderKeysToEvict) nextColHeaders.delete(k);
+        if (isRowHeader) {
+          nextRowHeaders.set(dk, { dimKey: dk, dimValues, columnId });
+        } else {
+          nextCells.set(cellKey(dk, columnId), {
             dimKey: dk,
             dimValues: storedDimValues,
             columnId,
             dimClickIndex: upToDimensionIndex,
           });
-        },
-      });
-    }
+        }
+      },
+    });
   }
 
   function handleColumnHeaderClick(dimensionPath: Record<string, string>) {

From 4508ae695383aeadb3ef5a033c4fcf7af225c578 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 5 May 2026 03:24:55 +0530
Subject: [PATCH 48/53] higlight measure cells from selected cell row

---
 .../dashboards/pivot/NestedTable.svelte       | 21 +++++-
 .../pivot/pivot-cell-classes.spec.ts          | 61 +++++++++++++++++
 .../dashboards/pivot/pivot-cell-classes.ts    | 17 +++++
 .../pivot/pivot-selection-indices.ts          | 66 +++++++++++++++++++
 4 files changed, 164 insertions(+), 1 deletion(-)

diff --git a/web-common/src/features/dashboards/pivot/NestedTable.svelte b/web-common/src/features/dashboards/pivot/NestedTable.svelte
index e0005c0e336..b06872c3299 100644
--- a/web-common/src/features/dashboards/pivot/NestedTable.svelte
+++ b/web-common/src/features/dashboards/pivot/NestedTable.svelte
@@ -33,6 +33,7 @@
   import type { PivotRowSelectionState } from "./pivot-row-selection";
   import {
     computeAncestorRowIds,
+    computeCellSelectedColDimGroupIndices,
     computeCellSelectedColIndices,
     computeSelectedColIndices,
     type HoveredColRange,
@@ -89,6 +90,11 @@
     clickSelection,
     headerGroups,
   );
+  $: cellSelectedColDimGroupIndices = computeCellSelectedColDimGroupIndices(
+    clickSelection,
+    headerGroups,
+    rowDimensionNames,
+  );
   $: ancestorRowIdsOfSelectedHeaders = computeAncestorRowIds(
     clickSelection,
     rows,
@@ -494,6 +500,7 @@
             hasClickedCell,
             inHoveredCol: isHeaderInHoveredRange(i, 1, hoveredColRange),
             inSelectedCol: selectedColIndices.has(i),
+            inCellSelectedColDimGroup: cellSelectedColDimGroupIndices.has(i),
             isRowHeaderSelected,
             hasCrossSelection,
             isAncestorOfSelectedHeader,
@@ -510,6 +517,8 @@
             class:selected-cell={cs.selectedCell}
             class:col-dim-hover-body={cs.colDimHoverBody}
             class:selected-col-body={cs.selectedColBody}
+            class:cell-selected-col-dim-group-body={cs.cellSelectedColDimGroupBody}
+            class:out-of-group-row-cell={cs.outOfGroupRowCell}
             class:cell-selected-row-header={cs.cellSelectedRowHeader}
             class:cross-intersection={cs.crossIntersection}
             class:cross-row-arm={cs.crossRowArm}
@@ -796,10 +805,20 @@
   }
 
   .in-selected-col-range .header-cell,
-  .selected-col-body.cell {
+  .selected-col-body.cell,
+  .cell-selected-col-dim-group-body.cell {
     @apply bg-primary-50;
   }
 
+  /* Cells in the clicked row that fall outside the clicked cell's
+     col-dim group (e.g. other measure groups in the same row) */
+  .out-of-group-row-cell.cell {
+    @apply bg-surface-muted;
+  }
+  tbody tr:hover .out-of-group-row-cell.cell {
+    @apply bg-surface-muted;
+  }
+
   /* Cross-highlights for cell click-to-filter selections */
   .cell-selected-col-header .header-cell {
     @apply bg-primary-50;
diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
index b359e4fcec5..64c86120223 100644
--- a/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.spec.ts
@@ -234,6 +234,7 @@ describe("nestedCellState", () => {
     hasClickedCell: false,
     inHoveredCol: false,
     inSelectedCol: false,
+    inCellSelectedColDimGroup: false,
     isRowHeaderSelected: false,
     hasCrossSelection: false,
     isAncestorOfSelectedHeader: false,
@@ -332,6 +333,63 @@ describe("nestedCellState", () => {
     ).toBe(true);
   });
 
+  it("returns cellSelectedColDimGroupBody for sibling measures in clicked row's col-dim group", () => {
+    const result = nestedCellState({
+      ...base,
+      hasClickedCell: true,
+      inCellSelectedColDimGroup: true,
+    });
+    expect(result.cellSelectedColDimGroupBody).toBe(true);
+  });
+
+  it("does not return cellSelectedColDimGroupBody for cells in unclicked rows", () => {
+    const result = nestedCellState({
+      ...base,
+      hasClickedCell: false,
+      inCellSelectedColDimGroup: true,
+    });
+    expect(result.cellSelectedColDimGroupBody).toBe(false);
+  });
+
+  it("does not return cellSelectedColDimGroupBody for the clicked cell itself", () => {
+    const result = nestedCellState({
+      ...base,
+      hasClickedCell: true,
+      isClicked: true,
+      inCellSelectedColDimGroup: true,
+    });
+    expect(result.cellSelectedColDimGroupBody).toBe(false);
+    expect(result.selectedCell).toBe(true);
+  });
+
+  it("returns outOfGroupRowCell for clicked-row measures outside the clicked col-dim group", () => {
+    const result = nestedCellState({
+      ...base,
+      hasClickedCell: true,
+      inCellSelectedColDimGroup: false,
+    });
+    expect(result.outOfGroupRowCell).toBe(true);
+  });
+
+  it("does not return outOfGroupRowCell for cells outside the clicked row", () => {
+    const result = nestedCellState({
+      ...base,
+      hasClickedCell: false,
+      inCellSelectedColDimGroup: false,
+    });
+    expect(result.outOfGroupRowCell).toBe(false);
+  });
+
+  it("does not return outOfGroupRowCell for the row header column", () => {
+    const result = nestedCellState({
+      ...base,
+      cellIndex: 0,
+      hasClickedCell: true,
+      inCellSelectedColDimGroup: false,
+    });
+    expect(result.outOfGroupRowCell).toBe(false);
+  });
+
   it("returns all false for a plain cell", () => {
     const result = nestedCellState(base);
     expect(result.activeCell).toBe(false);
@@ -339,6 +397,8 @@ describe("nestedCellState", () => {
     expect(result.crossIntersection).toBe(false);
     expect(result.crossRowArm).toBe(false);
     expect(result.crossColArm).toBe(false);
+    expect(result.cellSelectedColDimGroupBody).toBe(false);
+    expect(result.outOfGroupRowCell).toBe(false);
     expect(result.interactiveCell).toBe(false);
   });
 });
@@ -471,6 +531,7 @@ describe("3-dimension nested table: row header click styling by depth", () => {
       hasClickedCell: false,
       inHoveredCol: false,
       inSelectedCol: false,
+      inCellSelectedColDimGroup: false,
       isRowHeaderSelected: false,
       hasCrossSelection,
       isAncestorOfSelectedHeader,
diff --git a/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
index c16223ead02..dc2f9e384b1 100644
--- a/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-cell-classes.ts
@@ -120,6 +120,8 @@ export interface NestedCellContext {
   hasClickedCell: boolean;
   inHoveredCol: boolean;
   inSelectedCol: boolean;
+  /** True when this cell shares its column-dimension group with a clicked cell */
+  inCellSelectedColDimGroup: boolean;
   isRowHeaderSelected: boolean;
   hasCrossSelection: boolean;
   isAncestorOfSelectedHeader: boolean;
@@ -136,6 +138,10 @@ export interface NestedCellState {
   cellSelectedRowHeader: boolean;
   /** Grey background for data cells on parent rows that partially contain filtered data */
   partialAggregateCell: boolean;
+  /** Blue background for sibling measure cells in the same col-dim group as a clicked cell */
+  cellSelectedColDimGroupBody: boolean;
+  /** Grey background for cells in the clicked row that fall outside the clicked cell's col-dim group */
+  outOfGroupRowCell: boolean;
   crossIntersection: boolean;
   crossRowArm: boolean;
   crossColArm: boolean;
@@ -188,6 +194,17 @@ export function nestedCellState(ctx: NestedCellContext): NestedCellState {
       ctx.isAncestorOfSelectedHeader &&
       ctx.cellIndex > 0 &&
       !ctx.hasCrossSelection,
+    cellSelectedColDimGroupBody:
+      ctx.inCellSelectedColDimGroup &&
+      ctx.hasClickedCell &&
+      !ctx.isClicked &&
+      ctx.cellIndex > 0 &&
+      !ctx.hasCrossSelection,
+    outOfGroupRowCell:
+      ctx.hasClickedCell &&
+      !ctx.inCellSelectedColDimGroup &&
+      ctx.cellIndex > 0 &&
+      !ctx.hasCrossSelection,
     crossIntersection:
       ctx.hasCrossSelection &&
       ctx.isRowHeaderSelected &&
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
index decfd780f01..0278ae0a0cf 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
@@ -62,6 +62,72 @@ export function computeCellSelectedColIndices(
   return indices;
 }
 
+/**
+ * Compute the set of leaf column indices that share the column-dimension
+ * group of any cell selection. A leaf is "in the group" when its most
+ * specific column-dimension parent header's `dimensionPath` is fully
+ * present in some cell selection's stored dimValues.
+ *
+ * Used to extend a clicked cell's blue context highlight to its sibling
+ * measure cells in the same col-dim group
+ *
+ * When no column dimension is configured, every leaf measure column shares
+ * the same (empty) group, so all leaf indices are returned.
+ */
+export function computeCellSelectedColDimGroupIndices(
+  clickSelection: PivotClickSelectionState | undefined,
+  headerGroups: HeaderGroup<PivotDataRow>[],
+  rowDimensionNames: string[],
+): Set<number> {
+  if (!clickSelection?.cellSelections.size) return new Set();
+
+  const rowDimSet = new Set(rowDimensionNames);
+  const selectedColPaths: Record<string, string | null>[] = [];
+  for (const entry of clickSelection.cellSelections.values()) {
+    const colPath: Record<string, string | null> = {};
+    for (const [name, value] of Object.entries(entry.dimValues)) {
+      if (!rowDimSet.has(name)) {
+        colPath[name] = value;
+      }
+    }
+    selectedColPaths.push(colPath);
+  }
+
+  const leafGroup = headerGroups[headerGroups.length - 1];
+  if (!leafGroup) return new Set();
+  const leafCount = leafGroup.headers.reduce((s, h) => s + h.colSpan, 0);
+
+  // No col-dim values stored on any selection: all measure cells share the
+  // same (empty) group; mark every leaf as in-group.
+  if (selectedColPaths.every((p) => Object.keys(p).length === 0)) {
+    const all = new Set<number>();
+    for (let i = 0; i < leafCount; i++) all.add(i);
+    return all;
+  }
+
+  const indices = new Set<number>();
+  for (const group of headerGroups) {
+    let colStart = 0;
+    for (const header of group.headers) {
+      const path = header.column.columnDef.meta?.dimensionPath;
+      if (path && Object.keys(path).length > 0) {
+        const matches = selectedColPaths.some((selectedPath) =>
+          Object.entries(path).every(
+            ([name, value]) => selectedPath[name] === value,
+          ),
+        );
+        if (matches) {
+          for (let c = colStart; c < colStart + header.colSpan; c++) {
+            indices.add(c);
+          }
+        }
+      }
+      colStart += header.colSpan;
+    }
+  }
+  return indices;
+}
+
 /**
  * Compute TanStack row IDs that are ancestors of any selected
  * child row (row header click or cell click). Used to highlight

From 72a482e3f12e3dd6c505da7531e154367ce609db Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 5 May 2026 22:08:07 +0530
Subject: [PATCH 49/53] cross higlighting for same set column dimension headers

---
 .../pivot/pivot-selection-indices.spec.ts     | 67 ++++++++++++++++++-
 .../pivot/pivot-selection-indices.ts          | 56 ++++++++++++++--
 2 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
index ec445fc7078..632e2943646 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
@@ -1,11 +1,13 @@
-import type { Row } from "tanstack-table-8-svelte-5";
+import type { HeaderGroup, Row } from "tanstack-table-8-svelte-5";
 import { describe, expect, it } from "vitest";
 import {
   buildClickSelection,
+  columnHeaderKey,
   nestedDimKeyFromRow,
 } from "./pivot-click-selection";
 import {
   computeAncestorRowIds,
+  computeSelectedColIndices,
   isHeaderInHoveredRange,
   isHoveredHeader,
   isInCellSelectedColRange,
@@ -13,6 +15,20 @@ import {
 } from "./pivot-selection-indices";
 import type { PivotDataRow } from "./types";
 
+function header(
+  colSpan: number,
+  dimensionPath?: Record<string, string>,
+): HeaderGroup<PivotDataRow>["headers"][number] {
+  return {
+    colSpan,
+    column: {
+      columnDef: {
+        meta: dimensionPath ? { dimensionPath } : undefined,
+      },
+    },
+  } as unknown as HeaderGroup<PivotDataRow>["headers"][number];
+}
+
 // ---- isHeaderInHoveredRange ----
 
 describe("isHeaderInHoveredRange", () => {
@@ -103,6 +119,55 @@ describe("isInCellSelectedColRange", () => {
   });
 });
 
+describe("computeSelectedColIndices", () => {
+  const headerGroups = [
+    {
+      headers: [
+        header(1),
+        header(3, { component: "cold" }),
+        header(2, { component: "batch" }),
+      ],
+    },
+    {
+      headers: [
+        header(1),
+        header(1, { component: "cold", plan: "Standard Plan" }),
+        header(1, { component: "cold", plan: "Legacy" }),
+        header(1, { component: "cold", plan: "POC" }),
+        header(1, { component: "batch", plan: "Standard Plan" }),
+        header(1, { component: "batch", plan: "Legacy" }),
+      ],
+    },
+  ] as unknown as HeaderGroup<PivotDataRow>[];
+
+  it("includes cross-product child columns from selected column-header filters", () => {
+    const selection = buildClickSelection(
+      new Map(),
+      new Map(),
+      new Set([
+        columnHeaderKey({ component: "cold", plan: "Standard Plan" }),
+        columnHeaderKey({ component: "batch", plan: "Legacy" }),
+      ]),
+    );
+
+    expect([...computeSelectedColIndices(selection, headerGroups)]).toEqual([
+      1, 2, 4, 5,
+    ]);
+  });
+
+  it("keeps parent header selections scoped to the parent span", () => {
+    const selection = buildClickSelection(
+      new Map(),
+      new Map(),
+      new Set([columnHeaderKey({ component: "cold" })]),
+    );
+
+    expect([...computeSelectedColIndices(selection, headerGroups)]).toEqual([
+      1, 2, 3,
+    ]);
+  });
+});
+
 describe("computeAncestorRowIds", () => {
   // Build a minimal fake TanStack Row tree for a 3-dim table.
   // In nested mode, each row stores its own value under rowDimensions[0].
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
index 0278ae0a0cf..969f6af7a54 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
@@ -10,16 +10,58 @@ import type { PivotClickSelectionState } from "./pivot-click-selection";
 import { dimKeyFromRow, nestedDimKeyFromRow } from "./pivot-click-selection";
 import type { PivotDataRow } from "./types";
 
+function selectedColumnHeaderFilters(
+  clickSelection: PivotClickSelectionState,
+): {
+  selectedLevel: number;
+  valuesByDimension: Map<string, Set<string>>;
+} {
+  const valuesByDimension = new Map<string, Set<string>>();
+  let selectedLevel = -1;
+
+  for (const colKey of clickSelection.columnHeaderSelections) {
+    const entries = JSON.parse(colKey) as [string, string][];
+    selectedLevel = Math.max(selectedLevel, entries.length);
+
+    for (const [dimensionName, value] of entries) {
+      let values = valuesByDimension.get(dimensionName);
+      if (!values) {
+        values = new Set();
+        valuesByDimension.set(dimensionName, values);
+      }
+      values.add(value);
+    }
+  }
+
+  return { selectedLevel, valuesByDimension };
+}
+
+function dimensionPathMatchesSelectedFilters(
+  dimensionPath: Record<string, string>,
+  selectedLevel: number,
+  valuesByDimension: Map<string, Set<string>>,
+): boolean {
+  const entries = Object.entries(dimensionPath);
+  if (entries.length !== selectedLevel) return false;
+
+  return entries.every(([dimensionName, value]) =>
+    valuesByDimension.get(dimensionName)?.has(value),
+  );
+}
+
 /**
- * Compute the set of leaf column indices that fall within any
- * selected column header's span. Iterates all header groups to
- * find headers whose dimensionPath matches the selection.
+ * Compute the set of leaf column indices included by selected column-header
+ * filters. Header selections produce dimension IN-lists, so multiple child
+ * selections can include their cross-product sibling columns.
  */
 export function computeSelectedColIndices(
   clickSelection: PivotClickSelectionState | undefined,
   headerGroups: HeaderGroup<PivotDataRow>[],
 ): Set<number> {
-  if (!clickSelection?.hasAnySelection) return new Set();
+  if (!clickSelection?.columnHeaderSelections.size) return new Set();
+  const { selectedLevel, valuesByDimension } =
+    selectedColumnHeaderFilters(clickSelection);
+
   const indices = new Set<number>();
   for (const group of headerGroups) {
     let colStart = 0;
@@ -27,7 +69,11 @@ export function computeSelectedColIndices(
       const meta = header.column.columnDef.meta;
       if (
         meta?.dimensionPath &&
-        clickSelection.isColumnHeaderSelected(meta.dimensionPath)
+        dimensionPathMatchesSelectedFilters(
+          meta.dimensionPath,
+          selectedLevel,
+          valuesByDimension,
+        )
       ) {
         for (let c = colStart; c < colStart + header.colSpan; c++) {
           indices.add(c);

From 7f6534d2af0dd9494cddf93fe858dde85ae23a4a Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Mon, 11 May 2026 15:38:56 +0530
Subject: [PATCH 50/53] prettier fix

---
 .../canvas/components/pivot/pivot-click-to-filter.spec.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
index a8630e6c103..94f87c6f0c8 100644
--- a/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
+++ b/web-common/src/features/canvas/components/pivot/pivot-click-to-filter.spec.ts
@@ -861,9 +861,9 @@ describe("header/cell mutual exclusivity", () => {
     result.handleCellClickToFilter("1", "outer", true, parentZoom);
     result.handleCellClickToFilter("2.0", "revenue", false, childUSWest);
 
-    expect(
-      sel(result).isRowHeaderSelected(dk({ outer: "Zoom" }, dims)),
-    ).toBe(true);
+    expect(sel(result).isRowHeaderSelected(dk({ outer: "Zoom" }, dims))).toBe(
+      true,
+    );
     expect(
       sel(result).isCellSelected(
         dk({ outer: "Airtable", inner: "US-West" }, dims),

From 8ea64eb24acafd72d645e8cd971ff8d63d0187a4 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 12 May 2026 19:04:57 +0530
Subject: [PATCH 51/53] fix row visual highlighting regression

---
 .../pivot/pivot-selection-indices.spec.ts     | 108 ++++++++++++++++++
 .../pivot/pivot-selection-indices.ts          |  30 +++--
 2 files changed, 127 insertions(+), 11 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
index 632e2943646..1f85c9733bc 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.spec.ts
@@ -7,6 +7,7 @@ import {
 } from "./pivot-click-selection";
 import {
   computeAncestorRowIds,
+  computeCellSelectedColDimGroupIndices,
   computeSelectedColIndices,
   isHeaderInHoveredRange,
   isHoveredHeader,
@@ -168,6 +169,113 @@ describe("computeSelectedColIndices", () => {
   });
 });
 
+describe("computeCellSelectedColDimGroupIndices", () => {
+  const rowDimensionNames = ["city"];
+
+  function selectionFor(
+    colDimValues: Record<string, string | null>,
+    columnId = "selected_col",
+  ) {
+    const dimKey = "Bronx";
+    return buildClickSelection(
+      new Map(),
+      new Map([
+        [
+          `${dimKey}\t${columnId}`,
+          {
+            dimKey,
+            dimValues: { city: "Bronx", ...colDimValues },
+            columnId,
+          },
+        ],
+      ]),
+      new Set(),
+    );
+  }
+
+  it("requires the full column dimension path for a single-measure cell group", () => {
+    const headerGroups = [
+      {
+        headers: [
+          header(1),
+          header(3, { status: "closed" }),
+          header(1, { status: "open" }),
+        ],
+      },
+      {
+        headers: [
+          header(1),
+          header(1, { status: "closed", facility_type: "null" }),
+          header(1, { status: "closed", facility_type: "DS" }),
+          header(1, { status: "closed", facility_type: "n/a" }),
+          header(1, { status: "open", facility_type: "n/a" }),
+        ],
+      },
+      {
+        headers: [header(1), header(1), header(1), header(1), header(1)],
+      },
+    ] as unknown as HeaderGroup<PivotDataRow>[];
+    const selection = selectionFor({
+      status: "closed",
+      facility_type: "n/a",
+    });
+
+    expect([
+      ...computeCellSelectedColDimGroupIndices(
+        selection,
+        headerGroups,
+        rowDimensionNames,
+      ),
+    ]).toEqual([3]);
+  });
+
+  it("keeps sibling measures highlighted within the same full column dimension path", () => {
+    const headerGroups = [
+      {
+        headers: [
+          header(1),
+          header(6, { status: "closed" }),
+          header(2, { status: "open" }),
+        ],
+      },
+      {
+        headers: [
+          header(1),
+          header(2, { status: "closed", facility_type: "null" }),
+          header(2, { status: "closed", facility_type: "DS" }),
+          header(2, { status: "closed", facility_type: "n/a" }),
+          header(2, { status: "open", facility_type: "n/a" }),
+        ],
+      },
+      {
+        headers: [
+          header(1),
+          header(1),
+          header(1),
+          header(1),
+          header(1),
+          header(1),
+          header(1),
+          header(1),
+          header(1),
+        ],
+      },
+    ] as unknown as HeaderGroup<PivotDataRow>[];
+    const selection = selectionFor(
+      { status: "closed", facility_type: "n/a" },
+      "closed_na_revenue",
+    );
+
+    expect([
+      ...computeCellSelectedColDimGroupIndices(
+        selection,
+        headerGroups,
+        rowDimensionNames,
+      ),
+    ]).toEqual([5, 6]);
+  });
+});
+
 describe("computeAncestorRowIds", () => {
   // Build a minimal fake TanStack Row tree for a 3-dim table.
   // In nested mode, each row stores its own value under rowDimensions[0].
diff --git a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
index 969f6af7a54..a9fa8c6fab4 100644
--- a/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
+++ b/web-common/src/features/dashboards/pivot/pivot-selection-indices.ts
@@ -110,9 +110,9 @@ export function computeCellSelectedColIndices(
 
 /**
  * Compute the set of leaf column indices that share the column-dimension
- * group of any cell selection. A leaf is "in the group" when its most
- * specific column-dimension parent header's `dimensionPath` is fully
- * present in some cell selection's stored dimValues.
+ * group of any cell selection. A leaf is "in the group" when a
+ * column-dimension header at the same path depth matches the selected
+ * column values.
  *
  * Used to extend a clicked cell's blue context highlight to its sibling
  * measure cells in the same col-dim group
@@ -128,7 +128,10 @@ export function computeCellSelectedColDimGroupIndices(
   if (!clickSelection?.cellSelections.size) return new Set();
 
   const rowDimSet = new Set(rowDimensionNames);
-  const selectedColPaths: Record<string, string | null>[] = [];
+  const selectedColPaths: {
+    values: Record<string, string | null>;
+    depth: number;
+  }[] = [];
   for (const entry of clickSelection.cellSelections.values()) {
     const colPath: Record<string, string | null> = {};
     for (const [name, value] of Object.entries(entry.dimValues)) {
@@ -136,7 +139,10 @@ export function computeCellSelectedColDimGroupIndices(
         colPath[name] = value;
       }
     }
-    selectedColPaths.push(colPath);
+    selectedColPaths.push({
+      values: colPath,
+      depth: Object.keys(colPath).length,
+    });
   }
 
   const leafGroup = headerGroups[headerGroups.length - 1];
@@ -145,7 +151,7 @@ export function computeCellSelectedColDimGroupIndices(
 
   // No col-dim values stored on any selection: all measure cells share the
   // same (empty) group; mark every leaf as in-group.
-  if (selectedColPaths.every((p) => Object.keys(p).length === 0)) {
+  if (selectedColPaths.every((p) => p.depth === 0)) {
     const all = new Set<number>();
     for (let i = 0; i < leafCount; i++) all.add(i);
     return all;
@@ -157,11 +163,13 @@ export function computeCellSelectedColDimGroupIndices(
     for (const header of group.headers) {
       const path = header.column.columnDef.meta?.dimensionPath;
       if (path && Object.keys(path).length > 0) {
-        const matches = selectedColPaths.some((selectedPath) =>
-          Object.entries(path).every(
-            ([name, value]) => selectedPath[name] === value,
-          ),
-        );
+        const pathEntries = Object.entries(path);
+        const matches = selectedColPaths.some((selectedPath) => {
+          if (pathEntries.length !== selectedPath.depth) return false;
+          return pathEntries.every(
+            ([name, value]) => selectedPath.values[name] === value,
+          );
+        });
         if (matches) {
           for (let c = colStart; c < colStart + header.colSpan; c++) {
             indices.add(c);

From 9fb48e36c8d8c6f88b78a1bee2c50f4c8c8f3e36 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Tue, 12 May 2026 19:12:31 +0530
Subject: [PATCH 52/53] add hover box on expand caret icon

---
 .../dashboards/pivot/PivotExpandableCell.svelte  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte b/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte
index 25c27c46f84..0f19758894e 100644
--- a/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte
+++ b/web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte
@@ -32,16 +32,16 @@
   {#if value === LOADING_CELL}
     <span class="loading-cell"></span>
   {:else if assembledAndCanExpand}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-      role="button"
+    <button
+      type="button"
       tabindex="-1"
+      aria-label={expanded ? "Collapse row" : "Expand row"}
       class="caret opacity-100 shrink-0 cursor-pointer"
       class:expanded
       onclick={handleExpandClick}
     >
-      <ChevronRight size="16px" color="#9CA3AF" />
-    </div>
+      <ChevronRight size="16px" />
+    </button>
   {:else if needsSpacer}
     <span class="shrink-0"><Spacer size="16px" /></span>
   {/if}
@@ -66,6 +66,12 @@
     @apply flex gap-x-0.5;
   }
 
+  .caret {
+    @apply grid size-4 place-items-center rounded-sm border-0 bg-transparent p-0 text-gray-400 transition-colors;
+    @apply hover:bg-surface-active hover:text-fg-primary;
+    @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-400;
+  }
+
   .caret.expanded {
     @apply opacity-100 transform rotate-90;
   }

From 954075095f5ab6c04af59867ed4fe4b461a0a272 Mon Sep 17 00:00:00 2001
From: Dhiraj Kumar <sumankumaribarnwal@gmail.com>
Date: Wed, 13 May 2026 19:06:01 +0530
Subject: [PATCH 53/53] update pivot test to include null strings

---
 web-local/tests/explores/pivot.spec.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web-local/tests/explores/pivot.spec.ts b/web-local/tests/explores/pivot.spec.ts
index e97ef201bf8..25994ec8034 100644
--- a/web-local/tests/explores/pivot.spec.ts
+++ b/web-local/tests/explores/pivot.spec.ts
@@ -532,13 +532,13 @@ const expectedFlatTable = [
   ["instagram.com", "Facebook", "8.8k", "25.0k"],
   ["news.google.com", "Google", "8.6k", "24.7k"],
   ["sports.yahoo.com", "Yahoo", "8.6k", "24.9k"],
-  ["msn.com", "", "5.1k", "16.0k"],
-  ["facebook.com", "", "5.1k", "15.9k"],
-  ["google.com", "", "5.0k", "15.5k"],
-  ["news.yahoo.com", "", "4.9k", "15.1k"],
-  ["instagram.com", "", "4.3k", "12.1k"],
-  ["sports.yahoo.com", "", "4.3k", "12.1k"],
-  ["news.google.com", "", "4.2k", "12.1k"],
+  ["msn.com", "null", "5.1k", "16.0k"],
+  ["facebook.com", "null", "5.1k", "15.9k"],
+  ["google.com", "null", "5.0k", "15.5k"],
+  ["news.yahoo.com", "null", "4.9k", "15.1k"],
+  ["instagram.com", "null", "4.3k", "12.1k"],
+  ["sports.yahoo.com", "null", "4.3k", "12.1k"],
+  ["news.google.com", "null", "4.2k", "12.1k"],
   [],
 ];