Refactor MX image viewer

apps/mx/src/components/image/MXH5ImageViewer.tsx

 import { Loading } from '@edata-portal/core';
-import { H5ImageHeatmapViewer } from '@edata-portal/h5';
+import { H5Provider, ImageVisForMXData } from '@edata-portal/h5';
 import {
   DATASET_FILE_LIST_ENDPOINT,
   useGetEndpoint,
@@ -34,16 +34,13 @@ export function MXH5ImageViewer({
     return <Alert variant="danger">Target HDF5 file not found</Alert>;
 
   const imageIndexInFile = imageIndex % IMAGES_PER_FILE;
-
   const title = `Image #${imageIndexInFile + 1} in file ${targetFile.name}`;
 
   return (
     <Suspense fallback={<Loading />}>
-      <H5ImageHeatmapViewer
-        dataFileId={targetFile.id}
-        imageIndexInFile={imageIndexInFile}
-        title={title}
-      />
+      <H5Provider dataFileId={targetFile.id}>
+        <ImageVisForMXData title={title} imageIndex={imageIndexInFile} />
+      </H5Provider>
     </Suspense>
   );
 }

packages/core/tsconfig.json

@@ -5,6 +5,5 @@
     "baseUrl": "src",
     "outDir": "dist",
     "composite": true
-  },
-  "references": [{ "path": "./tsconfig.node.json" }]
+  }
 }

packages/core/tsconfig.node.json

-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

packages/h5/src/h5/H5Provider.tsx

+import { PropsWithChildren, Suspense, useMemo } from 'react';
+import { H5GroveProvider } from '@h5web/app';
+import '@h5web/lib/styles.css';
+import { useUser, useConfig, Loading } from '@edata-portal/core';
+
+interface Props {
+  dataFileId: number;
+}
+
+function H5Provider(props: PropsWithChildren<Props>) {
+  const { dataFileId, children } = props;
+
+  const user = useUser();
+  const config = useConfig();
+  const sessionId = user?.sessionId;
+
+  const axiosConfig = useMemo(
+    () => ({
+      params: {
+        // Processed by ICAT+
+        sessionId,
+        datafileId: dataFileId, // transformed to real path to file on disk
+        // Forwarded to h5grove
+        resolve_links: 'all', // respond with error if a link doesn't resolve
+      },
+    }),
+    [sessionId, dataFileId],
+  );
+
+  return (
+    <H5GroveProvider
+      filepath={dataFileId.toString()}
+      url={`${config.api.icat_url}h5grove`} // requests are proxied through ICAT+
+      axiosConfig={axiosConfig}
+    >
+      <Suspense fallback={<Loading />}>{children}</Suspense>
+    </H5GroveProvider>
+  );
+}
+
+export default H5Provider;

packages/h5/src/h5/H5ImageHeatmapViewer.tsx → packages/h5/src/h5/ImageVisForMXData.tsx

-import { Suspense, useMemo } from 'react';
-import { H5GroveProvider } from '@h5web/app';
 import { useDataContext } from '@h5web/app';
-import ndarray from 'ndarray';
 import { HeatmapVis } from '@h5web/lib';
-import '@h5web/lib/styles.css';
-import { useUser, useConfig, Loading } from '@edata-portal/core';
+import ndarray from 'ndarray';
+import { useMemo } from 'react';
 
-export interface H5ImageHeatmapViewerProps {
-  dataFileId: number;
-  imageIndexInFile: number;
+interface Props {
   title: string;
+  imageIndex: number;
 }
 
-export default function H5ImageHeatmapViewer({
-  dataFileId,
-  imageIndexInFile,
-  title,
-}: {
-  dataFileId: number;
-  imageIndexInFile: number;
-  title: string;
-}) {
-  const user = useUser();
-  const config = useConfig();
-
-  const axiosConfig = useMemo(() => {
-    return { params: { sessionId: user?.sessionId, datafileId: dataFileId } };
-  }, [user?.sessionId, dataFileId]);
-
-  return (
-    <H5GroveProvider
-      filepath={title}
-      url={`${config.api.icat_url}h5grove`}
-      axiosConfig={axiosConfig}
-    >
-      <Suspense fallback={<Loading />}>
-        <DisplayImage imageIndex={imageIndexInFile} title={title} />
-      </Suspense>
-    </H5GroveProvider>
-  );
-}
+function ImageVisForMXData(props: Props) {
+  const { title, imageIndex } = props;
 
-function DisplayImage({
-  imageIndex,
-  title,
-}: {
-  imageIndex: number;
-  title: string;
-}) {
   const { entitiesStore, valuesStore } = useDataContext();
   const entity = entitiesStore.get('/entry/data/data');
 
@@ -77,3 +40,5 @@ function DisplayImage({
     </div>
   );
 }
+
+export default ImageVisForMXData;

packages/h5/src/h5/index.ts

 import React from 'react';
 
-export const H5ImageHeatmapViewer = React.lazy(
-  () => import('./H5ImageHeatmapViewer'),
+export const H5Provider = React.lazy(() => import('./H5Provider'));
+export const ImageVisForMXData = React.lazy(
+  () => import('./ImageVisForMXData'),
 );

packages/h5/tsconfig.json

@@ -6,8 +6,5 @@
     "outDir": "dist",
     "composite": true
   },
-  "references": [
-    { "path": "./tsconfig.node.json" },
-    { "path": "../../packages/core" }
-  ]
+  "references": [{ "path": "../../packages/core" }]
 }

packages/h5/tsconfig.node.json

-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}