feat: tooltips reposition to fit

malloydata · Nov 14, 2024 · 9542a5d · 9542a5d
1 parent d735619
commit 9542a5d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/packages/malloy-render/src/component/chart/chart.tsx b/packages/malloy-render/src/component/chart/chart.tsx
@@ -9,7 +9,7 @@ import {Explore, ExploreField, QueryData} from '@malloydata/malloy';
 import {VegaChart, ViewInterface} from '../vega/vega-chart';
 import {ChartTooltipEntry, RenderResultMetadata} from '../types';
 import {Tooltip} from '../tooltip/tooltip';
-import {createEffect, createSignal, lazy, Show} from 'solid-js';
+import {createEffect, createSignal, createMemo, lazy, Show} from 'solid-js';
 import {DefaultChartTooltip} from './default-chart-tooltip';
 import {EventListenerHandler, Runtime, View} from 'vega';
 import {useResultStore, VegaBrushOutput} from '../result-store/result-store';
@@ -183,6 +183,8 @@ export function Chart(props: ChartProps) {
     setShowDebugModal(true);
   };
 
+  const showTooltip = createMemo(() => Boolean(tooltipData()));
+
   return (
     <div
       class="malloy-chart"
@@ -204,7 +206,7 @@ export function Chart(props: ChartProps) {
         explore={props.field}
         runtime={runtime}
       />
-      <Tooltip show={Boolean(tooltipData())}>
+      <Tooltip show={showTooltip()}>
         <DefaultChartTooltip data={tooltipData()!} />
       </Tooltip>
       <Show when={IS_STORYBOOK && !props.devMode}>

diff --git a/packages/malloy-render/src/component/tooltip/tooltip.tsx b/packages/malloy-render/src/component/tooltip/tooltip.tsx
@@ -3,25 +3,16 @@ import {
   createSignal,
   JSXElement,
   onCleanup,
-  onMount,
   Show,
 } from 'solid-js';
 import tooltipCss from './tooltip.css?raw';
 import {useConfig} from '../render';
 
-function isElementOverflowing(element) {
-  const rect = element.getBoundingClientRect();
-  console.log({rect, globalThis});
-  return (
-    rect.top < 0 ||
-    rect.left < 0 ||
-    rect.bottom > globalThis.innerHeight ||
-    rect.right > globalThis.innerWidth
-  );
-}
-
 export function Tooltip(props: {show: boolean; children: JSXElement}) {
-  const [pos, setPos] = createSignal([0, 0]);
+  const [pos, setPos] = createSignal<[number, number]>([0, 0]);
+  const [xOffset, setXOffset] = createSignal(0);
+  const [yOffset, setYOffset] = createSignal(0);
+
   const handler = evt => {
     if (props.show) {
       setPos([evt.clientX, evt.clientY]);
@@ -39,21 +30,43 @@ export function Tooltip(props: {show: boolean; children: JSXElement}) {
   let tip;
 
   createEffect(() => {
-    if (props.show) {
-      console.log(tip, isElementOverflowing(tip));
+    if (pos() && tip) {
+      let frame: number | null = null;
+      frame = requestAnimationFrame(() => {
+        if (frame) cancelAnimationFrame(frame);
+        const threshold = 16;
+        const rightBorder = pos()[0] + tip.clientWidth + threshold;
+        const leftBorder = pos()[0];
+        const topBorder = pos()[1];
+        const bottomBorder = pos()[1] + tip.clientHeight + threshold;
+
+        const overflowX = Math.min(0, globalThis.innerWidth - rightBorder);
+        const overflowY = Math.min(0, globalThis.innerHeight - bottomBorder);
+
+        // Don't allow overflow past left edge when re-positioning tooltip
+        if (leftBorder - overflowX < 0) setXOffset(0);
+        else setXOffset(overflowX);
+
+        const isOverflowingY = overflowY < 0;
+        // Check new position if moving to top
+        const topPosition = topBorder - tip.clientHeight - threshold;
+        // Don't allow overflow past top edge when re-positioning tooltip
+        if (isOverflowingY && topPosition >= threshold)
+          setYOffset(-tip.clientHeight - threshold);
+        else setYOffset(0);
+      });
     }
   });
 
   return (
     <Show when={props.show}>
       <div
-        style={`position: fixed; top: ${pos()[1]}px; left: ${
-          pos()[0]
-        }px; width: 0px; height: 0px; pointer-events: none; z-index: 1000`}
+        ref={tip}
+        style={`position: fixed; top: ${pos()[1] + yOffset()}px; left: ${
+          pos()[0] + xOffset()
+        }px; pointer-events: none; z-index: 1000`}
       >
-        <div ref={tip} class="malloy-tooltip">
-          {props.children}
-        </div>
+        <div class="malloy-tooltip">{props.children}</div>
       </div>
     </Show>
   );