From 6e7421998d009efd009b52aaf09c5e31442ec676 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Tue, 4 Jun 2024 12:55:39 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20(frontend):=20reorganize=20impor?=
 =?UTF-8?q?ts=20and=20fix=20import=20order=20in=20OutputComponent=20and=20?=
 =?UTF-8?q?ParameterComponent=20to=20improve=20code=20readability=20?=
 =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(frontend):=20refactor=20OutputComponent?=
 =?UTF-8?q?=20and=20ParameterComponent=20to=20remove=20unnecessary=20impor?=
 =?UTF-8?q?ts=20and=20optimize=20code=20structure=20=F0=9F=93=9D=20(fronte?=
 =?UTF-8?q?nd):=20remove=20console.log=20statement=20in=20ApiModal=20view?=
 =?UTF-8?q?=20to=20clean=20up=20code=20and=20improve=20maintainability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OutputComponent/index.tsx      | 14 ++++++------
 .../components/parameterComponent/index.tsx   | 22 +++++++++++--------
 .../src/customNodes/genericNode/index.tsx     |  3 ++-
 .../src/modals/apiModal/views/index.tsx       |  1 -
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/customNodes/genericNode/components/OutputComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/OutputComponent/index.tsx
index f3c959e5e..dfa5ac350 100644
--- a/src/frontend/src/customNodes/genericNode/components/OutputComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/OutputComponent/index.tsx
@@ -1,16 +1,16 @@
-import ForwardedIconComponent from "../../../../components/genericIconComponent";
-import { outputComponentType } from "../../../../types/components";
-import { cn } from "../../../../utils/utils";
-import useFlowStore from "../../../../stores/flowStore";
-import { NodeDataType } from "../../../../types/flow";
 import { cloneDeep } from "lodash";
+import { useUpdateNodeInternals } from "reactflow";
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../../../../components/ui/dropdown-menu";
-import { useUpdateNodeInternals } from "reactflow";
+import useFlowStore from "../../../../stores/flowStore";
+import { outputComponentType } from "../../../../types/components";
+import { NodeDataType } from "../../../../types/flow";
+import { cn } from "../../../../utils/utils";
 
 export default function OutputComponent({
   selected,
@@ -28,7 +28,7 @@ export default function OutputComponent({
   }
 
   return (
-    <div className="flex gap-2">
+    <div className="nocopy nopan nodelete nodrag noundo flex gap-2 ">
       <span>{name}</span>
       <DropdownMenu>
         <DropdownMenuTrigger>
diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
index f1a4d93f1..f334ee654 100644
--- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -80,7 +80,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     isLoading,
-    setIsLoading,
+    setIsLoading
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -88,7 +88,7 @@ export default function ParameterComponent({
     name,
     takeSnapshot,
     setNode,
-    updateNodeInternals,
+    updateNodeInternals
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -97,7 +97,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -108,7 +108,7 @@ export default function ParameterComponent({
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false,
+    skipSnapshot: boolean | undefined = false
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -135,7 +135,11 @@ export default function ParameterComponent({
       <OutputComponent
         idx={index}
         types={type?.split("|") ?? []}
-        selected={title}
+        selected={
+          data.node?.outputs![index].selected ??
+          data.node?.outputs![index].types[0] ??
+          title
+        }
         nodeId={data.id}
         frozen={data.node?.frozen}
         name={outputName ?? type ?? title}
@@ -190,14 +194,14 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : "",
+                !showNode ? "mt-0" : ""
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
               }}
               onClick={() => {
                 setFilterEdge(
-                  groupByFamily(myData, tooltipTitle!, left, nodes!),
+                  groupByFamily(myData, tooltipTitle!, left, nodes!)
                 );
               }}
             ></Handle>
@@ -282,12 +286,12 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background",
+                    "h-3 w-3 rounded-full border-2 bg-background"
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => {
                     setFilterEdge(
-                      groupByFamily(myData, tooltipTitle!, left, nodes!),
+                      groupByFamily(myData, tooltipTitle!, left, nodes!)
                     );
                   }}
                 />
diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx
index 8f67c3073..19e3d08bd 100644
--- a/src/frontend/src/customNodes/genericNode/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/index.tsx
@@ -831,7 +831,8 @@ export default function GenericNode({
                   <ParameterComponent
                     index={idx}
                     key={scapedJSONStringfy({
-                      output_types: [output.selected ?? output.types[0]],
+                      output_types: output.types,
+                      name: output.name,
                       id: data.id,
                       dataType: data.type,
                     })}
diff --git a/src/frontend/src/modals/apiModal/views/index.tsx b/src/frontend/src/modals/apiModal/views/index.tsx
index 142d0121f..c0ccba0e5 100644
--- a/src/frontend/src/modals/apiModal/views/index.tsx
+++ b/src/frontend/src/modals/apiModal/views/index.tsx
@@ -60,7 +60,6 @@ const ApiModal = forwardRef(
     );
     const pythonCode = getPythonCode(flow?.name, tweak);
     const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
-    console.log("flow", flow);
     const includeWebhook = flow.webhook;
     const tweaksCode = buildTweaks(flow);
     const codesArray = [