zarr file for testing

[stevejpurves]

@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

[stevejpurves]

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?

[PaulHax]

@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:
scipy-conference/scipy_proceedings#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>
  );
}