[#51] Fix Dagre async bug

kbss-cvut · Sep 19, 2024 · b2d3c29 · b2d3c29
1 parent aa6b12b
commit b2d3c29
Showing 1 changed file with 65 additions and 61 deletions.
diff --git a/src/components/dagre/Dagre.jsx b/src/components/dagre/Dagre.jsx
@@ -135,8 +135,9 @@ class Dagre extends React.Component {
       let result = new Map(validation.map((i) => [i[MODULE_URI], i]));
       this.setState({ validationMap: result, validationOrigin: validation });
       Rest.getScript(this.state.file, this.state.transformation).then((response) => {
-        this._processGraph(response);
-        this.renderCytoscapeElement();
+        this._processGraph(response).then(() => {
+          this.renderCytoscapeElement();
+        });
       });
     });
   }
@@ -151,78 +152,81 @@ class Dagre extends React.Component {
     }, timeout);
   }
 
-  _addNode(n) {
+  _addNode(n, newNodes, newGroups) {
     if (n[GROUP] !== undefined) {
-      if (!this.state.groups.has(n[GROUP])) {
-        this.state.groups.add(n[GROUP]);
-        this.setState({
-          nodes: [
-            ...this.state.nodes,
-            {
-              data: { id: n[GROUP], label: n[GROUP], input: [], output: [] },
-            },
-          ],
+      if (!newGroups.has(n[GROUP])) {
+        newGroups.add(n[GROUP]);
+        newNodes.push({
+          data: { id: n[GROUP], label: n[GROUP], input: [], output: [] },
         });
       }
     }
 
     const label = n[LABEL] === undefined ? n["@id"].toString().split("/").reverse()[0] : n[LABEL];
     const icon = ICONS_MAP[n[COMPONENT]] === undefined ? "beer.png" : ICONS_MAP[n[COMPONENT]];
-    this.setState({
-      nodes: [
-        ...this.state.nodes,
-        {
-          data: {
-            id: n["@id"],
-            label: label,
-            component: n[COMPONENT],
-            type: n[TYPE],
-            input: n[INPUT_PARAMETER],
-            output: n[OUTPUT_PARAMETER],
-            variables: n[MODULE_VARIABLES],
-            icon: "/icons/" + icon,
-            menu: true,
-            scriptPath: n[SCRIPT_PATH],
-            parent: n[GROUP],
-            validation: this.state.validationMap.get(n["@id"]),
-          },
-          selectable: false,
-          position: { x: n[X], y: n[Y] },
-        },
-      ],
+
+    newNodes.push({
+      data: {
+        id: n["@id"],
+        label: label,
+        component: n[COMPONENT],
+        type: n[TYPE],
+        input: n[INPUT_PARAMETER],
+        output: n[OUTPUT_PARAMETER],
+        variables: n[MODULE_VARIABLES],
+        icon: "/icons/" + icon,
+        menu: true,
+        scriptPath: n[SCRIPT_PATH],
+        parent: n[GROUP],
+        validation: this.state.validationMap.get(n["@id"]),
+      },
+      selectable: false,
+      position: { x: n[X], y: n[Y] },
     });
   }
 
   _processGraph(data) {
-    data[NODE].map((n) => {
-      if (n[TYPE] !== undefined) {
-        this._addNode(n);
-      }
-    });
-    data[EDGE].map((e) => {
-      if (e[SOURCE_NODE][TYPE] !== undefined) {
-        let n = e[SOURCE_NODE];
-        this._addNode(n);
-      }
-      if (e[DESTINATION_NODE][TYPE] !== undefined) {
-        let n = e[DESTINATION_NODE];
-        this._addNode(n);
-      }
-    });
-    data[EDGE].map((e) => {
-      let from = typeof e[SOURCE_NODE] === "object" ? e[SOURCE_NODE]["@id"] : e[SOURCE_NODE];
-      let to = typeof e[DESTINATION_NODE] === "object" ? e[DESTINATION_NODE]["@id"] : e[DESTINATION_NODE];
-      this.setState({
-        edges: [
-          ...this.state.edges,
-          {
-            data: { source: from, target: to, menu: true },
-            selectable: false,
-          },
-        ],
+    return new Promise((resolve) => {
+      const newNodes = [];
+      const newEdges = [];
+      const newGroups = new Set(this.state.groups);
+
+      data[NODE].forEach((n) => {
+        if (n[TYPE] !== undefined) {
+          this._addNode(n, newNodes, newGroups);
+        }
+      });
+
+      data[EDGE].forEach((e) => {
+        if (e[SOURCE_NODE][TYPE] !== undefined) {
+          this._addNode(e[SOURCE_NODE], newNodes, newGroups);
+        }
+        if (e[DESTINATION_NODE][TYPE] !== undefined) {
+          this._addNode(e[DESTINATION_NODE], newNodes, newGroups);
+        }
+      });
+
+      data[EDGE].forEach((e) => {
+        let from = typeof e[SOURCE_NODE] === "object" ? e[SOURCE_NODE]["@id"] : e[SOURCE_NODE];
+        let to = typeof e[DESTINATION_NODE] === "object" ? e[DESTINATION_NODE]["@id"] : e[DESTINATION_NODE];
+        newEdges.push({
+          data: { source: from, target: to, menu: true },
+          selectable: false,
+        });
       });
+      this.setState(
+        (prevState) => ({
+          nodes: [...prevState.nodes, ...newNodes],
+          edges: [...prevState.edges, ...newEdges],
+          groups: newGroups,
+          isLoaded: true,
+        }),
+        () => {
+          this.renderCytoscapeElement();
+          resolve();
+        },
+      );
     });
-    this.setState({ isLoaded: true });
   }
 
   handleErrorModal() {