From 49a5e928ff864c548d85c37dd6dea28cf0b2c397 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Lu=C3=ADs?= <matheus.bernardi@lnls.br>
Date: Thu, 25 Jan 2024 11:50:00 -0300
Subject: [PATCH] feat: add form to node data; update dataset success sheet

---
 src/components/workboard/dataset-node.tsx | 49 +++++++++++++++++++++--
 src/hooks/use-store.ts                    |  4 ++
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/components/workboard/dataset-node.tsx b/src/components/workboard/dataset-node.tsx
index ecd5b80..482d528 100644
--- a/src/components/workboard/dataset-node.tsx
+++ b/src/components/workboard/dataset-node.tsx
@@ -11,6 +11,7 @@ import { toast } from 'sonner';
 import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 import { Button } from '~/components/ui/button';
 import { Card, CardContent } from '~/components/ui/card';
+import { ScrollArea } from '~/components/ui/scroll-area';
 import {
   Sheet,
   SheetContent,
@@ -34,7 +35,9 @@ export function DatasetNode(nodeProps: NodeProps<NodeData>) {
     setOpen(formEditState);
   }, [formEditState]);
 
-  const [formData, setFormData] = useState<FormType | undefined>(undefined);
+  const [formData, setFormData] = useState<FormType | undefined>(
+    nodeProps.data.form as FormType,
+  );
 
   const updateNodeInternals = useUpdateNodeInternals();
 
@@ -130,6 +133,7 @@ export function DatasetNode(nodeProps: NodeProps<NodeData>) {
             message: `Job ${jobId} submitted in ${dayjs().format(
               'YYYY-MM-DD HH:mm:ss',
             )}`,
+            form: formData,
           },
         });
         updateNodeInternals(nodeProps.id);
@@ -310,8 +314,47 @@ export function DatasetNode(nodeProps: NodeProps<NodeData>) {
                     {nodeProps.data.updatedAt}
                   </p>
                 </div>
+                <div className="flex flex-row items-center justify-between gap-1">
+                  <p className="font-medium">classes</p>
+                  <p className="text-violet-600 text-end">
+                    {formData?.classes}
+                  </p>
+                </div>
+                <div className="flex flex-row items-center justify-between gap-1">
+                  <p className="font-medium">sample size</p>
+                  <p className="text-violet-600 text-end">
+                    {formData?.sampleSize}
+                  </p>
+                </div>
+                <div className="flex flex-row items-center justify-between gap-1">
+                  <p className="font-medium">strategy</p>
+                  <p className="text-violet-600 text-end">
+                    {formData?.strategy}
+                  </p>
+                </div>
+                <div className="flex flex-row items-center justify-between gap-1">
+                  <p className="font-medium">patch size</p>
+                  <p className="text-violet-600 text-end">
+                    {formData?.patchSize}
+                  </p>
+                </div>
               </div>
               <hr />
+              <p className="text-sm font-semibold">Data</p>
+              <div className="flex flex-col gap-1">
+                <ScrollArea className="h-[125px]">
+                  {formData?.data.map((d, i) => (
+                    <div key={i} className="flex flex-col items-start">
+                      <p className="font-medium text-sm text-ellipsis bg-muted px-2 py-1 w-full">
+                        {d.image.split('/').slice(-1)}
+                      </p>
+                      <p className="font-medium  text-sm text-ellipsis bg-violet-200 dark:bg-violet-900 px-2 py-1 w-full">
+                        {d.label.split('/').slice(-1)}
+                      </p>
+                    </div>
+                  ))}
+                </ScrollArea>
+              </div>
             </SheetContent>
           </Sheet>
         </CardContent>
@@ -357,8 +400,8 @@ export function DatasetNode(nodeProps: NodeProps<NodeData>) {
                 <SheetTitle>Retry</SheetTitle>
               </SheetHeader>
               <DatasetForm
-                name={formData?.datasetName || ''}
-                data={formData?.data || []}
+                name={formData?.datasetName ?? ''}
+                data={formData?.data ?? []}
                 onSubmitHandler={handleSubmitJob}
               />
             </SheetContent>
diff --git a/src/hooks/use-store.ts b/src/hooks/use-store.ts
index 7146861..ba24210 100644
--- a/src/hooks/use-store.ts
+++ b/src/hooks/use-store.ts
@@ -25,6 +25,9 @@ import { persist } from 'zustand/middleware';
 import { DatasetNode } from '~/components/workboard/dataset-node';
 import { InferenceNode } from '~/components/workboard/inference-node';
 import { NetworkNode } from '~/components/workboard/network-node';
+import type { FormType as DatasetForm } from '~/components/workboard/node-component-forms/dataset-form';
+import type { FormType as InferenceForm } from '~/components/workboard/node-component-forms/inference-form';
+import type { FormType as NetworkForm } from '~/components/workboard/node-component-forms/network-form';
 import { PlusOneNode } from '~/components/workboard/plusone-node';
 
 export const nodeTypes: NodeTypes = {
@@ -55,6 +58,7 @@ export type NodeData = {
   jobStatus?: string;
   message?: string;
   updatedAt?: string;
+  form?: InferenceForm | NetworkForm | DatasetForm;
 };
 
 type RFState = {