@pluot/react 0.1.2 → 0.1.5

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

@@ -1 +1 @@
-{"version":3,"file":"Pluot.d.ts","sourceRoot":"","sources":["../src/Pluot.jsx"],"names":[],"mappings":"AAiDA,uCAgZC"}
+{"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,7 +32,7 @@ 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 = 5000, allowSimultaneousRenders = true, debugMargins = false, cameraMatrix: controlledCameraMatrix = null, setCameraMatrix: setControlledCameraMatrix = null, enablePicking = true, backgroundColor = undefined, } = props;
@@ -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);
@@ -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()));
     }, []);
@@ -149,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.
@@ -159,6 +154,7 @@ 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.
@@ -209,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.
@@ -269,10 +265,12 @@ export function Pluot(props) {
                 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);
@@ -290,7 +288,7 @@ export function Pluot(props) {
     // sequence of bailed-early renders starts from the minimum again.
     useEffect(() => {
         currentTimeout.current = minTimeout;
-    }, [plotId, plotType, plotParams, storeName, format,
+    }, [plotId, plotType, plotParams, stores, format,
         width, height, aspectRatioMode, aspectRatioAlignmentMode,
         marginLeft, marginRight, marginTop, marginBottom,
         cameraMatrix,
@@ -310,7 +308,7 @@ 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", backgroundColor }, children: [!supportsWebGpu ? (_jsx("p", { children: supportsWebGpuMessage })) : null, _jsx("div", { ref: cameraElementRef, style: {
                             position: "absolute",
@@ -319,5 +317,16 @@ export function Pluot(props) {
                             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.2",
+  "version": "0.1.5",
   "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.2"
+    "@pluot/core": "0.1.5"
   },
   "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,
@@ -107,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, []);
 
@@ -145,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({
@@ -204,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.
@@ -216,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.
@@ -253,8 +250,6 @@ export function Pluot(props) {
   }, [viewMode, enablePicking]);
 
 
-
-
   // The renderFrame callback.
   // We use useEffectEvent because we want to "see"
   // the latest values of viewMatrix, plotProps, etc.
@@ -279,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.
@@ -348,15 +343,21 @@ export function Pluot(props) {
         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,
@@ -376,7 +377,7 @@ export function Pluot(props) {
   // sequence of bailed-early renders starts from the minimum again.
   useEffect(() => {
     currentTimeout.current = minTimeout;
-  }, [plotId, plotType, plotParams, storeName, format,
+  }, [plotId, plotType, plotParams, stores, format,
     width, height, aspectRatioMode, aspectRatioAlignmentMode,
     marginLeft, marginRight, marginTop, marginBottom,
     cameraMatrix,
@@ -399,7 +400,7 @@ 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 (
@@ -419,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>