[Lens] Improve color stop UI

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

@@ -0,0 +1,25 @@
+/*
+ * 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 DistributeEquallyIcon = (props: any) => (
+  <svg
+    width="15"
+    height="12"
+    viewBox="0 0 15 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M4 0.5C4 0.223858 4.22386 0 4.5 0C4.77614 0 5 0.223858 5 0.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V0.5Z" />
+    <path d="M0 3C0 2.44772 0.447715 2 1 2H3V10H1C0.447715 10 0 9.55229 0 9V3Z" />
+    <path d="M10.5 0C10.2239 0 10 0.223858 10 0.5V11.5C10 11.7761 10.2239 12 10.5 12C10.7761 12 11 11.7761 11 11.5V0.5C11 0.223858 10.7761 0 10.5 0Z" />
+    <path d="M6 2H9V10H6V2Z" />
+    <path d="M14 2H12V10H14C14.5523 10 15 9.55229 15 9V3C15 2.44772 14.5523 2 14 2Z" />
+  </svg>
+);

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/assets/value_max.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 ValueMaxIcon = (props: any) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M0 0.5C0 0.223858 0.223858 0 0.5 0H1.5C1.77614 0 2 0.223858 2 0.5V14H15.5C15.7761 14 16 14.2239 16 14.5V15.5C16 15.7761 15.7761 16 15.5 16C15.2239 16 15 15.7761 15 15.5V15H9V15.5C9 15.7761 8.77614 16 8.5 16C8.22386 16 8 15.7761 8 15.5V15H2V15.5C2 15.7761 1.77614 16 1.5 16C1.22386 16 1 15.7761 1 15.5V15H0.5C0.223858 15 0 14.7761 0 14.5C0 14.2239 0.223858 14 0.5 14H1V8H0.5C0.223858 8 0 7.77614 0 7.5C0 7.22386 0.223858 7 0.5 7H1V1H0.5C0.223858 1 0 0.776142 0 0.5Z" />
+    <path d="M11 2.5C11 3.32843 10.3284 4 9.5 4C8.67157 4 8 3.32843 8 2.5C8 1.67157 8.67157 1 9.5 1C10.3284 1 11 1.67157 11 2.5Z" />
+    <path d="M11.452 4.06209C11.6748 3.78406 11.8394 3.45741 11.9274 3.10059C12.0816 3.25631 12.2269 3.42364 12.3635 3.59926C13.0701 4.50769 13.5918 5.69387 13.9744 6.84187C14.3592 7.9961 14.6142 9.1453 14.773 10.0027C14.8525 10.4323 14.9083 10.7907 14.9443 11.0426C14.9623 11.1685 14.9753 11.268 14.984 11.3364C14.9883 11.3707 14.9915 11.3972 14.9936 11.4154L14.9961 11.4365L14.9967 11.4423L14.9969 11.4439L14.5001 11.5C14.997 11.4448 14.9969 11.4439 14.9969 11.4439C15.0274 11.7184 14.8297 11.9664 14.5553 11.9969C14.2808 12.0274 14.0336 11.8296 14.0031 11.5552L14.0026 11.5504L14.0005 11.5329C13.9987 11.5171 13.9958 11.493 13.9918 11.4614C13.9838 11.398 13.9715 11.3041 13.9543 11.184C13.92 10.9436 13.8664 10.5989 13.7897 10.1848C13.636 9.35466 13.391 8.25386 13.0257 7.15809C12.6584 6.05609 12.1801 4.99227 11.5742 4.2132C11.5338 4.1613 11.4931 4.11092 11.452 4.06209Z" />
+    <path d="M7.07263 3.10065C7.16063 3.45747 7.32526 3.78412 7.54805 4.06214C7.50699 4.11096 7.46629 4.16132 7.42594 4.2132C6.82 4.99227 6.34169 6.05609 5.97435 7.15809C5.6091 8.25386 5.36413 9.35466 5.2104 10.1848C5.13371 10.5989 5.0801 10.9436 5.04577 11.184C5.02861 11.3041 5.01628 11.398 5.0083 11.4614C5.00431 11.493 5.00141 11.5171 4.99954 11.5329L4.9975 11.5504L4.99695 11.5552C4.96646 11.8296 4.71925 12.0274 4.4448 11.9969C4.17034 11.9664 3.97267 11.7184 4.00316 11.4439C4.00316 11.4439 4.00307 11.4448 4.50001 11.5L4.00316 11.4439L4.00335 11.4423L4.00401 11.4365L4.00646 11.4154C4.00862 11.3972 4.01183 11.3707 4.01614 11.3364C4.02476 11.268 4.03782 11.1685 4.05582 11.0426C4.0918 10.7907 4.14757 10.4323 4.22712 10.0027C4.3859 9.1453 4.64092 7.9961 5.02567 6.84187C5.40834 5.69387 5.93003 4.50769 6.63659 3.59926C6.77316 3.42367 6.91842 3.25635 7.07263 3.10065Z" />
+  </svg>
+);

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

@@ -0,0 +1,32 @@
+/*
+ * 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 ValueMinIcon = (props: any) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M0 0.5C0 0.223858 0.223858 0 0.5 0H1.5C1.77614 0 2 0.223858 2 0.5V14H15.5C15.7761 14 16 14.2239 16 14.5V15.5C16 15.7761 15.7761 16 15.5 16C15.2239 16 15 15.7761 15 15.5V15H9V15.5C9 15.7761 8.77614 16 8.5 16C8.22386 16 8 15.7761 8 15.5V15H2V15.5C2 15.7761 1.77614 16 1.5 16C1.22386 16 1 15.7761 1 15.5V15H0.5C0.223858 15 0 14.7761 0 14.5C0 14.2239 0.223858 14 0.5 14H1V8H0.5C0.223858 8 0 7.77614 0 7.5C0 7.22386 0.223858 7 0.5 7H1V1H0.5C0.223858 1 0 0.776142 0 0.5Z" />
+    <path d="M11 10.5C11 9.67157 10.3284 9 9.5 9C8.67157 9 8 9.67157 8 10.5C8 11.3284 8.67157 12 9.5 12C10.3284 12 11 11.3284 11 10.5Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.452 8.93792C11.6748 9.21595 11.8394 9.5426 11.9274 9.89942C12.0816 9.7437 12.2269 9.57636 12.3635 9.40074C13.0701 8.49231 13.5918 7.30613 13.9744 6.15814C14.3592 5.0039 14.6142 3.8547 14.773 2.99732C14.8525 2.56773 14.9083 2.20931 14.9443 1.95745C14.9623 1.83148 14.9753 1.73205 14.984 1.66357C14.9883 1.62932 14.9915 1.60281 14.9936 1.58457L14.9961 1.56349L14.9967 1.55774L14.9969 1.55608C15.0274 1.28163 14.8297 1.03358 14.5553 1.00308C14.2808 0.972588 14.0336 1.17035 14.0031 1.44481L14.0026 1.4496L14.0005 1.46711C13.9987 1.48293 13.9958 1.50696 13.9918 1.53863C13.9838 1.60198 13.9715 1.69591 13.9543 1.81603C13.92 2.05636 13.8664 2.40107 13.7897 2.81523C13.636 3.64535 13.391 4.74615 13.0257 5.84191C12.6584 6.94392 12.1801 8.00774 11.5742 8.7868C11.5338 8.8387 11.4931 8.88908 11.452 8.93792ZM14.5001 1.50002L14.9969 1.55608C14.9969 1.55608 14.997 1.55524 14.5001 1.50002Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.07263 9.89935C7.16063 9.54253 7.32526 9.21589 7.54805 8.93786C7.50699 8.88905 7.46629 8.83868 7.42594 8.7868C6.82 8.00774 6.34169 6.94392 5.97435 5.84191C5.6091 4.74615 5.36413 3.64535 5.2104 2.81523C5.13371 2.40107 5.0801 2.05636 5.04577 1.81603C5.02861 1.69591 5.01628 1.60198 5.0083 1.53863C5.00431 1.50696 5.00141 1.48293 4.99954 1.46711L4.9975 1.4496L4.99695 1.44481C4.96646 1.17035 4.71925 0.972588 4.4448 1.00308C4.17034 1.03358 3.97267 1.28163 4.00316 1.55608L4.00335 1.55774L4.00401 1.56349L4.00646 1.58457C4.00862 1.60281 4.01183 1.62932 4.01614 1.66357C4.02476 1.73205 4.03782 1.83148 4.05582 1.95745C4.0918 2.20931 4.14757 2.56773 4.22712 2.99732C4.3859 3.8547 4.64092 5.0039 5.02567 6.15814C5.40834 7.30613 5.93003 8.49231 6.63659 9.40074C6.77316 9.57634 6.91842 9.74365 7.07263 9.89935ZM4.50001 1.50002C4.00307 1.55524 4.00316 1.55608 4.00316 1.55608L4.50001 1.50002Z"
+    />
+  </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';

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],
     };