support remove node

Author: odeimaiz

services/static-webserver/client/source/class/osparc/data/model/Node.js

@@ -1203,7 +1203,7 @@ qx.Class.define("osparc.data.model.Node", {
         this.__deleteInBackend()
           .then(() => {
             resolve(true);
-            this.removeIFrame();
+            this.nodeRemoved();
           })
           .catch(err => {
             console.error(err);
@@ -1212,6 +1212,10 @@ qx.Class.define("osparc.data.model.Node", {
       });
     },
 
+    nodeRemoved: function() {
+      this.removeIFrame();
+    },
+
     __deleteInBackend: function() {
       // remove node in the backend
       const params = {

services/static-webserver/client/source/class/osparc/data/model/Workbench.js

@@ -54,6 +54,7 @@ qx.Class.define("osparc.data.model.Workbench", {
     "projectDocumentChanged": "qx.event.type.Data",
     "restartAutoSaveTimer": "qx.event.type.Event",
     "pipelineChanged": "qx.event.type.Event",
+    "nodeRemoved": "qx.event.type.Data",
     "reloadModel": "qx.event.type.Event",
     "retrieveInputs": "qx.event.type.Data",
     "fileRequested": "qx.event.type.Data",
@@ -539,11 +540,11 @@ qx.Class.define("osparc.data.model.Workbench", {
 
     removeNode: async function(nodeId) {
       if (!osparc.data.Permissions.getInstance().canDo("study.node.delete", true)) {
-        return false;
+        return;
       }
       if (this.getStudy().isPipelineRunning()) {
         osparc.FlashMessenger.logAs(this.self().CANT_DELETE_NODE, "ERROR");
-        return false;
+        return;
       }
 
       this.fireEvent("restartAutoSaveTimer");
@@ -552,26 +553,33 @@ qx.Class.define("osparc.data.model.Workbench", {
         // remove the node in the backend first
         const removed = await node.removeNode();
         if (removed) {
-          this.fireEvent("restartAutoSaveTimer");
+          this.__nodeRemoved(nodeId);
+        }
+      }
+    },
 
-          delete this.__nodes[nodeId];
+    __nodeRemoved: function(nodeId) {
+      this.fireEvent("restartAutoSaveTimer");
 
-          // remove first the connected edges
-          const connectedEdges = this.getConnectedEdges(nodeId);
-          connectedEdges.forEach(connectedEdgeId => {
-            this.removeEdge(connectedEdgeId);
-          });
+      delete this.__nodes[nodeId];
 
-          // remove it from ui model
-          if (this.getStudy()) {
-            this.getStudy().getUi().removeNode(nodeId);
-          }
+      // remove first the connected edges
+      const connectedEdgeIds = this.getConnectedEdges(nodeId);
+      connectedEdgeIds.forEach(connectedEdgeId => {
+        this.removeEdge(connectedEdgeId);
+      });
 
-          this.fireEvent("pipelineChanged");
-          return true;
-        }
+      // remove it from ui model
+      if (this.getStudy()) {
+        this.getStudy().getUi().removeNode(nodeId);
       }
-      return false;
+
+      this.fireEvent("pipelineChanged");
+
+      this.fireDataEvent("nodeRemoved", {
+        nodeId,
+        connectedEdgeIds,
+      });
     },
 
     addServiceBetween: async function(service, leftNodeId, rightNodeId) {
@@ -831,14 +839,42 @@ qx.Class.define("osparc.data.model.Workbench", {
 
     updateWorkbenchFromPatches: function(workbenchPatches) {
       // group the patches by nodeId
+      const nodesAdded = [];
+      const nodesRemoved = [];
       const workbenchPatchesByNode = {};
       workbenchPatches.forEach(workbenchPatch => {
         const nodeId = workbenchPatch.path.split("/")[2];
+
+        const pathParts = workbenchPatch.path.split("/");
+        if (pathParts.length === 3) {
+          if (workbenchPatch.op === "add") {
+            // node was added
+            nodesAdded.push(nodeId);
+          } else if (workbenchPatch.op === "remove") {
+            // node was removed
+            nodesRemoved.push(nodeId);
+          }
+        }
+
         if (!(nodeId in workbenchPatchesByNode)) {
           workbenchPatchesByNode[nodeId] = [];
         }
         workbenchPatchesByNode[nodeId].push(workbenchPatch);
       });
+
+      // first remove nodes
+      nodesRemoved.forEach(nodeId => {
+        const node = this.getNode(nodeId);
+        if (node) {
+          node.nodeRemoved(nodeId);
+        }
+        this.__nodeRemoved(nodeId);
+      });
+
+      // second add nodes
+      console.log("Adding nodes", nodesAdded);
+
+      // third update nodes
       Object.keys(workbenchPatchesByNode).forEach(nodeId => {
         const node = this.getNode(nodeId);
         if (node === null) {
@@ -848,7 +884,6 @@ qx.Class.define("osparc.data.model.Workbench", {
         const nodePatches = workbenchPatchesByNode[nodeId];
         node.updateNodeFromPatch(nodePatches);
       });
-      this.getNode()
     },
   }
 });

services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

@@ -246,6 +246,10 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         this.__connectEvents();
 
         study.getWorkbench().addListener("pipelineChanged", () => this.__evalSlidesButtons());
+        study.getWorkbench().addListener("nodeRemoved", e => {
+          const {nodeId, connectedEdgeIds} = e.getData();
+          this.nodeRemoved(nodeId, connectedEdgeIds);
+        });
         study.getUi().getSlideshow().addListener("changeSlideshow", () => this.__evalSlidesButtons());
         study.getUi().addListener("changeMode", () => this.__evalSlidesButtons());
         this.__evalSlidesButtons();
@@ -1169,23 +1173,23 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       }
     },
 
-    __doRemoveNode: async function(nodeId) {
+    __doRemoveNode: function(nodeId) {
       const workbench = this.getStudy().getWorkbench();
-      const connectedEdges = workbench.getConnectedEdges(nodeId);
-      const removed = await workbench.removeNode(nodeId);
-      if (removed) {
-        // remove first the connected edges
-        for (let i = 0; i < connectedEdges.length; i++) {
-          const edgeId = connectedEdges[i];
-          this.__workbenchUI.clearEdge(edgeId);
-        }
-        this.__workbenchUI.clearNode(nodeId);
-      }
+      workbench.removeNode(nodeId);
       if ([this.__currentNodeId, null].includes(this.__nodesTree.getCurrentNodeId())) {
         this.nodeSelected(this.getStudy().getUuid());
       }
     },
 
+    nodeRemoved: function(nodeId, connectedEdgeIds) {
+      // remove first the connected edges
+      connectedEdgeIds.forEach(edgeId => {
+        this.__workbenchUI.clearEdge(edgeId);
+      });
+      // then remove the node
+      this.__workbenchUI.clearNode(nodeId);
+    },
+
     __removeEdge: function(edgeId) {
       const workbench = this.getStudy().getWorkbench();
       const removed = workbench.removeEdge(edgeId);