Fix: Node deleted when press backspace on tweaks page

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -32,6 +32,8 @@ import { darkContext } from "../../contexts/darkContext";
 import { codeTabsPropsType } from "../../types/components";
 import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
+import { unselectAllNodes } from "../../utils/reactflowUtils";
+import { typesContext } from "../../contexts/typesContext";
 
 export default function CodeTabsComponent({
   flow,
@@ -45,12 +47,22 @@ export default function CodeTabsComponent({
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const { dark } = useContext(darkContext);
+  const { reactFlowInstance } = useContext(typesContext);
 
   useEffect(() => {
     if (flow && flow["data"]!["nodes"]) {
       setData(flow["data"]!["nodes"]);
     }
   }, [flow]);
+  
+  useEffect(() => {
+    unselectAllNodes({
+      data,
+      updateNodes: (nodes) => {
+        reactFlowInstance?.setNodes(nodes);
+      }
+    });
+  }, [])
 
   const copyToClipboard = () => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {

src/frontend/src/types/utils/reactflowUtils.ts

@@ -1,4 +1,4 @@
-import { Edge } from "reactflow";
+import { Edge, Node } from "reactflow";
 import { NodeType } from "../flow";
 
 export type cleanEdgesType = {
@@ -8,3 +8,8 @@ export type cleanEdgesType = {
   };
   updateEdge: (edge: Edge[]) => void;
 };
+
+export type unselectAllNodesType = {
+  updateNodes: (nodes: Node[]) => void,
+  data: Node[] | null
+};

src/frontend/src/utils/reactflowUtils.ts

@@ -2,14 +2,18 @@ import _ from "lodash";
 import {
   Connection,
   Edge,
+  Node,
   ReactFlowInstance,
   ReactFlowJsonObject,
+  useNodesState,
 } from "reactflow";
 import { specialCharsRegex } from "../constants/constants";
 import { APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
-import { cleanEdgesType } from "../types/utils/reactflowUtils";
+import { cleanEdgesType, unselectAllNodesType } from "../types/utils/reactflowUtils";
 import { toNormalCase } from "./utils";
+import { useContext } from "react";
+import { typesContext } from "../contexts/typesContext";
 
 export function cleanEdges({
   flow: { edges, nodes },
@@ -55,6 +59,14 @@ export function cleanEdges({
   updateEdge(newEdges);
 }
 
+export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) {
+  let newNodes = _.cloneDeep(data);
+  newNodes!.forEach((node: Node) => {
+    node.selected = false;
+  });
+  updateNodes(newNodes!);
+}
+
 export function isValidConnection(
   { source, target, sourceHandle, targetHandle }: Connection,
   reactFlowInstance: ReactFlowInstance