AllenInstitute · froyo-np · Nov 20, 2024 · Oct 24, 2024 · Oct 28, 2024 · Oct 28, 2024
@@ -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>

@@ -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>
@@ -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",

@@ -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 = {

@@ -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;

@@ -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>;
 }
@@ -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';
 

@@ -12,7 +12,7 @@ import {
     sizeInVoxels,
     sliceDimensionForPlane,
     uvForPlane,
-} from '~/common/loaders/ome-zarr/zarr-data';
+} from '@alleninstitute/vis-omezarr';
 import {
     cacheKeyFactory,
     getVisibleTiles,

@@ -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);
     });
 }
@@ -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);
     });
 }
@@ -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';

@@ -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 = {

@@ -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';

@@ -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>
+    );
+}
@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+import { AppUi } from './app';
+
+const uiroot = createRoot(document.getElementById('main')!);
+uiroot.render(AppUi());
@@ -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>
+    );
+}
@@ -0,0 +1,58 @@
+{
+    "name": "@alleninstitute/vis-omezarr",
+    "version": "0.0.1",
+    "contributors": [
+        {
+            "name": "Lane Sawyer",
+            "email": "[email protected]"
+        },
+        {
+            "name": "Noah Shepard",
+            "email": "[email protected]"
+        },
+        {
+            "name": "Skyler Moosman",
+            "email": "[email protected]"
+        },
+        {
+            "name": "Su Li",
+            "email": "[email protected]"
+        }
+    ],
+    "license": "BSD-3-Clause",
+    "source": "src/index.ts",
+    "main": "dist/main.js",
+    "module": "dist/module.js",
+    "types": "dist/types.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "preinstall": "npx only-allow pnpm",
+        "typecheck": "tsc --noEmit",
+        "build": "parcel build --no-cache",
+        "dev": "vite",
+        "test": "vitest --watch"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/AllenInstitute/vis.git"
+    },
+    "publishConfig": {
+        "registry": "https://npm.pkg.github.com/AllenInstitute"
+    },
+    "devDependencies": {
+        "@types/lodash": "^4.14.202",
+        "typescript": "^5.3.3",
+        "parcel": "2.12.0",
+        "@parcel/packager-ts": "^2.12.0",
+        "@parcel/transformer-typescript-types": "^2.12.0"
+    },
+    "dependencies": {
+        "@alleninstitute/vis-geometry": "workspace:*",
+        "@alleninstitute/vis-scatterbrain": "workspace:*",
+        "lodash": "^4.17.21",
+        "regl": "^2.1.0",
+        "zarrita": "0.4.0-next.14"
+    }
+}
@@ -0,0 +1,21 @@
+export {
+    type OmeZarrDataset,
+    buildOmeZarrSliceRenderer,
+    buildAsyncOmezarrRenderer,
+    type VoxelTileImage,
+} from './sliceview/slice-renderer';
+export { type VoxelTile, defaultDecoder, getVisibleTiles } from './sliceview/loader';
+export { buildTileRenderer } from './sliceview/tile-renderer';
+export { load as loadOmeZarr } from './zarr-data';
+export {
+    loadMetadata,
+    pickBestScale,
+    getSlice,
+    sizeInUnits,
+    sizeInVoxels,
+    sliceDimensionForPlane,
+    uvForPlane,
+    planeSizeInVoxels,
+    type ZarrDataset,
+    type ZarrRequest,
+} from './zarr-data';
-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 @@