[8.x] [ML] Data Frame Analytics: Fix field name escaping for Vega based scatterplot matrix. (#193386) (#193832)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Data Frame Analytics: Fix field name escaping for Vega based scatterplot matrix. (#193386)](https://github.com/elastic/kibana/pull/193386)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Walter Rafelsberger <walter.rafelsberger@elastic.co>
2025-04-23 17:28:26 -04:00 · 2024-09-24 20:15:32 +10:00 · 2024-09-24 20:15:32 +10:00 · 5e064513bf
commit 5e064513bf
parent ce7477005f
2 changed files with 71 additions and 3 deletions
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts
@ -16,6 +16,7 @@ import { LEGEND_TYPES } from '../vega_chart/common';

 import {
  getColorSpec,
+  getEscapedVegaFieldName,
  getScatterplotMatrixVegaLiteSpec,
  COLOR_RANGE_NOMINAL,
  COLOR_RANGE_OUTLIER,
@ -75,6 +76,56 @@ describe('getColorSpec()', () => {
  });
 });

+describe('getEscapedVegaFieldName()', () => {
+  it('should escape dots in field names', () => {
+    const fieldName = 'field.name';
+    const escapedFieldName = getEscapedVegaFieldName(fieldName);
+    expect(escapedFieldName).toBe('field\\.name');
+  });
+
+  it('should escape brackets in field names', () => {
+    const fieldName = 'field[name]';
+    const escapedFieldName = getEscapedVegaFieldName(fieldName);
+    expect(escapedFieldName).toBe('field\\[name\\]');
+  });
+
+  it('should escape both dots and brackets in field names', () => {
+    const fieldName = 'field.name[0]';
+    const escapedFieldName = getEscapedVegaFieldName(fieldName);
+    expect(escapedFieldName).toBe('field\\.name\\[0\\]');
+  });
+
+  it('should return the same string if there are no special characters', () => {
+    const fieldName = 'fieldname';
+    const escapedFieldName = getEscapedVegaFieldName(fieldName);
+    expect(escapedFieldName).toBe('fieldname');
+  });
+
+  it('should prepend a string if provided', () => {
+    const fieldName = 'field.name';
+    const prependString = 'prefix_';
+    const escapedFieldName = getEscapedVegaFieldName(fieldName, prependString);
+    expect(escapedFieldName).toBe('prefix_field\\.name');
+  });
+
+  it('should escape newlines in field names', () => {
+    // String quotes process backslashes, so we need to escape them for
+    // the test string to contain a backslash. For example, without the
+    // double backslash, this string would contain a newline character.
+    const fieldName = 'field\\name';
+    const escapedFieldName = getEscapedVegaFieldName(fieldName);
+    expect(escapedFieldName).toBe('field\\\\name');
+  });
+
+  it('should escape backslashes in field names', () => {
+    // String quotes process backslashes, so we need to escape them for
+    // the test string to contain a backslash.
+    const fieldName = 'fieldname\\withbackslash';
+    const escapedFieldName = getEscapedVegaFieldName(fieldName);
+    expect(escapedFieldName).toBe('fieldname\\\\withbackslash');
+  });
+});
+
 describe('getScatterplotMatrixVegaLiteSpec()', () => {
  const forCustomLink = false;

--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
@ -249,11 +249,28 @@ const getVegaSpecLayer = (
  };
 };

-// Escapes the characters .[] in field names with double backslashes
+// Escapes the characters .[]\ in field names with double backslashes
 // since VEGA treats dots/brackets in field names as nested values.
 // See https://vega.github.io/vega-lite/docs/field.html for details.
-function getEscapedVegaFieldName(fieldName: string, prependString: string = '') {
-  return `${prependString}${fieldName.replace(/([\.|\[|\]])/g, '\\$1')}`;
+export function getEscapedVegaFieldName(fieldName: string, prependString: string = '') {
+  // Note the following isn't 100% ideal because there are cases when we may
+  // end up with an additional backslash being rendered for labels of the
+  // scatterplot. However, all other variations I tried caused rendering
+  // problems of the charts and rendering would fail completely.
+
+  // For example, just escaping \n in the first replace without the general
+  // backslash escaping causes the following Vega error:
+  // Duplicate scale or projection name: "child__row_my_numbercolumn_my_number_x"
+
+  // Escaping just the backslash without the additional \n escaping causes
+  // causes an "expression parse error" in Vega and the chart wouldn't render.
+
+  // Escape newline characters
+  fieldName = fieldName.replace(/\n/g, '\\n');
+  // Escape .[]\
+  fieldName = fieldName.replace(/([\.|\[|\]|\\])/g, '\\$1');
+
+  return `${prependString}${fieldName}`;
 }

 type VegaValue = Record<string, string | number>;