Add icons to dimension table

rilldata · Sep 9, 2023 · ef63719 · ef63719
1 parent 3b1a38a
commit ef63719
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte b/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte
@@ -62,6 +62,8 @@
   const timeControlsStore = useTimeControlStore(getStateManagers());
 
   $: leaderboardMeasureName = $dashboardStore?.leaderboardMeasureName;
+  $: isBeingCompared =
+    $dashboardStore?.selectedComparisonDimension === dimensionName;
   $: leaderboardMeasureQuery = useMetaMeasure(
     instanceId,
     metricViewName,
@@ -359,6 +361,7 @@
           on:select-item={(event) => onSelectItem(event)}
           on:sort={(event) => onSortByColumn(event)}
           dimensionName={dimensionColumn}
+          {isBeingCompared}
           {columns}
           {selectedValues}
           rows={values}

diff --git a/web-common/src/features/dashboards/dimension-table/DimensionFilterGutter.svelte b/web-common/src/features/dashboards/dimension-table/DimensionFilterGutter.svelte
@@ -2,6 +2,10 @@
   import Cancel from "@rilldata/web-common/components/icons/Cancel.svelte";
   import Check from "@rilldata/web-common/components/icons/Check.svelte";
   import Spacer from "@rilldata/web-common/components/icons/Spacer.svelte";
+  import Circle from "@rilldata/web-common/components/icons/Circle.svelte";
+  import CheckCircle from "@rilldata/web-common/components/icons/CheckCircle.svelte";
+  import { CHECKMARK_COLORS } from "@rilldata/web-common/features/dashboards/config";
+
   import StickyHeader from "@rilldata/web-common/components/virtualized-table/core/StickyHeader.svelte";
   import { getContext } from "svelte";
   import type { VirtualizedTableConfig } from "../../../components/virtualized-table/types";
@@ -10,6 +14,15 @@
   export let virtualRowItems;
   export let selectedIndex = [];
   export let excludeMode = false;
+  export let isBeingCompared = false;
+
+  function getColor(i) {
+    const posInSelection = selectedIndex.indexOf(i);
+    if (posInSelection >= 7) return "fill-gray-300";
+
+    const colorIndex = posInSelection >= 0 ? posInSelection : i;
+    return "fill-" + CHECKMARK_COLORS[colorIndex];
+  }
 
   const config: VirtualizedTableConfig = getContext("config");
 </script>
@@ -32,7 +45,11 @@
       header={{ size: config.indexWidth, start: row.start }}
     >
       <div class="py-0.5 grid place-items-center">
-        {#if isSelected && !excludeMode}
+        {#if isSelected && isBeingCompared}
+          <CheckCircle className={getColor(row.index)} size="18px" />
+        {:else if isBeingCompared && !selectedIndex.length && row.index < 7}
+          <Circle className={getColor(row.index)} size="16px" />
+        {:else if isSelected && !excludeMode}
           <Check size="20px" />
         {:else if isSelected && excludeMode}
           <Cancel size="20px" />

diff --git a/web-common/src/features/dashboards/dimension-table/DimensionTable.svelte b/web-common/src/features/dashboards/dimension-table/DimensionTable.svelte
@@ -25,6 +25,7 @@ TableCells – the cell contents.
   export let sortByColumn: string;
   export let dimensionName: string;
   export let excludeMode = false;
+  export let isBeingCompared = false;
 
   /** the overscan values tell us how much to render off-screen. These may be set by the consumer
    * in certain circumstances. The tradeoff: the higher the overscan amount, the more DOM elements we have
@@ -212,6 +213,7 @@ TableCells – the cell contents.
             virtualRowItems={virtualRows}
             totalHeight={virtualHeight}
             {selectedIndex}
+            {isBeingCompared}
             {excludeMode}
             on:select-item={(event) => onSelectItem(event)}
           />