Skip to content

Commit 0c2b45f

Browse files
odeimaizodeimaiz
authored
✨ S4L: Add New buttons (ITISFoundation#3399)
1 parent 268d159 commit 0c2b45f

File tree

7 files changed

+150
-114
lines changed

7 files changed

+150
-114
lines changed

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,20 @@
2727
qx.Class.define("osparc.dashboard.GridButtonNew", {
2828
extend: osparc.dashboard.GridButtonBase,
2929

30-
construct: function() {
30+
construct: function(title, description) {
3131
this.base(arguments);
3232

3333
this._buildLayout();
34+
35+
if (title) {
36+
const titleLabel = this.getChildControl("title");
37+
titleLabel.setValue(title);
38+
}
39+
40+
if (description) {
41+
const descLabel = this.getChildControl("subtitle-text");
42+
descLabel.setValue(description.toString());
43+
}
3444
},
3545

3646
members: {

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

Lines changed: 0 additions & 32 deletions
This file was deleted.

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,20 @@
2424
qx.Class.define("osparc.dashboard.ListButtonNew", {
2525
extend: osparc.dashboard.ListButtonBase,
2626

27-
construct: function() {
27+
construct: function(title, description) {
2828
this.base(arguments);
2929

3030
this._buildLayout();
31+
32+
if (title) {
33+
const titleLabel = this.getChildControl("title");
34+
titleLabel.setValue(title);
35+
}
36+
37+
if (description) {
38+
const descLabel = this.getChildControl("description");
39+
descLabel.setValue(description.toString());
40+
}
3141
},
3242

3343
members: {

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

Lines changed: 0 additions & 32 deletions
This file was deleted.

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
6565
studyList.sort(sortByProperty("lastChangeDate"));
6666
},
6767

68+
isCardNewItem: function(card) {
69+
return (card instanceof osparc.dashboard.GridButtonNew || card instanceof osparc.dashboard.ListButtonNew);
70+
},
71+
6872
isCardButtonItem: function(card) {
6973
return (card instanceof osparc.dashboard.GridButtonItem || card instanceof osparc.dashboard.ListButtonItem);
7074
},

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,12 +129,9 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
129129
return;
130130
}
131131

132-
const defaultContext = "workbench";
133-
let pageContext = defaultContext;
134-
135132
const data = {
136133
studyId,
137-
pageContext
134+
pageContext: "workbench"
138135
};
139136
this.fireDataEvent("startStudy", data);
140137
},

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

Lines changed: 123 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,22 @@
3535
qx.Class.define("osparc.dashboard.StudyBrowser", {
3636
extend: osparc.dashboard.ResourceBrowserBase,
3737

38+
statics: {
39+
EXPECTED_TI_TEMPLATE_TITLE: "TI Planning Tool",
40+
EXPECTED_S4L_SERVICE_KEYS: {
41+
"simcore/services/dynamic/jupyter-smash": {
42+
title: "Start sim4life lab",
43+
decription: "jupyter powered by s4l",
44+
idToWidget: "startJSmashButton"
45+
},
46+
"simcore/services/dynamic/sim4life-dy": {
47+
title: "Start sim4life",
48+
decription: "New sim4life project",
49+
idToWidget: "startS4LButton"
50+
}
51+
}
52+
},
53+
3854
properties: {
3955
multiSelection: {
4056
check: "Boolean",
@@ -47,7 +63,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
4763

4864
members: {
4965
__studies: null,
50-
__newStudyBtn: null,
5166

5267
reloadStudy: function(studyId) {
5368
const params = {
@@ -124,32 +139,49 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
124139
});
125140
},
126141

127-
__createNewStudyButton: function(mode = "grid") {
142+
__addNewStudyButtons: function(mode = "grid") {
143+
this.__addNewStudyButton(mode);
144+
if (osparc.utils.Utils.isProduct("tis")) {
145+
this.__replaceNewStudyWithNewPlanButton(mode);
146+
} else if (osparc.utils.Utils.isProduct("s4l")) {
147+
this.__addNewStudyFromServiceButtons(mode);
148+
}
149+
},
150+
151+
__removeNewStudyButtons: function() {
152+
const cards = this._resourcesContainer.getChildren();
153+
for (let i=cards.length-1; i>=0; i--) {
154+
const card = cards[i];
155+
if (osparc.dashboard.ResourceBrowserBase.isCardNewItem(card)) {
156+
this._resourcesContainer.remove(card);
157+
}
158+
}
159+
},
160+
161+
__addNewStudyButton: function(mode) {
128162
const newStudyBtn = (mode === "grid") ? new osparc.dashboard.GridButtonNew() : new osparc.dashboard.ListButtonNew();
129163
newStudyBtn.subscribeToFilterGroup("searchBarFilter");
130164
osparc.utils.Utils.setIdToWidget(newStudyBtn, "newStudyBtn");
131-
newStudyBtn.addListener("execute", () => this.__newStudyBtnClicked());
165+
newStudyBtn.addListener("execute", () => this.__newStudyBtnClicked(newStudyBtn));
132166
if (this._resourcesContainer.getMode() === "list") {
133167
const width = this._resourcesContainer.getBounds().width - 15;
134168
newStudyBtn.setWidth(width);
135169
}
136-
if (osparc.utils.Utils.isProduct("tis")) {
137-
this.__replaceNewStudyWithNewPlanButton(mode);
138-
}
139-
return newStudyBtn;
170+
this._resourcesContainer.addAt(newStudyBtn, 0);
140171
},
141172

142-
__replaceNewStudyWithNewPlanButton: function(mode = "grid") {
173+
__replaceNewStudyWithNewPlanButton: function(mode) {
143174
osparc.data.Resources.get("templates")
144175
.then(templates => {
145176
// replace if a "TI Planning Tool" template exists
146-
const templateData = templates.find(t => t.name === "TI Planning Tool");
177+
const templateData = templates.find(t => t.name === this.self().EXPECTED_TI_TEMPLATE_TITLE);
147178
if (templateData) {
148-
this._resourcesContainer.remove(this.__newStudyBtn);
149-
const newPlanButton = (mode === "grid") ? new osparc.dashboard.GridButtonNewPlan() : new osparc.dashboard.ListButtonNewPlan();
179+
this.__removeNewStudyButtons();
180+
const title = this.tr("New Plan");
181+
const desc = this.tr("Start a new plan");
182+
const newPlanButton = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
150183
osparc.utils.Utils.setIdToWidget(newPlanButton, "newPlanButton");
151-
newPlanButton.addListener("execute", () => this.__newPlanBtnClicked(templateData));
152-
this.__newStudyBtn = newPlanButton;
184+
newPlanButton.addListener("execute", () => this.__newPlanBtnClicked(newPlanButton, templateData));
153185
if (this._resourcesContainer.getMode() === "list") {
154186
const width = this._resourcesContainer.getBounds().width - 15;
155187
newPlanButton.setWidth(width);
@@ -159,6 +191,30 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
159191
});
160192
},
161193

194+
__addNewStudyFromServiceButtons: function(mode) {
195+
const store = osparc.store.Store.getInstance();
196+
store.getServicesOnly(false)
197+
.then(services => {
198+
// add new plus buttons if key services exists
199+
Object.keys(this.self().EXPECTED_S4L_SERVICE_KEYS).forEach(serviceKey => {
200+
const versions = osparc.utils.Services.getVersions(services, serviceKey);
201+
if (versions.length) {
202+
const newButtonInfo = this.self().EXPECTED_S4L_SERVICE_KEYS[serviceKey];
203+
const title = newButtonInfo.title;
204+
const desc = newButtonInfo.decription;
205+
const newStudyFromServiceButton = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
206+
osparc.utils.Utils.setIdToWidget(newStudyFromServiceButton, newButtonInfo.idToWidget);
207+
newStudyFromServiceButton.addListener("execute", () => this.__newStudyFromServiceBtnClicked(newStudyFromServiceButton, serviceKey, versions[versions.length-1]));
208+
if (this._resourcesContainer.getMode() === "list") {
209+
const width = this._resourcesContainer.getBounds().width - 15;
210+
newStudyFromServiceButton.setWidth(width);
211+
}
212+
this._resourcesContainer.addAt(newStudyFromServiceButton, 1);
213+
}
214+
});
215+
});
216+
},
217+
162218
_createLayout: function() {
163219
this._createResourcesLayout("study");
164220

@@ -182,18 +238,22 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
182238

183239
osparc.utils.Utils.setIdToWidget(this._resourcesContainer, "studiesList");
184240

185-
const newStudyButton = this.__newStudyBtn = this.__createNewStudyButton();
186-
this._resourcesContainer.add(newStudyButton);
241+
this.__addNewStudyButtons();
187242

188243
const loadingStudiesBtn = this._createLoadMoreButton("studiesLoading");
189244
this._resourcesContainer.add(loadingStudiesBtn);
190245

191-
this.bind("multiSelection", this.__newStudyBtn, "enabled", {
192-
converter: val => !val
193-
});
194-
this.bind("multiSelection", importStudyButton, "enabled", {
195-
converter: val => !val
246+
this.addListener("changeMultiSelection", e => {
247+
const multiEnabled = e.getData();
248+
const cards = this._resourcesContainer.getChildren();
249+
cards.forEach(card => {
250+
if (!osparc.dashboard.ResourceBrowserBase.isCardButtonItem(card)) {
251+
card.setEnabled(!multiEnabled);
252+
}
253+
});
254+
importStudyButton.setEnabled(!multiEnabled);
196255
});
256+
197257
this._resourcesContainer.bind("selection", studiesDeleteButton, "visibility", {
198258
converter: selection => selection.length ? "visible" : "excluded"
199259
});
@@ -206,26 +266,21 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
206266
this._resourcesContainer.addListener("changeMode", () => {
207267
this._resetResourcesList();
208268

209-
const studyItems = this._resourcesContainer.getChildren();
210-
studyItems.forEach(studyItem => {
211-
if (!osparc.dashboard.ResourceBrowserBase.isCardButtonItem(studyItem)) {
212-
if (studyItem === this.__newStudyBtn) {
213-
this._resourcesContainer.remove(studyItem);
214-
const newBtn = this.__newStudyBtn = this.__createNewStudyButton(this._resourcesContainer.getMode());
215-
this._resourcesContainer.addAt(newBtn, 0);
216-
}
217-
218-
if (studyItem === this._loadingResourcesBtn) {
219-
const fetching = studyItem.getFetching();
220-
const visibility = studyItem.getVisibility();
221-
this._resourcesContainer.remove(studyItem);
222-
const loadMoreBtn = this._createLoadMoreButton("studiesLoading", this._resourcesContainer.getMode());
223-
loadMoreBtn.set({
224-
fetching,
225-
visibility
226-
});
227-
this._resourcesContainer.add(loadMoreBtn);
228-
}
269+
this.__removeNewStudyButtons();
270+
this.__addNewStudyButtons(this._resourcesContainer.getMode());
271+
272+
const cards = this._resourcesContainer.getChildren();
273+
cards.forEach(card => {
274+
if (card === this._loadingResourcesBtn) {
275+
const fetching = card.getFetching();
276+
const visibility = card.getVisibility();
277+
this._resourcesContainer.remove(card);
278+
const newLoadMoreBtn = this._createLoadMoreButton("studiesLoading", this._resourcesContainer.getMode());
279+
newLoadMoreBtn.set({
280+
fetching,
281+
visibility
282+
});
283+
this._resourcesContainer.add(newLoadMoreBtn);
229284
}
230285
});
231286
}, this);
@@ -362,16 +417,17 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
362417
}, this);
363418
},
364419

365-
__newStudyBtnClicked: function() {
366-
this.__newStudyBtn.setValue(false);
420+
__newStudyBtnClicked: function(button) {
421+
button.setValue(false);
367422
const minStudyData = osparc.data.model.Study.createMyNewStudyObject();
368423
const title = osparc.utils.Utils.getUniqueStudyName(minStudyData.name, this.__studies);
369424
minStudyData["name"] = title;
370425
minStudyData["description"] = "";
371426
this.__createStudy(minStudyData, null);
372427
},
373428

374-
__newPlanBtnClicked: function(templateData) {
429+
__newPlanBtnClicked: function(button, templateData) {
430+
button.setValue(false);
375431
const title = osparc.utils.Utils.getUniqueStudyName(templateData.name, this.__studies);
376432
templateData.name = title;
377433
this._showLoadingPage(this.tr("Creating ") + (templateData.name || this.tr("Study")));
@@ -387,6 +443,22 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
387443
});
388444
},
389445

446+
__newStudyFromServiceBtnClicked: function(button, key, version) {
447+
button.setValue(false);
448+
console.log(key, version);
449+
this._showLoadingPage(this.tr("Creating Study"));
450+
osparc.utils.Study.createStudyFromService(key, version)
451+
.then(studyId => {
452+
this._hideLoadingPage();
453+
this.__startStudyById(studyId);
454+
})
455+
.catch(err => {
456+
this._hideLoadingPage();
457+
osparc.component.message.FlashMessenger.getInstance().logAs(err.message, "ERROR");
458+
console.error(err);
459+
});
460+
},
461+
390462
__createStudy: function(minStudyData) {
391463
this._showLoadingPage(this.tr("Creating ") + (minStudyData.name || this.tr("Study")));
392464

@@ -409,7 +481,14 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
409481
if (pageContext === undefined) {
410482
pageContext = osparc.data.model.Study.getUiMode(studyData) || "workbench";
411483
}
412-
const studyId = studyData["uuid"];
484+
this.__startStudyById(studyData["uuid"], pageContext);
485+
},
486+
487+
__startStudyById: function(studyId, pageContext = "workbench") {
488+
if (!this._checkLoggedIn()) {
489+
return;
490+
}
491+
413492
const data = {
414493
studyId,
415494
pageContext

0 commit comments

Comments
 (0)