Auto arrange node in the first time

Author: superstar54

.github/workflows/ci.yml

@@ -32,7 +32,7 @@ jobs:
     strategy:
       max-parallel: 4
       matrix:
-        python-version: ['3.9', '3.10', '3.11']
+        python-version: ['3.10', '3.11', '3.12']
 
     steps:
       - uses: actions/checkout@v4

js/rete_utils.ts

@@ -88,9 +88,9 @@ export async function loadJSON(editor, area, layout, workgraphData) {
   }
 
   // Adding connections based on workgraphData
-  workgraphData.links.forEach(async (link: LinkData) => { // Specify the type of link here
+  for (const link of workgraphData.links) {
     await addLink(editor, area, layout, link);
-  });
+  }
 
   // Add while zones
   console.log("Adding while zone: ");
@@ -172,6 +172,20 @@ export async function removeNode(editor, name) {
   });
 }
 
+export async function clearEditor(editor) {
+  const connections = editor.getConnections();
+  for (const connection of connections) {
+    await editor.removeConnection(connection.id);
+  }
+
+  const nodes = editor.getNodes();
+  for (const node of nodes) {
+    await editor.removeNode(node.id);
+  }
+
+  editor.nodeMap = {};
+}
+
 /**
  * Defines custom padding for a scope layout.
  * The padding values are used by the ScopesPlugin to avoid node overlapping with the socket of the parent node.

js/widget.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button, Switch } from "antd";
 import { createRender, useModel, useModelState } from "@anywidget/react";
-import { createEditor, loadJSON, removeNode, addNode, addLink, removeLink } from "./rete_utils";
+import { createEditor, loadJSON, removeNode, addNode, addLink, removeLink, clearEditor } from "./rete_utils";
 import "./widget.css";
 
 export function useRete<T extends { destroy(): void }>(
@@ -154,13 +154,20 @@ const render = createRender(() => {
       console.log("Editor not ready");
       return;
     };
-    // same uuid skip
-    if (editor.editor.uuid && editor.editor.uuid === value.uuid) {
-      console.log("Same uuid, skip");
+    if (!value) {
       return;
     }
-    loadJSON(editor.editor, editor.area, editor.layout, value);
-  }, [isInitialized, value]);
+    const incomingUuid = value?.uuid;
+    const applyValue = async () => {
+      await clearEditor(editor.editor);
+      await loadJSON(editor.editor, editor.area, editor.layout, value);
+      if (incomingUuid) {
+        editor.editor.uuid = incomingUuid;
+      }
+      await editor.layout(true);
+    };
+    applyValue();
+  }, [editor, isInitialized, value]);
 
   return (
     <div className="App">

tests/notebooks/tests/widgets.test.ts

@@ -29,6 +29,7 @@ test.describe('Widget Visual Regression', () => {
 
     await page.notebook.runCellByCell({
       onAfterCellRun: async (cellIndex: number) => {
+        await page.waitForTimeout(3000); // Wait for 3 second before retrying
         let cell = await page.notebook.getCellOutput(cellIndex);
         const startTime = Date.now();
         const timeout = 60000; // Timeout in milliseconds, adjust as necessary