✨ [Frontend] Feature: sync with projectDocument:updated WS

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

@@ -198,6 +198,9 @@ qx.Class.define("osparc.data.model.Node", {
     "reloadModel": "qx.event.type.Event",
     "retrieveInputs": "qx.event.type.Data",
     "keyChanged": "qx.event.type.Event",
+    "changePosition": "qx.event.type.Data",
+    "createEdge": "qx.event.type.Data",
+    "removeEdge": "qx.event.type.Data",
     "fileRequested": "qx.event.type.Data",
     "parameterRequested": "qx.event.type.Data",
     "filePickerRequested": "qx.event.type.Data",
@@ -237,6 +240,10 @@ qx.Class.define("osparc.data.model.Node", {
      "progress", // !! not a property but goes into the model
     ],
 
+    getProperties: function() {
+      return Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Node));
+    },
+
     isFrontend: function(metadata) {
       return (metadata && metadata.key && metadata.key.includes("/frontend/"));
     },
@@ -524,7 +531,7 @@ qx.Class.define("osparc.data.model.Node", {
         this.setPosition(nodeUIData.position);
       }
       if ("marker" in nodeUIData) {
-        this.__addMarker(nodeUIData.marker);
+        this.addMarker(nodeUIData.marker);
       }
     },
 
@@ -682,11 +689,11 @@ qx.Class.define("osparc.data.model.Node", {
       if (this.getMarker()) {
         this.__removeMarker();
       } else {
-        this.__addMarker();
+        this.addMarker();
       }
     },
 
-    __addMarker: function(marker) {
+    addMarker: function(marker) {
       if (marker === undefined) {
         marker = {
           color: osparc.utils.Utils.getRandomColor()
@@ -922,13 +929,14 @@ qx.Class.define("osparc.data.model.Node", {
 
     removeInputNode: function(inputNodeId) {
       const index = this.__inputNodes.indexOf(inputNodeId);
-      if (index > -1) {
-        // remove node connection
-        this.__inputNodes.splice(index, 1);
-        this.fireEvent("changeInputNodes");
-        return true;
+      // make sure index is valid
+      if (index < 0 || index >= this.__inputNodes.length) {
+        return false;
       }
-      return false;
+      // remove node connection
+      this.__inputNodes.splice(index, 1);
+      this.fireEvent("changeInputNodes");
+      return true;
     },
 
     isInputNode: function(inputNodeId) {
@@ -1198,7 +1206,7 @@ qx.Class.define("osparc.data.model.Node", {
         this.__deleteInBackend()
           .then(() => {
             resolve(true);
-            this.removeIFrame();
+            this.nodeRemoved();
           })
           .catch(err => {
             console.error(err);
@@ -1207,6 +1215,10 @@ qx.Class.define("osparc.data.model.Node", {
       });
     },
 
+    nodeRemoved: function() {
+      this.removeIFrame();
+    },
+
     __deleteInBackend: function() {
       // remove node in the backend
       const params = {
@@ -1250,6 +1262,11 @@ qx.Class.define("osparc.data.model.Node", {
         },
         "osparc-resource": "ui",
       });
+
+      this.fireDataEvent("changePosition", {
+        x: this.__posX,
+        y: this.__posY
+      });
     },
 
     getPosition: function() {
@@ -1300,7 +1317,7 @@ qx.Class.define("osparc.data.model.Node", {
 
     listenToChanges: function() {
       const nodeId = this.getNodeId();
-      const propertyKeys = Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Node));
+      const nodePropertyKeys = this.self().getProperties();
       this.self().ListenChangesProps.forEach(key => {
         switch (key) {
           case "inputs":
@@ -1394,7 +1411,7 @@ qx.Class.define("osparc.data.model.Node", {
             }
             break;
           default:
-            if (propertyKeys.includes(key)) {
+            if (nodePropertyKeys.includes(key)) {
               this.addListener("change" + qx.lang.String.firstUp(key), e => {
                 const data = e.getData();
                 this.fireDataEvent("projectDocumentChanged", {
@@ -1412,14 +1429,87 @@ qx.Class.define("osparc.data.model.Node", {
       });
     },
 
+    updateNodeFromPatch: function(nodePatches) {
+      const nodePropertyKeys = this.self().getProperties();
+      nodePatches.forEach(patch => {
+        const op = patch.op;
+        const path = patch.path;
+        const value = patch.value;
+        const nodeProperty = path.split("/")[3];
+        switch (nodeProperty) {
+          case "inputs": {
+            const updatedPortKey = path.split("/")[4];
+            const currentInputs = this.__getInputData();
+            currentInputs[updatedPortKey] = value;
+            this.__setInputData(currentInputs);
+            break;
+          }
+          case "inputsUnits": {
+            // this is never transmitted by the frontend
+            const updatedPortKey = path.split("/")[4];
+            const currentInputUnits = this.__getInputUnits();
+            currentInputUnits[updatedPortKey] = value;
+            this.__setInputUnits(currentInputUnits);
+            break;
+          }
+          case "inputNodes":
+            if (op === "add") {
+              const inputNodeId = value;
+              this.fireDataEvent("createEdge", {
+                nodeId1: inputNodeId,
+                nodeId2: this.getNodeId(),
+              });
+            } else if (op === "remove") {
+              // we don't have more information about the input node, so we just remove it by index
+              const index = path.split("/")[4];
+              // make sure index is valid
+              if (index >= 0 && index < this.__inputNodes.length) {
+                this.fireDataEvent("removeEdge", {
+                  nodeId1: this.__inputNodes[index],
+                  nodeId2: this.getNodeId(),
+                });
+              }
+            }
+            break;
+          case "inputsRequired":
+            console.warn(`To be implemented: patching ${nodeProperty} is not supported yet`);
+            break;
+          case "outputs": {
+            const updatedPortKey = path.split("/")[4];
+            const currentOutputs = this.isFilePicker() ? osparc.file.FilePicker.serializeOutput(this.getOutputs()) : this.__getOutputsData();
+            currentOutputs[updatedPortKey] = value;
+            this.setOutputData(currentOutputs);
+            break;
+          }
+          case "progress":
+            if (this.isFilePicker()) {
+              this.getStatus().setProgress(value);
+            } else {
+              console.warn(`To be implemented: patching ${nodeProperty} is not supported yet`);
+            }
+            break;
+          default:
+            if (nodePropertyKeys.includes(nodeProperty)) {
+              const setter = "set" + qx.lang.String.firstUp(nodeProperty);
+              if (this[setter]) {
+                this[setter](value);
+              } else {
+                console.warn(`Property "${nodeProperty}" does not have a setter in osparc.data.model.Node`);
+              }
+            }
+            break;
+        }
+      });
+    },
+
     serialize: function() {
       // node generic
       let nodeEntry = {
         key: this.getKey(),
         version: this.getVersion(),
         label: this.getLabel(),
         inputs: this.__getInputData(),
-        inputsUnits: this.__getInputUnits(),
+        inputsUnits: this.__getInputUnits(), // this is not working
         inputNodes: this.getInputNodes(),
         inputsRequired: this.getInputsRequired(),
         bootOptions: this.getBootOptions()

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

@@ -44,8 +44,8 @@ qx.Class.define("osparc.data.model.Study", {
 
     this.set({
       uuid: studyData.uuid || this.getUuid(),
-      workspaceId: studyData.workspaceId || null,
-      folderId: studyData.folderId || null,
+      workspaceId: studyData.workspaceId || this.getWorkspaceId(),
+      folderId: studyData.folderId || this.getFolderId(),
       name: studyData.name || this.getName(),
       description: studyData.description || this.getDescription(),
       thumbnail: studyData.thumbnail || this.getThumbnail(),
@@ -60,9 +60,9 @@ qx.Class.define("osparc.data.model.Study", {
       permalink: studyData.permalink || this.getPermalink(),
       dev: studyData.dev || this.getDev(),
       trashedAt: studyData.trashedAt ? new Date(studyData.trashedAt) : this.getTrashedAt(),
-      trashedBy: studyData.trashedBy || null,
-      type: studyData.type,
-      templateType: studyData.templateType,
+      trashedBy: studyData.trashedBy || this.getTrashedBy(),
+      type: studyData.type || this.getType(),
+      templateType: studyData.templateType || this.getTemplateType(),
     });
 
     const wbData = studyData.workbench || this.getWorkbench();
@@ -143,7 +143,7 @@ qx.Class.define("osparc.data.model.Study", {
 
     thumbnail: {
       check: "String",
-      nullable: false,
+      nullable: true,
       event: "changeThumbnail",
       init: ""
     },
@@ -747,23 +747,23 @@ qx.Class.define("osparc.data.model.Study", {
      * @param studyDiffs {Object} Diff Object coming from the JsonDiffPatch lib. Use only the keys, not the changes.
      * @param studySource {Object} Study object that was used to check the diffs on the frontend.
      */
-    patchStudyDelayed: function(studyDiffs, studySource) {
+    patchStudyDiffs: function(studyDiffs, studySource) {
       const promises = [];
       if ("workbench" in studyDiffs) {
-        promises.push(this.getWorkbench().patchWorkbenchDelayed(studyDiffs["workbench"], studySource["workbench"]));
+        promises.push(this.getWorkbench().patchWorkbenchDiffs(studyDiffs["workbench"], studySource["workbench"]));
         delete studyDiffs["workbench"];
       }
-      const fieldKeys = Object.keys(studyDiffs);
-      if (fieldKeys.length) {
-        fieldKeys.forEach(fieldKey => {
+      const changedFields = Object.keys(studyDiffs);
+      if (changedFields.length) {
+        changedFields.forEach(changedField => {
           // OM: can this be called all together?
           const patchData = {};
-          if (fieldKey === "ui") {
-            patchData[fieldKey] = this.getUi().serialize();
+          if (changedField === "ui") {
+            patchData[changedField] = this.getUi().serialize();
           } else {
-            const upKey = qx.lang.String.firstUp(fieldKey);
+            const upKey = qx.lang.String.firstUp(changedField);
             const getter = "get" + upKey;
-            patchData[fieldKey] = this[getter](studyDiffs[fieldKey]);
+            patchData[changedField] = this[getter](studyDiffs[changedField]);
           }
           promises.push(osparc.store.Study.getInstance().patchStudy(this.getUuid(), patchData))
         });
@@ -772,6 +772,53 @@ qx.Class.define("osparc.data.model.Study", {
         .then(() => {
           return studySource;
         });
-    }
+    },
+
+    // unused in favor of updateStudyFromPatches
+    updateStudyFromDiff: function(studyDiffs) {
+      const studyPropertyKeys = this.self().getProperties();
+      studyPropertyKeys.forEach(studyPropertyKey => {
+        if (studyPropertyKey in studyDiffs) {
+          const newValue = studyDiffs[studyPropertyKey][1];
+          if ("lastChangeDate" === studyPropertyKey) {
+            this.setLastChangeDate(new Date(newValue));
+          } else {
+            const upKey = qx.lang.String.firstUp(studyPropertyKey);
+            const setter = "set" + upKey;
+            this[setter](newValue);
+          }
+          delete studyDiffs[studyPropertyKey];
+        }
+      });
+    },
+
+    // json PATCHES
+    updateStudyFromPatches: function(studyPatches) {
+      const studyPropertyKeys = this.self().getProperties();
+      studyPatches.forEach(patch => {
+        const op = patch.op;
+        const path = patch.path;
+        const value = patch.value;
+        switch (op) {
+          case "replace":
+            const studyProperty = path.substring(1); // remove the leading "/"
+            if (studyPropertyKeys.includes(studyProperty)) {
+              if (path === "/lastChangeDate") {
+                this.setLastChangeDate(new Date(value));
+              } else {
+                const setter = "set" + qx.lang.String.firstUp(studyProperty);
+                if (this[setter]) {
+                  this[setter](value);
+                } else {
+                  console.warn(`Property "${studyProperty}" does not have a setter in osparc.data.model.Study`);
+                }
+              }
+            }
+            break;
+          default:
+            console.warn(`Unhandled patch operation "${op}" for path "${path}" with value "${value}"`);
+        }
+      });
+    },
   }
 });