feat(frontend): use accordion for artifact list

Author: VictoriaBeilsten-Edmands

frontend/dashboard/src/routes/SingleWorkflowPage.tsx

@@ -14,7 +14,7 @@ function SingleWorkflowPage() {
   }>();
 
   const [searchParams] = useSearchParams();
-  const taskParam = searchParams.get("tasks")
+  const taskParam = searchParams.get("tasks");
 
   const tasknames = useMemo(() => {
     if (!taskParam) return [];
@@ -35,7 +35,13 @@ function SingleWorkflowPage() {
       <Breadcrumbs path={window.location.pathname} linkComponent={Link} />
       {visit && workflowName ? (
         <Container maxWidth="lg">
-          <Box display="flex" flexDirection="column" alignItems="center" mt={2}>
+          <Box
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            mt={2}
+            mb={4}
+          >
             <WorkflowsErrorBoundary>
               <Suspense>
                 <SingleWorkflowView
@@ -48,7 +54,13 @@ function SingleWorkflowPage() {
           </Box>
         </Container>
       ) : (
-        <Box display="flex" flexDirection="column" alignItems="center" mt={2}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          mt={2}
+          mb={4}
+        >
           <Typography>No valid workflow selected</Typography>
           {/* Go to instrumentSession or home page */}
         </Box>

frontend/workflows-lib/lib/components/workflow/ArtifactFilteredList.tsx

@@ -52,9 +52,6 @@ export const ArtifactFilteredList: React.FC<ArtifactFilteredListProps> = ({
   }, [artifactFilter, artifactList, imageArtifacts]);
   return (
     <>
-      <Typography variant="h5" sx={{ marginTop: 2, marginBottom: 2 }}>
-        Artefacts
-      </Typography>
       <ToggleButtonGroup
         value={artifactFilter}
         exclusive

frontend/workflows-lib/lib/components/workflow/ImageGallery.tsx

@@ -1,40 +1,71 @@
-import React from "react";
-import { Box } from "@mui/material";
-import type { Artifact } from "workflows-lib";
-import { ImageGallery } from "./ImageGallery";
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+  Box,
+} from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import { ArtifactFilteredList } from "./ArtifactFilteredList";
+import type { Artifact } from "workflows-lib";
+import { ImageInfo, ScrollableImages } from "./ScrollableImages";
+import { useMemo } from "react";
 
 interface TaskInfoProps {
   artifactList: Artifact[];
 }
 
 export const TaskInfo: React.FC<TaskInfoProps> = ({ artifactList }) => {
+  const imageArtifactsInfos: ImageInfo[] = useMemo(() => {
+    return artifactList
+      .filter((artifact) => artifact.mimeType === "image/png")
+      .map((artifact, index) => ({
+        src: artifact.url,
+        alt: `Gallery Image ${String(index + 1)}`,
+      }));
+  }, [artifactList]);
+
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: {
-          xs: "column",
-          sm: "row",
-        },
-        flexWrap: "wrap",
-        gap: 2,
-        width: "100%",
-        boxSizing: "border-box",
-      }}
-    >
-      <Box sx={{ flex: 1, minWidth: "300px" }}>
-        <ArtifactFilteredList artifactList={artifactList} />
-      </Box>
+    <Accordion sx={{ width: "100%", my: 0 }} defaultExpanded>
+      <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
+        <Typography variant="h6">Output Information</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: {
+              xs: "column",
+              sm: "row",
+            },
+            flexWrap: "wrap",
+            gap: 2,
+            width: "100%",
+            boxSizing: "border-box",
+          }}
+        >
+          <Box sx={{ flex: 1, minWidth: "300px" }}>
+            <ArtifactFilteredList artifactList={artifactList} />
+          </Box>
 
-      <Box
-        sx={{
-          flex: 1,
-          minWidth: "300px",
-        }}
-      >
-        <ImageGallery artifactList={artifactList} />
-      </Box>
-    </Box>
+          <Box
+            sx={{
+              flex: 1,
+              minWidth: "300px",
+              visibility: imageArtifactsInfos.length > 0 ? "visible" : "hidden",
+              mt: 8,
+              paddingLeft: 7,
+            }}
+          >
+            {imageArtifactsInfos.length > 0 && (
+              <ScrollableImages
+                images={imageArtifactsInfos}
+                backgroundColor="#FFF"
+              />
+            )}
+          </Box>
+        </Box>
+      </AccordionDetails>
+    </Accordion>
   );
 };

frontend/workflows-lib/lib/components/workflow/TaskInfo.tsx

@@ -1,18 +1,18 @@
 import { render, screen, fireEvent } from "@testing-library/react";
-import { ImageGallery } from "../../lib/components/workflow/ImageGallery";
+import { ScrollableImages } from "../../lib/components/workflow/ScrollableImages";
 import "@testing-library/jest-dom";
-import { mockArtifacts } from "./data";
+import { mockImages } from "./data";
 
 describe("ImageGallery", () => {
   it("renders the first image by default", () => {
-    render(<ImageGallery artifactList={mockArtifacts} />);
+    render(<ScrollableImages images={mockImages} />);
     const imgElement = screen.getByAltText("Gallery Image 1");
     expect(imgElement).toBeInTheDocument();
     expect(imgElement).toHaveAttribute("src", "fakepath/to/image1.png");
   });
 
   it("renders the next image when the next button is clicked", async () => {
-    render(<ImageGallery artifactList={mockArtifacts} />);
+    render(<ScrollableImages images={mockImages} />);
     const nextButton = await screen.findByTestId("next-button");
     fireEvent.click(nextButton);
     const imgElement = screen.getByAltText("Gallery Image 2");
@@ -21,7 +21,7 @@ describe("ImageGallery", () => {
   });
 
   it("renders the previous image when the previous button is clicked", async () => {
-    render(<ImageGallery artifactList={mockArtifacts} />);
+    render(<ScrollableImages images={mockImages} />);
     const nextButton = await screen.findByTestId("next-button");
     fireEvent.click(nextButton);
     const prevButton = await screen.findByTestId("prev-button");
@@ -32,26 +32,22 @@ describe("ImageGallery", () => {
   });
 
   it("cycles to the last image when the previous button is clicked on the first image", async () => {
-    render(<ImageGallery artifactList={mockArtifacts} />);
+    render(<ScrollableImages images={mockImages} />);
     const prevButton = await screen.findByTestId("prev-button");
     fireEvent.click(prevButton);
-    const imgElement = screen.getByAltText("Gallery Image 2");
+    const imgElement = screen.getByAltText("Gallery Image 3");
     expect(imgElement).toBeInTheDocument();
-    expect(imgElement).toHaveAttribute("src", "fakepath/to/image2.png");
+    expect(imgElement).toHaveAttribute("src", "fakepath/to/image3.png");
   });
 
   it("cycles to the first image when the next button is clicked on the last image", async () => {
-    render(<ImageGallery artifactList={mockArtifacts} />);
+    render(<ScrollableImages images={mockImages} />);
     const nextButton = await screen.findByTestId("next-button");
     fireEvent.click(nextButton);
     fireEvent.click(nextButton);
+    fireEvent.click(nextButton);
     const imgElement = screen.getByAltText("Gallery Image 1");
     expect(imgElement).toBeInTheDocument();
     expect(imgElement).toHaveAttribute("src", "fakepath/to/image1.png");
   });
-
-  it("does not render anything if there are no image artifacts", () => {
-    render(<ImageGallery artifactList={[]} />);
-    expect(screen.queryByTestId("scrollable-images")).not.toBeInTheDocument();
-  });
 });

frontend/workflows-lib/tests/components/ImageGallery.test.tsx renamed to frontend/workflows-lib/tests/components/ScrollableImages.test.tsx

@@ -1,11 +1,12 @@
+import { ImageInfo } from "../../lib/components/workflow/ScrollableImages";
 import { Artifact, TaskStatus } from "../../lib/types";
 import { Visit } from "@diamondlightsource/sci-react-ui";
 
 export const logArtifact: Artifact = {
   name: "main.log",
   url: "fakepath/to/main.log",
   mimeType: "text/plain",
-  parentTask: "task"
+  parentTask: "task",
 };
 
 export const mockArtifacts: Artifact[] = [
@@ -14,20 +15,36 @@ export const mockArtifacts: Artifact[] = [
     name: "image1.png",
     mimeType: "image/png",
     url: "fakepath/to/image1.png",
-    parentTask: "task1"
+    parentTask: "task1",
   },
 
   {
     name: "textfile.txt",
     mimeType: "text/plain",
     url: "fakepath/to/textfile.txt",
-    parentTask: "task2"
+    parentTask: "task2",
   },
   {
     name: "image2.png",
     mimeType: "image/png",
     url: "fakepath/to/image2.png",
-    parentTask: "task3"
+    parentTask: "task3",
+  },
+];
+
+export const mockImages: ImageInfo[] = [
+  {
+    src: "fakepath/to/image1.png",
+    alt: "Gallery Image 1",
+  },
+
+  {
+    src: "fakepath/to/image2.png",
+    alt: "Gallery Image 2",
+  },
+  {
+    src: "fakepath/to/image3.png",
+    alt: "Gallery Image 3",
   },
 ];
 
@@ -45,7 +62,7 @@ export const mockTasks = [
     artifacts: [logArtifact],
     workflow: "workflow-test",
     instrumentSession: instrumentSession,
-    stepType: "POD"
+    stepType: "POD",
   },
   {
     id: "task-2",
@@ -55,7 +72,7 @@ export const mockTasks = [
     workflow: "workflow-test",
     instrumentSession: instrumentSession,
     depends: ["task-1"],
-    stepType: "POD"
+    stepType: "POD",
   },
   {
     id: "task-3",
@@ -64,6 +81,6 @@ export const mockTasks = [
     artifacts: [logArtifact],
     workflow: "workflow-test",
     instrumentSession: instrumentSession,
-    stepType: "POD"
+    stepType: "POD",
   },
 ];