🎨 [Frontend] Standalone (full screen) UI mode

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js

@@ -352,7 +352,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     uiMode: {
-      check: ["workbench", "guided", "app"],
+      check: ["workbench", "guided", "app", "standalone"], // "guided" is no longer used
       nullable: true,
       apply: "__applyUiMode"
     },
@@ -582,21 +582,16 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     __applyUiMode: function(uiMode) {
-      let source = null;
-      let toolTipText = null;
       switch (uiMode) {
         case "guided":
-        case "app":
-          source = osparc.dashboard.CardBase.MODE_APP;
-          toolTipText = this.tr("App mode");
+        case "app": {
+          const uiModeIcon = this.getChildControl("workbench-mode");
+          uiModeIcon.set({
+            source: osparc.dashboard.CardBase.MODE_APP,
+            toolTipText: this.tr("App mode"),
+          });
           break;
-      }
-      if (source) {
-        const uiModeIcon = this.getChildControl("workbench-mode");
-        uiModeIcon.set({
-          source,
-          toolTipText,
-        });
+        }
       }
     },
 
@@ -882,6 +877,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
         if (duplicateButton) {
           duplicateButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));
         }
+        const convertToPipelineButton = menuButtons.find(menuBtn => "convertToPipelineButton" in menuBtn);
+        if (convertToPipelineButton) {
+          convertToPipelineButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));
+        }
         const exportCMISButton = menuButtons.find(menuBtn => "exportCMISButton" in menuBtn);
         if (exportCMISButton) {
           exportCMISButton.setEnabled(osparc.study.Utils.canBeExported(resourceData));

services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js

@@ -431,7 +431,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       if (
         osparc.utils.Resources.isService(resourceData) ||
         !osparc.product.Utils.showStudyPreview() ||
-        osparc.data.model.Study.getUiMode(resourceData) === "app"
+        !osparc.data.model.Study.getUiMode(resourceData) === "workbench"
       ) {
         // there is no pipelining or don't show it
         return null;

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -1119,17 +1119,17 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
         studiesMoveButton.set({
           visibility: selection.length && currentContext === "studiesAndFolders" ? "visible" : "excluded",
-          label: this.tr("Move") + (selection.length > 1 ? this.tr(" selected ") + `(${selection.length})` : ""),
+          label: this.tr("Move") + (selection.length > 1 ? ` (${selection.length})` : ""),
         });
 
         studiesTrashButton.set({
           visibility: selection.length && currentContext === "studiesAndFolders" ? "visible" : "excluded",
-          label: this.tr("Move to Bin") + (selection.length > 1 ? this.tr(" selected ") + `(${selection.length})` : ""),
+          label: this.tr("Move to Bin") + (selection.length > 1 ? ` (${selection.length})` : ""),
         });
 
         studiesDeleteButton.set({
           visibility: selection.length && currentContext === "trash" ? "visible" : "excluded",
-          label: this.tr("Delete permanently") + (selection.length > 1 ? this.tr(" selected ") + `(${selection.length})` : ""),
+          label: this.tr("Delete permanently") + (selection.length > 1 ? ` (${selection.length})` : ""),
         });
       });
 
@@ -1648,6 +1648,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       const duplicateStudyButton = this.__getDuplicateMenuButton(studyData);
       menu.add(duplicateStudyButton);
 
+      const convertToPipelineButton = this.__getConvertToPipelineMenuButton(studyData);
+      menu.add(convertToPipelineButton);
+
       if (osparc.product.Utils.isProduct("osparc")) {
         const exportStudyButton = this.__getExportMenuButton(studyData);
         menu.add(exportStudyButton);
@@ -1722,6 +1725,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return renameButton;
     },
 
+    __updateName: function(studyData, name) {
+      osparc.info.StudyUtils.patchStudyData(studyData, "name", name)
+        .then(() => this._updateStudyData(studyData))
+        .catch(err => {
+          console.error(err);
+          const msg = err.message || this.tr("Something went wrong Renaming");
+          osparc.FlashMessenger.logAs(msg, "ERROR");
+        });
+    },
+
     __getThumbnailStudyMenuButton: function(studyData) {
       const thumbButton = new qx.ui.menu.Button(this.tr("Thumbnail..."), "@FontAwesome5Solid/image/12");
       thumbButton.addListener("execute", () => {
@@ -1743,16 +1756,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return thumbButton;
     },
 
-    __updateName: function(studyData, name) {
-      osparc.info.StudyUtils.patchStudyData(studyData, "name", name)
-        .then(() => this._updateStudyData(studyData))
-        .catch(err => {
-          console.error(err);
-          const msg = err.message || this.tr("Something went wrong Renaming");
-          osparc.FlashMessenger.logAs(msg, "ERROR");
-        });
-    },
-
     __updateThumbnail: function(studyData, url) {
       osparc.info.StudyUtils.patchStudyData(studyData, "thumbnail", url)
         .then(() => this._updateStudyData(studyData))
@@ -1860,6 +1863,29 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return duplicateButton;
     },
 
+    __getConvertToPipelineMenuButton: function(studyData) {
+      const convertToPipelineButton = new qx.ui.menu.Button(this.tr("Convert to Pipeline"), null);
+      convertToPipelineButton["convertToPipelineButton"] = true;
+      const uiMode = osparc.data.model.Study.getUiMode(studyData);
+      convertToPipelineButton.setVisibility(uiMode === "standalone" ? "visible" : "excluded");
+      convertToPipelineButton.addListener("execute", () => {
+        this.__updateUIMode(studyData, "workbench")
+          .catch(err => {
+            console.error(err);
+            const msg = err.message || this.tr("Something went wrong Converting to Pipeline");
+            osparc.FlashMessenger.logAs(msg, "ERROR");
+          });
+      }, this);
+      return convertToPipelineButton;
+    },
+
+    __updateUIMode: function(studyData, uiMode) {
+      const studyUI = osparc.utils.Utils.deepCloneObject(studyData["ui"]);
+      studyUI["mode"] = uiMode;
+      return osparc.info.StudyUtils.patchStudyData(studyData, "ui", studyUI)
+        .then(() => this._updateStudyData(studyData))
+    },
+
     __getExportMenuButton: function(studyData) {
       const exportButton = new qx.ui.menu.Button(this.tr("Export cMIS"), "@FontAwesome5Solid/cloud-download-alt/12");
       exportButton["exportCMISButton"] = true;

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

@@ -94,18 +94,27 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       osparc.utils.Utils.setIdToWidget(iframe.getIframe(), "iframe_"+this.getNode().getNodeId());
       if (osparc.product.Utils.isProduct("s4llite")) {
         iframe.setShowToolbar(false);
+      } else {
+        this.getStudy().getUi().bind("mode", iframe, "showToolbar", {
+          converter: mode => mode !== "standalone"
+        });
       }
-      iframe.addListener("restart", () => this.__restartIFrame(), this);
+      iframe.addListener("restart", () => this.restartIFrame(), this);
       iframe.getDiskUsageIndicator().setCurrentNode(this.getNode())
       this.setIFrame(iframe);
     },
 
     __initLoadingPage: function() {
-      const showZoomMaximizeButton = !osparc.product.Utils.isProduct("s4llite");
-      const loadingPage = new osparc.ui.message.Loading(showZoomMaximizeButton);
-      loadingPage.set({
+      const loadingPage = new osparc.ui.message.Loading().set({
         header: this.__getLoadingPageHeader()
       });
+      if (osparc.product.Utils.isProduct("s4llite")) {
+        loadingPage.setShowToolbar(false);
+      } else {
+        this.getStudy().getUi().bind("mode", loadingPage, "showToolbar", {
+          converter: mode => mode !== "standalone"
+        });
+      }
 
       const node = this.getNode();
       const thumbnail = node.getMetaData()["thumbnail"];
@@ -115,7 +124,9 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       node.addListener("changeLabel", () => loadingPage.setHeader(this.__getLoadingPageHeader()), this);
 
       const nodeStatus = node.getStatus();
-      const sequenceWidget = nodeStatus.getProgressSequence().getWidgetForLoadingPage();
+      const sequenceWidget = nodeStatus.getProgressSequence().getWidgetForLoadingPage().set({
+        width: 400
+      });
       nodeStatus.bind("interactive", sequenceWidget, "visibility", {
         converter: state => ["pending", "pulling", "starting", "connecting"].includes(state) ? "visible" : "excluded"
       });
@@ -352,7 +363,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
         node.fireDataEvent("showInLogger", msgData);
 
         // will switch to iframe's content
-        this.__restartIFrame();
+        this.restartIFrame();
         if (!node.isDynamicV2()) {
           node.callRetrieveInputs();
         }
@@ -374,7 +385,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       }
     },
 
-    __restartIFrame: function() {
+    restartIFrame: function() {
       const node = this.getNode();
       if (node.getServiceUrl() !== null) {
         // restart button pushed

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

@@ -637,6 +637,19 @@ qx.Class.define("osparc.data.model.Study", {
       return parameters;
     },
 
+    getNonFrontendNodes: function() {
+      const nodes = this.getWorkbench().getNodes();
+      return Object.values(nodes).filter(node => node.isComputational() || node.isDynamic());
+    },
+
+    isOnlyNodeDynamic: function() {
+      const validNodes = this.getNonFrontendNodes();
+      if (validNodes.length === 1) {
+        return validNodes[0].isDynamic();
+      }
+      return null;
+    },
+
     hasSlideshow: function() {
       return !this.getUi().getSlideshow().isEmpty();
     },

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

@@ -63,7 +63,7 @@ qx.Class.define("osparc.data.model.StudyUI", {
     },
 
     mode: {
-      check: ["workbench", "guided", "app"],
+      check: ["workbench", "guided", "app", "standalone"], // "guided" is no longer used
       init: "workbench",
       nullable: true,
       event: "changeMode",

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

@@ -72,7 +72,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
       const nodeId = e.getData();
       this.__hideNode(nodeId);
     }, this);
-    slideshowToolbar.addListener("slidesStop", () => this.fireEvent("slidesStop"), this);
+    slideshowToolbar.addListener("slidesStop", () => this.getStudy().getUi().setMode("workbench"), this);
     this._add(slideshowToolbar);
 
     const mainView = this.__mainView = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
@@ -109,7 +109,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
   },
 
   events: {
-    "slidesStop": "qx.event.type.Event",
     "startPartialPipeline": "qx.event.type.Data",
     "stopPipeline": "qx.event.type.Event",
     "backToDashboardPressed": "qx.event.type.Event",
@@ -131,12 +130,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
       apply: "__applyMaximized",
       event: "changeMaximized"
     },
-
-    pageContext: {
-      check: ["guided", "app"],
-      nullable: false,
-      init: "guided"
-    }
   },
 
   statics: {
@@ -270,9 +263,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
           view = new osparc.node.slideshow.NodeView();
         }
         view.setNode(node);
-        if (node.isDynamic()) {
-          view.getSettingsLayout().setVisibility(this.getPageContext() === "app" ? "excluded" : "visible");
-        }
       }
       this.__connectMaximizeEvents(node);
       this.__styleView(node, view);
@@ -377,7 +367,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
           });
         }
       }
-      this.setPageContext("app");
       this.__slideshowToolbar.populateButtons(true);
       const currentNodeId = this.getStudy().getUi().getCurrentNodeId();
       const isValid = slideshow.getPosition(currentNodeId) !== -1;