create basic components

AllenInstitute · Jan 2, 2025 · 31b7d09 · 31b7d09
1 parent fb9bee4
commit 31b7d09
Show file tree

Hide file tree

Showing 12 changed files with 354 additions and 222 deletions.
diff --git a/examples/dzi.html b/examples/dzi.html
diff --git a/examples/index.html b/examples/index.html
@@ -1,12 +1,10 @@
 <!doctype html>
 <html>
     <body>
-        EXAMPLES
-        <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>
+        <div id="app"></div>
+        <script
+            type="module"
+            src="/src/index.tsx"
+        ></script>
     </body>
 </html>
diff --git a/examples/omezarr.html b/examples/omezarr.html
diff --git a/examples/package.json b/examples/package.json
@@ -43,10 +43,10 @@
         "vite": "^5.3.5"
     },
     "dependencies": {
-        "@alleninstitute/vis-geometry": "workspace:*",
-        "@alleninstitute/vis-scatterbrain": "workspace:*",
         "@alleninstitute/vis-dzi": "workspace:*",
+        "@alleninstitute/vis-geometry": "workspace:*",
         "@alleninstitute/vis-omezarr": "workspace:*",
+        "@alleninstitute/vis-scatterbrain": "workspace:*",
         "@czi-sds/components": "^20.0.1",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
@@ -62,6 +62,7 @@
         "lodash": "^4.17.21",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
+        "react-router": "^7.0.2",
         "regl": "^2.1.0",
         "zarrita": "0.4.0-next.14"
     }

diff --git a/examples/src/app.tsx b/examples/src/app.tsx
@@ -1,58 +1,31 @@
 import React from 'react';
-import { SliceViewLayer } from './ui/slice-ui';
-import type { Demo } from './layers';
-import { AnnotationGrid } from './ui/annotation-grid';
-import { ContactSheetUI } from './ui/contact-sheet';
-import { ScatterplotUI } from './ui/scatterplot-ui';
-import { Button } from '@czi-sds/components';
+import { BrowserRouter, Route, Routes } from 'react-router';
+import { Home } from './home';
+import { TwoClientsPOC } from './dzi/double';
+import { OmezarrDemo } from './omezarr/app';
 
-export function AppUi(props: { demo: Demo }) {
-    const { demo } = props;
+export function App() {
+    console.log('app');
     return (
-        <div>
-            <Button
-                onClick={() => {
-                    demo.requestSnapshot(3000);
-                }}
-            >
-                {'📸'}
-            </Button>
-            <label>{`Layer ${demo.selectedLayer}`}</label>
-            <Button
-                onClick={() => {
-                    demo.selectLayer(demo.selectedLayer - 1);
-                }}
-            >
-                {'<-'}
-            </Button>
-            <Button
-                onClick={() => {
-                    demo.selectLayer(demo.selectedLayer + 1);
-                }}
-            >
-                {'->'}
-            </Button>
-            <LayerUi demo={demo} />
-        </div>
+        <BrowserRouter>
+            <Routes>
+                <Route
+                    index
+                    element={<Home />}
+                />
+                <Route
+                    path="/dzi"
+                    element={<TwoClientsPOC />}
+                />
+                <Route
+                    path="/omezarr"
+                    element={<OmezarrDemo />}
+                />
+                {/* <Route
+                    path="/layers"
+                    element={<LayersDemo />}
+                /> */}
+            </Routes>
+        </BrowserRouter>
     );
 }
-function LayerUi(props: { demo: Demo }) {
-    const { demo } = props;
-    const layer = demo.layers[demo.selectedLayer];
-    if (layer) {
-        switch (layer.type) {
-            case 'annotationGrid':
-                return <AnnotationGrid demo={demo} />;
-            case 'volumeGrid':
-                return <ContactSheetUI demo={demo} />;
-            case 'volumeSlice':
-                return <SliceViewLayer demo={demo} />;
-            case 'scatterplot':
-            case 'scatterplotGrid':
-                return <ScatterplotUI demo={demo} />;
-            default:
-                return null;
-        }
-    }
-    return <SliceViewLayer demo={props.demo} />;
-}
diff --git a/examples/src/home.tsx b/examples/src/home.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export function Home() {
+    return (
+        <>
+            EXAMPLES
+            <br />
+            <ul>
+                <li>
+                    <a href="/dzi">Deep Zoom Image</a>
+                    <br />
+                </li>
+                <li>
+                    <a href="/omezarr">OMEZARR</a>
+                    <br />
+                </li>
+                {/* layers is not in the AC to be converted to a react component
+                    maybe we'll convert it at some point though so I'll leave this here
+                 <li>
+                    <a href="/layers">Layers</a>
+                    <br />
+                </li> */}
+            </ul>
+        </>
+    );
+}
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './app';
+import React from 'react';
+
+const container = document.getElementById('app');
+const root = createRoot(container!);
+root.render(<App />);
diff --git a/examples/src/layers/examples.ts b/examples/src/layers/examples.ts
@@ -0,0 +1,70 @@
+import type { ColumnRequest } from '~/common/loaders/scatterplot/scatterbrain-loader';
+import type { AnnotationGridConfig } from '~/data-sources/annotation/annotation-grid';
+import type { ZarrSliceConfig } from '~/data-sources/ome-zarr/planar-slice';
+import type { ZarrSliceGridConfig } from '~/data-sources/ome-zarr/slice-grid';
+import type { ScatterplotGridConfig, ScatterPlotGridSlideConfig } from '~/data-sources/scatterplot/dynamic-grid';
+
+const slide32 = 'MQ1B9QBZFIPXQO6PETJ';
+const colorByGene: ColumnRequest = { name: '88', type: 'QUANTITATIVE' };
+const scottpoc = 'https://tissuecyte-ome-zarr-poc.s3.amazonaws.com/40_128_128/1145081396';
+
+export const examples: Record<string, any> = {
+    ['reconstructed']: {
+        colorBy: colorByGene,
+        type: 'ScatterPlotGridConfig',
+        url: 'https://bkp-2d-visualizations-stage.s3.amazonaws.com/wmb_ccf_04112024-20240419205547/4STCSZBXHYOI0JUUA3M/ScatterBrain.json',
+    } as ScatterplotGridConfig,
+    ['oneSlide']: {
+        colorBy: colorByGene,
+        slideId: slide32,
+        type: 'ScatterPlotGridSlideConfig',
+        url: 'https://bkp-2d-visualizations-stage.s3.amazonaws.com/wmb_ccf_04112024-20240419205547/4STCSZBXHYOI0JUUA3M/ScatterBrain.json',
+    } as ScatterPlotGridSlideConfig,
+    ['tissueCyte396']: {
+        type: 'ZarrSliceGridConfig',
+        gamut: {
+            R: { index: 0, gamut: { max: 600, min: 0 } },
+            G: { index: 1, gamut: { max: 500, min: 0 } },
+            B: { index: 2, gamut: { max: 400, min: 0 } },
+        },
+        plane: 'xy',
+        slices: 142,
+        url: scottpoc,
+    } as ZarrSliceGridConfig,
+    ['tissueCyteSlice']: {
+        type: 'zarrSliceConfig',
+        gamut: {
+            R: { index: 0, gamut: { max: 600, min: 0 } },
+            G: { index: 1, gamut: { max: 500, min: 0 } },
+            B: { index: 2, gamut: { max: 400, min: 0 } },
+        },
+        plane: 'xy',
+        planeParameter: 0.5,
+        url: scottpoc,
+    } as ZarrSliceConfig,
+    ['versa1']: {
+        url: 'https://neuroglancer-vis-prototype.s3.amazonaws.com/VERSA/scratch/0500408166/',
+        type: 'ZarrSliceGridConfig',
+        gamut: {
+            R: { index: 0, gamut: { max: 20, min: 0 } },
+            G: { index: 1, gamut: { max: 20, min: 0 } },
+            B: { index: 2, gamut: { max: 20, min: 0 } },
+        },
+        plane: 'xy',
+        slices: 4,
+    } as ZarrSliceGridConfig,
+    ['structureAnnotation']: {
+        type: 'AnnotationGridConfig',
+        url: 'https://bkp-2d-visualizations-stage.s3.amazonaws.com/wmb_ccf_04112024-20240419205547/4STCSZBXHYOI0JUUA3M/ScatterBrain.json',
+        levelFeature: '73GVTDXDEGE27M2XJMT',
+        annotationUrl:
+            'https://stage-sfs.brain.devlims.org/api/v1/Annotation/4STCSZBXHYOI0JUUA3M/v3/TLOKWCL95RU03D9PETG/',
+        stroke: {
+            opacity: 1,
+            overrideColor: [1, 0, 0, 1] as const,
+        },
+        fill: {
+            opacity: 0.7,
+        },
+    } as AnnotationGridConfig,
+};
diff --git a/examples/src/omezarr/app.tsx b/examples/src/omezarr/app.tsx
@@ -4,7 +4,7 @@ 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() {
+export function OmezarrDemo() {
     return <DataPlease />;
 }
 /**

diff --git a/examples/src/omezarr/omezarr.ts b/examples/src/omezarr/omezarr.ts
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import { AppUi } from './app';
+import { OmezarrDemo } from './app';
 
 const uiroot = createRoot(document.getElementById('main')!);
-uiroot.render(AppUi());
+uiroot.render(OmezarrDemo());
diff --git a/examples/src/ui/scatterplot-ui.tsx b/examples/src/ui/scatterplot-ui.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Demo } from 'src/layers';
 import { InputSlider } from '@czi-sds/components';
 export function ScatterplotUI(props: { demo: Demo }) {
     const { demo } = props;
     // control the gamut with some sliders
     const l = demo.layers[demo.selectedLayer];
+
+    const [pointSize, setPointSize] = useState(l.data?.pointSize ?? 0)
+
     if ((l && l.type === 'scatterplot') || l.type === 'scatterplotGrid') {
         return (
             <div>