File Picker with downloadLink UI/UX (#2194)

- File Picker's modified status is either null or false, never true.
- Dynamic service's modified status can only be true if there is an output.
- DownloadLink label extraction extended and initialization improved.

Author: odeimaiz

services/web/client/source/class/osparc/component/node/BaseNodeView.js

@@ -334,7 +334,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
 
     _addButtons: function() {
       this.__buttonContainer.removeAll();
-      if (this.getNode().isDynamic() && this.getNode().isRealService()) {
+      if (this.getNode().isDynamic()) {
         const retrieveBtn = new qx.ui.form.Button(this.tr("Retrieve"), "@FontAwesome5Solid/spinner/14");
         osparc.utils.Utils.setIdToWidget(retrieveBtn, "nodeViewRetrieveBtn");
         retrieveBtn.addListener("execute", e => {

services/web/client/source/class/osparc/component/widget/inputs/NodeOutputTreeItem.js

@@ -149,11 +149,12 @@ qx.Class.define("osparc.component.widget.inputs.NodeOutputTreeItem", {
             url: presignedLinkData.presignedLink.link
           });
         }
-      } else if (typeof value === "object" && "donwloadLink" in value) {
+      } else if (typeof value === "object" && "downloadLink" in value) {
         // it's a link
+        const filename = (value.filename && value.filename.length > 0) ? value.filename : osparc.file.FileDownloadLink.extractLabelFromLink(value["downloadLink"]);
         this.__labelLink.set({
-          value: value.filename,
-          url: value.donwloadLink
+          value: filename,
+          url: value.downloadLink
         });
       } else {
         this.__label.setValue(value);
@@ -180,7 +181,7 @@ qx.Class.define("osparc.component.widget.inputs.NodeOutputTreeItem", {
       if (value.getDownloadLink) {
         // it's a link
         return {
-          donwloadLink: value.getDownloadLink(),
+          downloadLink: value.getDownloadLink(),
           filename: value.getLabel()
         };
       }

services/web/client/source/class/osparc/data/model/Node.js

@@ -192,6 +192,11 @@ qx.Class.define("osparc.data.model.Node", {
   },
 
   statics: {
+
+    isFilePicker: function(metaData) {
+      return (metaData && metaData.key && metaData.key.includes("file-picker"));
+    },
+
     isContainer: function(metaData) {
       return (metaData && metaData.key && metaData.key.includes("nodes-group"));
     },
@@ -202,14 +207,6 @@ qx.Class.define("osparc.data.model.Node", {
 
     isComputational: function(metaData) {
       return (metaData && metaData.type && metaData.type === "computational");
-    },
-
-    isFilePicker: function(metaData) {
-      return (metaData && metaData.key && metaData.key.includes("file-picker"));
-    },
-
-    isRealService: function(metaData) {
-      return (metaData && metaData.type && (metaData.key.includes("simcore/services/dynamic") || metaData.key.includes("simcore/services/comp")));
     }
   },
 
@@ -241,6 +238,10 @@ qx.Class.define("osparc.data.model.Node", {
       return this.getKey().includes(str);
     },
 
+    isFilePicker: function() {
+      return osparc.data.model.Node.isFilePicker(this.getMetaData());
+    },
+
     isContainer: function() {
       return osparc.data.model.Node.isContainer(this.getMetaData());
     },
@@ -253,14 +254,6 @@ qx.Class.define("osparc.data.model.Node", {
       return osparc.data.model.Node.isComputational(this.getMetaData());
     },
 
-    isFilePicker: function() {
-      return osparc.data.model.Node.isFilePicker(this.getMetaData());
-    },
-
-    isRealService: function() {
-      return osparc.data.model.Node.isRealService(this.getMetaData());
-    },
-
     getMetaData: function() {
       return this.__metaData;
     },
@@ -384,11 +377,13 @@ qx.Class.define("osparc.data.model.Node", {
           this.getStatus().setDependencies(nodeData.state.dependencies);
         }
         if ("currentStatus" in nodeData.state && this.isComputational()) {
+          // currentStatus is only applicable to computational services
           this.getStatus().setRunning(nodeData.state.currentStatus);
         }
         if ("modified" in nodeData.state) {
           if (this.getStatus().getHasOutputs()) {
-            this.getStatus().setModified(nodeData.state.modified || this.getStatus().hasDependencies());
+            // File Picker can't have a modified output
+            this.getStatus().setModified((nodeData.state.modified || this.getStatus().hasDependencies()) && !this.isFilePicker());
           } else {
             this.getStatus().setModified(null);
           }
@@ -657,7 +652,7 @@ qx.Class.define("osparc.data.model.Node", {
         }
         this.getStatus().setHasOutputs(hasOutputs);
 
-        if (this.isFilePicker() || this.isDynamic()) {
+        if (hasOutputs && (this.isFilePicker() || this.isDynamic())) {
           this.getStatus().setModified(false);
         }
 
@@ -888,7 +883,7 @@ qx.Class.define("osparc.data.model.Node", {
     },
 
     retrieveInputs: function(portKey = null) {
-      if (this.isDynamic() && this.isRealService()) {
+      if (this.isDynamic()) {
         if (!osparc.data.Permissions.getInstance().canDo("study.update")) {
           return;
         }
@@ -947,7 +942,7 @@ qx.Class.define("osparc.data.model.Node", {
     },
 
     startDynamicService: function() {
-      if (this.isDynamic() && this.isRealService()) {
+      if (this.isDynamic()) {
         const metaData = this.getMetaData();
 
         const msg = "Starting " + metaData.key + ":" + metaData.version + "...";

services/web/client/source/class/osparc/file/FileDownloadLink.js

@@ -35,9 +35,10 @@ qx.Class.define("osparc.file.FileDownloadLink", {
     this.base(arguments);
 
     this._setLayout(new qx.ui.layout.HBox(5));
-    const downloadLinkField = this.__downloadLinkField = this._createChildControlImpl("downloadLink");
 
-    const selectButton = this._createChildControlImpl("selectButton");
+    const downloadLinkField = this.getChildControl("downloadLinkField");
+
+    const selectButton = this.getChildControl("selectButton");
     selectButton.addListener("execute", () => {
       const downloadLink = downloadLinkField.getValue();
       this.fireDataEvent("fileLinkAdded", downloadLink);
@@ -59,7 +60,13 @@ qx.Class.define("osparc.file.FileDownloadLink", {
         const parts = found[1].split("/");
         return parts[parts.length - 1];
       }
-      return "n/a";
+
+      const idx = downloadLink.lastIndexOf("/");
+      if (idx > -1) {
+        return downloadLink.substring(idx + 1);
+      }
+
+      return "unknown";
     },
 
     checkFileExists: function(urlToFile) {
@@ -79,12 +86,10 @@ qx.Class.define("osparc.file.FileDownloadLink", {
   },
 
   members: {
-    __downloadLinkField: null,
-
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
-        case "downloadLink":
+        case "downloadLinkField":
           control = new qx.ui.form.TextField().set({
             placeholder: this.tr("Type a Download Link")
           });
@@ -112,11 +117,11 @@ qx.Class.define("osparc.file.FileDownloadLink", {
     },
 
     getValue: function() {
-      return this.__downloadLinkField.getValue();
+      return this.getChildControl("downloadLinkField").getValue();
     },
 
     setValue: function(value) {
-      this.__downloadLinkField.setValue(value);
+      this.getChildControl("downloadLinkField").setValue(value);
     }
   }
 });

services/web/client/source/class/osparc/file/FilePicker.js

@@ -54,9 +54,16 @@ qx.Class.define("osparc.file.FilePicker", {
   },
 
   statics: {
-    getOutputLabel: function(outputs) {
+    getOutput: function(outputs) {
       if ("outFile" in outputs && "value" in outputs["outFile"]) {
-        const outFileValue = outputs["outFile"]["value"];
+        return outputs["outFile"]["value"];
+      }
+      return null;
+    },
+
+    getOutputLabel: function(outputs) {
+      const outFileValue = this.getOutput(outputs);
+      if (outFileValue) {
         if ("label" in outFileValue) {
           return outFileValue.label;
         }
@@ -71,10 +78,26 @@ qx.Class.define("osparc.file.FilePicker", {
       return null;
     },
 
+    isOutputFromStore: function(outputs) {
+      const outFileValue = this.getOutput(outputs);
+      return (typeof outFileValue === "object" && "path" in outFileValue);
+    },
+
+    isOutputDownloadLink: function(outputs) {
+      const outFileValue = this.getOutput(outputs);
+      return (typeof outFileValue === "object" && "downloadLink" in outFileValue);
+    },
+
+    extractLabelFromLink: function(outputs) {
+      const outFileValue = this.getOutput(outputs);
+      return osparc.file.FileDownloadLink.extractLabelFromLink(outFileValue["downloadLink"]);
+    },
+
     serializeOutput: function(outputs) {
       let output = {};
-      if ("outFile" in outputs && "value" in outputs["outFile"]) {
-        output["outFile"] = outputs["outFile"]["value"];
+      const outFileValue = this.self().getOutput(outputs);
+      if (outFileValue) {
+        output["outFile"] = outFileValue;
       }
       return output;
     },
@@ -196,12 +219,12 @@ qx.Class.define("osparc.file.FilePicker", {
     },
 
     init: function() {
-      if (this.__isOutputFileSelectedFromStore()) {
+      if (this.self().isOutputFromStore(this.getNode().getOutputs())) {
         const outFile = this.__getOutputFile();
         this.__filesTree.loadFilePath(outFile.value);
       }
 
-      if (this.__isOutputFileSelectedFromLink()) {
+      if (this.self().isOutputDownloadLink(this.getNode().getOutputs())) {
         const outFile = this.__getOutputFile();
         this.getChildControl("downloadLink").setValue(outFile.value["downloadLink"]);
       }
@@ -262,30 +285,8 @@ qx.Class.define("osparc.file.FilePicker", {
       }
     },
 
-    __isOutputFileSelectedFromStore: function() {
-      const outFile = this.__getOutputFile();
-      if (outFile &&
-        "value" in outFile &&
-        typeof outFile["value"] === "object" &&
-        "path" in outFile["value"]) {
-        return true;
-      }
-      return false;
-    },
-
-    __isOutputFileSelectedFromLink: function() {
-      const outFile = this.__getOutputFile();
-      if (outFile &&
-        "value" in outFile &&
-        typeof outFile["value"] === "object" &&
-        "downloadLink" in outFile.value) {
-        return true;
-      }
-      return false;
-    },
-
     __checkSelectedFileIsListed: function() {
-      if (this.__isOutputFileSelectedFromStore()) {
+      if (this.self().isOutputFromStore(this.getNode().getOutputs())) {
         const outFile = this.__getOutputFile();
         this.__filesTree.setSelectedFile(outFile.value.path);
         this.__filesTree.fireEvent("selectionChanged");

services/web/client/source/class/osparc/navigation/NavigationBar.js

@@ -267,7 +267,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       const context = ["workbench", "slideshow"].includes(this.getPageContext());
       if (areSlidesEnabled && context) {
         const study = this.getStudy();
-        if (Object.keys(study.getUi().getSlideshow()).length) {
+        if (study && Object.keys(study.getUi().getSlideshow()).length) {
           if (this.getPageContext() === "slideshow") {
             this.__startSlidesBtn.exclude();
             this.__stopSlidesBtn.show();

services/web/client/source/class/osparc/ui/basic/NodeStatusUI.js

@@ -142,27 +142,30 @@ qx.Class.define("osparc.ui.basic.NodeStatusUI", {
     },
 
     __setupFilepicker: function() {
-      const node = this.__node;
-      this.__node.getStatus().bind("progress", this.__icon, "source", {
-        converter: progress => {
-          if (progress === 100) {
+      this.__node.bind("outputs", this.__icon, "source", {
+        converter: outputs => {
+          if (osparc.file.FilePicker.getOutput(outputs)) {
             return "@FontAwesome5Solid/check/12";
           }
           return "@FontAwesome5Solid/file/12";
         },
         onUpdate: (source, target) => {
-          if (source.getProgress() === 100) {
+          if (osparc.file.FilePicker.getOutput(source.getOutputs())) {
             target.setTextColor("ready-green");
           } else {
             target.resetTextColor();
           }
         }
       });
 
-      this.__node.getStatus().bind("progress", this.__label, "value", {
-        converter: progress => {
-          if (progress === 100) {
-            return osparc.file.FilePicker.getOutputLabel(node.getOutputs());
+      this.__node.bind("outputs", this.__label, "value", {
+        converter: outputs => {
+          if (osparc.file.FilePicker.getOutput(outputs)) {
+            const outputLabel = osparc.file.FilePicker.getOutputLabel(outputs);
+            if (outputLabel === "" && osparc.file.FilePicker.isOutputDownloadLink(outputs)) {
+              return osparc.file.FilePicker.extractLabelFromLink(outputs);
+            }
+            return outputLabel;
           }
           return this.tr("Select a file");
         }