tweak: pass toggle function as prop

web-common/src/features/dashboards/dimension-table/DimensionFilterGutter.svelte

@@ -18,6 +18,7 @@
   export let excludeMode = false;
   export let isBeingCompared = false;
   export let dimensionName: string;
+  export let toggleComparisonDimension: (dimensionName: string) => void;
 
   function getColor(i: number) {
     const posInSelection = selectedIndex.indexOf(i);
@@ -37,7 +38,11 @@
     style:height="{config.columnHeaderHeight}px"
     class="sticky left-0 top-0 surface z-40 flex items-center"
   >
-    <DimensionCompareMenu {dimensionName} />
+    <DimensionCompareMenu
+      {dimensionName}
+      {isBeingCompared}
+      {toggleComparisonDimension}
+    />
   </div>
   {#each virtualRowItems as row (`row-${row.key}`)}
     {@const isSelected = selectedIndex.includes(row.index)}

web-common/src/features/dashboards/dimension-table/DimensionTable.svelte

@@ -29,7 +29,10 @@ TableCells – the cell contents.
   export let isFetching: boolean;
 
   const {
-    actions: { dimensionTable },
+    actions: {
+      dimensionTable,
+      comparison: { toggleComparisonDimension },
+    },
     selectors: {
       sorting: { sortMeasure },
       dimensionFilters: { isFilterExcludeMode },
@@ -228,6 +231,7 @@ TableCells – the cell contents.
             {isBeingCompared}
             {excludeMode}
             {dimensionName}
+            {toggleComparisonDimension}
             on:select-item={(event) => onSelectItem(event)}
           />
           <DimensionValueHeader

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

@@ -3,32 +3,17 @@
   import Compare from "@rilldata/web-common/components/icons/Compare.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import { getStateManagers } from "../state-managers/state-managers";
 
   export let dimensionName: string | undefined;
-
-  const {
-    selectors: {
-      comparison: { isBeingCompared: isBeingComparedReadable },
-    },
-    actions: {
-      comparison: { setComparisonDimension },
-    },
-  } = getStateManagers();
-
-  $: isBeingCompared =
-    dimensionName !== undefined && $isBeingComparedReadable(dimensionName);
+  export let isBeingCompared: boolean;
+  export let toggleComparisonDimension: (dimensionName: string) => void;
 </script>
 
 <IconButton
   ariaLabel="Toggle breakdown for {dimensionName} dimension"
   on:click={(e) => {
-    if (isBeingCompared) {
-      setComparisonDimension(undefined);
-    } else {
-      setComparisonDimension(dimensionName);
-    }
     e.stopPropagation();
+    if (dimensionName) toggleComparisonDimension(dimensionName);
   }}
 >
   <Tooltip location="left" distance={8}>

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

@@ -87,6 +87,9 @@
     | ((value: string | number) => string);
   export let setPrimaryDimension: (dimensionName: string) => void;
   export let toggleSort: (sortType: DashboardState_LeaderboardSortType) => void;
+  export let toggleComparisonDimension: (
+    dimensionName: string | undefined,
+  ) => void;
 
   const observer = new IntersectionObserver(
     ([entry]) => {
@@ -311,6 +314,7 @@
       isTimeComparisonActive={!!comparisonTimeRange}
       {toggleSort}
       {setPrimaryDimension}
+      {toggleComparisonDimension}
     />
 
     <tbody>

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

@@ -43,6 +43,7 @@
       dimensions: { setPrimaryDimension },
       sorting: { toggleSort },
       dimensionsFilter: { toggleDimensionValueSelection },
+      comparison: { toggleComparisonDimension },
     },
     exploreName,
   } = StateManagers;
@@ -111,6 +112,7 @@
               {setPrimaryDimension}
               {toggleSort}
               {toggleDimensionValueSelection}
+              {toggleComparisonDimension}
             />
           {/if}
         {/each}

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

@@ -23,6 +23,9 @@
   export let sortType: SortType;
   export let toggleSort: (sortType: SortType) => void;
   export let setPrimaryDimension: (dimensionName: string) => void;
+  export let toggleComparisonDimension: (
+    dimensionName: string | undefined,
+  ) => void;
 </script>
 
 <thead>
@@ -31,7 +34,11 @@
       {#if isFetching}
         <DelayedSpinner isLoading={isFetching} size="16px" />
       {:else if hovered || isBeingCompared}
-        <DimensionCompareMenu {dimensionName} />
+        <DimensionCompareMenu
+          {dimensionName}
+          {isBeingCompared}
+          {toggleComparisonDimension}
+        />
       {/if}
     </th>
 

web-common/src/features/dashboards/state-managers/actions/comparison.ts

@@ -1,17 +1,24 @@
 import type { DashboardMutables } from "./types";
 
-export const setComparisonDimension = (
+export const toggleComparisonDimension = (
   { dashboard }: DashboardMutables,
-  dimensionName: string | undefined,
+  dimensionName: string,
 ) => {
   // Temporary until we make these not mutually exclusive
   dashboard.showTimeComparison = false;
-  dashboard.selectedComparisonDimension = dimensionName;
+  const isCurrentDimension =
+    dashboard.selectedComparisonDimension === dimensionName;
+
+  if (!isCurrentDimension) {
+    dashboard.selectedComparisonDimension = dimensionName;
+  } else {
+    dashboard.selectedComparisonDimension = undefined;
+  }
 };
 
 export const comparisonActions = {
   /**
    * Sets the comparison dimension for the dashboard.
    */
-  setComparisonDimension,
+  toggleComparisonDimension,
 };