@pluot/react 0.1.1 → 0.1.3

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":"AA+CA,uCAsaC"}

package/dist-tsc/Pluot.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useLayoutEffect, useEffect, useEffectEvent, useRef, useState, useMemo, useReducer, useCallback } from "react";
-import { mat4, vec4 } from "gl-matrix";
+import React, { useLayoutEffect, useEffect, useEffectEvent, useRef, useState, useMemo, useReducer, useCallback, useId } from "react";
 import lzs from "lz-string";
 import { isEqual, throttle } from "lodash-es";
-import { FetchStore } from 'zarrita';
-import { initialize, getIsWasmReady, render_wasm, pick_wasm, setStore, getStore, getBounds, getCameraMatrixFromBounds, checkWebGpuFeatureDetection, onMouseMove2d, onWheel2d, onMouseMove3d, onWheel3d, } from '@pluot/core';
+import { initialize, getIsWasmReady, render_wasm, pick_wasm, normalizeStores, getStore, getBounds, getCameraMatrixFromBounds, checkWebGpuFeatureDetection, onMouseMove2d, onWheel2d, onMouseMove3d, onWheel3d, } from '@pluot/core';
 // 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."
@@ -34,10 +32,10 @@ function normalizePickingResult(data) {
     return result;
 }
 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"
+    const { 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"
     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
@@ -65,19 +63,15 @@ export function Pluot(props) {
     const width = Math.floor(widthProp);
     const height = Math.floor(heightProp);
     const isVector = format === "Vector";
-    const storeName = useMemo(() => {
-        if (storeNameProp) {
-            return storeNameProp;
-        }
-        // If store is a string, assume it is a URL and initialize a FetchStore here.
-        if (store) {
-            if (typeof store === 'string') {
-                return setStore(new FetchStore(store), plotId);
-            }
-            return setStore(store, plotId);
-        }
-        throw new Error("Either storeName or store must be provided.");
-    }, [storeNameProp, store]);
+    // Build the top-level `stores` map that RenderParams expects: a mapping from
+    // store name to its derived `ZarrStoreInfo` metadata.
+    const stores = useMemo(() => normalizeStores({
+        stores: storesProp,
+        store: storeProp,
+        storeName: storeNameProp,
+        plotId,
+        register: true,
+    }), [storeNameProp, storeProp, storesProp, plotId]);
     const [supportsWebGpu, supportsWebGpuMessage] = useMemo(checkWebGpuFeatureDetection, []);
     const svgRef = useRef(null);
     const canvasRef = useRef(null);
@@ -85,7 +79,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
@@ -95,6 +89,7 @@ export function Pluot(props) {
     const [didFirstRender, setDidFirstRender] = useState(false);
     const [bailedEarly, setBailedEarly] = useState(true);
     const [pickingResult, setPickingResult] = useState(null);
+    const progressBarId = useId();
     useLayoutEffect(() => {
         initialize().then(() => setIsWasmReady(getIsWasmReady()));
     }, []);
@@ -130,21 +125,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 = {
@@ -164,7 +144,7 @@ export function Pluot(props) {
             camera_view: cameraMatrix,
             plot_id: plotId,
             plot_type: plotType,
-            store_name: storeName,
+            stores,
             plot_params: plotParams,
             // Reduce the timeout value to improve responsiveness during data loading (bailed-early renders)?
             timeout: currentTimeout.current, // in ms // Note: will not have any effect when wait_for_store_gets is false.
@@ -174,11 +154,34 @@ export function Pluot(props) {
             svg_include_document: false,
         };
         const layerHeight = height - marginTop - marginBottom;
+        // TODO: wrap pick_wasm in a try/catch
         setPickingResult(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))));
     });
+    // 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.
@@ -202,7 +205,7 @@ export function Pluot(props) {
             camera_view: cameraMatrix,
             plot_id: plotId,
             plot_type: plotType,
-            store_name: storeName,
+            stores,
             plot_params: plotParams,
             // Reduce the timeout value to improve responsiveness during data loading (bailed-early renders)?
             timeout: currentTimeout.current, // in ms // Note: will not have any effect when wait_for_store_gets is false.
@@ -249,18 +252,25 @@ 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);
-                if (storeUsed && storeUsed.clearCache && typeof storeUsed.clearCache === 'function') {
-                    storeUsed.clearCache();
-                }
+                Object.keys(stores).forEach(storeName => {
+                    const storeUsed = getStore(storeName);
+                    if (storeUsed && storeUsed.clearCache && typeof storeUsed.clearCache === 'function') {
+                        storeUsed.clearCache();
+                    }
+                });
             }
         }
         setDidFirstRender(true);
@@ -274,6 +284,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, stores, format,
+        width, height, aspectRatioMode, aspectRatioAlignmentMode,
+        marginLeft, marginRight, marginTop, marginBottom,
+        cameraMatrix,
+    ]);
     // TODO: use react-query?
     useEffect(() => {
         if (!isWasmReady) {
@@ -289,14 +308,25 @@ export function Pluot(props) {
         }
         // Render on the next animation frame.
         throttledRender();
-    }, [isWasmReady, didFirstRender, cameraMatrix, backlogIteration, plotId, plotType, plotParams, storeName, format,
+    }, [isWasmReady, didFirstRender, cameraMatrix, backlogIteration, plotId, plotType, plotParams, stores, 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,
                             width: width - marginLeft - marginRight,
                             height: height - marginTop - marginBottom,
                             border: `${debugMargins ? 1 : 0}px solid red`,
-                        } }), isVector ? (_jsx("svg", { ref: svgRef, style: { width, height, border: "1px solid black" }, width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg" })) : (_jsx("canvas", { ref: canvasRef, style: { width, height, border: "1px solid black" }, width: width, height: height }))] }), bailedEarly ? (_jsx("p", { children: "Loading..." })) : null, _jsx("button", { ref: tempButtonRef, style: { display: 'none' }, children: "Try lookAt" }), pickingResult ? (_jsx("pre", { children: JSON.stringify(pickingResult, null, 2) })) : null] }));
+                        } }), bailedEarly ? (_jsx("progress", { id: progressBarId, "aria-label": "Loading...", style: {
+                            bottom: 0,
+                            left: 0,
+                            width: '100%',
+                            position: 'absolute'
+                        } })) : null, isVector ? (_jsx("svg", { ref: svgRef, style: { width, height, border: `${debugMargins ? 1 : 0}px solid black` }, width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", ...(bailedEarly ? ({
+                            ['aria-busy']: true,
+                            ['aria-describedby']: progressBarId,
+                        }) : {}) })) : (_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] }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pluot/react",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "React component for visualization with Pluot",
   "license": "Apache-2.0",
   "author": "Mark Keller",
@@ -19,7 +19,7 @@
   ],
   "dependencies": {
     "lightua": "0.1.0",
-    "zarrita": "^0.5.3",
+    "zarrita": "^0.7.3",
     "quick-lru": "^7.0.1",
     "d3-zoom": "^3.0.0",
     "d3-selection": "^3.0.0",
@@ -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.3"
   },
   "devDependencies": {
     "vitest": "^3.2.4",

package/src/Pluot.jsx

@@ -1,12 +1,10 @@
-import React, { useLayoutEffect, useEffect, useEffectEvent, useRef, useState, useMemo, useReducer, useCallback } from "react";
-import { mat4, vec4 } from "gl-matrix";
+import React, { useLayoutEffect, useEffect, useEffectEvent, useRef, useState, useMemo, useReducer, useCallback, useId } from "react";
 import lzs from "lz-string";
 import { isEqual, throttle } from "lodash-es";
-import { FetchStore } from 'zarrita';
 import {
   initialize, getIsWasmReady,
   render_wasm, pick_wasm,
-  setStore, getStore,
+  normalizeStores, getStore,
   getBounds, getCameraMatrixFromBounds,
   checkWebGpuFeatureDetection,
   onMouseMove2d, onWheel2d,
@@ -53,8 +51,9 @@ export function Pluot(props) {
     height: heightProp,
     plotId,
     plotType,
-    store,
+    store: storeProp,
     storeName: storeNameProp,
+    stores: storesProp,
     plotParams,
     viewMode = "2d",
     marginBottom = 100.0,
@@ -65,11 +64,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.
@@ -105,19 +106,15 @@ export function Pluot(props) {
 
   const isVector = format === "Vector";
 
-  const storeName = useMemo(() => {
-    if (storeNameProp) {
-      return storeNameProp;
-    }
-    // If store is a string, assume it is a URL and initialize a FetchStore here.
-    if (store) {
-      if (typeof store === 'string') {
-        return setStore(new FetchStore(store), plotId);
-      }
-      return setStore(store, plotId);
-    }
-    throw new Error("Either storeName or store must be provided.");
-  }, [storeNameProp, store]);
+  // Build the top-level `stores` map that RenderParams expects: a mapping from
+  // store name to its derived `ZarrStoreInfo` metadata.
+  const stores = useMemo(() => normalizeStores({
+    stores: storesProp,
+    store: storeProp,
+    storeName: storeNameProp,
+    plotId,
+    register: true,
+  }), [storeNameProp, storeProp, storesProp, plotId]);
 
   const [supportsWebGpu, supportsWebGpuMessage] = useMemo(checkWebGpuFeatureDetection, []);
 
@@ -129,7 +126,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)
@@ -143,12 +140,12 @@ export function Pluot(props) {
 
   const [pickingResult, setPickingResult] = useState(null);
 
+  const progressBarId = useId();
 
   useLayoutEffect(() => {
     initialize().then(() => setIsWasmReady(getIsWasmReady()));
   }, []);
 
-
   const wheelHandler = useEffectEvent((event) => {
     const onWheel = viewMode === "3d" ? onWheel3d : onWheel2d;
     const nextCameraMatrix = onWheel({
@@ -183,25 +180,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 = {
@@ -221,7 +199,7 @@ export function Pluot(props) {
       camera_view: cameraMatrix,
       plot_id: plotId,
       plot_type: plotType,
-      store_name: storeName,
+      stores,
       plot_params: plotParams,
       // Reduce the timeout value to improve responsiveness during data loading (bailed-early renders)?
       timeout: currentTimeout.current, // in ms // Note: will not have any effect when wait_for_store_gets is false.
@@ -233,6 +211,8 @@ export function Pluot(props) {
 
     const layerHeight = height - marginTop - marginBottom;
 
+    // TODO: wrap pick_wasm in a try/catch
+
     setPickingResult(normalizePickingResult(await pick_wasm(
       renderParams,
       // The coordinates are relative to the "layer" (the camera region), not the full width/height.
@@ -242,6 +222,33 @@ 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"
@@ -267,7 +274,7 @@ export function Pluot(props) {
       camera_view: cameraMatrix,
       plot_id: plotId,
       plot_type: plotType,
-      store_name: storeName,
+      stores,
       plot_params: plotParams,
       // Reduce the timeout value to improve responsiveness during data loading (bailed-early renders)?
       timeout: currentTimeout.current, // in ms // Note: will not have any effect when wait_for_store_gets is false.
@@ -323,23 +330,34 @@ 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.
-        const storeUsed = getStore(renderParams.store_name);
-        if (storeUsed && storeUsed.clearCache && typeof storeUsed.clearCache === 'function') {
-          storeUsed.clearCache();
-        }
+        Object.keys(stores).forEach(storeName => {
+          const storeUsed = getStore(storeName);
+          if (storeUsed && storeUsed.clearCache && typeof storeUsed.clearCache === 'function') {
+            storeUsed.clearCache();
+          }
+        });
+
       }
     }
     setDidFirstRender(true);
   });
 
+
+
+
   const throttledRender = useMemo(
     () => throttle(
       renderFrame,
@@ -355,6 +373,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, stores, format,
+    width, height, aspectRatioMode, aspectRatioAlignmentMode,
+    marginLeft, marginRight, marginTop, marginBottom,
+    cameraMatrix,
+  ]);
+
   // TODO: use react-query?
   useEffect(() => {
     if (!isWasmReady) {
@@ -372,12 +400,12 @@ export function Pluot(props) {
 
     // Render on the next animation frame.
     throttledRender();
-  }, [isWasmReady, didFirstRender, cameraMatrix, backlogIteration, plotId, plotType, plotParams, storeName, format,
+  }, [isWasmReady, didFirstRender, cameraMatrix, backlogIteration, plotId, plotType, plotParams, stores, format,
     width, height, aspectRatioMode, aspectRatioAlignmentMode, marginLeft, marginRight, marginTop, marginBottom]);
 
   return (
     <>
-      <div style={{ width, height, position: "relative" }}>
+      <div style={{ width, height, position: "relative", backgroundColor }}>
         {!supportsWebGpu ? (
           <p>{supportsWebGpuMessage}</p>
         ) : null}
@@ -392,28 +420,47 @@ export function Pluot(props) {
             border: `${debugMargins ? 1 : 0}px solid red`,
           }}
         />
+        {bailedEarly ? (
+          <progress
+            id={progressBarId}
+            aria-label="Loading..."
+            style={{
+              bottom: 0,
+              left: 0,
+              width: '100%',
+              position: 'absolute'
+            }}
+          />
+        ) : null}
         {isVector ? (
           <svg
             ref={svgRef}
-            style={{ width, height, border: "1px solid black" }}
+            style={{ width, height, border: `${debugMargins ? 1 : 0}px solid black` }}
             width={width}
             height={height}
             viewBox={`0 0 ${width} ${height}`}
             xmlns="http://www.w3.org/2000/svg"
+            {...(bailedEarly ? ({
+              ['aria-busy']: true,
+              ['aria-describedby']: progressBarId,
+            }) : {})}
           >
           </svg>
         ) : (
           <canvas
             ref={canvasRef}
-            style={{ width, height, border: "1px solid black" }}
+            style={{ width, height, border: `${debugMargins ? 1 : 0}px solid black` }}
             width={width}
             height={height}
+            {...(bailedEarly ? ({
+              ['aria-busy']: true,
+              ['aria-describedby']: progressBarId,
+            }) : {})}
+
           />
         )}
+
       </div>
-      {bailedEarly ? (
-          <p>Loading...</p>
-        ) : null}
       <button ref={tempButtonRef} style={{ display: 'none' }}>Try lookAt</button>
       {pickingResult ? (
         <pre>{JSON.stringify(pickingResult, null, 2)}</pre>

package/dist-tsc/3d-view-controls.d.ts

@@ -1,17 +0,0 @@
-export default function createCamera(element: any, options: any): {
-    view: any;
-    element: any;
-    delay: any;
-    rotateSpeed: any;
-    zoomSpeed: any;
-    translateSpeed: any;
-    flipX: boolean;
-    flipY: boolean;
-    modes: any;
-    tick: () => boolean;
-    lookAt: (center: any, eye: any, up: any) => void;
-    rotate: (pitch: any, yaw: any, roll: any) => void;
-    pan: (dx: any, dy: any, dz: any) => void;
-    translate: (dx: any, dy: any, dz: any) => void;
-};
-//# sourceMappingURL=3d-view-controls.d.ts.map

package/dist-tsc/3d-view-controls.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"3d-view-controls.d.ts","sourceRoot":"","sources":["../src/3d-view-controls.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;;;EAgOC"}