From 0906e6a8b365d6c946e2039551988535f5b60a10 Mon Sep 17 00:00:00 2001 From: Bruno Carlos <6951456+brnovasco@users.noreply.github.com> Date: Wed, 12 Jun 2024 16:15:31 -0300 Subject: [PATCH] fix layout of the gallery panel components and adding tooltip for explaining disabled views. --- .../src/components/ui/tooltip.tsx | 2 +- .../src/components/workboard/status-badge.tsx | 12 +- .../pages/u/[user]/[workspace]/gallery.tsx | 190 ++++++++++++------ 3 files changed, 132 insertions(+), 72 deletions(-) diff --git a/apps/deepsirius-ui/src/components/ui/tooltip.tsx b/apps/deepsirius-ui/src/components/ui/tooltip.tsx index eda550e..e0ce5b9 100644 --- a/apps/deepsirius-ui/src/components/ui/tooltip.tsx +++ b/apps/deepsirius-ui/src/components/ui/tooltip.tsx @@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "z-50 overflow-hidden rounded-md bg-primary-foreground px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className )} {...props} diff --git a/apps/deepsirius-ui/src/components/workboard/status-badge.tsx b/apps/deepsirius-ui/src/components/workboard/status-badge.tsx index 3faa51b..c063d36 100644 --- a/apps/deepsirius-ui/src/components/workboard/status-badge.tsx +++ b/apps/deepsirius-ui/src/components/workboard/status-badge.tsx @@ -14,20 +14,16 @@ const nodeStatusBadgeVariants = cva('', { }, }); -export function StatusBadge({ status }: { status: NodeStatus | undefined }) { - if (!status) return ( - - unknown - - ); - +export function StatusBadge({ status, className }: { status: NodeStatus | undefined, className?: string}) { + if (!status) return null; return ( {status} diff --git a/apps/deepsirius-ui/src/pages/u/[user]/[workspace]/gallery.tsx b/apps/deepsirius-ui/src/pages/u/[user]/[workspace]/gallery.tsx index bcaace1..fe8c640 100644 --- a/apps/deepsirius-ui/src/pages/u/[user]/[workspace]/gallery.tsx +++ b/apps/deepsirius-ui/src/pages/u/[user]/[workspace]/gallery.tsx @@ -17,6 +17,12 @@ import { toast } from 'sonner'; import { type Node, type Edge } from 'reactflow'; import { Layout } from '~/components/layout'; import { Button } from '~/components/ui/button'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '~/components/ui/tooltip'; import NodeIcon from '~/components/workboard/node-components/node-icon'; import { AvatarDrop } from '~/components/avatar-dropdown'; import Link from 'next/link'; @@ -60,11 +66,11 @@ function Gallery({ user, workspace }: { user: string; workspace: string }) { -
-
+
+
-
+
@@ -75,76 +81,131 @@ function Gallery({ user, workspace }: { user: string; workspace: string }) { function SidePanelContent({ node }: { node: Node }) { const [status, setStatus] = useState(node.data.status); const [view, setView] = useQueryState('view'); - const nodeName = useMemo(() => { - if (!node.type) return undefined; - switch (node.type) { - case 'dataset': - return node.data?.datasetData?.name; - case 'augmentation': - return node.data?.augmentationData?.name; - case 'network': - return node.data?.networkData?.label; - case 'finetune': - const sourceLabel = - node.data?.finetuneData?.sourceNetworkLabel ?? undefined; - return sourceLabel - ? `${sourceLabel} finetune_id: ${node.id}` - : undefined; - case 'inference': - const outputPath = node.data?.inferenceData?.outputPath ?? undefined; - return outputPath ? `inference ${outputPath}` : undefined; - default: - return undefined; - } - }, [node]); if (!node.data) return null; if (!node.type) return null; return ( -
- - - - - -
+ +
+ + + + + + +

+ View the logs of the job execution. +

+ + + + + + + +

+ View the error logs of the job execution. +

+ + + + + + + + + +

+ Preview the images generated by the augmentation process. + {node.type !== 'augmentation' && + ' Only available for augmentation nodes.'} +

+ + + + + + + + + +

+ View the tensorboard of the training. + Only available for busy network or finetune nodes. +

+ + +
+ ); } function NodeInfo({ - name, type, nodeData, + status, + setStatus, }: { - name: string | undefined; type: string; nodeData: NodeData; + status: NodeStatus; + setStatus: (status: NodeStatus) => void; }) { - const [status, setStatus] = useState(nodeData.status); const [message, setMessage] = useState(nodeData.message); + const nodeName = useMemo(() => { + if (!type) return undefined; + switch (type) { + case 'dataset': + return nodeData.datasetData?.name; + case 'augmentation': + return nodeData.augmentationData?.name; + case 'network': + return nodeData.networkData?.label; + case 'finetune': + const sourceLabel = + nodeData.finetuneData?.sourceNetworkLabel ?? undefined; + return sourceLabel ? `${sourceLabel} finetune` : 'finetune'; + case 'inference': + const outputPath = nodeData.inferenceData?.outputPath ?? ''; + + return outputPath; + default: + return undefined; + } + }, [type, nodeData]); const { data: jobData } = api.job.checkStatus.useQuery( { jobId: nodeData.jobId ?? '' }, @@ -177,17 +238,20 @@ function NodeInfo({ setStatus('busy'); setMessage(`Job ${nodeData.jobId ?? 'Err'} last checked at ${date}`); } - }, [jobData, status, nodeData.jobId]); + }, [jobData, status, nodeData.jobId, setStatus]); return ( - <> -
- -

{name ?? 'node'}

+
+
+
+ +

{type}

+
+

{nodeName ?? 'node'}

{message}

- +
); }