From 52a2658f47edc0473b07ee658748e558f7a1f837 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 1 Mar 2024 19:24:53 -0300
Subject: [PATCH] Add ShadTooltip component and display display_name for
 outputs

---
 src/frontend/src/components/IOview/index.tsx | 55 ++++++++++++--------
 src/frontend/src/types/zustand/flow/index.ts |  4 +-
 src/frontend/src/utils/storeUtils.ts         | 16 ++++--
 3 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index ae04bcba6..87bd8de20 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -12,6 +12,7 @@ import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
 import IOOutputView from "../IOOutputView";
+import ShadTooltip from "../ShadTooltipComponent";
 import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
@@ -213,9 +214,16 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                             <AccordionComponent
                               trigger={
                                 <div className="file-component-badge-div">
-                                  <Badge variant="gray" size="md">
-                                    {output.id}
-                                  </Badge>
+                                  <ShadTooltip
+                                    content={output.id}
+                                    styleClasses="z-50"
+                                  >
+                                    <div>
+                                      <Badge variant="gray" size="md">
+                                        {output.displayName}
+                                      </Badge>
+                                    </div>
+                                  </ShadTooltip>
                                   {haveChat && (
                                     <div
                                       className="-mb-1 pr-4"
@@ -310,26 +318,27 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
           </div>
         </div>
       </BaseModal.Content>
-      <BaseModal.Footer>{!haveChat && (
-            <div className="flex w-full justify-end pt-6">
-              <Button
-                variant={"outline"}
-                className="flex gap-2 px-3"
-                onClick={() => sendMessage(1)}
-              >
-                <IconComponent
-                  name={isBuilding ? "Loader2" : "Play"}
-                  className={cn(
-                    "h-4 w-4",
-                    isBuilding
-                      ? "animate-spin"
-                      : "fill-current text-medium-indigo"
-                  )}
-                />
-                Run Flow
-              </Button>
-            </div>
-          )}  
+      <BaseModal.Footer>
+        {!haveChat && (
+          <div className="flex w-full justify-end pt-6">
+            <Button
+              variant={"outline"}
+              className="flex gap-2 px-3"
+              onClick={() => sendMessage(1)}
+            >
+              <IconComponent
+                name={isBuilding ? "Loader2" : "Play"}
+                className={cn(
+                  "h-4 w-4",
+                  isBuilding
+                    ? "animate-spin"
+                    : "fill-current text-medium-indigo"
+                )}
+              />
+              Run Flow
+            </Button>
+          </div>
+        )}
       </BaseModal.Footer>
     </BaseModal>
   );
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 4bf971aa6..bd4595d32 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -41,8 +41,8 @@ export type FlowPoolType = {
 
 export type FlowStoreType = {
   flowPool: FlowPoolType;
-  inputs: Array<{ type: string; id: string }>;
-  outputs: Array<{ type: string; id: string }>;
+  inputs: Array<{ type: string; id: string; displayName: string }>;
+  outputs: Array<{ type: string; id: string; displayName: string }>;
   hasIO: boolean;
   setFlowPool: (flowPool: FlowPoolType) => void;
   addDataToFlowPool: (data: FlowPoolObjectType, nodeId: string) => void;
diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts
index cfdfe5096..e51cf8933 100644
--- a/src/frontend/src/utils/storeUtils.ts
+++ b/src/frontend/src/utils/storeUtils.ts
@@ -25,15 +25,23 @@ export function getTagsIds(
 }
 
 export function getInputsAndOutputs(nodes: Node[]) {
-  let inputs: { type: string; id: string }[] = [];
-  let outputs: { type: string; id: string }[] = [];
+  let inputs: { type: string; id: string; displayName: string }[] = [];
+  let outputs: { type: string; id: string; displayName: string }[] = [];
   nodes.forEach((node) => {
     const nodeData: NodeDataType = node.data as NodeDataType;
     if (isOutputNode(nodeData)) {
-      outputs.push({ type: nodeData.type, id: nodeData.id });
+      outputs.push({
+        type: nodeData.type,
+        id: nodeData.id,
+        displayName: nodeData.node?.display_name ?? nodeData.id,
+      });
     }
     if (isInputNode(nodeData)) {
-      inputs.push({ type: nodeData.type, id: nodeData.id });
+      inputs.push({
+        type: nodeData.type,
+        id: nodeData.id,
+        displayName: nodeData.node?.display_name ?? nodeData.id,
+      });
     }
   });
   return { inputs, outputs };