From bf6ac36a4671c3f1ae2b9207f36a132c6c5f1b91 Mon Sep 17 00:00:00 2001 From: safeamiiir Date: Thu, 10 Oct 2024 13:10:30 +0100 Subject: [PATCH 1/5] feat(logs): show logs in an improved way --- .../src/components/molecules/LogViewer/index.tsx | 15 +++++++++++---- aqueductcore/frontend/src/types/componentTypes.ts | 4 ++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx b/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx index 39196796..e00ca81f 100644 --- a/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx +++ b/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx @@ -1,9 +1,10 @@ +import { isNullish } from "@apollo/client/cache/inmemory/helpers"; import { Box, styled } from "@mui/material"; -import { logArray } from "types/componentTypes"; +import { logType } from "types/componentTypes"; 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` )) }; diff --git a/aqueductcore/frontend/src/types/componentTypes.ts b/aqueductcore/frontend/src/types/componentTypes.ts index 82eb1896..58f5d759 100644 --- a/aqueductcore/frontend/src/types/componentTypes.ts +++ b/aqueductcore/frontend/src/types/componentTypes.ts @@ -19,7 +19,7 @@ export type FileSelectContextType = { setSelectedFile: React.Dispatch> } -export type logArray = Array<{ +export type logType = { label: string, value: string | number | undefined | null -}> +} From eca1bc589b1c9c644a9b6050541125d2ade76131 Mon Sep 17 00:00:00 2001 From: safeamiiir Date: Thu, 10 Oct 2024 13:26:53 +0100 Subject: [PATCH 2/5] feat(EID): add to clipboard button --- .../organisms/ExperimentDetailsData/index.tsx | 32 ++++++++++++++++--- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx b/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx index d70f8b79..c20e9e95 100644 --- a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx +++ b/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,7 +15,6 @@ 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)}`}; `; @@ -22,7 +22,6 @@ 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 ( Experiment ID: - {experimentDetails.eid} + + {experimentDetails.eid} + + + + Time Created: From 63b643ca1f19177e465d4266810d20a7e912f593 Mon Sep 17 00:00:00 2001 From: safeamiiir Date: Thu, 10 Oct 2024 13:27:13 +0100 Subject: [PATCH 3/5] fix(table): Capilalise first letter --- .../organisms/TaskListInExperimentDetails/index.tsx | 4 ++-- aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx b/aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx index 9c252fa9..aa74feb1 100644 --- a/aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx +++ b/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, diff --git a/aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx b/aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx index 004fe578..15f85352 100644 --- a/aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx +++ b/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)) : "", }, From 3e00356171e17ecaab9b25aac7cf26cafe6156d8 Mon Sep 17 00:00:00 2001 From: safeamiiir Date: Thu, 10 Oct 2024 14:30:21 +0100 Subject: [PATCH 4/5] fix(type): make a new isNullish function --- .../frontend/src/components/molecules/LogViewer/index.tsx | 2 +- aqueductcore/frontend/src/helper/functions.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx b/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx index e00ca81f..c18cb2ea 100644 --- a/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx +++ b/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx @@ -1,7 +1,7 @@ -import { isNullish } from "@apollo/client/cache/inmemory/helpers"; import { Box, styled } from "@mui/material"; import { logType } from "types/componentTypes"; +import { isNullish } from "helper/functions"; interface LogViewerProps { log: logType[] diff --git a/aqueductcore/frontend/src/helper/functions.tsx b/aqueductcore/frontend/src/helper/functions.tsx index 92ed60fd..f70010bc 100644 --- a/aqueductcore/frontend/src/helper/functions.tsx +++ b/aqueductcore/frontend/src/helper/functions.tsx @@ -84,4 +84,8 @@ export function stableSort(array: readonly T[], comparator: (a: T, b: T) => n return a[1] - b[1]; }); return stabilizedThis.map((el) => el[0]); -} \ No newline at end of file +} + +export function isNullish(value: unknown): value is null | undefined { + return value === null || value === undefined; +} From 486efc30e3d55c183ae74f4cacbb2c11745e2bd3 Mon Sep 17 00:00:00 2001 From: safeamiiir Date: Mon, 14 Oct 2024 16:58:37 +0100 Subject: [PATCH 5/5] fix(function): make success and failed funcions more readable --- .../ExperimentDetailsActionButtons/index.tsx | 13 +++---------- .../organisms/ExperimentDetailsData/index.tsx | 13 +++---------- aqueductcore/frontend/src/helper/functions.tsx | 15 ++++++++++++++- 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx b/aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx index 15380a07..fa5dbc2d 100644 --- a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx +++ b/aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx @@ -10,6 +10,7 @@ import toast from "react-hot-toast"; import { useState } from "react"; import { BorderedButtonWithIcon } from "components/atoms/sharedStyledComponents/BorderedButtonWithIcon" +import { copyToClipboardFailedWithMessage, copyToClipboardWithSuccessMessage } from 'helper/functions'; import { useRemoveTagFromExperiment } from "API/graphql/mutations/experiment/removeTagFromExperiment"; import { useAddTagToExperiment } from "API/graphql/mutations/experiment/addTagToExperiment"; import { useRemoveExperiment } from "API/graphql/mutations/experiment/removeExperiment"; @@ -140,16 +141,8 @@ function ExperimentDetailsActionButtons({ isEditable, isDeletable, experimentDet navigator.clipboard .writeText(`${window.location.origin}/aqd/experiments/${experimentDetails.eid}`) .then( - () => { - toast.success("Copied to clipboard!", { - id: "clipboard", - }); - }, - () => { - toast.error("Failed! \n Please copy page's URL manually.", { - id: "clipboard-failed", - }); - } + () => copyToClipboardWithSuccessMessage(), //Success + () => copyToClipboardFailedWithMessage("Failed! \n Please copy page's URL manually.") //Failure ); } diff --git a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx b/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx index c20e9e95..5943ab3a 100644 --- a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx +++ b/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx @@ -3,6 +3,7 @@ import LinkIcon from "@mui/icons-material/Link"; import toast from "react-hot-toast"; import { useState } from "react"; +import { copyToClipboardFailedWithMessage, copyToClipboardWithSuccessMessage } from "helper/functions"; import { useRemoveTagFromExperiment } from "API/graphql/mutations/experiment/removeTagFromExperiment"; import { useAddTagToExperiment } from "API/graphql/mutations/experiment/addTagToExperiment"; import { dateFormatter, removeFavouriteAndArchivedTag } from "helper/formatters"; @@ -79,16 +80,8 @@ function ExperimentDetailsData({ experimentDetails, isEditable }: experimentDeta navigator.clipboard .writeText(experimentDetails.eid) .then( - () => { - toast.success("Copied to clipboard!", { - id: "clipboard", - }); - }, - () => { - toast.error("Failed! \n Please copy EID manually.", { - id: "clipboard-failed", - }); - } + () => copyToClipboardWithSuccessMessage(), //Success + () => copyToClipboardFailedWithMessage("Failed! \n Please copy EID manually.") //Failure ); } diff --git a/aqueductcore/frontend/src/helper/functions.tsx b/aqueductcore/frontend/src/helper/functions.tsx index f70010bc..eb84023e 100644 --- a/aqueductcore/frontend/src/helper/functions.tsx +++ b/aqueductcore/frontend/src/helper/functions.tsx @@ -1,8 +1,9 @@ import { DependencyList, FocusEvent, useEffect, useRef } from "react"; +import toast from "react-hot-toast"; import dayjs from "dayjs"; -import { SortOrder } from "types/componentTypes"; import { ExperimentFileType } from "types/globalTypes"; +import { SortOrder } from "types/componentTypes"; // ################## DOM related functions ################## // export const focusInCurrentTarget = ({ @@ -89,3 +90,15 @@ export function stableSort(array: readonly T[], comparator: (a: T, b: T) => n export function isNullish(value: unknown): value is null | undefined { return value === null || value === undefined; } + +// ################## Copy to Clipboard Functions ################## // +export function copyToClipboardWithSuccessMessage(message?: string): void | PromiseLike { + toast.success(message ?? "Copied to clipboard!", { + id: "clipboard", + }); +} +export function copyToClipboardFailedWithMessage(message?: string): void | PromiseLike { + toast.error(message ?? "Copy to clipboard Failed!", { + id: "clipboard-failed", + }); +}