High Content Screening

README.md

@@ -53,7 +53,7 @@ Please see the [tutorial](./tutorial/README.md) for more information.
 ## 💽 Installation
 
 ```bash
-$ npm install @hms-dbmi/viv
+$ npm install @labshare/viv
 ```
 
 You will also need to install [deck.gl](https://deck.gl) and other `peerDependencies` manually.
@@ -90,7 +90,7 @@ current versions are tested in our CI by naviating to our
 
 ## 🛠️  Build
 
-- `@hms-dbmi/viv` library: `npm run build`
+- `@labshare/viv` library: `npm run build`
 - `Avivator` viewer: `npm run build:avivator`
 
 ## 📄 Publish

avivator/src/components/Controller/components/CameraOptions.jsx

@@ -7,7 +7,7 @@ import { makeStyles, createStyles } from '@material-ui/core/styles';
 import shallow from 'zustand/shallow';
 
 // eslint-disable-next-line import/no-unresolved
-import { getDefaultInitialViewState } from '@hms-dbmi/viv';
+import { getDefaultInitialViewState } from '@labshare/viv';
 import {
   useImageSettingsStore,
   useViewerStore,

avivator/src/components/Controller/components/RenderingModeSelect.jsx

@@ -5,7 +5,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 import shallow from 'zustand/shallow';
 
 // eslint-disable-next-line import/no-unresolved
-import { RENDERING_MODES } from '@hms-dbmi/viv';
+import { RENDERING_MODES } from '@labshare/viv';
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
 const renderingOptions = Object.values(RENDERING_MODES);

avivator/src/components/RenderingModeSelect.jsx

@@ -3,7 +3,7 @@ import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
 
-import { RENDERING_MODES } from '@hms-dbmi/viv'; // eslint-disable-line import/no-unresolved
+import { RENDERING_MODES } from '@labshare/viv'; // eslint-disable-line import/no-unresolved
 
 function RenderingModeSelect({ value, handleChange, disabled }) {
   return (

avivator/src/components/Viewer.jsx

@@ -9,7 +9,7 @@ import {
   AdditiveColormapExtension,
   LensExtension
   // eslint-disable-next-line import/no-unresolved
-} from '@hms-dbmi/viv';
+} from '@labshare/viv';
 import {
   useImageSettingsStore,
   useViewerStore,

avivator/src/state.js

@@ -2,7 +2,7 @@
 import create from 'zustand';
 
 // eslint-disable-next-line import/no-unresolved
-import { RENDERING_MODES } from '@hms-dbmi/viv';
+import { RENDERING_MODES } from '@labshare/viv';
 
 const captialize = string => string.charAt(0).toUpperCase() + string.slice(1);
 

avivator/src/utils.js

@@ -11,7 +11,7 @@ import {
   ColorPalette3DExtensions,
   AdditiveColormap3DExtensions
   // eslint-disable-next-line import/no-unresolved
-} from '@hms-dbmi/viv';
+} from '@labshare/viv';
 
 import { GLOBAL_SLIDER_DIMENSION_FIELDS } from './constants';
 

docs/SAMPLES.md

@@ -15,7 +15,7 @@ import {
   getChannelStats,
   loadOmeTiff,
   PictureInPictureViewer,
-} from '@hms-dbmi/viv';
+} from '@labshare/viv';
 
 const url = 'http://localhost:8000/LuCa-7color_Scan1.ome.tif'; // OME-TIFF
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@hms-dbmi/viv",
-  "version": "0.12.9",
+  "name": "@labshare/viv",
+  "version": "0.12.12",
   "main": "dist/viv.es.js",
   "module": "dist/viv.es.js",
   "types": "dist/index.d.ts",

src/layers/MultiscaleImageLayer/MultiscaleImageLayer.js

@@ -21,7 +21,7 @@ const defaultProps = {
   maxRequests: { type: 'number', value: 10, compare: true },
   onClick: { type: 'function', value: null, compare: true },
   refinementStrategy: { type: 'string', value: null, compare: true },
-  excludeBackground: { type: 'boolean', value: false, compare: true },
+  excludeBackground: { type: 'boolean', value: true, compare: true },
   extensions: {
     type: 'array',
     value: [new ColorPaletteExtension()],

src/viewers/PictureInPictureViewer.jsx

@@ -17,6 +17,11 @@ import { ColorPaletteExtension } from '../extensions';
  * @param {Array} props.channelsVisible List of boolean values for each channel for whether or not it is visible.
  * @param {string} [props.colormap] String indicating a colormap (default: '').  The full list of options is here: https://github.com/glslify/glsl-colormap#glsl-colormap
  * @param {Array} props.loader The data source for the viewer, PixelSource[]. If loader.length > 1, data is assumed to be multiscale.
+ * @param {Object} props.gridLoaders
+ * @param {Array} props.gridLoaders.loaders Array of loaders
+ * @param {Number} props.gridLoaders.spacingX Horizontal spacing between datasets
+ * @param {Number} props.gridLoaders.spacingY Vertical spacing between datasets
+ * @param {Number} props.gridLoaders.numberOfColumns This determines after how many datasets a new row should be started
  * @param {Array} props.selections Selection to be used for fetching data.
  * @param {Object} props.overview Allows you to pass settings into the OverviewView: { scale, margin, position, minimumWidth, maximumWidth,
  * boundingBoxColor, boundingBoxOutlineWidth, viewportOutlineColor, viewportOutlineWidth}.  See http://viv.gehlenborglab.org/#overviewview for defaults.
@@ -47,7 +52,7 @@ import { ColorPaletteExtension } from '../extensions';
 
 const PictureInPictureViewer = props => {
   const {
-    loader,
+    gridLoaders,
     contrastLimits,
     colors,
     channelsVisible,
@@ -72,6 +77,7 @@ const PictureInPictureViewer = props => {
     extensions = [new ColorPaletteExtension()],
     deckProps
   } = props;
+  const loader = props.loader !== undefined ? props.loader : props?.gridLoaders?.loaders?.[0];
   const detailViewState = viewStatesProp?.find(v => v.id === DETAIL_VIEW_ID);
   const baseViewState = useMemo(() => {
     return (
@@ -125,6 +131,7 @@ const PictureInPictureViewer = props => {
   if (!loader) return null;
   return (
     <VivViewer
+      gridLoaders={gridLoaders}
       layerProps={layerProps}
       views={views}
       viewStates={viewStates}

src/viewers/VivViewer.jsx

@@ -3,6 +3,7 @@ import DeckGL from '@deck.gl/react';
 // No need to use the ES6 or React variants.
 import equal from 'fast-deep-equal';
 import { getVivId } from '../views/utils';
+import { Matrix4 } from 'math.gl';
 
 const areViewStatesEqual = (viewState, otherViewState) => {
   return (
@@ -260,7 +261,7 @@ class VivViewerWrapper extends PureComponent {
   /**
    * This renders the layers in the DeckGL context.
    */
-  _renderLayers() {
+  _renderLayers(loader) {
     const { onHover } = this;
     const { viewStates } = this.state;
     const { views, layerProps } = this.props;
@@ -269,6 +270,7 @@ class VivViewerWrapper extends PureComponent {
         viewStates,
         props: {
           ...layerProps[i],
+          ...(loader !== undefined ? { loader } : {}),
           onHover
         }
       })
@@ -297,15 +299,34 @@ class VivViewerWrapper extends PureComponent {
       deckGLViews[0] = deckGLViews[randomizedIndex];
       deckGLViews[randomizedIndex] = holdFirstElement;
     }
+
+    const IDENTITY = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+    const layers =
+      this.props.gridLoaders === undefined
+        ? this._renderLayers()
+        : this.props.gridLoaders.loaders.map((loader, i) => {
+            const modelMatrix = new Matrix4(IDENTITY).translate([
+              this.props.gridLoaders.spacingX *
+                (i % this.props.gridLoaders.numberOfColumns),
+              this.props.gridLoaders.spacingY *
+                Math.floor(i / this.props.gridLoaders.numberOfColumns),
+              0
+            ]);
+            return this._renderLayers(loader)[0][0].clone({
+              id: 'ZarrPixelSource-' + i + '-#detail#',
+              modelMatrix
+            });
+          });
+
     return (
       <DeckGL
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...(deckProps ?? {})}
         layerFilter={this.layerFilter}
         layers={
           deckProps?.layers === undefined
-            ? [...this._renderLayers()]
-            : [...this._renderLayers(), ...deckProps.layers]
+            ? [...layers]
+            : [...layers, ...deckProps.layers]
         }
         onViewStateChange={this._onViewStateChange}
         views={deckGLViews}
@@ -322,6 +343,11 @@ class VivViewerWrapper extends PureComponent {
 /**
  * This component wraps the DeckGL component.
  * @param {Object} props
+ * @param {Object} props.gridLoaders
+ * @param {Array} props.gridLoaders.loaders Array of loaders
+ * @param {Number} props.gridLoaders.spacingX Horizontal spacing between datasets
+ * @param {Number} props.gridLoaders.spacingY Vertical spacing between datasets
+ * @param {Number} props.gridLoaders.numberOfColumns This determines after how many datasets a new row should be started
  * @param {Array} props.layerProps  Props for the layers in each view.
  * @param {boolean} [props.randomize] Whether or not to randomize which view goes first (for dynamic rendering of multiple linked views).
  * @param {Array.<import('../views').VivView>} props.views Various `VivView`s to render.

vite.config.js

@@ -87,7 +87,7 @@ const configAvivator = defineConfig({
   },
   resolve: {
     alias: {
-      '@hms-dbmi/viv': resolve(__dirname, 'src'),
+      '@labshare/viv': resolve(__dirname, 'src'),
       'react': resolve(__dirname, 'avivator/node_modules/react'),
       'react-dom': resolve(__dirname, 'avivator/node_modules/react-dom'),
     },