chore: Cleanup & reorganization of Examples in Vis Docs

site/src/content/docs/examples/omezarr1.mdx

@@ -0,0 +1,8 @@
+---
+title: OME-Zarr
+tableOfContents: false
+---
+
+import { OmezarrDemo } from '../../../examples/omezarr/selectable-image-demo/omezarr-demo.tsx';
+
+<OmezarrDemo client:only="react" />

site/src/content/docs/examples/omezarr2-priority.mdx

@@ -0,0 +1,8 @@
+---
+title: OME-Zarr with Priority Cache
+tableOfContents: false
+---
+
+import { OmezarrDemo } from '../../../examples/omezarr/priority-cache-demo/omezarr-via-priority-cache.tsx';
+
+<OmezarrDemo client:only="react" />

site/src/content/docs/examples/omezarr3-gallery.mdx

@@ -0,0 +1,8 @@
+---
+title: OME-Zarr Gallery (multiple views, shared data)
+tableOfContents: false
+---
+
+import { OmezarrGalleryDemo } from '../../../examples/omezarr/gallery-demo/omezarr-gallery.tsx';
+
+<OmezarrGalleryDemo client:only="react" />

site/src/content/docs/index.mdx

@@ -8,7 +8,7 @@ hero:
     file: ../../assets/umap.png
   actions:
     - text: Examples
-      link: /vis/examples/ome-zarr
+      link: /vis/examples/omezarr1
       icon: right-arrow
     - text: Read the docs
       link: /vis/getting-started/packages/

site/src/examples/omezarr/omezarr-via-priority-cache.tsx → site/src/examples/common/filesets/omezarr.ts

@@ -1,12 +1,8 @@
-/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <explanation> */
-/** biome-ignore-all lint/performance/noAccumulatingSpread: <explanation> */
-import type { vec2 } from '@alleninstitute/vis-geometry';
 import type { WebResource } from '@alleninstitute/vis-core';
-import { SharedCacheProvider } from '../common/react/priority-cache-provider';
-import { OmeZarrView } from './omezarr-client';
-type DemoOption = { value: string; label: string; res: WebResource };
 
-const demoOptions: DemoOption[] = [
+export type OmeZarrDemoFileset = { value: string; label: string; res: WebResource };
+
+export const OMEZARR_DEMO_FILESETS: OmeZarrDemoFileset[] = [
     {
         value: 'opt1',
         label: 'VERSA OME-Zarr Example (HTTPS) (color channels: [R, G, B])',
@@ -41,6 +37,15 @@ const demoOptions: DemoOption[] = [
     },
     {
         value: 'opt5',
+        label: 'Smart-SPIM (experimental)',
+        res: {
+            type: 's3',
+            region: 'us-west-2',
+            url: 's3://aind-open-data/SmartSPIM_787715_2025-04-08_18-33-36_stitched_2025-04-09_22-42-59/image_tile_fusing/OMEZarr/Ex_445_Em_469.zarr',
+        },
+    },
+    {
+        value: 'opt6',
         label: 'SmartSpim Lightsheet',
         res: {
             type: 's3',
@@ -49,22 +54,30 @@ const demoOptions: DemoOption[] = [
         },
     },
     {
-        value: 'opt6',
+        value: 'opt7',
+        label: 'V3 Zarr Example Image (S3) (color channels: [R, G, B])',
+        res: {
+            type: 's3',
+            region: 'us-west-2',
+            url: 's3://h301-scanning-802451596237-us-west-2/2402091625/ome_zarr_conversion/1458501514.zarr/',
+        },
+    },
+    {
+        value: 'opt8',
         label: 'STPT V3 example',
         res: {
             type: 's3',
             region: 'us-west-2',
             url: 's3://public-development-802451596237-us-west-2/tissuecyte/478097069/ome_zarr_conversion/478097069.zarr/',
         },
     },
+    {
+        value: 'opt9',
+        label: 'Tissuecyte #1196424284',
+        res: {
+            type: 's3',
+            region: 'us-west-2',
+            url: 's3://allen-genetic-tools/tissuecyte/1196424284/ome_zarr_conversion/1196424284.zarr/',
+        },
+    },
 ];
-
-const screenSize: vec2 = [800, 800];
-
-export function OmezarrDemo() {
-    return (
-        <SharedCacheProvider>
-            <OmeZarrView res={demoOptions[5].res} screenSize={screenSize} />
-        </SharedCacheProvider>
-    );
-}

site/src/examples/omezarr/omezarr-gallery.tsx → site/src/examples/omezarr/gallery-demo/omezarr-gallery.tsx

@@ -1,22 +1,12 @@
 import type { WebResource } from '@alleninstitute/vis-core';
-import { SharedCacheProvider } from '../common/react/priority-cache-provider';
-import { OmeZarrView } from './omezarr-client';
+import { SharedCacheProvider } from '../../common/react/priority-cache-provider';
+import { OmeZarrView } from '../priority-cache-demo/omezarr-client';
 import type { vec2 } from '@alleninstitute/vis-geometry';
+import { OMEZARR_DEMO_FILESETS } from 'src/examples/common/filesets/omezarr';
 
-const tissuecyte_1: WebResource = {
-    type: 's3',
-    region: 'us-west-2',
-    url: 's3://allen-genetic-tools/tissuecyte/823818122/ome_zarr_conversion/823818122.zarr/',
-};
-const tissuecyte_2: WebResource = {
-    type: 's3',
-    region: 'us-west-2',
-    url: 's3://allen-genetic-tools/tissuecyte/1196424284/ome_zarr_conversion/1196424284.zarr/',
-};
-const versa: WebResource = {
-    type: 'https',
-    url: 'https://neuroglancer-vis-prototype.s3.amazonaws.com/VERSA/scratch/0500408166/',
-};
+const tissuecyte_1: WebResource = OMEZARR_DEMO_FILESETS[3].res;
+const tissuecyte_2: WebResource = OMEZARR_DEMO_FILESETS[8].res;
+const versa: WebResource = OMEZARR_DEMO_FILESETS[0].res;
 
 const screenSize: vec2 = [300, 300];
 export function OmezarrGalleryDemo() {

site/src/examples/omezarr/minimal-example/example.tsx

@@ -0,0 +1,31 @@
+import { RenderServerProvider } from 'src/examples/common/react/render-server-provider';
+import { SliceView } from './sliceview';
+import { useEffect, useState } from 'react';
+import { loadMetadata, type OmeZarrMetadata } from '@alleninstitute/vis-omezarr';
+import { logger } from '@alleninstitute/vis-core';
+import { OMEZARR_DEMO_FILESETS } from 'src/examples/common/filesets/omezarr';
+
+/**
+ * HEY!!!
+ * this is an example React Component for rendering A single slice of an OMEZARR image in a react component
+ * This example is as bare-bones as possible! It is NOT the recommended way to do anything, its just trying to show
+ * one way of:
+ * 1. using our rendering utilities for OmeZarr data, specifically in a react component. Your needs for state-management,
+ * slicing logic, etc might all be different!
+ *
+ */
+export function DataPlease() {
+    // load our canned data for now:
+    const [omezarr, setfile] = useState<OmeZarrMetadata | undefined>(undefined);
+    useEffect(() => {
+        loadMetadata(OMEZARR_DEMO_FILESETS[0].res).then((dataset) => {
+            setfile(dataset);
+            logger.info('loaded!');
+        });
+    }, []);
+    return (
+        <RenderServerProvider>
+            <SliceView omezarr={omezarr} />
+        </RenderServerProvider>
+    );
+}

site/src/examples/omezarr/sliceview.tsx → site/src/examples/omezarr/minimal-example/sliceview.tsx

@@ -10,7 +10,7 @@ import type { RenderFrameFn } from '@alleninstitute/vis-core';
 import { useCallback, useState } from 'react';
 import { useContext, useEffect, useRef } from 'react';
 
-import { renderServerContext } from '../common/react/render-server-provider';
+import { renderServerContext } from '../../common/react/render-server-provider';
 type Props = {
     omezarr: OmeZarrMetadata | undefined;
 };

site/src/examples/omezarr/omezarr-client.tsx → site/src/examples/omezarr/priority-cache-demo/omezarr-client.tsx

@@ -10,10 +10,11 @@ import {
     nextSliceStep,
 } from '@alleninstitute/vis-omezarr';
 import { useContext, useState, useRef, useCallback, useEffect } from 'react';
-import { zoom, pan } from '../common/camera';
+import { zoom, pan } from '../../common/camera';
 import { decoderFactory } from '@alleninstitute/vis-omezarr';
-import { SharedCacheContext } from '../common/react/priority-cache-provider';
+import { SharedCacheContext } from '../../common/react/priority-cache-provider';
 import { buildConnectedRenderer } from './render-utils';
+
 const defaultInterval: Interval = { min: 0, max: 80 };
 
 function makeZarrSettings(screenSize: vec2, view: box2D, param: number, omezarr: OmeZarrMetadata): RenderSettings {
@@ -45,7 +46,9 @@ type Props = {
     res: WebResource;
     screenSize: vec2;
 };
-const WORKERS = new URL('../omezarr-v3/fetch.worker.ts', import.meta.url);
+
+const WORKERS = new URL('../../common/loaders/ome-zarr/fetch.worker.ts', import.meta.url);
+
 // const WORKERS = new URL('../common/loaders/ome-zarr/fetch-slice.worker', import.meta.url);
 export function OmeZarrView(props: Props) {
     const { screenSize } = props;

site/src/examples/omezarr/priority-cache-demo/omezarr-via-priority-cache.tsx

@@ -0,0 +1,14 @@
+import type { vec2 } from '@alleninstitute/vis-geometry';
+import { SharedCacheProvider } from '../../common/react/priority-cache-provider';
+import { OmeZarrView } from './omezarr-client';
+import { OMEZARR_DEMO_FILESETS } from 'src/examples/common/filesets/omezarr';
+
+const screenSize: vec2 = [800, 800];
+
+export function OmezarrDemo() {
+    return (
+        <SharedCacheProvider>
+            <OmeZarrView res={OMEZARR_DEMO_FILESETS[3].res} screenSize={screenSize} />
+        </SharedCacheProvider>
+    );
+}

site/src/examples/omezarr/omezarr-demo.tsx → site/src/examples/omezarr/selectable-image-demo/omezarr-demo.tsx

@@ -3,65 +3,11 @@ import { type OmeZarrMetadata, loadMetadata, nextSliceStep, sizeInUnits } from '
 import type { RenderSettings, RenderSettingsChannels } from '@alleninstitute/vis-omezarr';
 import { logger, type WebResource } from '@alleninstitute/vis-core';
 import type React from 'react';
-import { useEffect, useId, useMemo, useState } from 'react';
-import { pan, zoom } from '../common/camera';
-import { RenderServerProvider } from '../common/react/render-server-provider';
+import { useId, useMemo, useState } from 'react';
+import { pan, zoom } from '../../common/camera';
+import { RenderServerProvider } from '../../common/react/render-server-provider';
 import { OmezarrViewer } from './omezarr-viewer';
-import { SliceView } from './sliceview';
-type DemoOption = { value: string; label: string; res: WebResource };
-
-const demoOptions: DemoOption[] = [
-    {
-        value: 'opt1',
-        label: 'VERSA OME-Zarr Example (HTTPS) (color channels: [R, G, B])',
-        res: { type: 'https', url: 'https://neuroglancer-vis-prototype.s3.amazonaws.com/VERSA/scratch/0500408166/' },
-    },
-    {
-        value: 'opt2',
-        label: 'VS200 Example Image (S3) (color channels: [CFP, YFP])',
-        res: {
-            type: 's3',
-            region: 'us-west-2',
-            url: 's3://allen-genetic-tools/epifluorescence/1401210938/ome_zarr_conversion/1401210938.zarr/',
-        },
-    },
-    {
-        value: 'opt3',
-        label: 'EPI Example Image (S3) (color channels: [R, G, B])',
-        res: {
-            type: 's3',
-            region: 'us-west-2',
-            url: 's3://allen-genetic-tools/epifluorescence/1383646325/ome_zarr_conversion/1383646325.zarr/',
-        },
-    },
-    {
-        value: 'opt4',
-        label: 'STPT Example Image (S3) (color channels: [R, G, B])',
-        res: {
-            type: 's3',
-            region: 'us-west-2',
-            url: 's3://allen-genetic-tools/tissuecyte/823818122/ome_zarr_conversion/823818122.zarr/',
-        },
-    },
-    {
-        value: 'opt5',
-        label: 'Smart-SPIM (experimental)',
-        res: {
-            type: 's3',
-            region: 'us-west-2',
-            url: 's3://aind-open-data/SmartSPIM_787715_2025-04-08_18-33-36_stitched_2025-04-09_22-42-59/image_tile_fusing/OMEZarr/Ex_445_Em_469.zarr',
-        },
-    },
-    {
-        value: 'opt6',
-        label: 'V3 Zarr Example Image (S3) (color channels: [R, G, B])',
-        res: {
-            type: 's3',
-            region: 'us-west-2',
-            url: 's3://h301-scanning-802451596237-us-west-2/2402091625/ome_zarr_conversion/1458501514.zarr/',
-        },
-    },
-];
+import { OMEZARR_DEMO_FILESETS } from 'src/examples/common/filesets/omezarr';
 
 const screenSize: vec2 = [800, 800];
 
@@ -131,7 +77,7 @@ export function OmezarrDemo() {
         setOmezarr(null);
         setSelectedDemoOptionValue(selectedValue);
         if (selectedValue && selectedValue !== 'custom') {
-            const option = demoOptions.find((v) => v.value === selectedValue);
+            const option = OMEZARR_DEMO_FILESETS.find((v) => v.value === selectedValue);
             if (option) {
                 load(option.res);
             }
@@ -191,7 +137,7 @@ export function OmezarrDemo() {
                             <option value="" key="default">
                                 -- Please select an option --
                             </option>
-                            {demoOptions.map((opt) => (
+                            {OMEZARR_DEMO_FILESETS.map((opt) => (
                                 <option value={opt.value} key={opt.value}>
                                     {opt.label}
                                 </option>
@@ -288,27 +234,3 @@ export function OmezarrDemo() {
         </RenderServerProvider>
     );
 }
-/**
- * HEY!!!
- * this is an example React Component for rendering A single slice of an OMEZARR image in a react component
- * This example is as bare-bones as possible! It is NOT the recommended way to do anything, its just trying to show
- * one way of:
- * 1. using our rendering utilities for OmeZarr data, specifically in a react component. Your needs for state-management,
- * slicing logic, etc might all be different!
- *
- */
-function DataPlease() {
-    // load our canned data for now:
-    const [omezarr, setfile] = useState<OmeZarrMetadata | undefined>(undefined);
-    useEffect(() => {
-        loadMetadata(demoOptions[0].res).then((dataset) => {
-            setfile(dataset);
-            logger.info('loaded!');
-        });
-    }, []);
-    return (
-        <RenderServerProvider>
-            <SliceView omezarr={omezarr} />
-        </RenderServerProvider>
-    );
-}

site/src/examples/omezarr/omezarr-viewer.tsx → site/src/examples/omezarr/selectable-image-demo/omezarr-viewer.tsx

@@ -9,9 +9,9 @@ import type { RenderFrameFn, RenderServer } from '@alleninstitute/vis-core';
 import { useContext, useEffect, useRef } from 'react';
 import type REGL from 'regl';
 
-import { renderServerContext } from '../common/react/render-server-provider';
-import { multithreadedDecoder } from '../common/loaders/ome-zarr/sliceWorkerPool';
-import { buildImageRenderer } from '../common/image-renderer';
+import { renderServerContext } from '../../common/react/render-server-provider';
+import { multithreadedDecoder } from '../../common/loaders/ome-zarr/sliceWorkerPool';
+import { buildImageRenderer } from '../../common/image-renderer';
 interface OmezarrViewerProps {
     omezarr: OmeZarrMetadata;
     id: string;