tweak: pass toggle function as prop

rilldata · Dec 5, 2024 · b3fcd54 · b3fcd54
1 parent 364d21b
commit b3fcd54
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 22 deletions.
diff --git a/web-common/src/features/dashboards/leaderboard/DimensionCompareMenu.svelte b/web-common/src/features/dashboards/leaderboard/DimensionCompareMenu.svelte
@@ -3,32 +3,19 @@
   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 | undefined,
+  ) => void;
 </script>
 
 <IconButton
   ariaLabel="Toggle breakdown for {dimensionName} dimension"
   on:click={(e) => {
-    if (isBeingCompared) {
-      setComparisonDimension(undefined);
-    } else {
-      setComparisonDimension(dimensionName);
-    }
     e.stopPropagation();
+    toggleComparisonDimension(dimensionName);
   }}
 >
   <Tooltip location="left" distance={8}>

diff --git a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte b/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>

diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte b/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}

diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardHeader.svelte b/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>
 

diff --git a/web-common/src/features/dashboards/state-managers/actions/comparison.ts b/web-common/src/features/dashboards/state-managers/actions/comparison.ts
@@ -1,17 +1,23 @@
 import type { DashboardMutables } from "./types";
 
-export const setComparisonDimension = (
+export const toggleComparisonDimension = (
   { dashboard }: DashboardMutables,
   dimensionName: string | undefined,
 ) => {
   // 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,
 };