From 1314d8ae0a2017c525a802ecdc5b38522ea52230 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 11 Sep 2026 11:18:32 +0100
Subject: [PATCH 01/24] Add skeleton plot component

---
 frontend/unified/src/App.tsx                  |   7 +-
 .../src/components/Plot/ArtifactSelector.tsx  | 153 ++++++++++++++++++
 frontend/unified/src/components/Plot/Plot.tsx |  81 ++++++++++
 3 files changed, 236 insertions(+), 5 deletions(-)
 create mode 100644 frontend/unified/src/components/Plot/ArtifactSelector.tsx
 create mode 100644 frontend/unified/src/components/Plot/Plot.tsx

diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index 1f7f38b..5131b96 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -14,6 +14,7 @@ import { WorkflowForm } from "./components/WorkflowForm";
 import { DisplayLogMeta } from "./components/InspectLogMeta";
 import { Beamline, Technique } from "./types";
 import { ParameterConfiguration } from "./components/ParameterConfiguration/ParameterConfiguration";
+import { Plot } from "./components/Plot/Plot";
 import { ApolloProvider, useQuery } from "@apollo/client/react";
 import { apolloClientWorkflows } from "../../src/ApolloClient";
 import { gql, type TypedDocumentNode } from "@apollo/client";
@@ -302,11 +303,7 @@ export const App: React.FC = () => {
           <Stack spacing={VERTICAL_SPACING} width="500px">
             <Typography variant="h5">Plot</Typography>
 
-            <PlaceholderComponent
-              placeholderText="Plot component placeholder"
-              height={200}
-              width={500}
-            />
+            <Plot workflowName="example-template-599zg" visit={selectedVisit} />
             <Divider sx={{ width: "100%" }} />
             <Typography variant="h5">Log</Typography>
             <DisplayLogMeta visit={selectedVisit} TableInfo={TableInfo} />
diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
new file mode 100644
index 0000000..7d3e979
--- /dev/null
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -0,0 +1,153 @@
+import { gql, TypedDocumentNode } from "@apollo/client";
+import {
+  GetWorkflowArtifactsQuery,
+  GetWorkflowArtifactsQueryVariables,
+} from "./__generated__/ArtifactSelector.generated";
+import { useSuspenseQuery } from "@apollo/client/react";
+import { Visit } from "../JobsViewer/JobsViewer";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { ReactElement, useState } from "react";
+
+const GET_WORKFLOW_ARTIFACTS: TypedDocumentNode<
+  GetWorkflowArtifactsQuery,
+  GetWorkflowArtifactsQueryVariables
+> = gql`
+  query GetWorkflowArtifacts($visit: VisitInput!, $name: String!) {
+    workflow(visit: $visit, name: $name) {
+      name
+      status {
+        __typename
+        ... on WorkflowPendingStatus {
+          message
+        }
+        ... on WorkflowRunningStatus {
+          tasks {
+            id
+            name
+            status
+            stepType
+            artifacts {
+              name
+              url
+              mimeType
+            }
+          }
+        }
+        ... on WorkflowSucceededStatus {
+          __typename
+          startTime
+          tasks {
+            id
+            name
+            status
+            stepType
+            artifacts {
+              name
+              url
+              mimeType
+            }
+          }
+        }
+        ... on WorkflowFailedStatus {
+          tasks {
+            id
+            name
+            status
+            stepType
+            artifacts {
+              name
+              url
+              mimeType
+            }
+          }
+        }
+        ... on WorkflowErroredStatus {
+          tasks {
+            id
+            name
+            status
+            stepType
+            artifacts {
+              name
+              url
+              mimeType
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+type ArtifactSelectorProps = {
+  workflowName: string;
+  visit: Visit;
+  setArtifactUrl: (_: string | null) => void;
+  isPlottingEnabled: boolean;
+};
+
+export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
+  workflowName,
+  visit,
+  setArtifactUrl,
+  isPlottingEnabled,
+}: ArtifactSelectorProps) => {
+  const [selectedArtifact, setSelectedArtifact] = useState<string>("");
+  const { error, data } = useSuspenseQuery(GET_WORKFLOW_ARTIFACTS, {
+    variables: {
+      name: workflowName,
+      visit: visit,
+    },
+  });
+
+  if (error) return <p>Error: {error.message}</p>;
+
+  const generateArtifactList = (): ReactElement[] => {
+    switch (data.workflow?.status?.__typename) {
+      case "WorkflowSucceededStatus": {
+        const taskNamesAndImageArtifacts = data.workflow.status.tasks
+          .map((task) => [
+            task.name,
+            task.artifacts.filter(
+              (artifact) => artifact.mimeType === "image/jpeg"
+            ),
+          ])
+          .filter(([_, artifacts]) => artifacts.length > 0);
+
+        return taskNamesAndImageArtifacts.map(([taskName, artifacts]) => {
+          return artifacts.map((artifact) => {
+            const label = `${taskName}: ${artifact.name}`;
+            return (
+              <MenuItem key={label} value={label} data-url={artifact.url}>
+                {label}
+              </MenuItem>
+            );
+          });
+        });
+      }
+      default:
+        console.log("Handle other workflow status cases");
+        return [<MenuItem>default</MenuItem>];
+    }
+  };
+
+  return (
+    <FormControl>
+      <InputLabel>Artifact</InputLabel>
+      <Select
+        disabled={!isPlottingEnabled}
+        onChange={(_, value) => {
+          if (value === null || value === undefined) {
+            throw Error(
+              "Value of selected artifact should be a component but is null or undefined"
+            );
+          }
+          setSelectedArtifact(value.props.value);
+          setArtifactUrl(value.props["data-url"]);
+        }}
+        value={selectedArtifact}
+        children={generateArtifactList()}
+      />
+    </FormControl>
+  );
+};
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
new file mode 100644
index 0000000..253ebfa
--- /dev/null
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -0,0 +1,81 @@
+import { Suspense, useEffect, useState } from "react";
+import { Visit } from "../JobsViewer/JobsViewer";
+import { ArtifactSelector } from "./ArtifactSelector";
+import { Switch } from "@mui/material";
+import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
+import ndarray from "ndarray";
+
+type PlotProps = {
+  workflowName: string;
+  visit: Visit;
+};
+
+export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
+  const [artifactUrl, setArtifactUrl] = useState<string | null>(null);
+  const [artifactData, setArtifactData] = useState<NDT | null>(null);
+  const [isPlottingEnabled, setIsPlottingEnabled] = useState<boolean>(false);
+
+  const fetchArtifactData = (url: string): NDT => {
+    // TODO: fetch real artifact data, generating array locally for now
+    console.log("Should fetch artifact data from URL: ", url);
+    console.log("Instead, displaying hardcoded local data");
+    const arr = new Uint8Array(100);
+    const testData = arr.map((elem, idx) => (elem = idx));
+    return ndarray(testData, [10, 10]) as NDT;
+  };
+
+  useEffect(() => {
+    if (artifactUrl !== null) {
+      setArtifactData(fetchArtifactData(artifactUrl));
+    }
+  }, [artifactUrl]);
+
+  const displayPlotter = () => {
+    if (isPlottingEnabled) {
+      if (artifactUrl !== null && artifactData !== null) {
+        return (
+          <>
+            <p>
+              Warning: this is <strong>not</strong> displaying data for selected
+              step, only displaying dummy data
+            </p>
+            <HeatmapPlot
+              domain={[0, 255]}
+              values={artifactData}
+              plotConfig={{
+                title: "Test plot",
+                xLabel: "x",
+                yLabel: "y",
+              }}
+            />
+          </>
+        );
+      } else if (artifactUrl !== null && artifactData === null) {
+        return <p>Loading data...</p>;
+      } else {
+        console.log("artifactUrl: ", artifactUrl);
+        console.log("artifactData: ", artifactData);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Switch
+        size="small"
+        checked={isPlottingEnabled}
+        onChange={() => setIsPlottingEnabled(!isPlottingEnabled)}
+        slotProps={{ input: { "aria-label": "controlled" } }}
+      />
+      <Suspense fallback={<div>Loading...</div>}>
+        <ArtifactSelector
+          workflowName={workflowName}
+          visit={visit}
+          setArtifactUrl={setArtifactUrl}
+          isPlottingEnabled={isPlottingEnabled}
+        />
+      </Suspense>
+      {displayPlotter()}
+    </>
+  );
+};

From 15142093793838faed9f5670906faabc56668ca6 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 11 Sep 2026 12:15:59 +0100
Subject: [PATCH 02/24] Display single JPEG image artifact

Note that this is using the backend proxy that is intended for
converting multi-page tiffs to PNGs, so while the artifact is a JPEG,
the backend converts it to a PNG and is what the frontend is consuming.
---
 frontend/unified/src/components/Plot/Plot.tsx | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 253ebfa..c74ddbc 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -4,6 +4,8 @@ import { ArtifactSelector } from "./ArtifactSelector";
 import { Switch } from "@mui/material";
 import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
 import ndarray from "ndarray";
+import { decode } from "fast-png";
+import { proxyService } from "../../../../tomography/src/api/services";
 
 type PlotProps = {
   workflowName: string;
@@ -15,18 +17,20 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
   const [artifactData, setArtifactData] = useState<NDT | null>(null);
   const [isPlottingEnabled, setIsPlottingEnabled] = useState<boolean>(false);
 
-  const fetchArtifactData = (url: string): NDT => {
-    // TODO: fetch real artifact data, generating array locally for now
-    console.log("Should fetch artifact data from URL: ", url);
-    console.log("Instead, displaying hardcoded local data");
-    const arr = new Uint8Array(100);
-    const testData = arr.map((elem, idx) => (elem = idx));
-    return ndarray(testData, [10, 10]) as NDT;
-  };
-
   useEffect(() => {
+    const fetchArtifactData = async (url: string) => {
+      console.log("Fetching artifact data from URL: ", url);
+      const data = await proxyService.getTiffPage(url, 0);
+      const decodedPng = decode(data.buffer);
+      const arr = ndarray(decodedPng.data, [
+        decodedPng.height,
+        decodedPng.width,
+      ]) as NDT;
+      setArtifactData(arr);
+    };
+
     if (artifactUrl !== null) {
-      setArtifactData(fetchArtifactData(artifactUrl));
+      fetchArtifactData(artifactUrl);
     }
   }, [artifactUrl]);
 
@@ -34,21 +38,15 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
     if (isPlottingEnabled) {
       if (artifactUrl !== null && artifactData !== null) {
         return (
-          <>
-            <p>
-              Warning: this is <strong>not</strong> displaying data for selected
-              step, only displaying dummy data
-            </p>
-            <HeatmapPlot
-              domain={[0, 255]}
-              values={artifactData}
-              plotConfig={{
-                title: "Test plot",
-                xLabel: "x",
-                yLabel: "y",
-              }}
-            />
-          </>
+          <HeatmapPlot
+            domain={[0, 255]}
+            values={artifactData}
+            plotConfig={{
+              title: "Test plot",
+              xLabel: "x",
+              yLabel: "y",
+            }}
+          />
         );
       } else if (artifactUrl !== null && artifactData === null) {
         return <p>Loading data...</p>;

From 91f6fd454542670758a378686fc03df6eb5c7321 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 11 Sep 2026 13:22:18 +0100
Subject: [PATCH 03/24] Include tiff files in plot artifact selector

---
 frontend/unified/src/components/Plot/ArtifactSelector.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
index 7d3e979..bbfcfcf 100644
--- a/frontend/unified/src/components/Plot/ArtifactSelector.tsx
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -86,6 +86,8 @@ type ArtifactSelectorProps = {
   isPlottingEnabled: boolean;
 };
 
+const IMAGE_ARTIFACT_MIME_TYPES = ["image/jpeg", "image/tiff"];
+
 export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
   workflowName,
   visit,
@@ -108,8 +110,8 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
         const taskNamesAndImageArtifacts = data.workflow.status.tasks
           .map((task) => [
             task.name,
-            task.artifacts.filter(
-              (artifact) => artifact.mimeType === "image/jpeg"
+            task.artifacts.filter((artifact) =>
+              IMAGE_ARTIFACT_MIME_TYPES.includes(artifact.mimeType)
             ),
           ])
           .filter(([_, artifacts]) => artifacts.length > 0);

From 7ed11f1e9c7f616b34a9dcc79d2d3902ac1ac916 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 11 Sep 2026 15:44:53 +0100
Subject: [PATCH 04/24] Determine if plotting single or multi image artifact

---
 .../src/components/Plot/ArtifactSelector.tsx  | 10 +++++-
 frontend/unified/src/components/Plot/Plot.tsx | 33 +++++++++++++------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
index bbfcfcf..ed92f76 100644
--- a/frontend/unified/src/components/Plot/ArtifactSelector.tsx
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -83,6 +83,7 @@ type ArtifactSelectorProps = {
   workflowName: string;
   visit: Visit;
   setArtifactUrl: (_: string | null) => void;
+  setArtifactMimeType: (_: string | null) => void;
   isPlottingEnabled: boolean;
 };
 
@@ -92,6 +93,7 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
   workflowName,
   visit,
   setArtifactUrl,
+  setArtifactMimeType,
   isPlottingEnabled,
 }: ArtifactSelectorProps) => {
   const [selectedArtifact, setSelectedArtifact] = useState<string>("");
@@ -120,7 +122,12 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
           return artifacts.map((artifact) => {
             const label = `${taskName}: ${artifact.name}`;
             return (
-              <MenuItem key={label} value={label} data-url={artifact.url}>
+              <MenuItem
+                key={label}
+                value={label}
+                data-url={artifact.url}
+                data-mime-type={artifact.mimeType}
+              >
                 {label}
               </MenuItem>
             );
@@ -146,6 +153,7 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
           }
           setSelectedArtifact(value.props.value);
           setArtifactUrl(value.props["data-url"]);
+          setArtifactMimeType(value.props["data-mime-type"]);
         }}
         value={selectedArtifact}
         children={generateArtifactList()}
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index c74ddbc..604ca3d 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -14,6 +14,7 @@ type PlotProps = {
 
 export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
   const [artifactUrl, setArtifactUrl] = useState<string | null>(null);
+  const [artifactMimeType, setArtifactMimeType] = useState<string | null>(null);
   const [artifactData, setArtifactData] = useState<NDT | null>(null);
   const [isPlottingEnabled, setIsPlottingEnabled] = useState<boolean>(false);
 
@@ -36,17 +37,28 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
 
   const displayPlotter = () => {
     if (isPlottingEnabled) {
-      if (artifactUrl !== null && artifactData !== null) {
+      if (
+        artifactUrl !== null &&
+        artifactMimeType !== null &&
+        artifactData !== null
+      ) {
         return (
-          <HeatmapPlot
-            domain={[0, 255]}
-            values={artifactData}
-            plotConfig={{
-              title: "Test plot",
-              xLabel: "x",
-              yLabel: "y",
-            }}
-          />
+          <>
+            <HeatmapPlot
+              domain={[0, 255]}
+              values={artifactData}
+              plotConfig={{
+                title: "Test plot",
+                xLabel: "x",
+                yLabel: "y",
+              }}
+            />
+            {artifactMimeType === "image/jpeg" ? (
+              <p>Single image</p>
+            ) : (
+              <p>Multiple images</p>
+            )}
+          </>
         );
       } else if (artifactUrl !== null && artifactData === null) {
         return <p>Loading data...</p>;
@@ -70,6 +82,7 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           workflowName={workflowName}
           visit={visit}
           setArtifactUrl={setArtifactUrl}
+          setArtifactMimeType={setArtifactMimeType}
           isPlottingEnabled={isPlottingEnabled}
         />
       </Suspense>

From 3043611f9f29f1afd327b54b0b57c49c9b19fd77 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 11 Sep 2026 16:49:28 +0100
Subject: [PATCH 05/24] Attach whole artifact object to menu item component

---
 .../src/components/Plot/ArtifactSelector.tsx  | 24 ++++++++---------
 frontend/unified/src/components/Plot/Plot.tsx | 26 +++++++------------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
index ed92f76..ead8a99 100644
--- a/frontend/unified/src/components/Plot/ArtifactSelector.tsx
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -79,11 +79,18 @@ const GET_WORKFLOW_ARTIFACTS: TypedDocumentNode<
   }
 `;
 
+type NonNullWorkflow = NonNullable<GetWorkflowArtifactsQuery["workflow"]>;
+type NonNullWorkflowStatus = NonNullable<NonNullWorkflow["status"]>;
+type WorkflowSucceededStatus = Extract<
+  NonNullWorkflowStatus,
+  { __typename: "WorkflowSucceededStatus" }
+>;
+export type Artifact = WorkflowSucceededStatus["tasks"][0]["artifacts"][0];
+
 type ArtifactSelectorProps = {
   workflowName: string;
   visit: Visit;
-  setArtifactUrl: (_: string | null) => void;
-  setArtifactMimeType: (_: string | null) => void;
+  setArtifact: (_: Artifact | null) => void;
   isPlottingEnabled: boolean;
 };
 
@@ -92,8 +99,7 @@ const IMAGE_ARTIFACT_MIME_TYPES = ["image/jpeg", "image/tiff"];
 export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
   workflowName,
   visit,
-  setArtifactUrl,
-  setArtifactMimeType,
+  setArtifact,
   isPlottingEnabled,
 }: ArtifactSelectorProps) => {
   const [selectedArtifact, setSelectedArtifact] = useState<string>("");
@@ -122,12 +128,7 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
           return artifacts.map((artifact) => {
             const label = `${taskName}: ${artifact.name}`;
             return (
-              <MenuItem
-                key={label}
-                value={label}
-                data-url={artifact.url}
-                data-mime-type={artifact.mimeType}
-              >
+              <MenuItem key={label} value={label} data-artifact={artifact}>
                 {label}
               </MenuItem>
             );
@@ -152,8 +153,7 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
             );
           }
           setSelectedArtifact(value.props.value);
-          setArtifactUrl(value.props["data-url"]);
-          setArtifactMimeType(value.props["data-mime-type"]);
+          setArtifact(value.props["data-artifact"]);
         }}
         value={selectedArtifact}
         children={generateArtifactList()}
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 604ca3d..5996c75 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -1,6 +1,6 @@
 import { Suspense, useEffect, useState } from "react";
 import { Visit } from "../JobsViewer/JobsViewer";
-import { ArtifactSelector } from "./ArtifactSelector";
+import { ArtifactSelector, Artifact } from "./ArtifactSelector";
 import { Switch } from "@mui/material";
 import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
 import ndarray from "ndarray";
@@ -13,8 +13,7 @@ type PlotProps = {
 };
 
 export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
-  const [artifactUrl, setArtifactUrl] = useState<string | null>(null);
-  const [artifactMimeType, setArtifactMimeType] = useState<string | null>(null);
+  const [artifact, setArtifact] = useState<Artifact | null>(null);
   const [artifactData, setArtifactData] = useState<NDT | null>(null);
   const [isPlottingEnabled, setIsPlottingEnabled] = useState<boolean>(false);
 
@@ -30,18 +29,14 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
       setArtifactData(arr);
     };
 
-    if (artifactUrl !== null) {
-      fetchArtifactData(artifactUrl);
+    if (artifact !== null) {
+      fetchArtifactData(artifact?.url as string);
     }
-  }, [artifactUrl]);
+  }, [artifact]);
 
   const displayPlotter = () => {
     if (isPlottingEnabled) {
-      if (
-        artifactUrl !== null &&
-        artifactMimeType !== null &&
-        artifactData !== null
-      ) {
+      if (artifact !== null && artifactData !== null) {
         return (
           <>
             <HeatmapPlot
@@ -53,17 +48,17 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
                 yLabel: "y",
               }}
             />
-            {artifactMimeType === "image/jpeg" ? (
+            {artifact.mimeType === "image/jpeg" ? (
               <p>Single image</p>
             ) : (
               <p>Multiple images</p>
             )}
           </>
         );
-      } else if (artifactUrl !== null && artifactData === null) {
+      } else if (artifact !== null && artifactData === null) {
         return <p>Loading data...</p>;
       } else {
-        console.log("artifactUrl: ", artifactUrl);
+        console.log("artifact URL: ", artifact?.url);
         console.log("artifactData: ", artifactData);
       }
     }
@@ -81,8 +76,7 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
         <ArtifactSelector
           workflowName={workflowName}
           visit={visit}
-          setArtifactUrl={setArtifactUrl}
-          setArtifactMimeType={setArtifactMimeType}
+          setArtifact={setArtifact}
           isPlottingEnabled={isPlottingEnabled}
         />
       </Suspense>

From 595ef91cf3d0a1c169fbc6a35c0445db1729c362 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 11 Sep 2026 17:01:42 +0100
Subject: [PATCH 06/24] Define tuple type for task name + artifacts array

---
 .../src/components/Plot/ArtifactSelector.tsx  | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
index ead8a99..350bcf6 100644
--- a/frontend/unified/src/components/Plot/ArtifactSelector.tsx
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -87,6 +87,8 @@ type WorkflowSucceededStatus = Extract<
 >;
 export type Artifact = WorkflowSucceededStatus["tasks"][0]["artifacts"][0];
 
+type TaskNameAndArtifactTuple = [string, Artifact[]];
+
 type ArtifactSelectorProps = {
   workflowName: string;
   visit: Visit;
@@ -115,15 +117,23 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
   const generateArtifactList = (): ReactElement[] => {
     switch (data.workflow?.status?.__typename) {
       case "WorkflowSucceededStatus": {
-        const taskNamesAndImageArtifacts = data.workflow.status.tasks
-          .map((task) => [
-            task.name,
-            task.artifacts.filter((artifact) =>
-              IMAGE_ARTIFACT_MIME_TYPES.includes(artifact.mimeType)
-            ),
-          ])
-          .filter(([_, artifacts]) => artifacts.length > 0);
+        const taskNamesAndImageArtifacts: TaskNameAndArtifactTuple[] =
+          data.workflow.status.tasks
+            .map(
+              (task) =>
+                [
+                  task.name,
+                  task.artifacts.filter((artifact) =>
+                    IMAGE_ARTIFACT_MIME_TYPES.includes(artifact.mimeType)
+                  ),
+                ] as TaskNameAndArtifactTuple
+            )
+            .filter(([_, artifacts]) => artifacts.length > 0);
 
+        console.log(
+          "taskNamesAndImageArtifacts is: ",
+          taskNamesAndImageArtifacts
+        );
         return taskNamesAndImageArtifacts.map(([taskName, artifacts]) => {
           return artifacts.map((artifact) => {
             const label = `${taskName}: ${artifact.name}`;

From ffbf8080ef6184165c5466d9863c680662483e88 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 11 Sep 2026 17:02:39 +0100
Subject: [PATCH 07/24] Fix incorrect function return type

---
 frontend/unified/src/components/Plot/ArtifactSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
index 350bcf6..ced337a 100644
--- a/frontend/unified/src/components/Plot/ArtifactSelector.tsx
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -6,7 +6,7 @@ import {
 import { useSuspenseQuery } from "@apollo/client/react";
 import { Visit } from "../JobsViewer/JobsViewer";
 import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
-import { ReactElement, useState } from "react";
+import { useState } from "react";
 
 const GET_WORKFLOW_ARTIFACTS: TypedDocumentNode<
   GetWorkflowArtifactsQuery,
@@ -114,7 +114,7 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
 
   if (error) return <p>Error: {error.message}</p>;
 
-  const generateArtifactList = (): ReactElement[] => {
+  const generateArtifactList = (): React.ReactNode[] => {
     switch (data.workflow?.status?.__typename) {
       case "WorkflowSucceededStatus": {
         const taskNamesAndImageArtifacts: TaskNameAndArtifactTuple[] =

From 3f20079388b514f3195251229ae841af8c914cc1 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 10:54:14 +0100
Subject: [PATCH 08/24] Enable sliding through multi-page tiff file artifact

---
 frontend/unified/src/components/Plot/Plot.tsx | 58 ++++++++++++++-----
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 5996c75..8c903b3 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -1,11 +1,12 @@
 import { Suspense, useEffect, useState } from "react";
 import { Visit } from "../JobsViewer/JobsViewer";
 import { ArtifactSelector, Artifact } from "./ArtifactSelector";
-import { Switch } from "@mui/material";
+import { Slider, Switch } from "@mui/material";
 import { HeatmapPlot, 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";
 
 type PlotProps = {
   workflowName: string;
@@ -14,23 +15,42 @@ type PlotProps = {
 
 export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
   const [artifact, setArtifact] = useState<Artifact | null>(null);
-  const [artifactData, setArtifactData] = useState<NDT | null>(null);
+  const [artifactData, setArtifactData] = useState<NDT[] | null>(null);
+  const [totalImages, setTotalImages] = useState<number | null>(null);
+  const [displayedImageIndex, setDisplayedImageIndex] = useState<number | null>(
+    null
+  );
   const [isPlottingEnabled, setIsPlottingEnabled] = useState<boolean>(false);
 
   useEffect(() => {
-    const fetchArtifactData = async (url: string) => {
+    const fetchArtifactData = async (url: string, mimeType: string) => {
       console.log("Fetching artifact data from URL: ", url);
-      const data = await proxyService.getTiffPage(url, 0);
-      const decodedPng = decode(data.buffer);
-      const arr = ndarray(decodedPng.data, [
-        decodedPng.height,
-        decodedPng.width,
-      ]) as NDT;
-      setArtifactData(arr);
+      if (mimeType === "image/jpeg") {
+        setTotalImages(1);
+        const data = await proxyService.getTiffPage(url, 0);
+        const decodedPng = decode(data.buffer);
+        const arr = ndarray(decodedPng.data, [
+          decodedPng.height,
+          decodedPng.width,
+        ]) as NDT;
+        setDisplayedImageIndex(0);
+        setArtifactData([arr]);
+        return;
+      }
+
+      loadData(
+        url,
+        1,
+        (_: number) => console.log("Placeholder function"),
+        setTotalImages
+      ).then((data) => {
+        setDisplayedImageIndex(0);
+        setArtifactData(data);
+      });
     };
 
     if (artifact !== null) {
-      fetchArtifactData(artifact?.url as string);
+      fetchArtifactData(artifact?.url as string, artifact.mimeType);
     }
   }, [artifact]);
 
@@ -41,17 +61,23 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           <>
             <HeatmapPlot
               domain={[0, 255]}
-              values={artifactData}
+              values={artifactData[displayedImageIndex]}
               plotConfig={{
                 title: "Test plot",
                 xLabel: "x",
                 yLabel: "y",
               }}
             />
-            {artifact.mimeType === "image/jpeg" ? (
-              <p>Single image</p>
-            ) : (
-              <p>Multiple images</p>
+            {artifact.mimeType === "image/tiff" && (
+              <Slider
+                marks
+                valueLabelDisplay="auto"
+                step={1}
+                min={0}
+                max={totalImages - 1}
+                defaultValue={0}
+                onChange={(_, value: number) => setDisplayedImageIndex(value)}
+              />
             )}
           </>
         );

From 670720a23b052cf8137c6f75b5ec08fd12fcb34a Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 12:18:06 +0100
Subject: [PATCH 09/24] Display progress of fetching multi-page tiff artifact

---
 frontend/unified/src/components/Plot/Plot.tsx | 97 +++++++++++++++----
 1 file changed, 78 insertions(+), 19 deletions(-)

diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 8c903b3..a18162e 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -1,7 +1,13 @@
 import { Suspense, useEffect, useState } from "react";
 import { Visit } from "../JobsViewer/JobsViewer";
 import { ArtifactSelector, Artifact } from "./ArtifactSelector";
-import { Slider, Switch } from "@mui/material";
+import {
+  Box,
+  CircularProgress,
+  Slider,
+  Switch,
+  Typography,
+} from "@mui/material";
 import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
 import ndarray from "ndarray";
 import { decode } from "fast-png";
@@ -16,6 +22,9 @@ type PlotProps = {
 export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
   const [artifact, setArtifact] = useState<Artifact | null>(null);
   const [artifactData, setArtifactData] = useState<NDT[] | null>(null);
+  const [fetchingImageIndex, setFetchingImageIndex] = useState<number | null>(
+    null
+  );
   const [totalImages, setTotalImages] = useState<number | null>(null);
   const [displayedImageIndex, setDisplayedImageIndex] = useState<number | null>(
     null
@@ -27,23 +36,21 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
       console.log("Fetching artifact data from URL: ", url);
       if (mimeType === "image/jpeg") {
         setTotalImages(1);
+        setFetchingImageIndex(0);
         const data = await proxyService.getTiffPage(url, 0);
         const decodedPng = decode(data.buffer);
         const arr = ndarray(decodedPng.data, [
           decodedPng.height,
           decodedPng.width,
         ]) as NDT;
+        setFetchingImageIndex(null);
         setDisplayedImageIndex(0);
         setArtifactData([arr]);
         return;
       }
 
-      loadData(
-        url,
-        1,
-        (_: number) => console.log("Placeholder function"),
-        setTotalImages
-      ).then((data) => {
+      loadData(url, 1, setFetchingImageIndex, setTotalImages).then((data) => {
+        setFetchingImageIndex(null);
         setDisplayedImageIndex(0);
         setArtifactData(data);
       });
@@ -57,6 +64,20 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
   const displayPlotter = () => {
     if (isPlottingEnabled) {
       if (artifact !== null && artifactData !== null) {
+        if (artifact.mimeType === "image/jpeg") {
+          return (
+            <HeatmapPlot
+              domain={[0, 255]}
+              values={artifactData[displayedImageIndex]}
+              plotConfig={{
+                title: "Test plot",
+                xLabel: "x",
+                yLabel: "y",
+              }}
+            />
+          );
+        }
+
         return (
           <>
             <HeatmapPlot
@@ -68,21 +89,59 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
                 yLabel: "y",
               }}
             />
-            {artifact.mimeType === "image/tiff" && (
-              <Slider
-                marks
-                valueLabelDisplay="auto"
-                step={1}
-                min={0}
-                max={totalImages - 1}
-                defaultValue={0}
-                onChange={(_, value: number) => setDisplayedImageIndex(value)}
-              />
-            )}
+            <Slider
+              marks
+              valueLabelDisplay="auto"
+              step={1}
+              min={0}
+              max={totalImages - 1}
+              defaultValue={0}
+              onChange={(_, value: number) => setDisplayedImageIndex(value)}
+            />
           </>
         );
       } else if (artifact !== null && artifactData === null) {
-        return <p>Loading data...</p>;
+        if (artifact.mimeType === "image/jpeg") {
+          return <p>Loading data...</p>;
+        }
+
+        // TODO: currently assuming that fetchingImageIndex is not `null`, to be able to then indicate
+        // progress if fetching artifact data, but it seemingly can be `null` for a short
+        // period, so need to check the relationship between the various states relating to
+        // fetching artifact data
+        return (
+          <Box
+            sx={{
+              position: "relative",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <CircularProgress
+              variant="determinate"
+              enableTrackSlot
+              size={80}
+              value={Math.round(
+                (fetchingImageIndex / totalImages) * 100 +
+                  (1 / totalImages) * 100
+              )}
+            />
+            <Box
+              sx={{
+                position: "absolute",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Typography
+                variant="caption"
+                component="div"
+              >{`${fetchingImageIndex + 1} / ${totalImages}`}</Typography>
+            </Box>
+          </Box>
+        );
       } else {
         console.log("artifact URL: ", artifact?.url);
         console.log("artifactData: ", artifactData);

From b41d9aff03f99389af9afb43b61b3bf2ef5f200d Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 12:48:32 +0100
Subject: [PATCH 10/24] Rename state to indicate generic loading operation

The image index state indicates the index that is being transformed into
an `NDT` rather than the image index being fetched from the backend
proxy.

The distinction between "loading" and "fetching" that's worth making is
relating to the progress indicator and whether it's indicating data
being fetched or data that has already been fetched and is being
transformed, and is relevant to the currently existing bug of the
`loadingImageIndex` able to be `null` even when the data is starting to
be "fetched".

This bug will be addressed in the following commit.
---
 frontend/unified/src/components/Plot/Plot.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index a18162e..050d1cb 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -22,7 +22,7 @@ type PlotProps = {
 export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
   const [artifact, setArtifact] = useState<Artifact | null>(null);
   const [artifactData, setArtifactData] = useState<NDT[] | null>(null);
-  const [fetchingImageIndex, setFetchingImageIndex] = useState<number | null>(
+  const [loadingImageIndex, setLoadingImageIndex] = useState<number | null>(
     null
   );
   const [totalImages, setTotalImages] = useState<number | null>(null);
@@ -36,21 +36,21 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
       console.log("Fetching artifact data from URL: ", url);
       if (mimeType === "image/jpeg") {
         setTotalImages(1);
-        setFetchingImageIndex(0);
+        setLoadingImageIndex(0);
         const data = await proxyService.getTiffPage(url, 0);
         const decodedPng = decode(data.buffer);
         const arr = ndarray(decodedPng.data, [
           decodedPng.height,
           decodedPng.width,
         ]) as NDT;
-        setFetchingImageIndex(null);
+        setLoadingImageIndex(null);
         setDisplayedImageIndex(0);
         setArtifactData([arr]);
         return;
       }
 
-      loadData(url, 1, setFetchingImageIndex, setTotalImages).then((data) => {
-        setFetchingImageIndex(null);
+      loadData(url, 1, setLoadingImageIndex, setTotalImages).then((data) => {
+        setLoadingImageIndex(null);
         setDisplayedImageIndex(0);
         setArtifactData(data);
       });
@@ -123,7 +123,7 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
               enableTrackSlot
               size={80}
               value={Math.round(
-                (fetchingImageIndex / totalImages) * 100 +
+                (loadingImageIndex / totalImages) * 100 +
                   (1 / totalImages) * 100
               )}
             />
@@ -138,7 +138,7 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
               <Typography
                 variant="caption"
                 component="div"
-              >{`${fetchingImageIndex + 1} / ${totalImages}`}</Typography>
+              >{`${loadingImageIndex + 1} / ${totalImages}`}</Typography>
             </Box>
           </Box>
         );

From 0224ab81559722ef45e5b247d885b26b3672e7ba Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 12:57:01 +0100
Subject: [PATCH 11/24] Display indeterminate progress when fetching multi-page
 tiff artifact

The index of the image being "loaded" is only called after the artifact
data has been "fetched" from workflows via the backend proxy. Meaning,
the image index will stay `null` until the entire artifact data has been
"fetched", and will be set to the first index only when the first page
has been "loaded" (namely, transformed into an `NDT`). This means that
it may take some time before the first page is indicated as being
"loaded".

While the data is being "fetched", an indeterminate progress indicator
is displayed, and when the data starts being "loaded", a determinate
progress indicator is displayed.
---
 frontend/unified/src/components/Plot/Plot.tsx | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 050d1cb..ac930e1 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -105,10 +105,6 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           return <p>Loading data...</p>;
         }
 
-        // TODO: currently assuming that fetchingImageIndex is not `null`, to be able to then indicate
-        // progress if fetching artifact data, but it seemingly can be `null` for a short
-        // period, so need to check the relationship between the various states relating to
-        // fetching artifact data
         return (
           <Box
             sx={{
@@ -118,28 +114,34 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
               alignItems: "center",
             }}
           >
-            <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>
+            {loadingImageIndex !== 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} />
+            )}
           </Box>
         );
       } else {

From b3536fb0e7959a18cebbcf7e27be0f2200e83ffa Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 14:21:54 +0100
Subject: [PATCH 12/24] Move data plotter to separate component

---
 .../src/components/Plot/DataPlotter.tsx       | 111 +++++++++++++++++
 frontend/unified/src/components/Plot/Plot.tsx | 112 ++----------------
 2 files changed, 124 insertions(+), 99 deletions(-)
 create mode 100644 frontend/unified/src/components/Plot/DataPlotter.tsx

diff --git a/frontend/unified/src/components/Plot/DataPlotter.tsx b/frontend/unified/src/components/Plot/DataPlotter.tsx
new file mode 100644
index 0000000..995ab23
--- /dev/null
+++ b/frontend/unified/src/components/Plot/DataPlotter.tsx
@@ -0,0 +1,111 @@
+import { Box, CircularProgress, Slider, Typography } from "@mui/material";
+import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
+import { Artifact } from "./ArtifactSelector";
+
+type DataPlotterProps = {
+  artifact: Artifact | null;
+  data: NDT[] | null;
+  totalImages: number | null;
+  displayedImageIndex: number | null;
+  setDisplayedImageIndex: (_: number) => void;
+  loadingImageIndex: number | null;
+};
+
+export const DataPlotter: React.FC<DataPlotterProps> = ({
+  artifact,
+  data,
+  totalImages,
+  displayedImageIndex,
+  setDisplayedImageIndex,
+  loadingImageIndex,
+}: DataPlotterProps) => {
+  const displayDataPlotter = () => {
+    if (artifact !== null && data !== null) {
+      if (artifact.mimeType === "image/jpeg") {
+        return (
+          <HeatmapPlot
+            domain={[0, 255]}
+            values={data[displayedImageIndex]}
+            plotConfig={{
+              title: "Test plot",
+              xLabel: "x",
+              yLabel: "y",
+            }}
+          />
+        );
+      }
+
+      return (
+        <>
+          <HeatmapPlot
+            domain={[0, 255]}
+            values={data[displayedImageIndex]}
+            plotConfig={{
+              title: "Test plot",
+              xLabel: "x",
+              yLabel: "y",
+            }}
+          />
+          <Slider
+            marks
+            valueLabelDisplay="auto"
+            step={1}
+            min={0}
+            max={totalImages - 1}
+            defaultValue={0}
+            onChange={(_, value: number) => setDisplayedImageIndex(value)}
+          />
+        </>
+      );
+    } else if (artifact !== null && data === null) {
+      if (artifact.mimeType === "image/jpeg") {
+        return <p>Loading data...</p>;
+      }
+
+      return (
+        <Box
+          sx={{
+            position: "relative",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {loadingImageIndex !== 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} />
+          )}
+        </Box>
+      );
+    } else {
+      console.log("artifact URL: ", artifact?.url);
+      console.log("data: ", data);
+    }
+  };
+
+  return displayDataPlotter();
+};
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index ac930e1..76a6085 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -1,18 +1,13 @@
 import { Suspense, useEffect, useState } from "react";
 import { Visit } from "../JobsViewer/JobsViewer";
 import { ArtifactSelector, Artifact } from "./ArtifactSelector";
-import {
-  Box,
-  CircularProgress,
-  Slider,
-  Switch,
-  Typography,
-} from "@mui/material";
-import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
+import { Switch } from "@mui/material";
+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";
 
 type PlotProps = {
   workflowName: string;
@@ -61,96 +56,6 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
     }
   }, [artifact]);
 
-  const displayPlotter = () => {
-    if (isPlottingEnabled) {
-      if (artifact !== null && artifactData !== null) {
-        if (artifact.mimeType === "image/jpeg") {
-          return (
-            <HeatmapPlot
-              domain={[0, 255]}
-              values={artifactData[displayedImageIndex]}
-              plotConfig={{
-                title: "Test plot",
-                xLabel: "x",
-                yLabel: "y",
-              }}
-            />
-          );
-        }
-
-        return (
-          <>
-            <HeatmapPlot
-              domain={[0, 255]}
-              values={artifactData[displayedImageIndex]}
-              plotConfig={{
-                title: "Test plot",
-                xLabel: "x",
-                yLabel: "y",
-              }}
-            />
-            <Slider
-              marks
-              valueLabelDisplay="auto"
-              step={1}
-              min={0}
-              max={totalImages - 1}
-              defaultValue={0}
-              onChange={(_, value: number) => setDisplayedImageIndex(value)}
-            />
-          </>
-        );
-      } else if (artifact !== null && artifactData === null) {
-        if (artifact.mimeType === "image/jpeg") {
-          return <p>Loading data...</p>;
-        }
-
-        return (
-          <Box
-            sx={{
-              position: "relative",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            {loadingImageIndex !== 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} />
-            )}
-          </Box>
-        );
-      } else {
-        console.log("artifact URL: ", artifact?.url);
-        console.log("artifactData: ", artifactData);
-      }
-    }
-  };
-
   return (
     <>
       <Switch
@@ -167,7 +72,16 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           isPlottingEnabled={isPlottingEnabled}
         />
       </Suspense>
-      {displayPlotter()}
+      {isPlottingEnabled && (
+        <DataPlotter
+          artifact={artifact}
+          data={artifactData}
+          totalImages={totalImages}
+          displayedImageIndex={displayedImageIndex}
+          setDisplayedImageIndex={setDisplayedImageIndex}
+          loadingImageIndex={loadingImageIndex}
+        />
+      )}
     </>
   );
 };

From f31dd5246b9e21debf9373082109c300d4e857e0 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 14:25:57 +0100
Subject: [PATCH 13/24] Move displayed image index state to data plotter

---
 frontend/unified/src/components/Plot/DataPlotter.tsx | 7 +++----
 frontend/unified/src/components/Plot/Plot.tsx        | 7 -------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/frontend/unified/src/components/Plot/DataPlotter.tsx b/frontend/unified/src/components/Plot/DataPlotter.tsx
index 995ab23..27973ce 100644
--- a/frontend/unified/src/components/Plot/DataPlotter.tsx
+++ b/frontend/unified/src/components/Plot/DataPlotter.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Box, CircularProgress, Slider, Typography } from "@mui/material";
 import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
 import { Artifact } from "./ArtifactSelector";
@@ -6,8 +7,6 @@ type DataPlotterProps = {
   artifact: Artifact | null;
   data: NDT[] | null;
   totalImages: number | null;
-  displayedImageIndex: number | null;
-  setDisplayedImageIndex: (_: number) => void;
   loadingImageIndex: number | null;
 };
 
@@ -15,10 +14,10 @@ export const DataPlotter: React.FC<DataPlotterProps> = ({
   artifact,
   data,
   totalImages,
-  displayedImageIndex,
-  setDisplayedImageIndex,
   loadingImageIndex,
 }: DataPlotterProps) => {
+  const [displayedImageIndex, setDisplayedImageIndex] = useState<number>(0);
+
   const displayDataPlotter = () => {
     if (artifact !== null && data !== null) {
       if (artifact.mimeType === "image/jpeg") {
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 76a6085..493c4f1 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -21,9 +21,6 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
     null
   );
   const [totalImages, setTotalImages] = useState<number | null>(null);
-  const [displayedImageIndex, setDisplayedImageIndex] = useState<number | null>(
-    null
-  );
   const [isPlottingEnabled, setIsPlottingEnabled] = useState<boolean>(false);
 
   useEffect(() => {
@@ -39,14 +36,12 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           decodedPng.width,
         ]) as NDT;
         setLoadingImageIndex(null);
-        setDisplayedImageIndex(0);
         setArtifactData([arr]);
         return;
       }
 
       loadData(url, 1, setLoadingImageIndex, setTotalImages).then((data) => {
         setLoadingImageIndex(null);
-        setDisplayedImageIndex(0);
         setArtifactData(data);
       });
     };
@@ -77,8 +72,6 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           artifact={artifact}
           data={artifactData}
           totalImages={totalImages}
-          displayedImageIndex={displayedImageIndex}
-          setDisplayedImageIndex={setDisplayedImageIndex}
           loadingImageIndex={loadingImageIndex}
         />
       )}

From c449388417edf4f5ee44c3f6bffb54f45764d93c Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 14:32:41 +0100
Subject: [PATCH 14/24] Render data plotter when no. of total images is known

---
 frontend/unified/src/components/Plot/DataPlotter.tsx | 2 +-
 frontend/unified/src/components/Plot/Plot.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/unified/src/components/Plot/DataPlotter.tsx b/frontend/unified/src/components/Plot/DataPlotter.tsx
index 27973ce..c528a5d 100644
--- a/frontend/unified/src/components/Plot/DataPlotter.tsx
+++ b/frontend/unified/src/components/Plot/DataPlotter.tsx
@@ -6,7 +6,7 @@ import { Artifact } from "./ArtifactSelector";
 type DataPlotterProps = {
   artifact: Artifact | null;
   data: NDT[] | null;
-  totalImages: number | null;
+  totalImages: number;
   loadingImageIndex: number | null;
 };
 
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 493c4f1..caf16d7 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -67,7 +67,7 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           isPlottingEnabled={isPlottingEnabled}
         />
       </Suspense>
-      {isPlottingEnabled && (
+      {isPlottingEnabled && totalImages !== null && (
         <DataPlotter
           artifact={artifact}
           data={artifactData}

From 02da473bf25ff5dcef44d0f3f414a42baba94a28 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 14:38:11 +0100
Subject: [PATCH 15/24] Render data plotter when artifact metadata is known

---
 frontend/unified/src/components/Plot/DataPlotter.tsx | 6 +++---
 frontend/unified/src/components/Plot/Plot.tsx        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/unified/src/components/Plot/DataPlotter.tsx b/frontend/unified/src/components/Plot/DataPlotter.tsx
index c528a5d..ab1fcb8 100644
--- a/frontend/unified/src/components/Plot/DataPlotter.tsx
+++ b/frontend/unified/src/components/Plot/DataPlotter.tsx
@@ -4,7 +4,7 @@ import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
 import { Artifact } from "./ArtifactSelector";
 
 type DataPlotterProps = {
-  artifact: Artifact | null;
+  artifact: Artifact;
   data: NDT[] | null;
   totalImages: number;
   loadingImageIndex: number | null;
@@ -19,7 +19,7 @@ export const DataPlotter: React.FC<DataPlotterProps> = ({
   const [displayedImageIndex, setDisplayedImageIndex] = useState<number>(0);
 
   const displayDataPlotter = () => {
-    if (artifact !== null && data !== null) {
+    if (data !== null) {
       if (artifact.mimeType === "image/jpeg") {
         return (
           <HeatmapPlot
@@ -56,7 +56,7 @@ export const DataPlotter: React.FC<DataPlotterProps> = ({
           />
         </>
       );
-    } else if (artifact !== null && data === null) {
+    } else if (data === null) {
       if (artifact.mimeType === "image/jpeg") {
         return <p>Loading data...</p>;
       }
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index caf16d7..b30f6de 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -67,7 +67,7 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           isPlottingEnabled={isPlottingEnabled}
         />
       </Suspense>
-      {isPlottingEnabled && totalImages !== null && (
+      {isPlottingEnabled && artifact !== null && totalImages !== null && (
         <DataPlotter
           artifact={artifact}
           data={artifactData}

From d095908ddeb497d6c30f28cfd39606c8fcc6088f Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 14:39:44 +0100
Subject: [PATCH 16/24] Change unnecessary else-if to else

---
 frontend/unified/src/components/Plot/DataPlotter.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/unified/src/components/Plot/DataPlotter.tsx b/frontend/unified/src/components/Plot/DataPlotter.tsx
index ab1fcb8..d91ac2a 100644
--- a/frontend/unified/src/components/Plot/DataPlotter.tsx
+++ b/frontend/unified/src/components/Plot/DataPlotter.tsx
@@ -56,7 +56,7 @@ export const DataPlotter: React.FC<DataPlotterProps> = ({
           />
         </>
       );
-    } else if (data === null) {
+    } else {
       if (artifact.mimeType === "image/jpeg") {
         return <p>Loading data...</p>;
       }
@@ -100,9 +100,6 @@ export const DataPlotter: React.FC<DataPlotterProps> = ({
           )}
         </Box>
       );
-    } else {
-      console.log("artifact URL: ", artifact?.url);
-      console.log("data: ", data);
     }
   };
 

From e94940b214c818f391912651a4c5c390dae9f802 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 15:06:29 +0100
Subject: [PATCH 17/24] Move data loading progress indicator to separate
 component

---
 .../components/Plot/DataLoadingProgress.tsx   |  61 +++++++++
 .../src/components/Plot/DataPlotter.tsx       | 116 +++++-------------
 frontend/unified/src/components/Plot/Plot.tsx |  31 +++--
 3 files changed, 118 insertions(+), 90 deletions(-)
 create mode 100644 frontend/unified/src/components/Plot/DataLoadingProgress.tsx

diff --git a/frontend/unified/src/components/Plot/DataLoadingProgress.tsx b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
new file mode 100644
index 0000000..c879c37
--- /dev/null
+++ b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
@@ -0,0 +1,61 @@
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+type DataLoadingProgressProps = {
+  mimeType: string;
+  loadingImageIndex: number | null;
+  totalImages: number;
+};
+
+export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
+  mimeType,
+  loadingImageIndex,
+  totalImages,
+}) => {
+  const displayDataLoadingProgress = () => {
+    if (mimeType === "image/jpeg") {
+      return <p>Loading data...</p>;
+    }
+
+    return (
+      <Box
+        sx={{
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {loadingImageIndex !== 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} />
+        )}
+      </Box>
+    );
+  };
+
+  return displayDataLoadingProgress();
+};
diff --git a/frontend/unified/src/components/Plot/DataPlotter.tsx b/frontend/unified/src/components/Plot/DataPlotter.tsx
index d91ac2a..5b115ef 100644
--- a/frontend/unified/src/components/Plot/DataPlotter.tsx
+++ b/frontend/unified/src/components/Plot/DataPlotter.tsx
@@ -1,106 +1,58 @@
 import { useState } from "react";
-import { Box, CircularProgress, Slider, Typography } from "@mui/material";
+import { Slider } from "@mui/material";
 import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
 import { Artifact } from "./ArtifactSelector";
 
 type DataPlotterProps = {
   artifact: Artifact;
-  data: NDT[] | null;
+  data: NDT[];
   totalImages: number;
-  loadingImageIndex: number | null;
 };
 
 export const DataPlotter: React.FC<DataPlotterProps> = ({
   artifact,
   data,
   totalImages,
-  loadingImageIndex,
 }: DataPlotterProps) => {
   const [displayedImageIndex, setDisplayedImageIndex] = useState<number>(0);
 
   const displayDataPlotter = () => {
-    if (data !== null) {
-      if (artifact.mimeType === "image/jpeg") {
-        return (
-          <HeatmapPlot
-            domain={[0, 255]}
-            values={data[displayedImageIndex]}
-            plotConfig={{
-              title: "Test plot",
-              xLabel: "x",
-              yLabel: "y",
-            }}
-          />
-        );
-      }
-
-      return (
-        <>
-          <HeatmapPlot
-            domain={[0, 255]}
-            values={data[displayedImageIndex]}
-            plotConfig={{
-              title: "Test plot",
-              xLabel: "x",
-              yLabel: "y",
-            }}
-          />
-          <Slider
-            marks
-            valueLabelDisplay="auto"
-            step={1}
-            min={0}
-            max={totalImages - 1}
-            defaultValue={0}
-            onChange={(_, value: number) => setDisplayedImageIndex(value)}
-          />
-        </>
-      );
-    } else {
-      if (artifact.mimeType === "image/jpeg") {
-        return <p>Loading data...</p>;
-      }
-
+    if (artifact.mimeType === "image/jpeg") {
       return (
-        <Box
-          sx={{
-            position: "relative",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+        <HeatmapPlot
+          domain={[0, 255]}
+          values={data[displayedImageIndex]}
+          plotConfig={{
+            title: "Test plot",
+            xLabel: "x",
+            yLabel: "y",
           }}
-        >
-          {loadingImageIndex !== 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} />
-          )}
-        </Box>
+        />
       );
     }
+
+    return (
+      <>
+        <HeatmapPlot
+          domain={[0, 255]}
+          values={data[displayedImageIndex]}
+          plotConfig={{
+            title: "Test plot",
+            xLabel: "x",
+            yLabel: "y",
+          }}
+        />
+        <Slider
+          marks
+          valueLabelDisplay="auto"
+          step={1}
+          min={0}
+          max={totalImages - 1}
+          defaultValue={0}
+          onChange={(_, value: number) => setDisplayedImageIndex(value)}
+        />
+      </>
+    );
   };
 
   return displayDataPlotter();
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index b30f6de..d4115bb 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -8,6 +8,7 @@ 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";
 
 type PlotProps = {
   workflowName: string;
@@ -51,6 +52,27 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
     }
   }, [artifact]);
 
+  const displayDataPlotterOrLoadingProgress = () => {
+    if (isPlottingEnabled && artifact !== null && totalImages !== null) {
+      if (artifactData !== null) {
+        return (
+          <DataPlotter
+            artifact={artifact}
+            data={artifactData}
+            totalImages={totalImages}
+          />
+        );
+      }
+      return (
+        <DataLoadingProgress
+          mimeType={artifact.mimeType}
+          totalImages={totalImages}
+          loadingImageIndex={loadingImageIndex}
+        />
+      );
+    }
+  };
+
   return (
     <>
       <Switch
@@ -67,14 +89,7 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
           isPlottingEnabled={isPlottingEnabled}
         />
       </Suspense>
-      {isPlottingEnabled && artifact !== null && totalImages !== null && (
-        <DataPlotter
-          artifact={artifact}
-          data={artifactData}
-          totalImages={totalImages}
-          loadingImageIndex={loadingImageIndex}
-        />
-      )}
+      {displayDataPlotterOrLoadingProgress()}
     </>
   );
 };

From c24dd881d428c70d11ca03b9ab7b19d2805dbd03 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 15:48:41 +0100
Subject: [PATCH 18/24] Allow total images to be null to display data fetching
 progress indicator

Given that `loadData()` calls the total images setter only after the
artifact data has been fetched via the backend proxy, rendering the data
fetching/loading progress indicator when the total images state is
updated to not be `null` is fundamentally equivalent to not displaying
the indeterminate progress indicator during data fetching.

This results in a blank area in the plot component section for some
non-trivial period of time between selecting the artifact from the
dropdown menu and seeing the indicator for fetching the first image from
the multi-page tiff artifact.
---
 frontend/unified/src/components/Plot/DataLoadingProgress.tsx | 4 ++--
 frontend/unified/src/components/Plot/Plot.tsx                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/unified/src/components/Plot/DataLoadingProgress.tsx b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
index c879c37..bb09238 100644
--- a/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
+++ b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
@@ -3,7 +3,7 @@ import { Box, CircularProgress, Typography } from "@mui/material";
 type DataLoadingProgressProps = {
   mimeType: string;
   loadingImageIndex: number | null;
-  totalImages: number;
+  totalImages: number | null;
 };
 
 export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
@@ -25,7 +25,7 @@ export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
           alignItems: "center",
         }}
       >
-        {loadingImageIndex !== null ? (
+        {loadingImageIndex !== null && totalImages !== null ? (
           <>
             <CircularProgress
               variant="determinate"
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index d4115bb..1e9a56f 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -53,8 +53,8 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
   }, [artifact]);
 
   const displayDataPlotterOrLoadingProgress = () => {
-    if (isPlottingEnabled && artifact !== null && totalImages !== null) {
-      if (artifactData !== null) {
+    if (isPlottingEnabled && artifact !== null) {
+      if (artifactData !== null && totalImages !== null) {
         return (
           <DataPlotter
             artifact={artifact}

From f1faffe67326a3f7d5dcbba9c82f412bcb1c9f7e Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 16:11:46 +0100
Subject: [PATCH 19/24] Display indeterminate progress indicator when loading
 single image artifact

---
 .../src/components/Plot/DataLoadingProgress.tsx     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/unified/src/components/Plot/DataLoadingProgress.tsx b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
index bb09238..8fa8f6f 100644
--- a/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
+++ b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
@@ -13,7 +13,18 @@ export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
 }) => {
   const displayDataLoadingProgress = () => {
     if (mimeType === "image/jpeg") {
-      return <p>Loading data...</p>;
+      return (
+        <Box
+          sx={{
+            position: "relative",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <CircularProgress enableTrackSlot size={80} />
+        </Box>
+      );
     }
 
     return (

From d0d5283f1a9d83a96e6882b9061ba2e31145138a Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 16:19:32 +0100
Subject: [PATCH 20/24] Add box with horizontally centerd content helper
 component

---
 .../components/Plot/DataLoadingProgress.tsx   | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/unified/src/components/Plot/DataLoadingProgress.tsx b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
index 8fa8f6f..e646cf0 100644
--- a/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
+++ b/frontend/unified/src/components/Plot/DataLoadingProgress.tsx
@@ -6,6 +6,25 @@ type DataLoadingProgressProps = {
   totalImages: number | null;
 };
 
+const BoxHorizontallyCenteredContent = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
 export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
   mimeType,
   loadingImageIndex,
@@ -14,28 +33,14 @@ export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
   const displayDataLoadingProgress = () => {
     if (mimeType === "image/jpeg") {
       return (
-        <Box
-          sx={{
-            position: "relative",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <CircularProgress enableTrackSlot size={80} />
-        </Box>
+        <BoxHorizontallyCenteredContent
+          children={<CircularProgress enableTrackSlot size={80} />}
+        />
       );
     }
 
     return (
-      <Box
-        sx={{
-          position: "relative",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
+      <BoxHorizontallyCenteredContent>
         {loadingImageIndex !== null && totalImages !== null ? (
           <>
             <CircularProgress
@@ -64,7 +69,7 @@ export const DataLoadingProgress: React.FC<DataLoadingProgressProps> = ({
         ) : (
           <CircularProgress enableTrackSlot size={80} />
         )}
-      </Box>
+      </BoxHorizontallyCenteredContent>
     );
   };
 

From 8eb6997bace1e787234d86decc7d62961e43161d Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 16:21:56 +0100
Subject: [PATCH 21/24] Add second hardcoded workflow for testing plot
 component

---
 frontend/unified/src/App.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index 5131b96..ed8cb7f 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -303,7 +303,14 @@ export const App: React.FC = () => {
           <Stack spacing={VERTICAL_SPACING} width="500px">
             <Typography variant="h5">Plot</Typography>
 
-            <Plot workflowName="example-template-599zg" visit={selectedVisit} />
+            <Plot
+              workflowName={
+                beamline === Beamline.DIAD
+                  ? "example-template-599zg"
+                  : "generate-multi-page-tiff-7mwgh"
+              }
+              visit={selectedVisit}
+            />
             <Divider sx={{ width: "100%" }} />
             <Typography variant="h5">Log</Typography>
             <DisplayLogMeta visit={selectedVisit} TableInfo={TableInfo} />

From ca5fdd7d2b3c479c6981d6a228ad16f0610bfe4b Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 16:57:21 +0100
Subject: [PATCH 22/24] Reset plot component if session changes

This is to avoid having a plot persist if the session changes. Note that
this also sets the plot component to be disabled; this may or may not be
the preferred behaviour. Ie, it could be that when switching between
sessions, if one has enabled the plot component, it'd be preferrable to
keep it enabled unless explicitly disabled.

For now, this is a simple enough solution to prevent "outdated plots"
from being displayed.
---
 frontend/unified/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index ed8cb7f..54490d2 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -310,6 +310,7 @@ export const App: React.FC = () => {
                   : "generate-multi-page-tiff-7mwgh"
               }
               visit={selectedVisit}
+              key={sessionName}
             />
             <Divider sx={{ width: "100%" }} />
             <Typography variant="h5">Log</Typography>

From a88241eb1fbd9f30f3a2cdcf9c036e529bd35763 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 17:01:45 +0100
Subject: [PATCH 23/24] Remove unnecessary console logging

---
 frontend/unified/src/components/Plot/ArtifactSelector.tsx | 4 ----
 frontend/unified/src/components/Plot/Plot.tsx             | 1 -
 2 files changed, 5 deletions(-)

diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
index ced337a..ba55356 100644
--- a/frontend/unified/src/components/Plot/ArtifactSelector.tsx
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -130,10 +130,6 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
             )
             .filter(([_, artifacts]) => artifacts.length > 0);
 
-        console.log(
-          "taskNamesAndImageArtifacts is: ",
-          taskNamesAndImageArtifacts
-        );
         return taskNamesAndImageArtifacts.map(([taskName, artifacts]) => {
           return artifacts.map((artifact) => {
             const label = `${taskName}: ${artifact.name}`;
diff --git a/frontend/unified/src/components/Plot/Plot.tsx b/frontend/unified/src/components/Plot/Plot.tsx
index 1e9a56f..55d8ef4 100644
--- a/frontend/unified/src/components/Plot/Plot.tsx
+++ b/frontend/unified/src/components/Plot/Plot.tsx
@@ -26,7 +26,6 @@ export const Plot: React.FC<PlotProps> = ({ workflowName, visit }) => {
 
   useEffect(() => {
     const fetchArtifactData = async (url: string, mimeType: string) => {
-      console.log("Fetching artifact data from URL: ", url);
       if (mimeType === "image/jpeg") {
         setTotalImages(1);
         setLoadingImageIndex(0);

From 9fc1bf87aa2b8e5e7d294f8f5381d6a813907882 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Mon, 14 Sep 2026 17:02:37 +0100
Subject: [PATCH 24/24] Change console log to error

---
 frontend/unified/src/components/Plot/ArtifactSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/unified/src/components/Plot/ArtifactSelector.tsx b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
index ba55356..c20ba03 100644
--- a/frontend/unified/src/components/Plot/ArtifactSelector.tsx
+++ b/frontend/unified/src/components/Plot/ArtifactSelector.tsx
@@ -142,7 +142,7 @@ export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
         });
       }
       default:
-        console.log("Handle other workflow status cases");
+        console.error("Handle other workflow status cases");
         return [<MenuItem>default</MenuItem>];
     }
   };