await all promises

Signed-off-by: Alex Pickering <[email protected]>

src/components/data-exploration/DynamicESMWrappers.jsx

@@ -4,12 +4,7 @@
 import { Heatmap } from '@vitessce/heatmap';
 import { Scatterplot } from '@vitessce/scatterplot';
 import { Spatial } from '@vitessce/spatial';
-import {
-  root, open, slice, get,
-} from 'zarrita';
-import { ZipFileStore } from '@zarrita/storage';
-import { ZarrPixelSource } from '@hms-dbmi/viv';
 
 export {
-  Heatmap, Scatterplot, Spatial, root, open, slice, get, ZipFileStore, ZarrPixelSource,
+  Heatmap, Scatterplot, Spatial,
 };

src/components/data-exploration/spatial/SpatialViewer.jsx

@@ -21,6 +21,9 @@ import { updateCellInfo } from 'redux/actions/cellInfo';
 import { union } from 'utils/cellSetOperations';
 import _ from 'lodash';
 
+import { ZipFileStore } from '@zarrita/storage';
+import { root as zarrRoot } from 'zarrita';
+
 import {
   filterCentroidsData,
   offsetCentroids,
@@ -40,16 +43,6 @@ const Spatial = dynamic(
   { ssr: false },
 );
 
-const zarrRoot = dynamic(
-  () => import('../DynamicESMWrappers').then((mod) => mod.root),
-  { ssr: false },
-);
-
-const ZipFileStore = dynamic(
-  () => import('../DynamicESMWrappers').then((mod) => mod.ZipFileStore),
-  { ssr: false },
-);
-
 const imageLayerDefsDefault = [
   {
     channels: [

src/components/data-exploration/spatial/createZarrArrayAdapter.js

@@ -1,15 +1,5 @@
 // from https://github.com/vitessce/vitessce/blob/main/packages/utils/zarr-utils/src/adapter.ts
-import dynamic from 'next/dynamic';
-
-const slice = dynamic(
-  () => import('../DynamicESMWrappers').then((mod) => mod.slice),
-  { ssr: false },
-);
-
-const get = dynamic(
-  () => import('../DynamicESMWrappers').then((mod) => mod.get),
-  { ssr: false },
-);
+import { slice, get } from 'zarrita';
 
 // use background color of tile for transparent data
 const SPATIAL_BACKGROUND_COLOR = { 0: 246, 1: 247, 2: 249 };

src/components/data-exploration/spatial/loadOmeZarr.js

@@ -1,19 +1,10 @@
 // from https://github.com/vitessce/vitessce/blob/main/packages/utils/spatial-utils/src/load-ome-zarr.js
 // should be able to import { loadOmeZarr } from '@vitessce/spatial-utils' but it doesn't work!
 
-import dynamic from 'next/dynamic';
+import { open as zarrOpen } from 'zarrita';
+import { ZarrPixelSource } from '@hms-dbmi/viv';
 import { createZarrArrayAdapter, createZarrArrayAdapterGrid } from './createZarrArrayAdapter';
 
-const ZarrPixelSource = dynamic(
-  () => import('../DynamicESMWrappers').then((mod) => mod.ZarrPixelSource),
-  { ssr: false },
-);
-
-const zarrOpen = dynamic(
-  () => import('../DynamicESMWrappers').then((mod) => mod.open),
-  { ssr: false },
-);
-
 function prevPowerOf2(x) {
   return 2 ** Math.floor(Math.log2(x));
 }
@@ -99,12 +90,12 @@ export async function loadOmeZarr(root) {
   const { data, rootAttrs, labels } = await loadMultiscales(root);
 
   const tileSize = guessTileSize(data[0]);
-  const pyramid = data
+  const pyramid = await Promise.all(data
     .map((arr) => createPixelSource(
       createZarrArrayAdapter(arr),
       labels,
       tileSize,
-    ));
+    )));
 
   return {
     data: pyramid,
@@ -125,14 +116,14 @@ export async function loadOmeZarrGrid(roots, gridSize) {
   const { shape } = dataGroups[0][0];
 
   // Create adapters for each image pair in the grid
-  const pyramid = dataGroups[0].map((_, resolution) => {
+  const pyramid = await Promise.all(dataGroups[0].map((_, resolution) => {
     const arrs = dataGroups.map((group) => group[resolution]);
     return createPixelSource(
       createZarrArrayAdapterGrid(arrs, gridSize),
       labels,
       tileSize,
     );
-  });
+  }));
 
   return {
     data: pyramid,