Skip to content

Commit bb0788f

Browse files
authored
Homogenize studies and services (#1569)
- "Services" tab renamed to "Discover". Under this tab, all the available resources (templates and services) are listed. - To start a new study: - If a templates is selected, a study containing that pipeline will be initialized (same as before) - If a service is selected, a study containing that single node will be initialized (new feature). Since this will be a single node study, the service/app will be automatically maximized. Providing a more app-like user experience. In addition, the content of the Discover tab is also shipped by the frontend compiler with its own customized navigation bar as standalone application that could be served as the Discover/Explore website. - Plotly removed is not used - Removed unused images
1 parent 681fc9c commit bb0788f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+1284
-669
lines changed

.github/workflows/ci-testing-deploy.yml

+3
Original file line numberDiff line numberDiff line change
@@ -748,6 +748,9 @@ jobs:
748748
run: ./ci/github/system-testing/swarm-deploy.bash clean_up
749749

750750
system-test-e2e:
751+
# FIXME: skip the job until make it faster and more reliable
752+
# https://github.com/ITISFoundation/osparc-simcore/issues/1594
753+
if: "false"
751754
name: System-testing e2e
752755
needs: [build-test-images]
753756
runs-on: ${{ matrix.os }}

services/web/client/.eslintrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"q": false,
99
"qxWeb": false,
1010
"osparc": false,
11+
"explorer": false,
1112
"Ajv": false,
1213
"objectPath": false
1314
},

services/web/client/Manifest.json

-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"svg/svg.path.js",
2828
"jsondiffpatch/jsondiffpatch.min.js",
2929
"jsontreeviewer/jsonTree.js",
30-
"plotly/plotly.min.js",
3130
"marked/marked.js",
3231
"DOMPurify/purify.min.js"
3332
],

services/web/client/compile.json

+12
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,18 @@
3232
],
3333
"bootPath": "source/boot"
3434
},
35+
{
36+
"class": "explorer.Application",
37+
"theme": "osparc.theme.Theme",
38+
"name": "explorer",
39+
"title": "oSPARC Explorer",
40+
"include": [
41+
"iconfont.material.Load",
42+
"iconfont.fontawesome5.Load",
43+
"osparc.theme.OSparcLight"
44+
],
45+
"bootPath": "source/boot"
46+
},
3547
{
3648
"class": "qxl.apiviewer.Application",
3749
"theme": "qxl.apiviewer.Theme",
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/* ************************************************************************
2+
3+
explorer - an entry point to oSparc
4+
5+
https://osparc.io/explorer
6+
7+
Copyright:
8+
2020 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
/**
19+
* This is the main application class of "explorer"
20+
*
21+
* @asset(explorer/*)
22+
* @asset(common/common.css)
23+
*/
24+
25+
qx.Class.define("explorer.Application", {
26+
extend: qx.application.Standalone,
27+
include: [
28+
qx.locale.MTranslation
29+
],
30+
31+
members: {
32+
/**
33+
* This method contains the initial application code and gets called
34+
* during startup of the application
35+
*/
36+
main: function() {
37+
this.base();
38+
39+
// Enable logging in debug variant
40+
if (qx.core.Environment.get("qx.debug")) {
41+
// support native logging capabilities, e.g. Firebug for Firefox
42+
qx.log.appender.Native;
43+
}
44+
45+
this.__loadMainPage();
46+
},
47+
48+
__loadMainPage: function() {
49+
const padding = 0;
50+
const view = new explorer.MainPage();
51+
const doc = this.getRoot();
52+
doc.add(view, {
53+
top: padding,
54+
bottom: padding,
55+
left: padding,
56+
right: padding
57+
});
58+
}
59+
}
60+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* ************************************************************************
2+
3+
explorer - an entry point to oSparc
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2020 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("explorer.MainPage", {
19+
extend: qx.ui.core.Widget,
20+
21+
construct: function() {
22+
this.base();
23+
24+
this._setLayout(new qx.ui.layout.VBox());
25+
26+
const navBar = this.__navBar = this.__createNavigationBar();
27+
this._add(navBar);
28+
29+
const exploreBrowser = this.__exploreBrowser = this.__createMainView();
30+
this._add(exploreBrowser, {
31+
flex: 1
32+
});
33+
},
34+
35+
members: {
36+
__navBar: null,
37+
__exploreBrowser: null,
38+
39+
__createNavigationBar: function() {
40+
const navBar = new explorer.NavigationBar();
41+
navBar.buildLayout();
42+
return navBar;
43+
},
44+
45+
__createMainView: function() {
46+
const nStudyItemsPerRow = 5;
47+
const studyButtons = osparc.dashboard.StudyBrowserButtonBase;
48+
const exploreBrowser = new osparc.dashboard.ExploreBrowser().set({
49+
alignX: "center",
50+
maxWidth: nStudyItemsPerRow * (studyButtons.ITEM_WIDTH + studyButtons.SPACING) + 10 // padding + scrollbar
51+
});
52+
return exploreBrowser;
53+
}
54+
}
55+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* ************************************************************************
2+
3+
explorer - an entry point to oSparc
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2020 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
qx.Class.define("explorer.NavigationBar", {
19+
extend: osparc.desktop.NavigationBar,
20+
21+
members: {
22+
buildLayout: function() {
23+
this.getChildControl("logo");
24+
this.getChildControl("platform");
25+
26+
this._add(new qx.ui.core.Spacer(), {
27+
flex: 1
28+
});
29+
30+
this.getChildControl("user-manual");
31+
this.getChildControl("feedback");
32+
this.getChildControl("theme-switch");
33+
}
34+
}
35+
});

services/web/client/source/class/osparc/component/message/FlashMessenger.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ qx.Class.define("osparc.component.message.FlashMessenger", {
8989
* @param {*} logMessage.logger IDK
9090
*/
9191
log: function(logMessage) {
92-
let message = logMessage.message;
92+
let message = ("message" in logMessage.message) ? logMessage.message["message"] : logMessage.message;
9393
const level = logMessage.level.toUpperCase(); // "DEBUG", "INFO", "WARNING", "ERROR"
9494
let logger = logMessage.logger;
9595
if (logger) {

services/web/client/source/class/osparc/component/metadata/ServiceInfo.js

+11-8
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,22 @@ qx.Class.define("osparc.component.metadata.ServiceInfo", {
4242
members: {
4343
__metadata: null,
4444

45+
setService: function(metadata) {
46+
this._removeAll();
47+
if (metadata) {
48+
this.__metadata = metadata;
49+
this.__createServiceInfoView();
50+
}
51+
},
52+
4553
__createServiceInfoView: function() {
4654
const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(8).set({
4755
alignY: "middle"
4856
}));
4957

5058
const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(8));
51-
hBox.add(this.__createThumbnail());
52-
hBox.add(this.__createExtraInfo(), {
59+
hBox.add(this.__createExtraInfo());
60+
hBox.add(this.__createThumbnail(), {
5361
flex: 1
5462
});
5563
container.add(hBox);
@@ -68,12 +76,7 @@ qx.Class.define("osparc.component.metadata.ServiceInfo", {
6876
},
6977

7078
__createThumbnail: function() {
71-
return new qx.ui.basic.Image(this.__metadata.thumbnail || "@FontAwesome5Solid/flask/50").set({
72-
scale: true,
73-
width: 300,
74-
height: 180,
75-
paddingTop: this.__metadata.thumbnail ? 0 : 60
76-
});
79+
return new osparc.component.widget.Thumbnail(this.__metadata.thumbnail || "@FontAwesome5Solid/flask/50", 300, 180);
7780
},
7881

7982
__createExtraInfo: function() {

services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
3232
const windowWidth = 700;
3333
const windowHeight = 800;
3434
this.set({
35-
layout: new qx.ui.layout.Grow(),
35+
layout: new qx.ui.layout.VBox(10),
3636
autoDestroy: true,
3737
contentPadding: 10,
3838
showMinimize: false,
@@ -42,16 +42,22 @@ qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
4242
height: windowHeight
4343
});
4444

45-
const serviceDetails = new osparc.component.metadata.ServiceInfo(metadata);
45+
const serviceInfo = this._serviceInfo = new osparc.component.metadata.ServiceInfo(metadata);
4646
const scroll = new qx.ui.container.Scroll();
47-
scroll.add(serviceDetails);
48-
this.add(scroll);
47+
scroll.add(serviceInfo);
48+
this.add(scroll, {
49+
flex: 1
50+
});
4951
},
5052

5153
properties: {
5254
appearance: {
5355
refine: true,
5456
init: "info-service-window"
5557
}
58+
},
59+
60+
members: {
61+
_serviceInfo: null
5662
}
5763
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2020 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
19+
qx.Class.define("osparc.component.metadata.ServiceStarterWindow", {
20+
extend: osparc.component.metadata.ServiceInfoWindow,
21+
22+
/**
23+
* @param metadata {Object} Service metadata
24+
*/
25+
construct: function(metadata) {
26+
this.base(arguments, metadata);
27+
28+
this.__service = metadata;
29+
30+
const toolboxContainer = this.__createToolbox();
31+
this.addAt(toolboxContainer, 0);
32+
},
33+
34+
events: {
35+
"startService": "qx.event.type.Data"
36+
},
37+
38+
members: {
39+
__serviceKey: null,
40+
__versionsUIBox: null,
41+
42+
__createToolbox: function() {
43+
const toolboxContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox());
44+
45+
const versionsList = this.__createVersionsList();
46+
toolboxContainer.add(versionsList);
47+
48+
toolboxContainer.add(new qx.ui.core.Spacer(), {
49+
flex: 1
50+
});
51+
52+
const openButton = new qx.ui.form.Button(this.tr("Open")).set({
53+
appearance: "md-button"
54+
});
55+
openButton.addListener("execute", () => {
56+
const data = {
57+
"serviceKey": this.__service.key,
58+
"serviceVersion": this.__getSelectedVersion()
59+
};
60+
this.fireDataEvent("startService", data);
61+
});
62+
toolboxContainer.add(openButton);
63+
64+
return toolboxContainer;
65+
},
66+
67+
__createVersionsList: function() {
68+
const versionsList = this.__versionsUIBox = new qx.ui.form.SelectBox().set({
69+
font: "text-14"
70+
});
71+
// populate versions
72+
const store = osparc.store.Store.getInstance();
73+
store.getServicesDAGs()
74+
.then(services => {
75+
const versions = osparc.utils.Services.getVersions(services, this.__service.key);
76+
if (versions) {
77+
let lastItem = null;
78+
versions.forEach(version => {
79+
lastItem = new qx.ui.form.ListItem(version).set({
80+
font: "text-14"
81+
});
82+
versionsList.add(lastItem);
83+
});
84+
if (lastItem) {
85+
versionsList.setSelection([lastItem]);
86+
this.__versionSelected(lastItem.getLabel());
87+
}
88+
}
89+
});
90+
versionsList.addListener("changeSelection", e => {
91+
const serviceVersion = this.__getSelectedVersion();
92+
if (serviceVersion) {
93+
this.__versionSelected(serviceVersion);
94+
}
95+
}, this);
96+
97+
return versionsList;
98+
},
99+
100+
__getSelectedVersion: function() {
101+
const selection = this.__versionsUIBox.getSelection();
102+
if (selection && selection.length) {
103+
return selection[0].getLabel();
104+
}
105+
return null;
106+
},
107+
108+
__versionSelected: function(serviceVersion) {
109+
const store = osparc.store.Store.getInstance();
110+
store.getServicesDAGs()
111+
.then(services => {
112+
const selectedService = osparc.utils.Services.getFromObject(services, this.__service.key, serviceVersion);
113+
this._serviceInfo.setService(selectedService);
114+
});
115+
}
116+
}
117+
});

0 commit comments

Comments
 (0)