From a0a66a15776f2117c1a0bd44d4f64f6a7575f080 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Tue, 9 Mar 2021 18:03:19 -0600
Subject: [PATCH 01/10] fix lens and xy charts tooltip position

---
 package.json                                           |  2 +-
 .../vis_type_xy/public/components/xy_settings.tsx      | 10 +++++++++-
 .../lens/public/pie_visualization/render_function.tsx  |  6 +++++-
 x-pack/plugins/lens/public/shared_components/index.ts  |  2 ++
 .../lens/public/xy_visualization/expression.tsx        |  4 +++-
 yarn.lock                                              |  8 ++++----
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 12eae1b256570..1545a5d7f22df 100644
--- a/package.json
+++ b/package.json
@@ -348,7 +348,7 @@
     "@cypress/webpack-preprocessor": "^5.5.0",
     "@elastic/apm-rum": "^5.6.1",
     "@elastic/apm-rum-react": "^1.2.5",
-    "@elastic/charts": "25.1.0",
+    "@elastic/charts": "25.2.0",
     "@elastic/eslint-config-kibana": "link:packages/elastic-eslint-config-kibana",
     "@elastic/eslint-plugin-eui": "0.0.2",
     "@elastic/github-checks-reporter": "0.0.20b3",
diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
index 59bed0060a6a6..c350f76d00eb4 100644
--- a/src/plugins/vis_type_xy/public/components/xy_settings.tsx
+++ b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -61,6 +61,8 @@ type XYSettingsProps = Pick<
   legendPosition: Position;
 };
 
+const KBN_HEADER_OFFSET = 98;
+
 function getValueLabelsStyling(isHorizontal: boolean) {
   const VALUE_LABELS_MAX_FONTSIZE = 15;
   const VALUE_LABELS_MIN_FONTSIZE = 10;
@@ -148,13 +150,19 @@ export const XYSettings: FC<XYSettingsProps> = ({
       : headerValueFormatter &&
         (tooltip.detailedTooltip ? undefined : ({ value }: any) => headerValueFormatter(value));
 
+  const boudaryProps = {
+    boundary: document.body,
+    boundaryPadding: { top: KBN_HEADER_OFFSET },
+  };
+
   const tooltipProps: TooltipProps = tooltip.detailedTooltip
     ? {
         ...tooltip,
+        ...boudaryProps,
         customTooltip: tooltip.detailedTooltip(headerFormatter),
         headerFormatter: undefined,
       }
-    : { ...tooltip, headerFormatter };
+    : { ...tooltip, ...boudaryProps, headerFormatter  };
 
   return (
     <Settings
diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
index 4d6eac6a87e48..0a9d3162bd3c7 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -29,7 +29,7 @@ import { VisualizationContainer } from '../visualization_container';
 import { CHART_NAMES, DEFAULT_PERCENT_DECIMALS } from './constants';
 import { PieExpressionProps } from './types';
 import { getSliceValue, getFilterContext } from './render_helpers';
-import { EmptyPlaceholder } from '../shared_components';
+import { EmptyPlaceholder, KBN_HEADER_OFFSET } from '../shared_components';
 import './visualization.scss';
 import { desanitizeFilterContext } from '../utils';
 import {
@@ -260,6 +260,10 @@ export function PieComponent(
     >
       <Chart>
         <Settings
+          tooltip={{
+            boundary: document.body,
+            boundaryPadding: { top: KBN_HEADER_OFFSET },
+          }}
           debugState={window._echDebugStateFlag ?? false}
           // Legend is hidden in many scenarios
           // - Tiny preview
diff --git a/x-pack/plugins/lens/public/shared_components/index.ts b/x-pack/plugins/lens/public/shared_components/index.ts
index 482571696a4d3..fcc1a11bf509f 100644
--- a/x-pack/plugins/lens/public/shared_components/index.ts
+++ b/x-pack/plugins/lens/public/shared_components/index.ts
@@ -9,3 +9,5 @@ export * from './empty_placeholder';
 export { ToolbarPopoverProps, ToolbarPopover } from './toolbar_popover';
 export { LegendSettingsPopover } from './legend_settings_popover';
 export { PalettePicker } from './palette_picker';
+
+export const KBN_HEADER_OFFSET = 98;
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index c5e7b0af9654f..c6eda0eb10ac6 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -55,7 +55,7 @@ import {
   PaletteRegistry,
   SeriesLayer,
 } from '../../../../../src/plugins/charts/public';
-import { EmptyPlaceholder } from '../shared_components';
+import { EmptyPlaceholder, KBN_HEADER_OFFSET } from '../shared_components';
 import { desanitizeFilterContext } from '../utils';
 import { fittingFunctionDefinitions, getFitOptions } from './fitting_functions';
 import { getAxesConfiguration } from './axes_configuration';
@@ -548,6 +548,8 @@ export function XYChart({
         baseTheme={chartBaseTheme}
         tooltip={{
           headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
+          boundary: document.body,
+          boundaryPadding: { top: KBN_HEADER_OFFSET },
         }}
         rotation={shouldRotate ? 90 : 0}
         xDomain={xDomain}
diff --git a/yarn.lock b/yarn.lock
index 753b79d8a9122..163b2b7dc1427 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1349,10 +1349,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@25.1.0":
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-25.1.0.tgz#8859e07c9822696b3f9b12ae46a18e3316f623fd"
-  integrity sha512-4IFmyhg3dG7VjP0C9DbMBBAxAtai/HPdG/4Z5UMdGYGoZiJwS+fo50irQtvD3H5Lm6OSS8Xk9hmCVPx8KmdiUg==
+"@elastic/charts@25.2.0":
+  version "25.2.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-25.2.0.tgz#82ec02e7d7998ab3da26edb9f18dcb4b9304b4b0"
+  integrity sha512-E3QUxt8vklGH8ThZ1yBl+Nb0cLikJnrai5AcZcSSKioiSRlBoIfam7BWWHKl3p2GFOlEs7mGid82BnZDnY6EUw==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"

From bf2d3a80c865dfc2bc939c6bacaa360c428fd808 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Wed, 10 Mar 2021 08:00:10 -0600
Subject: [PATCH 02/10] use json theme variables

---
 src/plugins/vis_type_xy/public/components/xy_settings.tsx | 5 +++--
 x-pack/plugins/lens/public/shared_components/index.ts     | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
index c350f76d00eb4..37d42b9ba82bd 100644
--- a/src/plugins/vis_type_xy/public/components/xy_settings.tsx
+++ b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -24,6 +24,7 @@ import {
   VerticalAlignment,
   HorizontalAlignment,
 } from '@elastic/charts';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
 import { renderEndzoneTooltip } from '../../../charts/public';
 
@@ -61,7 +62,7 @@ type XYSettingsProps = Pick<
   legendPosition: Position;
 };
 
-const KBN_HEADER_OFFSET = 98;
+const KBN_HEADER_OFFSET = parseFloat(euiLightVars.euiHeaderHeightCompensation) * 2;
 
 function getValueLabelsStyling(isHorizontal: boolean) {
   const VALUE_LABELS_MAX_FONTSIZE = 15;
@@ -162,7 +163,7 @@ export const XYSettings: FC<XYSettingsProps> = ({
         customTooltip: tooltip.detailedTooltip(headerFormatter),
         headerFormatter: undefined,
       }
-    : { ...tooltip, ...boudaryProps, headerFormatter  };
+    : { ...tooltip, ...boudaryProps, headerFormatter };
 
   return (
     <Settings
diff --git a/x-pack/plugins/lens/public/shared_components/index.ts b/x-pack/plugins/lens/public/shared_components/index.ts
index fcc1a11bf509f..7c6d5d01c6456 100644
--- a/x-pack/plugins/lens/public/shared_components/index.ts
+++ b/x-pack/plugins/lens/public/shared_components/index.ts
@@ -9,5 +9,6 @@ export * from './empty_placeholder';
 export { ToolbarPopoverProps, ToolbarPopover } from './toolbar_popover';
 export { LegendSettingsPopover } from './legend_settings_popover';
 export { PalettePicker } from './palette_picker';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
-export const KBN_HEADER_OFFSET = 98;
+export const KBN_HEADER_OFFSET = parseFloat(euiLightVars.euiHeaderHeightCompensation) * 2;

From 8f3b1183a8b8c19d708d20c7335a4452ad7c2eab Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Wed, 10 Mar 2021 12:43:48 -0600
Subject: [PATCH 03/10] add top level fixed viewport element

---
 src/core/public/rendering/_base.scss            | 10 ++++++++++
 src/core/public/rendering/rendering_service.tsx |  1 +
 2 files changed, 11 insertions(+)

diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
index de13785a17f5b..f3a5fbf18c50c 100644
--- a/src/core/public/rendering/_base.scss
+++ b/src/core/public/rendering/_base.scss
@@ -11,6 +11,16 @@
   min-height: 100%;
 }
 
+#app-fixed-viewport {
+  pointer-events: none;
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .app-wrapper {
   display: flex;
   flex-flow: column nowrap;
diff --git a/src/core/public/rendering/rendering_service.tsx b/src/core/public/rendering/rendering_service.tsx
index 843f2a253f33e..787fa475c7d5f 100644
--- a/src/core/public/rendering/rendering_service.tsx
+++ b/src/core/public/rendering/rendering_service.tsx
@@ -52,6 +52,7 @@ export class RenderingService {
           {chromeHeader}
           <AppWrapper chromeVisible$={chrome.getIsVisible$()}>
             <div className="app-wrapper-panel">
+              <div id="app-fixed-viewport" />
               <div id="globalBannerList">{bannerComponent}</div>
               <AppContainer classes$={chrome.getApplicationClasses$()}>{appComponent}</AppContainer>
             </div>

From 9423b4f5c7eae10c0eb7b2619befe6c9daa912e7 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Wed, 10 Mar 2021 12:47:23 -0600
Subject: [PATCH 04/10] set boundary to fixed viewport, observe header
 visibility

---
 .../public/components/xy_settings.tsx         | 26 ++++++++++++----
 src/plugins/vis_type_xy/public/plugin.ts      |  2 ++
 src/plugins/vis_type_xy/public/services.ts    |  6 +++-
 .../public/pie_visualization/expression.tsx   |  3 ++
 .../lens/public/pie_visualization/index.ts    |  2 ++
 .../pie_visualization/render_function.tsx     | 25 ++++++++++++---
 .../public/xy_visualization/expression.tsx    | 31 +++++++++++++++----
 .../lens/public/xy_visualization/index.ts     |  3 +-
 8 files changed, 80 insertions(+), 18 deletions(-)

diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
index 37d42b9ba82bd..ee5cb36f1eee1 100644
--- a/src/plugins/vis_type_xy/public/components/xy_settings.tsx
+++ b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FC } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 
 import {
   Direction,
@@ -28,7 +28,7 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
 import { renderEndzoneTooltip } from '../../../charts/public';
 
-import { getThemeService, getUISettings } from '../services';
+import { getIsVisible, getThemeService, getUISettings } from '../services';
 import { VisConfig } from '../types';
 import { fillEmptyValue } from '../utils/get_series_name_fn';
 
@@ -108,6 +108,15 @@ export const XYSettings: FC<XYSettingsProps> = ({
   const baseTheme = themeService.useChartsBaseTheme();
   const dimmingOpacity = getUISettings().get<number | undefined>('visualization:dimmingOpacity');
   const valueLabelsStyling = getValueLabelsStyling(rotation === 90 || rotation === -90);
+  const [headerOffset, setHeaderOffset] = useState(0);
+
+  useEffect(() => {
+    const subscription = getIsVisible().subscribe((value: boolean) => {
+      setHeaderOffset(value ? KBN_HEADER_OFFSET : 0);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
 
   const themeOverrides: PartialTheme = {
     markSizeRatio,
@@ -151,10 +160,15 @@ export const XYSettings: FC<XYSettingsProps> = ({
       : headerValueFormatter &&
         (tooltip.detailedTooltip ? undefined : ({ value }: any) => headerValueFormatter(value));
 
-  const boudaryProps = {
-    boundary: document.body,
-    boundaryPadding: { top: KBN_HEADER_OFFSET },
-  };
+  const boudaryProps = useMemo(() => {
+    const boundary = headerOffset ? document.getElementById('app-fixed-viewport') : null;
+    return boundary
+      ? {
+          boundary,
+          boundaryPadding: { top: headerOffset },
+        }
+      : undefined;
+  }, [headerOffset]);
 
   const tooltipProps: TooltipProps = tooltip.detailedTooltip
     ? {
diff --git a/src/plugins/vis_type_xy/public/plugin.ts b/src/plugins/vis_type_xy/public/plugin.ts
index d414da8f6dc97..9040df69d22d7 100644
--- a/src/plugins/vis_type_xy/public/plugin.ts
+++ b/src/plugins/vis_type_xy/public/plugin.ts
@@ -22,6 +22,7 @@ import {
   setDocLinks,
   setPalettesService,
   setTrackUiMetric,
+  setIsVisible,
 } from './services';
 import { visTypesDefinitions } from './vis_types';
 import { LEGACY_CHARTS_LIBRARY } from '../common';
@@ -77,6 +78,7 @@ export class VisTypeXyPlugin
   }
 
   public start(core: CoreStart, { data }: VisTypeXyPluginStartDependencies) {
+    setIsVisible(core.chrome.getIsVisible$());
     setFormatService(data.fieldFormats);
     setDataActions(data.actions);
     setDocLinks(core.docLinks);
diff --git a/src/plugins/vis_type_xy/public/services.ts b/src/plugins/vis_type_xy/public/services.ts
index b5dd6152605dc..44c6cbc8ea041 100644
--- a/src/plugins/vis_type_xy/public/services.ts
+++ b/src/plugins/vis_type_xy/public/services.ts
@@ -7,11 +7,15 @@
  */
 
 import { UiCounterMetricType } from '@kbn/analytics';
-import { CoreSetup, DocLinksStart } from '../../../core/public';
+import { CoreSetup, CoreStart, DocLinksStart } from '../../../core/public';
 import { createGetterSetter } from '../../kibana_utils/public';
 import { DataPublicPluginStart } from '../../data/public';
 import { ChartsPluginSetup } from '../../charts/public';
 
+export const [getIsVisible, setIsVisible] = createGetterSetter<
+  ReturnType<CoreStart['chrome']['getIsVisible$']>
+>('xy core.chrome.getIsVisible');
+
 export const [getUISettings, setUISettings] = createGetterSetter<CoreSetup['uiSettings']>(
   'xy core.uiSettings'
 );
diff --git a/x-pack/plugins/lens/public/pie_visualization/expression.tsx b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
index 208ce746f4b9d..8b24fa3806ad6 100644
--- a/x-pack/plugins/lens/public/pie_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
@@ -19,6 +19,7 @@ import { LensMultiTable, FormatFactory, LensFilterEvent } from '../types';
 import { PieExpressionProps, PieExpressionArgs } from './types';
 import { PieComponent } from './render_function';
 import { ChartsPluginSetup, PaletteRegistry } from '../../../../../src/plugins/charts/public';
+import { CoreStart } from '../../../../../src/core/public';
 
 export interface PieRender {
   type: 'render';
@@ -115,6 +116,7 @@ export const getPieRenderer = (dependencies: {
   formatFactory: Promise<FormatFactory>;
   chartsThemeService: ChartsPluginSetup['theme'];
   paletteService: PaletteRegistry;
+  chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
 }): ExpressionRenderDefinition<PieExpressionProps> => ({
   name: 'lens_pie_renderer',
   displayName: i18n.translate('xpack.lens.pie.visualizationName', {
@@ -139,6 +141,7 @@ export const getPieRenderer = (dependencies: {
           formatFactory={formatFactory}
           chartsThemeService={dependencies.chartsThemeService}
           paletteService={dependencies.paletteService}
+          chromeIsVisible$={dependencies.chromeIsVisible$}
           onClickValue={onClickValue}
           renderMode={handlers.getRenderMode()}
           syncColors={handlers.isSyncColorsEnabled()}
diff --git a/x-pack/plugins/lens/public/pie_visualization/index.ts b/x-pack/plugins/lens/public/pie_visualization/index.ts
index 9f4a176ef8aa8..d44b03394e5cf 100644
--- a/x-pack/plugins/lens/public/pie_visualization/index.ts
+++ b/x-pack/plugins/lens/public/pie_visualization/index.ts
@@ -32,6 +32,7 @@ export class PieVisualization {
     editorFrame.registerVisualization(async () => {
       const { getPieVisualization, pie, getPieRenderer } = await import('../async_services');
       const palettes = await charts.palettes.getPalettes();
+      const [{ chrome }] = await core.getStartServices();
 
       expressions.registerFunction(() => pie);
 
@@ -40,6 +41,7 @@ export class PieVisualization {
           formatFactory,
           chartsThemeService: charts.theme,
           paletteService: palettes,
+          chromeIsVisible$: chrome.getIsVisible$(),
         })
       );
       return getPieVisualization({ paletteService: palettes });
diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
index 0a9d3162bd3c7..6b5a74ae5626f 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -22,6 +22,7 @@ import {
   Position,
   Settings,
   ElementClickListener,
+  TooltipProps,
 } from '@elastic/charts';
 import { RenderMode } from 'src/plugins/expressions';
 import { FormatFactory, LensFilterEvent } from '../types';
@@ -38,6 +39,7 @@ import {
   SeriesLayer,
 } from '../../../../../src/plugins/charts/public';
 import { LensIconChartDonut } from '../assets/chart_donut';
+import { CoreStart } from '../../../../../src/core/public';
 
 declare global {
   interface Window {
@@ -55,6 +57,7 @@ export function PieComponent(
     formatFactory: FormatFactory;
     chartsThemeService: ChartsPluginSetup['theme'];
     paletteService: PaletteRegistry;
+    chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
     onClickValue: (data: LensFilterEvent['data']) => void;
     renderMode: RenderMode;
     syncColors: boolean;
@@ -211,6 +214,7 @@ export function PieComponent(
     },
   });
 
+  const [headerOffset, setHeaderOffset] = useState(0);
   const [state, setState] = useState({ isReady: false });
   // It takes a cycle for the chart to render. This prevents
   // reporting from printing a blank chart placeholder.
@@ -218,6 +222,13 @@ export function PieComponent(
     setState({ isReady: true });
   }, []);
 
+  useEffect(() => {
+    const subscription = props.chromeIsVisible$.subscribe((value: boolean) => {
+      setHeaderOffset(value ? KBN_HEADER_OFFSET : 0);
+    });
+    return () => subscription.unsubscribe();
+  }, [props.chromeIsVisible$]);
+
   const hasNegative = firstTable.rows.some((row) => {
     const value = row[metricColumn.id];
     return typeof value === 'number' && value < 0;
@@ -251,6 +262,15 @@ export function PieComponent(
 
     onClickValue(desanitizeFilterContext(context));
   };
+
+  const boundary = headerOffset ? document.getElementById('app-fixed-viewport') : null;
+  const tooltipProps: TooltipProps | undefined = boundary
+    ? {
+        boundary,
+        boundaryPadding: { top: headerOffset },
+      }
+    : undefined;
+
   return (
     <VisualizationContainer
       reportTitle={props.args.title}
@@ -260,10 +280,7 @@ export function PieComponent(
     >
       <Chart>
         <Settings
-          tooltip={{
-            boundary: document.body,
-            boundaryPadding: { top: KBN_HEADER_OFFSET },
-          }}
+          tooltip={tooltipProps}
           debugState={window._echDebugStateFlag ?? false}
           // Legend is hidden in many scenarios
           // - Tiny preview
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index c6eda0eb10ac6..a67b89cc93057 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -7,7 +7,7 @@
 
 import './expression.scss';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import {
   Chart,
@@ -24,6 +24,7 @@ import {
   HorizontalAlignment,
   ElementClickListener,
   BrushEndListener,
+  TooltipProps,
 } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
@@ -60,6 +61,7 @@ import { desanitizeFilterContext } from '../utils';
 import { fittingFunctionDefinitions, getFitOptions } from './fitting_functions';
 import { getAxesConfiguration } from './axes_configuration';
 import { getColorAssignments } from './color_assignment';
+import { CoreStart } from '../../../../../src/core/public';
 
 declare global {
   interface Window {
@@ -89,6 +91,7 @@ export interface XYRender {
 export type XYChartRenderProps = XYChartProps & {
   chartsThemeService: ChartsPluginSetup['theme'];
   paletteService: PaletteRegistry;
+  chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
   formatFactory: FormatFactory;
   timeZone: string;
   minInterval: number | undefined;
@@ -223,6 +226,7 @@ export const getXyChartRenderer = (dependencies: {
   formatFactory: Promise<FormatFactory>;
   chartsThemeService: ChartsPluginSetup['theme'];
   paletteService: PaletteRegistry;
+  chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
   getIntervalByColumn: DataPublicPluginStart['search']['aggs']['getDateMetaByDatatableColumn'];
   timeZone: string;
 }): ExpressionRenderDefinition<XYChartProps> => ({
@@ -252,6 +256,7 @@ export const getXyChartRenderer = (dependencies: {
           {...config}
           formatFactory={formatFactory}
           chartsThemeService={dependencies.chartsThemeService}
+          chromeIsVisible$={dependencies.chromeIsVisible$}
           paletteService={dependencies.paletteService}
           timeZone={dependencies.timeZone}
           minInterval={await calculateMinInterval(config, dependencies.getIntervalByColumn)}
@@ -324,6 +329,7 @@ export function XYChart({
   timeZone,
   chartsThemeService,
   paletteService,
+  chromeIsVisible$,
   minInterval,
   onClickValue,
   onSelectRange,
@@ -333,6 +339,14 @@ export function XYChart({
   const { legend, layers, fittingFunction, gridlinesVisibilitySettings, valueLabels } = args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
+  const [headerOffset, setHeaderOffset] = useState(0);
+
+  useEffect(() => {
+    const subscription = chromeIsVisible$.subscribe((value: boolean) => {
+      setHeaderOffset(value ? KBN_HEADER_OFFSET : 0);
+    });
+    return () => subscription.unsubscribe();
+  }, [chromeIsVisible$]);
 
   const filteredLayers = getFilteredLayers(layers, data);
 
@@ -524,6 +538,15 @@ export function XYChart({
     onSelectRange(context);
   };
 
+  const boundary = headerOffset ? document.getElementById('app-fixed-viewport') : null;
+  const tooltipProps: TooltipProps = {
+    ...(boundary && {
+      boundary,
+      boundaryPadding: { top: headerOffset },
+    }),
+    headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
+  };
+
   return (
     <Chart>
       <Settings
@@ -546,11 +569,7 @@ export function XYChart({
           },
         }}
         baseTheme={chartBaseTheme}
-        tooltip={{
-          headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
-          boundary: document.body,
-          boundaryPadding: { top: KBN_HEADER_OFFSET },
-        }}
+        tooltip={tooltipProps}
         rotation={shouldRotate ? 90 : 0}
         xDomain={xDomain}
         onBrushEnd={renderMode !== 'noInteractivity' ? brushHandler : undefined}
diff --git a/x-pack/plugins/lens/public/xy_visualization/index.ts b/x-pack/plugins/lens/public/xy_visualization/index.ts
index 1ca0bbb3f2da9..b141b6480e9eb 100644
--- a/x-pack/plugins/lens/public/xy_visualization/index.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/index.ts
@@ -47,7 +47,7 @@ export class XyVisualization {
         getXyChartRenderer,
         getXyVisualization,
       } = await import('../async_services');
-      const [, { data }] = await core.getStartServices();
+      const [{ chrome }, { data }] = await core.getStartServices();
       const palettes = await charts.palettes.getPalettes();
       expressions.registerFunction(() => legendConfig);
       expressions.registerFunction(() => yAxisConfig);
@@ -62,6 +62,7 @@ export class XyVisualization {
           formatFactory,
           chartsThemeService: charts.theme,
           paletteService: palettes,
+          chromeIsVisible$: chrome.getIsVisible$(),
           timeZone: getTimeZone(core.uiSettings),
           getIntervalByColumn: data.search.aggs.getDateMetaByDatatableColumn,
         })

From 6011bb018b3bc9e958d7b2f3a485f78fc06273d4 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Wed, 10 Mar 2021 12:59:39 -0600
Subject: [PATCH 05/10] fix lens xy unit tests

---
 .../plugins/lens/public/xy_visualization/expression.test.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
index c3ce391f4469d..7487ce9c4b257 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
@@ -40,6 +40,7 @@ import {
   tickLabelsConfig,
   gridlinesConfig,
 } from './types';
+import { coreMock } from '../../../../../src/core/public/mocks';
 import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
 import { mountWithIntl } from '@kbn/test/jest';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
@@ -48,6 +49,7 @@ import { EmptyPlaceholder } from '../shared_components/empty_placeholder';
 const onClickValue = jest.fn();
 const onSelectRange = jest.fn();
 
+const chromeIsVisible$ = coreMock.createStart().chrome.getIsVisible$();
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
 const paletteService = chartPluginMock.createPaletteRegistry();
 
@@ -443,6 +445,7 @@ describe('xy_expression', () => {
         renderMode: 'display',
         chartsThemeService,
         paletteService,
+        chromeIsVisible$,
         minInterval: 50,
         onClickValue,
         onSelectRange,

From 931ecd26c1972b4df65ed79f7c6850b83690bfef Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Wed, 10 Mar 2021 15:15:36 -0600
Subject: [PATCH 06/10] fix type errors

---
 .../lens/public/pie_visualization/render_function.test.tsx     | 3 +++
 x-pack/plugins/lens/public/xy_visualization/expression.tsx     | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx
index e18878ea064ef..e842bd6758b9e 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx
@@ -20,8 +20,10 @@ import { PieComponent } from './render_function';
 import { PieExpressionArgs } from './types';
 import { EmptyPlaceholder } from '../shared_components';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
+import { coreMock } from '../../../../../src/core/public/mocks';
 import { LensIconChartDonut } from '../assets/chart_donut';
 
+const chromeIsVisible$ = coreMock.createStart().chrome.getIsVisible$();
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
 
 describe('PieVisualization component', () => {
@@ -73,6 +75,7 @@ describe('PieVisualization component', () => {
         onClickValue: jest.fn(),
         chartsThemeService,
         paletteService: chartPluginMock.createPaletteRegistry(),
+        chromeIsVisible$,
         renderMode: 'display' as const,
         syncColors: false,
       };
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index a67b89cc93057..7cdc0d3e593b3 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -7,7 +7,7 @@
 
 import './expression.scss';
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import {
   Chart,

From d9f636fd05274e21e93aa55a8cee544d23b7bb68 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Thu, 11 Mar 2021 11:38:48 -0600
Subject: [PATCH 07/10] refactor to use top-level with top offset, apply
 boundary to tsvb

---
 src/core/public/rendering/_base.scss          |  4 +++
 .../visualizations/views/timeseries/index.js  |  1 +
 .../public/components/xy_settings.tsx         | 31 +++----------------
 src/plugins/vis_type_xy/public/plugin.ts      |  2 --
 src/plugins/vis_type_xy/public/services.ts    |  6 +---
 .../public/pie_visualization/expression.tsx   |  2 --
 .../lens/public/pie_visualization/index.ts    |  2 --
 .../pie_visualization/render_function.tsx     | 23 ++------------
 .../lens/public/shared_components/index.ts    |  2 --
 .../public/xy_visualization/expression.tsx    | 29 +++--------------
 .../lens/public/xy_visualization/index.ts     |  5 +--
 11 files changed, 21 insertions(+), 86 deletions(-)

diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
index f3a5fbf18c50c..ed2d9bc0b3917 100644
--- a/src/core/public/rendering/_base.scss
+++ b/src/core/public/rendering/_base.scss
@@ -45,6 +45,10 @@
 @mixin kbnAffordForHeader($headerHeight) {
   padding-top: $headerHeight;
 
+  #app-fixed-viewport {
+    top: $headerHeight;
+  }
+
   .euiFlyout,
   .euiCollapsibleNav {
     top: $headerHeight;
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
index d306704463c2e..b20978076f3f9 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -129,6 +129,7 @@ export const TimeSeries = ({
         tooltip={{
           snap: true,
           type: tooltipMode === 'show_focused' ? TooltipType.Follow : TooltipType.VerticalCursor,
+          boundary: document.getElementById('app-fixed-viewport') ?? undefined,
           headerFormatter: tooltipFormatter,
         }}
         externalPointerEvents={{ tooltip: { visible: false } }}
diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
index ee5cb36f1eee1..8922f512522a0 100644
--- a/src/plugins/vis_type_xy/public/components/xy_settings.tsx
+++ b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FC, useEffect, useMemo, useState } from 'react';
+import React, { FC } from 'react';
 
 import {
   Direction,
@@ -24,11 +24,10 @@ import {
   VerticalAlignment,
   HorizontalAlignment,
 } from '@elastic/charts';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
 import { renderEndzoneTooltip } from '../../../charts/public';
 
-import { getIsVisible, getThemeService, getUISettings } from '../services';
+import { getThemeService, getUISettings } from '../services';
 import { VisConfig } from '../types';
 import { fillEmptyValue } from '../utils/get_series_name_fn';
 
@@ -62,8 +61,6 @@ type XYSettingsProps = Pick<
   legendPosition: Position;
 };
 
-const KBN_HEADER_OFFSET = parseFloat(euiLightVars.euiHeaderHeightCompensation) * 2;
-
 function getValueLabelsStyling(isHorizontal: boolean) {
   const VALUE_LABELS_MAX_FONTSIZE = 15;
   const VALUE_LABELS_MIN_FONTSIZE = 10;
@@ -108,15 +105,6 @@ export const XYSettings: FC<XYSettingsProps> = ({
   const baseTheme = themeService.useChartsBaseTheme();
   const dimmingOpacity = getUISettings().get<number | undefined>('visualization:dimmingOpacity');
   const valueLabelsStyling = getValueLabelsStyling(rotation === 90 || rotation === -90);
-  const [headerOffset, setHeaderOffset] = useState(0);
-
-  useEffect(() => {
-    const subscription = getIsVisible().subscribe((value: boolean) => {
-      setHeaderOffset(value ? KBN_HEADER_OFFSET : 0);
-    });
-
-    return () => subscription.unsubscribe();
-  }, []);
 
   const themeOverrides: PartialTheme = {
     markSizeRatio,
@@ -160,24 +148,15 @@ export const XYSettings: FC<XYSettingsProps> = ({
       : headerValueFormatter &&
         (tooltip.detailedTooltip ? undefined : ({ value }: any) => headerValueFormatter(value));
 
-  const boudaryProps = useMemo(() => {
-    const boundary = headerOffset ? document.getElementById('app-fixed-viewport') : null;
-    return boundary
-      ? {
-          boundary,
-          boundaryPadding: { top: headerOffset },
-        }
-      : undefined;
-  }, [headerOffset]);
-
+  const boundary = document.getElementById('app-fixed-viewport') ?? undefined;
   const tooltipProps: TooltipProps = tooltip.detailedTooltip
     ? {
         ...tooltip,
-        ...boudaryProps,
+        boundary,
         customTooltip: tooltip.detailedTooltip(headerFormatter),
         headerFormatter: undefined,
       }
-    : { ...tooltip, ...boudaryProps, headerFormatter };
+    : { ...tooltip, boundary, headerFormatter };
 
   return (
     <Settings
diff --git a/src/plugins/vis_type_xy/public/plugin.ts b/src/plugins/vis_type_xy/public/plugin.ts
index 9040df69d22d7..d414da8f6dc97 100644
--- a/src/plugins/vis_type_xy/public/plugin.ts
+++ b/src/plugins/vis_type_xy/public/plugin.ts
@@ -22,7 +22,6 @@ import {
   setDocLinks,
   setPalettesService,
   setTrackUiMetric,
-  setIsVisible,
 } from './services';
 import { visTypesDefinitions } from './vis_types';
 import { LEGACY_CHARTS_LIBRARY } from '../common';
@@ -78,7 +77,6 @@ export class VisTypeXyPlugin
   }
 
   public start(core: CoreStart, { data }: VisTypeXyPluginStartDependencies) {
-    setIsVisible(core.chrome.getIsVisible$());
     setFormatService(data.fieldFormats);
     setDataActions(data.actions);
     setDocLinks(core.docLinks);
diff --git a/src/plugins/vis_type_xy/public/services.ts b/src/plugins/vis_type_xy/public/services.ts
index 44c6cbc8ea041..b5dd6152605dc 100644
--- a/src/plugins/vis_type_xy/public/services.ts
+++ b/src/plugins/vis_type_xy/public/services.ts
@@ -7,15 +7,11 @@
  */
 
 import { UiCounterMetricType } from '@kbn/analytics';
-import { CoreSetup, CoreStart, DocLinksStart } from '../../../core/public';
+import { CoreSetup, DocLinksStart } from '../../../core/public';
 import { createGetterSetter } from '../../kibana_utils/public';
 import { DataPublicPluginStart } from '../../data/public';
 import { ChartsPluginSetup } from '../../charts/public';
 
-export const [getIsVisible, setIsVisible] = createGetterSetter<
-  ReturnType<CoreStart['chrome']['getIsVisible$']>
->('xy core.chrome.getIsVisible');
-
 export const [getUISettings, setUISettings] = createGetterSetter<CoreSetup['uiSettings']>(
   'xy core.uiSettings'
 );
diff --git a/x-pack/plugins/lens/public/pie_visualization/expression.tsx b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
index 8b24fa3806ad6..ee0d6bf07b3c1 100644
--- a/x-pack/plugins/lens/public/pie_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
@@ -116,7 +116,6 @@ export const getPieRenderer = (dependencies: {
   formatFactory: Promise<FormatFactory>;
   chartsThemeService: ChartsPluginSetup['theme'];
   paletteService: PaletteRegistry;
-  chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
 }): ExpressionRenderDefinition<PieExpressionProps> => ({
   name: 'lens_pie_renderer',
   displayName: i18n.translate('xpack.lens.pie.visualizationName', {
@@ -141,7 +140,6 @@ export const getPieRenderer = (dependencies: {
           formatFactory={formatFactory}
           chartsThemeService={dependencies.chartsThemeService}
           paletteService={dependencies.paletteService}
-          chromeIsVisible$={dependencies.chromeIsVisible$}
           onClickValue={onClickValue}
           renderMode={handlers.getRenderMode()}
           syncColors={handlers.isSyncColorsEnabled()}
diff --git a/x-pack/plugins/lens/public/pie_visualization/index.ts b/x-pack/plugins/lens/public/pie_visualization/index.ts
index d44b03394e5cf..9f4a176ef8aa8 100644
--- a/x-pack/plugins/lens/public/pie_visualization/index.ts
+++ b/x-pack/plugins/lens/public/pie_visualization/index.ts
@@ -32,7 +32,6 @@ export class PieVisualization {
     editorFrame.registerVisualization(async () => {
       const { getPieVisualization, pie, getPieRenderer } = await import('../async_services');
       const palettes = await charts.palettes.getPalettes();
-      const [{ chrome }] = await core.getStartServices();
 
       expressions.registerFunction(() => pie);
 
@@ -41,7 +40,6 @@ export class PieVisualization {
           formatFactory,
           chartsThemeService: charts.theme,
           paletteService: palettes,
-          chromeIsVisible$: chrome.getIsVisible$(),
         })
       );
       return getPieVisualization({ paletteService: palettes });
diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
index 6b5a74ae5626f..b6bb2908b9ed2 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -22,7 +22,6 @@ import {
   Position,
   Settings,
   ElementClickListener,
-  TooltipProps,
 } from '@elastic/charts';
 import { RenderMode } from 'src/plugins/expressions';
 import { FormatFactory, LensFilterEvent } from '../types';
@@ -30,7 +29,7 @@ import { VisualizationContainer } from '../visualization_container';
 import { CHART_NAMES, DEFAULT_PERCENT_DECIMALS } from './constants';
 import { PieExpressionProps } from './types';
 import { getSliceValue, getFilterContext } from './render_helpers';
-import { EmptyPlaceholder, KBN_HEADER_OFFSET } from '../shared_components';
+import { EmptyPlaceholder } from '../shared_components';
 import './visualization.scss';
 import { desanitizeFilterContext } from '../utils';
 import {
@@ -39,7 +38,6 @@ import {
   SeriesLayer,
 } from '../../../../../src/plugins/charts/public';
 import { LensIconChartDonut } from '../assets/chart_donut';
-import { CoreStart } from '../../../../../src/core/public';
 
 declare global {
   interface Window {
@@ -57,7 +55,6 @@ export function PieComponent(
     formatFactory: FormatFactory;
     chartsThemeService: ChartsPluginSetup['theme'];
     paletteService: PaletteRegistry;
-    chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
     onClickValue: (data: LensFilterEvent['data']) => void;
     renderMode: RenderMode;
     syncColors: boolean;
@@ -214,7 +211,6 @@ export function PieComponent(
     },
   });
 
-  const [headerOffset, setHeaderOffset] = useState(0);
   const [state, setState] = useState({ isReady: false });
   // It takes a cycle for the chart to render. This prevents
   // reporting from printing a blank chart placeholder.
@@ -222,13 +218,6 @@ export function PieComponent(
     setState({ isReady: true });
   }, []);
 
-  useEffect(() => {
-    const subscription = props.chromeIsVisible$.subscribe((value: boolean) => {
-      setHeaderOffset(value ? KBN_HEADER_OFFSET : 0);
-    });
-    return () => subscription.unsubscribe();
-  }, [props.chromeIsVisible$]);
-
   const hasNegative = firstTable.rows.some((row) => {
     const value = row[metricColumn.id];
     return typeof value === 'number' && value < 0;
@@ -263,14 +252,6 @@ export function PieComponent(
     onClickValue(desanitizeFilterContext(context));
   };
 
-  const boundary = headerOffset ? document.getElementById('app-fixed-viewport') : null;
-  const tooltipProps: TooltipProps | undefined = boundary
-    ? {
-        boundary,
-        boundaryPadding: { top: headerOffset },
-      }
-    : undefined;
-
   return (
     <VisualizationContainer
       reportTitle={props.args.title}
@@ -280,7 +261,7 @@ export function PieComponent(
     >
       <Chart>
         <Settings
-          tooltip={tooltipProps}
+          tooltip={{ boundary: document.getElementById('app-fixed-viewport') ?? undefined }}
           debugState={window._echDebugStateFlag ?? false}
           // Legend is hidden in many scenarios
           // - Tiny preview
diff --git a/x-pack/plugins/lens/public/shared_components/index.ts b/x-pack/plugins/lens/public/shared_components/index.ts
index 7c6d5d01c6456..c65dab7383b2d 100644
--- a/x-pack/plugins/lens/public/shared_components/index.ts
+++ b/x-pack/plugins/lens/public/shared_components/index.ts
@@ -10,5 +10,3 @@ export { ToolbarPopoverProps, ToolbarPopover } from './toolbar_popover';
 export { LegendSettingsPopover } from './legend_settings_popover';
 export { PalettePicker } from './palette_picker';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-
-export const KBN_HEADER_OFFSET = parseFloat(euiLightVars.euiHeaderHeightCompensation) * 2;
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index 7cdc0d3e593b3..d46f2bd65d5b5 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -56,7 +56,7 @@ import {
   PaletteRegistry,
   SeriesLayer,
 } from '../../../../../src/plugins/charts/public';
-import { EmptyPlaceholder, KBN_HEADER_OFFSET } from '../shared_components';
+import { EmptyPlaceholder } from '../shared_components';
 import { desanitizeFilterContext } from '../utils';
 import { fittingFunctionDefinitions, getFitOptions } from './fitting_functions';
 import { getAxesConfiguration } from './axes_configuration';
@@ -91,7 +91,6 @@ export interface XYRender {
 export type XYChartRenderProps = XYChartProps & {
   chartsThemeService: ChartsPluginSetup['theme'];
   paletteService: PaletteRegistry;
-  chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
   formatFactory: FormatFactory;
   timeZone: string;
   minInterval: number | undefined;
@@ -226,7 +225,6 @@ export const getXyChartRenderer = (dependencies: {
   formatFactory: Promise<FormatFactory>;
   chartsThemeService: ChartsPluginSetup['theme'];
   paletteService: PaletteRegistry;
-  chromeIsVisible$: ReturnType<CoreStart['chrome']['getIsVisible$']>;
   getIntervalByColumn: DataPublicPluginStart['search']['aggs']['getDateMetaByDatatableColumn'];
   timeZone: string;
 }): ExpressionRenderDefinition<XYChartProps> => ({
@@ -256,7 +254,6 @@ export const getXyChartRenderer = (dependencies: {
           {...config}
           formatFactory={formatFactory}
           chartsThemeService={dependencies.chartsThemeService}
-          chromeIsVisible$={dependencies.chromeIsVisible$}
           paletteService={dependencies.paletteService}
           timeZone={dependencies.timeZone}
           minInterval={await calculateMinInterval(config, dependencies.getIntervalByColumn)}
@@ -329,7 +326,6 @@ export function XYChart({
   timeZone,
   chartsThemeService,
   paletteService,
-  chromeIsVisible$,
   minInterval,
   onClickValue,
   onSelectRange,
@@ -339,15 +335,6 @@ export function XYChart({
   const { legend, layers, fittingFunction, gridlinesVisibilitySettings, valueLabels } = args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
-  const [headerOffset, setHeaderOffset] = useState(0);
-
-  useEffect(() => {
-    const subscription = chromeIsVisible$.subscribe((value: boolean) => {
-      setHeaderOffset(value ? KBN_HEADER_OFFSET : 0);
-    });
-    return () => subscription.unsubscribe();
-  }, [chromeIsVisible$]);
-
   const filteredLayers = getFilteredLayers(layers, data);
 
   if (filteredLayers.length === 0) {
@@ -538,15 +525,6 @@ export function XYChart({
     onSelectRange(context);
   };
 
-  const boundary = headerOffset ? document.getElementById('app-fixed-viewport') : null;
-  const tooltipProps: TooltipProps = {
-    ...(boundary && {
-      boundary,
-      boundaryPadding: { top: headerOffset },
-    }),
-    headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
-  };
-
   return (
     <Chart>
       <Settings
@@ -569,7 +547,10 @@ export function XYChart({
           },
         }}
         baseTheme={chartBaseTheme}
-        tooltip={tooltipProps}
+        tooltip={{
+          boundary: document.getElementById('app-fixed-viewport') ?? undefined,
+          headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
+        }}
         rotation={shouldRotate ? 90 : 0}
         xDomain={xDomain}
         onBrushEnd={renderMode !== 'noInteractivity' ? brushHandler : undefined}
diff --git a/x-pack/plugins/lens/public/xy_visualization/index.ts b/x-pack/plugins/lens/public/xy_visualization/index.ts
index b141b6480e9eb..63921acfbb2be 100644
--- a/x-pack/plugins/lens/public/xy_visualization/index.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/index.ts
@@ -5,12 +5,14 @@
  * 2.0.
  */
 
+import React from 'react';
 import { CoreSetup, IUiSettingsClient } from 'kibana/public';
 import moment from 'moment-timezone';
 import { ExpressionsSetup } from '../../../../../src/plugins/expressions/public';
 import { EditorFrameSetup, FormatFactory } from '../types';
 import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 import { LensPluginStartDependencies } from '../plugin';
+import { toMountPoint } from '../../../../../src/plugins/kibana_react/public';
 
 export interface XyVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
@@ -47,7 +49,7 @@ export class XyVisualization {
         getXyChartRenderer,
         getXyVisualization,
       } = await import('../async_services');
-      const [{ chrome }, { data }] = await core.getStartServices();
+      const [, { data }] = await core.getStartServices();
       const palettes = await charts.palettes.getPalettes();
       expressions.registerFunction(() => legendConfig);
       expressions.registerFunction(() => yAxisConfig);
@@ -62,7 +64,6 @@ export class XyVisualization {
           formatFactory,
           chartsThemeService: charts.theme,
           paletteService: palettes,
-          chromeIsVisible$: chrome.getIsVisible$(),
           timeZone: getTimeZone(core.uiSettings),
           getIntervalByColumn: data.search.aggs.getDateMetaByDatatableColumn,
         })

From b5af65c6f3cf28cf53878fffbad0e0a7e2f6bb57 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Thu, 11 Mar 2021 11:46:03 -0600
Subject: [PATCH 08/10] remove unused vars

---
 x-pack/plugins/lens/public/pie_visualization/expression.tsx    | 1 -
 x-pack/plugins/lens/public/shared_components/index.ts          | 1 -
 .../plugins/lens/public/xy_visualization/expression.test.tsx   | 3 ---
 x-pack/plugins/lens/public/xy_visualization/expression.tsx     | 2 --
 x-pack/plugins/lens/public/xy_visualization/index.ts           | 2 --
 5 files changed, 9 deletions(-)

diff --git a/x-pack/plugins/lens/public/pie_visualization/expression.tsx b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
index ee0d6bf07b3c1..208ce746f4b9d 100644
--- a/x-pack/plugins/lens/public/pie_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
@@ -19,7 +19,6 @@ import { LensMultiTable, FormatFactory, LensFilterEvent } from '../types';
 import { PieExpressionProps, PieExpressionArgs } from './types';
 import { PieComponent } from './render_function';
 import { ChartsPluginSetup, PaletteRegistry } from '../../../../../src/plugins/charts/public';
-import { CoreStart } from '../../../../../src/core/public';
 
 export interface PieRender {
   type: 'render';
diff --git a/x-pack/plugins/lens/public/shared_components/index.ts b/x-pack/plugins/lens/public/shared_components/index.ts
index c65dab7383b2d..482571696a4d3 100644
--- a/x-pack/plugins/lens/public/shared_components/index.ts
+++ b/x-pack/plugins/lens/public/shared_components/index.ts
@@ -9,4 +9,3 @@ export * from './empty_placeholder';
 export { ToolbarPopoverProps, ToolbarPopover } from './toolbar_popover';
 export { LegendSettingsPopover } from './legend_settings_popover';
 export { PalettePicker } from './palette_picker';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
index 7487ce9c4b257..c3ce391f4469d 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx
@@ -40,7 +40,6 @@ import {
   tickLabelsConfig,
   gridlinesConfig,
 } from './types';
-import { coreMock } from '../../../../../src/core/public/mocks';
 import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
 import { mountWithIntl } from '@kbn/test/jest';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
@@ -49,7 +48,6 @@ import { EmptyPlaceholder } from '../shared_components/empty_placeholder';
 const onClickValue = jest.fn();
 const onSelectRange = jest.fn();
 
-const chromeIsVisible$ = coreMock.createStart().chrome.getIsVisible$();
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
 const paletteService = chartPluginMock.createPaletteRegistry();
 
@@ -445,7 +443,6 @@ describe('xy_expression', () => {
         renderMode: 'display',
         chartsThemeService,
         paletteService,
-        chromeIsVisible$,
         minInterval: 50,
         onClickValue,
         onSelectRange,
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index d46f2bd65d5b5..c2e6239763ab6 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -24,7 +24,6 @@ import {
   HorizontalAlignment,
   ElementClickListener,
   BrushEndListener,
-  TooltipProps,
 } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
@@ -61,7 +60,6 @@ import { desanitizeFilterContext } from '../utils';
 import { fittingFunctionDefinitions, getFitOptions } from './fitting_functions';
 import { getAxesConfiguration } from './axes_configuration';
 import { getColorAssignments } from './color_assignment';
-import { CoreStart } from '../../../../../src/core/public';
 
 declare global {
   interface Window {
diff --git a/x-pack/plugins/lens/public/xy_visualization/index.ts b/x-pack/plugins/lens/public/xy_visualization/index.ts
index 63921acfbb2be..1ca0bbb3f2da9 100644
--- a/x-pack/plugins/lens/public/xy_visualization/index.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/index.ts
@@ -5,14 +5,12 @@
  * 2.0.
  */
 
-import React from 'react';
 import { CoreSetup, IUiSettingsClient } from 'kibana/public';
 import moment from 'moment-timezone';
 import { ExpressionsSetup } from '../../../../../src/plugins/expressions/public';
 import { EditorFrameSetup, FormatFactory } from '../types';
 import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 import { LensPluginStartDependencies } from '../plugin';
-import { toMountPoint } from '../../../../../src/plugins/kibana_react/public';
 
 export interface XyVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;

From 736c8df34466074936c9855413a0bc80e343bab2 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Thu, 11 Mar 2021 11:47:11 -0600
Subject: [PATCH 09/10] remove unused vars

---
 .../lens/public/pie_visualization/render_function.test.tsx     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx
index e842bd6758b9e..e18878ea064ef 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx
@@ -20,10 +20,8 @@ import { PieComponent } from './render_function';
 import { PieExpressionArgs } from './types';
 import { EmptyPlaceholder } from '../shared_components';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
-import { coreMock } from '../../../../../src/core/public/mocks';
 import { LensIconChartDonut } from '../assets/chart_donut';
 
-const chromeIsVisible$ = coreMock.createStart().chrome.getIsVisible$();
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
 
 describe('PieVisualization component', () => {
@@ -75,7 +73,6 @@ describe('PieVisualization component', () => {
         onClickValue: jest.fn(),
         chartsThemeService,
         paletteService: chartPluginMock.createPaletteRegistry(),
-        chromeIsVisible$,
         renderMode: 'display' as const,
         syncColors: false,
       };

From 1e0eb4a1c0bce6d75a5bc7b066d19356258be617 Mon Sep 17 00:00:00 2001
From: nickofthyme <nick.ryan.partridge@gmail.com>
Date: Thu, 11 Mar 2021 12:57:55 -0600
Subject: [PATCH 10/10] fix unit tests

---
 .../__snapshots__/expression.test.tsx.snap                 | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
index a2047b7bae669..cb82cc5b52a01 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
     }
     tooltip={
       Object {
+        "boundary": undefined,
         "headerFormatter": [Function],
       }
     }
@@ -219,6 +220,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
     }
     tooltip={
       Object {
+        "boundary": undefined,
         "headerFormatter": [Function],
       }
     }
@@ -423,6 +425,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
     }
     tooltip={
       Object {
+        "boundary": undefined,
         "headerFormatter": [Function],
       }
     }
@@ -627,6 +630,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
     }
     tooltip={
       Object {
+        "boundary": undefined,
         "headerFormatter": [Function],
       }
     }
@@ -823,6 +827,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
     }
     tooltip={
       Object {
+        "boundary": undefined,
         "headerFormatter": [Function],
       }
     }
@@ -1027,6 +1032,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
     }
     tooltip={
       Object {
+        "boundary": undefined,
         "headerFormatter": [Function],
       }
     }
@@ -1239,6 +1245,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
     }
     tooltip={
       Object {
+        "boundary": undefined,
         "headerFormatter": [Function],
       }
     }