[Lens][ES|QL] Fix splitValue nullability coercion when constructing ColorSeries (elastic#262217)

Fixes elastic#255333.

## Summary

The reported bug was a combination of two problems in
getColorSeriesAccessorFn():

1. Missing raw values were being lost during the formatted-to-raw
lookup. The code used: `rawValueMap.get(splitValue) ?? splitValue`
although for a missing split value, the map can legitimately contain:
`key: '(null)'`,`value: undefined`. Using `??` throws that `undefined`
away and falls back to the formatted string `'(null)'`.

2. Multi-field keys were then built from those raw/formatted values
directly. But `getColorCategories()` builds category keys using
`getValueKey()`, where missing values become `__missing__`.

This PR preserves mapped missing raw values using `Map.has()` instead of
`??`, and normalizes each split component with `getValueKey()` before
creating the `MultiFieldKey`.

|Before|After|
|:--:|:--:|
|<img width="1260" height="997" alt="image"
src="https://github.com/user-attachments/assets/0bb778fe-eb58-4ddb-ac59-b8b3ded69530"
/>|<img width="1256" height="998" alt="image"
src="https://github.com/user-attachments/assets/2b14412f-458e-4a92-9a13-1bc1d924c158"
/>|

Author: awahab07

src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/color/color_mapping_accessor.test.ts

@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { XYChartSeriesIdentifier } from '@elastic/charts';
+import { getColorCategories } from '@kbn/chart-expressions-common';
+import { DEFAULT_COLOR_MAPPING_CONFIG } from '@kbn/coloring';
+import type { RawValue } from '@kbn/data-plugin/common';
+import { KbnPalette, getKbnPalettes } from '@kbn/palettes';
+import type { DatatableRow } from '@kbn/expressions-plugin/common';
+import type { InvertedRawValueMap } from '../data_layers';
+import { getColorSeriesAccessorFn } from './color_mapping_accessor';
+
+const createSeriesIdentifier = (agentName: string, ownerLabel: string): XYChartSeriesIdentifier =>
+  ({
+    key: `${agentName}-${ownerLabel}`,
+    specId: 'spec',
+    yAccessor: 'metric',
+    splitAccessors: new Map([
+      ['agent.name', agentName],
+      ['aspnetcore.memory_pool.owner', ownerLabel],
+    ]),
+    seriesKeys: [agentName, ownerLabel],
+  } as unknown as XYChartSeriesIdentifier);
+
+describe('getColorSeriesAccessorFn', () => {
+  it('uses palette colors for multi-split missing values mapped from formatted null labels', () => {
+    const palettes = getKbnPalettes({ name: 'amsterdam', darkMode: false });
+    const defaultPaletteColors = palettes
+      .get(KbnPalette.Default)
+      .colors()
+      .map((color) => color.toLowerCase());
+    const neutralPaletteColors = palettes
+      .get(KbnPalette.Neutral)
+      .colors()
+      .map((color) => color.toLowerCase());
+    const neutralFallbackColor = neutralPaletteColors[1];
+
+    const rows: DatatableRow[] = [
+      {
+        'agent.name': 'mysql-integrations',
+        'beat.stats.libbeat.pipeline.queue.filled.events': 8,
+      },
+      {
+        'agent.name': 'apache-integrations',
+        'beat.stats.libbeat.pipeline.queue.filled.events': 6,
+      },
+    ];
+
+    const invertedRawValueMap: InvertedRawValueMap = new Map<string, Map<string, RawValue>>([
+      [
+        'agent.name',
+        new Map<string, RawValue>([
+          ['mysql-integrations', 'mysql-integrations'],
+          ['apache-integrations', 'apache-integrations'],
+        ]),
+      ],
+      ['aspnetcore.memory_pool.owner', new Map<string, RawValue>([['(null)', undefined]])],
+    ]);
+
+    const getColor = getColorSeriesAccessorFn(
+      DEFAULT_COLOR_MAPPING_CONFIG,
+      invertedRawValueMap,
+      palettes,
+      false,
+      {
+        type: 'categories',
+        categories: getColorCategories(rows, ['agent.name', 'aspnetcore.memory_pool.owner']),
+      },
+      ['agent.name', 'aspnetcore.memory_pool.owner']
+    );
+
+    const mysqlColor = getColor(createSeriesIdentifier('mysql-integrations', '(null)'));
+    const apacheColor = getColor(createSeriesIdentifier('apache-integrations', '(null)'));
+
+    expect(mysqlColor?.toLowerCase()).toBe(defaultPaletteColors[0]);
+    expect(apacheColor?.toLowerCase()).toBe(defaultPaletteColors[1]);
+    expect(mysqlColor?.toLowerCase()).not.toBe(neutralFallbackColor);
+    expect(apacheColor?.toLowerCase()).not.toBe(neutralFallbackColor);
+  });
+});

src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/color/color_mapping_accessor.ts

@@ -8,14 +8,32 @@
  */
 
 import type { SeriesColorAccessorFn } from '@elastic/charts';
-import { getColorFactory, type ColorMapping, type ColorMappingInputData } from '@kbn/coloring';
+import {
+  getColorFactory,
+  getValueKey,
+  type ColorMapping,
+  type ColorMappingInputData,
+} from '@kbn/coloring';
 import type { KbnPalettes } from '@kbn/palettes';
-import { MultiFieldKey } from '@kbn/data-plugin/common';
+import { MultiFieldKey, type RawValue } from '@kbn/data-plugin/common';
 import type { InvertedRawValueMap } from '../data_layers';
 
 /**
  * Return a color accessor function for XY charts depending on the split accessors received.
  */
+function getRawSplitValue(
+  fieldId: string,
+  splitValue: string | number | null | undefined,
+  invertedRawValueMap: InvertedRawValueMap
+): RawValue {
+  if (typeof splitValue !== 'string') {
+    return splitValue;
+  }
+
+  const rawValueMap = invertedRawValueMap.get(fieldId) ?? new Map<string, RawValue>();
+  return rawValueMap.has(splitValue) ? rawValueMap.get(splitValue) : splitValue;
+}
+
 export function getColorSeriesAccessorFn(
   config: ColorMapping.Config,
   invertedRawValueMap: InvertedRawValueMap,
@@ -30,24 +48,25 @@ export function getColorSeriesAccessorFn(
     if (configuredSplitAccessors.length > 1) {
       // if we have more then 1 split accessor we are in an ESQL multi-term context
       // we need to reconstruct back the MultiFieldKey from the original set of raw values to get the right color
-      const rawValues = configuredSplitAccessors.map((fieldId) => {
-        const splitValue = splitAccessors.get(fieldId);
-        if (splitValue === undefined) return null;
-        const rawValueMap = invertedRawValueMap.get(fieldId) ?? new Map<string, unknown>();
-        return typeof splitValue === 'string'
-          ? rawValueMap.get(splitValue) ?? splitValue
-          : splitValue;
-      });
-      return getColor(new MultiFieldKey({ key: rawValues }));
+      const rawValues = configuredSplitAccessors
+        .map((fieldId) => {
+          const splitValue = splitAccessors.get(fieldId);
+          if (splitValue === undefined) return null;
+          return getRawSplitValue(fieldId, splitValue, invertedRawValueMap);
+        })
+        .map((raw) => getValueKey(raw));
+      return getColor(
+        new MultiFieldKey({
+          key: rawValues,
+        })
+      );
     }
 
     const fieldId = configuredSplitAccessors[0];
     const splitValue = splitAccessors.get(fieldId);
     // No category associated in the split accessor, use the default color
     if (splitValue === undefined) return null;
-    const rawValueMap = invertedRawValueMap.get(fieldId) ?? new Map<string, unknown>();
-    const rawValue =
-      typeof splitValue === 'string' ? rawValueMap.get(splitValue) ?? splitValue : splitValue;
+    const rawValue = getRawSplitValue(fieldId, splitValue, invertedRawValueMap);
 
     return getColor(rawValue);
   };