[Lens] Move empty string handling into field formatter

src/plugins/data/common/field_formats/converters/string.ts

@@ -13,6 +13,10 @@ import { FieldFormat } from '../field_format';
 import { TextContextTypeConvert, FIELD_FORMAT_IDS } from '../types';
 import { shortenDottedString } from '../../utils';
 
+export const emptyLabel = i18n.translate('data.fieldFormats.string.emptyLabel', {
+ defaultMessage: '(empty)',
+});
+
 const TRANSFORM_OPTIONS = [
  {
  kind: false,
@@ -103,6 +107,9 @@ export class StringFormat extends FieldFormat {
  }
 
  textConvert: TextContextTypeConvert = (val) => {
+ if (val === '') {
+ return emptyLabel;
+ }
  switch (this.param('transform')) {
  case 'lower':
  return String(val).toLowerCase();

src/plugins/vis_type_pie/public/utils/get_layers.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { i18n } from '@kbn/i18n';
 import {
  Datum,
  PartitionFillLabel,
@@ -125,11 +124,6 @@ export const getLayers = (
  },
  showAccessor: (d: Datum) => d !== EMPTY_SLICE,
  nodeLabel: (d: unknown) => {
- if (d === '') {
- return i18n.translate('visTypePie.emptyLabelValue', {
- defaultMessage: '(empty)',
- });
- }
  if (col.format) {
  const formattedLabel = formatter.deserialize(col.format).convert(d) ?? '';
  if (visParams.labels.truncate && formattedLabel.length <= visParams.labels.truncate) {

src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx

@@ -19,7 +19,6 @@ import {
 import { Aspects } from '../types';
 
 import './_detailed_tooltip.scss';
-import { fillEmptyValue } from '../utils/get_series_name_fn';
 import { COMPLEX_SPLIT_ACCESSOR, isRangeAggType } from '../utils/accessors';
 
 interface TooltipData {
@@ -100,8 +99,7 @@ export const getTooltipData = (
  return data;
 };
 
-const renderData = ({ label, value: rawValue }: TooltipData, index: number) => {
- const value = fillEmptyValue(rawValue);
+const renderData = ({ label, value }: TooltipData, index: number) => {
  return label && value ? (
  <tr key={label + value + index}>
  <td className="detailedTooltip__label">

src/plugins/vis_type_xy/public/components/xy_settings.tsx

@@ -29,7 +29,6 @@ import { renderEndzoneTooltip } from '../../../charts/public';
 
 import { getThemeService, getUISettings } from '../services';
 import { VisConfig } from '../types';
-import { fillEmptyValue } from '../utils/get_series_name_fn';
 
 declare global {
  interface Window {
@@ -134,7 +133,7 @@ export const XYSettings: FC<XYSettingsProps> = ({
  };
 
  const headerValueFormatter: TickFormatter<any> | undefined = xAxis.ticks?.formatter
- ? (value) => fillEmptyValue(xAxis.ticks?.formatter?.(value)) ?? ''
+ ? (value) => xAxis.ticks?.formatter?.(value) ?? ''
  : undefined;
  const headerFormatter =
  isTimeChart && xDomain && adjustedXDomain

src/plugins/vis_type_xy/public/config/get_axis.ts

@@ -27,7 +27,6 @@ import {
  YScaleType,
  SeriesParam,
 } from '../types';
-import { fillEmptyValue } from '../utils/get_series_name_fn';
 
 export function getAxis<S extends XScaleType | YScaleType>(
  { type, title: axisTitle, labels, scale: axisScale, ...axis }: CategoryAxis,
@@ -90,8 +89,7 @@ function getLabelFormatter(
  }
 
  return (value: any) => {
- const formattedStringValue = `${formatter ? formatter(value) : value}`;
- const finalValue = fillEmptyValue(formattedStringValue);
+ const finalValue = `${formatter ? formatter(value) : value}`;
 
  if (finalValue.length > truncate) {
  return `${finalValue.slice(0, truncate)}...`;

src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts

@@ -8,21 +8,10 @@
 
 import { memoize } from 'lodash';
 
-import { i18n } from '@kbn/i18n';
 import { XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
 
 import { VisConfig } from '../types';
 
-const emptyTextLabel = i18n.translate('visTypeXy.emptyTextColumnValue', {
- defaultMessage: '(empty)',
-});
-
-/**
- * Returns empty values
- */
-export const fillEmptyValue = <T extends string | number | undefined>(value: T) =>
- value === '' ? emptyTextLabel : value;
-
 function getSplitValues(
  splitAccessors: XYChartSeriesIdentifier['splitAccessors'],
  seriesAspects?: VisConfig['aspects']['series']
@@ -36,7 +25,7 @@ function getSplitValues(
  const split = (seriesAspects ?? []).find(({ accessor }) => accessor === key);
  splitValues.push(split?.formatter ? split?.formatter(value) : value);
  });
- return splitValues.map(fillEmptyValue);
+ return splitValues;
 }
 
 export const getSeriesNameFn = (aspects: VisConfig['aspects'], multipleY = false) =>

x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts

@@ -15,8 +15,6 @@ import type {
  LensToggleAction,
 } from './types';
 import { ColumnConfig } from './table_basic';
-
-import { desanitizeFilterContext } from '../../utils';
 import { getOriginalId } from '../transpose_helpers';
 
 export const createGridResizeHandler = (
@@ -92,7 +90,7 @@ export const createGridFilterHandler = (
  timeFieldName,
  };
 
- onClickValue(desanitizeFilterContext(data));
+ onClickValue(data);
 };
 
 export const createTransposeColumnFilterHandler = (
@@ -125,7 +123,7 @@ export const createTransposeColumnFilterHandler = (
  timeFieldName,
  };
 
- onClickValue(desanitizeFilterContext(data));
+ onClickValue(data);
 };
 
 export const createGridSortingConfig = (

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

@@ -21,7 +21,6 @@ import { VisualizationContainer } from '../visualization_container';
 import { HeatmapRenderProps } from './types';
 import './index.scss';
 import { LensBrushEvent, LensFilterEvent } from '../types';
-import { desanitizeFilterContext } from '../utils';
 import { EmptyPlaceholder } from '../shared_components';
 import { LensIconChartHeatmap } from '../assets/chart_heatmap';
 
@@ -117,7 +116,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
  })),
  timeFieldName,
  };
- onClickValue(desanitizeFilterContext(context));
+ onClickValue(context);
  }) as ElementClickListener;
 
  const onBrushEnd = (e: HeatmapBrushEvent) => {
@@ -164,7 +163,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
  })),
  timeFieldName,
  };
- onClickValue(desanitizeFilterContext(context));
+ onClickValue(context);
  }
  };
 

x-pack/plugins/lens/public/indexpattern_datasource/rename_columns.test.ts

@@ -83,29 +83,6 @@ describe('rename_columns', () => {
  `);
  });
 
- it('should replace "" with a visible value', () => {
- const input: Datatable = {
- type: 'datatable',
- columns: [{ id: 'a', name: 'A', meta: { type: 'string' } }],
- rows: [{ a: '' }],
- };
-
- const idMap = {
- a: {
- id: 'a',
- label: 'Austrailia',
- },
- };
-
- const result = renameColumns.fn(
- input,
- { idMap: JSON.stringify(idMap) },
- createMockExecutionContext()
- );
-
- expect(result.rows[0].a).toEqual('(empty)');
- });
-
  it('should keep columns which are not mapped', () => {
  const input: Datatable = {
  type: 'datatable',

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

@@ -49,9 +49,9 @@ export const renameColumns: ExpressionFunctionDefinition<
 
  Object.entries(row).forEach(([id, value]) => {
  if (id in idMap) {
- mappedRow[idMap[id].id] = sanitizeValue(value);
+ mappedRow[idMap[id].id] = value;
  } else {
- mappedRow[id] = sanitizeValue(value);
+ mappedRow[id] = value;
  }
  });
 
@@ -86,13 +86,3 @@ function getColumnName(originalColumn: OriginalColumn, newColumn: DatatableColum
 
  return originalColumn.label;
 }
-
-function sanitizeValue(value: unknown) {
- if (value === '') {
- return i18n.translate('xpack.lens.indexpattern.emptyTextColumnValue', {
- defaultMessage: '(empty)',
- });
- }
-
- return value;
-}

x-pack/plugins/lens/public/pie_visualization/render_function.tsx

@@ -31,7 +31,6 @@ import { PieExpressionProps } from './types';
 import { getSliceValue, getFilterContext } from './render_helpers';
 import { EmptyPlaceholder } from '../shared_components';
 import './visualization.scss';
-import { desanitizeFilterContext } from '../utils';
 import {
  ChartsPluginSetup,
  PaletteRegistry,
@@ -254,7 +253,7 @@ export function PieComponent(
  const onElementClickHandler: ElementClickListener = (args) => {
  const context = getFilterContext(args[0][0] as LayerValue[], groups, firstTable);
 
- onClickValue(desanitizeFilterContext(context));
+ onClickValue(context);
  };
 
  return (

x-pack/plugins/lens/public/shared_components/legend_action_popover.tsx

@@ -9,7 +9,6 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
 import type { LensFilterEvent } from '../types';
-import { desanitizeFilterContext } from '../utils';
 
 export interface LegendActionPopoverProps {
  /**
@@ -45,7 +44,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
  icon: <EuiIcon type="plusInCircle" size="m" />,
  onClick: () => {
  setPopoverOpen(false);
- onFilter(desanitizeFilterContext(context));
+ onFilter(context);
  },
  },
  {
@@ -56,7 +55,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
  icon: <EuiIcon type="minusInCircle" size="m" />,
  onClick: () => {
  setPopoverOpen(false);
- onFilter(desanitizeFilterContext({ ...context, negate: true }));
+ onFilter({ ...context, negate: true });
  },
  },
  ],