From 6950800b5baf32d003e21e8b432c7f049dc9293e Mon Sep 17 00:00:00 2001
From: Nick Partridge <nick.ryan.partridge@gmail.com>
Date: Mon, 5 Apr 2021 18:02:13 -0500
Subject: [PATCH] [Dashboard] Fix Lens and TSVB chart tooltip positioning
 relative to global headers (#94247)

---
 src/core/public/rendering/_base.scss               | 14 ++++++++++++++
 src/core/public/rendering/rendering_service.tsx    |  1 +
 .../visualizations/views/timeseries/index.js       |  1 +
 .../vis_type_xy/public/components/xy_settings.tsx  |  4 +++-
 .../public/pie_visualization/render_function.tsx   |  2 ++
 .../__snapshots__/expression.test.tsx.snap         |  7 +++++++
 .../lens/public/xy_visualization/expression.tsx    |  2 +-
 7 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
index de13785a17f5b..ed2d9bc0b3917 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;
@@ -35,6 +45,10 @@
 @mixin kbnAffordForHeader($headerHeight) {
   padding-top: $headerHeight;
 
+  #app-fixed-viewport {
+    top: $headerHeight;
+  }
+
   .euiFlyout,
   .euiCollapsibleNav {
     top: $headerHeight;
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>
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 c973b7b89893c..f9a52a9450dcb 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
@@ -149,6 +149,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 59bed0060a6a6..8922f512522a0 100644
--- a/src/plugins/vis_type_xy/public/components/xy_settings.tsx
+++ b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -148,13 +148,15 @@ export const XYSettings: FC<XYSettingsProps> = ({
       : headerValueFormatter &&
         (tooltip.detailedTooltip ? undefined : ({ value }: any) => headerValueFormatter(value));
 
+  const boundary = document.getElementById('app-fixed-viewport') ?? undefined;
   const tooltipProps: TooltipProps = tooltip.detailedTooltip
     ? {
         ...tooltip,
+        boundary,
         customTooltip: tooltip.detailedTooltip(headerFormatter),
         headerFormatter: undefined,
       }
-    : { ...tooltip, headerFormatter };
+    : { ...tooltip, boundary, 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..b6bb2908b9ed2 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -251,6 +251,7 @@ export function PieComponent(
 
     onClickValue(desanitizeFilterContext(context));
   };
+
   return (
     <VisualizationContainer
       reportTitle={props.args.title}
@@ -260,6 +261,7 @@ export function PieComponent(
     >
       <Chart>
         <Settings
+          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/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],
       }
     }
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index d90d092b65c57..a78d86b3f864c 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -333,7 +333,6 @@ export function XYChart({
   const { legend, layers, fittingFunction, gridlinesVisibilitySettings, valueLabels } = args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
-
   const filteredLayers = getFilteredLayers(layers, data);
 
   if (filteredLayers.length === 0) {
@@ -547,6 +546,7 @@ export function XYChart({
         }}
         baseTheme={chartBaseTheme}
         tooltip={{
+          boundary: document.getElementById('app-fixed-viewport') ?? undefined,
           headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
         }}
         rotation={shouldRotate ? 90 : 0}