@vitessce/spatial-utils 2.0.3-beta.0 → 3.0.0

package/dist/raw-f15bab0d.js

@@ -0,0 +1,10 @@
+import { B as BaseDecoder } from "./index-ce1fad7e.js";
+import "react";
+class RawDecoder extends BaseDecoder {
+  decodeBlock(buffer) {
+    return buffer;
+  }
+}
+export {
+  RawDecoder as default
+};

package/dist/webimage-03150187.js

@@ -0,0 +1,30 @@
+import { B as BaseDecoder } from "./index-ce1fad7e.js";
+import "react";
+class WebImageDecoder extends BaseDecoder {
+  constructor() {
+    super();
+    if (typeof createImageBitmap === "undefined") {
+      throw new Error("Cannot decode WebImage as `createImageBitmap` is not available");
+    } else if (typeof document === "undefined" && typeof OffscreenCanvas === "undefined") {
+      throw new Error("Cannot decode WebImage as neither `document` nor `OffscreenCanvas` is not available");
+    }
+  }
+  async decode(fileDirectory, buffer) {
+    const blob = new Blob([buffer]);
+    const imageBitmap = await createImageBitmap(blob);
+    let canvas;
+    if (typeof document !== "undefined") {
+      canvas = document.createElement("canvas");
+      canvas.width = imageBitmap.width;
+      canvas.height = imageBitmap.height;
+    } else {
+      canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
+    }
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(imageBitmap, 0, 0);
+    return ctx.getImageData(0, 0, imageBitmap.width, imageBitmap.height).data.buffer;
+  }
+}
+export {
+  WebImageDecoder as default
+};

package/dist-tsc/index.d.ts

@@ -0,0 +1,2 @@
+export { GLOBAL_LABELS, DEFAULT_CELLS_LAYER, DEFAULT_MOLECULES_LAYER, DEFAULT_NEIGHBORHOODS_LAYER, DEFAULT_RASTER_DOMAIN_TYPE, DEFAULT_RASTER_LAYER_PROPS, DEFAULT_LAYER_TYPE_ORDERING, square, initializeLayerChannels, initializeRasterLayersAndChannels, getSourceFromLoader, isInterleaved, isRgb, getNgffAxes, getNgffAxesForTiff, coordinateTransformationsToMatrix } from "./spatial.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

@@ -0,0 +1 @@
+export { GLOBAL_LABELS, DEFAULT_CELLS_LAYER, DEFAULT_MOLECULES_LAYER, DEFAULT_NEIGHBORHOODS_LAYER, DEFAULT_RASTER_DOMAIN_TYPE, DEFAULT_RASTER_LAYER_PROPS, DEFAULT_LAYER_TYPE_ORDERING, square, initializeLayerChannels, initializeRasterLayersAndChannels, getSourceFromLoader, isInterleaved, isRgb, getNgffAxes, getNgffAxesForTiff, coordinateTransformationsToMatrix, } from './spatial.js';

package/dist-tsc/layer-controller.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Get physical size scaling Matrix4
+ * @param {Object} loader PixelSource
+ * @returns {Object} matrix
+ */
+export function getPhysicalSizeScalingMatrix(loader: Object): Object;
+/**
+ * Get bounding cube for a given loader
+ * @param {Object} loader PixelSource|PixelSource[]
+ * @returns {Array} [0, width], [0, height], [0, depth]]
+ */
+export function getBoundingCube(loader: Object): any[];
+export function abbreviateNumber(value: any): any;
+export function getSingleSelectionStats({ loader, selection, use3d }: Object): Object;
+export function getMultiSelectionStats({ loader, selections, use3d }: {
+    loader: any;
+    selections: any;
+    use3d: any;
+}): Promise<{
+    domains: any[];
+    sliders: any[];
+}>;
+//# sourceMappingURL=layer-controller.d.ts.map

package/dist-tsc/layer-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-controller.d.ts","sourceRoot":"","sources":["../src/layer-controller.js"],"names":[],"mappings":"AAuEA;;;;GAIG;AACH,qDAHW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;GAIG;AACH,wCAHW,MAAM,SAchB;AAED,kDAwBC;AAzEM,sEALI,MAAM,GAGJ,MAAM,CAOlB;AAEM;;;;;;;GAON"}

package/dist-tsc/spatial.d.ts

@@ -0,0 +1,87 @@
+export function square(x: any, y: any, r: any): any[][];
+/**
+ * Get a representative PixelSource from a loader object returned from
+ * the Vitessce imaging loaders
+ * @param {object} loader { data: (PixelSource[]|PixelSource), metadata, channels } object
+ * @param {number=} level Level of the multiscale loader from which to get a PixelSource
+ * @returns {object} PixelSource object
+ */
+export function getSourceFromLoader(loader: object, level?: number | undefined): object;
+/**
+ * Helper method to determine whether pixel data is interleaved and rgb or not.
+ * @param {object} loader
+ * @param {array|null} channels
+ */
+export function isRgb(loader: object, channels: array | null): boolean;
+/**
+ * @param {Array.<number>} shape loader shape
+ */
+export function isInterleaved(shape: Array<number>): boolean;
+/**
+ * Initialize the channel selections for an individual layer.
+ * @param {object} loader A viv loader instance with channel names appended by Vitessce loaders
+ * of the form { data: (PixelSource[]|PixelSource), metadata: Object, channels }
+ * @returns {object[]} An array of selected channels with default
+ * domain/slider settings.
+ */
+export function initializeLayerChannels(loader: object, use3d: any): object[];
+/**
+ * Given a set of image layer loader creator functions,
+ * create loader objects for an initial layer or set of layers,
+ * which will be selected based on default values predefined in
+ * the image data file or otherwise by a heuristic
+ * (the midpoint of the layers array).
+ * @param {object[]} rasterLayers A list of layer metadata objects with
+ * shape { name, type, url, createLoader }.
+ * @param {(string[]|null)} rasterRenderLayers A list of default raster layers. Optional.
+ */
+export function initializeRasterLayersAndChannels(rasterLayers: object[], rasterRenderLayers: (string[] | null), usePhysicalSizeScaling: any): Promise<any[]>;
+export function getNgffAxes(firstMultiscalesAxes: any): {
+    type: string;
+    name: string;
+}[];
+export function getNgffAxesForTiff(dimOrder: any): any;
+/**
+ * Convert an array of coordinateTransformations objects to a 16-element
+ * plain JS array using Matrix4 linear algebra transformation functions.
+ * @param {object[]} coordinateTransformations List of objects matching the
+ * OME-NGFF v0.4 coordinateTransformations spec.
+ * @param {object[]} axes Axes in OME-NGFF v0.4 format, objects
+ * with { type, name }.
+ * @returns {Array<number>} Array of 16 numbers representing the Matrix4.
+ */
+export function coordinateTransformationsToMatrix(coordinateTransformations: object[], axes: object[]): Array<number>;
+export const GLOBAL_LABELS: string[];
+export const DEFAULT_RASTER_DOMAIN_TYPE: "Min/Max";
+export namespace DEFAULT_RASTER_LAYER_PROPS {
+    export const visible: boolean;
+    export const colormap: null;
+    export const opacity: number;
+    export { DEFAULT_RASTER_DOMAIN_TYPE as domainType };
+    export const transparentColor: number[];
+    export const renderingMode: viv.RENDERING_MODES;
+    export const use3d: boolean;
+}
+export namespace DEFAULT_MOLECULES_LAYER {
+    const opacity_1: number;
+    export { opacity_1 as opacity };
+    export const radius: number;
+    const visible_1: boolean;
+    export { visible_1 as visible };
+}
+export namespace DEFAULT_CELLS_LAYER {
+    const opacity_2: number;
+    export { opacity_2 as opacity };
+    const radius_1: number;
+    export { radius_1 as radius };
+    const visible_2: boolean;
+    export { visible_2 as visible };
+    export const stroked: boolean;
+}
+export namespace DEFAULT_NEIGHBORHOODS_LAYER {
+    const visible_3: boolean;
+    export { visible_3 as visible };
+}
+export const DEFAULT_LAYER_TYPE_ORDERING: string[];
+import { viv } from "@vitessce/gl";
+//# sourceMappingURL=spatial.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spatial.d.ts","sourceRoot":"","sources":["../src/spatial.js"],"names":[],"mappings":"AAOA,wDAEC;AAiCD;;;;;;GAMG;AACH,4CAJW,MAAM,UACN,MAAM,eACJ,MAAM,CAMlB;AAED;;;;GAIG;AACH,8BAHW,MAAM,YACN,QAAM,IAAI,WAiBpB;AAmHD;;GAEG;AACH,qCAFW,MAAO,MAAM,CAAC,WAKxB;AAED;;;;;;GAMG;AACH,gDALW,MAAM,eAEJ,MAAM,EAAE,CAuCpB;AAED;;;;;;;;;GASG;AACH,gEAJW,MAAM,EAAE,sBAER,CAAC,MAAM,EAAE,GAAC,IAAI,CAAC,+CAuEzB;AASD;;;IAuBC;AAED,uDAQC;AAED;;;;;;;;GAQG;AACH,6EANW,MAAM,EAAE,QAER,MAAM,EAAE,GAEN,MAAM,MAAM,CAAC,CA4CzB;AAtZD,qCAAwC;AAExC,mDAAoD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBpD,mDAKE"}

package/{dist → dist-tsc}/spatial.js

@@ -1,9 +1,9 @@
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash-es';
 import { Matrix4 } from 'math.gl';
 import { divide, compare, unit } from 'mathjs';
 import { VIEWER_PALETTE } from '@vitessce/utils';
 import { viv } from '@vitessce/gl';
-import { getMultiSelectionStats } from './layer-controller';
+import { getMultiSelectionStats } from './layer-controller.js';
 export function square(x, y, r) {
     return [[x, y + r], [x + r, y], [x, y - r], [x - r, y]];
 }
@@ -102,6 +102,11 @@ function getMetaWithTransformMatrices(imageMeta, imageLoaders) {
         }
         // Find the ratio of the sizes to get the scaling factor.
         const scale = sizes.map((i, k) => divide(i, minPhysicalSize[k]));
+        // sizes are special objects with own equals method - see `unit` in declaration
+        if (!sizes[0].equals(sizes[1])) {
+            // Handle scaling in the Y direction for non-square pixels
+            scale[1] = divide(sizes[1], sizes[0]);
+        }
         // Add in z dimension needed for Matrix4 scale API.
         if (!scale[2]) {
             scale[2] = 1;
@@ -279,3 +284,92 @@ export async function initializeRasterLayersAndChannels(rasterLayers, rasterRend
     const autoImageLayerDefs = await Promise.all(autoImageLayerDefPromises);
     return [autoImageLayerDefs, nextImageLoaders, nextImageMetaAndLayers];
 }
+function getDefaultAxisType(name) {
+    if (name === 't')
+        return 'time';
+    if (name === 'c')
+        return 'channel';
+    return 'space';
+}
+// Reference: https://github.com/hms-dbmi/vizarr/blob/ade9d5d71bbedc8c20357c5310557ff9a0c59ac5/src/utils.ts#LL114-L142C2
+export function getNgffAxes(firstMultiscalesAxes) {
+    // Returns axes in the latest v0.4+ format.
+    // defaults for v0.1 & v0.2
+    const defaultAxes = [
+        { type: 'time', name: 't' },
+        { type: 'channel', name: 'c' },
+        { type: 'space', name: 'z' },
+        { type: 'space', name: 'y' },
+        { type: 'space', name: 'x' },
+    ];
+    let axes = defaultAxes;
+    // v0.3 & v0.4+
+    if (firstMultiscalesAxes) {
+        axes = firstMultiscalesAxes.map((axis) => {
+            // axis may be string 'x' (v0.3) or object
+            if (typeof axis === 'string') {
+                return { name: axis, type: getDefaultAxisType(axis) };
+            }
+            const { name, type } = axis;
+            return { name, type: type ?? getDefaultAxisType(name) };
+        });
+    }
+    return axes;
+}
+export function getNgffAxesForTiff(dimOrder) {
+    return dimOrder
+        .toLowerCase()
+        .split('')
+        .map(name => ({
+        name,
+        type: getDefaultAxisType(name),
+    }));
+}
+/**
+ * Convert an array of coordinateTransformations objects to a 16-element
+ * plain JS array using Matrix4 linear algebra transformation functions.
+ * @param {object[]} coordinateTransformations List of objects matching the
+ * OME-NGFF v0.4 coordinateTransformations spec.
+ * @param {object[]} axes Axes in OME-NGFF v0.4 format, objects
+ * with { type, name }.
+ * @returns {Array<number>} Array of 16 numbers representing the Matrix4.
+ */
+export function coordinateTransformationsToMatrix(coordinateTransformations, axes) {
+    let mat = (new Matrix4()).identity();
+    if (coordinateTransformations && axes) {
+        // Get the indices of the objects corresponding to  X, Y, and Z from `axes`.
+        const xyzIndices = ['x', 'y', 'z'].map(name => axes.findIndex(axisObj => axisObj.type === 'space' && axisObj.name === name));
+        // Apply each transformation sequentially and in order according to the OME-NGFF v0.4 spec.
+        // Reference: https://ngff.openmicroscopy.org/0.4/#trafo-md
+        coordinateTransformations.forEach((transform) => {
+            if (transform.type === 'translation') {
+                const { translation: axisOrderedTranslation } = transform;
+                if (axisOrderedTranslation.length !== axes.length) {
+                    throw new Error('Length of translation array was expected to match length of axes.');
+                }
+                const defaultValue = 0;
+                // Get the translation values for [x, y, z].
+                const xyzTranslation = xyzIndices.map(axisIndex => (axisIndex >= 0
+                    ? axisOrderedTranslation[axisIndex]
+                    : defaultValue));
+                const nextMat = (new Matrix4()).translate(xyzTranslation);
+                mat = mat.multiplyLeft(nextMat);
+            }
+            if (transform.type === 'scale') {
+                const { scale: axisOrderedScale } = transform;
+                // Add in z dimension needed for Matrix4 scale API.
+                if (axisOrderedScale.length !== axes.length) {
+                    throw new Error('Length of scale array was expected to match length of axes.');
+                }
+                const defaultValue = 1;
+                // Get the scale values for [x, y, z].
+                const xyzScale = xyzIndices.map(axisIndex => (axisIndex >= 0
+                    ? axisOrderedScale[axisIndex]
+                    : defaultValue));
+                const nextMat = (new Matrix4()).scale(xyzScale);
+                mat = mat.multiplyLeft(nextMat);
+            }
+        });
+    }
+    return mat;
+}

package/dist-tsc/spatial.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=spatial.test.d.ts.map

package/dist-tsc/spatial.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial.test.d.ts","sourceRoot":"","sources":["../src/spatial.test.js"],"names":[],"mappings":""}

package/dist-tsc/spatial.test.js

@@ -0,0 +1,43 @@
+import { square, coordinateTransformationsToMatrix } from './spatial.js';
+const defaultAxes = [
+    { type: 'time', name: 't' },
+    { type: 'channel', name: 'c' },
+    { type: 'space', name: 'z' },
+    { type: 'space', name: 'y' },
+    { type: 'space', name: 'x' },
+];
+describe('Spatial.js', () => {
+    describe('square()', () => {
+        it('gives the right coordinates', () => {
+            expect(square(0, 0, 50)).toEqual([[0, 50], [50, 0], [0, -50], [-50, 0]]);
+        });
+    });
+    describe('coordinateTransformationsToMatrix', () => {
+        it('returns an Array instance', () => {
+            const transformations = [
+                {
+                    type: 'translation',
+                    translation: [0, 0, 0, 1, 1],
+                },
+                {
+                    type: 'scale',
+                    scale: [1, 1, 0.5, 0.5, 0.5],
+                },
+            ];
+            expect(coordinateTransformationsToMatrix(transformations, defaultAxes)).toEqual([
+                0.5, 0, 0, 0,
+                0, 0.5, 0, 0,
+                0, 0, 0.5, 0,
+                0.5, 0.5, 0, 1,
+            ]);
+        });
+        it('returns Identity matrix when coordinateTransformations is null', () => {
+            expect(coordinateTransformationsToMatrix(null, defaultAxes)).toEqual([
+                1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, 1, 0,
+                0, 0, 0, 1,
+            ]);
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/spatial-utils",
-  "version": "2.0.3-beta.0",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,20 +8,29 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "src",
+    "dist",
+    "dist-tsc"
   ],
   "dependencies": {
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "math.gl": "^3.5.6",
     "mathjs": "^9.2.0",
-    "@vitessce/utils": "2.0.3-beta.0",
-    "@vitessce/gl": "2.0.3-beta.0"
+    "@vitessce/gl": "3.0.0",
+    "@vitessce/utils": "3.0.0"
   },
   "scripts": {
-    "start": "tsc --watch",
-    "build": "tsc",
+    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/index.js

@@ -0,0 +1,18 @@
+export {
+  GLOBAL_LABELS,
+  DEFAULT_CELLS_LAYER,
+  DEFAULT_MOLECULES_LAYER,
+  DEFAULT_NEIGHBORHOODS_LAYER,
+  DEFAULT_RASTER_DOMAIN_TYPE,
+  DEFAULT_RASTER_LAYER_PROPS,
+  DEFAULT_LAYER_TYPE_ORDERING,
+  square,
+  initializeLayerChannels,
+  initializeRasterLayersAndChannels,
+  getSourceFromLoader,
+  isInterleaved,
+  isRgb,
+  getNgffAxes,
+  getNgffAxesForTiff,
+  coordinateTransformationsToMatrix,
+} from './spatial.js';

package/src/layer-controller.js

@@ -0,0 +1,129 @@
+import { Matrix4 } from 'math.gl';
+import { viv } from '@vitessce/gl';
+
+async function getSingleSelectionStats2D({ loader, selection }) {
+  const data = Array.isArray(loader) ? loader[loader.length - 1] : loader;
+  const raster = await data.getRaster({ selection });
+  const selectionStats = viv.getChannelStats(raster.data);
+  const { domain, contrastLimits: slider } = selectionStats;
+  return { domain, slider };
+}
+
+async function getSingleSelectionStats3D({ loader, selection }) {
+  const lowResSource = loader[loader.length - 1];
+  const { shape, labels } = lowResSource;
+  // eslint-disable-next-line no-bitwise
+  const sizeZ = shape[labels.indexOf('z')] >> (loader.length - 1);
+  const raster0 = await lowResSource.getRaster({
+    selection: { ...selection, z: 0 },
+  });
+  const rasterMid = await lowResSource.getRaster({
+    selection: { ...selection, z: Math.floor(sizeZ / 2) },
+  });
+  const rasterTop = await lowResSource.getRaster({
+    selection: { ...selection, z: Math.max(0, sizeZ - 1) },
+  });
+  const stats0 = viv.getChannelStats(raster0.data);
+  const statsMid = viv.getChannelStats(rasterMid.data);
+  const statsTop = viv.getChannelStats(rasterTop.data);
+  return {
+    domain: [
+      Math.min(stats0.domain[0], statsMid.domain[0], statsTop.domain[0]),
+      Math.max(stats0.domain[1], statsMid.domain[1], statsTop.domain[1]),
+    ],
+    slider: [
+      Math.min(
+        stats0.contrastLimits[0],
+        statsMid.contrastLimits[0],
+        statsTop.contrastLimits[0],
+      ),
+      Math.max(
+        stats0.contrastLimits[1],
+        statsMid.contrastLimits[1],
+        statsTop.contrastLimits[1],
+      ),
+    ],
+  };
+}
+
+/**
+ * Get bounding cube for a given loader i.e [[0, width], [0, height], [0, depth]]
+ * @param {Object} loader PixelSource|PixelSource[]
+ * @param {[]} selection Selection for stats.
+ * @param {boolean} use3d Whether or not to get 3d stats.
+ * @returns {Object} { domains, sliders }
+ */
+export const getSingleSelectionStats = async ({ loader, selection, use3d }) => {
+  const getStats = use3d
+    ? getSingleSelectionStats3D
+    : getSingleSelectionStats2D;
+  return getStats({ loader, selection });
+};
+
+export const getMultiSelectionStats = async ({ loader, selections, use3d }) => {
+  const stats = await Promise.all(
+    selections.map(selection => getSingleSelectionStats({ loader, selection, use3d })),
+  );
+  const domains = stats.map(stat => stat.domain);
+  const sliders = stats.map(stat => stat.slider);
+  return { domains, sliders };
+};
+
+/**
+ * Get physical size scaling Matrix4
+ * @param {Object} loader PixelSource
+ * @returns {Object} matrix
+ */
+export function getPhysicalSizeScalingMatrix(loader) {
+  const { x, y, z } = loader?.meta?.physicalSizes ?? {};
+  if (x?.size && y?.size && z?.size) {
+    const min = Math.min(z.size, x.size, y.size);
+    const ratio = [x.size / min, y.size / min, z.size / min];
+    return new Matrix4().scale(ratio);
+  }
+  return new Matrix4().identity();
+}
+
+/**
+ * Get bounding cube for a given loader
+ * @param {Object} loader PixelSource|PixelSource[]
+ * @returns {Array} [0, width], [0, height], [0, depth]]
+ */
+export function getBoundingCube(loader) {
+  const source = Array.isArray(loader) ? loader[0] : loader;
+  const { shape, labels } = source;
+  const physicalSizeScalingMatrix = getPhysicalSizeScalingMatrix(source);
+  const xSlice = [0, physicalSizeScalingMatrix[0] * shape[labels.indexOf('x')]];
+  const ySlice = [0, physicalSizeScalingMatrix[5] * shape[labels.indexOf('y')]];
+  const zSlice = [
+    0,
+    physicalSizeScalingMatrix[10] * shape[labels.indexOf('z')],
+  ];
+  return [xSlice, ySlice, zSlice];
+}
+
+export function abbreviateNumber(value) {
+  // Return an abbreviated representation of value, in 5 characters or less.
+
+  const maxLength = 5;
+  let maxNaiveDigits = maxLength;
+
+  /* eslint-disable no-plusplus */
+  if (!Number.isInteger(value)) {
+    --maxNaiveDigits;
+  } // Wasted on "."
+  if (value < 1) {
+    --maxNaiveDigits;
+  } // Wasted on "0."
+  /* eslint-disable no-plusplus */
+
+  const naive = Intl.NumberFormat('en-US', {
+    maximumSignificantDigits: maxNaiveDigits,
+    useGrouping: false,
+  }).format(value);
+  if (naive.length <= maxLength) return naive;
+
+  // "e+9" consumes 3 characters, so if we even had two significant digits,
+  // it would take take us to six characters, including the decimal point.
+  return value.toExponential(0);
+}