Update exclude mode comparison icon for leaderboard

rilldata · Sep 13, 2023 · 118c6c7 · 118c6c7
1 parent f028954
commit 118c6c7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte b/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
@@ -221,13 +221,15 @@
   $: aboveTheFoldItems = prepareLeaderboardItemData(
     values.slice(0, slice),
     activeValues,
-    comparisonMap
+    comparisonMap,
+    filterExcludeMode
   );
 
   $: belowTheFoldItems = prepareLeaderboardItemData(
     selectedValuesThatAreBelowTheFold,
     activeValues,
-    comparisonMap
+    comparisonMap,
+    filterExcludeMode
   );
 </script>
 
@@ -254,10 +256,9 @@
     {#if values}
       <div class="rounded-b border-gray-200 surface text-gray-800">
         <!-- place the leaderboard entries that are above the fold here -->
-        {#each aboveTheFoldItems as itemData, index (itemData.label)}
+        {#each aboveTheFoldItems as itemData (itemData.label)}
           <LeaderboardListItem
             {itemData}
-            {index}
             {showContext}
             {atLeastOneActive}
             {isBeingCompared}

diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardItemFilterIcon.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardItemFilterIcon.svelte
@@ -8,8 +8,7 @@
   export let selectionIndex: number;
   export let excluded = false;
   export let isBeingCompared = false;
-  export let atLeastOneActive = false;
-  export let index: number;
+  export let defaultComparedIndex: number;
 
   $: selected = selectionIndex >= 0;
 
@@ -20,10 +19,10 @@
 </script>
 
 <div style:width="22px" class="grid place-items-center">
-  {#if selected && isBeingCompared}
+  {#if selected && !excluded && isBeingCompared}
     <CheckCircle className={getColor(selectionIndex)} size="18px" />
-  {:else if isBeingCompared && !atLeastOneActive && index < 3}
-    <Circle className={getColor(index)} size="16px" />
+  {:else if isBeingCompared && defaultComparedIndex >= 0}
+    <Circle className={getColor(defaultComparedIndex)} size="16px" />
   {:else if selected && !excluded}
     <Check size="20px" />
   {:else if selected && excluded}

diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
@@ -37,7 +37,6 @@
 
   export let atLeastOneActive = false;
   export let isBeingCompared = false;
-  export let index = -1;
   export let formattedValue: string;
   export let filterExcludeMode;
 
@@ -137,10 +136,9 @@
   >
     <LeaderboardItemFilterIcon
       {isBeingCompared}
-      {index}
-      {atLeastOneActive}
       {excluded}
-      selectionIndex={itemData.selectedIndex}
+      selectionIndex={itemData?.selectedIndex}
+      defaultComparedIndex={itemData?.defaultComparedIndex}
     />
     <BarAndLabel
       {color}

diff --git a/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts b/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts
@@ -19,23 +19,39 @@ export type LeaderboardItemData = {
   // or excluded; for that we need to know the leaderboard's
   // include/exclude state
   selectedIndex: number;
+  defaultComparedIndex: number;
 };
 
 export function prepareLeaderboardItemData(
   values: { value: number; label: string | number }[],
   selectedValues: (string | number)[],
-  comparisonMap: Map<string | number, number>
+  comparisonMap: Map<string | number, number>,
+  excludeMode: boolean
 ): LeaderboardItemData[] {
+  let count = 0;
+
   return values.map((v) => {
     const selectedIndex = selectedValues.findIndex(
       (value) => value === v.label
     );
     const comparisonValue = comparisonMap.get(v.label);
 
+    // Tag values which will be compared by default
+    let defaultComparedIndex = -1;
+    if (!excludeMode && count < 3 && !selectedValues.length) {
+      defaultComparedIndex = count;
+      count = count + 1;
+    } else if (excludeMode && count < 3) {
+      if (selectedIndex === -1) {
+        defaultComparedIndex = count;
+        count += 1;
+      }
+    }
     return {
       ...v,
       selectedIndex,
       comparisonValue,
+      defaultComparedIndex,
     };
   });
 }