Integrate itk-viewer-2d component

app/routes/_index.tsx

@@ -1,4 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
+import { Viewer } from "../viewer.js";
 
 export const meta: MetaFunction = () => {
   return [
@@ -10,6 +11,9 @@ export const meta: MetaFunction = () => {
 export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <div style={{ width: "100%", height: "300px" }}>
+        <Viewer imagePath="https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0079A/9836998.zarr" />
+      </div>
       <h1>Welcome to Remix</h1>
       <ul>
         <li>

app/viewer.client.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+
+import "@shoelace-style/shoelace/dist/themes/light.css";
+import "@shoelace-style/shoelace/dist/components/card/card.js";
+import "@shoelace-style/shoelace/dist/components/range/range.js";
+import "@shoelace-style/shoelace/dist/components/select/select.js";
+import "@shoelace-style/shoelace/dist/components/option/option.js";
+import type { 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 ViewerClient({ imagePath }: { imagePath: string }) {
+  const viewer = useRef<ItkViewer2d>(null);
+
+  useEffect(() => {
+    const element = viewer.current;
+    if (!element) {
+      return;
+    }
+    const url = new URL(imagePath, document.location.origin);
+    ZarrMultiscaleSpatialImage.fromUrl(url).then((image) => {
+      const actor = element.getActor();
+      actor!.send({ type: "setImage", image, name: "image" });
+    });
+  }, [imagePath, viewer]);
+
+  return (
+    <itk-viewer-2d
+      ref={viewer}
+      style={{ width: "100%", height: "100%" }}
+    ></itk-viewer-2d>
+  );
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      "itk-viewer-2d": ItkViewer2d;
+    }
+  }
+}

app/viewer.tsx

@@ -0,0 +1,16 @@
+import { ClientOnly } from "remix-utils/client-only";
+import { ViewerClient } from "~/viewer.client";
+
+function SSRFallback() {
+  return (
+    <div style={{ width: "100%", height: "100%" }}>Loading itk-viewer...</div>
+  );
+}
+
+export function Viewer({ imagePath }: { imagePath: string }) {
+  return (
+    <ClientOnly fallback={<SSRFallback />}>
+      {() => <ViewerClient imagePath={imagePath} />}
+    </ClientOnly>
+  );
+}