Skip to content

Commit 1dcd369

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Standalone (full screen) UI mode (#7138)
1 parent e970143 commit 1dcd369

File tree

19 files changed

+366
-239
lines changed

19 files changed

+366
-239
lines changed

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

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
352352
},
353353

354354
uiMode: {
355-
check: ["workbench", "guided", "app"],
355+
check: ["workbench", "guided", "app", "standalone"], // "guided" is no longer used
356356
nullable: true,
357357
apply: "__applyUiMode"
358358
},
@@ -582,21 +582,16 @@ qx.Class.define("osparc.dashboard.CardBase", {
582582
},
583583

584584
__applyUiMode: function(uiMode) {
585-
let source = null;
586-
let toolTipText = null;
587585
switch (uiMode) {
588586
case "guided":
589-
case "app":
590-
source = osparc.dashboard.CardBase.MODE_APP;
591-
toolTipText = this.tr("App mode");
587+
case "app": {
588+
const uiModeIcon = this.getChildControl("workbench-mode");
589+
uiModeIcon.set({
590+
source: osparc.dashboard.CardBase.MODE_APP,
591+
toolTipText: this.tr("App mode"),
592+
});
592593
break;
593-
}
594-
if (source) {
595-
const uiModeIcon = this.getChildControl("workbench-mode");
596-
uiModeIcon.set({
597-
source,
598-
toolTipText,
599-
});
594+
}
600595
}
601596
},
602597

@@ -882,6 +877,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
882877
if (duplicateButton) {
883878
duplicateButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));
884879
}
880+
const convertToPipelineButton = menuButtons.find(menuBtn => "convertToPipelineButton" in menuBtn);
881+
if (convertToPipelineButton) {
882+
convertToPipelineButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));
883+
}
885884
const exportCMISButton = menuButtons.find(menuBtn => "exportCMISButton" in menuBtn);
886885
if (exportCMISButton) {
887886
exportCMISButton.setEnabled(osparc.study.Utils.canBeExported(resourceData));

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
431431
if (
432432
osparc.utils.Resources.isService(resourceData) ||
433433
!osparc.product.Utils.showStudyPreview() ||
434-
osparc.data.model.Study.getUiMode(resourceData) === "app"
434+
!osparc.data.model.Study.getUiMode(resourceData) === "workbench"
435435
) {
436436
// there is no pipelining or don't show it
437437
return null;

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

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1119,17 +1119,17 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
11191119

11201120
studiesMoveButton.set({
11211121
visibility: selection.length && currentContext === "studiesAndFolders" ? "visible" : "excluded",
1122-
label: this.tr("Move") + (selection.length > 1 ? this.tr(" selected ") + `(${selection.length})` : ""),
1122+
label: this.tr("Move") + (selection.length > 1 ? ` (${selection.length})` : ""),
11231123
});
11241124

11251125
studiesTrashButton.set({
11261126
visibility: selection.length && currentContext === "studiesAndFolders" ? "visible" : "excluded",
1127-
label: this.tr("Move to Bin") + (selection.length > 1 ? this.tr(" selected ") + `(${selection.length})` : ""),
1127+
label: this.tr("Move to Bin") + (selection.length > 1 ? ` (${selection.length})` : ""),
11281128
});
11291129

11301130
studiesDeleteButton.set({
11311131
visibility: selection.length && currentContext === "trash" ? "visible" : "excluded",
1132-
label: this.tr("Delete permanently") + (selection.length > 1 ? this.tr(" selected ") + `(${selection.length})` : ""),
1132+
label: this.tr("Delete permanently") + (selection.length > 1 ? ` (${selection.length})` : ""),
11331133
});
11341134
});
11351135

@@ -1648,6 +1648,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
16481648
const duplicateStudyButton = this.__getDuplicateMenuButton(studyData);
16491649
menu.add(duplicateStudyButton);
16501650

1651+
const convertToPipelineButton = this.__getConvertToPipelineMenuButton(studyData);
1652+
menu.add(convertToPipelineButton);
1653+
16511654
if (osparc.product.Utils.isProduct("osparc")) {
16521655
const exportStudyButton = this.__getExportMenuButton(studyData);
16531656
menu.add(exportStudyButton);
@@ -1722,6 +1725,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
17221725
return renameButton;
17231726
},
17241727

1728+
__updateName: function(studyData, name) {
1729+
osparc.info.StudyUtils.patchStudyData(studyData, "name", name)
1730+
.then(() => this._updateStudyData(studyData))
1731+
.catch(err => {
1732+
console.error(err);
1733+
const msg = err.message || this.tr("Something went wrong Renaming");
1734+
osparc.FlashMessenger.logAs(msg, "ERROR");
1735+
});
1736+
},
1737+
17251738
__getThumbnailStudyMenuButton: function(studyData) {
17261739
const thumbButton = new qx.ui.menu.Button(this.tr("Thumbnail..."), "@FontAwesome5Solid/image/12");
17271740
thumbButton.addListener("execute", () => {
@@ -1743,16 +1756,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
17431756
return thumbButton;
17441757
},
17451758

1746-
__updateName: function(studyData, name) {
1747-
osparc.info.StudyUtils.patchStudyData(studyData, "name", name)
1748-
.then(() => this._updateStudyData(studyData))
1749-
.catch(err => {
1750-
console.error(err);
1751-
const msg = err.message || this.tr("Something went wrong Renaming");
1752-
osparc.FlashMessenger.logAs(msg, "ERROR");
1753-
});
1754-
},
1755-
17561759
__updateThumbnail: function(studyData, url) {
17571760
osparc.info.StudyUtils.patchStudyData(studyData, "thumbnail", url)
17581761
.then(() => this._updateStudyData(studyData))
@@ -1860,6 +1863,29 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
18601863
return duplicateButton;
18611864
},
18621865

1866+
__getConvertToPipelineMenuButton: function(studyData) {
1867+
const convertToPipelineButton = new qx.ui.menu.Button(this.tr("Convert to Pipeline"), null);
1868+
convertToPipelineButton["convertToPipelineButton"] = true;
1869+
const uiMode = osparc.data.model.Study.getUiMode(studyData);
1870+
convertToPipelineButton.setVisibility(uiMode === "standalone" ? "visible" : "excluded");
1871+
convertToPipelineButton.addListener("execute", () => {
1872+
this.__updateUIMode(studyData, "workbench")
1873+
.catch(err => {
1874+
console.error(err);
1875+
const msg = err.message || this.tr("Something went wrong Converting to Pipeline");
1876+
osparc.FlashMessenger.logAs(msg, "ERROR");
1877+
});
1878+
}, this);
1879+
return convertToPipelineButton;
1880+
},
1881+
1882+
__updateUIMode: function(studyData, uiMode) {
1883+
const studyUI = osparc.utils.Utils.deepCloneObject(studyData["ui"]);
1884+
studyUI["mode"] = uiMode;
1885+
return osparc.info.StudyUtils.patchStudyData(studyData, "ui", studyUI)
1886+
.then(() => this._updateStudyData(studyData))
1887+
},
1888+
18631889
__getExportMenuButton: function(studyData) {
18641890
const exportButton = new qx.ui.menu.Button(this.tr("Export cMIS"), "@FontAwesome5Solid/cloud-download-alt/12");
18651891
exportButton["exportCMISButton"] = true;

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -94,18 +94,27 @@ qx.Class.define("osparc.data.model.IframeHandler", {
9494
osparc.utils.Utils.setIdToWidget(iframe.getIframe(), "iframe_"+this.getNode().getNodeId());
9595
if (osparc.product.Utils.isProduct("s4llite")) {
9696
iframe.setShowToolbar(false);
97+
} else {
98+
this.getStudy().getUi().bind("mode", iframe, "showToolbar", {
99+
converter: mode => mode !== "standalone"
100+
});
97101
}
98-
iframe.addListener("restart", () => this.__restartIFrame(), this);
102+
iframe.addListener("restart", () => this.restartIFrame(), this);
99103
iframe.getDiskUsageIndicator().setCurrentNode(this.getNode())
100104
this.setIFrame(iframe);
101105
},
102106

103107
__initLoadingPage: function() {
104-
const showZoomMaximizeButton = !osparc.product.Utils.isProduct("s4llite");
105-
const loadingPage = new osparc.ui.message.Loading(showZoomMaximizeButton);
106-
loadingPage.set({
108+
const loadingPage = new osparc.ui.message.Loading().set({
107109
header: this.__getLoadingPageHeader()
108110
});
111+
if (osparc.product.Utils.isProduct("s4llite")) {
112+
loadingPage.setShowToolbar(false);
113+
} else {
114+
this.getStudy().getUi().bind("mode", loadingPage, "showToolbar", {
115+
converter: mode => mode !== "standalone"
116+
});
117+
}
109118

110119
const node = this.getNode();
111120
const thumbnail = node.getMetaData()["thumbnail"];
@@ -115,7 +124,9 @@ qx.Class.define("osparc.data.model.IframeHandler", {
115124
node.addListener("changeLabel", () => loadingPage.setHeader(this.__getLoadingPageHeader()), this);
116125

117126
const nodeStatus = node.getStatus();
118-
const sequenceWidget = nodeStatus.getProgressSequence().getWidgetForLoadingPage();
127+
const sequenceWidget = nodeStatus.getProgressSequence().getWidgetForLoadingPage().set({
128+
width: 400
129+
});
119130
nodeStatus.bind("interactive", sequenceWidget, "visibility", {
120131
converter: state => ["pending", "pulling", "starting", "connecting"].includes(state) ? "visible" : "excluded"
121132
});
@@ -352,7 +363,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
352363
node.fireDataEvent("showInLogger", msgData);
353364

354365
// will switch to iframe's content
355-
this.__restartIFrame();
366+
this.restartIFrame();
356367
if (!node.isDynamicV2()) {
357368
node.callRetrieveInputs();
358369
}
@@ -374,7 +385,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
374385
}
375386
},
376387

377-
__restartIFrame: function() {
388+
restartIFrame: function() {
378389
const node = this.getNode();
379390
if (node.getServiceUrl() !== null) {
380391
// restart button pushed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -637,6 +637,19 @@ qx.Class.define("osparc.data.model.Study", {
637637
return parameters;
638638
},
639639

640+
getNonFrontendNodes: function() {
641+
const nodes = this.getWorkbench().getNodes();
642+
return Object.values(nodes).filter(node => node.isComputational() || node.isDynamic());
643+
},
644+
645+
isOnlyNodeDynamic: function() {
646+
const validNodes = this.getNonFrontendNodes();
647+
if (validNodes.length === 1) {
648+
return validNodes[0].isDynamic();
649+
}
650+
return null;
651+
},
652+
640653
hasSlideshow: function() {
641654
return !this.getUi().getSlideshow().isEmpty();
642655
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ qx.Class.define("osparc.data.model.StudyUI", {
6363
},
6464

6565
mode: {
66-
check: ["workbench", "guided", "app"],
66+
check: ["workbench", "guided", "app", "standalone"], // "guided" is no longer used
6767
init: "workbench",
6868
nullable: true,
6969
event: "changeMode",

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
7272
const nodeId = e.getData();
7373
this.__hideNode(nodeId);
7474
}, this);
75-
slideshowToolbar.addListener("slidesStop", () => this.fireEvent("slidesStop"), this);
75+
slideshowToolbar.addListener("slidesStop", () => this.getStudy().getUi().setMode("workbench"), this);
7676
this._add(slideshowToolbar);
7777

7878
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", {
109109
},
110110

111111
events: {
112-
"slidesStop": "qx.event.type.Event",
113112
"startPartialPipeline": "qx.event.type.Data",
114113
"stopPipeline": "qx.event.type.Event",
115114
"backToDashboardPressed": "qx.event.type.Event",
@@ -131,12 +130,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
131130
apply: "__applyMaximized",
132131
event: "changeMaximized"
133132
},
134-
135-
pageContext: {
136-
check: ["guided", "app"],
137-
nullable: false,
138-
init: "guided"
139-
}
140133
},
141134

142135
statics: {
@@ -270,9 +263,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
270263
view = new osparc.node.slideshow.NodeView();
271264
}
272265
view.setNode(node);
273-
if (node.isDynamic()) {
274-
view.getSettingsLayout().setVisibility(this.getPageContext() === "app" ? "excluded" : "visible");
275-
}
276266
}
277267
this.__connectMaximizeEvents(node);
278268
this.__styleView(node, view);
@@ -377,7 +367,6 @@ qx.Class.define("osparc.desktop.SlideshowView", {
377367
});
378368
}
379369
}
380-
this.setPageContext("app");
381370
this.__slideshowToolbar.populateButtons(true);
382371
const currentNodeId = this.getStudy().getUi().getCurrentNodeId();
383372
const isValid = slideshow.getPosition(currentNodeId) !== -1;

0 commit comments

Comments
 (0)