[ML] Replace legacy SCSS overwrites

x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.tsx

@@ -8,7 +8,7 @@
 import { isEqual } from 'lodash';
 import React, { useEffect, useMemo, useRef, type FC } from 'react';
 
-import { htmlIdGenerator } from '@elastic/eui';
+import { htmlIdGenerator, useEuiTheme } from '@elastic/eui';
 
 import * as d3Brush from 'd3-brush';
 import * as d3Scale from 'd3-scale';
@@ -18,7 +18,7 @@ import * as d3Transition from 'd3-transition';
 import { getSnappedWindowParameters } from '@kbn/aiops-log-rate-analysis';
 import type { WindowParameters } from '@kbn/aiops-log-rate-analysis';
 
-import './dual_brush.scss';
+import { css } from '@emotion/react';
 
 const { brush, brushSelection, brushX } = d3Brush;
 const { scaleLinear } = d3Scale;
@@ -113,6 +113,7 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
     width,
     nonInteractive,
   } = props;
+  const { euiTheme } = useEuiTheme();
   const d3BrushContainer = useRef(null);
   const brushes = useRef<DualBrush[]>([]);
 
@@ -130,6 +131,20 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
 
   const { baselineMin, baselineMax, deviationMin, deviationMax } = windowParameters;
 
+  const cssOverrides = useMemo(
+    () =>
+      css({
+        '.handle': {
+          fill: euiTheme.colors.vis.euiColorVisGrey2,
+        },
+        '.brush .selection': {
+          stroke: 'none',
+          fill: euiTheme.colors.vis.euiColorVisGrey2,
+        },
+      }),
+    [euiTheme.colors.vis.euiColorVisGrey2]
+  );
+
   useEffect(() => {
     if (d3BrushContainer.current && width > 0) {
       const gBrushes = d3.select(d3BrushContainer.current);
@@ -380,7 +395,7 @@ export const DualBrush: FC<DualBrushProps> = (props) => {
     <>
       {width > 0 && (
         <svg
-          className="aiops-dual-brush"
+          css={cssOverrides}
           data-test-subj="aiopsDualBrush"
           width={width}
           height={BRUSH_HEIGHT}

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_type_icon/field_type_icon.tsx

@@ -11,7 +11,6 @@ import { EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FieldIcon } from '@kbn/react-field';
 import { getFieldTypeName } from '@kbn/field-utils';
-import './_index.scss';
 
 interface FieldTypeIconProps {
   tooltipEnabled: boolean;
@@ -28,7 +27,12 @@ export const FieldTypeIcon: FC<FieldTypeIconProps> = ({ tooltipEnabled = false,
   if (tooltipEnabled === true) {
     return (
       <EuiToolTip
-        anchorClassName="dvFieldTypeIcon__anchor"
+        anchorProps={{
+          css: {
+            display: 'flex',
+            alignItems: 'center',
+          },
+        }}
         content={label}
         data-test-subj="dvFieldTypeTooltip"
         position="left"

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart.tsx

@@ -7,7 +7,6 @@
 
 import type { FC } from 'react';
 import React from 'react';
-import classNames from 'classnames';
 
 import {
   Axis,
@@ -22,10 +21,9 @@ import type { EuiDataGridColumn } from '@elastic/eui';
 
 import { isUnsupportedChartData, type ChartData } from '@kbn/ml-data-grid';
 
-import './column_chart.scss';
-
 import { i18n } from '@kbn/i18n';
 import { useColumnChart } from './use_column_chart';
+import { useColumnChartStyles } from './column_chart_styles';
 
 interface Props {
   chartData: ChartData;
@@ -48,6 +46,7 @@ export const ColumnChart: FC<Props> = ({
   isNumeric,
 }) => {
   const { data, legendText } = useColumnChart(chartData, columnType, maxChartColumns, isNumeric);
+  const styles = useColumnChartStyles();
 
   return (
     <div data-test-subj={dataTestSubj} style={{ width: '100%' }}>
@@ -83,12 +82,7 @@ export const ColumnChart: FC<Props> = ({
           />
         </Chart>
       )}
-      <div
-        className={classNames('dataGridChart__legend', {
-          'dataGridChart__legend--numeric': columnType.schema === 'number',
-        })}
-        data-test-subj={`${dataTestSubj}-legend`}
-      >
+      <div css={styles.legend} data-test-subj={`${dataTestSubj}-legend`}>
         {legendText}
       </div>
       {!hideLabel && <div data-test-subj={`${dataTestSubj}-id`}>{columnType.id}</div>}

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart_styles.ts

@@ -0,0 +1,42 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme, useEuiFontSize, euiTextTruncate } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const useColumnChartStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  const { fontSize: euiFontSizeL } = useEuiFontSize('l');
+
+  return {
+    histogram: css({
+      width: '100%',
+    }),
+    legend: css`
+      ${euiTextTruncate()};
+      color: ${euiTheme.colors.textSubdued};
+      display: block;
+      overflow-x: hidden;
+      font-style: italic;
+      font-weight: ${euiTheme.font.weight.regular};
+      text-align: left;
+      line-height: 1.1;
+      font-size: calc(${euiFontSizeL} / 2);
+    `,
+    legendNumeric: css({
+      textAlign: 'right',
+    }),
+    legendBoolean: css`
+      width: calc(${euiTheme.size.xs} * 2.5);
+    `,
+    dataGridHeader: css({
+      '.euiDataGridHeaderCell__content': {
+        marginTop: 'auto',
+      },
+    }),
+  };
+};

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/number_content_preview.tsx

@@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { MetricDistributionChart, buildChartDataFromStats } from '../metric_distribution_chart';
 import type { FieldVisConfig } from '../../types';
 import { kibanaFieldFormat, formatSingleValue } from '../../../utils';
+import { useColumnChartStyles } from './column_chart_styles';
 
 const METRIC_DISTRIBUTION_CHART_WIDTH = 100;
 const METRIC_DISTRIBUTION_CHART_HEIGHT = 10;
@@ -20,6 +21,7 @@ export interface NumberContentPreviewProps {
 }
 
 export const IndexBasedNumberContentPreview: FC<NumberContentPreviewProps> = ({ config }) => {
+  const styles = useColumnChartStyles();
   const { stats, fieldFormat, fieldName } = config;
   const dataTestSubj = `dataVisualizerDataGridChart-${fieldName}`;
 
@@ -43,7 +45,7 @@ export const IndexBasedNumberContentPreview: FC<NumberContentPreviewProps> = ({
 
   return (
     <div data-test-subj={dataTestSubj} style={{ width: '100%' }}>
-      <div className="dataGridChart__histogram" data-test-subj={`${dataTestSubj}-histogram`}>
+      <div css={styles.histogram} data-test-subj={`${dataTestSubj}-histogram`}>
         <MetricDistributionChart
           width={METRIC_DISTRIBUTION_CHART_WIDTH}
           height={METRIC_DISTRIBUTION_CHART_HEIGHT}
@@ -52,7 +54,7 @@ export const IndexBasedNumberContentPreview: FC<NumberContentPreviewProps> = ({
           hideXAxis={true}
         />
       </div>
-      <div className={'dataGridChart__legend'} data-test-subj={`${dataTestSubj}-legend`}>
+      <div css={styles.legend} data-test-subj={`${dataTestSubj}-legend`}>
         {legendText && (
           <>
             <EuiFlexGroup
@@ -61,15 +63,10 @@ export const IndexBasedNumberContentPreview: FC<NumberContentPreviewProps> = ({
               responsive={false}
               gutterSize="m"
             >
-              <EuiFlexItem
-                className={'dataGridChart__legend'}
-                style={{ maxWidth: METRIC_DISTRIBUTION_CHART_WIDTH * 0.75 }}
-              >
+              <EuiFlexItem style={{ maxWidth: METRIC_DISTRIBUTION_CHART_WIDTH * 0.75 }}>
                 {kibanaFieldFormat(legendText.min, fieldFormat)}
               </EuiFlexItem>
-              <EuiFlexItem className={'dataGridChart__legend'}>
-                {kibanaFieldFormat(legendText.max, fieldFormat)}
-              </EuiFlexItem>
+              <EuiFlexItem>{kibanaFieldFormat(legendText.max, fieldFormat)}</EuiFlexItem>
             </EuiFlexGroup>
           </>
         )}

x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx

@@ -14,6 +14,9 @@ import type { NumericChartData, OrdinalChartData, UnsupportedChartData } from '@
 import { isNumericChartData, isOrdinalChartData, isUnsupportedChartData } from '@kbn/ml-data-grid';
 
 import { getFieldType, getLegendText, getXScaleType, useColumnChart } from './use_column_chart';
+import type { useColumnChartStyles } from './column_chart_styles';
+
+const styles = {} as ReturnType<typeof useColumnChartStyles>;
 
 describe('getFieldType()', () => {
   it('should return the Kibana field type for a given EUI data grid schema', () => {
@@ -95,10 +98,12 @@ describe('isUnsupportedChartData()', () => {
 
 describe('getLegendText()', () => {
   it('should return the chart legend text for unsupported chart types', () => {
-    expect(getLegendText(validUnsupportedChartData, 20)).toBe('Chart not supported.');
+    expect(getLegendText(validUnsupportedChartData, 20, false, styles)).toBe(
+      'Chart not supported.'
+    );
   });
   it('should return the chart legend text for empty datasets', () => {
-    expect(getLegendText(validNumericChartData, 20)).toBe('');
+    expect(getLegendText(validNumericChartData, 20, false, styles)).toBe('');
   });
   it('should return the chart legend text for boolean chart types', () => {
     const { getByText } = render(
@@ -113,7 +118,9 @@ describe('getLegendText()', () => {
             id: 'the-id',
             type: 'boolean',
           },
-          20
+          20,
+          false,
+          styles
         )}
       </>
     );
@@ -122,7 +129,12 @@ describe('getLegendText()', () => {
   });
   it('should return the chart legend text for ordinal chart data with less than max categories', () => {
     expect(
-      getLegendText({ ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] }, 20)
+      getLegendText(
+        { ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] },
+        20,
+        false,
+        styles
+      )
     ).toBe('10 categories');
   });
   it('should return the chart legend text for ordinal chart data with more than max categories', () => {
@@ -133,7 +145,9 @@ describe('getLegendText()', () => {
           cardinality: 30,
           data: [{ key: 'cat', doc_count: 10 }],
         },
-        20
+        20,
+        false,
+        styles
       )
     ).toBe('top 20 of 30 categories');
   });
@@ -145,7 +159,9 @@ describe('getLegendText()', () => {
           data: [{ key: 1, doc_count: 10 }],
           stats: [1, 100],
         },
-        20
+        20,
+        false,
+        styles
       )
     ).toBe('1 - 100');
     expect(
@@ -155,7 +171,9 @@ describe('getLegendText()', () => {
           data: [{ key: 1, doc_count: 10 }],
           stats: [100, 100],
         },
-        20
+        20,
+        false,
+        styles
       )
     ).toBe('100');
     expect(
@@ -165,7 +183,9 @@ describe('getLegendText()', () => {
           data: [{ key: 1, doc_count: 10 }],
           stats: [1.2345, 6.3456],
         },
-        20
+        20,
+        false,
+        styles
       )
     ).toBe('1.23 - 6.35');
   });