🎨 [Frontend] Patch study from Study Editor

services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js

@@ -143,19 +143,19 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
 
 
       if (this.__tagButtons.length >= maxTags) {
-        const showAllButton = new qx.ui.form.Button(this.tr("Show all Tags..."), "@FontAwesome5Solid/tags/20");
+        const showAllButton = new qx.ui.form.Button(this.tr("All Tags..."), "@FontAwesome5Solid/tags/20");
         showAllButton.set({
           appearance: "filter-toggle-button"
         });
         showAllButton.showingAll = false;
         showAllButton.addListener("execute", () => {
           if (showAllButton.showingAll) {
             this.__tagButtons.forEach((btn, idx) => btn.setVisibility(idx >= maxTags ? "excluded" : "visible"));
-            showAllButton.setLabel(this.tr("Show all Tags..."));
+            showAllButton.setLabel(this.tr("All Tags..."));
             showAllButton.showingAll = false;
           } else {
             this.__tagButtons.forEach(btn => btn.setVisibility("visible"));
-            showAllButton.setLabel(this.tr("Show less Tags..."));
+            showAllButton.setLabel(this.tr("Less Tags..."));
             showAllButton.showingAll = true;
           }
         });

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

@@ -64,7 +64,8 @@ qx.Class.define("osparc.data.model.Study", {
     this.setWorkbench(workbench);
     workbench.setStudy(this);
 
-    this.setUi(new osparc.data.model.StudyUI(studyData.ui));
+    const workbenchUi = new osparc.data.model.StudyUI(studyData.ui);
+    this.setUi(workbenchUi);
 
     this.getWorkbench().buildWorkbench();
   },
@@ -316,6 +317,30 @@ qx.Class.define("osparc.data.model.Study", {
   },
 
   members: {
+    serialize: function(clean = true) {
+      let jsonObject = {};
+      const propertyKeys = this.self().getProperties();
+      propertyKeys.forEach(key => {
+        if (this.self().IgnoreSerializationProps.includes(key)) {
+          return;
+        }
+        if (key === "workbench") {
+          jsonObject[key] = this.getWorkbench().serialize(clean);
+          return;
+        }
+        if (key === "ui") {
+          jsonObject[key] = this.getUi().serialize();
+          return;
+        }
+        const value = this.get(key);
+        if (value !== null) {
+          // only put the value in the payload if there is a value
+          jsonObject[key] = value;
+        }
+      });
+      return jsonObject;
+    },
+
     initStudy: function() {
       this.getWorkbench().initWorkbench();
     },
@@ -549,80 +574,80 @@ qx.Class.define("osparc.data.model.Study", {
       return !this.getUi().getSlideshow().isEmpty();
     },
 
-    serializeStudyData: function() {
-      let studyData = {};
-      const propertyKeys = this.self().getProperties();
-      propertyKeys.forEach(key => {
-        if (key === "workbench") {
-          studyData[key] = this.getWorkbench().serialize();
-          return;
-        }
-        if (key === "ui") {
-          studyData[key] = this.getUi().serialize();
-          return;
-        }
-        const value = this.get(key);
-        studyData[key] = value;
-      });
-      return studyData;
-    },
-
-    serialize: function(clean = true) {
-      let jsonObject = {};
-      const propertyKeys = this.self().getProperties();
-      propertyKeys.forEach(key => {
-        if (this.self().IgnoreSerializationProps.includes(key)) {
-          return;
-        }
-        if (key === "workbench") {
-          jsonObject[key] = this.getWorkbench().serialize(clean);
-          return;
-        }
-        if (key === "ui") {
-          jsonObject[key] = this.getUi().serialize();
-          return;
-        }
-        const value = this.get(key);
-        if (value !== null) {
-          // only put the value in the payload if there is a value
-          jsonObject[key] = value;
-        }
-      });
-      return jsonObject;
-    },
-
-    patchStudy: function(fieldKey, value) {
+    patchStudy: function(studyChanges) {
       return new Promise((resolve, reject) => {
-        const patchData = {};
-        patchData[fieldKey] = value;
         const params = {
           url: {
             "studyId": this.getUuid()
           },
-          data: patchData
+          data: studyChanges
         };
         osparc.data.Resources.fetch("studies", "patch", params)
           .then(() => {
-            const upKey = qx.lang.String.firstUp(fieldKey);
-            const setter = "set" + upKey;
-            this[setter](value);
+            Object.keys(studyChanges).forEach(fieldKey => {
+              const upKey = qx.lang.String.firstUp(fieldKey);
+              const setter = "set" + upKey;
+              this[setter](studyChanges[fieldKey]);
+            })
             // A bit hacky, but it's not sent back to the backend
             this.set({
               lastChangeDate: new Date()
             });
-            const studyData = this.serializeStudyData();
+            const studyData = this.serialize();
             resolve(studyData);
           })
           .catch(err => reject(err));
       });
     },
 
-    updateStudy: function(params, run = false) {
+    /**
+     * Call patch Study, but the changes were already applied on the frontend
+     * @param studyDiffs {Object} Diff Object coming from the JsonDiffPatch lib. Use only the keys, not the changes.
+     */
+    patchStudyDelayed: function(studyDiffs) {
+      const promises = [];
+      let workbenchDiffs = {};
+      if ("workbench" in studyDiffs) {
+        workbenchDiffs = studyDiffs["workbench"];
+        promises.push(this.getWorkbench().patchWorkbenchDelayed(workbenchDiffs));
+        delete studyDiffs["workbench"];
+      }
+      const fieldKeys = Object.keys(studyDiffs);
+      if (fieldKeys.length) {
+        const patchData = {};
+        const params = {
+          url: {
+            "studyId": this.getUuid()
+          },
+          data: patchData
+        };
+        fieldKeys.forEach(fieldKey => {
+          if (fieldKey === "ui") {
+            patchData[fieldKey] = this.getUi().serialize();
+          } else {
+            const upKey = qx.lang.String.firstUp(fieldKey);
+            const getter = "get" + upKey;
+            patchData[fieldKey] = this[getter](studyDiffs[fieldKey]);
+          }
+          promises.push(osparc.data.Resources.fetch("studies", "patch", params))
+        });
+      }
+      return Promise.all(promises)
+        .then(() => {
+          // A bit hacky, but it's not sent back to the backend
+          this.set({
+            lastChangeDate: new Date()
+          });
+          const studyData = this.serialize();
+          return studyData;
+        });
+    },
+
+    updateStudy: function(params) {
       return new Promise((resolve, reject) => {
         osparc.data.Resources.fetch("studies", "put", {
           url: {
-            "studyId": this.getUuid(),
-            run
+            "studyId": this.getUuid()
           },
           data: {
             ...this.serialize(),

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

@@ -42,6 +42,7 @@ qx.Class.define("osparc.data.model.StudyUI", {
   },
 
   properties: {
+    // stores position and/or marker
     workbench: {
       check: "Object",
       init: {},
@@ -103,6 +104,11 @@ qx.Class.define("osparc.data.model.StudyUI", {
       }
     },
 
+    removeNode: function(nodeId) {
+      // remove it from slideshow
+      this.getSlideshow().removeNode(nodeId);
+    },
+
     serialize: function() {
       const currentStudy = osparc.store.Store.getInstance().getCurrentStudy();
       let jsonObject = {};