refactor: improved code readibility

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

@@ -82,7 +82,7 @@ export function shapeViewModel(
   chartDimensions: Dimensions,
   heatmapTable: HeatmapTable,
   colorScale: ColorScaleType['scale'],
-  visibilityFilterRanges: Array<[number, number]>,
+  bandsToHide: Array<[number, number]>,
   { height, pageSize }: GridHeightParams,
 ): ShapeViewModel {
   const gridStrokeWidth = config.grid.stroke.width ?? 1;
@@ -208,7 +208,7 @@ export function shapeViewModel(
         width: config.cell.border.strokeWidth,
       },
       value: d.value,
-      visible: !isValueVisible(d.value, visibilityFilterRanges),
+      visible: !isValueHidden(d.value, bandsToHide),
       formatted: spec.valueFormatter(d.value),
     };
     return acc;
@@ -391,6 +391,6 @@ function getCellKey(x: NonNullable<PrimitiveValue>, y: NonNullable<PrimitiveValu
   return [String(x), String(y)].join('&_&');
 }
 
-function isValueVisible(value: number, visibilityFilterRanges: Array<[number, number]>) {
-  return visibilityFilterRanges.some(([min, max]) => min <= value && value < max);
+function isValueHidden(value: number, rangesToHide: Array<[number, number]>) {
+  return rangesToHide.some(([min, max]) => min <= value && value < max);
 }

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

@@ -16,25 +16,25 @@ const EMPTY_LEGEND: LegendItem[] = [];
 /** @internal */
 export const computeLegendSelector = createCustomCachedSelector(
   [getSpecOrNull, getColorScale, getDeselectedSeriesSelector],
-  (spec, { bands, scale }, deselectedDataSeries): LegendItem[] => {
+  (spec, { bands }, deselectedDataSeries): LegendItem[] => {
     if (spec === null) {
       return EMPTY_LEGEND;
     }
 
-    return bands.map(({ start, formattedStart }, i) => {
-      const color = scale(start);
-      const seriesIdentifier = {
-        key: String(start),
-        specId: String(start),
-      };
-
+    return bands.map(({ label, color }) => {
       return {
+        // the band label is considered unique by construction
+        seriesIdentifiers: [
+          {
+            key: label,
+            specId: label,
+          },
+        ],
         color,
-        label: `${i === 0 ? '≥' : '>'} ${formattedStart}`,
-        seriesIdentifiers: [seriesIdentifier],
-        isSeriesHidden: deselectedDataSeries.some((dataSeries) => dataSeries.key === seriesIdentifier.key),
+        label,
+        isSeriesHidden: deselectedDataSeries.some((dataSeries) => dataSeries.key === label),
         isToggleable: true,
-        path: [{ index: 0, value: seriesIdentifier.key }],
+        path: [{ index: 0, value: label }],
         keys: [],
       };
     });

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

@@ -39,29 +39,21 @@ export const geometries = createCustomCachedSelector(
     deselectedSeries,
     gridHeightParams,
   ): ShapeViewModel => {
-    const deselectedRanges = new Set(
+    // instead of using the specId, each legend item is associated with an unique band label
+    const disabledBandLabels = new Set(
       deselectedSeries.map(({ specId }) => {
-        return Number(specId);
+        return specId;
       }),
     );
-    const visibilityFilterRanges = bands.reduce<Array<[number, number]>>((acc, { start }, i) => {
-      if (deselectedRanges.has(start)) {
-        const rangeEnd = bands.length === i + 1 ? Infinity : bands[i + 1].start;
-        acc.push([start, rangeEnd]);
-      }
-      return acc;
-    }, []);
+
+    const bandsToHide: Array<[number, number]> = bands
+      .filter(({ label }) => {
+        return disabledBandLabels.has(label);
+      })
+      .map(({ start, end }) => [start, end]);
 
     return heatmapSpec
-      ? render(
-          heatmapSpec,
-          settingSpec,
-          chartDimensions,
-          heatmapTable,
-          colorScale,
-          visibilityFilterRanges,
-          gridHeightParams,
-        )
+      ? render(heatmapSpec, settingSpec, chartDimensions, heatmapTable, colorScale, bandsToHide, gridHeightParams)
       : nullShapeViewModel();
   },
 );

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

@@ -20,7 +20,7 @@ import {
 
 import { ScaleType } from '../../../../scales/constants';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
-import { identity } from '../../../../utils/common';
+import { Color, identity } from '../../../../utils/common';
 import { HeatmapSpec } from '../../specs/heatmap';
 import { HeatmapTable } from './compute_chart_dimensions';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
@@ -31,6 +31,8 @@ type ScaleModelType<S> = {
   bands: Array<{ start: number }>;
 };
 
+type Band = { start: number; end: number; label: string; color: Color };
+
 type ScaleLinearType = ScaleModelType<ScaleLinear<string, string>>;
 type ScaleQuantizeType = ScaleModelType<ScaleQuantize<string>>;
 type ScaleQuantileType = ScaleModelType<ScaleQuantile<string>>;
@@ -59,21 +61,23 @@ export const getColorScale = createCustomCachedSelector(
     const { scale, bands } = SCALE_TYPE_TO_SCALE_FN[spec.colorScale ?? DEFAULT_COLOR_SCALE_TYPE](spec, heatmapTable);
     return {
       scale,
-      bands: dedupBands(bands, spec),
+      bands: dedupBands(bands, spec, scale),
     };
   },
 );
 
-function dedupBands(bands: Array<{ start: number }>, spec: HeatmapSpec) {
+function dedupBands(
+  bands: Array<{ start: number }>,
+  spec: HeatmapSpec,
+  scale: ScaleLinear<string, string> | ScaleQuantile<string> | ScaleQuantize<string> | ScaleThreshold<number, string>,
+) {
   const formatter = spec.valueFormatter ?? identity;
-  const bandsWithFormattedStarts = bands.reduce<Map<string, { start: number; formattedStart: string }>>(
-    (acc, { start }) => {
-      const formattedStart = `${formatter(start)}`;
-      acc.set(formattedStart, { start, formattedStart });
-      return acc;
-    },
-    new Map(),
-  );
+  const bandsWithFormattedStarts = bands.reduce<Map<string, Band>>((acc, { start }, index, array) => {
+    const label = `≥ ${formatter(start)}`;
+    const end = array.length === index + 1 ? Infinity : array[index + 1].start;
+    acc.set(label, { start, end, label, color: scale(start) });
+    return acc;
+  }, new Map());
   return [...bandsWithFormattedStarts.values()];
 }
 

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

@@ -26,7 +26,7 @@ export function render(
   chartDimensions: Dimensions,
   heatmapTable: HeatmapTable,
   colorScale: ColorScaleType['scale'],
-  visibilityFilterRanges: Array<[number, number]>,
+  bandsToHide: Array<[number, number]>,
   gridHeightParams: GridHeightParams,
 ): ShapeViewModel {
   const textMeasurer = document.createElement('canvas');
@@ -46,7 +46,7 @@ export function render(
     chartDimensions,
     heatmapTable,
     colorScale,
-    visibilityFilterRanges,
+    bandsToHide,
     gridHeightParams,
   );
 }

packages/charts/src/utils/data_samples/test_anomaly_swim_lane.ts

@@ -11,52 +11,52 @@ export const SWIM_LANE_DATA = [
   {
     laneLabel: 'i-71a7f77b',
     time: 1572847200,
-    value: 1.393504,
+    value: 0,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572892200,
-    value: 98.22463906512188,
+    value: 3,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572894000,
-    value: 35.80307,
+    value: 25,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572895800,
-    value: 0.22128246815642463,
+    value: 50,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572897600,
-    value: 0.28036102544259556,
+    value: 75,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572899400,
-    value: 23.045729601789432,
+    value: 1,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572901200,
-    value: 0.5144934818824536,
+    value: 2,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572903000,
-    value: 0.2689519481619711,
+    value: 24,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572904800,
-    value: 0.2141724473865323,
+    value: 49,
   },
   {
     laneLabel: 'i-71a7f77b',
     time: 1572906600,
-    value: 0.10464817254089763,
+    value: 74,
   },
   {
     laneLabel: 'i-71a7f77b',