refactor: improve tooltip postioning logic

elastic · Apr 27, 2020 · f574e6d · f574e6d
1 parent 0140bd2
commit f574e6d
Show file tree

Hide file tree

Showing 21 changed files with 309 additions and 170 deletions.
diff --git a/.playground/index.html b/.playground/index.html
@@ -38,13 +38,18 @@
       .testing {
         background: aquamarine;
         position: relative;
-        width: 100vw;
+        width: 100%;
         overflow: auto;
       }
+      .page {
+        padding: 100px;
+      }
     </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div class="page">
+      <div id="root"></div>
+    </div>
     <script src="bundle.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -29,6 +29,11 @@ export class Playground extends React.Component {
     return (
       <div className="testing">
         <div className="chart">{example()}</div>
+        <div className="chart">{example()}</div>
+        <div className="chart">{example()}</div>
+        <div className="chart">{example()}</div>
+        <div className="chart">{example()}</div>
+        <div className="chart">{example()}</div>
       </div>
     );
   }

diff --git a/package.json b/package.json
@@ -165,6 +165,7 @@
     "webpack-dev-server": "^3.3.1"
   },
   "dependencies": {
+    "@popperjs/core": "^2.3.3",
     "classnames": "^2.2.6",
     "d3-array": "^1.2.4",
     "d3-collection": "^1.0.7",

diff --git a/src/chart_types/partition_chart/renderer/dom/highlighter.tsx b/src/chart_types/partition_chart/renderer/dom/highlighter.tsx
@@ -22,6 +22,7 @@ import { TAU } from '../../layout/utils/math';
 import { PointObject } from '../../layout/types/geometry_types';
 import { PartitionLayout } from '../../layout/types/config_types';
 import { Dimensions } from '../../../../utils/dimensions';
+import { HIGHLIGHT_PATH_SELECTOR } from '../../../xy_chart/state/selectors/get_tooltip_values_highlighted_geoms';
 
 /** @internal */
 export interface HighlighterProps {
@@ -162,7 +163,7 @@ export class HighlighterComponent extends React.Component<HighlighterProps> {
   renderAsOverlay() {
     const { geometries, diskCenter, partitionLayout } = this.props;
     return (
-      <g transform={`translate(${diskCenter.x}, ${diskCenter.y})`}>
+      <g id={HIGHLIGHT_PATH_SELECTOR} transform={`translate(${diskCenter.x}, ${diskCenter.y})`}>
         {renderGeometries(geometries, partitionLayout, {
           fillClassName: 'echHighlighterOverlay__fill',
           strokeClassName: 'echHighlighterOverlay__stroke',

diff --git a/src/chart_types/xy_chart/crosshair/crosshair_utils.ts b/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
@@ -21,7 +21,7 @@ import { Dimensions } from '../../../utils/dimensions';
 import { Scale } from '../../../scales';
 import { isHorizontalRotation, isVerticalRotation } from '../state/utils';
 import { Point } from '../../../utils/point';
-import { TooltipAnchorPosition } from '../../../components/tooltip/utils';
+import { TooltipAnchorPosition } from '../../../components/tooltip/types';
 
 export interface SnappedPosition {
   position: number;
@@ -204,15 +204,16 @@ function getHorizontalTooltipPosition(
   chartDimensions: Dimensions,
   isRotated: boolean,
   isSingleValueXScale: boolean,
-): { x0: number; x1: number } {
+): { x0?: number; x1: number } {
   if (!isRotated) {
     return {
       x0: cursorBandPosition.left,
       x1: cursorBandPosition.left + (isSingleValueXScale ? 0 : cursorBandPosition.width),
     };
   }
   return {
-    x0: 0,
+    // NOTE: x0 set to zero blocks tooltip placement on left when rotated 90 deg
+    // Delete this comment before merging and verifing this doesn't break anything.
     x1: chartDimensions.left + cursorXPosition,
   };
 }

diff --git a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx b/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
@@ -126,7 +126,7 @@ const mapStateToProps = (state: GlobalChartState): CrosshairProps => {
     chartRotation: getChartRotationSelector(state),
     cursorBandPosition: getCursorBandPositionSelector(state),
     cursorLinePosition: getCursorLinePositionSelector(state),
-    tooltipType: getTooltipTypeSelector(state) || TooltipType.VerticalCursor,
+    tooltipType: getTooltipTypeSelector(state),
   };
 };
 

diff --git a/src/chart_types/xy_chart/renderer/dom/highlighter.tsx b/src/chart_types/xy_chart/renderer/dom/highlighter.tsx
@@ -22,7 +22,10 @@ import { isPointGeometry, IndexedGeometry } from '../../../../utils/geometry';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { isInitialized } from '../../../../state/selectors/is_initialized';
 import { computeChartTransformSelector } from '../../state/selectors/compute_chart_transform';
-import { getHighlightedGeomsSelector } from '../../state/selectors/get_tooltip_values_highlighted_geoms';
+import {
+  getHighlightedGeomsSelector,
+  HIGHLIGHT_PATH_SELECTOR,
+} from '../../state/selectors/get_tooltip_values_highlighted_geoms';
 import { Dimensions } from '../../../../utils/dimensions';
 import { Rotation } from '../../../../utils/commons';
 import { Transform } from '../../state/utils';
@@ -56,7 +59,7 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
             <rect x="0" y="0" width={clipWidth} height={clipHeight} />
           </clipPath>
         </defs>
-        <g transform={`translate(${left}, ${top}) rotate(${chartRotation})`}>
+        <g id={HIGHLIGHT_PATH_SELECTOR} transform={`translate(${left}, ${top}) rotate(${chartRotation})`}>
           {highlightedGeometries.map((geom, i) => {
             const { color, x, y } = geom;
             if (isPointGeometry(geom)) {

diff --git a/src/chart_types/xy_chart/state/selectors/get_tooltip_position.ts b/src/chart_types/xy_chart/state/selectors/get_tooltip_position.ts
@@ -24,7 +24,7 @@ import { getComputedScalesSelector } from './get_computed_scales';
 import { getCursorBandPositionSelector } from './get_cursor_band';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
-import { TooltipAnchorPosition } from '../../../../components/tooltip/utils';
+import { TooltipAnchorPosition } from '../../../../components/tooltip/types';
 
 /** @internal */
 export const getTooltipAnchorPositionSelector = createCachedSelector(

diff --git a/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts b/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts
@@ -56,6 +56,13 @@ const EMPTY_VALUES = Object.freeze({
   highlightedGeometries: [],
 });
 
+/**
+ * Selector path for highlighter overlay
+ *
+ * Used to position tooltip
+ */
+export const HIGHLIGHT_PATH_SELECTOR = 'echHighlighter__selectedElement';
+
 /** @internal */
 export interface TooltipAndHighlightedGeoms {
   tooltip: TooltipInfo;
@@ -95,7 +102,7 @@ function getTooltipAndHighlightFromValue(
   hasSingleSeries: boolean,
   scales: ComputedScales,
   matchingGeoms: IndexedGeometry[],
-  tooltipType: TooltipType = TooltipType.VerticalCursor,
+  tooltipType: TooltipType,
   externalPointerEvent: PointerEvent | null,
   tooltipHeaderFormatter?: TooltipValueFormatter,
 ): TooltipAndHighlightedGeoms {

diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
@@ -1,12 +1,19 @@
 #echTooltipContainerPortal {
   position: absolute;
-  background-color: red;
   height: 20px;
   pointer-events: none;
   z-index: 10000000;
 }
+
+#echTooltipAnchor {
+  background-color: blue;
+  position: absolute;
+  min-width: 5px;
+  min-height: 5px;
+  pointer-events: none;
+}
+
 .echTooltip {
-  opacity: 0.2;
   position: absolute;
   @include euiToolTipStyle;
   @include euiFontSizeXS;
@@ -15,6 +22,7 @@
   pointer-events: none;
   user-select: none;
   margin-bottom: $euiSizeXS;
+  max-width: 256px;
 
   &__list {
     padding: $euiSizeXS;

diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -71,5 +71,4 @@ const TooltipComponent = forwardRef<HTMLDivElement, TooltipProps>(({ info, heade
   );
 });
 
-/** @internal */
 export const Tooltip = memo(TooltipComponent);
-Original file line number
+Diff line change
@@ Expand Up @@
       );
     });
-    /** @internal */
     export const Tooltip = memo(TooltipComponent);