feat: React Examples Components (DT-7024) by TheMooseman · Pull Request #49 · AllenInstitute/vis

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

        }
        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

        "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

examples/src/dzi/dzi-viewer.tsx

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?

I made simple functions for zoom and pan rather than wrap it in a hook just so it's more transparent for anyone reading the examples. I think it's easier to understand but I can move them into separate hooks if you think that's better.

not asking for hooks...
one of the learnings from integrating these components was that the hard-coded cameras in different spaces was confusing. My ask here is that you share the zoom & pan interactions (event handlers) between the two components, if possible.
right now, the dzi and omezarr components have different capabilities, but there is no reason for that to be the case, right?

froyo-np

Cleanup please, consider camera event handing consolidation

froyo-np · 2025-01-13T18:24:42Z

examples/src/dzi/decode-dzi.ts

+// At the end of the file you can see two examples of the metadata format you might see, one as XML and another as JSON
+/**
+ * This function helps decode xml metadata for a dzi file.
+ * @param s xml string


Suggested change

* @param s xml string

* @param s the contents of the @param url - expected to be an XML document describing a DZI image

froyo-np · 2025-01-13T18:46:04Z

examples/src/common/camera.ts

+ * @param view your current view
+ * @param screenSize the size of your canvas/screen
+ * @param zoomScale the scale you want to apply to your view
+ * @param mousePos the offsetX and offsetY of your mouse


none of these comments are helpful are they?

a parameter named screenSize is obviously the size of the screen - maybe give the units?
mousePos - is this in pixels, or the data space?
view - what is this? obviously its the current view. this is a box, in dataspace, that gets mapped to the screen or canvas.

froyo-np · 2025-01-13T18:46:33Z

examples/src/common/camera.ts

+ * @param zoomScale the scale you want to apply to your view
+ * @param mousePos the offsetX and offsetY of your mouse
+ */
+export function zoom(view: box2D, screenSize: vec2, zoomScale: number, mousePos: vec2) {


other than the unhelpful docs, these are excellent - thanks for unifying the camera logic!

froyo-np · 2025-01-13T18:47:57Z

examples/src/dzi/decode-dzi.ts

+    return undefined;
+}
+
+/* Example XML


froyo-np

this is looking good, thanks for the cleanup. Since these are examples for others to follow, could you spend some time on the javadoc to explain things? "@param view the current view" is not helping anyone

lanesawyer

Everything still works, I think you hit all the main points Noah called out.

Even if there is something left over let's just ship it now so everything is in main as we keep iterating on it.

lanesawyer · 2025-01-30T23:00:22Z

examples/src/common/camera.ts

This will be a good base to build on for pre-baked camera solutions as we make more comprehensive "out of the box" components!

create basic components

31b7d09

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

TheMooseman requested review from froyo-np and lanesawyer 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

examples/src/dzi/dzi-viewer.tsx Show resolved Hide resolved

froyo-np reviewed Jan 10, 2025

View reviewed changes

froyo-np requested changes Jan 10, 2025

View reviewed changes

TheMooseman added 2 commits January 13, 2025 07:54

noahs comments

03fd5b6

remove unused examples file

543a482

TheMooseman requested a review from froyo-np January 13, 2025 15:57

froyo-np reviewed Jan 13, 2025

View reviewed changes

examples/src/dzi/decode-dzi.ts

return undefined;

}

/* Example XML

Copy link

Collaborator

froyo-np Jan 13, 2025

Choose a reason for hiding this comment

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

nice!

froyo-np requested changes Jan 13, 2025

View reviewed changes

some better comments

0547305

TheMooseman requested a review from froyo-np January 14, 2025 00:45

lanesawyer approved these changes Jan 30, 2025

View reviewed changes

lanesawyer requested review from froyo-np and removed request for froyo-np January 30, 2025 23:03

lanesawyer merged commit 81b2d6b into main Jan 30, 2025
5 checks passed

lanesawyer deleted the skyler/react-components branch January 30, 2025 23:06

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

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

	* @param s xml string
	* @param s the contents of the @param url - expected to be an XML document describing a DZI image

Conversation

TheMooseman commented Jan 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

How

PR Checklist

Uh oh!

lanesawyer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lanesawyer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lanesawyer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

froyo-np Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

froyo-np Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

froyo-np left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

froyo-np left a comment

Choose a reason for hiding this comment

Uh oh!

lanesawyer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TheMooseman commented Jan 2, 2025 •

edited

Loading

froyo-np Jan 10, 2025 •

edited

Loading

froyo-np Jan 10, 2025 •

edited

Loading