Do not remove all

Author: odeimaiz

services/static-webserver/client/source/class/osparc/widget/NodeOutputs.js

@@ -40,6 +40,7 @@ qx.Class.define("osparc.widget.NodeOutputs", {
     grid.setColumnFlex(this.self().POS.LABEL, 1);
     grid.setColumnFlex(this.self().POS.VALUE, 1);
     grid.setColumnMinWidth(this.self().POS.VALUE, 50);
+    grid.setColumnMaxWidth(this.self().POS.RETRIEVE_STATUS, 25);
     Object.keys(this.self().POS).forEach((_, idx) => grid.setColumnAlign(idx, "left", "middle"));
     const gridLayout = this.__gridLayout = new qx.ui.container.Composite(grid);
     this._add(gridLayout);
@@ -49,7 +50,7 @@ qx.Class.define("osparc.widget.NodeOutputs", {
       ports
     });
 
-    node.addListener("changeOutputs", () => this.__populateGrid(), this);
+    node.addListener("changeOutputs", () => this.__outputsChanged(), this);
 
     this.addListener("appear", () => this.__makeLabelsResponsive(), this);
     this.addListener("resize", () => this.__makeLabelsResponsive(), this);
@@ -95,7 +96,6 @@ qx.Class.define("osparc.widget.NodeOutputs", {
     __populateGrid: function() {
       this.__gridLayout.removeAll();
 
-      const outputs = this.getNode().getOutputs();
       const ports = this.getPorts();
       const portKeys = Object.keys(ports);
       for (let i=0; i<portKeys.length; i++) {
@@ -129,8 +129,6 @@ qx.Class.define("osparc.widget.NodeOutputs", {
           column: this.self().POS.ICON
         });
 
-        const value = (portKey in outputs && "value" in outputs[portKey]) ? outputs[portKey]["value"] : null;
-        this.__valueToGrid(value, i);
 
         const unit = new qx.ui.basic.Label(port.unitShort || "");
         this.__gridLayout.add(unit, {
@@ -160,44 +158,56 @@ qx.Class.define("osparc.widget.NodeOutputs", {
       }
     },
 
-    __valueToGrid: function(value, i) {
+    __outputsChanged: function() {
+      const outputs = this.getNode().getOutputs();
+      const ports = this.getPorts();
+      const portKeys = Object.keys(ports);
+      for (let i=0; i<portKeys.length; i++) {
+        const portKey = portKeys[i];
+        const value = (portKey in outputs && "value" in outputs[portKey]) ? outputs[portKey]["value"] : null;
+        this.__valueToGrid(value, i);
+      }
+    },
+
+    __valueToGrid: function(value, row) {
+      let valueWidget = null;
       if (value && typeof value === "object") {
-        const valueLink = new osparc.ui.basic.LinkLabel();
-        this.__gridLayout.add(valueLink, {
-          row: i,
-          column: this.self().POS.VALUE
-        });
+        valueWidget = new osparc.ui.basic.LinkLabel();
         if ("store" in value) {
           // it's a file
           const download = true;
           const locationId = value.store;
           const fileId = value.path;
           const filename = value.filename || osparc.file.FilePicker.getFilenameFromPath(value);
-          valueLink.setValue(filename);
+          valueWidget.setValue(filename);
           osparc.store.Data.getInstance().getPresignedLink(download, locationId, fileId)
             .then(presignedLinkData => {
               if ("resp" in presignedLinkData && presignedLinkData.resp) {
-                valueLink.setUrl(presignedLinkData.resp.link);
+                valueWidget.setUrl(presignedLinkData.resp.link);
               }
             });
         } else if ("downloadLink" in value) {
           // it's a link
           const filename = (value.filename && value.filename.length > 0) ? value.filename : osparc.file.FileDownloadLink.extractLabelFromLink(value["downloadLink"]);
-          valueLink.set({
+          valueWidget.set({
             value: filename,
             url: value.downloadLink
           });
         }
       } else {
-        const valueEntry = new qx.ui.basic.Label("-");
+        valueWidget = new qx.ui.basic.Label("-");
         if (value) {
-          valueEntry.setValue(String(value));
+          valueWidget.setValue(String(value));
         }
-        this.__gridLayout.add(valueEntry, {
-          row: i,
-          column: this.self().POS.VALUE
-        });
       }
+
+      // remove first if any
+      this.__removeEntry(row, this.self().POS.VALUE);
+
+      this.__gridLayout.add(valueWidget, {
+        row: row,
+        column: this.self().POS.VALUE
+      });
     },
 
     __makeLabelsResponsive: function() {
@@ -226,27 +236,32 @@ qx.Class.define("osparc.widget.NodeOutputs", {
       }
     },
 
-    setRetrievingStatus: function(portId, status) {
-      const ports = this.getPorts();
-      const portKeys = Object.keys(ports);
-      const idx = portKeys.indexOf(portId);
-      if (idx === -1) {
-        return;
-      }
-
-      // remove first if any
+    __removeEntry: function(row, column) {
       let children = this.__gridLayout.getChildren();
       for (let i=0; i<children.length; i++) {
         let child = children[i];
         const layoutProps = child.getLayoutProperties();
         if (
-          layoutProps.row === idx &&
-          layoutProps.column === this.self().POS.RETRIEVE_STATUS
+          layoutProps.row === row &&
+          layoutProps.column === column
         ) {
           this.__gridLayout.remove(child);
           break;
         }
       }
+    },
+
+    setRetrievingStatus: function(portId, status) {
+      const ports = this.getPorts();
+      const portKeys = Object.keys(ports);
+      const idx = portKeys.indexOf(portId);
+      if (idx === -1) {
+        return;
+      }
+
+      // remove first if any
+      this.__removeEntry(idx, this.self().POS.RETRIEVE_STATUS);
+
       const icon = osparc.form.renderer.PropForm.getIconForStatus(status);
       this.__gridLayout.add(icon, {
         row: idx,