[8.x] [ML] Replace Legacy Base Theme Usage (#216307) (#216838)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Replace Legacy Base Theme Usage (#216307)](https://github.com/elastic/kibana/pull/216307)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 17:59:23 -04:00 · 2025-04-02 18:18:30 +02:00 · 2025-04-02 18:18:30 +02:00 · 37f5562b73
commit 37f5562b73
parent 3d43f2886b
6 changed files with 165 additions and 108 deletions
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
@ -21,53 +21,18 @@ import {
  Position,
  ScaleType,
  Settings,
-  LEGACY_LIGHT_THEME,
 } from '@elastic/charts';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';

 import React, { useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { euiLightVars as euiVars } from '@kbn/ui-theme';
 import {
  type FeatureImportanceBaseline,
  isRegressionFeatureImportanceBaseline,
 } from '@kbn/ml-data-frame-analytics-utils';
+import { useMlKibana } from '../../../../../contexts/kibana';
 import type { DecisionPathPlotData } from './use_classification_path_data';
 import { formatSingleValue } from '../../../../../formatters/format_value';
-const { euiColorFullShade, euiColorMediumShade } = euiVars;
-const axisColor = euiColorMediumShade;
-
-const baselineStyle: LineAnnotationStyle = {
-  line: {
-    strokeWidth: 1,
-    stroke: euiColorFullShade,
-    opacity: 0.75,
-  },
-};
-
-const axes: RecursivePartial<AxisStyle> = {
-  axisLine: {
-    stroke: axisColor,
-  },
-  tickLabel: {
-    fontSize: 10,
-    fill: axisColor,
-  },
-  tickLine: {
-    stroke: axisColor,
-  },
-  gridLine: {
-    horizontal: {
-      dash: [1, 2],
-    },
-    vertical: {
-      strokeWidth: 0,
-    },
-  },
-};
-const theme: PartialTheme = {
-  axes,
-};

 interface DecisionPathChartProps {
  decisionPathData: DecisionPathPlotData;
@ -88,6 +53,73 @@ export const DecisionPathChart = ({
  maxDomain,
  baseline,
 }: DecisionPathChartProps) => {
+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
+  const { euiTheme } = useEuiTheme();
+
+  const baseTheme = useChartsBaseTheme();
+
+  const { baselineStyle, theme } = useMemo<{
+    baselineStyle: LineAnnotationStyle;
+    theme: PartialTheme;
+  }>(() => {
+    const euiColorFullShade = euiTheme.colors.fullShade;
+    const euiColorMediumShade = euiTheme.colors.mediumShade;
+    const axisColor = euiColorMediumShade;
+
+    const axes: RecursivePartial<AxisStyle> = {
+      axisLine: {
+        stroke: axisColor,
+      },
+      tickLabel: {
+        fontSize: 10,
+        fill: axisColor,
+      },
+      tickLine: {
+        stroke: axisColor,
+      },
+      gridLine: {
+        horizontal: {
+          dash: [1, 2],
+        },
+        vertical: {
+          strokeWidth: 0,
+        },
+      },
+    };
+
+    return {
+      baselineStyle: {
+        line: {
+          strokeWidth: 1,
+          stroke: euiColorFullShade,
+          opacity: 0.75,
+        },
+      },
+      theme: {
+        axes,
+        lineSeriesStyle: {
+          line: {
+            visible: true,
+            strokeWidth: 1,
+          },
+          point: {
+            visible: 'always',
+          },
+        },
+        chartMargins: {
+          top: 10,
+        },
+      },
+    };
+  }, [euiTheme]);
+
  const regressionBaselineData: LineAnnotationDatum[] | undefined = useMemo(
    () =>
      baseline && isRegressionFeatureImportanceBaseline(baseline)
@ -129,13 +161,7 @@ export const DecisionPathChart = ({
      <Chart
        size={{ height: DECISION_PATH_MARGIN + decisionPathData.length * DECISION_PATH_ROW_HEIGHT }}
      >
-        <Settings
-          theme={theme}
-          // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-          baseTheme={LEGACY_LIGHT_THEME}
-          rotation={90}
-          locale={i18n.getLocale()}
-        />
+        <Settings theme={theme} baseTheme={baseTheme} rotation={90} locale={i18n.getLocale()} />
        {regressionBaselineData && (
          <LineAnnotation
            id="xpack.ml.dataframe.analytics.explorationResults.decisionPathBaseline"
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
@ -8,21 +8,12 @@
 import type { FC } from 'react';
 import React, { useCallback, useMemo } from 'react';

-import { EuiButtonEmpty, EuiSpacer, EuiText, EuiCallOut } from '@elastic/eui';
+import { EuiButtonEmpty, EuiSpacer, EuiText, EuiCallOut, useEuiTheme } from '@elastic/eui';
 import type { RecursivePartial, AxisStyle, PartialTheme, BarSeriesProps } from '@elastic/charts';
-import {
-  Chart,
-  Settings,
-  Axis,
-  ScaleType,
-  Position,
-  BarSeries,
-  LEGACY_LIGHT_THEME,
-} from '@elastic/charts';
+import { Chart, Settings, Axis, ScaleType, Position, BarSeries } from '@elastic/charts';

 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-import { euiLightVars as euiVars } from '@kbn/ui-theme';
 import {
  getAnalysisType,
  isClassificationAnalysis,
@ -40,40 +31,6 @@ import { useMlKibana } from '../../../../../contexts/kibana';

 import { ExpandableSection } from '../expandable_section';

-const { euiColorMediumShade } = euiVars;
-const axisColor = euiColorMediumShade;
-
-const axes: RecursivePartial<AxisStyle> = {
-  axisLine: {
-    stroke: axisColor,
-  },
-  tickLabel: {
-    fontSize: 12,
-    fill: axisColor,
-  },
-  tickLine: {
-    stroke: axisColor,
-  },
-  gridLine: {
-    horizontal: {
-      dash: [1, 2],
-    },
-    vertical: {
-      strokeWidth: 0,
-    },
-  },
-};
-const theme: PartialTheme = {
-  axes,
-  legend: {
-    /**
-     * Added buffer between label and value.
-     * Smaller values render a more compact legend
-     */
-    spacingBuffer: 100,
-  },
-};
-
 export interface FeatureImportanceSummaryPanelProps {
  totalFeatureImportance: TotalFeatureImportance[];
  jobConfig: DataFrameAnalyticsConfig;
@ -98,8 +55,14 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
  totalFeatureImportance,
  jobConfig,
 }) => {
+  const { euiTheme } = useEuiTheme();
  const {
-    services: { docLinks },
+    services: {
+      docLinks,
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
  } = useMlKibana();

  interface Datum {
@ -109,6 +72,46 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
  }
  type PlotData = Datum[];
  type SeriesProps = Omit<BarSeriesProps, 'id' | 'xScaleType' | 'yScaleType' | 'data'>;
+
+  const baseTheme = useChartsBaseTheme();
+
+  const theme: PartialTheme = useMemo(() => {
+    const euiColorMediumShade = euiTheme.colors.mediumShade;
+    const axisColor = euiColorMediumShade;
+
+    const axes: RecursivePartial<AxisStyle> = {
+      axisLine: {
+        stroke: axisColor,
+      },
+      tickLabel: {
+        fontSize: 12,
+        fill: axisColor,
+      },
+      tickLine: {
+        stroke: axisColor,
+      },
+      gridLine: {
+        horizontal: {
+          dash: [1, 2],
+        },
+        vertical: {
+          strokeWidth: 0,
+        },
+      },
+    };
+
+    return {
+      axes,
+      legend: {
+        /**
+         * Added buffer between label and value.
+         * Smaller values render a more compact legend
+         */
+        spacingBuffer: 100,
+      },
+    };
+  }, [euiTheme]);
+
  const [plotData, barSeriesSpec, showLegend, chartHeight] = useMemo<
    [plotData: PlotData, barSeriesSpec: SeriesProps, showLegend?: boolean, chartHeight?: number]
  >(() => {
@ -295,8 +298,7 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
                <Settings
                  rotation={90}
                  theme={theme}
-                  // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-                  baseTheme={LEGACY_LIGHT_THEME}
+                  baseTheme={baseTheme}
                  showLegend={showLegend}
                  locale={i18n.getLocale()}
                />
--- a/x-pack/platform/plugins/shared/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx
@ -40,7 +40,6 @@ import {
  Axis,
  Chart,
  CurveType,
-  LEGACY_LIGHT_THEME,
  LineAnnotation,
  LineSeries,
  Position,
@ -61,7 +60,7 @@ import type {
 import type { JobMessage } from '../../../../../../common/types/audit_message';
 import type { LineAnnotationDatumWithModelSnapshot } from '../../../../../../common/types/results';
 import { useToastNotificationService } from '../../../../services/toast_notification_service';
-import { useCurrentThemeVars, useMlApi } from '../../../../contexts/kibana';
+import { useCurrentThemeVars, useMlApi, useMlKibana } from '../../../../contexts/kibana';
 import { RevertModelSnapshotFlyout } from '../../../../components/model_snapshots/revert_model_snapshot_flyout';
 import { JobMessagesPane } from '../job_details/job_messages_pane';
 import { EditQueryDelay } from './edit_query_delay';
@ -142,6 +141,16 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
  const canCreateJob = useMemo(() => checkPermission('canCreateJob'), []);
  const canStartStopDatafeed = useMemo(() => checkPermission('canStartStopDatafeed'), []);

+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
+  const baseTheme = useChartsBaseTheme();
+
  const {
    getModelSnapshots,
    results: { getDatafeedResultChartData },
@ -441,9 +450,11 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
                                visible: 'never',
                              },
                            },
+                            chartMargins: {
+                              top: 10,
+                            },
                          }}
-                          // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-                          baseTheme={LEGACY_LIGHT_THEME}
+                          baseTheme={baseTheme}
                          locale={i18n.getLocale()}
                        />
                        <Axis
--- a/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomaly_chart.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomaly_chart.tsx
@ -7,8 +7,9 @@

 import type { FC } from 'react';
 import React from 'react';
-import { Chart, Settings, TooltipType, Tooltip, LEGACY_LIGHT_THEME } from '@elastic/charts';
+import { Chart, Settings, TooltipType, Tooltip } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
+import { useMlKibana } from '../../../../../../contexts/kibana';
 import type { ModelItem, Anomaly } from '../../../../common/results_loader';
 import { Anomalies } from '../common/anomalies';
 import { ModelBounds } from './model_bounds';
@ -43,6 +44,16 @@ export const AnomalyChart: FC<Props> = ({
  width,
  loading = false,
 }) => {
+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
+  const baseTheme = useChartsBaseTheme();
+
  const data = chartType === CHART_TYPE.SCATTER ? flattenData(chartData) : chartData;
  const xDomain = getXRange(data);
  return (
@ -50,12 +61,7 @@ export const AnomalyChart: FC<Props> = ({
      <LoadingWrapper height={height} hasData={data.length > 0} loading={loading}>
        <Chart>
          <Tooltip type={TooltipType.None} />
-          <Settings
-            // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-            baseTheme={LEGACY_LIGHT_THEME}
-            xDomain={xDomain}
-            locale={i18n.getLocale()}
-          />
+          <Settings baseTheme={baseTheme} xDomain={xDomain} locale={i18n.getLocale()} />
          <Axes chartData={data} />
          <Anomalies anomalyData={anomalyData} />
          <ModelBounds modelData={modelData} />
--- a/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
@ -15,10 +15,10 @@ import {
  Settings,
  TooltipType,
  Tooltip,
-  LEGACY_LIGHT_THEME,
 } from '@elastic/charts';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import { useMlKibana } from '../../../../../../contexts/kibana';
 import { Axes } from '../common/axes';
 import type { LineChartPoint } from '../../../../common/chart_loader';
 import type { Anomaly } from '../../../../common/results_loader';
@ -55,6 +55,16 @@ export const EventRateChart: FC<Props> = ({
  overlayRanges,
  onBrushEnd,
 }) => {
+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
+  const baseTheme = useChartsBaseTheme();
+
  const { EVENT_RATE_COLOR_WITH_ANOMALIES, EVENT_RATE_COLOR } = useChartColors();
  const barColor = fadeChart ? EVENT_RATE_COLOR_WITH_ANOMALIES : EVENT_RATE_COLOR;

@ -79,8 +89,7 @@ export const EventRateChart: FC<Props> = ({
          <Settings
            onBrushEnd={onBrushEnd}
            theme={theme}
-            // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-            baseTheme={LEGACY_LIGHT_THEME}
+            baseTheme={baseTheme}
            locale={i18n.getLocale()}
          />

--- a/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
@ -15,6 +15,7 @@ import {
  EuiHorizontalRule,
  EuiSpacer,
  useEuiTheme,
+  COLOR_MODES_STANDARD,
 } from '@elastic/eui';
 import type { SplitField } from '@kbn/ml-anomaly-utils';
 import { JOB_TYPE } from '../../../../../../../../../common/constants/new_job';
@ -34,11 +35,13 @@ interface Panel {

 export const SplitCards: FC<PropsWithChildren<Props>> = memo(
  ({ fieldValues, splitField, children, numberOfDetectors, jobType, animate = false }) => {
-    const { euiTheme } = useEuiTheme();
+    const { euiTheme, colorMode } = useEuiTheme();
    const panels: Panel[] = [];

+    const isLightTheme = colorMode === COLOR_MODES_STANDARD.light;
+
    const splitCardStyle = {
-      border: euiTheme.border.thin,
+      ...(isLightTheme ? { border: euiTheme.border.thin } : {}),
      paddingTop: euiTheme.size.xs,
    };