@pluot/react 0.1.12 → 0.1.14

package/dist-tsc/Pluot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pluot.d.ts","sourceRoot":"","sources":["../src/Pluot.jsx"],"names":[],"mappings":"AA+CA,uCAoaC"}
+{"version":3,"file":"Pluot.d.ts","sourceRoot":"","sources":["../src/Pluot.jsx"],"names":[],"mappings":"AAuDA,uCA8gBC"}

package/dist-tsc/Pluot.js

@@ -3,6 +3,7 @@ import React, { useLayoutEffect, useEffect, useEffectEvent, useRef, useState, us
 import lzs from "lz-string";
 import { isEqual, throttle } from "lodash-es";
 import { initialize, getIsWasmReady, render_wasm, pick_wasm, normalizeStores, getStore, getBounds, getCameraMatrixFromBounds, checkWebGpuFeatureDetection, onMouseMove2d, onWheel2d, onMouseMove3d, onWheel3d, } from '@pluot/core';
+import { Tooltip } from "./Tooltip.js";
 // Needed due to "SyntaxError: Named export 'decompressFromUint8Array' not found.
 // The requested module 'lz-string' is a CommonJS module,
 // which may not support all module.exports as named exports."
@@ -19,6 +20,11 @@ const DEFAULT_3D_VIEW = new Float32Array([
     0, 0, 1, 0,
     0, 0, -10, 1,
 ]);
+const identity = (param) => param;
+const noop = () => { };
+// Mouse movement (in pixels) beyond which a mousedown-to-click is
+// considered a drag rather than a click, so that picking is skipped.
+const DRAG_THRESHOLD_PX = 3;
 function normalizePickingResult(data) {
     const result = data;
     if (data && Array.isArray(result.layer_results)) {
@@ -32,10 +38,12 @@ function normalizePickingResult(data) {
     return result;
 }
 export function Pluot(props) {
-    const { schemaVersion = null, width: widthProp, height: heightProp, plotId, plotType, store: storeProp, storeName: storeNameProp, stores: storesProp, plotParams, viewMode = "2d", marginBottom = 100.0, marginLeft = 100.0, marginTop = 100.0, marginRight = 100.0, aspectRatioMode = "Contain", // "Ignore", "Contain", "Cover"
+    const { schemaVersion = null, width: widthProp, height: heightProp, plotId, plotType, store: storeProp, storeName: storeNameProp, stores: storesProp, registerStores = true, plotParams, viewMode = "2d", marginBottom = 100.0, marginLeft = 100.0, marginTop = 100.0, marginRight = 100.0, aspectRatioMode = "Contain", // "Ignore", "Contain", "Cover"
     aspectRatioAlignmentMode = "Start", // "Center", "Start", "End"
     format = "Raster", // "Raster", "Vector"
-    minTimeout = 32, maxTimeout = 5000, allowSimultaneousRenders = true, debugMargins = false, cameraMatrix: controlledCameraMatrix = null, setCameraMatrix: setControlledCameraMatrix = null, enablePicking = true, backgroundColor = undefined, } = props;
+    minTimeout = 32, maxTimeout = 5000, allowSimultaneousRenders = true, debugMargins = false, backgroundColor = undefined, cameraMatrix: controlledCameraMatrix = null, setCameraMatrix: setControlledCameraMatrix = null, enableClick = false, enableTooltip = false, onClick: onClickProp = null, onHover: onHoverProp = null, } = props;
+    const onClick = typeof onClickProp === 'function' ? onClickProp : identity;
+    const onHover = typeof onHoverProp === 'function' ? onHoverProp : identity;
     // If cameraMatrix is not provided, then we manage the camera matrix internally.
     const [uncontrolledCameraMatrix, setUncontrolledCameraMatrix] = useState(
     // Note: We use an initializer function here to avoid
@@ -70,8 +78,8 @@ export function Pluot(props) {
         store: storeProp,
         storeName: storeNameProp,
         plotId,
-        register: true,
-    }), [storeNameProp, storeProp, storesProp, plotId]);
+        register: registerStores,
+    }), [storeNameProp, storeProp, storesProp, plotId, registerStores]);
     const [supportsWebGpu, supportsWebGpuMessage] = useMemo(checkWebGpuFeatureDetection, []);
     const svgRef = useRef(null);
     const canvasRef = useRef(null);
@@ -80,6 +88,10 @@ export function Pluot(props) {
     // We may want to update these things without triggering a re-render.
     const isRenderingRef = useRef(false);
     const currentTimeout = useRef(minTimeout);
+    // Used to distinguish a plain click from a click that ends a drag
+    // (e.g. panning), so that dragging does not trigger picking.
+    const dragStartRef = useRef(null);
+    const didDragRef = useRef(false);
     // TODO: do we want to use the backlog approach or not?
     // (Similar to the one used in the Vitessce heatmap)
     // Reference: https://github.com/vitessce/vitessce/blob/71f17fb605768e0428fb15ed87b3ea34bcbb4803/packages/view-types/heatmap/src/Heatmap.js#L368
@@ -89,6 +101,9 @@ export function Pluot(props) {
     const [didFirstRender, setDidFirstRender] = useState(false);
     const [bailedEarly, setBailedEarly] = useState(true);
     const [pickingResult, setPickingResult] = useState(null);
+    // hoverInfo.mouseX/mouseY are in the coordinate space of the outer
+    // (width x height) container, used to position the hover tooltip.
+    const [hoverInfo, setHoverInfo] = useState(null);
     const progressBarId = useId();
     useLayoutEffect(() => {
         initialize().then(() => setIsWasmReady(getIsWasmReady()));
@@ -125,8 +140,9 @@ export function Pluot(props) {
         }, cameraMatrix, event);
         setCameraMatrix(nextCameraMatrix);
     });
-    // The picking callback.
-    const pickFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
+    // Runs the picking query against the wasm module and returns the normalized result.
+    // Shared by the click (pickFrame) and hover (hoverFrame) callbacks below.
+    const pick = useEffectEvent(async (screenCoordX, screenCoordY) => {
         const renderParams = {
             schema_version: schemaVersion,
             width,
@@ -156,11 +172,30 @@ export function Pluot(props) {
         };
         const layerHeight = height - marginTop - marginBottom;
         // TODO: wrap pick_wasm in a try/catch
-        setPickingResult(normalizePickingResult(await pick_wasm(renderParams, 
+        return normalizePickingResult(await pick_wasm(renderParams, 
         // The coordinates are relative to the "layer" (the camera region), not the full width/height.
         // We also need to flip the Y coordinate so that positive is up.
-        screenCoordX + marginLeft, marginBottom + (layerHeight - screenCoordY))));
+        screenCoordX + marginLeft, marginBottom + (layerHeight - screenCoordY)));
+    });
+    // The click-picking callback.
+    const pickFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
+        setPickingResult(onClick(await pick(screenCoordX, screenCoordY)));
+    });
+    // The hover-picking callback.
+    const hoverFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
+        const result = await pick(screenCoordX, screenCoordY);
+        setHoverInfo({
+            content: onHover(result),
+            // Convert from cameraEl-relative coordinates to outer-container-relative
+            // coordinates, since the tooltip is positioned within the outer container.
+            mouseX: screenCoordX + marginLeft,
+            mouseY: screenCoordY + marginTop,
+        });
     });
+    const throttledHoverFrame = useMemo(() => throttle(hoverFrame, 50, { leading: true, trailing: true }), []);
+    useEffect(() => {
+        return () => throttledHoverFrame.cancel();
+    }, [throttledHoverFrame]);
     // Set up the camera and picking handlers.
     useEffect(() => {
         const cameraEl = cameraElementRef.current;
@@ -170,19 +205,58 @@ export function Pluot(props) {
         // Create a 2D camera for handling zoom and pan.
         cameraEl.addEventListener("mousemove", mouseMoveHandler);
         cameraEl.addEventListener("wheel", wheelHandler);
+        // Track mousedown -> mousemove distance so that a drag (e.g. panning)
+        // that ends on the camera element does not also trigger a click/pick.
+        const mouseDownHandler = (event) => {
+            dragStartRef.current = { x: event.clientX, y: event.clientY };
+            didDragRef.current = false;
+        };
+        const dragDetectHandler = (event) => {
+            if (!dragStartRef.current) {
+                return;
+            }
+            const dx = event.clientX - dragStartRef.current.x;
+            const dy = event.clientY - dragStartRef.current.y;
+            if (Math.hypot(dx, dy) > DRAG_THRESHOLD_PX) {
+                didDragRef.current = true;
+            }
+        };
+        cameraEl.addEventListener("mousedown", mouseDownHandler);
+        cameraEl.addEventListener("mousemove", dragDetectHandler);
         // Set up an onClick handler for picking.
         const clickHandler = (event) => {
-            if (enablePicking) {
+            const wasDrag = didDragRef.current;
+            dragStartRef.current = null;
+            didDragRef.current = false;
+            if (enableClick && !wasDrag) {
                 pickFrame(event.offsetX, event.offsetY);
             }
         };
         cameraEl.addEventListener("click", clickHandler);
+        // Set up hover handlers for picking, only when the onHover prop is provided.
+        const hoverMoveHandler = (event) => {
+            if (enableTooltip) {
+                throttledHoverFrame(event.offsetX, event.offsetY);
+            }
+        };
+        const hoverLeaveHandler = () => {
+            throttledHoverFrame.cancel();
+            setHoverInfo(null);
+        };
+        if (enableTooltip) {
+            cameraEl.addEventListener("mousemove", hoverMoveHandler);
+            cameraEl.addEventListener("mouseleave", hoverLeaveHandler);
+        }
         return () => {
             cameraEl.removeEventListener("mousemove", mouseMoveHandler);
             cameraEl.removeEventListener("wheel", wheelHandler);
+            cameraEl.removeEventListener("mousedown", mouseDownHandler);
+            cameraEl.removeEventListener("mousemove", dragDetectHandler);
             cameraEl.removeEventListener("click", clickHandler);
+            cameraEl.removeEventListener("mousemove", hoverMoveHandler);
+            cameraEl.removeEventListener("mouseleave", hoverLeaveHandler);
         };
-    }, [viewMode, enablePicking]);
+    }, [viewMode, enableClick, enableTooltip, throttledHoverFrame]);
     // The renderFrame callback.
     // We use useEffectEvent because we want to "see"
     // the latest values of viewMatrix, plotProps, etc.
@@ -308,6 +382,24 @@ export function Pluot(props) {
         throttledRender();
     }, [isWasmReady, didFirstRender, cameraMatrix, backlogIteration, plotId, plotType, plotParams, stores, format,
         width, height, aspectRatioMode, aspectRatioAlignmentMode, marginLeft, marginRight, marginTop, marginBottom]);
+    // Position the hover tooltip so that it grows diagonally away from whichever
+    // quadrant of the plot the mouse currently occupies, to avoid clipping.
+    const hoverStyle = useMemo(() => {
+        if (!hoverInfo) {
+            return null;
+        }
+        const { mouseX, mouseY } = hoverInfo;
+        const isLeft = mouseX < width / 2;
+        const isTop = mouseY < height / 2;
+        const offsetPx = 10;
+        const extraPx = 5;
+        return {
+            position: "absolute",
+            pointerEvents: "none",
+            ...(isTop ? { top: mouseY + offsetPx } : { bottom: height - mouseY + offsetPx + extraPx }),
+            ...(isLeft ? { left: mouseX + offsetPx + extraPx } : { right: width - mouseX + offsetPx }),
+        };
+    }, [hoverInfo, width, height]);
     return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { width, height, position: "relative", backgroundColor }, children: [!supportsWebGpu ? (_jsx("p", { children: supportsWebGpuMessage })) : null, _jsx("div", { ref: cameraElementRef, style: {
                             position: "absolute",
                             top: marginTop,
@@ -326,5 +418,5 @@ export function Pluot(props) {
                         }) : {}) })) : (_jsx("canvas", { ref: canvasRef, style: { width, height, border: `${debugMargins ? 1 : 0}px solid black` }, width: width, height: height, ...(bailedEarly ? ({
                             ['aria-busy']: true,
                             ['aria-describedby']: progressBarId,
-                        }) : {}) }))] }), _jsx("button", { ref: tempButtonRef, style: { display: 'none' }, children: "Try lookAt" }), pickingResult ? (_jsx("pre", { children: JSON.stringify(pickingResult, null, 2) })) : null] }));
+                        }) : {}) })), hoverInfo ? (_jsx("div", { style: hoverStyle, children: _jsx(Tooltip, { content: hoverInfo.content, asTable: true }) })) : null] }), _jsx("button", { ref: tempButtonRef, style: { display: 'none' }, children: "Try lookAt" })] }));
 }

package/dist-tsc/Tooltip.d.ts

@@ -0,0 +1,2 @@
+export function Tooltip(props: any): any;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist-tsc/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.jsx"],"names":[],"mappings":"AAKA,yCA6BC"}

package/dist-tsc/Tooltip.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+const boxShadow = '5px 5px 15px rgb(0 0 0 / 20%)';
+export function Tooltip(props) {
+    const { content, asTable = false, } = props;
+    if (!content) {
+        return null;
+    }
+    if (typeof content === "string" || typeof content === "number") {
+        return _jsx("pre", { children: content });
+    }
+    if (React.isValidElement(content)) {
+        return content;
+    }
+    if (asTable) {
+        return (_jsx("table", { style: { display: 'inline-block', marginBottom: 0, opacity: 0.9, padding: '5px', backgroundColor: 'white', borderRadius: '2px', boxShadow }, children: _jsx("tbody", { children: Object.entries(content).map(([key, value]) => (_jsxs("tr", { children: [_jsx("th", { style: { border: 'none', fontSize: '12px', outline: 0, padding: '0 2px', textAlign: 'left' }, children: key }), _jsx("td", { style: { border: 'none', fontSize: '12px', outline: 0, padding: '0 2px', textAlign: 'left' }, children: value })] }, key))) }) }));
+    }
+    return _jsx("pre", { children: JSON.stringify(content, null, 2) });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pluot/react",
   "private": false,
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "React component for visualization with Pluot",
   "license": "Apache-2.0",
   "author": "Mark Keller",
@@ -36,7 +36,7 @@
     "mouse-wheel": "^1.0.2",
     "lz-string": "^1.5.0",
     "lodash-es": "^4.17.23",
-    "@pluot/core": "0.1.12"
+    "@pluot/core": "0.1.14"
   },
   "devDependencies": {
     "vitest": "^3.2.4",

package/src/Pluot.jsx

@@ -10,6 +10,7 @@ import {
   onMouseMove2d, onWheel2d,
   onMouseMove3d, onWheel3d,
 } from '@pluot/core';
+import { Tooltip } from "./Tooltip.js";
 
 // Needed due to "SyntaxError: Named export 'decompressFromUint8Array' not found.
 // The requested module 'lz-string' is a CommonJS module,
@@ -31,6 +32,13 @@ const DEFAULT_3D_VIEW = new Float32Array([
   0, 0, -10, 1,
 ]);
 
+const identity = (param) => param;
+const noop = () => { };
+
+// Mouse movement (in pixels) beyond which a mousedown-to-click is
+// considered a drag rather than a click, so that picking is skipped.
+const DRAG_THRESHOLD_PX = 3;
+
 function normalizePickingResult(data) {
   const result = data;
   if (data && Array.isArray(result.layer_results)) {
@@ -55,6 +63,7 @@ export function Pluot(props) {
     store: storeProp,
     storeName: storeNameProp,
     stores: storesProp,
+    registerStores = true,
     plotParams,
     viewMode = "2d",
     marginBottom = 100.0,
@@ -68,12 +77,20 @@ export function Pluot(props) {
     maxTimeout = 5000,
     allowSimultaneousRenders = true,
     debugMargins = false,
+    backgroundColor = undefined,
     cameraMatrix: controlledCameraMatrix = null,
     setCameraMatrix: setControlledCameraMatrix = null,
-    enablePicking = true,
-    backgroundColor = undefined,
+    enableClick = false,
+    enableTooltip = false,
+    onClick: onClickProp = null,
+    onHover: onHoverProp = null,
   } = props;
 
+  const onClick = typeof onClickProp === 'function' ? onClickProp : identity;
+  const onHover = typeof onHoverProp === 'function' ? onHoverProp : identity;
+
+
+
   // If cameraMatrix is not provided, then we manage the camera matrix internally.
   const [uncontrolledCameraMatrix, setUncontrolledCameraMatrix] = useState(
     // Note: We use an initializer function here to avoid
@@ -114,8 +131,8 @@ export function Pluot(props) {
     store: storeProp,
     storeName: storeNameProp,
     plotId,
-    register: true,
-  }), [storeNameProp, storeProp, storesProp, plotId]);
+    register: registerStores,
+  }), [storeNameProp, storeProp, storesProp, plotId, registerStores]);
 
   const [supportsWebGpu, supportsWebGpuMessage] = useMemo(checkWebGpuFeatureDetection, []);
 
@@ -129,6 +146,11 @@ export function Pluot(props) {
   const isRenderingRef = useRef(false);
   const currentTimeout = useRef(minTimeout);
 
+  // Used to distinguish a plain click from a click that ends a drag
+  // (e.g. panning), so that dragging does not trigger picking.
+  const dragStartRef = useRef(null);
+  const didDragRef = useRef(false);
+
   // TODO: do we want to use the backlog approach or not?
   // (Similar to the one used in the Vitessce heatmap)
   // Reference: https://github.com/vitessce/vitessce/blob/71f17fb605768e0428fb15ed87b3ea34bcbb4803/packages/view-types/heatmap/src/Heatmap.js#L368
@@ -140,6 +162,9 @@ export function Pluot(props) {
   const [bailedEarly, setBailedEarly] = useState(true);
 
   const [pickingResult, setPickingResult] = useState(null);
+  // hoverInfo.mouseX/mouseY are in the coordinate space of the outer
+  // (width x height) container, used to position the hover tooltip.
+  const [hoverInfo, setHoverInfo] = useState(null);
 
   const progressBarId = useId();
 
@@ -181,8 +206,9 @@ export function Pluot(props) {
     setCameraMatrix(nextCameraMatrix);
   });
 
-  // The picking callback.
-  const pickFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
+  // Runs the picking query against the wasm module and returns the normalized result.
+  // Shared by the click (pickFrame) and hover (hoverFrame) callbacks below.
+  const pick = useEffectEvent(async (screenCoordX, screenCoordY) => {
     const renderParams = {
       schema_version: schemaVersion,
       width,
@@ -215,15 +241,43 @@ export function Pluot(props) {
 
     // TODO: wrap pick_wasm in a try/catch
 
-    setPickingResult(normalizePickingResult(await pick_wasm(
+    return normalizePickingResult(await pick_wasm(
       renderParams,
       // The coordinates are relative to the "layer" (the camera region), not the full width/height.
       // We also need to flip the Y coordinate so that positive is up.
       screenCoordX + marginLeft,
       marginBottom + (layerHeight - screenCoordY)
-    )));
+    ));
   });
 
+  // The click-picking callback.
+  const pickFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
+    setPickingResult(onClick(await pick(screenCoordX, screenCoordY)));
+  });
+
+  // The hover-picking callback.
+  const hoverFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
+    const result = await pick(screenCoordX, screenCoordY);
+    setHoverInfo({
+      content: onHover(result),
+      // Convert from cameraEl-relative coordinates to outer-container-relative
+      // coordinates, since the tooltip is positioned within the outer container.
+      mouseX: screenCoordX + marginLeft,
+      mouseY: screenCoordY + marginTop,
+    });
+  });
+
+  const throttledHoverFrame = useMemo(
+    () => throttle(
+      hoverFrame,
+      50,
+      { leading: true, trailing: true },
+    ), []);
+
+  useEffect(() => {
+    return () => throttledHoverFrame.cancel();
+  }, [throttledHoverFrame]);
+
   // Set up the camera and picking handlers.
   useEffect(() => {
     const cameraEl = cameraElementRef.current;
@@ -236,20 +290,61 @@ export function Pluot(props) {
     cameraEl.addEventListener("mousemove", mouseMoveHandler);
     cameraEl.addEventListener("wheel", wheelHandler);
 
+    // Track mousedown -> mousemove distance so that a drag (e.g. panning)
+    // that ends on the camera element does not also trigger a click/pick.
+    const mouseDownHandler = (event) => {
+      dragStartRef.current = { x: event.clientX, y: event.clientY };
+      didDragRef.current = false;
+    };
+    const dragDetectHandler = (event) => {
+      if (!dragStartRef.current) {
+        return;
+      }
+      const dx = event.clientX - dragStartRef.current.x;
+      const dy = event.clientY - dragStartRef.current.y;
+      if (Math.hypot(dx, dy) > DRAG_THRESHOLD_PX) {
+        didDragRef.current = true;
+      }
+    };
+    cameraEl.addEventListener("mousedown", mouseDownHandler);
+    cameraEl.addEventListener("mousemove", dragDetectHandler);
+
     // Set up an onClick handler for picking.
     const clickHandler = (event) => {
-      if (enablePicking) {
+      const wasDrag = didDragRef.current;
+      dragStartRef.current = null;
+      didDragRef.current = false;
+      if (enableClick && !wasDrag) {
         pickFrame(event.offsetX, event.offsetY);
       }
     };
     cameraEl.addEventListener("click", clickHandler);
 
+    // Set up hover handlers for picking, only when the onHover prop is provided.
+    const hoverMoveHandler = (event) => {
+      if (enableTooltip) {
+        throttledHoverFrame(event.offsetX, event.offsetY);
+      }
+    };
+    const hoverLeaveHandler = () => {
+      throttledHoverFrame.cancel();
+      setHoverInfo(null);
+    };
+    if (enableTooltip) {
+      cameraEl.addEventListener("mousemove", hoverMoveHandler);
+      cameraEl.addEventListener("mouseleave", hoverLeaveHandler);
+    }
+
     return () => {
       cameraEl.removeEventListener("mousemove", mouseMoveHandler);
       cameraEl.removeEventListener("wheel", wheelHandler);
+      cameraEl.removeEventListener("mousedown", mouseDownHandler);
+      cameraEl.removeEventListener("mousemove", dragDetectHandler);
       cameraEl.removeEventListener("click", clickHandler);
+      cameraEl.removeEventListener("mousemove", hoverMoveHandler);
+      cameraEl.removeEventListener("mouseleave", hoverLeaveHandler);
     };
-  }, [viewMode, enablePicking]);
+  }, [viewMode, enableClick, enableTooltip, throttledHoverFrame]);
 
 
   // The renderFrame callback.
@@ -354,8 +449,6 @@ export function Pluot(props) {
   });
 
 
-
-
   const throttledRender = useMemo(
     () => throttle(
       renderFrame,
@@ -401,6 +494,26 @@ export function Pluot(props) {
   }, [isWasmReady, didFirstRender, cameraMatrix, backlogIteration, plotId, plotType, plotParams, stores, format,
     width, height, aspectRatioMode, aspectRatioAlignmentMode, marginLeft, marginRight, marginTop, marginBottom]);
 
+  // Position the hover tooltip so that it grows diagonally away from whichever
+  // quadrant of the plot the mouse currently occupies, to avoid clipping.
+  const hoverStyle = useMemo(() => {
+    if (!hoverInfo) {
+      return null;
+    }
+    const { mouseX, mouseY } = hoverInfo;
+    const isLeft = mouseX < width / 2;
+    const isTop = mouseY < height / 2;
+
+    const offsetPx = 10;
+    const extraPx = 5;
+    return {
+      position: "absolute",
+      pointerEvents: "none",
+      ...(isTop ? { top: mouseY + offsetPx } : { bottom: height - mouseY + offsetPx + extraPx }),
+      ...(isLeft ? { left: mouseX + offsetPx + extraPx } : { right: width - mouseX + offsetPx }),
+    };
+  }, [hoverInfo, width, height]);
+
   return (
     <>
       <div style={{ width, height, position: "relative", backgroundColor }}>
@@ -457,12 +570,13 @@ export function Pluot(props) {
 
           />
         )}
-
+        {hoverInfo ? (
+          <div style={hoverStyle}>
+            <Tooltip content={hoverInfo.content} asTable />
+          </div>
+        ) : null}
       </div>
       <button ref={tempButtonRef} style={{ display: 'none' }}>Try lookAt</button>
-      {pickingResult ? (
-        <pre>{JSON.stringify(pickingResult, null, 2)}</pre>
-      ) : null}
     </>
   );
 }

package/src/Tooltip.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+
+const boxShadow = '5px 5px 15px rgb(0 0 0 / 20%)';
+
+export function Tooltip(props) {
+  const {
+    content,
+    asTable = false,
+  } = props;
+  if (!content) {
+    return null;
+  }
+  if (typeof content === "string" || typeof content === "number") {
+    return <pre>{content}</pre>;
+  }
+  if (React.isValidElement(content)) {
+    return content;
+  }
+  if (asTable) {
+    return (
+        <table style={{ display: 'inline-block', marginBottom: 0, opacity: 0.9, padding: '5px', backgroundColor: 'white', borderRadius: '2px', boxShadow }}>
+          <tbody>
+            {Object.entries(content).map(([key, value]) => (
+              <tr key={key}>
+                <th style={{ border: 'none', fontSize: '12px', outline: 0, padding: '0 2px', textAlign: 'left' }}>{key}</th>
+                <td style={{ border: 'none', fontSize: '12px', outline: 0, padding: '0 2px', textAlign: 'left' }}>{value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+    );
+  }
+  return <pre>{JSON.stringify(content, null, 2)}</pre>;
+}