@pluot/react 0.1.1 → 0.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"Pluot.d.ts","sourceRoot":"","sources":["../src/Pluot.jsx"],"names":[],"mappings":"AAiDA,uCAqXC"}
+{"version":3,"file":"Pluot.d.ts","sourceRoot":"","sources":["../src/Pluot.jsx"],"names":[],"mappings":"AAiDA,uCAgZC"}

package/dist-tsc/Pluot.js

@@ -37,7 +37,7 @@ export function Pluot(props) {
     const { width: widthProp, height: heightProp, plotId, plotType, store, storeName: storeNameProp, 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 = 32, allowSimultaneousRenders = true, debugMargins = false, cameraMatrix: controlledCameraMatrix = null, setCameraMatrix: setControlledCameraMatrix = null, } = props;
+    minTimeout = 32, maxTimeout = 5000, allowSimultaneousRenders = true, debugMargins = false, cameraMatrix: controlledCameraMatrix = null, setCameraMatrix: setControlledCameraMatrix = null, enablePicking = true, backgroundColor = undefined, } = props;
     // 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
@@ -85,7 +85,7 @@ export function Pluot(props) {
     const tempButtonRef = useRef(null);
     // We may want to update these things without triggering a re-render.
     const isRenderingRef = useRef(false);
-    const currentTimeout = useRef(maxTimeout);
+    const currentTimeout = useRef(minTimeout);
     // 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
@@ -130,21 +130,6 @@ export function Pluot(props) {
         }, cameraMatrix, event);
         setCameraMatrix(nextCameraMatrix);
     });
-    // Set up FUNCTIONAL camera.
-    useEffect(() => {
-        // Set up the camera.
-        const cameraEl = cameraElementRef.current;
-        if (!cameraEl) {
-            return () => { };
-        }
-        // Create a 2D camera for handling zoom and pan.
-        cameraEl.addEventListener("mousemove", mouseMoveHandler);
-        cameraEl.addEventListener("wheel", wheelHandler);
-        return () => {
-            cameraEl.removeEventListener("mousemove", mouseMoveHandler);
-            cameraEl.removeEventListener("wheel", wheelHandler);
-        };
-    }, [viewMode]);
     // The picking callback.
     const pickFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
         const renderParams = {
@@ -179,6 +164,28 @@ export function Pluot(props) {
         // We also need to flip the Y coordinate so that positive is up.
         screenCoordX + marginLeft, marginBottom + (layerHeight - screenCoordY))));
     });
+    // Set up the camera and picking handlers.
+    useEffect(() => {
+        const cameraEl = cameraElementRef.current;
+        if (!cameraEl) {
+            return () => { };
+        }
+        // Create a 2D camera for handling zoom and pan.
+        cameraEl.addEventListener("mousemove", mouseMoveHandler);
+        cameraEl.addEventListener("wheel", wheelHandler);
+        // Set up an onClick handler for picking.
+        const clickHandler = (event) => {
+            if (enablePicking) {
+                pickFrame(event.offsetX, event.offsetY);
+            }
+        };
+        cameraEl.addEventListener("click", clickHandler);
+        return () => {
+            cameraEl.removeEventListener("mousemove", mouseMoveHandler);
+            cameraEl.removeEventListener("wheel", wheelHandler);
+            cameraEl.removeEventListener("click", clickHandler);
+        };
+    }, [viewMode, enablePicking]);
     // The renderFrame callback.
     // We use useEffectEvent because we want to "see"
     // the latest values of viewMatrix, plotProps, etc.
@@ -249,12 +256,17 @@ export function Pluot(props) {
             ctx.putImageData(imageData, 0, 0);
             const frameBailedEarly = arr.at(-1) === 1;
             if (frameBailedEarly) {
-                currentTimeout.current = maxTimeout;
+                // We multiply the current timeout by two to implement an exponential backoff
+                // while the Rust side is bailing early.
+                // A downstream useEffect restarts the exponential backoff from scratch
+                // if any other plotting parameters change.
+                currentTimeout.current = Math.min(currentTimeout.current * 2, maxTimeout);
                 incBacklogIteration(); // Increment this to force a re-render.
                 setBailedEarly(true); // Update this to show the loading indicator.
             }
             else {
                 // Successful render.
+                currentTimeout.current = minTimeout;
                 setBailedEarly(false); // Update this to hide the loading indicator.
                 // Clear the LRU cache for the store (via its store_name) corresponding to the rendered plot.
                 const storeUsed = getStore(renderParams.store_name);
@@ -274,6 +286,15 @@ export function Pluot(props) {
     useEffect(() => {
         return () => throttledRender.cancel();
     }, [throttledRender]);
+    // Reset the backoff timeout whenever plot parameters change so the next
+    // sequence of bailed-early renders starts from the minimum again.
+    useEffect(() => {
+        currentTimeout.current = minTimeout;
+    }, [plotId, plotType, plotParams, storeName, format,
+        width, height, aspectRatioMode, aspectRatioAlignmentMode,
+        marginLeft, marginRight, marginTop, marginBottom,
+        cameraMatrix,
+    ]);
     // TODO: use react-query?
     useEffect(() => {
         if (!isWasmReady) {
@@ -291,7 +312,7 @@ export function Pluot(props) {
         throttledRender();
     }, [isWasmReady, didFirstRender, cameraMatrix, backlogIteration, plotId, plotType, plotParams, storeName, format,
         width, height, aspectRatioMode, aspectRatioAlignmentMode, marginLeft, marginRight, marginTop, marginBottom]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { width, height, position: "relative" }, children: [!supportsWebGpu ? (_jsx("p", { children: supportsWebGpuMessage })) : null, _jsx("div", { ref: cameraElementRef, style: {
+    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,
                             left: marginLeft,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pluot/react",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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.1"
+    "@pluot/core": "0.1.2"
   },
   "devDependencies": {
     "vitest": "^3.2.4",

package/src/Pluot.jsx

@@ -65,11 +65,13 @@ export function Pluot(props) {
     aspectRatioAlignmentMode = "Start", // "Center", "Start", "End"
     format = "Raster", // "Raster", "Vector"
     minTimeout = 32,
-    maxTimeout = 32,
+    maxTimeout = 5000,
     allowSimultaneousRenders = true,
     debugMargins = false,
     cameraMatrix: controlledCameraMatrix = null,
     setCameraMatrix: setControlledCameraMatrix = null,
+    enablePicking = true,
+    backgroundColor = undefined,
   } = props;
 
   // If cameraMatrix is not provided, then we manage the camera matrix internally.
@@ -129,7 +131,7 @@ export function Pluot(props) {
 
   // We may want to update these things without triggering a re-render.
   const isRenderingRef = useRef(false);
-  const currentTimeout = useRef(maxTimeout);
+  const currentTimeout = useRef(minTimeout);
 
   // TODO: do we want to use the backlog approach or not?
   // (Similar to the one used in the Vitessce heatmap)
@@ -183,25 +185,6 @@ export function Pluot(props) {
     setCameraMatrix(nextCameraMatrix);
   });
 
-  // Set up FUNCTIONAL camera.
-  useEffect(() => {
-    // Set up the camera.
-    const cameraEl = cameraElementRef.current;
-
-    if (!cameraEl) {
-      return () => {};
-    }
-
-    // Create a 2D camera for handling zoom and pan.
-    cameraEl.addEventListener("mousemove", mouseMoveHandler);
-    cameraEl.addEventListener("wheel", wheelHandler);
-
-    return () => {
-      cameraEl.removeEventListener("mousemove", mouseMoveHandler);
-      cameraEl.removeEventListener("wheel", wheelHandler);
-    };
-  }, [viewMode]);
-
   // The picking callback.
   const pickFrame = useEffectEvent(async (screenCoordX, screenCoordY) => {
     const renderParams = {
@@ -242,6 +225,35 @@ export function Pluot(props) {
     )));
   });
 
+  // Set up the camera and picking handlers.
+  useEffect(() => {
+    const cameraEl = cameraElementRef.current;
+
+    if (!cameraEl) {
+      return () => {};
+    }
+
+    // Create a 2D camera for handling zoom and pan.
+    cameraEl.addEventListener("mousemove", mouseMoveHandler);
+    cameraEl.addEventListener("wheel", wheelHandler);
+
+    // Set up an onClick handler for picking.
+    const clickHandler = (event) => {
+      if (enablePicking) {
+        pickFrame(event.offsetX, event.offsetY);
+      }
+    };
+    cameraEl.addEventListener("click", clickHandler);
+
+    return () => {
+      cameraEl.removeEventListener("mousemove", mouseMoveHandler);
+      cameraEl.removeEventListener("wheel", wheelHandler);
+      cameraEl.removeEventListener("click", clickHandler);
+    };
+  }, [viewMode, enablePicking]);
+
+
+
 
   // The renderFrame callback.
   // We use useEffectEvent because we want to "see"
@@ -323,11 +335,16 @@ export function Pluot(props) {
 
       const frameBailedEarly = arr.at(-1) === 1;
       if (frameBailedEarly) {
-        currentTimeout.current = maxTimeout;
+        // We multiply the current timeout by two to implement an exponential backoff
+        // while the Rust side is bailing early.
+        // A downstream useEffect restarts the exponential backoff from scratch
+        // if any other plotting parameters change.
+        currentTimeout.current = Math.min(currentTimeout.current * 2, maxTimeout);
         incBacklogIteration(); // Increment this to force a re-render.
         setBailedEarly(true); // Update this to show the loading indicator.
       } else {
         // Successful render.
+        currentTimeout.current = minTimeout;
         setBailedEarly(false); // Update this to hide the loading indicator.
 
         // Clear the LRU cache for the store (via its store_name) corresponding to the rendered plot.
@@ -355,6 +372,16 @@ export function Pluot(props) {
     return () => throttledRender.cancel();
   }, [throttledRender]);
 
+  // Reset the backoff timeout whenever plot parameters change so the next
+  // sequence of bailed-early renders starts from the minimum again.
+  useEffect(() => {
+    currentTimeout.current = minTimeout;
+  }, [plotId, plotType, plotParams, storeName, format,
+    width, height, aspectRatioMode, aspectRatioAlignmentMode,
+    marginLeft, marginRight, marginTop, marginBottom,
+    cameraMatrix,
+  ]);
+
   // TODO: use react-query?
   useEffect(() => {
     if (!isWasmReady) {
@@ -377,7 +404,7 @@ export function Pluot(props) {
 
   return (
     <>
-      <div style={{ width, height, position: "relative" }}>
+      <div style={{ width, height, position: "relative", backgroundColor }}>
         {!supportsWebGpu ? (
           <p>{supportsWebGpuMessage}</p>
         ) : null}