✨ [Frontend] Listen to the stateInputPorts and stateOutputPorts websocket events

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

@@ -136,7 +136,8 @@ qx.Class.define("osparc.data.model.Node", {
     outputs: {
       check: "Object",
       nullable: false,
-      event: "changeOutputs"
+      event: "changeOutputs",
+      apply: "__applyOutputs",
     },
 
     status: {
@@ -166,6 +167,12 @@ qx.Class.define("osparc.data.model.Node", {
       apply: "__applyPropsForm"
     },
 
+    outputsForm: {
+      check: "osparc.widget.NodeOutputs",
+      init: null,
+      nullable: true
+    },
+
     marker: {
       check: "qx.core.Object",
       init: null,
@@ -612,6 +619,13 @@ qx.Class.define("osparc.data.model.Node", {
       }, this);
     },
 
+    __applyOutputs: function() {
+      if (!this.isPropertyInitialized("outputsForm") || !this.getOutputsForm()) {
+        const nodeOutputs = new osparc.widget.NodeOutputs(this);
+        this.setOutputsForm(nodeOutputs);
+      }
+    },
+
     removeNodePortConnections: function(inputNodeId) {
       let inputs = this.__getInputData();
       for (const portId in inputs) {

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

@@ -288,6 +288,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       this.__listenToNoMoreCreditsEvents();
       this.__listenToEvent();
       this.__listenToServiceStatus();
+      this.__listenToStateInputPorts();
     },
 
     __listenToLogger: function() {
@@ -435,6 +436,85 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       }
     },
 
+    __listenToStateInputPorts: function() {
+      const socket = osparc.wrapper.WebSocket.getInstance();
+      if (!socket.slotExists("stateInputPorts")) {
+        socket.on("stateInputPorts", data => {
+          this.__statePortReceived(data, "stateInputPorts");
+        }, this);
+      }
+      if (!socket.slotExists("stateOutputPorts")) {
+        socket.on("stateOutputPorts", data => {
+          this.__statePortReceived(data, "stateOutputPorts");
+        }, this);
+      }
+    },
+
+    __statePortReceived: function(socketData, msgName) {
+      const studyId = socketData["project_id"];
+      if (this.getStudy().getUuid() !== studyId) {
+        return;
+      }
+
+      const nodeId = socketData["node_id"];
+      const workbench = this.getStudy().getWorkbench();
+      const node = workbench.getNode(nodeId);
+      if (!node) {
+        if (osparc.data.Permissions.getInstance().isTester()) {
+          console.log("Ignored ws 'stateInputPorts' msg", socketData);
+        }
+        return;
+      }
+
+      const propsForm = node.getPropsForm();
+      if (msgName === "stateInputPorts" && propsForm) {
+        const portId = socketData["port_key"];
+        const status = socketData["status"];
+        switch (status) {
+          case "DOWNLOAD_STARTED":
+            propsForm.retrievingPortData(
+              portId,
+              osparc.form.renderer.PropForm.RETRIEVE_STATUS.downloading
+            );
+            break;
+          case "DOWNLOAD_FINISHED_SUCCESSFULLY":
+            propsForm.retrievedPortData(portId, true);
+            break;
+          case "DOWNLOAD_WAS_ABORTED":
+          case "DOWNLOAD_FINISHED_WITH_ERROR":
+            propsForm.retrievedPortData(portId, false);
+            break;
+        }
+      }
+
+      const outputsForm = node.getOutputsForm();
+      if (msgName === "stateOutputPorts" && outputsForm) {
+        const portId = socketData["port_key"];
+        const status = socketData["status"];
+        switch (status) {
+          case "UPLOAD_STARTED":
+            outputsForm.setRetrievingStatus(
+              portId,
+              osparc.form.renderer.PropForm.RETRIEVE_STATUS.uploading
+            );
+            break;
+          case "UPLOAD_FINISHED_SUCCESSFULLY":
+            outputsForm.setRetrievingStatus(
+              portId,
+              osparc.form.renderer.PropForm.RETRIEVE_STATUS.succeed
+            );
+            break;
+          case "UPLOAD_WAS_ABORTED":
+          case "UPLOAD_FINISHED_WITH_ERROR":
+            outputsForm.setRetrievingStatus(
+              portId,
+              osparc.form.renderer.PropForm.RETRIEVE_STATUS.failed
+            );
+            break;
+        }
+      }
+    },
+
     __reloadSnapshotsAndIterations: function() {
       const isVCDisabled = osparc.utils.DisabledPlugins.isVersionControlDisabled();
       if (!isVCDisabled) {

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

@@ -1032,11 +1032,12 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
 
       // OUTPUTS
       const outputsBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(spacing));
-      if (node.hasOutputs()) {
-        const nodeOutputs = new osparc.widget.NodeOutputs(node, node.getMetaData().outputs).set({
+      const outputsForm = node.getOutputsForm();
+      if (node.hasOutputs() && outputsForm) {
+        outputsForm.set({
           offerProbes: true
         });
-        outputsBox.add(nodeOutputs);
+        outputsBox.add(outputsForm);
       }
 
       const nodeFilesBtn = new qx.ui.form.Button(this.tr("Service data"), "@FontAwesome5Solid/folder-open/14").set({

services/static-webserver/client/source/class/osparc/form/renderer/PropForm.js

@@ -56,14 +56,24 @@ qx.Class.define("osparc.form.renderer.PropForm", {
       return new qx.ui.basic.Atom("", "osparc/loading.gif");
     },
 
-    getRetrievedAtom: function(success) {
-      const icon = success ? "@FontAwesome5Solid/check/12" : "@FontAwesome5Solid/times/12";
-      return new qx.ui.basic.Atom("", icon);
+    getDownloadingAtom: function() {
+      return new qx.ui.basic.Atom("", "@FontAwesome5Solid/cloud-download-alt/12");
+    },
+
+    getUploadingAtom: function() {
+      return new qx.ui.basic.Atom("", "@FontAwesome5Solid/cloud-upload-alt/12");
+    },
+
+    getFailedAtom: function() {
+      return new qx.ui.basic.Atom("", "@FontAwesome5Solid/times/12");
+    },
+
+    getSucceededAtom: function() {
+      return new qx.ui.basic.Atom("", "@FontAwesome5Solid/check/12");
     },
 
     getRetrievedEmpty: function() {
-      const icon = "@FontAwesome5Solid/dot-circle/10";
-      return new qx.ui.basic.Atom("", icon);
+      return new qx.ui.basic.Atom("", "@FontAwesome5Solid/dot-circle/10");
     },
 
     GRID_POS: {
@@ -78,18 +88,44 @@ qx.Class.define("osparc.form.renderer.PropForm", {
         supportedTypes.push(osparc.node.ParameterEditor.getParameterOutputTypeFromMD(paramMD));
       });
       return supportedTypes.includes(field.type);
-    }
-  },
+    },
 
-  // eslint-disable-next-line qx-rules/no-refs-in-members
-  members: {
-    _retrieveStatus: {
+    RETRIEVE_STATUS: {
       failed: -1,
       empty: 0,
       retrieving: 1,
-      succeed: 2
+      downloading: 2,
+      uploading: 3,
+      succeed: 4
     },
 
+    getIconForStatus: function(status) {
+      let icon;
+      switch (status) {
+        case this.RETRIEVE_STATUS.failed:
+          icon = this.getFailedAtom();
+          break;
+        case this.RETRIEVE_STATUS.empty:
+          icon = this.getRetrievedEmpty();
+          break;
+        case this.RETRIEVE_STATUS.retrieving:
+          icon = this.getRetrievingAtom();
+          break;
+        case this.RETRIEVE_STATUS.downloading:
+          icon = this.getDownloadingAtom();
+          break;
+        case this.RETRIEVE_STATUS.uploading:
+          icon = this.getUploadingAtom();
+          break;
+        case this.RETRIEVE_STATUS.succeed:
+          icon = this.getSucceededAtom();
+          break;
+      }
+      return icon;
+    }
+  },
+
+  members: {
     __ctrlLinkMap: null,
     __linkUnlinkStackMap: null,
     __fieldOptsBtnMap: null,
@@ -528,8 +564,10 @@ qx.Class.define("osparc.form.renderer.PropForm", {
       }
     },
 
-    retrievingPortData: function(portId) {
-      const status = this._retrieveStatus.retrieving;
+    retrievingPortData: function(portId, status) {
+      if (status === undefined) {
+        status = this.self().RETRIEVE_STATUS.retrieving;
+      }
       if (portId) {
         let data = this._getCtrlFieldChild(portId);
         if (data) {
@@ -553,9 +591,9 @@ qx.Class.define("osparc.form.renderer.PropForm", {
     },
 
     retrievedPortData: function(portId, succeed, dataSize = -1) {
-      let status = succeed ? this._retrieveStatus.succeed : this._retrieveStatus.failed;
+      let status = succeed ? this.self().RETRIEVE_STATUS.succeed : this.self().RETRIEVE_STATUS.failed;
       if (parseInt(dataSize) === 0) {
-        status = this._retrieveStatus.empty;
+        status = this.self().RETRIEVE_STATUS.empty;
       }
       if (portId) {
         let data = this._getCtrlFieldChild(portId);
@@ -578,23 +616,6 @@ qx.Class.define("osparc.form.renderer.PropForm", {
     },
 
     __setRetrievingStatus: function(status, portId, idx, row) {
-      let icon;
-      switch (status) {
-        case this._retrieveStatus.failed:
-          icon = this.self().getRetrievedAtom(false);
-          break;
-        case this._retrieveStatus.empty:
-          icon = this.self().getRetrievedEmpty();
-          break;
-        case this._retrieveStatus.retrieving:
-          icon = this.self().getRetrievingAtom();
-          break;
-        case this._retrieveStatus.succeed:
-          icon = this.self().getRetrievedAtom(true);
-          break;
-      }
-      icon.key = portId;
-
       // remove first if any
       let children = this._getChildren();
       for (let i=0; i<children.length; i++) {
@@ -608,7 +629,8 @@ qx.Class.define("osparc.form.renderer.PropForm", {
 
       const label = this._getLabelFieldChild(portId).child;
       if (label && label.isVisible()) {
-        this._getLabelFieldChild(portId);
+        const icon = this.self().getIconForStatus(status);
+        icon.key = portId;
         this._addAt(icon, idx, {
           row,
           column: this.self().GRID_POS.RETRIEVE_STATUS

services/static-webserver/client/source/class/osparc/node/slideshow/NodeView.js

@@ -92,9 +92,12 @@ qx.Class.define("osparc.node.slideshow.NodeView", {
     _addOutputs: function() {
       this._outputsLayout.removeAll();
 
-      const nodeOutputs = new osparc.widget.NodeOutputs(this.getNode(), this.getNode().getMetaData().outputs);
-      this._mainView.bind("backgroundColor", nodeOutputs, "backgroundColor");
-      this._outputsLayout.add(nodeOutputs);
+      const node = this.getNode();
+      const outputsForm = node.getOutputsForm();
+      if (node.hasOutputs() && outputsForm) {
+        this._mainView.bind("backgroundColor", outputsForm, "backgroundColor");
+        this._outputsLayout.add(outputsForm);
+      }
 
       this._outputsBtn.set({
         value: false,