Open stevejpurves opened 1 month ago
I'm out of time for now but we just need to implement the react component, probably loading unsafe html etc... then I can test it in the scipy proceedings theme in local dev using one or more test images.
the target build is a remix/react site, we can handle ESM modules in the build or dynamically on a client side async import but looking at the example you pointed to I'm not sure how to approach that. is there a bundled version of the itk-viewer-2d module that could be loaded in the client?
@itk-viewer/element
npm package has ESM modules, including itk-viewer-2d.js
. Guessing there are a few rough edges to getting our viewer bundled and running in a Remix app. I'll work on an example with the viewer in a minimal CRA Remix app.
A CORS enabled Zarr image is here: https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0079A/9836998.zarr
And another Zarr image is checked in to the paper PR: https://github.com/scipy-conference/scipy_proceedings/pull/927
This is a naive React compnenet I have not tested
import { useEffect, useRef } from "react";
import { ItkViewer2d } from "@itk-viewer/element/itk-viewer-2d.js";
import "@itk-viewer/element/itk-viewer-2d.js";
import { ZarrMultiscaleSpatialImage } from "@itk-viewer/io/ZarrMultiscaleSpatialImage.js";
export function Viewer({ imagePath }: { imagePath: string }) {
const viewer = useRef<ItkViewer2d>(null);
useEffect(() => {
const element = viewer.current;
if (!element) {
return;
}
const actor = element.getActor();
const url = new URL(imagePath, document.location.origin);
ZarrMultiscaleSpatialImage.fromUrl(url).then((image) => {
actor!.send({ type: "setImage", image, name: "image" });
});
}, [imagePath, viewer]);
return (
<div>
<itk-viewer-2d ref={viewer}></itk-viewer-2d>
</div>
);
}
@PaulHax do you have a url to a public suitable zarr file for testing this? https://github.com/curvenote/itk-plugins/blob/main/site/paper.md