Merge pull request #371 from alan-turing-institute/331-svg-preview

case preview SVG

frontend/src/components/CaseMediaPreview.jsx

@@ -0,0 +1,77 @@
+import configData from "../config.json";
+import { CardMedia } from "@mui/material";
+import mockup_diagram from "../images/mockup-diagram.png";
+import { useTheme } from "@emotion/react";
+import { useEffect, useState } from "react";
+import MermaidChart from "./Mermaid";
+import { useLoginToken } from "../hooks/useAuth";
+import { getCase } from "./caseApi";
+import { Box } from "@mui/material";
+import { LoadingCard } from "./ManageCases";
+
+export const CaseMediaPreview = ({ caseObj }) => {
+  const theme = useTheme();
+  const [token] = useLoginToken();
+  const [assuranceCase, setAssuranceCase] = useState();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (token) {
+      let isMounted = true;
+      getCase(token, caseObj.id)
+        .then((json) => {
+          if (!isMounted) {
+            return;
+          }
+          setAssuranceCase(json);
+          setIsLoading(false);
+        })
+        .catch((err) => {
+          console.error(err);
+          // TODO show error to user
+        });
+
+      return () => {
+        isMounted = false;
+      };
+    }
+  }, [token, caseObj]);
+
+  if (configData.use_case_preview_svg) {
+    return (
+      <>
+        {isLoading ? (
+          <LoadingCard />
+        ) : (
+          <Box
+            sx={{
+              height: "50%",
+              position: "relative",
+              pointerEvents: "none",
+              overflow: "hidden",
+            }}
+          >
+            <MermaidChart
+              assuranceCase={assuranceCase}
+              caseId={caseObj.id}
+              selectedId={[]}
+              selectedType={[]}
+              setSelected={() => {}}
+              setMermaidFocus={() => {}}
+            />
+          </Box>
+        )}
+      </>
+    );
+  } else {
+    return (
+      <CardMedia
+        height={227}
+        component="img"
+        image={mockup_diagram}
+        alt=""
+        sx={{ background: theme.palette.grey[200] }}
+      />
+    );
+  }
+};

frontend/src/components/ManageCases.jsx

@@ -24,6 +24,7 @@ import CommentSection from "./CommentSection";
 import CasePermissionsManager from "./CasePermissionsManager";
 import DeleteCaseModal from "./DeleteCaseModal";
 import ErrorMessage from "./common/ErrorMessage";
+import { CaseMediaPreview } from "./CaseMediaPreview";
 
 const ThemedCard = ({ sx, ...props }) => {
   return (
@@ -77,7 +78,7 @@ const formatter = new Intl.DateTimeFormat(undefined, {
   year: "numeric",
 });
 
-const CaseCard = ({ id, name, description, createdDate, reload }) => {
+const CaseCard = ({ caseObj, reload }) => {
   const theme = useTheme();
 
   const [menuOpen, setMenuOpen] = useState(false);
@@ -135,16 +136,11 @@ const CaseCard = ({ id, name, description, createdDate, reload }) => {
     <ThemedCard sx={{ position: "relative" }}>
       <CardActionArea
         component={Link}
-        to={"case/" + id}
+        to={"case/" + caseObj.id}
         sx={{ height: "100%" }}
       >
-        <CardMedia
-          height={227}
-          component="img"
-          image={mockup_diagram}
-          alt=""
-          sx={{ background: theme.palette.grey[200] }}
-        />
+        <CaseMediaPreview caseObj={caseObj} />
+
         <CardContent
           sx={{
             padding: "1.5rem",
@@ -156,10 +152,11 @@ const CaseCard = ({ id, name, description, createdDate, reload }) => {
             textDecoration: "none",
             color: "unset",
             overflow: "hidden",
+            zIndex: 99,
           }}
         >
           <Typography variant="h3" component="h2">
-            {name}
+            {caseObj.name}
           </Typography>
           <Typography
             variant="body2"
@@ -174,7 +171,7 @@ const CaseCard = ({ id, name, description, createdDate, reload }) => {
               minHeight: 0,
             }}
           >
-            {description?.split("\n").map((str) => (
+            {caseObj.description?.split("\n").map((str) => (
               <>
                 {str}
                 <br />
@@ -183,7 +180,7 @@ const CaseCard = ({ id, name, description, createdDate, reload }) => {
           </Typography>
           {/* TODO, designs would prefer the updated date */}
           <Typography variant="body2">
-            Created: {formatter.format(createdDate)}
+            Created: {formatter.format(caseObj.createdDate)}
           </Typography>
         </CardContent>
       </CardActionArea>
@@ -221,26 +218,30 @@ const CaseCard = ({ id, name, description, createdDate, reload }) => {
       <ExportCaseModal
         isOpen={exportOpen}
         onClose={onExportClose}
-        caseId={id}
+        caseId={caseObj.id}
+      />
+      <CommentSection
+        isOpen={notesOpen}
+        onClose={onNotesClose}
+        caseId={caseObj.id}
       />
-      <CommentSection isOpen={notesOpen} onClose={onNotesClose} caseId={id} />
       <CasePermissionsManager
         isOpen={permissionsOpen}
         onClose={onPermissionsClose}
-        caseId={id}
+        caseId={caseObj.id}
         onSuccess={onPermissionsSuccess}
       />
       <DeleteCaseModal
         isOpen={deleteOpen}
         onClose={onDeleteClose}
-        caseId={id}
+        caseId={caseObj.id}
         onDelete={onDeleteSuccess}
       />
     </ThemedCard>
   );
 };
 
-const LoadingCard = () => {
+export const LoadingCard = () => {
   return (
     <ThemedCard sx={{ display: "flex" }}>
       <LoadingSpinner sx={{ margin: "auto" }} />
@@ -353,8 +354,8 @@ const ManageCases = () => {
             <LoadingCard />
           ) : (
             <>
-              {cases.map(({ id, ...props }) => (
-                <CaseCard id={id} key={id} {...props} reload={doLoad} />
+              {cases.map((caseObj) => (
+                <CaseCard caseObj={caseObj} reload={doLoad} />
               ))}
             </>
           )}

frontend/src/components/Mermaid.js

@@ -13,11 +13,14 @@ function MermaidChart({
 }) {
   const [collapsedNodes, setCollapsedNodes] = useState([]);
 
-  const chartmd = useMemo(
-    () =>
-      jsonToMermaid(assuranceCase, selectedType, selectedId, collapsedNodes),
-    [assuranceCase, selectedType, selectedId, collapsedNodes],
-  );
+  const chartmd = useMemo(() => {
+    return jsonToMermaid(
+      assuranceCase,
+      selectedType,
+      selectedId,
+      collapsedNodes,
+    );
+  }, [assuranceCase, selectedType, selectedId, collapsedNodes]);
 
   // refresh state
   useEffect(() => {
@@ -81,7 +84,7 @@ function MermaidChart({
   // trigger mermaid reload
   useEffect(() => {
     try {
-      const mermaidDiv = document.querySelector(".mermaid");
+      const mermaidDiv = document.querySelector(`.mermaid-${caseId}`);
       if (mermaidDiv) {
         // inject the markdown here, rather than via react
         // so in between render and the effect you don't see the text
@@ -108,12 +111,14 @@ function MermaidChart({
       key={chartmd}
       style={{
         display: "flex",
+        flexDirection: "column",
         height: "100%",
         width: "100%",
-        justifyContent: "center",
+        justifyContent: "start",
+        alignItems: "start",
         overflow: "visible",
       }}
-      className="mermaid"
+      className={`mermaid-${caseId} mermaid`}
     />
   );
 }

frontend/src/config.json

@@ -149,5 +149,6 @@
       "desc_char_max_len": 40,
       "evidence_url_char_max_len": 250
     }
-  }
+  },
+  "use_case_preview_svg": true
 }