fix(interaction): remove unnecessary elements (#1131)

Remove DOM element when not needed. fix #1074
elastic · Apr 23, 2021 · 411042f · 411042f
1 parent 42bac1b
commit 411042f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 25 deletions.
diff --git a/src/chart_types/xy_chart/renderer/dom/_crosshair.scss b/src/chart_types/xy_chart/renderer/dom/_crosshair.scss
@@ -2,5 +2,7 @@
 .echCrosshair__cursor,
 .echCrosshair__crossLine {
   position: absolute;
+  top: 0;
+  left: 0;
   pointer-events: none;
 }
diff --git a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx b/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
@@ -57,6 +57,7 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
 
   renderCursor() {
     const {
+      zIndex,
       theme: {
         crosshair: { band, line },
       },
@@ -72,15 +73,34 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
       const { x1, x2, y1, y2 } = cursorPosition;
       const { strokeWidth, stroke, dash } = line;
       const strokeDasharray = (dash ?? []).join(' ');
-      return <line {...{ x1, x2, y1, y2, strokeWidth, stroke, strokeDasharray }} />;
+      return (
+        <svg
+          className="echCrosshair__cursor"
+          width="100%"
+          height="100%"
+          style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
+        >
+          <line {...{ x1, x2, y1, y2, strokeWidth, stroke, strokeDasharray }} />
+        </svg>
+      );
     }
     const { x, y, width, height } = cursorPosition;
     const { fill } = band;
-    return <rect {...{ x, y, width, height, fill }} />;
+    return (
+      <svg
+        className="echCrosshair__cursor"
+        width="100%"
+        height="100%"
+        style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
+      >
+        <rect {...{ x, y, width, height, fill }} />;
+      </svg>
+    );
   }
 
   renderCrossLine() {
     const {
+      zIndex,
       theme: {
         crosshair: { crossLine },
       },
@@ -99,25 +119,18 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
       strokeDasharray: (dash ?? []).join(' '),
     };
 
-    return <line {...cursorCrossLinePosition} {...style} />;
+    return (
+      <svg className="echCrosshair__crossLine" width="100%" height="100%" style={{ zIndex }}>
+        <line {...cursorCrossLinePosition} {...style} />
+      </svg>
+    );
   }
 
   render() {
-    const { zIndex, cursorPosition } = this.props;
     return (
       <>
-        <svg
-          className="echCrosshair__cursor"
-          width="100%"
-          height="100%"
-          style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
-        >
-          {this.renderCursor()}
-        </svg>
-
-        <svg className="echCrosshair__crossLine" width="100%" height="100%" style={{ zIndex }}>
-          {this.renderCrossLine()}
-        </svg>
+        {this.renderCursor()}
+        {this.renderCrossLine()}
       </>
     );
   }

diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
@@ -66,10 +66,7 @@ exports[`Chart should render the legend name test 1`] = `
             <ChartContainer getChartContainerRef={[Function (anonymous)]} forwardStageRef={{...}} status=\\"Initialized\\" initialized={true} isChartEmpty={false} pointerCursor=\\"default\\" isBrushingAvailable={false} isBrushing={false} internalChartRenderer={[Function (anonymous)]} settings={{...}} onPointerMove={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onKeyPress={[Function (anonymous)]}>
               <div className=\\"echChartPointerContainer\\" style={{...}} onMouseMove={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseUp={[Function (anonymous)]}>
                 <Connect(Crosshair)>
-                  <Crosshair theme={{...}} chartRotation={0} cursorPosition={[undefined]} cursorCrossLinePosition={[undefined]} tooltipType=\\"vertical\\" fromExternalEvent={[undefined]} zIndex={0} dispatch={[Function: dispatch]}>
-                    <svg className=\\"echCrosshair__cursor\\" width=\\"100%\\" height=\\"100%\\" style={{...}} />
-                    <svg className=\\"echCrosshair__crossLine\\" width=\\"100%\\" height=\\"100%\\" style={{...}} />
-                  </Crosshair>
+                  <Crosshair theme={{...}} chartRotation={0} cursorPosition={[undefined]} cursorCrossLinePosition={[undefined]} tooltipType=\\"vertical\\" fromExternalEvent={[undefined]} zIndex={0} dispatch={[Function: dispatch]} />
                 </Connect(Crosshair)>
                 <Connect(XYChart) forwardStageRef={{...}}>
                   <XYChart forwardStageRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} seriesTypes={{...}} a11ySettings={{...}} onChartRendered={[Function (anonymous)]}>
@@ -92,11 +89,7 @@ exports[`Chart should render the legend name test 1`] = `
                   </XYChart>
                 </Connect(XYChart)>
                 <Connect(Tooltip) getChartContainerRef={[Function (anonymous)]}>
-                  <Tooltip getChartContainerRef={[Function (anonymous)]} visible={false} zIndex={0} info={{...}} position={{...}} headerFormatter={[undefined]} settings={{...}} rotation={0} chartId=\\"chart1\\" backgroundColor=\\"transparent\\" onPointerMove={[Function (anonymous)]}>
-                    <TooltipPortal scope=\\"MainTooltip\\" zIndex={100} anchor={{...}} settings={{...}} chartId=\\"chart1\\" visible={false}>
-                      <Portal containerInfo={{...}} />
-                    </TooltipPortal>
-                  </Tooltip>
+                  <Tooltip getChartContainerRef={[Function (anonymous)]} visible={false} zIndex={0} info={{...}} position={{...}} headerFormatter={[undefined]} settings={{...}} rotation={0} chartId=\\"chart1\\" backgroundColor=\\"transparent\\" onPointerMove={[Function (anonymous)]} />
                 </Connect(Tooltip)>
                 <Connect(Annotations) getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}}>
                   <Annotations getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}} isChartEmpty={false} chartDimensions={{...}} annotationDimensions={{...}} annotationSpecs={{...}} tooltipState={{...}} chartId=\\"chart1\\" zIndex={0} onPointerMove={[Function (anonymous)]} onDOMElementLeave={[Function (anonymous)]} onDOMElementEnter={[Function (anonymous)]}>

diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -204,6 +204,9 @@ const TooltipComponent = ({
     };
   }, [settings, chartRef, rotation]);
 
+  if (!visible) {
+    return null;
+  }
   return (
     <TooltipPortal
       scope="MainTooltip"