[ML] Fix colours in the Anomaly swim lane and Annotations chart (#110001) (#110034)

* [ML] use current theme

* [ML] use current theme in annotations chart

Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>

x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx

@@ -12,11 +12,11 @@ import { i18n } from '@kbn/i18n';
 import { formatHumanReadableDateTimeSeconds } from '../../../common/util/date_utils';
 import { AnnotationsTable } from '../../../common/types/annotations';
 import { ChartTooltipService } from '../components/chart_tooltip';
+import { useCurrentEuiTheme } from '../components/color_range_legend';
 
 export const X_AXIS_RIGHT_OVERFLOW = 50;
 export const Y_AXIS_LABEL_WIDTH = 170;
 export const Y_AXIS_LABEL_PADDING = 8;
-export const Y_AXIS_LABEL_FONT_COLOR = '#6a717d';
 const ANNOTATION_CONTAINER_HEIGHT = 12;
 const ANNOTATION_MIN_WIDTH = 8;
 
@@ -38,6 +38,8 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
 }) => {
   const canvasRef = React.useRef<HTMLDivElement | null>(null);
 
+  const { euiTheme } = useCurrentEuiTheme();
+
   useEffect(() => {
     if (canvasRef.current !== null && Array.isArray(annotationsData)) {
       const chartElement = d3.select(canvasRef.current);
@@ -67,8 +69,8 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
         )
         .attr('x', Y_AXIS_LABEL_WIDTH + Y_AXIS_LABEL_PADDING)
         .attr('y', ANNOTATION_CONTAINER_HEIGHT)
-        .style('fill', Y_AXIS_LABEL_FONT_COLOR)
-        .style('font-size', '12px');
+        .style('fill', euiTheme.euiTextSubduedColor)
+        .style('font-size', euiTheme.euiFontSizeXS);
 
       // Add border
       svg
@@ -77,7 +79,7 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
         .attr('y', 0)
         .attr('height', ANNOTATION_CONTAINER_HEIGHT)
         .attr('width', endingXPos - startingXPos)
-        .style('stroke', '#cccccc')
+        .style('stroke', euiTheme.euiBorderColor)
         .style('fill', 'none')
         .style('stroke-width', 1);
 

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -47,10 +47,10 @@ import { useUiSettings } from '../contexts/kibana';
 import {
   Y_AXIS_LABEL_WIDTH,
   Y_AXIS_LABEL_PADDING,
-  Y_AXIS_LABEL_FONT_COLOR,
   X_AXIS_RIGHT_OVERFLOW,
 } from './swimlane_annotation_container';
 import { AnnotationsTable } from '../../../common/types/annotations';
+import { useCurrentEuiTheme } from '../components/color_range_legend';
 
 declare global {
   interface Window {
@@ -192,6 +192,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
   const [chartWidth, setChartWidth] = useState<number>(0);
 
   const isDarkTheme = !!useUiSettings().get('theme:darkMode');
+  const { euiTheme } = useCurrentEuiTheme();
 
   // Holds the container height for previously fetched data
   const containerHeightRef = useRef<number>();
@@ -284,6 +285,8 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
 
     return {
       onBrushEnd: (e: HeatmapBrushEvent) => {
+        if (!e.cells.length) return;
+
         onCellsSelection({
           lanes: e.y as string[],
           times: e.x.map((v) => (v as number) / 1000) as [number, number],
@@ -298,7 +301,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
         },
         stroke: {
           width: 1,
-          color: '#D3DAE6',
+          color: euiTheme.euiBorderColor,
         },
       },
       cell: {
@@ -308,31 +311,29 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
           visible: false,
         },
         border: {
-          stroke: '#D3DAE6',
+          stroke: euiTheme.euiBorderColor,
           strokeWidth: 0,
         },
       },
       yAxisLabel: {
         visible: true,
         width: Y_AXIS_LABEL_WIDTH,
-        // eui color subdued
-        fill: Y_AXIS_LABEL_FONT_COLOR,
+        fill: euiTheme.euiTextSubduedColor,
         padding: Y_AXIS_LABEL_PADDING,
         formatter: (laneLabel: string) => {
           return laneLabel === '' ? EMPTY_FIELD_VALUE_LABEL : laneLabel;
         },
-        fontSize: 12,
+        fontSize: parseInt(euiTheme.euiFontSizeXS, 10),
       },
       xAxisLabel: {
         visible: true,
-        // eui color subdued
-        fill: `#98A2B3`,
+        fill: euiTheme.euiTextSubduedColor,
         formatter: (v: number) => {
           timeBuckets.setInterval(`${swimlaneData.interval}s`);
           const scaledDateFormat = timeBuckets.getScaledDateFormat();
           return moment(v).format(scaledDateFormat);
         },
-        fontSize: 12,
+        fontSize: parseInt(euiTheme.euiFontSizeXS, 10),
         // Required to calculate where the swimlane ends
         width: X_AXIS_RIGHT_OVERFLOW * 2,
       },
@@ -354,8 +355,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
     onCellsSelection,
   ]);
 
-  // @ts-ignore
-  const onElementClick: ElementClickListener = useCallback(
+  const onElementClick = useCallback(
     (e: HeatmapElementEvent[]) => {
       const cell = e[0][0];
       const startTime = (cell.datum.x as number) / 1000;
@@ -368,7 +368,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
       onCellsSelection(payload);
     },
     [swimlaneType, swimlaneData?.fieldName, swimlaneData?.interval, onCellsSelection]
-  );
+  ) as ElementClickListener;
 
   const tooltipOptions: TooltipSettings = useMemo(
     () => ({