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 }} >