[ML] Fix special character escaping for Vega scatterplot matrix.

Author: walterra

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts

@@ -59,26 +59,11 @@ export const getColorSpec = (
   return { value: DEFAULT_COLOR };
 };
 
-// Replace dots in field names with an alternative UTF-8 character
-// since VEGA treats dots in field names as nested values and escaping
-// in columns/rows for repeated charts isn't working as expected.
+// 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) {
-  return fieldName.replace(/\./g, '․');
-}
-
-// Replace dots for all keys of all data items with an alternative UTF-8 character
-// since VEGA treats dots in field names as nested values and escaping
-// in columns/rows for repeated charts isn't working as expected.
-function getEscapedVegaValues(values: VegaValue[]): VegaValue[] {
-  return values.map((d) =>
-    Object.keys(d).reduce(
-      (p, c) => ({
-        ...p,
-        [getEscapedVegaFieldName(c)]: d[c],
-      }),
-      {} as VegaValue
-    )
-  );
+  return fieldName.replace(/([\.|\[|\]])/g, '\\$1');
 }
 
 type VegaValue = Record<string, string | number>;
@@ -92,7 +77,7 @@ export const getScatterplotMatrixVegaLiteSpec = (
   legendType?: LegendType,
   dynamicSize?: boolean
 ): TopLevelSpec => {
-  const vegaValues = getEscapedVegaValues(values);
+  const vegaValues = values;
   const vegaColumns = columns.map(getEscapedVegaFieldName);
   const outliers = resultsField !== undefined;
 
@@ -193,7 +178,10 @@ export const getScatterplotMatrixVegaLiteSpec = (
           ...(color !== undefined
             ? [{ type: colorSpec.type, field: getEscapedVegaFieldName(color) }]
             : []),
-          ...vegaColumns.map((d) => ({ type: LEGEND_TYPES.QUANTITATIVE, field: d })),
+          ...vegaColumns.map((d) => ({
+            type: LEGEND_TYPES.QUANTITATIVE,
+            field: d,
+          })),
           ...(outliers
             ? [{ type: LEGEND_TYPES.QUANTITATIVE, field: escapedOutlierScoreField, format: '.3f' }]
             : []),

x-pack/plugins/ml/public/application/components/vega_chart/vega_chart.tsx

@@ -7,13 +7,17 @@
 
 import React, { FC, Suspense } from 'react';
 
+import { EuiErrorBoundary } from '@elastic/eui';
+
 import { VegaChartLoading } from './vega_chart_loading';
 import type { VegaChartViewProps } from './vega_chart_view';
 
 const VegaChartView = React.lazy(() => import('./vega_chart_view'));
 
 export const VegaChart: FC<VegaChartViewProps> = (props) => (
-  <Suspense fallback={<VegaChartLoading />}>
-    <VegaChartView {...props} />
-  </Suspense>
+  <EuiErrorBoundary>
+    <Suspense fallback={<VegaChartLoading />}>
+      <VegaChartView {...props} />
+    </Suspense>
+  </EuiErrorBoundary>
 );