[Lens] Improve color stop UI

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx

@@ -156,7 +156,7 @@ describe('HeatmapComponent', function () {
       expect(component.find(Heatmap).prop('colorScale')).toEqual({
         bands: [
           { color: 'rgb(0, 0, 0)', end: 0, start: 0 },
-          { color: 'rgb(112, 38, 231)', end: 150, start: 0 },
+          { color: 'rgb(112, 38, 231)', end: 150.00001, start: 0 },
         ],
         type: 'bands',
       });

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -269,8 +269,10 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     );
 
     // adds a very small number to the max value to make sure the max value will be included
+    const smattering = 0.00001;
     const endValue =
-      paletteParams && paletteParams.range === 'number' ? paletteParams.rangeMax : max + 0.00000001;
+      (paletteParams?.range === 'number' ? paletteParams.rangeMax : max) + smattering;
+
     const overwriteColors = uiState?.get('vis.colors') ?? null;
 
     const bands = ranges.map((start, index, array) => {

src/plugins/charts/common/index.ts

@@ -18,7 +18,6 @@ export type {
 export { defaultCustomColors, palette, systemPalette } from './palette';
 
 export { paletteIds } from './constants';
-
 export type { ColorSchema, RawColorSchema, ColorMap } from './static';
 export {
   ColorSchemas,
@@ -31,6 +30,8 @@ export {
   LabelRotation,
   defaultCountLabel,
   MULTILAYER_TIME_AXIS_STYLE,
+  checkIsMinContinuity,
+  checkIsMaxContinuity,
 } from './static';
 
-export type { ColorSchemaParams, Labels, Style } from './types';
+export type { ColorSchemaParams, Labels, Style, PaletteContinuity } from './types';

src/plugins/charts/common/palette.ts

@@ -6,10 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
+import type { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 import { i18n } from '@kbn/i18n';
 import { last } from 'lodash';
 import { paletteIds } from './constants';
+import { checkIsMaxContinuity, checkIsMinContinuity } from './static';
+
+import type { PaletteContinuity } from './types';
 
 export interface CustomPaletteArguments {
   color?: string[];
@@ -19,7 +22,7 @@ export interface CustomPaletteArguments {
   range?: 'number' | 'percent';
   rangeMin?: number;
   rangeMax?: number;
-  continuity?: 'above' | 'below' | 'all' | 'none';
+  continuity?: PaletteContinuity;
 }
 
 export interface CustomPaletteState {
@@ -29,7 +32,7 @@ export interface CustomPaletteState {
   range: 'number' | 'percent';
   rangeMin: number;
   rangeMax: number;
-  continuity?: 'above' | 'below' | 'all' | 'none';
+  continuity?: PaletteContinuity;
 }
 
 export interface SystemPaletteArguments {
@@ -169,8 +172,12 @@ export function palette(): ExpressionFunctionDefinition<
           range: range ?? 'percent',
           gradient,
           continuity,
-          rangeMin: calculateRange(rangeMin, stops[0], rangeMinDefault),
-          rangeMax: calculateRange(rangeMax, last(stops), rangeMaxDefault),
+          rangeMin: checkIsMinContinuity(continuity)
+            ? Number.NEGATIVE_INFINITY
+            : calculateRange(rangeMin, stops[0], rangeMinDefault),
+          rangeMax: checkIsMaxContinuity(continuity)
+            ? Number.POSITIVE_INFINITY
+            : calculateRange(rangeMax, last(stops), rangeMaxDefault),
         },
       };
     },

src/plugins/charts/common/static/index.ts

@@ -17,5 +17,5 @@ export {
 } from './color_maps';
 
 export { ColorMode, LabelRotation, defaultCountLabel } from './components';
-
+export { checkIsMaxContinuity, checkIsMinContinuity } from './palette';
 export * from './styles';

src/plugins/charts/common/static/palette/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { PaletteContinuity } from '../../types';
+
+export const checkIsMinContinuity = (continuity: PaletteContinuity | undefined) =>
+  Boolean(continuity && ['below', 'all'].includes(continuity));
+
+export const checkIsMaxContinuity = (continuity: PaletteContinuity | undefined) =>
+  Boolean(continuity && ['above', 'all'].includes(continuity));

src/plugins/charts/common/types.ts

@@ -8,6 +8,8 @@
 
 import { ColorSchemas, LabelRotation } from './static';
 
+export type PaletteContinuity = 'above' | 'below' | 'none' | 'all';
+
 export interface ColorSchemaParams {
   colorSchema: ColorSchemas;
   invertColors: boolean;

src/plugins/charts/public/services/palettes/helpers.test.ts

@@ -73,7 +73,7 @@ describe('workoutColorForValue', () => {
           {
             ...DEFAULT_PROPS,
             continuity: 'all',
-            rangeMax: 100,
+            rangeMax: Infinity,
             stops: [20, 40, 60, 80],
           },
           { min: 0, max: 200 }

src/plugins/charts/public/services/palettes/helpers.ts

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { CustomPaletteState } from '../..';
+import { checkIsMinContinuity, checkIsMaxContinuity } from '../../../common';
+import type { CustomPaletteState } from '../..';
 
 function findColorSegment(
   value: number,
@@ -20,7 +21,11 @@ function findColorSegment(
 
   // what about values in range
   const index = colors.findIndex((c, i) => comparison(value, rangeMin + (1 + i) * step) <= 0);
-  return colors[index] || colors[0];
+  // see comment below in function 'findColorsByStops'
+  return (
+    colors[index] ??
+    (value >= rangeMin + colors.length * step ? colors[colors.length - 1] : colors[0])
+  );
 }
 
 function findColorsByStops(
@@ -30,25 +35,62 @@ function findColorsByStops(
   stops: number[]
 ) {
   const index = stops.findIndex((s) => comparison(value, s) < 0);
-  return colors[index] || colors[0];
+  // as we now we can provide 'rangeMax' as end for last interval (iterval [lastStop, rangeMax]),
+  // value can be more that last stop but will be valid
+  // because of this we should provide for that value the last color.
+  // (For example, value = 100, last stop = 80, rangeMax = 120, before we was return the first color,
+  //  but now we will return the last one)
+  return (
+    colors[index] ?? (value >= stops[stops.length - 1] ? colors[colors.length - 1] : colors[0])
+  );
 }
 
 function getNormalizedValueByRange(
   value: number,
-  { range }: CustomPaletteState,
+  { range, rangeMin }: CustomPaletteState,
   minMax: { min: number; max: number }
 ) {
   let result = value;
   if (range === 'percent') {
     result = (100 * (value - minMax.min)) / (minMax.max - minMax.min);
+
+    // for a range of 1 value the formulas above will divide by 0, so here's a safety guard
+    if (Number.isNaN(result)) {
+      return rangeMin;
+    }
   }
-  // for a range of 1 value the formulas above will divide by 0, so here's a safety guard
-  if (Number.isNaN(result)) {
-    return 1;
-  }
+
   return result;
 }
 
+const getNormalizedMaxRange = (
+  {
+    stops,
+    colors,
+    rangeMax,
+  }: Pick<CustomPaletteState, 'stops' | 'continuity' | 'colors' | 'rangeMax'>,
+  isMaxContinuity: boolean,
+  [min, max]: [number, number]
+) => {
+  if (isMaxContinuity) {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  return stops.length ? rangeMax : max - (max - min) / colors.length;
+};
+
+const getNormalizedMinRange = (
+  { stops, rangeMin }: Pick<CustomPaletteState, 'stops' | 'continuity' | 'rangeMin'>,
+  isMinContinuity: boolean,
+  min: number
+) => {
+  if (isMinContinuity) {
+    return Number.NEGATIVE_INFINITY;
+  }
+
+  return stops.length ? rangeMin : min;
+};
+
 /**
  * When stops are empty, it is assumed a predefined palette, so colors are distributed uniformly in the whole data range
  * When stops are passed, then rangeMin/rangeMax are used as reference for user defined limits:
@@ -63,29 +105,30 @@ export function workoutColorForValue(
     return;
   }
   const { colors, stops, range = 'percent', continuity = 'above', rangeMax, rangeMin } = params;
+
+  const isMinContinuity = checkIsMinContinuity(continuity);
+  const isMaxContinuity = checkIsMaxContinuity(continuity);
   // ranges can be absolute numbers or percentages
   // normalized the incoming value to the same format as range to make easier comparisons
   const normalizedValue = getNormalizedValueByRange(value, params, minMax);
-  const dataRangeArguments = range === 'percent' ? [0, 100] : [minMax.min, minMax.max];
-  const comparisonFn = (v: number, threshold: number) => v - threshold;
 
-  // if steps are defined consider the specific rangeMax/Min as data boundaries
-  // as of max reduce its value by 1/colors.length for correct continuity checks
-  const maxRange = stops.length
-    ? rangeMax
-    : dataRangeArguments[1] - (dataRangeArguments[1] - dataRangeArguments[0]) / colors.length;
-  const minRange = stops.length ? rangeMin : dataRangeArguments[0];
+  const [min, max]: [number, number] = range === 'percent' ? [0, 100] : [minMax.min, minMax.max];
 
-  // in case of shorter rangers, extends the steps on the sides to cover the whole set
-  if (comparisonFn(normalizedValue, maxRange) > 0) {
-    if (continuity === 'above' || continuity === 'all') {
-      return colors[colors.length - 1];
+  const minRange = getNormalizedMinRange({ stops, rangeMin }, isMinContinuity, min);
+  const maxRange = getNormalizedMaxRange({ stops, colors, rangeMax }, isMaxContinuity, [min, max]);
+
+  const comparisonFn = (v: number, threshold: number) => v - threshold;
+
+  if (comparisonFn(normalizedValue, minRange) < 0) {
+    if (isMinContinuity) {
+      return colors[0];
     }
     return;
   }
-  if (comparisonFn(normalizedValue, minRange) < 0) {
-    if (continuity === 'below' || continuity === 'all') {
-      return colors[0];
+
+  if (comparisonFn(normalizedValue, maxRange) > 0) {
+    if (isMaxContinuity) {
+      return colors[colors.length - 1];
     }
     return;
   }
@@ -94,11 +137,5 @@ export function workoutColorForValue(
     return findColorsByStops(normalizedValue, comparisonFn, colors, stops);
   }
 
-  return findColorSegment(
-    normalizedValue,
-    comparisonFn,
-    colors,
-    dataRangeArguments[0],
-    dataRangeArguments[1]
-  );
+  return findColorSegment(normalizedValue, comparisonFn, colors, min, max);
 }

test/interpreter_functional/snapshots/baseline/partial_test_1.json

@@ -1 +1 @@
-{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":100,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
+{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}

test/interpreter_functional/snapshots/baseline/tagcloud_all_data.json

@@ -1 +1 @@
-{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"bucket":{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":100,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
+{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"bucket":{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}

test/interpreter_functional/snapshots/baseline/tagcloud_empty_data.json

@@ -1 +1 @@
-{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[],"type":"datatable"},"visParams":{"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":100,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
+{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[],"type":"datatable"},"visParams":{"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}