✨ [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() {
@@ -857,6 +885,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       return studyDiffs;
     },
 
+    // didStudyChange takes around 0.5ms
     didStudyChange: function() {
       const studyDiffs = this.__getStudyDiffs();
       return Boolean(Object.keys(studyDiffs.delta).length);

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

@@ -112,6 +112,8 @@ qx.Class.define("osparc.navigation.NavigationBar", {
         converter: s => s ? "visible" : "excluded"
       });
 
+      this.getChildControl("saving-study-icon");
+
       // center-items
       this.getChildControl("read-only-info");
 
@@ -202,6 +204,16 @@ 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,
+            visibility: "excluded",
+          });
+          this.getChildControl("left-items").add(control);
+          break;
         case "read-only-info": {
           control = new qx.ui.basic.Atom().set({
             label: this.tr("Read only"),
@@ -337,13 +349,18 @@ qx.Class.define("osparc.navigation.NavigationBar", {
     },
 
     __applyStudy: function(study) {
+      const savingStudyIcon = this.getChildControl("saving-study-icon");
       const readOnlyInfo = this.getChildControl("read-only-info")
       if (study) {
         this.getChildControl("study-title-options").setStudy(study);
+        study.bind("savePending", readOnlyInfo, "visibility", {
+          converter: value => value && ["workbench", "pipeline"].includes(study.getUi().getMode()) ? "visible" : "excluded"
+        });
         study.bind("readOnly", readOnlyInfo, "visibility", {
           converter: value => value ? "visible" : "excluded"
         });
       } else {
+        savingStudyIcon.exclude();
         readOnlyInfo.exclude();
       }
     },

services/static-webserver/client/source/class/osparc/study/Conversations.js

@@ -27,7 +27,7 @@ qx.Class.define("osparc.study.Conversations", {
 
     this._setLayout(new qx.ui.layout.VBox());
 
-    this.__conversations = [];
+    this.__conversationsPages = [];
     this.__openConversationId = openConversationId;
 
     this.set({
@@ -126,17 +126,17 @@ qx.Class.define("osparc.study.Conversations", {
         const eventHandler = message => {
           if (message) {
             const conversationId = message["conversationId"];
-            const conversation = this.__getConversation(conversationId);
-            if (conversation) {
+            const conversationPage = this.__getConversationPage(conversationId);
+            if (conversationPage) {
               switch (eventName) {
                 case "conversation:message:created":
-                  conversation.addMessage(message);
+                  conversationPage.addMessage(message);
                   break;
                 case "conversation:message:updated":
-                  conversation.updateMessage(message);
+                  conversationPage.updateMessage(message);
                   break;
                 case "conversation:message:deleted":
-                  conversation.deleteMessage(message);
+                  conversationPage.deleteMessage(message);
                   break;
               }
             }
@@ -147,8 +147,8 @@ qx.Class.define("osparc.study.Conversations", {
       });
     },
 
-    __getConversation: function(conversationId) {
-      return this.__conversations.find(conversation => conversation.getConversationId() === conversationId);
+    __getConversationPage: function(conversationId) {
+      return this.__conversationsPages.find(conversation => conversation.getConversationId() === conversationId);
     },
 
     __applyStudyData: function(studyData) {
@@ -206,15 +206,15 @@ qx.Class.define("osparc.study.Conversations", {
     __addConversationPage: function(conversationData) {
       // ignore it if it was already there
       const conversationId = conversationData["conversationId"];
-      const conversation = this.__getConversation(conversationId);
-      if (conversation) {
+      const conversationPageFound = this.__getConversationPage(conversationId);
+      if (conversationPageFound) {
         return null;
       }
 
       const conversationPage = this.__createConversationPage(conversationData);
       this.__addToPages(conversationPage);
 
-      this.__conversations.push(conversationPage);
+      this.__conversationsPages.push(conversationPage);
 
       return conversationPage;
     },
@@ -234,10 +234,10 @@ qx.Class.define("osparc.study.Conversations", {
           enabled: osparc.data.model.Study.canIWrite(studyData["accessRights"]),
         });
         newConversationButton.addListener("execute", () => {
-          osparc.store.Conversations.getInstance().addConversation(studyData["uuid"], "new " + (this.__conversations.length + 1))
+          osparc.store.Conversations.getInstance().addConversation(studyData["uuid"], "new " + (this.__conversationsPages.length + 1))
             .then(conversationDt => {
               this.__addConversationPage(conversationDt);
-              const newConversationPage = this.__getConversation(conversationDt["conversationId"]);
+              const newConversationPage = this.__getConversationPage(conversationDt["conversationId"]);
               if (newConversationPage) {
                 conversationsLayout.setSelection([newConversationPage]);
               }
@@ -251,11 +251,13 @@ qx.Class.define("osparc.study.Conversations", {
     },
 
     __removeConversationPage: function(conversationId, changeSelection = false) {
-      const conversation = this.__getConversation(conversationId);
-      if (conversation) {
+      const conversationPage = this.__getConversationPage(conversationId);
+      if (conversationPage) {
         const conversationsLayout = this.getChildControl("conversations-layout");
-        conversationsLayout.remove(conversation);
-        this.__conversations = this.__conversations.filter(c => c !== conversation);
+        if (conversationsLayout.indexOf(conversationPage) > -1) {
+          conversationsLayout.remove(conversationPage);
+        }
+        this.__conversationsPages = this.__conversationsPages.filter(c => c !== conversationPage);
         const conversationPages = conversationsLayout.getSelectables();
         if (conversationPages.length) {
           if (changeSelection) {
@@ -272,9 +274,9 @@ qx.Class.define("osparc.study.Conversations", {
     // it can only be renamed, not updated
     __updateConversationName: function(conversationData) {
       const conversationId = conversationData["conversationId"];
-      const conversation = this.__getConversation(conversationId);
-      if (conversation) {
-        conversation.renameConversation(conversationData["name"]);
+      const conversationPage = this.__getConversationPage(conversationId);
+      if (conversationPage) {
+        conversationPage.renameConversation(conversationData["name"]);
       }
     },