Fixed filter edge and added debug consoles

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -85,11 +85,15 @@ export default function Page({
 
   const { takeSnapshot } = useContext(undoRedoContext);
 
+
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
     useState<OnSelectionChangeParams | null>(null);
 
+
+
   useEffect(() => {
+    console.log("1")
     // this effect is used to attach the global event handlers
 
     const onKeyDown = (event: KeyboardEvent) => {
@@ -152,28 +156,25 @@ export default function Page({
   const [nodes, setNodes, onNodesChange] = useNodesState(
     flow.data?.nodes ?? []
   );
+
   const [edges, setEdges, onEdgesChange] = useEdgesState(
     flow.data?.edges ?? []
   );
   const { setViewport } = useReactFlow();
   const edgeUpdateSuccessful = useRef(true);
-  useEffect(() => {
+
-    if (reactFlowInstance && flow) {
-      flow.data = reactFlowInstance.toObject();
-      updateFlow(flow);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [edges]);
   //update flow when tabs change
   useEffect(() => {
+    console.log("2")
     setNodes(flow?.data?.nodes ?? []);
     setEdges(flow?.data?.edges ?? []);
     if (reactFlowInstance) {
       setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 });
     }
-  }, [flow, reactFlowInstance, setEdges, setNodes, setViewport]);
+  }, [flow, reactFlowInstance]);
   //set extra sidebar
   useEffect(() => {
+    console.log("3")
     setExtraComponent(<ExtraSidebar />);
     setExtraNavigation({ title: "Components" });
   }, [setExtraComponent, setExtraNavigation]);
@@ -181,28 +182,20 @@ export default function Page({
   const [seconds, setSeconds] = useState(0);
 
   useEffect(() => {
+    console.log("4")
     const index = flows.findIndex((flowId) => flowId.id === flow.id);
 
     const interval = setInterval(() => {
-      setSeconds((prevSeconds) => {
+      saveFlow(
-        let updatedSeconds = prevSeconds + 1;
+        {
-
+          ...flows[index]!,
-        if (updatedSeconds % 30 === 0) {
+          data: reactFlowInstance
-          saveFlow(
+            ? reactFlowInstance!.toObject()
-            {
+            : flow!.data,
-              ...flows[index]!,
+        },
-              data: reactFlowInstance
+        true
-                ? reactFlowInstance!.toObject()
+      );
-                : flow!.data,
+    }, 30000);
-            },
-            true
-          );
-          updatedSeconds = 0;
-        }
-
-        return updatedSeconds;
-      });
-    }, 1000);
 
     return () => {
       clearInterval(interval);
@@ -211,11 +204,12 @@ export default function Page({
 
   const onEdgesChangeMod = useCallback(
     (change: EdgeChange[]) => {
-      onEdgesChange(change);
+      console.log("5")
-      setNodes((node) => {
+      updateFlow({    
-        let newX = _.cloneDeep(node);
+        ...flow!,
-        return newX;
+        data: reactFlowInstance ? reactFlowInstance!.toObject() : flow!.data,
       });
+      onEdgesChange(change);
       //@ts-ignore
       setTabsState((prev: FlowsState) => {
         return {
@@ -232,6 +226,7 @@ export default function Page({
 
   const onNodesChangeMod = useCallback(
     (change: NodeChange[]) => {
+      console.log("6")
       onNodesChange(change);
       //@ts-ignore
       setTabsState((prev: FlowsState) => {
@@ -249,6 +244,7 @@ export default function Page({
 
   const onConnect = useCallback(
     (params: Connection) => {
+      console.log("7")
       takeSnapshot();
       setEdges((eds) =>
         addEdge(
@@ -280,22 +276,26 @@ export default function Page({
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
+    console.log("8")
     // 👇 make dragging a node undoable
     takeSnapshot();
     // 👉 you can place your event handlers here
   }, [takeSnapshot]);
 
   const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
+    console.log("9")
     // 👇 make dragging a selection undoable
     takeSnapshot();
   }, [takeSnapshot]);
 
   const onEdgesDelete: OnEdgesDelete = useCallback(() => {
+    console.log("10")
     // 👇 make deleting edges undoable
     takeSnapshot();
   }, [takeSnapshot]);
 
   const onDragOver = useCallback((event: React.DragEvent) => {
+    console.log("11")
     event.preventDefault();
     if (event.dataTransfer.types.some((types) => types === "nodedata")) {
       event.dataTransfer.dropEffect = "move";
@@ -306,6 +306,7 @@ export default function Page({
 
   const onDrop = useCallback(
     (event: React.DragEvent) => {
+      console.log("12")
       event.preventDefault();
       if (event.dataTransfer.types.some((types) => types === "nodedata")) {
         takeSnapshot();
@@ -382,6 +383,7 @@ export default function Page({
   );
 
   useEffect(() => {
+    console.log("13")
     return () => {
       if (tabsState && tabsState[flow.id]?.isPending) {
         saveFlow({
@@ -394,6 +396,7 @@ export default function Page({
 
   const onDelete = useCallback(
     (mynodes: Node[]) => {
+      console.log("14")
       takeSnapshot();
       setEdges(
         edges.filter(
@@ -408,11 +411,13 @@ export default function Page({
   );
 
   const onEdgeUpdateStart = useCallback(() => {
+    console.log("15")
     edgeUpdateSuccessful.current = false;
   }, []);
 
   const onEdgeUpdate = useCallback(
     (oldEdge: Edge, newConnection: Connection) => {
+      console.log("16")
       if (isValidConnection(newConnection, reactFlowInstance!)) {
         edgeUpdateSuccessful.current = true;
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
@@ -422,6 +427,7 @@ export default function Page({
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
+    console.log("17")
     if (!edgeUpdateSuccessful.current) {
       setEdges((eds) => eds.filter((edg) => edg.id !== edge.id));
     }
@@ -431,15 +437,18 @@ export default function Page({
   const [selectionEnded, setSelectionEnded] = useState(true);
 
   const onSelectionEnd = useCallback(() => {
+    console.log("18")
     setSelectionEnded(true);
   }, []);
   const onSelectionStart = useCallback((event: MouseEvent) => {
+    console.log("19")
     event.preventDefault();
     setSelectionEnded(false);
   }, []);
 
   // Workaround to show the menu only after the selection has ended.
   useEffect(() => {
+    console.log("20")
     if (selectionEnded && lastSelection && lastSelection.nodes.length > 1) {
       setSelectionMenuVisible(true);
     } else {
@@ -449,12 +458,14 @@ export default function Page({
 
   const onSelectionChange = useCallback(
     (flow: OnSelectionChangeParams): void => {
+      console.log("21")
       setLastSelection(flow);
     },
     []
   );
 
   const onPaneClick = useCallback((flow) => {
+    console.log("22")
     setFilterEdge([]);
   }, []);
 

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -97,7 +97,6 @@ export default function ExtraSidebar(): JSX.Element {
   useEffect(() => {
     if (getFilterEdge.length === 0 && search === "") {
       setFilterData(data);
-      setFilterEdge([]);
       setSearch("");
     }
   }, [getFilterEdge]);