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

TheMooseman · 2025-01-02T21:41:01Z

What

Create react components for our examples(excluding layers).

How

Create components
Ensure examples still work
Apply learnings from implementations

PR Checklist

lanesawyer

Routing works! Let's get the Layers app showing too, since that's an important one.

There is a type error that keeps Vite from building, easy fix though.

I'll poke at this again once it's fully baked!

lanesawyer · 2025-01-06T17:20:20Z

examples/src/home.tsx

+                    <a href="/omezarr">OMEZARR</a>
+                    <br />
+                </li>
+                {/* layers is not in the AC to be converted to a react component


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.

lanesawyer

Could you remove examples/public/layers.html? Only examples/layers.html is needed.

Looking great, everything works! The demos don't render until you interact with the page, like a scroll event, and then they pop up. That would be nice to fix, or we can add a message on the screen for now.

lanesawyer · 2025-01-09T21:44:46Z

examples/src/dzi/dzi-demo.tsx

-                camera={{ ...exampleSettings.camera, view }}
-                wheel={zoom}
-            />
+            <div style={{ display: 'flex', flexDirection: 'row' }}>


Could you add some text to the page encouraging users to scroll to get the demos to appear? Alternatively, we figure out why it takes interaction to make these show up properly.

In bkp we solve that problem with an "onComplete" callback with a hook, but lets wait to look into this deeper in another ticket

lanesawyer · 2025-01-09T21:46:28Z

examples/src/dzi/dzi-viewer.tsx

@@ -63,6 +56,7 @@ export function DziView(props: Props) {
        }
        return () => {
            if (cnvs.current) {
+                // eslint-disable-next-line react-hooks/exhaustive-deps


I think this is out of place? This isn't disabling the useEffect dependency lint issues. We also still need to actually integrate a linter soon 😅

lanesawyer · 2025-01-09T21:48:33Z

examples/src/omezarr/omezarr-demo.tsx

+    };
+
+    return omezarr && settings ? (
+        <RenderServerProvider>


This might be why the omezarr demo requires interaction like a scroll to show up. Always return the provider, then do the ternary inside it as children

that fixes it, yep!

lanesawyer

LGTM

froyo-np · 2025-01-10T22:18:29Z

examples/src/layers/examples.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> = {


Suggested change

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

export const examples = {

dont erase types with any...

froyo-np · 2025-01-10T22:19:46Z

examples/src/layers/examples.ts

+        plane: 'xy',
+        slices: 4,
+    } as ZarrSliceGridConfig,
+    ['structureAnnotation']: {


what happened here? why do these all have [' '] wrappings?
whats wrong with structureAnnotation: {...}

froyo-np · 2025-01-10T22:24:07Z

examples/src/dzi/use-dzi-image.ts

+    onComplete?: (imgSize: vec2) => void;
+}
+
+function decodeDzi(s: string, url: string): DziImage | undefined {


this is is a nice-ish function that shows how to decode the dzi xml/json metadata "format".

I think you should add some documentation, and maybe clean up or explain the url.split('.dzi') stuff

froyo-np · 2025-01-10T22:25:24Z

examples/src/dzi/use-dzi-image.ts

+    callback(images);
+}
+
+export function useDziImages({ imageUrls, onComplete }: useDziImageProps) {


useDziImages and getImages are unused, stateful, clunky - lets remove them?

froyo-np · 2025-01-10T22:26:02Z

examples/src/omezarr/omezarr-demo.tsx

+            const size = sizeInUnits('xy', v.multiscales[0].axes, v.multiscales[0].datasets[0]);
+            if (size) {
+                console.log(size);
+                setView(Box2D.create([0, 0], [size[0], size[1]]));


Suggested change

setView(Box2D.create([0, 0], [size[0], size[1]]));

setView(Box2D.create([0, 0], size));

froyo-np · 2025-01-10T22:27:04Z

examples/src/utils/use-why-did-you-update.ts

+ * @param {string} name - name will show up in console log
+ * @param {Object} props - entire props object of the component being tested
+ */
+export function useWhyDidYouUpdate<P extends object>(name: string, props: P) {


remove this file?

froyo-np · 2025-01-10T22:33:24Z

examples/src/layers/examples.ts

+import type { ZarrSliceGridConfig } from '~/data-sources/ome-zarr/slice-grid';
+import type { ScatterplotGridConfig, ScatterPlotGridSlideConfig } from '~/data-sources/scatterplot/dynamic-grid';
+
+const slide32 = 'MQ1B9QBZFIPXQO6PETJ';


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

froyo-np · 2025-01-10T22:42:26Z

examples/package.json

@@ -61,6 +61,7 @@
        "lodash": "^4.17.21",
        "react": "^18.3.0",
        "react-dom": "^18.3.0",
+        "react-router": "^7.0.2",


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

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

lets keep it, seems fine

froyo-np · 2025-01-10T22:51:44Z

examples/src/dzi/dzi-viewer.tsx

    return (
        <canvas
            id={id}
            ref={cnvs}
-            onWheel={wheel}


so this seemed to work before - why copy paste the long-winded version from bkp-client?

froyo-np · 2025-01-10T22:53:58Z

examples/src/omezarr/omezarr-demo.tsx

+        });
+    }, []);
+
+    const zoom = (e: WheelEvent) => {


I thought part of the improvements we were going to add was around the cameras - currently the dzi demo cant pan, only zoom. Perhaps we could consolidate their zoom and pan handlers and have both working on both?

froyo-np

Cleanup please, consider camera event handing consolidation

create basic components

31b7d09

TheMooseman requested a review from a team as a code owner January 2, 2025 21:41

TheMooseman requested review from lanesawyer and froyo-np January 2, 2025 21:41

lanesawyer reviewed Jan 6, 2025

View reviewed changes

TheMooseman added 4 commits January 6, 2025 14:33

make layers work again

bdd3856

rename things so there are fewer app files

1163339

clean up dzi viewer

f55e099

omezarr

65753c8

TheMooseman changed the title ~~[WIP] feat: React Examples Components (DT-7024)~~ feat: React Examples Components (DT-7024) Jan 8, 2025

TheMooseman requested a review from lanesawyer January 8, 2025 22:21

lanesawyer reviewed Jan 9, 2025

View reviewed changes

TheMooseman added 2 commits January 10, 2025 10:41

lanes comments

099c385

Merge branch 'main' into skyler/react-components

c17368c

lanesawyer approved these changes Jan 10, 2025

View reviewed changes

froyo-np reviewed Jan 10, 2025

View reviewed changes

froyo-np requested changes Jan 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

TheMooseman commented Jan 2, 2025 •

edited

Loading

lanesawyer left a comment

lanesawyer Jan 6, 2025

lanesawyer left a comment

lanesawyer Jan 9, 2025

TheMooseman Jan 10, 2025

lanesawyer Jan 9, 2025

lanesawyer Jan 9, 2025

TheMooseman Jan 10, 2025

lanesawyer left a comment

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025 •

edited

Loading

froyo-np Jan 10, 2025 •

edited

Loading

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np Jan 10, 2025

froyo-np left a comment

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

	setView(Box2D.create([0, 0], [size[0], size[1]]));
	setView(Box2D.create([0, 0], size));

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

Are you sure you want to change the base?

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

Conversation

TheMooseman commented Jan 2, 2025 • edited Loading

What

How

PR Checklist

lanesawyer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lanesawyer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lanesawyer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

froyo-np Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

froyo-np Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

froyo-np left a comment

Choose a reason for hiding this comment

TheMooseman commented Jan 2, 2025 •

edited

Loading

froyo-np Jan 10, 2025 •

edited

Loading

froyo-np Jan 10, 2025 •

edited

Loading