Upgrade Viv@0.9.2 (#73)

* Upgrade viv to v0.9.2

* Use current href in Acquisition controller instead of relying on store

* Scale initial view to fill viewport

* disable text for follow-up PR

Author: manzt

.gitignore

@@ -28,3 +28,4 @@ out/*
 example/*.zarr
 example/.ipynb_checkpoints/*
 example/data/**
+__pycache__

example/VizarrDemo.imjoy.html

@@ -37,7 +37,7 @@
 def encode_zarr_store(zobj):
     path_prefix = f"{zobj.path}/" if zobj.path else ""
 
-    def getItem(key):
+    def getItem(key, options = None):
         return zobj.store[path_prefix + key]
 
     def setItem(key, value):

example/create_fixture.py

@@ -5,13 +5,13 @@
 import os
 import json
 from skimage import data
-from skimage.transform import pyramid_gaussian, pyramid_laplacian
+from skimage.transform import pyramid_gaussian
 
 # Modified from https://github.com/ome/ome-zarr-py/blob/master/tests/create_test_data.py
 def create_ome_zarr(zarr_directory, dtype="f4"):
 
-    base = np.tile(data.astronaut(), (2, 2, 1))
-    gaussian = list(pyramid_gaussian(base, downscale=2, max_layer=4, multichannel=True))
+    base = np.tile(data.astronaut(), (4, 4, 1))
+    gaussian = list(pyramid_gaussian(base, downscale=2, max_layer=3, multichannel=True))
 
     pyramid = []
     # convert each level of pyramid into 5D image (t, c, z, y, x)
@@ -21,14 +21,14 @@ def create_ome_zarr(zarr_directory, dtype="f4"):
         blue = pixels[:, :, 2]
         # wrap to make 5D: (t, c, z, y, x)
         pixels = np.array([np.array([red]), np.array([green]), np.array([blue])])
-        pixels = np.array([pixels])
+        pixels = np.array([pixels]).astype(dtype)
         pyramid.append(pixels)
 
     store = zarr.DirectoryStore(zarr_directory)
     grp = zarr.group(store, overwrite=True)
     paths = []
     for path, dataset in enumerate(pyramid):
-        grp.create_dataset(str(path), data=pyramid[path].astype(dtype))
+        grp.create_dataset(str(path), data=pyramid[path])
         paths.append({"path": str(path)})
 
     image_data = {
@@ -53,10 +53,17 @@ def create_ome_zarr(zarr_directory, dtype="f4"):
                 "active": True,
             },
         ],
-        "rdefs": {"model": "color",},
+        "rdefs": {
+            "model": "color",
+        },
     }
 
-    multiscales = [{"version": "0.1", "datasets": paths,}]
+    multiscales = [
+        {
+            "version": "0.1",
+            "datasets": paths,
+        }
+    ]
     grp.attrs["multiscales"] = multiscales
     grp.attrs["omero"] = image_data
 

example/getting_started.ipynb

@@ -217,7 +217,7 @@
     }
    ],
    "source": [
-    "z_arr = zarr.open('astronaut.zarr').get('1')\n",
+    "z_arr = zarr.open('astronaut.zarr').get('2')\n",
     "z_arr.shape"
    ]
   },

package-lock.json

@@ -2,16 +2,16 @@
   "name": "@hms-dbmi/vizarr",
   "version": "0.2.0",
   "dependencies": {
-    "@hms-dbmi/viv": "^0.8.1",
+    "@hms-dbmi/viv": "^0.9.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
-    "deck.gl": "^8.4.0-alpha.4",
+    "deck.gl": "^8.4.3",
     "imjoy-rpc": "^0.2.23",
     "p-map": "^4.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "recoil": "0.0.13",
-    "zarr": "^0.3.0"
+    "zarr": "^0.4.0"
   },
   "scripts": {
     "start": "snowpack dev",

package.json

@@ -2,22 +2,26 @@ import React from 'react';
 import { Grid, NativeSelect } from '@material-ui/core';
 import { useRecoilValue } from 'recoil';
 import type { ChangeEvent } from 'react';
-import type { Acquisition } from '../../state';
 
 import { sourceInfoState } from '../../state';
 
 function AcquisitionController({ layerId }: { layerId: string }): JSX.Element | null {
   const sourceInfo = useRecoilValue(sourceInfoState);
-  const { acquisitionId, acquisitions, source } = sourceInfo[layerId];
+  const { acquisitionId, acquisitions } = sourceInfo[layerId];
 
   if (!acquisitions) {
     return null;
   }
 
   const handleSelectionChange = (event: ChangeEvent<HTMLSelectElement>) => {
     let value = event.target.value;
-    let acquisition = value === '-1' ? '' : `&acquisition=${value}`;
-    window.location.href = window.location.origin + window.location.pathname + `?source=${source}${acquisition}`;
+    const url = new URL(window.location.href);
+    if (value === '-1') {
+      url.searchParams.delete('acquisition');
+    } else {
+      url.searchParams.set('acquisition', value);
+    }
+    window.location.href = decodeURIComponent(url.href);
   };
 
   return (
@@ -28,7 +32,7 @@ function AcquisitionController({ layerId }: { layerId: string }): JSX.Element |
             Filter by Acquisition
           </option>
           {acquisitions.map((acq) => {
-            acq = acq as Acquisition;
+            acq = acq as Ome.Acquisition;
             return (
               <option value={acq.id} key={acq.id}>
                 Acquisition: {acq.name}

src/components/LayerController/AcquisitionController.tsx

@@ -10,7 +10,7 @@ function AxisSliders({ layerId }: { layerId: string }): JSX.Element | null {
 
   const sliders = axis_labels
     .slice(0, -2) // ignore last two axes, [y,x]
-    .map((name, i): [string, number, number] => [name, i, loader.base.shape[i]]) // capture the name, index, and size of non-yx dims
+    .map((name, i): [string, number, number] => [name, i, loader[0].shape[i]]) // capture the name, index, and size of non-yx dims
     .filter((d) => {
       if (d[1] === channel_axis) return false; // ignore channel_axis (for OME-Zarr channel_axis === 1)
       if (d[2] > 1) return true; // keep if size > 1

src/components/LayerController/AxisSliders.tsx

@@ -41,7 +41,7 @@ function LayerController({ layerId }: { layerId: string }): JSX.Element {
       setLayer(initialLayerState);
     }
     // Loader only defined once layer state is initialized.
-    if (layerId in sourceInfo && !layer.layerProps.loader) {
+    if (layerId in sourceInfo) {
       const config = sourceInfo[layerId];
       initLayer(config);
     }

src/components/LayerController/index.tsx

@@ -1,29 +1,50 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import DeckGL from 'deck.gl';
 import { OrthographicView } from '@deck.gl/core';
 import type { Layer } from '@deck.gl/core';
 
-import { viewerViewState, layersSelector } from '../state';
-import type { VivLayerProps, ZarrLoader } from '@hms-dbmi/viv';
+import { viewerViewState, layersSelector, LayerState } from '../state';
+import { isInterleaved, fitBounds } from '../utils';
 
-function WrappedViewStateDeck({ layers }: { layers: Layer<VivLayerProps>[] }): JSX.Element {
+function getLayerSize(props: LayerState['layerProps']) {
+  const { loader, rows, columns } = props;
+  const [base, maxZoom] = Array.isArray(loader) ? [loader[0], loader.length] : [loader, 0];
+  const interleaved = isInterleaved(base.shape);
+  let [height, width] = base.shape.slice(interleaved ? -3 : -2);
+  if (rows && columns) {
+    // TODO: Don't hardcode spacer size. Probably best to inspect the deck.gl Layers rather than
+    // the Layer Props.
+    const spacer = 5;
+    height = (height + spacer) * rows;
+    width = (width + spacer) * columns;
+  }
+  return { height, width, maxZoom };
+}
+
+function WrappedViewStateDeck({ layers }: { layers: Layer<any, any>[] }): JSX.Element {
   const [viewState, setViewState] = useRecoilState(viewerViewState);
+  const deckRef = useRef<DeckGL>(null);
+  const views = [new OrthographicView({ id: 'ortho', controller: true })];
 
   // If viewState hasn't been updated, use the first loader to guess viewState
   // TODO: There is probably a better place / way to set the intital view and this is a hack.
-  if (viewState?.default && (layers[0]?.props as VivLayerProps)?.loader?.base) {
-    const loader = (layers[0].props as VivLayerProps).loader as ZarrLoader;
-    const [height, width] = loader.base.shape.slice(-2);
-    const zoom = -loader.numLevels;
-    const target = [width / 2, height / 2, 0];
+  if (deckRef.current && viewState?.default && layers[0]?.props?.loader) {
+    const { deck } = deckRef.current;
+    const { width, height, maxZoom } = getLayerSize(layers[0].props);
+    const padding = deck.width < 400 ? 10 : deck.width < 600 ? 30 : 50; // Adjust depending on viewport width.
+    const { zoom, target } = fitBounds([width, height], [deck.width, deck.height], maxZoom, padding);
     setViewState({ zoom, target });
   }
 
-  const views = [new OrthographicView({ id: 'ortho', controller: true })];
-
   return (
-    <DeckGL layers={layers} viewState={viewState} onViewStateChange={(e) => setViewState(e.viewState)} views={views} />
+    <DeckGL
+      ref={deckRef}
+      layers={layers}
+      viewState={viewState}
+      onViewStateChange={(e) => setViewState(e.viewState)}
+      views={views}
+    />
   );
 }