[Lens] Improved range formatter

src/plugins/data/common/search/aggs/utils/get_format_with_aggs.test.ts

@@ -79,6 +79,33 @@ describe('getFormatWithAggs', () => {
     expect(getFormat).toHaveBeenCalledTimes(1);
   });
 
+  test('creates alternative format for range using the template parameter', () => {
+    const mapping = { id: 'range', params: { template: 'arrow_right' } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: 1, lt: 20 })).toBe('1 → 20');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
+  test('handles Infinity values internally when no nestedFormatter is passed', () => {
+    const mapping = { id: 'range', params: { replaceInfinity: true } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: -Infinity, lt: Infinity })).toBe('≥ −∞ and < +∞');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
+  test('lets Infinity values handling to nestedFormatter even when flag is on', () => {
+    const mapping = { id: 'range', params: { replaceInfinity: true, id: 'any' } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: -Infinity, lt: Infinity })).toBe('≥ -Infinity and < Infinity');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
   test('returns custom label for range if provided', () => {
     const mapping = { id: 'range', params: {} };
     const getFieldFormat = getFormatWithAggs(getFormat);

src/plugins/data/common/search/aggs/utils/get_format_with_aggs.ts

@@ -56,15 +56,35 @@ export function getFormatWithAggs(getFieldFormat: GetFieldFormat): GetFieldForma
             id: nestedFormatter.id,
             params: nestedFormatter.params,
           });
+
           const gte = '\u2265';
           const lt = '\u003c';
+          let fromValue = format.convert(range.gte);
+          let toValue = format.convert(range.lt);
+          // In case of identity formatter and a specific flag, replace Infinity values by specific strings
+          if (params.replaceInfinity && nestedFormatter.id == null) {
+            const FROM_PLACEHOLDER = '\u2212\u221E';
+            const TO_PLACEHOLDER = '+\u221E';
+            fromValue = isFinite(range.gte) ? fromValue : FROM_PLACEHOLDER;
+            toValue = isFinite(range.lt) ? toValue : TO_PLACEHOLDER;
+          }
+
+          if (params.template === 'arrow_right') {
+            return i18n.translate('data.aggTypes.buckets.ranges.rangesFormatMessageArrowRight', {
+              defaultMessage: '{from} → {to}',
+              values: {
+                from: fromValue,
+                to: toValue,
+              },
+            });
+          }
           return i18n.translate('data.aggTypes.buckets.ranges.rangesFormatMessage', {
             defaultMessage: '{gte} {from} and {lt} {to}',
             values: {
               gte,
-              from: format.convert(range.gte),
+              from: fromValue,
               lt,
-              to: format.convert(range.lt),
+              to: toValue,
             },
           });
         });

x-pack/plugins/lens/public/editor_frame_service/format_column.ts

@@ -10,9 +10,15 @@ interface FormatColumn {
   format: string;
   columnId: string;
   decimals?: number;
+  nestedFormat?: string;
+  template?: string;
+  replaceInfinity?: boolean;
 }
 
-const supportedFormats: Record<string, { decimalsToPattern: (decimals?: number) => string }> = {
+export const supportedFormats: Record<
+  string,
+  { decimalsToPattern: (decimals?: number) => string }
+> = {
   number: {
     decimalsToPattern: (decimals = 2) => {
       if (decimals === 0) {
@@ -63,13 +69,27 @@ export const formatColumn: ExpressionFunctionDefinition<
       types: ['number'],
       help: '',
     },
+    nestedFormat: {
+      types: ['string'],
+      help: '',
+    },
+    template: {
+      types: ['string'],
+      help: '',
+    },
+    replaceInfinity: {
+      types: ['boolean'],
+      help: '',
+    },
   },
   inputTypes: ['kibana_datatable'],
-  fn(input, { format, columnId, decimals }: FormatColumn) {
+  fn(input, { format, columnId, decimals, nestedFormat, template, replaceInfinity }: FormatColumn) {
     return {
       ...input,
       columns: input.columns.map((col) => {
         if (col.id === columnId) {
+          const extraParams = { template, replaceInfinity };
+
           if (supportedFormats[format]) {
             return {
               ...col,
@@ -78,12 +98,26 @@ export const formatColumn: ExpressionFunctionDefinition<
                 params: { pattern: supportedFormats[format].decimalsToPattern(decimals) },
               },
             };
-          } else {
+          }
+          if (nestedFormat && supportedFormats[nestedFormat]) {
             return {
               ...col,
-              formatHint: { id: format, params: {} },
+              formatHint: {
+                id: format,
+                params: {
+                  id: nestedFormat,
+                  params: {
+                    pattern: supportedFormats[nestedFormat].decimalsToPattern(decimals),
+                  },
+                  ...extraParams,
+                },
+              },
             };
           }
+          return {
+            ...col,
+            formatHint: { id: format, params: { ...extraParams } },
+          };
         }
         return col;
       }),

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx

@@ -431,7 +431,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
             />
           )}
 
-          {selectedColumn && selectedColumn.dataType === 'number' ? (
+          {selectedColumn &&
+          (selectedColumn.dataType === 'number' || selectedColumn.operationType === 'range') ? (
             <FormatSelector
               selectedColumn={selectedColumn}
               onChange={(newFormat) => {

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.scss

@@ -3,4 +3,8 @@
   @include euiFontSizeS;
   min-height: $euiSizeXL;
   width: 100%;
+}
+
+.lnsRangesOperation__popoverNumberField {
+  width: 100px;
 }

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx

@@ -20,8 +20,8 @@ import {
   EuiPopover,
   EuiToolTip,
   htmlIdGenerator,
+  keys,
 } from '@elastic/eui';
-import { keys } from '@elastic/eui';
 import { IFieldFormat } from '../../../../../../../../src/plugins/data/common';
 import { RangeTypeLens, isValidRange, isValidNumber } from './ranges';
 import { FROM_PLACEHOLDER, TO_PLACEHOLDER, TYPING_DEBOUNCE_TIME } from './constants';
@@ -39,8 +39,8 @@ type LocalRangeType = RangeTypeLens & { id: string };
 const getBetterLabel = (range: RangeTypeLens, formatter: IFieldFormat) =>
   range.label ||
   formatter.convert({
-    gte: isValidNumber(range.from) ? range.from : FROM_PLACEHOLDER,
-    lt: isValidNumber(range.to) ? range.to : TO_PLACEHOLDER,
+    gte: isValidNumber(range.from) ? range.from : -Infinity,
+    lt: isValidNumber(range.to) ? range.to : Infinity,
   });
 
 export const RangePopover = ({
@@ -55,7 +55,6 @@ export const RangePopover = ({
   Button: React.FunctionComponent<{ onClick: MouseEventHandler }>;
   isOpenByCreation: boolean;
   setIsOpenByCreation: (open: boolean) => void;
-  formatter: IFieldFormat;
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [tempRange, setTempRange] = useState(range);
@@ -112,6 +111,7 @@ export const RangePopover = ({
         <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
           <EuiFlexItem>
             <EuiFieldNumber
+              className="lnsRangesOperation__popoverNumberField"
               value={isValidNumber(from) ? Number(from) : ''}
               onChange={({ target }) => {
                 const newRange = {
@@ -126,7 +126,6 @@ export const RangePopover = ({
                   <EuiText size="s">{lteAppendLabel}</EuiText>
                 </EuiToolTip>
               }
-              fullWidth
               compressed
               placeholder={FROM_PLACEHOLDER}
               isInvalid={!isValidRange(tempRange)}
@@ -137,6 +136,7 @@ export const RangePopover = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiFieldNumber
+              className="lnsRangesOperation__popoverNumberField"
               value={isValidNumber(to) ? Number(to) : ''}
               onChange={({ target }) => {
                 const newRange = {
@@ -151,7 +151,6 @@ export const RangePopover = ({
                   <EuiText size="s">{ltPrependLabel}</EuiText>
                 </EuiToolTip>
               }
-              fullWidth
               compressed
               placeholder={TO_PLACEHOLDER}
               isInvalid={!isValidRange(tempRange)}
@@ -180,6 +179,7 @@ export const RangePopover = ({
             { defaultMessage: 'Custom label' }
           )}
           onSubmit={onSubmit}
+          compressed
           dataTestSubj="indexPattern-ranges-label"
         />
       </EuiFormRow>
@@ -284,7 +284,6 @@ export const AdvancedRangeEditor = ({
                   }
                   setLocalRanges(newRanges);
                 }}
-                formatter={formatter}
                 Button={({ onClick }: { onClick: MouseEventHandler }) => (
                   <EuiLink
                     color="text"

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 
+import { supportedFormats } from '../../../../editor_frame_service/format_column';
 import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common';
 import { Range } from '../../../../../../../../src/plugins/expressions/common/expression_types/index';
 import { RangeEditor } from './range_editor';
@@ -32,6 +33,11 @@ export interface RangeIndexPatternColumn extends FieldBasedIndexPatternColumn {
     type: MODES_TYPES;
     maxBars: typeof AUTO_BARS | number;
     ranges: RangeTypeLens[];
+    format?: { id: string; params?: { decimals: number } };
+    parentFormat?: {
+      id: string;
+      params?: { template?: string; id?: string; replaceInfinity?: boolean };
+    };
   };
 }
 
@@ -118,6 +124,8 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
         type: MODES.Histogram,
         ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
         maxBars: AUTO_BARS,
+        format: undefined,
+        parentFormat: undefined,
       },
     };
   },
@@ -149,7 +157,25 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
     };
   },
   paramEditor: ({ state, setState, currentColumn, layerId, columnId, uiSettings, data }) => {
-    const rangeFormatter = data.fieldFormats.deserialize({ id: 'range' });
+    const numberFormat = currentColumn.params.format as
+      | undefined
+      | {
+          id: string;
+          params: { decimals: number };
+        };
+    const numberFormatterPattern =
+      numberFormat &&
+      supportedFormats[numberFormat.id] &&
+      supportedFormats[numberFormat.id].decimalsToPattern(numberFormat.params.decimals);
+
+    const rangeFormatter = data.fieldFormats.deserialize({
+      ...currentColumn.params.parentFormat,
+      params: {
+        ...currentColumn.params.parentFormat?.params,
+        ...(numberFormat && { id: numberFormat.id, params: { pattern: numberFormatterPattern } }),
+      },
+    });
+
     const MAX_HISTOGRAM_BARS = uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS);
     const granularityStep = (MAX_HISTOGRAM_BARS - MIN_HISTOGRAM_BARS) / SLICES;
     const maxBarsDefaultValue = (MAX_HISTOGRAM_BARS - MIN_HISTOGRAM_BARS) / 2;
@@ -171,6 +197,10 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
     const onChangeMode = (newMode: MODES_TYPES) => {
       const scale = newMode === MODES.Range ? 'ordinal' : 'interval';
       const dataType = newMode === MODES.Range ? 'string' : 'number';
+      const parentFormat =
+        newMode === MODES.Range
+          ? { id: 'range', params: { template: 'arrow_right', replaceInfinity: true } }
+          : undefined;
       setState(
         changeColumn({
           state,
@@ -184,6 +214,8 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
               type: newMode,
               ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
               maxBars: maxBarsDefaultValue,
+              format: undefined,
+              parentFormat,
             },
           },
           keepParams: false,

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/label_input.tsx

@@ -16,13 +16,15 @@ export const LabelInput = ({
   inputRef,
   onSubmit,
   dataTestSubj,
+  compressed,
 }: {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
   inputRef?: React.MutableRefObject<HTMLInputElement | undefined>;
   onSubmit?: () => void;
   dataTestSubj?: string;
+  compressed?: boolean;
 }) => {
   const [inputValue, setInputValue] = useState(value);
 
@@ -57,6 +59,7 @@ export const LabelInput = ({
       prepend={i18n.translate('xpack.lens.labelInput.label', {
         defaultMessage: 'Label',
       })}
+      compressed={compressed}
     />
   );
 };