✨ [Frontend] Feature: Saving pipeline

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

@@ -249,6 +249,13 @@ qx.Class.define("osparc.data.model.Study", {
       init: null,
       event: "changeTrashedBy",
     },
+
+    savePending: {
+      check: "Boolean",
+      nullable: true,
+      event: "changeSavePending",
+      init: false
+    },
     // ------ ignore for serializing ------
   },
 
@@ -259,6 +266,7 @@ qx.Class.define("osparc.data.model.Study", {
       "pipelineRunning",
       "readOnly",
       "trashedAt",
+      "savePending",
     ],
 
     IgnoreModelizationProps: [

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

@@ -105,6 +105,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
 
   statics: {
     AUTO_SAVE_INTERVAL: 3000,
+    DIFF_CHECK_INTERVAL: 300,
     READ_ONLY_TEXT: qx.locale.Manager.tr("You do not have writing permissions.<br>Your changes will not be saved."),
   },
 
@@ -114,6 +115,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
     __workbenchView: null,
     __slideshowView: null,
     __autoSaveTimer: null,
+    __savingTimer: null,
     __studyEditorIdlingTracker: null,
     __studyDataInBackend: null,
     __updatingStudy: null,
@@ -226,6 +228,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
 
       if (osparc.data.model.Study.canIWrite(study.getAccessRights())) {
         this.__startAutoSaveTimer();
+        this.__startSavingTimer();
       } else {
         const msg = this.self().READ_ONLY_TEXT;
         osparc.FlashMessenger.logAs(msg, "WARNING");
@@ -794,6 +797,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       }, this);
     },
 
+    // ------------------ IDLING TRACKER ------------------
     __startIdlingTracker: function() {
       if (this.__studyEditorIdlingTracker) {
         this.__studyEditorIdlingTracker.stop();
@@ -810,7 +814,9 @@ qx.Class.define("osparc.desktop.StudyEditor", {
         this.__studyEditorIdlingTracker = null;
       }
     },
+    // ------------------ IDLING TRACKER ------------------
 
+    // ------------------ AUTO SAVER ------------------
     __startAutoSaveTimer: function() {
       // Save every 3 seconds
       const timer = this.__autoSaveTimer = new qx.event.Timer(this.self().AUTO_SAVE_INTERVAL);
@@ -835,10 +841,32 @@ qx.Class.define("osparc.desktop.StudyEditor", {
         this.__autoSaveTimer.restart();
       }
     },
+    // ------------------ AUTO SAVER ------------------
+
+    // ---------------- SAVING TIMER ------------------
+    __startSavingTimer: function() {
+      const timer = this.__savingTimer = new qx.event.Timer(this.self().DIFF_CHECK_INTERVAL);
+      timer.addListener("interval", () => {
+        if (!osparc.wrapper.WebSocket.getInstance().isConnected()) {
+          return;
+        }
+        this.getStudy().setSavePending(this.didStudyChange());
+      }, this);
+      timer.start();
+    },
+
+    __stopSavingTimer: function() {
+      if (this.__savingTimer && this.__savingTimer.isEnabled()) {
+        this.__savingTimer.stop();
+        this.__savingTimer.setEnabled(false);
+      }
+    },
+    // ---------------- SAVING TIMER ------------------
 
     __stopTimers: function() {
       this.__stopIdlingTracker();
       this.__stopAutoSaveTimer();
+      this.__stopSavingTimer();
     },
 
     __getStudyDiffs: function() {

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -112,6 +112,20 @@ qx.Class.define("osparc.navigation.NavigationBar", {
         converter: s => s ? "visible" : "excluded"
       });
 
+      const savingStudyIcon = this.getChildControl("saving-study-icon");
+      this.bind("study", savingStudyIcon, "visibility", {
+        converter: s => {
+          if (s) {
+            s.addListener("changeSavePending", e => {
+              const isSaving = e.getData();
+              const uiMode = s.getUi().getMode();
+              savingStudyIcon.setVisibility(isSaving && ["workbench", "pipeline"].includes(uiMode) ? "visible" : "excluded");
+            });
+          }
+          return "excluded";
+        }
+      });
+
       // center-items
       this.getChildControl("read-only-info");
 
@@ -202,6 +216,15 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           control.addListener("openLogger", () => this.fireEvent("openLogger"));
           this.getChildControl("left-items").add(control);
           break;
+        case "saving-study-icon":
+          control = new qx.ui.basic.Atom().set({
+            icon: "@FontAwesome5Solid/cloud-upload-alt/14",
+            label: this.tr("Saving..."),
+            font: "text-12",
+            opacity: 0.8,
+          });
+          this.getChildControl("left-items").add(control);
+          break;
         case "read-only-info": {
           control = new qx.ui.basic.Atom().set({
             label: this.tr("Read only"),