Add basic plot component for single JPEG and multi-page tiff artifacts

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,10 +303,14 @@ 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={
+                beamline === Beamline.DIAD
+                  ? "example-template-599zg"
+                  : "generate-multi-page-tiff-7mwgh"
+              }
+              visit={selectedVisit}
+              key={sessionName}
             />
             <Divider sx={{ width: "100%" }} />
             <Typography variant="h5">Log</Typography>

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

@@ -0,0 +1,169 @@
+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 { 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 NonNullWorkflow = NonNullable<GetWorkflowArtifactsQuery["workflow"]>;
+type NonNullWorkflowStatus = NonNullable<NonNullWorkflow["status"]>;
+type WorkflowSucceededStatus = Extract<
+  NonNullWorkflowStatus,
+  { __typename: "WorkflowSucceededStatus" }
+>;
+export type Artifact = WorkflowSucceededStatus["tasks"][0]["artifacts"][0];
+
+type TaskNameAndArtifactTuple = [string, Artifact[]];
+
+type ArtifactSelectorProps = {
+  workflowName: string;
+  visit: Visit;
+  setArtifact: (_: Artifact | null) => void;
+  isPlottingEnabled: boolean;
+};
+
+const IMAGE_ARTIFACT_MIME_TYPES = ["image/jpeg", "image/tiff"];
+
+export const ArtifactSelector: React.FC<ArtifactSelectorProps> = ({
+  workflowName,
+  visit,
+  setArtifact,
+  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 = (): React.ReactNode[] => {
+    switch (data.workflow?.status?.__typename) {
+      case "WorkflowSucceededStatus": {
+        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);
+
+        return taskNamesAndImageArtifacts.map(([taskName, artifacts]) => {
+          return artifacts.map((artifact) => {
+            const label = `${taskName}: ${artifact.name}`;
+            return (
+              <MenuItem key={label} value={label} data-artifact={artifact}>
+                {label}
+              </MenuItem>
+            );
+          });
+        });
+      }
+      default:
+        console.error("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);
+          setArtifact(value.props["data-artifact"]);
+        }}
+        value={selectedArtifact}
+        children={generateArtifactList()}
+      />
+    </FormControl>
+  );
+};

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

@@ -0,0 +1,77 @@
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+type DataLoadingProgressProps = {
+  mimeType: string;
+  loadingImageIndex: number | null;
+  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,
+  totalImages,
+}) => {
+  const displayDataLoadingProgress = () => {
+    if (mimeType === "image/jpeg") {
+      return (
+        <BoxHorizontallyCenteredContent
+          children={<CircularProgress enableTrackSlot size={80} />}
+        />
+      );
+    }
+
+    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>
+    );
+  };
+
+  return displayDataLoadingProgress();
+};

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

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Slider } from "@mui/material";
+import { HeatmapPlot, NDT } from "@diamondlightsource/davidia";
+import { Artifact } from "./ArtifactSelector";
+
+type DataPlotterProps = {
+  artifact: Artifact;
+  data: NDT[];
+  totalImages: number;
+};
+
+export const DataPlotter: React.FC<DataPlotterProps> = ({
+  artifact,
+  data,
+  totalImages,
+}: DataPlotterProps) => {
+  const [displayedImageIndex, setDisplayedImageIndex] = useState<number>(0);
+
+  const displayDataPlotter = () => {
+    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)}
+        />
+      </>
+    );
+  };
+
+  return displayDataPlotter();
+};