Asynchronously fetch images within multi-page tiff

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "imaginghub",
   "private": true,
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/unified/src/components/WorkflowsDataFetcher/Plot/DataLoadingProgress.tsx

@@ -2,8 +2,8 @@ import { Box, CircularProgress, Typography } from "@mui/material";
 
 type DataLoadingProgressProps = {
   mimeType: string;
-  loadingImageIndex: number | null;
-  totalImages: number | null;
+  loadingImageIndex: number;
+  totalImages: number;
 };
 
 const BoxHorizontallyCenteredContent = ({
@@ -30,48 +30,40 @@ export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
   loadingImageIndex,
   totalImages,
 }) => {
-  const displayDataLoadingProgress = () => {
-    if (mimeType === "image/jpeg") {
-      return (
-        <BoxHorizontallyCenteredContent
-          children={<CircularProgress enableTrackSlot size={80} />}
-        />
-      );
-    }
-
+  if (mimeType === "image/jpeg") {
     return (
-      <BoxHorizontallyCenteredContent>
-        {loadingImageIndex !== null && totalImages !== null ? (
-          <>
-            <CircularProgress
-              variant="determinate"
-              enableTrackSlot
-              size={80}
-              value={Math.round(
-                (loadingImageIndex / totalImages) * 100 +
-                  (1 / totalImages) * 100
-              )}
-            />
-            <Box
-              sx={{
-                position: "absolute",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <Typography
-                variant="caption"
-                component="div"
-              >{`${loadingImageIndex + 1} / ${totalImages}`}</Typography>
-            </Box>
-          </>
-        ) : (
-          <CircularProgress enableTrackSlot size={80} />
-        )}
-      </BoxHorizontallyCenteredContent>
+      <BoxHorizontallyCenteredContent
+        children={<CircularProgress enableTrackSlot size={80} />}
+      />
     );
-  };
+  }
 
-  return displayDataLoadingProgress();
+  return (
+    <BoxHorizontallyCenteredContent>
+      <>
+        <CircularProgress
+          variant="determinate"
+          enableTrackSlot
+          size={80}
+          value={Math.round(
+            (loadingImageIndex / totalImages) * 100 + (1 / totalImages) * 100
+          )}
+        />
+        <Box
+          sx={{
+            position: "absolute",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            variant="caption"
+            component="div"
+          >{`${loadingImageIndex + 1} / ${totalImages}`}</Typography>
+        </Box>
+      </>
+      )
+    </BoxHorizontallyCenteredContent>
+  );
 };

frontend/unified/src/components/WorkflowsDataFetcher/Plot/DataPlotter.tsx

@@ -7,6 +7,7 @@ type DataPlotterProps = {
   artifact: Artifact;
   data: NDT[];
   totalImages: number;
+  loadingIndex: number | null;
 };
 
 const EXPAND_PLOT_HEIGHT_STYLING = { display: "grid", height: "75vh" };
@@ -15,6 +16,7 @@ export const DataPlotter: React.FC<DataPlotterProps> = ({
   artifact,
   data,
   totalImages,
+  loadingIndex,
 }: DataPlotterProps) => {
   const [displayedImageIndex, setDisplayedImageIndex] = useState<number>(0);
 
@@ -53,7 +55,20 @@ export const DataPlotter: React.FC<DataPlotterProps> = ({
           min={0}
           max={totalImages - 1}
           defaultValue={0}
-          onChange={(_, value: number) => setDisplayedImageIndex(value)}
+          onChange={(_, value: number) => {
+            if (loadingIndex !== null) {
+              if (loadingIndex < totalImages - 1 && value < loadingIndex) {
+                setDisplayedImageIndex(value);
+              } else {
+                // TODO: trying to display an image that hasn't yet been fetched, display some
+                // kind of feedback that this can't be done
+              }
+            } else {
+              // `loadingIndex` is null when the process of data-fetching is not occurring,
+              // in which case it's fine to select any image
+              setDisplayedImageIndex(value);
+            }
+          }}
         />
       </div>
     );

frontend/unified/src/components/WorkflowsDataFetcher/Plot/Plot.tsx

@@ -5,12 +5,30 @@ import { NDT } from "@diamondlightsource/davidia";
 import ndarray from "ndarray";
 import { decode } from "fast-png";
 import { proxyService } from "../../../../../tomography/src/api/services";
-import loadData from "../../../../../tomography/src/components/crop/SampleLoad";
 import { DataPlotter } from "./DataPlotter";
 import { DataLoadingProgress } from "./DataLoadingProgress";
 import { Visit } from "@diamondlightsource/sci-react-ui";
 import { ArtifactSelectorFragmentFragment } from "./__generated__/ArtifactSelector.generated";
 
+const imageIterator = (
+  height: number,
+  width: number,
+  totalImages: number,
+  tifUrl: string,
+  setLoadingImageIndex: React.Dispatch<React.SetStateAction<number | undefined>>
+): AsyncGenerator<NDT> => {
+  const generator = (async function* () {
+    for (let i = 0; i < totalImages; i++) {
+      setLoadingImageIndex(i);
+      const pngData = await proxyService.getTiffPage(tifUrl, i, 1);
+      const decodedPng = decode(pngData.buffer);
+      yield ndarray(decodedPng.data, [height, width]) as NDT;
+    }
+  })();
+
+  return generator;
+};
+
 type PlotProps = {
   workflowName: string | null;
   visit: Visit;
@@ -57,10 +75,25 @@ export const Plot: React.FC<PlotProps> = ({
         return;
       }
 
-      loadData(url, 1, setLoadingImageIndex, setTotalImages).then((data) => {
-        setLoadingImageIndex(null);
-        setArtifactData(data);
-      });
+      const {
+        page_count: pageCount,
+        width,
+        height,
+      } = await proxyService.getTiffMetadata(url);
+      setTotalImages(pageCount);
+      const iter = imageIterator(
+        height,
+        width,
+        pageCount,
+        url,
+        setLoadingImageIndex
+      );
+
+      setArtifactData([]);
+      for await (const image of iter) {
+        setArtifactData((prev) => [...prev, image]);
+      }
+      setLoadingImageIndex(null);
     };
 
     if (artifact !== null) {
@@ -88,22 +121,29 @@ export const Plot: React.FC<PlotProps> = ({
 
   const displayDataPlotterOrLoadingProgress = () => {
     if (isPlottingEnabled && workflowName !== null && artifact !== null) {
-      if (artifactData !== null && totalImages !== null) {
+      if (
+        artifactData !== null &&
+        artifactData.length >= 1 &&
+        totalImages !== null
+      ) {
         return (
-          <DataPlotter
-            artifact={artifact}
-            data={artifactData}
-            totalImages={totalImages}
-          />
+          <>
+            <DataPlotter
+              loadingIndex={loadingImageIndex}
+              artifact={artifact}
+              data={artifactData}
+              totalImages={totalImages}
+            />
+            {loadingImageIndex && (
+              <DataLoadingProgress
+                mimeType={artifact.mimeType}
+                totalImages={totalImages}
+                loadingImageIndex={loadingImageIndex}
+              />
+            )}
+          </>
         );
       }
-      return (
-        <DataLoadingProgress
-          mimeType={artifact.mimeType}
-          totalImages={totalImages}
-          loadingImageIndex={loadingImageIndex}
-        />
-      );
     }
   };