diff --git a/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte b/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte index c2a5afc7804..8398f10a142 100644 --- 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 index 58d8e653396..9565e698d5c 100644 --- 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"); @@ -32,7 +45,11 @@ header={{ size: config.indexWidth, start: row.start }} >
- {#if isSelected && !excludeMode} + {#if isSelected && isBeingCompared} + + {:else if isBeingCompared && !selectedIndex.length && row.index < 7} + + {:else if isSelected && !excludeMode} {:else if isSelected && excludeMode} diff --git a/web-common/src/features/dashboards/dimension-table/DimensionTable.svelte b/web-common/src/features/dashboards/dimension-table/DimensionTable.svelte index 9f25e3969be..e63c1b8fdcd 100644 --- 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)} />