Merge branch 'main' into lane/DT-5996-issue-templates

AllenInstitute · Nov 20, 2024 · d7c621e · d7c621e
2 parents 73e37a4 + dbade3a
commit d7c621e
Show file tree

Hide file tree

Showing 28 changed files with 5,221 additions and 5,150 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @AllenInstitute/app-dev
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,81 @@
+### dependencies
+node_modules
+
+### production
+build
+dist
+
+### boilerplate below ###
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+# Local History for Visual Studio Code
+.history/
+
+# Jet Brains
+.idea
+
+### macos
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+.env.test
+
+# code coverage
+coverage
+
+# Lock files
+package-lock.json
+pnpm-lock.yaml
diff --git a/README.md b/README.md
@@ -17,6 +17,12 @@ For details on running or adding new examples, see the `docs/examples.md` file.
 
 Contributions are welcome! We're currently breaking apart the Scattebrain component into smaller, more manageable packages. If you have a package that you think would be useful to others, please open a PR.
 
+# Installation for Development
+
+This project uses [Node.js](https://nodejs.org) and [pnpm](https://pnpm.io/). We use [Volta](https://volta.sh/) to manage the versions of each. If you're not using Volta, check the "volta" key in the root `package.json` for the Node and pnpm versions we're using when developing.
+
+Volta has experimental support for pnpm, so [follow the steps on their docs](https://docs.volta.sh/advanced/pnpm) to get it enabled.
+
 # Using the Libraries
 
 See the `docs/using-packages.md` file for information on how to use the packages in your own projects.
diff --git a/examples/index.html b/examples/index.html
@@ -5,6 +5,7 @@
         <br />
         <ul>
             <li><a href="/dzi">Deep Zoom Image</a><br /></li>
+            <li><a href="/omezarr">OMEZARR</a><br /></li>
             <li><a href="/layers">Layers</a><br /></li>
         </ul>
     </body>

diff --git a/examples/omezarr.html b/examples/omezarr.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+    <body>
+        <div
+            id="sidebar"
+            style="top: 0; left: 0; width: 15%; height: 100%; position: absolute"
+        ></div>
+        <div
+            id="main"
+            style="top: 0; left: 15%; width: 85%; height: 100%; position: absolute"
+        />
+    </body>
+</html>
+<script
+    type="module"
+    src="./src/omezarr/omezarr.ts"
+></script>
diff --git a/examples/package.json b/examples/package.json
@@ -46,6 +46,7 @@
         "@alleninstitute/vis-geometry": "workspace:*",
         "@alleninstitute/vis-scatterbrain": "workspace:*",
         "@alleninstitute/vis-dzi": "workspace:*",
+        "@alleninstitute/vis-omezarr": "workspace:*",
         "@czi-sds/components": "^20.0.1",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",

diff --git a/examples/src/common/loaders/ome-zarr/fetchSlice.worker.ts b/examples/src/common/loaders/ome-zarr/fetchSlice.worker.ts
@@ -1,6 +1,6 @@
 // a web-worker which fetches slices of data, decodes them, and returns the result as a flat float32 array, using transferables
 import type { Chunk } from 'zarrita';
-import { getSlice, type ZarrDataset, type ZarrRequest } from './zarr-data';
+import { type ZarrDataset, type ZarrRequest, getSlice } from '@alleninstitute/vis-omezarr';
 
 const ctx = self;
 type ZarrSliceRequest = {

diff --git a/examples/src/common/loaders/ome-zarr/sliceWorkerPool.ts b/examples/src/common/loaders/ome-zarr/sliceWorkerPool.ts
@@ -1,5 +1,5 @@
 import { uniqueId } from 'lodash';
-import type { ZarrDataset, ZarrRequest } from './zarr-data';
+import type { ZarrDataset, ZarrRequest } from '@alleninstitute/vis-omezarr';
 
 type PromisifiedMessage = {
     requestCacheKey: string;

diff --git a/examples/src/dzi/render-server-provider.tsx → ...c/common/react/render-server-provider.tsx b/examples/src/dzi/render-server-provider.tsx → ...c/common/react/render-server-provider.tsx
@@ -7,7 +7,8 @@ export function RenderServerProvider(props: PropsWithChildren<{}>) {
     const server = useRef<RenderServer>();
     const { children } = props;
     useEffect(() => {
-        server.current = new RenderServer([2048, 2048], []);
+        server.current = new RenderServer([2048, 2048], ['oes_texture_float']);
+        console.log('server started...');
     }, []);
     return <renderServerContext.Provider value={server.current ?? null}>{children}</renderServerContext.Provider>;
 }
diff --git a/examples/src/data-renderers/versa-renderer.ts b/examples/src/data-renderers/versa-renderer.ts
@@ -7,7 +7,7 @@ import {
     sizeInUnits,
     type ZarrDataset,
     type ZarrRequest,
-} from '~/common/loaders/ome-zarr/zarr-data';
+} from '@alleninstitute/vis-omezarr';
 import { getSlicePool } from '~/common/loaders/ome-zarr/sliceWorkerPool';
 import type { Camera } from '~/common/camera';
 

diff --git a/examples/src/data-renderers/volumeSliceRenderer.ts b/examples/src/data-renderers/volumeSliceRenderer.ts
@@ -12,7 +12,7 @@ import {
     sizeInVoxels,
     sliceDimensionForPlane,
     uvForPlane,
-} from '~/common/loaders/ome-zarr/zarr-data';
+} from '@alleninstitute/vis-omezarr';
 import {
     cacheKeyFactory,
     getVisibleTiles,

diff --git a/examples/src/data-sources/ome-zarr/planar-slice.ts b/examples/src/data-sources/ome-zarr/planar-slice.ts
@@ -1,4 +1,4 @@
-import { type ZarrDataset, load } from '~/common/loaders/ome-zarr/zarr-data';
+import { loadMetadata, type ZarrDataset } from '@alleninstitute/vis-omezarr';
 import type { AxisAlignedPlane } from '~/data-renderers/versa-renderer';
 import type { ColorMapping } from '../../data-renderers/types';
 import type { OptionalTransform, Simple2DTransform } from '../types';
@@ -32,7 +32,7 @@ function assembleZarrSlice(config: ZarrSliceConfig, dataset: ZarrDataset): AxisA
 }
 export function createZarrSlice(config: ZarrSliceConfig): Promise<AxisAlignedZarrSlice> {
     const { url } = config;
-    return load(url).then((dataset) => {
+    return loadMetadata(url).then((dataset) => {
         return assembleZarrSlice(config, dataset);
     });
 }
diff --git a/examples/src/data-sources/ome-zarr/slice-grid.ts b/examples/src/data-sources/ome-zarr/slice-grid.ts
@@ -1,4 +1,4 @@
-import { type ZarrDataset, load } from '~/common/loaders/ome-zarr/zarr-data';
+import { loadMetadata, type ZarrDataset } from '@alleninstitute/vis-omezarr';
 import type { AxisAlignedPlane } from '~/data-renderers/versa-renderer';
 import type { ColorMapping } from '../../data-renderers/types';
 import type { OptionalTransform, Simple2DTransform } from '../types';
@@ -33,7 +33,7 @@ function assembleZarrSliceGrid(config: ZarrSliceGridConfig, dataset: ZarrDataset
 }
 export function createZarrSliceGrid(config: ZarrSliceGridConfig): Promise<AxisAlignedZarrSliceGrid> {
     const { url } = config;
-    return load(url).then((dataset) => {
+    return loadMetadata(url).then((dataset) => {
         return assembleZarrSliceGrid(config, dataset);
     });
 }
diff --git a/examples/src/dzi/double.tsx b/examples/src/dzi/double.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { RenderServerProvider } from './render-server-provider';
+import { RenderServerProvider } from '../common/react/render-server-provider';
 import React from 'react';
 import { DziView } from './dziView';
 import type { DziImage, DziRenderSettings } from '@alleninstitute/vis-dzi';

diff --git a/examples/src/dzi/dziView.tsx b/examples/src/dzi/dziView.tsx
@@ -10,7 +10,7 @@ import {
 import React from 'react';
 import { buildAsyncRenderer, type RenderFrameFn } from '@alleninstitute/vis-scatterbrain';
 import { isEqual } from 'lodash';
-import { renderServerContext } from './render-server-provider';
+import { renderServerContext } from '../common/react/render-server-provider';
 import { Vec2, type vec2 } from '@alleninstitute/vis-geometry';
 
 type Props = {

diff --git a/examples/src/layers.ts b/examples/src/layers.ts
@@ -46,7 +46,7 @@ import { buildLoopRenderer, buildMeshRenderer } from './data-renderers/mesh-rend
 import { saveAs } from 'file-saver';
 import type { AnnotationGrid, AnnotationGridConfig } from './data-sources/annotation/annotation-grid';
 import { buildRenderer } from './data-renderers/scatterplot';
-import { sizeInUnits } from './common/loaders/ome-zarr/zarr-data';
+import { sizeInUnits } from '@alleninstitute/vis-omezarr';
 import type { ColumnRequest } from './common/loaders/scatterplot/scatterbrain-loader';
 import { buildVersaRenderer, type AxisAlignedPlane } from './data-renderers/versa-renderer';
 import { buildImageRenderer } from './common/image-renderer';

diff --git a/examples/src/omezarr/app.tsx b/examples/src/omezarr/app.tsx
@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react';
+import { RenderServerProvider } from '~/common/react/render-server-provider';
+import { SliceView } from './sliceview';
+import { type OmeZarrDataset, loadOmeZarr } from '@alleninstitute/vis-omezarr';
+
+const demo_versa = 'https://neuroglancer-vis-prototype.s3.amazonaws.com/VERSA/scratch/0500408166/';
+
+export function AppUi() {
+    return <DataPlease />;
+}
+
+function DataPlease() {
+    // load our canned data for now:
+    const [omezarr, setfile] = useState<OmeZarrDataset | undefined>(undefined);
+    useEffect(() => {
+        loadOmeZarr(demo_versa).then((dataset) => {
+            setfile(dataset);
+            console.log('loaded!');
+        });
+    }, []);
+    return (
+        <RenderServerProvider>
+            <SliceView omezarr={omezarr} />
+        </RenderServerProvider>
+    );
+}
diff --git a/examples/src/omezarr/omezarr.ts b/examples/src/omezarr/omezarr.ts
@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+import { AppUi } from './app';
+
+const uiroot = createRoot(document.getElementById('main')!);
+uiroot.render(AppUi());
diff --git a/examples/src/omezarr/sliceview.tsx b/examples/src/omezarr/sliceview.tsx
@@ -0,0 +1,99 @@
+import { type box2D, Box2D, Vec2 } from '@alleninstitute/vis-geometry';
+import {
+    buildAsyncOmezarrRenderer,
+    defaultDecoder,
+    type VoxelTile,
+    type ZarrDataset,
+    type RenderSettings,
+} from '@alleninstitute/vis-omezarr';
+import type { RenderFrameFn } from '@alleninstitute/vis-scatterbrain';
+import React, { useState } from 'react';
+import { useContext, useEffect, useRef } from 'react';
+import { renderServerContext } from '~/common/react/render-server-provider';
+type Props = {
+    omezarr: ZarrDataset | undefined;
+};
+const settings: RenderSettings = {
+    tileSize: 256,
+    gamut: {
+        R: { gamut: { min: 0, max: 80 }, index: 0 },
+        G: { gamut: { min: 0, max: 100 }, index: 1 },
+        B: { gamut: { min: 0, max: 100 }, index: 2 },
+    },
+    plane: 'xy',
+    planeIndex: 0,
+    camera: {
+        view: Box2D.create([0, 0], [250, 120]),
+        screenSize: [500, 500],
+    },
+};
+function compose(ctx: CanvasRenderingContext2D, image: ImageData) {
+    ctx.putImageData(image, 0, 0);
+}
+
+export function SliceView(props: Props) {
+    const { omezarr } = props;
+    const server = useContext(renderServerContext);
+    const cnvs = useRef<HTMLCanvasElement>(null);
+    const renderer = useRef<ReturnType<typeof buildAsyncOmezarrRenderer>>();
+    const [view, setView] = useState<box2D>(Box2D.create([0, 0], [250, 120]));
+    useEffect(() => {
+        if (server && server.regl) {
+            renderer.current = buildAsyncOmezarrRenderer(server.regl, defaultDecoder);
+        }
+        return () => {
+            if (cnvs.current) {
+                server?.destroyClient(cnvs.current);
+            }
+        };
+    }, [server]);
+
+    useEffect(() => {
+        if (server && renderer.current && cnvs.current && omezarr) {
+            const hey: RenderFrameFn<ZarrDataset, VoxelTile> = (target, cache, callback) => {
+                if (renderer.current) {
+                    return renderer.current(
+                        omezarr,
+                        { ...settings, camera: { ...settings.camera, view } },
+                        callback,
+                        target,
+                        cache
+                    );
+                }
+                return null;
+            };
+            server.beginRendering(
+                hey,
+                (e) => {
+                    switch (e.status) {
+                        case 'begin':
+                            server.regl?.clear({ framebuffer: e.target, color: [0, 0, 0, 0], depth: 1 });
+                            break;
+                        case 'progress':
+                            // wanna see the tiles as they arrive?
+                            e.server.copyToClient(compose);
+                            break;
+                        case 'finished': {
+                            e.server.copyToClient(compose);
+                        }
+                    }
+                },
+                cnvs.current
+            );
+        }
+    }, [server, renderer.current, cnvs.current, omezarr, view]);
+    return (
+        <canvas
+            id={'hey there'}
+            ref={cnvs}
+            onWheel={(e) => {
+                const scale = e.deltaY > 0 ? 1.1 : 0.9;
+                const m = Box2D.midpoint(view);
+                const v = Box2D.translate(Box2D.scale(Box2D.translate(view, Vec2.scale(m, -1)), [scale, scale]), m);
+                setView(v);
+            }}
+            width={settings.camera.screenSize[0]}
+            height={settings.camera.screenSize[1]}
+        ></canvas>
+    );
+}
diff --git a/package.json b/package.json
@@ -17,5 +17,9 @@
         "prettier": "3.3.2",
         "process": "^0.11.10",
         "typescript": "^5.3.3"
+    },
+    "volta": {
+        "node": "22.11.0",
+        "pnpm": "9.14.2"
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ @@
             <br />
             <ul>
                 <li><a href="/dzi">Deep Zoom Image</a><br /></li>
+                <li><a href="/omezarr">OMEZARR</a><br /></li>
                 <li><a href="/layers">Layers</a><br /></li>
             </ul>
         </body>
@@ Expand Down @@