From ada5f17d133e4dab39518d69ad46c09565f25695 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 7 Nov 2024 10:41:23 -0300
Subject: [PATCH] fix: Add Helper for Field Processing & Update Code Validation
 Logic (#4429)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (GenericNode/index.tsx): Add import statement for cloneDeep from lodash library
📝 (GenericNode/index.tsx): Add import statement for processNodeAdvancedFields helper function
📝 (GenericNode/index.tsx): Add edges variable to store edges state using useFlowStore hook
📝 (GenericNode/index.tsx): Modify onSuccess callback to process and update node data with advanced fields using processNodeAdvancedFields helper function

* ✨ (process-node-advanced-fields.ts): add a new function to process advanced fields of a node based on edges in a graph for better customization and control.

* ♻️ (GenericNode/index.tsx): Remove unused import of cloneDeep from lodash to clean up the code and improve maintainability.

* 🔧 (process-node-advanced-fields.ts): rename variable edgesWithNode to relevantEdges for clarity and consistency
🐛 (process-node-advanced-fields.ts): fix condition to check relevantEdges length instead of edgesWithNode length for correct logic

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
---
 .../src/CustomNodes/GenericNode/index.tsx     | 15 +++++++--
 .../helpers/process-node-advanced-fields.ts   | 32 +++++++++++++++++++
 2 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/CustomNodes/helpers/process-node-advanced-fields.ts

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 8881e5055..f1a409c3f 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -23,6 +23,7 @@ import { getNodeInputColors } from "../helpers/get-node-input-colors";
 import { getNodeInputColorsName } from "../helpers/get-node-input-colors-name";
 import { getNodeOutputColors } from "../helpers/get-node-output-colors";
 import { getNodeOutputColorsName } from "../helpers/get-node-output-colors-name";
+import { processNodeAdvancedFields } from "../helpers/process-node-advanced-fields";
 import useCheckCodeValidity from "../hooks/use-check-code-validity";
 import useUpdateNodeCode from "../hooks/use-update-node-code";
 import getFieldTitle from "../utils/get-field-title";
@@ -85,6 +86,8 @@ export default function GenericNode({
 
   const { mutate: validateComponentCode } = usePostValidateComponentCode();
 
+  const edges = useFlowStore((state) => state.edges);
+
   const handleUpdateCode = () => {
     setLoadingUpdate(true);
     takeSnapshot();
@@ -99,9 +102,15 @@ export default function GenericNode({
       validateComponentCode(
         { code: currentCode, frontend_node: data.node },
         {
-          onSuccess: ({ data, type }) => {
-            if (data && type && updateNodeCode) {
-              updateNodeCode(data, currentCode, "code", type);
+          onSuccess: ({ data: resData, type }) => {
+            if (resData && type && updateNodeCode) {
+              const newNode = processNodeAdvancedFields(
+                resData,
+                edges,
+                data.id,
+              );
+
+              updateNodeCode(newNode, currentCode, "code", type);
               setLoadingUpdate(false);
             }
           },
diff --git a/src/frontend/src/CustomNodes/helpers/process-node-advanced-fields.ts b/src/frontend/src/CustomNodes/helpers/process-node-advanced-fields.ts
new file mode 100644
index 000000000..b3c448fcc
--- /dev/null
+++ b/src/frontend/src/CustomNodes/helpers/process-node-advanced-fields.ts
@@ -0,0 +1,32 @@
+import { APIClassType } from "@/types/api";
+import { cloneDeep } from "lodash";
+import { Edge } from "reactflow";
+
+export function processNodeAdvancedFields(
+  resData: APIClassType,
+  edges: Edge[],
+  nodeId: string,
+) {
+  let newNode = cloneDeep(resData);
+
+  const relevantEdges = edges.filter(
+    (edge) => edge.source !== nodeId || edge.target !== nodeId,
+  );
+
+  if (relevantEdges.length === 0) {
+    return newNode;
+  }
+
+  for (const edge of relevantEdges) {
+    const field = edge?.data?.targetHandle?.fieldName;
+
+    if (field) {
+      const fieldTemplate = newNode.template[field];
+      if (fieldTemplate?.advanced === true) {
+        newNode.template[field].advanced = false;
+      }
+    }
+  }
+
+  return newNode;
+}