feat: deselect cells from legend

Author: markov00

src/chart_types/heatmap/layout/types/viewmodel_types.ts

@@ -42,6 +42,7 @@ export interface Cell {
   stroke: Stroke;
   value: number;
   formatted: string;
+  visible: boolean;
   datum: HeatmapCellDatum;
 }
 

src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -81,6 +81,7 @@ export function shapeViewModel(
   chartDimensions: Dimensions,
   heatmapTable: HeatmapTable,
   colorScale: ColorScaleType,
+  filterRanges: Array<[number, number | null]>,
 ): ShapeViewModel {
   const gridStrokeWidth = config.grid.stroke.width ?? 1;
 
@@ -233,6 +234,7 @@ export function shapeViewModel(
         width: config.cell.border.strokeWidth,
       },
       value: d.value,
+      visible: !isFilteredValue(filterRanges, d.value),
       formatted: spec.valueFormatter(d.value),
     };
     return acc;
@@ -426,3 +428,12 @@ export function shapeViewModel(
 function getCellKey(x: string | number, y: string | number) {
   return [String(x), String(y)].join('&_&');
 }
+
+function isFilteredValue(filterRanges: Array<[number, number | null]>, value: number) {
+  return filterRanges.some(([min, max]) => {
+    if (max !== null && value > min && value < max) {
+      return true;
+    }
+    return max === null && value > min;
+  });
+}

src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts

@@ -76,6 +76,9 @@ export function renderCanvas2d(
           const { x, y } = heatmapViewModel.gridOrigin;
           ctx.translate(x, y);
           filteredCells.forEach((cell) => {
+            if (!cell.visible) {
+              return;
+            }
             renderRect(ctx, cell, cell.fill, cell.stroke);
           });
         }),
@@ -88,6 +91,9 @@ export function renderCanvas2d(
             return;
           }
           filteredCells.forEach((cell) => {
+            if (!cell.visible) {
+              return;
+            }
             renderText(
               ctx,
               {

src/chart_types/heatmap/state/selectors/compute_legend.ts

@@ -37,7 +37,6 @@ export const computeLegendSelector = createCachedSelector(
 
     return colorScale.ticks.map((tick) => {
       const color = colorScale.config(tick);
-
       const seriesIdentifier = {
         key: String(tick),
         specId: String(tick),

src/chart_types/heatmap/state/selectors/geometries.ts

@@ -19,15 +19,19 @@
 
 import createCachedSelector from 're-reselect';
 
+import { GlobalChartState } from '../../../../state/chart_state';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
 import { getColorScale } from './get_color_scale';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
 import { getHeatmapTableSelector } from './get_heatmap_table';
+import { getLegendItemsLabelsSelector } from './get_legend_items_labels';
 import { render } from './scenegraph';
 
+const getDeselectedSeriesSelector = (state: GlobalChartState) => state.interactions.deselectedDataSeries;
+
 /** @internal */
 export const geometries = createCachedSelector(
   [
@@ -36,10 +40,34 @@ export const geometries = createCachedSelector(
     getSettingsSpecSelector,
     getHeatmapTableSelector,
     getColorScale,
+    getLegendItemsLabelsSelector,
+    getDeselectedSeriesSelector,
   ],
-  (heatmapSpec, chartDimensions, settingSpec, heatmapTable, colorScale): ShapeViewModel => {
+  (
+    heatmapSpec,
+    chartDimensions,
+    settingSpec,
+    heatmapTable,
+    colorScale,
+    legendItems,
+    deselectedSeries,
+  ): ShapeViewModel => {
+    const deselectedTicks = new Set(
+      deselectedSeries.map(({ specId }) => {
+        return Number(specId);
+      }),
+    );
+    const { ticks } = colorScale;
+    const ranges = ticks.reduce<Array<[number, number | null]>>((acc, d, i) => {
+      if (deselectedTicks.has(d)) {
+        const rangeEnd = i + 1 === ticks.length ? null : ticks[i + 1];
+        acc.push([d, rangeEnd]);
+      }
+      return acc;
+    }, []);
+
     return heatmapSpec
-      ? render(heatmapSpec, settingSpec, chartDimensions, heatmapTable, colorScale)
+      ? render(heatmapSpec, settingSpec, chartDimensions, heatmapTable, colorScale, ranges)
       : nullShapeViewModel();
   },
 )(getChartIdSelector);

src/chart_types/heatmap/state/selectors/get_color_scale.ts

@@ -84,7 +84,7 @@ export const getColorScale = createCachedSelector(
         .domain(ranges)
         .interpolate(interpolateHcl)
         .range(colorRange);
-      colorScale.ticks = colorScale.config.ticks(6);
+      colorScale.ticks = [0, ...colorScale.config.ticks(6)];
     }
     return colorScale;
   },

src/chart_types/heatmap/state/selectors/scenegraph.ts

@@ -36,6 +36,7 @@ export function render(
   chartDimensions: Dimensions,
   heatmapTable: HeatmapTable,
   colorScale: ColorScaleType,
+  filterRanges: Array<[number, number | null]>,
 ): ShapeViewModel {
   const textMeasurer = document.createElement('canvas');
   const textMeasurerCtx = textMeasurer.getContext('2d');
@@ -54,5 +55,6 @@ export function render(
     chartDimensions,
     heatmapTable,
     colorScale,
+    filterRanges,
   );
 }

src/chart_types/heatmap/state/selectors/tooltip.ts

@@ -45,21 +45,23 @@ export const getTooltipInfoSelector = createCachedSelector(
     };
 
     if (Array.isArray(pickedShapes)) {
-      pickedShapes.forEach((shape) => {
-        const xValueLabel = config.xAxisLabel.formatter(shape.datum.x);
-        tooltipInfo.values.push({
-          label: `${shape.datum.y} - ${xValueLabel}`,
-          color: RGBtoString(shape.fill.color),
-          isHighlighted: false,
-          isVisible: true,
-          seriesIdentifier: {
-            specId: spec.id,
-            key: spec.id,
-          },
-          value: `${shape.value}`,
-          formattedValue: `${shape.value}`,
+      pickedShapes
+        .filter(({ visible }) => visible)
+        .forEach((shape) => {
+          const xValueLabel = config.xAxisLabel.formatter(shape.datum.x);
+          tooltipInfo.values.push({
+            label: `${shape.datum.y} - ${xValueLabel}`,
+            color: RGBtoString(shape.fill.color),
+            isHighlighted: false,
+            isVisible: true,
+            seriesIdentifier: {
+              specId: spec.id,
+              key: spec.id,
+            },
+            value: `${shape.value}`,
+            formattedValue: `${shape.value}`,
+          });
         });
-      });
     } else {
       tooltipInfo.values.push({
         label: ``,