📝 (frontend): reorganize imports and fix import order in OutputComponent and ParameterComponent to improve code readability

♻️ (frontend): refactor OutputComponent and ParameterComponent to remove unnecessary imports and optimize code structure
📝 (frontend): remove console.log statement in ApiModal view to clean up code and improve maintainability

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>

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!)
                     );
                   }}
                 />

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,
                     })}

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 = [