[Lens] Improve color stop UI

x-pack/plugins/lens/public/assets/infinity_icon.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export const InfinityIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_117:80324)">
+      <path
+        d="M2.58579 9.41421C1.80474 8.63316 1.80474 7.36683 2.58579 6.58579C3.36039 5.81118 4.6123 5.80479 5.39479 6.56662L5.99631 7.24583L7.33209 5.73752L6.86994 5.21569C6.85655 5.20057 6.84271 5.18585 6.82843 5.17157C5.26633 3.60948 2.73367 3.60948 1.17157 5.17157C-0.390525 6.73367 -0.390524 9.26633 1.17157 10.8284C2.73367 12.3905 5.26633 12.3905 6.82843 10.8284C6.84271 10.8141 6.85655 10.7994 6.86994 10.7843L5.37064 9.45651C4.58676 10.195 3.35247 10.1809 2.58579 9.41421Z"
+        fill="#343741"
+      />
+      <path
+        d="M5.39436 9.4338L5.37268 9.45828L6.86994 10.7843L10.6273 6.54165L10.6294 6.54349C11.4132 5.805 12.6475 5.8191 13.4142 6.58579C14.1953 7.36684 14.1953 8.63316 13.4142 9.41421C12.6396 10.1888 11.3877 10.1952 10.6052 9.43338L10.0037 8.75414L8.66788 10.2624L9.13006 10.7843C9.14345 10.7994 9.15729 10.8141 9.17157 10.8284C10.7337 12.3905 13.2663 12.3905 14.8284 10.8284C16.3905 9.26633 16.3905 6.73367 14.8284 5.17157C13.2663 3.60948 10.7337 3.60948 9.17157 5.17157C9.15729 5.18585 9.14345 5.20057 9.13006 5.21569L5.39436 9.4338C5.3945 9.43366 5.39422 9.43393 5.39436 9.4338Z"
+        fill="#343741"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_117:80324">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

x-pack/plugins/lens/public/assets/related.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export const RelatedIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6 0.5C6 0.223858 6.22386 0 6.5 0H7.5C7.77614 0 8 0.223858 8 0.5V8H12V6.50001C12 6.306 12.1122 6.1295 12.2879 6.04721C12.4636 5.96492 12.6711 5.99169 12.8201 6.1159L15.8201 8.6159C15.9341 8.71089 16 8.85162 16 9.00001C16 9.1484 15.9341 9.28912 15.8201 9.38412L12.8201 11.8841C12.6711 12.0083 12.4636 12.0351 12.2879 11.9528C12.1122 11.8705 12 11.694 12 11.5V10H6.5C6.22386 10 6 9.77614 6 9.5V0.5Z"
+      fill="#343741"
+    />
+  </svg>
+);

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx

@@ -34,10 +34,7 @@ import {
   VisualizationMap,
 } from '../../types';
 import { getSuggestions, switchToSuggestion } from './suggestion_helpers';
-import {
-  ReactExpressionRendererProps,
-  ReactExpressionRendererType,
-} from '../../../../../../src/plugins/expressions/public';
+import { ReactExpressionRendererType } from '../../../../../../src/plugins/expressions/public';
 import { prependDatasourceExpression } from './expression_helpers';
 import { trackUiEvent, trackSuggestionEvent } from '../../lens_ui_telemetry';
 import { getMissingIndexPattern, validateDatasourceAndVisualization } from './state_helpers';
@@ -392,7 +389,7 @@ export function SuggestionPanel({
             />
           )}
           {!hideSuggestions &&
-            suggestions.map((suggestion, index) => {
+            localSuggestions.map((suggestion, index) => {
               return (
                 <SuggestionPreview
                   preview={{
@@ -411,6 +408,7 @@ export function SuggestionPanel({
                       switchToSuggestion(dispatchLens, suggestion);
                     }
                   }}
+                  isLoading={!isEqual(localParams.context, context) || !isEqual(suggestion, suggestions[index])}
                   selected={index === lastSelectedSuggestion}
                 />
               );

x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx

@@ -201,11 +201,20 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
   );
 
   const bands = ranges.map((start, index, array) => {
+    const { min, max } = minMaxByColumnId[args.valueAccessor!];
+    let rangeMax = Infinity;
+    if (paletteParams?.rangeMax) {
+      rangeMax =
+        paletteParams?.range === 'percent'
+          ? min + ((max - min) * paletteParams?.rangeMax) / 100
+          : paletteParams?.rangeMax;
+    }
+
     return {
       // with the default continuity:above the every range is left-closed
       start,
       // with the default continuity:above the last range is right-open
-      end: index === array.length - 1 ? Infinity : array[index + 1],
+      end: index === array.length - 1 ? rangeMax : array[index + 1],
       // the current colors array contains a duplicated color at the beginning that we need to skip
       color: colors[index + 1],
     };