feat: quick features

aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx

@@ -1,9 +1,10 @@
 import { Box, styled } from "@mui/material";
 
-import { logArray } from "types/componentTypes";
+import { logType } from "types/componentTypes";
+import { isNullish } from "helper/functions";
 
 interface LogViewerProps {
-    log: logArray
+    log: logType[]
 }
 
 const LogViewerBox = styled(Box)`
@@ -18,8 +19,14 @@ const LogText = styled("pre")`
 `;
 
 const prettyPrint = (log: LogViewerProps['log']) => {
-    return log.map(logItem => (
-        `${logItem.label}: \t\t ${logItem.value} \n`
+    function prettifyValue(value: logType['value']) {
+        if (value && String(value).includes('\n'))
+            return String(value).split('\n').map(valueItem => `\n\t\t\t${valueItem}`).join('')
+        else
+            return `\t\t"${value}"`
+    }
+    return log.filter(logItem => !isNullish(logItem)).map(logItem => (
+        `${logItem.label}: ${prettifyValue(logItem.value)}\n`
     ))
 };
 

aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx

@@ -1,11 +1,12 @@
-import { Box, Chip, Grid, List, ListItem, Typography, styled } from "@mui/material"
-import { useGetAllTags } from "API/graphql/queries/experiment/getAllTags";
+import { Box, Chip, Grid, IconButton, List, ListItem, Typography, styled } from "@mui/material"
+import LinkIcon from "@mui/icons-material/Link";
 import toast from "react-hot-toast";
 import { useState } from "react";
 
 import { useRemoveTagFromExperiment } from "API/graphql/mutations/experiment/removeTagFromExperiment";
 import { useAddTagToExperiment } from "API/graphql/mutations/experiment/addTagToExperiment";
 import { dateFormatter, removeFavouriteAndArchivedTag } from "helper/formatters";
+import { useGetAllTags } from "API/graphql/queries/experiment/getAllTags";
 import { ExperimentDataType, TagType } from "types/globalTypes";
 import { MAX_TAGS_VISIBLE_LENGTH } from "constants/constants";
 import { EditTags } from "components/molecules/EditTags";
@@ -14,15 +15,13 @@ const ExperimentDetailsTitle = styled(Typography)`
   font-weight: 400;
   font-size: 0.9rem;
   margin-right: ${(props) => `${props.theme.spacing(1)}`};
-  line-height: ${(props) => `${props.theme.spacing(3)}`};
   padding: ${(props) => `${props.theme.spacing(0.75)}`} ${(props) => `${props.theme.spacing(1)}`};
 `;
 
 const ExperimentDetailsContent = styled(Typography)`
   font-weight: 500;
   font-weight: bold;
   font-size: 0.9rem;
-  line-height: ${(props) => `${props.theme.spacing(3)}`};
 `;
 
 interface experimentDetailsDataProps {
@@ -75,13 +74,36 @@ function ExperimentDetailsData({ experimentDetails, isEditable }: experimentDeta
             });
         }
     };
+
+    function handleCopyEIDToClipboard() {
+        navigator.clipboard
+            .writeText(experimentDetails.eid)
+            .then(
+                () => {
+                    toast.success("Copied to clipboard!", {
+                        id: "clipboard",
+                    });
+                },
+                () => {
+                    toast.error("Failed! \n Please copy EID manually.", {
+                        id: "clipboard-failed",
+                    });
+                }
+            );
+    }
+
     return (
         <Grid container sx={{ mt: 2 }}>
             <Grid item sx={{ mr: 4 }}>
                 <List>
                     <ListItem sx={{ pl: 1, pr: 1 }}>
                         <ExperimentDetailsTitle>Experiment ID: </ExperimentDetailsTitle>
-                        <ExperimentDetailsContent>{experimentDetails.eid}</ExperimentDetailsContent>
+                        <ExperimentDetailsContent>
+                            {experimentDetails.eid}
+                        </ExperimentDetailsContent>
+                        <IconButton size="small" aria-label="copy-eid" onClick={handleCopyEIDToClipboard} >
+                            <LinkIcon />
+                        </IconButton>
                     </ListItem>
                     <ListItem sx={{ pl: 1, pr: 1 }}>
                         <ExperimentDetailsTitle>Time Created: </ExperimentDetailsTitle>

aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx

@@ -46,7 +46,7 @@ export const TasksListColumns: readonly TasksListColumnsType[] = [
     },
     {
         id: "receivedAt",
-        label: "submission Time",
+        label: "Submission Time",
         format: (createdAt) =>
             typeof createdAt === "string" ? dateFormatter(new Date(createdAt)) : "",
     },
@@ -66,7 +66,7 @@ function TaskListInExperimentDetails({ experimentUuid }: { experimentUuid: Exper
                 }
             },
         },
-        fetchPolicy: "network-only",
+        fetchPolicy: "network-only"
     });
     const pageInfo = {
         page,

aqueductcore/frontend/src/helper/functions.tsx

@@ -84,4 +84,8 @@ export function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => n
     return a[1] - b[1];
   });
   return stabilizedThis.map((el) => el[0]);
-}
+}
+
+export function isNullish(value: unknown): value is null | undefined {
+  return value === null || value === undefined;
+}

aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx

@@ -66,7 +66,7 @@ export const TasksListColumns: readonly TasksListColumnsType[] = [
   },
   {
     id: "receivedAt",
-    label: "submission Time",
+    label: "Submission Time",
     format: (createdAt) =>
       typeof createdAt === "string" ? dateFormatter(new Date(createdAt)) : "",
   },

aqueductcore/frontend/src/types/componentTypes.ts

@@ -19,7 +19,7 @@ export type FileSelectContextType = {
     setSelectedFile: React.Dispatch<React.SetStateAction<string | undefined>>
 }
 
-export type logArray = Array<{
+export type logType = {
     label: string,
     value: string | number | undefined | null
-}>
+}