Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: React Examples Components (DT-7024) #49

Merged
merged 10 commits into from
Jan 30, 2025
Merged

feat: React Examples Components (DT-7024) #49

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
31b7d09
create basic components
TheMooseman Jan 2, 2025
bdd3856
make layers work again
TheMooseman Jan 6, 2025
1163339
rename things so there are fewer app files
TheMooseman Jan 6, 2025
f55e099
clean up dzi viewer
TheMooseman Jan 6, 2025
65753c8
omezarr
TheMooseman Jan 8, 2025
099c385
lanes comments
TheMooseman Jan 10, 2025
c17368c
Merge branch 'main' into skyler/react-components
TheMooseman Jan 10, 2025
03fd5b6
noahs comments
TheMooseman Jan 13, 2025
543a482
remove unused examples file
TheMooseman Jan 13, 2025
0547305
some better comments
TheMooseman Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 0 additions & 17 deletions examples/dzi.html
View file
Open in desktop

This file was deleted.

12 changes: 5 additions & 7 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 0 additions & 17 deletions examples/omezarr.html
View file
Open in desktop

This file was deleted.

5 changes: 3 additions & 2 deletions examples/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -62,6 +62,7 @@
"lodash": "^4.17.21",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"react-router": "^7.0.2",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are a handful of static, independant pages worth pulling in this dependency?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose it does let us delete the kinda gross repetetative {demo-name.html} files....

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets keep it, seems fine

"regl": "^2.1.0",
"zarrita": "0.4.0-next.14"
}
Expand Down
79 changes: 26 additions & 53 deletions examples/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />;
}
26 changes: 26 additions & 0 deletions examples/src/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's at least let it render like it was, since there's a good Markdown page explaining how to use it in the docs still so we want it working.

maybe we'll convert it at some point though so I'll leave this here
<li>
<a href="/layers">Layers</a>
<br />
</li> */}
</ul>
</>
);
}
7 changes: 7 additions & 0 deletions examples/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />);
70 changes: 70 additions & 0 deletions examples/src/layers/examples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok this whole file is unused - it was nice that it was pulled out of the code for the layers example logic, but the types got a bit messed up.
either fix the types and use it, or delete it and keep the actual values on line 745 of src/layers.ts

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> = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export const examples: Record<string, any> = {
export const examples = {

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont erase types with 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']: {
Copy link
Collaborator

@froyo-np froyo-np Jan 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what happened here? why do these all have [' '] wrappings?
whats wrong with 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,
};
2 changes: 1 addition & 1 deletion examples/src/omezarr/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />;
}
/**
Expand Down
4 changes: 2 additions & 2 deletions examples/src/omezarr/omezarr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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());
5 changes: 4 additions & 1 deletion examples/src/ui/scatterplot-ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading
Loading