[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/service.tsx

@@ -23,7 +23,6 @@ import {
 } from '../types';
 import { Document } from '../persistence/saved_object_store';
 import { mergeTables } from './merge_tables';
-import { formatColumn } from './format_column';
 import { EmbeddableFactory, LensEmbeddableStartServices } from './embeddable/embeddable_factory';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { DashboardStart } from '../../../../../src/plugins/dashboard/public';
@@ -86,7 +85,6 @@ export class EditorFrameService {
     getAttributeService: () => Promise<LensAttributeService>
   ): EditorFrameSetup {
     plugins.expressions.registerFunction(() => mergeTables);
-    plugins.expressions.registerFunction(() => formatColumn);
 
     const getStartServices = async (): Promise<LensEmbeddableStartServices> => {
       const [coreStart, deps] = await core.getStartServices();

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/format_column.ts

@@ -0,0 +1,137 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ExpressionFunctionDefinition,
+  Datatable,
+  DatatableColumn,
+} from 'src/plugins/expressions/public';
+
+interface FormatColumn {
+  format: string;
+  columnId: string;
+  decimals?: number;
+  parentFormat?: string;
+}
+
+export const supportedFormats: Record<
+  string,
+  { decimalsToPattern: (decimals?: number) => string }
+> = {
+  number: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0`;
+      }
+      return `0,0.${'0'.repeat(decimals)}`;
+    },
+  },
+  percent: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0%`;
+      }
+      return `0,0.${'0'.repeat(decimals)}%`;
+    },
+  },
+  bytes: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0b`;
+      }
+      return `0,0.${'0'.repeat(decimals)}b`;
+    },
+  },
+};
+
+export const formatColumn: ExpressionFunctionDefinition<
+  'lens_format_column',
+  Datatable,
+  FormatColumn,
+  Datatable
+> = {
+  name: 'lens_format_column',
+  type: 'datatable',
+  help: '',
+  args: {
+    format: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    columnId: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    decimals: {
+      types: ['number'],
+      help: '',
+    },
+    parentFormat: {
+      types: ['string'],
+      help: '',
+    },
+  },
+  inputTypes: ['datatable'],
+  fn(input, { format, columnId, decimals, parentFormat }: FormatColumn) {
+    return {
+      ...input,
+      columns: input.columns.map((col) => {
+        if (col.id === columnId) {
+          if (!parentFormat) {
+            if (supportedFormats[format]) {
+              return withParams(col, {
+                id: format,
+                params: { pattern: supportedFormats[format].decimalsToPattern(decimals) },
+              });
+            } else if (format) {
+              return withParams(col, { id: format });
+            } else {
+              return col;
+            }
+          }
+
+          const parsedParentFormat = JSON.parse(parentFormat);
+          const parentFormatId = parsedParentFormat.id;
+          const parentFormatParams = parsedParentFormat.params ?? {};
+
+          if (!parentFormatId) {
+            return col;
+          }
+
+          if (format && supportedFormats[format]) {
+            return withParams(col, {
+              id: parentFormatId,
+              params: {
+                id: format,
+                params: {
+                  pattern: supportedFormats[format].decimalsToPattern(decimals),
+                },
+                ...parentFormatParams,
+              },
+            });
+          }
+          if (parentFormatParams) {
+            const innerParams = (col.meta.params?.params as Record<string, unknown>) ?? {};
+            return withParams(col, {
+              ...col.meta.params,
+              params: {
+                ...innerParams,
+                ...parentFormatParams,
+              },
+            });
+          }
+        }
+        return col;
+      }),
+    };
+  },
+};
+
+function withParams(col: DatatableColumn, params: Record<string, unknown>) {
+  return { ...col, meta: { ...col.meta, params } };
+}

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

@@ -13,6 +13,7 @@ import {
   DataPublicPluginStart,
 } from '../../../../../src/plugins/data/public';
 import { Datasource, EditorFrameSetup } from '../types';
+import { formatColumn } from './format_column';
 
 export interface IndexPatternDatasourceSetupPlugins {
   expressions: ExpressionsSetup;
@@ -35,6 +36,7 @@ export class IndexPatternDatasource {
     editorFrame.registerDatasource(async () => {
       const { getIndexPatternDatasource, renameColumns } = await import('../async_services');
       expressions.registerFunction(renameColumns);
+      expressions.registerFunction(formatColumn);
       return core.getStartServices().then(([coreStart, { data }]) =>
         getIndexPatternDatasource({
           core: coreStart,

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
+}