From 8cf9416714745e0ebd07e8bd1563d9f634c97161 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Fri, 31 Jan 2025 10:58:08 +0100
Subject: [PATCH 01/12] Replace scss for heatmap expression

---
 .../expression_heatmap/public/components/index.scss  | 10 ----------
 .../public/expression_renderers/heatmap_renderer.tsx | 12 +++++++++++-
 2 files changed, 11 insertions(+), 11 deletions(-)
 delete mode 100644 src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss

diff --git a/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss b/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss
deleted file mode 100644
index 66f45c113cc64..0000000000000
--- a/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.heatmap-container {
-  height: 100%;
-  width: 100%;
-  // the FocusTrap is adding extra divs which are making the visualization redraw twice
-  // with a visible glitch. This make the chart library resilient to this extra reflow
-  overflow: auto hidden;
-  user-select: text;
-  padding: $euiSizeS;
-  @include euiScrollBar;
-}
diff --git a/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
index 6bfd78739167e..4ab93476b1853 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
@@ -21,6 +21,8 @@ import {
   extractContainerType,
   extractVisualizationType,
 } from '@kbn/chart-expressions-common';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { MultiFilterEvent } from '../../common/types';
 import { ExpressionHeatmapPluginStart } from '../plugin';
 import {
@@ -40,6 +42,14 @@ interface ExpressioHeatmapRendererDependencies {
   getStartDeps: StartServicesGetter<ExpressionHeatmapPluginStart>;
 }
 
+const heatmapContainerCss = css({
+  height: '100%',
+  width: '100%',
+  overflow: 'auto hidden',
+  userSelect: 'text',
+  padding: euiThemeVars.euiSizeS,
+});
+
 export const heatmapRenderer: (
   deps: ExpressioHeatmapRendererDependencies
 ) => ExpressionRenderDefinition<HeatmapExpressionProps> = ({ getStartDeps }) => ({
@@ -101,7 +111,7 @@ export const heatmapRenderer: (
 
     render(
       <KibanaRenderContextProvider {...core}>
-        <div className="heatmap-container" data-test-subj="heatmapChart">
+        <div className="euiScrollBar" css={heatmapContainerCss} data-test-subj="heatmapChart">
           <HeatmapComponent
             {...config}
             onClickValue={onClickValue}

From 41be68a24225f095ce1dff9410b3d01703b55b17 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Fri, 31 Jan 2025 16:34:37 +0100
Subject: [PATCH 02/12] Replace xyAnnotationNumberIcon styles

---
 .../expression_xy/public/components/annotations.scss  |  7 -------
 .../expression_xy/public/helpers/annotations.tsx      | 11 ++++++++++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
index 59250200bba6b..488b3e62c6520 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
@@ -1,10 +1,3 @@
-.xyAnnotationNumberIcon {
-  border-radius: $euiSize;
-  min-width: $euiSize;
-  height: $euiSize;
-  background-color: currentColor;
-}
-
 .xyAnnotationNumberIcon__text {
   font-weight: 500;
   font-size: 9px;
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index cbbeb30a8b87b..7447c6d01f82e 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -10,6 +10,8 @@
 import React from 'react';
 import { Position } from '@elastic/charts';
 import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 import type {
   IconPosition,
   ReferenceLineDecorationConfig,
@@ -139,11 +141,18 @@ export function MarkerBody({
   );
 }
 
+const xyAnnotationNumberIconStyles = css({
+  borderRadius: euiThemeVars.euiSize,
+  minWidth: euiThemeVars.euiSize,
+  height: euiThemeVars.euiSize,
+  backgroundColor: 'currentColor',
+});
+
 function NumberIcon({ number }: { number: number }) {
   return (
     <EuiFlexGroup
       justifyContent="spaceAround"
-      className="xyAnnotationNumberIcon"
+      css={xyAnnotationNumberIconStyles}
       data-test-subj="xyVisGroupedAnnotationIcon"
       gutterSize="none"
       alignItems="center"

From 01d50636a17765451e9ed480d32d4246af682663 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Fri, 31 Jan 2025 16:50:16 +0100
Subject: [PATCH 03/12] Replace xyAnnotationNumberIcon text

---
 .../public/components/annotations.scss        |  7 ------
 .../public/helpers/annotations.tsx            | 25 +++++++++++++------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
index 488b3e62c6520..b9ece0ca4cb12 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
@@ -1,10 +1,3 @@
-.xyAnnotationNumberIcon__text {
-  font-weight: 500;
-  font-size: 9px;
-  letter-spacing: -.5px;
-  line-height: 11px;
-}
-
 .xyAnnotationIcon_rotate90 {
   transform: rotate(90deg) !important;
   transform-origin: center;
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 7447c6d01f82e..1f456857b1458 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -141,23 +141,32 @@ export function MarkerBody({
   );
 }
 
-const xyAnnotationNumberIconStyles = css({
-  borderRadius: euiThemeVars.euiSize,
-  minWidth: euiThemeVars.euiSize,
-  height: euiThemeVars.euiSize,
-  backgroundColor: 'currentColor',
-});
+const xyAnnotationNumberIconCss = {
+  self: css({
+    borderRadius: euiThemeVars.euiSize,
+    minWidth: euiThemeVars.euiSize,
+    height: euiThemeVars.euiSize,
+    backgroundColor: 'currentColor',
+  }),
+
+  text: css({
+    fontWeight: 500,
+    fontSize: '9px',
+    letterSpacing: '-.5px',
+    lineHeight: '11px',
+  }),
+};
 
 function NumberIcon({ number }: { number: number }) {
   return (
     <EuiFlexGroup
       justifyContent="spaceAround"
-      css={xyAnnotationNumberIconStyles}
+      css={xyAnnotationNumberIconCss.self}
       data-test-subj="xyVisGroupedAnnotationIcon"
       gutterSize="none"
       alignItems="center"
     >
-      <EuiText color="ghost" className="xyAnnotationNumberIcon__text">
+      <EuiText color="ghost" css={xyAnnotationNumberIconCss.text}>
         {number < 10 ? number : `9+`}
       </EuiText>
     </EuiFlexGroup>

From 2d9d5205371ce72e7cfee113df0e8a2ee065639b Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Fri, 31 Jan 2025 18:29:01 +0100
Subject: [PATCH 04/12] Replace icon rotate 90 style

---
 .../public/components/annotations.scss        |  5 -----
 .../public/components/annotations.tsx         |  1 -
 .../public/helpers/annotations.tsx            | 20 +++++++++++++++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
index b9ece0ca4cb12..672f431b2fe06 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
@@ -1,8 +1,3 @@
-.xyAnnotationIcon_rotate90 {
-  transform: rotate(90deg) !important;
-  transform-origin: center;
-}
-
 .xyAnnotationTooltip {
   border-radius: 0 !important;
 }
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
index 4e6893f82e840..7ce6d2cef04a6 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
@@ -300,7 +300,6 @@ export const Annotations = ({
                     isHorizontal: !isHorizontal,
                     hasReducedPadding,
                     label: !isGrouped ? annotation.label : undefined,
-                    rotateClassName: isHorizontal ? 'xyAnnotationIcon_rotate90' : undefined,
                   }}
                 />
               ) : undefined
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 1f456857b1458..0b9a091e91100 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -23,6 +23,8 @@ import { AxesMap, getOriginalAxisPosition } from './axes_configuration';
 
 export const LINES_MARKER_SIZE = 20;
 
+
+
 type PartialReferenceLineDecorationConfig = Pick<
   ReferenceLineDecorationConfig,
   'icon' | 'iconPosition' | 'textVisibility'
@@ -141,6 +143,11 @@ export function MarkerBody({
   );
 }
 
+const xyAnnotationIconRotate90Css = css({
+  transform: 'rotate(90deg) !important',
+  transformOrigin: 'center',
+});
+
 const xyAnnotationNumberIconCss = {
   self: css({
     borderRadius: euiThemeVars.euiSize,
@@ -194,12 +201,16 @@ export const AnnotationIcon = ({
   if (!iconConfig) {
     return null;
   }
+
+  const rotationStyle =
+    iconConfig.shouldRotate && !isHorizontal ? xyAnnotationIconRotate90Css : undefined;
+
   return (
     <EuiIcon
       {...rest}
       data-test-subj="xyVisAnnotationIcon"
       type={iconConfig.icon || type}
-      className={iconConfig.shouldRotate ? rotateClassName : undefined}
+      css={rotationStyle}
     />
   );
 };
@@ -226,7 +237,12 @@ export function Marker({
 }) {
   if (hasIcon(config.icon)) {
     return (
-      <AnnotationIcon type={config.icon} rotateClassName={rotateClassName} renderedInChart={true} />
+      <AnnotationIcon
+        type={config.icon}
+        rotateClassName={rotateClassName}
+        renderedInChart={true}
+        isHorizontal={isHorizontal}
+      />
     );
   }
 

From 9c1a52d1a4af95820bd575a29420262c5432479a Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Mon, 3 Feb 2025 11:10:33 +0100
Subject: [PATCH 05/12] Restore heatmap

---
 .../expression_heatmap/public/components/index.scss  | 10 ++++++++++
 .../public/expression_renderers/heatmap_renderer.tsx | 12 +-----------
 2 files changed, 11 insertions(+), 11 deletions(-)
 create mode 100644 src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss

diff --git a/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss b/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss
new file mode 100644
index 0000000000000..66f45c113cc64
--- /dev/null
+++ b/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/index.scss
@@ -0,0 +1,10 @@
+.heatmap-container {
+  height: 100%;
+  width: 100%;
+  // the FocusTrap is adding extra divs which are making the visualization redraw twice
+  // with a visible glitch. This make the chart library resilient to this extra reflow
+  overflow: auto hidden;
+  user-select: text;
+  padding: $euiSizeS;
+  @include euiScrollBar;
+}
diff --git a/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
index 4ab93476b1853..6bfd78739167e 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
@@ -21,8 +21,6 @@ import {
   extractContainerType,
   extractVisualizationType,
 } from '@kbn/chart-expressions-common';
-import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { MultiFilterEvent } from '../../common/types';
 import { ExpressionHeatmapPluginStart } from '../plugin';
 import {
@@ -42,14 +40,6 @@ interface ExpressioHeatmapRendererDependencies {
   getStartDeps: StartServicesGetter<ExpressionHeatmapPluginStart>;
 }
 
-const heatmapContainerCss = css({
-  height: '100%',
-  width: '100%',
-  overflow: 'auto hidden',
-  userSelect: 'text',
-  padding: euiThemeVars.euiSizeS,
-});
-
 export const heatmapRenderer: (
   deps: ExpressioHeatmapRendererDependencies
 ) => ExpressionRenderDefinition<HeatmapExpressionProps> = ({ getStartDeps }) => ({
@@ -111,7 +101,7 @@ export const heatmapRenderer: (
 
     render(
       <KibanaRenderContextProvider {...core}>
-        <div className="euiScrollBar" css={heatmapContainerCss} data-test-subj="heatmapChart">
+        <div className="heatmap-container" data-test-subj="heatmapChart">
           <HeatmapComponent
             {...config}
             onClickValue={onClickValue}

From 13d622248d550f0d8bb716b773a706d9316b6694 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Wed, 5 Feb 2025 16:56:13 +0100
Subject: [PATCH 06/12] Use eui theme instead of vars

---
 .../public/helpers/annotations.tsx            | 46 +++++++++----------
 .../expression_xy/tsconfig.json               |  1 +
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 0b9a091e91100..3d9c849278daf 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 import { Position } from '@elastic/charts';
 import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { UseEuiTheme } from '@elastic/eui';
 import type {
   IconPosition,
   ReferenceLineDecorationConfig,
@@ -23,8 +23,6 @@ import { AxesMap, getOriginalAxisPosition } from './axes_configuration';
 
 export const LINES_MARKER_SIZE = 20;
 
-
-
 type PartialReferenceLineDecorationConfig = Pick<
   ReferenceLineDecorationConfig,
   'icon' | 'iconPosition' | 'textVisibility'
@@ -37,6 +35,27 @@ type PartialMergedAnnotation = Pick<
   'position' | 'icon' | 'textVisibility' | 'label' | 'isGrouped'
 >;
 
+const xyAnnotationNumberIconCss = {
+  self: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      borderRadius: euiTheme.size.base,
+      minWidth: euiTheme.size.base,
+      height: euiTheme.size.base,
+      backgroundColor: 'currentColor',
+    }),
+  text: css({
+    fontWeight: 500,
+    fontSize: '9px',
+    letterSpacing: '-.5px',
+    lineHeight: '11px',
+  }),
+};
+
+const xyAnnotationIconRotate90Css = css({
+  transform: 'rotate(90deg) !important',
+  transformOrigin: 'center',
+});
+
 const isExtendedDecorationConfig = (
   config: PartialReferenceLineDecorationConfig | PartialMergedAnnotation | undefined
 ): config is PartialReferenceLineDecorationConfig =>
@@ -143,27 +162,6 @@ export function MarkerBody({
   );
 }
 
-const xyAnnotationIconRotate90Css = css({
-  transform: 'rotate(90deg) !important',
-  transformOrigin: 'center',
-});
-
-const xyAnnotationNumberIconCss = {
-  self: css({
-    borderRadius: euiThemeVars.euiSize,
-    minWidth: euiThemeVars.euiSize,
-    height: euiThemeVars.euiSize,
-    backgroundColor: 'currentColor',
-  }),
-
-  text: css({
-    fontWeight: 500,
-    fontSize: '9px',
-    letterSpacing: '-.5px',
-    lineHeight: '11px',
-  }),
-};
-
 function NumberIcon({ number }: { number: number }) {
   return (
     <EuiFlexGroup
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json b/src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json
index a56c669fdae2f..14fbd63b4a598 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json
@@ -8,6 +8,7 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
+    "../../../../../../typings/emotion.d.ts"
   ],
   "kbn_references": [
     { "path": "../tsconfig.json" },

From 438323e3061f624e5270e9c17e94730330cddb38 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Thu, 6 Feb 2025 10:30:19 +0100
Subject: [PATCH 07/12] Remove tooltip scss styles

---
 .../public/components/annotations.scss        | 46 ---------------
 .../public/components/annotations.tsx         | 59 +++++++++++++++----
 .../public/helpers/annotations.tsx            |  2 +-
 3 files changed, 49 insertions(+), 58 deletions(-)
 delete mode 100644 src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
deleted file mode 100644
index 672f431b2fe06..0000000000000
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.xyAnnotationTooltip {
-  border-radius: 0 !important;
-}
-
-.xyAnnotationTooltip__rows {
-  // max-height: 60vh;
-  overflow-y: hidden;
-}
-
-.xyAnnotationTooltipDetail {
-  padding: $euiSizeXS (
-    $euiSizeXS * 2
-  );
-}
-
-.xyAnnotationTooltip__row {
-  font-weight: $euiFontWeightRegular;
-  padding: $euiSizeS $euiSizeM $euiSizeS $euiSizeS;
-  border-radius: 0 !important;
-}
-
-.xyAnnotationTooltip__extraFields {
-  color: $euiColorDarkShade;
-  margin-top: $euiSizeS;
-}
-
-.xyAnnotationTooltip__extraFieldsKey {
-  overflow-wrap: anywhere;
-  hyphens: auto;
-}
-
-.xyAnnotationTooltip__extraFieldsValue {
-  text-align: right;
-  overflow-wrap: anywhere;
-  hyphens: auto;
-}
-
-.xyAnnotationTooltip__skippedCount {
-  position: relative;
-  text-align: right;
-  font-weight: $euiFontWeightRegular;
-}
-
-.echAnnotation {
-  max-width: 500px;
-}
\ No newline at end of file
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
index 7ce6d2cef04a6..f34cff5ba3780 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './annotations.scss';
 import './reference_lines/reference_lines.scss';
 
 import React, { Fragment } from 'react';
@@ -28,6 +27,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  UseEuiTheme,
 } from '@elastic/eui';
 import type {
   EventAnnotationOutput,
@@ -39,6 +39,7 @@ import { defaultAnnotationColor, defaultAnnotationRangeColor } from '@kbn/event-
 import { Datatable, DatatableColumn, DatatableRow } from '@kbn/expressions-plugin/common';
 import { PointEventAnnotationRow } from '@kbn/event-annotation-plugin/common/manual_event_annotation/types';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 import type { MergedAnnotation } from '../../common';
 import { AnnotationIcon, hasIcon, Marker, MarkerBody } from '../helpers';
 import { mapVerticalToHorizontalPlacement, LINES_MARKER_SIZE } from '../helpers';
@@ -55,6 +56,42 @@ export interface AnnotationsProps {
   outsideDimension: number;
 }
 
+const xyAnnotationTooltipCss = {
+  self: css({
+    borderRadius: '0 !important',
+  }),
+  rows: css({
+    // maxHeight: '60vh',
+    overflowY: 'hidden',
+  }),
+  row: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      fontWeight: euiTheme.font.weight.regular,
+      padding: `${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} ${euiTheme.size.s}`,
+      borderRadius: '0 !important',
+    }),
+  extraFields: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      color: euiTheme.colors.darkShade,
+      marginTop: euiTheme.size.s,
+    }),
+  extraFieldsKey: css({
+    overflowWrap: 'anywhere',
+    hyphens: 'auto',
+  }),
+  extraFieldsValue: css({
+    textAlign: 'right',
+    overflowWrap: 'anywhere',
+    hyphens: 'auto',
+  }),
+  skippedCount: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      position: 'relative',
+      textAlign: 'right',
+      fontWeight: euiTheme.font.weight.regular,
+    }),
+};
+
 const TooltipAnnotationDetails = ({
   row,
   extraFields,
@@ -67,11 +104,11 @@ const TooltipAnnotationDetails = ({
   }>;
 }) => {
   return extraFields.length > 0 ? (
-    <div className="xyAnnotationTooltip__extraFields">
+    <div css={xyAnnotationTooltipCss.extraFields}>
       {extraFields.map((field) => (
         <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem className="xyAnnotationTooltip__extraFieldsKey">{field.name}:</EuiFlexItem>
-          <EuiFlexItem className="xyAnnotationTooltip__extraFieldsValue">
+          <EuiFlexItem css={xyAnnotationTooltipCss.extraFieldsKey}>{field.name}:</EuiFlexItem>
+          <EuiFlexItem css={xyAnnotationTooltipCss.extraFieldsValue}>
             {field.formatter ? field.formatter.convert(row[field.key]) : row[field.key]}
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -120,9 +157,9 @@ const createCustomTooltip =
         hasBorder={false}
         paddingSize="none"
         borderRadius="none"
-        className="xyAnnotationTooltip"
+        css={xyAnnotationTooltipCss.self}
       >
-        <div className="xyAnnotationTooltip__rows">
+        <div css={xyAnnotationTooltipCss.rows}>
           {rows.slice(0, DISPLAYED_COUNT_OF_ROWS).map((row, index) => {
             const extraFields = getExtraFields(row, formatFactory, columns);
 
@@ -135,7 +172,7 @@ const createCustomTooltip =
                     <EuiSpacer size="xs" />
                   </>
                 )}
-                <div className="xyAnnotationTooltip__row">
+                <div css={xyAnnotationTooltipCss.row}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <AnnotationIcon
@@ -161,11 +198,11 @@ const createCustomTooltip =
           })}
         </div>
         {skippedCount ? (
-          <div className="xyAnnotationTooltip__skippedCount">
+          <div css={xyAnnotationTooltipCss.skippedCount}>
             <EuiSpacer size="xs" />
             <EuiHorizontalRule margin="none" />
             <EuiSpacer size="xs" />
-            <div className="xyAnnotationTooltip__row ">
+            <div css={xyAnnotationTooltipCss.row}>
               <FormattedMessage
                 id="expressionXY.annotations.skippedCount"
                 defaultMessage="+{value} more…"
@@ -361,9 +398,9 @@ export const Annotations = ({
                 hasBorder={false}
                 paddingSize="none"
                 borderRadius="none"
-                className="xyAnnotationTooltip"
+                css={xyAnnotationTooltipCss.self}
               >
-                <div className="xyAnnotationTooltip__row">
+                <div css={xyAnnotationTooltipCss.row}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <EuiIcon type="stopFilled" color={color} />
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 3d9c849278daf..1e67ca84fbb7f 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -183,7 +183,7 @@ const isNumericalString = (value: string) => !isNaN(Number(value));
 export const AnnotationIcon = ({
   type,
   rotateClassName = '',
-  isHorizontal,
+  isHorizontal = true,
   renderedInChart,
   ...rest
 }: {

From b75e430ed3fc9178777b88a73003d5ff8bb84425 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Fri, 7 Feb 2025 15:36:48 +0100
Subject: [PATCH 08/12] Refactor styles

---
 .../public/components/annotations.tsx         | 93 ++++++++++---------
 .../public/helpers/annotations.tsx            | 62 ++++++-------
 2 files changed, 75 insertions(+), 80 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
index f34cff5ba3780..8e9d3ef50628f 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
@@ -56,42 +56,6 @@ export interface AnnotationsProps {
   outsideDimension: number;
 }
 
-const xyAnnotationTooltipCss = {
-  self: css({
-    borderRadius: '0 !important',
-  }),
-  rows: css({
-    // maxHeight: '60vh',
-    overflowY: 'hidden',
-  }),
-  row: ({ euiTheme }: UseEuiTheme) =>
-    css({
-      fontWeight: euiTheme.font.weight.regular,
-      padding: `${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} ${euiTheme.size.s}`,
-      borderRadius: '0 !important',
-    }),
-  extraFields: ({ euiTheme }: UseEuiTheme) =>
-    css({
-      color: euiTheme.colors.darkShade,
-      marginTop: euiTheme.size.s,
-    }),
-  extraFieldsKey: css({
-    overflowWrap: 'anywhere',
-    hyphens: 'auto',
-  }),
-  extraFieldsValue: css({
-    textAlign: 'right',
-    overflowWrap: 'anywhere',
-    hyphens: 'auto',
-  }),
-  skippedCount: ({ euiTheme }: UseEuiTheme) =>
-    css({
-      position: 'relative',
-      textAlign: 'right',
-      fontWeight: euiTheme.font.weight.regular,
-    }),
-};
-
 const TooltipAnnotationDetails = ({
   row,
   extraFields,
@@ -104,11 +68,11 @@ const TooltipAnnotationDetails = ({
   }>;
 }) => {
   return extraFields.length > 0 ? (
-    <div css={xyAnnotationTooltipCss.extraFields}>
+    <div css={styles.xyAnnotationTooltipExtraFields}>
       {extraFields.map((field) => (
         <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem css={xyAnnotationTooltipCss.extraFieldsKey}>{field.name}:</EuiFlexItem>
-          <EuiFlexItem css={xyAnnotationTooltipCss.extraFieldsValue}>
+          <EuiFlexItem css={styles.xyAnnotationTooltipExtraFieldsKey}>{field.name}:</EuiFlexItem>
+          <EuiFlexItem css={styles.xyAnnotationTooltipExtraFieldsValue}>
             {field.formatter ? field.formatter.convert(row[field.key]) : row[field.key]}
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -157,9 +121,9 @@ const createCustomTooltip =
         hasBorder={false}
         paddingSize="none"
         borderRadius="none"
-        css={xyAnnotationTooltipCss.self}
+        css={styles.xyAnnotationTooltip}
       >
-        <div css={xyAnnotationTooltipCss.rows}>
+        <div css={styles.xyAnnotationTooltipRows}>
           {rows.slice(0, DISPLAYED_COUNT_OF_ROWS).map((row, index) => {
             const extraFields = getExtraFields(row, formatFactory, columns);
 
@@ -172,7 +136,7 @@ const createCustomTooltip =
                     <EuiSpacer size="xs" />
                   </>
                 )}
-                <div css={xyAnnotationTooltipCss.row}>
+                <div css={styles.xyAnnotationTooltipRow}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <AnnotationIcon
@@ -198,11 +162,11 @@ const createCustomTooltip =
           })}
         </div>
         {skippedCount ? (
-          <div css={xyAnnotationTooltipCss.skippedCount}>
+          <div css={styles.xyAnnotationTooltipSkippedCount}>
             <EuiSpacer size="xs" />
             <EuiHorizontalRule margin="none" />
             <EuiSpacer size="xs" />
-            <div css={xyAnnotationTooltipCss.row}>
+            <div css={styles.xyAnnotationTooltipRow}>
               <FormattedMessage
                 id="expressionXY.annotations.skippedCount"
                 defaultMessage="+{value} more…"
@@ -337,6 +301,7 @@ export const Annotations = ({
                     isHorizontal: !isHorizontal,
                     hasReducedPadding,
                     label: !isGrouped ? annotation.label : undefined,
+                    rotateClassName: isHorizontal ? 'xyAnnotationIcon_rotate90' : undefined,
                   }}
                 />
               ) : undefined
@@ -398,9 +363,9 @@ export const Annotations = ({
                 hasBorder={false}
                 paddingSize="none"
                 borderRadius="none"
-                css={xyAnnotationTooltipCss.self}
+                css={styles.xyAnnotationTooltip}
               >
-                <div css={xyAnnotationTooltipCss.row}>
+                <div css={styles.xyAnnotationTooltipRow}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <EuiIcon type="stopFilled" color={color} />
@@ -435,3 +400,39 @@ export const Annotations = ({
     </>
   );
 };
+
+const styles = {
+  xyAnnotationTooltip: css({
+    borderRadius: '0 !important',
+  }),
+  xyAnnotationTooltipRows: css({
+    // maxHeight: '60vh',
+    overflowY: 'hidden',
+  }),
+  xyAnnotationTooltipRow: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      fontWeight: euiTheme.font.weight.regular,
+      padding: `${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} ${euiTheme.size.s}`,
+      borderRadius: '0 !important',
+    }),
+  xyAnnotationTooltipExtraFields: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      color: euiTheme.colors.darkShade,
+      marginTop: euiTheme.size.s,
+    }),
+  xyAnnotationTooltipExtraFieldsKey: css({
+    overflowWrap: 'anywhere',
+    hyphens: 'auto',
+  }),
+  xyAnnotationTooltipExtraFieldsValue: css({
+    textAlign: 'right',
+    overflowWrap: 'anywhere',
+    hyphens: 'auto',
+  }),
+  xyAnnotationTooltipSkippedCount: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      position: 'relative',
+      textAlign: 'right',
+      fontWeight: euiTheme.font.weight.regular,
+    }),
+};
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 1e67ca84fbb7f..47b8e09ad8321 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -35,27 +35,6 @@ type PartialMergedAnnotation = Pick<
   'position' | 'icon' | 'textVisibility' | 'label' | 'isGrouped'
 >;
 
-const xyAnnotationNumberIconCss = {
-  self: ({ euiTheme }: UseEuiTheme) =>
-    css({
-      borderRadius: euiTheme.size.base,
-      minWidth: euiTheme.size.base,
-      height: euiTheme.size.base,
-      backgroundColor: 'currentColor',
-    }),
-  text: css({
-    fontWeight: 500,
-    fontSize: '9px',
-    letterSpacing: '-.5px',
-    lineHeight: '11px',
-  }),
-};
-
-const xyAnnotationIconRotate90Css = css({
-  transform: 'rotate(90deg) !important',
-  transformOrigin: 'center',
-});
-
 const isExtendedDecorationConfig = (
   config: PartialReferenceLineDecorationConfig | PartialMergedAnnotation | undefined
 ): config is PartialReferenceLineDecorationConfig =>
@@ -166,12 +145,12 @@ function NumberIcon({ number }: { number: number }) {
   return (
     <EuiFlexGroup
       justifyContent="spaceAround"
-      css={xyAnnotationNumberIconCss.self}
+      css={styles.xyAnnotationNumberIcon}
       data-test-subj="xyVisGroupedAnnotationIcon"
       gutterSize="none"
       alignItems="center"
     >
-      <EuiText color="ghost" css={xyAnnotationNumberIconCss.text}>
+      <EuiText color="ghost" css={styles.xyAnnotationNumberIconText}>
         {number < 10 ? number : `9+`}
       </EuiText>
     </EuiFlexGroup>
@@ -183,7 +162,7 @@ const isNumericalString = (value: string) => !isNaN(Number(value));
 export const AnnotationIcon = ({
   type,
   rotateClassName = '',
-  isHorizontal = true,
+  isHorizontal,
   renderedInChart,
   ...rest
 }: {
@@ -200,15 +179,13 @@ export const AnnotationIcon = ({
     return null;
   }
 
-  const rotationStyle =
-    iconConfig.shouldRotate && !isHorizontal ? xyAnnotationIconRotate90Css : undefined;
-
   return (
     <EuiIcon
       {...rest}
       data-test-subj="xyVisAnnotationIcon"
       type={iconConfig.icon || type}
-      css={rotationStyle}
+      className={iconConfig.shouldRotate ? rotateClassName : undefined}
+      css={styles.xyAnnotationIconRotate90}
     />
   );
 };
@@ -235,12 +212,7 @@ export function Marker({
 }) {
   if (hasIcon(config.icon)) {
     return (
-      <AnnotationIcon
-        type={config.icon}
-        rotateClassName={rotateClassName}
-        renderedInChart={true}
-        isHorizontal={isHorizontal}
-      />
+      <AnnotationIcon type={config.icon} rotateClassName={rotateClassName} renderedInChart={true} />
     );
   }
 
@@ -253,3 +225,25 @@ export function Marker({
   }
   return null;
 }
+
+const styles = {
+  xyAnnotationNumberIcon: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      borderRadius: euiTheme.size.base,
+      minWidth: euiTheme.size.base,
+      height: euiTheme.size.base,
+      backgroundColor: 'currentColor',
+    }),
+  xyAnnotationNumberIconText: css({
+    fontWeight: 500,
+    fontSize: '9px',
+    letterSpacing: '-.5px',
+    lineHeight: '11px',
+  }),
+  xyAnnotationIconRotate90: css({
+    '&.xyAnnotationIcon_rotate90': {
+      transform: 'rotate(90deg) !important',
+      transformOrigin: 'center',
+    },
+  }),
+};

From 7c9c9dfa4a44c170d3e6e20901ba12a1c6963784 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Thu, 13 Feb 2025 15:00:32 +0100
Subject: [PATCH 09/12] Use euiTheme for font weight

---
 .../expression_xy/public/helpers/annotations.tsx    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 47b8e09ad8321..53ef49330f9f0 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -234,12 +234,13 @@ const styles = {
       height: euiTheme.size.base,
       backgroundColor: 'currentColor',
     }),
-  xyAnnotationNumberIconText: css({
-    fontWeight: 500,
-    fontSize: '9px',
-    letterSpacing: '-.5px',
-    lineHeight: '11px',
-  }),
+  xyAnnotationNumberIconText: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      fontWeight: euiTheme.font.weight.medium,
+      fontSize: '9px',
+      letterSpacing: '-.5px',
+      lineHeight: '11px',
+    }),
   xyAnnotationIconRotate90: css({
     '&.xyAnnotationIcon_rotate90': {
       transform: 'rotate(90deg) !important',

From 347994e5afe87ce889e703142dd6eec5db83f966 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Thu, 13 Feb 2025 15:44:15 +0100
Subject: [PATCH 10/12] Use useEuiFontSize

---
 .../expression_xy/public/helpers/annotations.tsx            | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index 53ef49330f9f0..e14f6cb048eaa 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { Position } from '@elastic/charts';
-import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText, useEuiFontSize } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '@elastic/eui';
 import type {
@@ -150,7 +150,7 @@ function NumberIcon({ number }: { number: number }) {
       gutterSize="none"
       alignItems="center"
     >
-      <EuiText color="ghost" css={styles.xyAnnotationNumberIconText}>
+      <EuiText color="ghost" css={[useEuiFontSize('xxxs'), styles.xyAnnotationNumberIconText]}>
         {number < 10 ? number : `9+`}
       </EuiText>
     </EuiFlexGroup>
@@ -237,9 +237,7 @@ const styles = {
   xyAnnotationNumberIconText: ({ euiTheme }: UseEuiTheme) =>
     css({
       fontWeight: euiTheme.font.weight.medium,
-      fontSize: '9px',
       letterSpacing: '-.5px',
-      lineHeight: '11px',
     }),
   xyAnnotationIconRotate90: css({
     '&.xyAnnotationIcon_rotate90': {

From 0eb99555c7aa501ca3a3277334aeb04bf815fa4b Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Mon, 3 Mar 2025 10:39:48 +0100
Subject: [PATCH 11/12] Remove prefix from xy annotation tooltip style names

---
 .../public/components/annotations.tsx         | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
index 8e9d3ef50628f..e5c4934fc9f14 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
@@ -68,11 +68,11 @@ const TooltipAnnotationDetails = ({
   }>;
 }) => {
   return extraFields.length > 0 ? (
-    <div css={styles.xyAnnotationTooltipExtraFields}>
+    <div css={styles.tooltipExtraFields}>
       {extraFields.map((field) => (
         <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem css={styles.xyAnnotationTooltipExtraFieldsKey}>{field.name}:</EuiFlexItem>
-          <EuiFlexItem css={styles.xyAnnotationTooltipExtraFieldsValue}>
+          <EuiFlexItem css={styles.tooltipExtraFieldsKey}>{field.name}:</EuiFlexItem>
+          <EuiFlexItem css={styles.tooltipExtraFieldsValue}>
             {field.formatter ? field.formatter.convert(row[field.key]) : row[field.key]}
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -121,9 +121,9 @@ const createCustomTooltip =
         hasBorder={false}
         paddingSize="none"
         borderRadius="none"
-        css={styles.xyAnnotationTooltip}
+        css={styles.tooltip}
       >
-        <div css={styles.xyAnnotationTooltipRows}>
+        <div css={styles.tooltipRows}>
           {rows.slice(0, DISPLAYED_COUNT_OF_ROWS).map((row, index) => {
             const extraFields = getExtraFields(row, formatFactory, columns);
 
@@ -136,7 +136,7 @@ const createCustomTooltip =
                     <EuiSpacer size="xs" />
                   </>
                 )}
-                <div css={styles.xyAnnotationTooltipRow}>
+                <div css={styles.tooltipRow}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <AnnotationIcon
@@ -162,11 +162,11 @@ const createCustomTooltip =
           })}
         </div>
         {skippedCount ? (
-          <div css={styles.xyAnnotationTooltipSkippedCount}>
+          <div css={styles.tooltipSkippedCount}>
             <EuiSpacer size="xs" />
             <EuiHorizontalRule margin="none" />
             <EuiSpacer size="xs" />
-            <div css={styles.xyAnnotationTooltipRow}>
+            <div css={styles.tooltipRow}>
               <FormattedMessage
                 id="expressionXY.annotations.skippedCount"
                 defaultMessage="+{value} more…"
@@ -363,9 +363,9 @@ export const Annotations = ({
                 hasBorder={false}
                 paddingSize="none"
                 borderRadius="none"
-                css={styles.xyAnnotationTooltip}
+                css={styles.tooltip}
               >
-                <div css={styles.xyAnnotationTooltipRow}>
+                <div css={styles.tooltipRow}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <EuiIcon type="stopFilled" color={color} />
@@ -402,34 +402,34 @@ export const Annotations = ({
 };
 
 const styles = {
-  xyAnnotationTooltip: css({
+  tooltip: css({
     borderRadius: '0 !important',
   }),
-  xyAnnotationTooltipRows: css({
+  tooltipRows: css({
     // maxHeight: '60vh',
     overflowY: 'hidden',
   }),
-  xyAnnotationTooltipRow: ({ euiTheme }: UseEuiTheme) =>
+  tooltipRow: ({ euiTheme }: UseEuiTheme) =>
     css({
       fontWeight: euiTheme.font.weight.regular,
       padding: `${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} ${euiTheme.size.s}`,
       borderRadius: '0 !important',
     }),
-  xyAnnotationTooltipExtraFields: ({ euiTheme }: UseEuiTheme) =>
+  tooltipExtraFields: ({ euiTheme }: UseEuiTheme) =>
     css({
       color: euiTheme.colors.darkShade,
       marginTop: euiTheme.size.s,
     }),
-  xyAnnotationTooltipExtraFieldsKey: css({
+  tooltipExtraFieldsKey: css({
     overflowWrap: 'anywhere',
     hyphens: 'auto',
   }),
-  xyAnnotationTooltipExtraFieldsValue: css({
+  tooltipExtraFieldsValue: css({
     textAlign: 'right',
     overflowWrap: 'anywhere',
     hyphens: 'auto',
   }),
-  xyAnnotationTooltipSkippedCount: ({ euiTheme }: UseEuiTheme) =>
+  tooltipSkippedCount: ({ euiTheme }: UseEuiTheme) =>
     css({
       position: 'relative',
       textAlign: 'right',

From 6ad4f001cde6f0c0a7acb1312f60caa939dacc24 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <maria.iriarte@elastic.co>
Date: Mon, 3 Mar 2025 10:43:37 +0100
Subject: [PATCH 12/12] Fix import

---
 .../expression_xy/public/helpers/annotations.tsx       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index e14f6cb048eaa..1ff97183c055e 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -9,9 +9,15 @@
 
 import React from 'react';
 import { Position } from '@elastic/charts';
-import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText, useEuiFontSize } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiIcon,
+  EuiIconProps,
+  EuiText,
+  useEuiFontSize,
+  UseEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
-import { UseEuiTheme } from '@elastic/eui';
 import type {
   IconPosition,
   ReferenceLineDecorationConfig,