[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,13 @@ interface FormatColumn {
   format: string;
   columnId: string;
   decimals?: number;
+  rangeParameters?: string;
 }
 
-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 +67,29 @@ export const formatColumn: ExpressionFunctionDefinition<
       types: ['number'],
       help: '',
     },
+    rangeParameters: {
+      types: ['string'],
+      help: '',
+    },
   },
   inputTypes: ['datatable'],
-  fn(input, { format, columnId, decimals }: FormatColumn) {
+  fn(input, { format, columnId, decimals, rangeParameters }: FormatColumn) {
     return {
       ...input,
       columns: input.columns.map((col) => {
         if (col.id === columnId) {
+          const {
+            template,
+            replaceInfinity,
+            nestedFormat,
+          }: {
+            template?: string;
+            replaceInfinity?: boolean;
+            nestedFormat?: string;
+          } = rangeParameters ? JSON.parse(rangeParameters) : {};
+
+          const extraParams = { template, replaceInfinity };
+
           if (supportedFormats[format]) {
             return {
               ...col,
@@ -81,17 +101,50 @@ export const formatColumn: ExpressionFunctionDefinition<
                 },
               },
             };
-          } else {
+          }
+          if (nestedFormat && supportedFormats[nestedFormat]) {
+            return {
+              ...col,
+              meta: {
+                ...col.meta,
+                params: {
+                  id: format,
+                  params: {
+                    id: nestedFormat,
+                    params: {
+                      pattern: supportedFormats[nestedFormat].decimalsToPattern(decimals),
+                    },
+                    ...extraParams,
+                  },
+                },
+              },
+            };
+          }
+          if (rangeParameters) {
             return {
               ...col,
               meta: {
                 ...col.meta,
                 params: {
                   id: format,
+                  params: {
+                    ...col.meta.params?.params,
+                    ...extraParams,
+                  },
                 },
               },
             };
           }
+          return {
+            ...col,
+            meta: {
+              ...col.meta,
+              params: {
+                id: format,
+                params: { ...extraParams },
+              },
+            },
+          };
         }
         return col;
       }),

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

@@ -435,7 +435,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/loader.test.ts

@@ -117,6 +117,7 @@ const indexPattern2 = ({
   title: 'my-fake-restricted-pattern',
   timeFieldName: 'timestamp',
   hasRestrictions: true,
+  fieldFormatMap: { bytes: { id: 'bytes', params: { pattern: '0.0' } } },
   fields: [
     {
       name: 'timestamp',

x-pack/plugins/lens/public/indexpattern_datasource/loader.ts

@@ -103,7 +103,14 @@ export async function loadIndexPatterns({
         id: indexPattern.id!, // id exists for sure because we got index patterns by id
         title,
         timeFieldName,
-        fieldFormatMap,
+        fieldFormatMap:
+          fieldFormatMap &&
+          Object.fromEntries(
+            Object.entries(fieldFormatMap).map(([id, format]) => [
+              id,
+              'toJSON' in format ? format.toJSON() : format,
+            ])
+          ),
         fields: newFields,
         hasRestrictions: !!typeMeta?.aggs,
       };

x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts

@@ -82,6 +82,7 @@ export const createMockedRestrictedIndexPattern = () => ({
   title: 'my-fake-restricted-pattern',
   timeFieldName: 'timestamp',
   hasRestrictions: true,
+  fieldFormatMap: { bytes: { id: 'bytes', params: { pattern: '0.0' } } },
   fields: [
     {
       name: 'timestamp',

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: 14ch; // Roughly 10 characters plus extra for the padding
+}

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"