Skip to content

Commit 1564d50

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Enhance: syncing tree (#6687)
1 parent 299c1ac commit 1564d50

File tree

13 files changed

+144
-97
lines changed

13 files changed

+144
-97
lines changed

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,14 @@ qx.Class.define("osparc.dashboard.MoveResourceTo", {
3939
const item = selection.getItem(0);
4040
this.__selectedWorkspaceId = item.getWorkspaceId();
4141
this.__selectedFolderId = item.getFolderId();
42-
moveButton.setEnabled(this.__currentWorkspaceId !== this.__selectedWorkspaceId || this.__currentFolderId !== this.__selectedFolderId);
42+
if (this.__selectedWorkspaceId === -1) {
43+
// "Shared Workspaces"
44+
moveButton.setEnabled(false);
45+
} else {
46+
// In principle, valid location
47+
// disable if it's the current location
48+
moveButton.setEnabled(this.__currentWorkspaceId !== this.__selectedWorkspaceId || this.__currentFolderId !== this.__selectedFolderId);
49+
}
4350
}
4451
}, this);
4552
moveButton.addListener("execute", () => {

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

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
7474

7575
osparc.store.Workspaces.getInstance().addListener("workspaceRemoved", e => {
7676
const workspace = e.getData();
77-
this.__removeWorkspace(workspace);
77+
this.__workspaceRemoved(workspace);
7878
}, this);
7979

8080
this.getSelection().addListener("change", () => {
@@ -227,11 +227,21 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
227227
this.__populateFolder(workspaceModel, workspace.getWorkspaceId(), null);
228228
},
229229

230-
__removeWorkspace: function(workspace) {
230+
__workspaceRemoved: function(workspace) {
231+
// remove it from the tree
231232
const sharedWorkspaceModel = this.__getModel(-1, null);
232233
const idx = sharedWorkspaceModel.getChildren().toArray().findIndex(w => workspace.getWorkspaceId() === w.getWorkspaceId());
233234
if (idx > -1) {
234-
sharedWorkspaceModel.getChildren().toArray().splice(idx, 1);
235+
sharedWorkspaceModel.getChildren().removeAt(idx);
236+
}
237+
238+
// remove it from the cached models
239+
const modelFound = this.__getModel(workspace.getWorkspaceId(), null);
240+
if (modelFound) {
241+
const index = this.__models.indexOf(modelFound);
242+
if (index > -1) { // only splice array when item is found
243+
this.__models.splice(index, 1); // 2nd parameter means remove one item only
244+
}
235245
}
236246
},
237247

@@ -283,7 +293,19 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
283293
if (parentModel) {
284294
const idx = parentModel.getChildren().toArray().findIndex(c => folder.getWorkspaceId() === c.getWorkspaceId() && folder.getFolderId() === c.getFolderId());
285295
if (idx > -1) {
286-
parentModel.getChildren().toArray().splice(idx, 1);
296+
parentModel.getChildren().removeAt(idx);
297+
}
298+
}
299+
300+
if (oldParentFolderId === undefined) {
301+
// it was removed, not moved
302+
// remove it from the cached models
303+
const modelFound = this.__getModel(folder.getWorkspaceId(), folder.getParentFolderId());
304+
if (modelFound) {
305+
const index = this.__models.indexOf(modelFound);
306+
if (index > -1) { // only splice array when item is found
307+
this.__models.splice(index, 1); // 2nd parameter means remove one item only
308+
}
287309
}
288310
}
289311
},

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,9 @@ qx.Class.define("osparc.data.model.IframeHandler", {
8484
this.__unresponsiveRetries = 5;
8585
this.__nodeState();
8686

87-
this.getIFrame().resetSource();
87+
if (this.getIFrame()) {
88+
this.getIFrame().resetSource();
89+
}
8890
},
8991

9092
__initIFrame: function() {
@@ -365,7 +367,9 @@ qx.Class.define("osparc.data.model.IframeHandler", {
365367

366368
// will switch to the loading page
367369
node.resetServiceUrl();
368-
this.getIFrame().resetSource();
370+
if (this.getIFrame()) {
371+
this.getIFrame().resetSource();
372+
}
369373
this.fireEvent("iframeChanged");
370374
}
371375
},
@@ -396,8 +400,10 @@ qx.Class.define("osparc.data.model.IframeHandler", {
396400
const status = node.getStatus().getInteractive();
397401
// it might have been stopped
398402
if (["running", "ready"].includes(status)) {
399-
this.getIFrame().resetSource();
400-
this.getIFrame().setSource(node.getServiceUrl());
403+
if (this.getIFrame()) {
404+
this.getIFrame().resetSource();
405+
this.getIFrame().setSource(node.getServiceUrl());
406+
}
401407

402408
// fire event to force switching to iframe's content:
403409
// it is required in those cases where the native 'load' event isn't triggered (voila)

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,8 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
358358
}
359359
})
360360
.catch(err => {
361-
osparc.FlashMessenger.getInstance().logAs(this.tr("Something went wrong adding the user"), "ERROR");
361+
const errorMessage = err["message"] || this.tr("Something went wrong adding the user");
362+
osparc.FlashMessenger.getInstance().logAs(errorMessage, "ERROR");
362363
console.error(err);
363364
});
364365
},

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
101101
createOrgBtn.addListener("execute", function() {
102102
const newOrg = true;
103103
const orgEditor = new osparc.editor.OrganizationEditor(newOrg);
104-
const title = this.tr("Organization Details Editor");
104+
const title = this.tr("New Organization");
105105
const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 250);
106106
orgEditor.addListener("createOrg", () => {
107107
this.__createOrganization(win, orgEditor.getChildControl("create"), orgEditor);
@@ -298,7 +298,8 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
298298
});
299299
})
300300
.catch(err => {
301-
osparc.FlashMessenger.getInstance().logAs(this.tr("Something went wrong creating ") + name, "ERROR");
301+
const errorMessage = err["message"] || this.tr("Something went wrong creating ") + name;
302+
osparc.FlashMessenger.getInstance().logAs(errorMessage, "ERROR");
302303
button.setFetching(false);
303304
console.error(err);
304305
})

‎services/static-webserver/client/source/class/osparc/editor/OrganizationEditor.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ qx.Class.define("osparc.editor.OrganizationEditor", {
3030
this.getChildControl("description");
3131
this.getChildControl("thumbnail");
3232
newOrg ? this.getChildControl("create") : this.getChildControl("save");
33+
34+
this.addListener("appear", () => {
35+
title.focus();
36+
title.activate();
37+
});
3338
},
3439

3540
properties: {

‎services/static-webserver/client/source/class/osparc/info/ServiceLarge.js‎

Lines changed: 78 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ qx.Class.define("osparc.info.ServiceLarge", {
2020
extend: osparc.info.CardLarge,
2121

2222
/**
23-
* @param serviceData {Object} Serialized Service Object
23+
* @param metadata {Object} Serialized Service Object
2424
* @param instance {Object} instance related data
2525
* @param openOptions {Boolean} open edit options in new window or fire event
2626
*/
27-
construct: function(serviceData, instance = null, openOptions = true) {
27+
construct: function(metadata, instance = null, openOptions = true) {
2828
this.base(arguments);
2929

30-
this.setService(serviceData);
30+
this.setService(metadata);
3131

3232
if (instance) {
3333
if ("nodeId" in instance) {
@@ -79,6 +79,19 @@ qx.Class.define("osparc.info.ServiceLarge", {
7979
}
8080
},
8181

82+
statics: {
83+
popUpInWindow: function(serviceLarge) {
84+
const metadata = serviceLarge.getService();
85+
const versionDisplay = osparc.service.Utils.extractVersionDisplay(metadata);
86+
const title = `${metadata["name"]} ${versionDisplay}`;
87+
const width = osparc.info.CardLarge.WIDTH;
88+
const height = osparc.info.CardLarge.HEIGHT;
89+
osparc.ui.window.Window.popUpInWindow(serviceLarge, title, width, height).set({
90+
maxHeight: height
91+
});
92+
},
93+
},
94+
8295
members: {
8396
_rebuildLayout: function() {
8497
this._removeAll();
@@ -90,72 +103,85 @@ qx.Class.define("osparc.info.ServiceLarge", {
90103
vBox.add(deprecated);
91104
}
92105

93-
const title = this.__createTitle();
94-
const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor);
95-
96-
const extraInfo = this.__extraInfo();
97-
const extraInfoLayout = this.__createExtraInfo(extraInfo);
98-
99-
const bounds = this.getBounds();
100-
const offset = 30;
101-
const maxThumbnailHeight = extraInfo.length*20;
102-
let widgetWidth = bounds ? bounds.width - offset : 500 - offset;
103-
let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING - osparc.info.CardLarge.EXTRA_INFO_WIDTH;
104-
thumbnailWidth = Math.min(thumbnailWidth - 20, osparc.info.CardLarge.THUMBNAIL_MAX_WIDTH);
105-
const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight);
106-
const thumbnailLayout = this.__createViewWithEdit(thumbnail, this.__openThumbnailEditor);
107-
thumbnailLayout.getLayout().set({
108-
alignX: "center"
109-
});
110-
111-
const infoAndThumbnail = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
112-
alignX: "center"
113-
}));
114-
infoAndThumbnail.add(extraInfoLayout);
115-
infoAndThumbnail.add(thumbnailLayout, {
116-
flex: 1
117-
});
118-
119-
let descriptionUi = null;
120-
if (osparc.service.Utils.canIWrite(this.getService()["accessRights"])) {
121-
descriptionUi = this.__createDescriptionUi();
122-
}
123-
124106
const description = this.__createDescription();
125107
const editInTitle = this.__createViewWithEdit(description.getChildren()[0], this.__openDescriptionEditor);
126108
description.addAt(editInTitle, 0);
127109

128-
let resources = null;
129-
if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {
130-
resources = this.__createResources();
131-
}
132-
133110
const copyMetadataButton = new qx.ui.form.Button(this.tr("Copy Raw metadata"), "@FontAwesome5Solid/copy/12").set({
134111
allowGrowX: false
135112
});
136113
copyMetadataButton.addListener("execute", () => osparc.utils.Utils.copyTextToClipboard(osparc.utils.Utils.prettifyJson(this.getService())), this);
137114

138-
139115
if (
140116
this.getService()["descriptionUi"] &&
141117
!osparc.service.Utils.canIWrite(this.getService()["accessRights"]) &&
142118
description.getChildren().length > 1
143119
) {
144-
// Show description only
145-
vBox.add(description.getChildren()[1]);
120+
// Show also the copy Id buttons too
121+
const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
122+
if (this.getNodeId()) {
123+
const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});
124+
const copyStudyIdButton = new qx.ui.form.Button(this.tr(`Copy ${studyAlias} Id`), "@FontAwesome5Solid/copy/12").set({
125+
toolTipText: qx.locale.Manager.tr("Copy to clipboard"),
126+
});
127+
copyStudyIdButton.addListener("execute", this.__copyStudyIdToClipboard, this);
128+
buttonsLayout.add(copyStudyIdButton);
129+
vBox.add(buttonsLayout);
130+
131+
const copyNodeIdButton = new qx.ui.form.Button(this.tr("Copy Service Id"), "@FontAwesome5Solid/copy/12").set({
132+
toolTipText: qx.locale.Manager.tr("Copy to clipboard"),
133+
});
134+
copyNodeIdButton.addListener("execute", this.__copyNodeIdToClipboard, this);
135+
buttonsLayout.add(copyNodeIdButton);
136+
vBox.add(buttonsLayout);
137+
}
138+
// Also copyMetadataButton if tester
146139
if (osparc.data.Permissions.getInstance().isTester()) {
147-
// Also copyMetadataButton if tester
148-
vBox.add(copyMetadataButton);
140+
buttonsLayout.add(copyMetadataButton);
141+
vBox.add(buttonsLayout);
149142
}
143+
// Show description only
144+
vBox.add(description.getChildren()[1]);
150145
} else {
146+
const title = this.__createTitle();
147+
const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor);
151148
vBox.add(titleLayout);
149+
150+
const extraInfo = this.__extraInfo();
151+
const extraInfoLayout = this.__createExtraInfo(extraInfo);
152+
const bounds = this.getBounds();
153+
const offset = 30;
154+
const maxThumbnailHeight = extraInfo.length*20;
155+
let widgetWidth = bounds ? bounds.width - offset : 500 - offset;
156+
let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING - osparc.info.CardLarge.EXTRA_INFO_WIDTH;
157+
thumbnailWidth = Math.min(thumbnailWidth - 20, osparc.info.CardLarge.THUMBNAIL_MAX_WIDTH);
158+
const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight);
159+
const thumbnailLayout = this.__createViewWithEdit(thumbnail, this.__openThumbnailEditor);
160+
thumbnailLayout.getLayout().set({
161+
alignX: "center"
162+
});
163+
const infoAndThumbnail = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({
164+
alignX: "center"
165+
}));
166+
infoAndThumbnail.add(extraInfoLayout);
167+
infoAndThumbnail.add(thumbnailLayout, {
168+
flex: 1
169+
});
152170
vBox.add(infoAndThumbnail);
153-
if (descriptionUi) {
154-
vBox.add(descriptionUi);
171+
172+
if (osparc.service.Utils.canIWrite(this.getService()["accessRights"])) {
173+
const descriptionUi = this.__createDescriptionUi();
174+
if (descriptionUi) {
175+
vBox.add(descriptionUi);
176+
}
155177
}
156178
vBox.add(description);
157-
if (resources) {
158-
vBox.add(resources);
179+
180+
if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {
181+
const resources = this.__createResources();
182+
if (resources) {
183+
vBox.add(resources);
184+
}
159185
}
160186
vBox.add(copyMetadataButton);
161187
}
@@ -429,6 +455,10 @@ qx.Class.define("osparc.info.ServiceLarge", {
429455
titleEditor.open();
430456
},
431457

458+
__copyStudyIdToClipboard: function() {
459+
osparc.utils.Utils.copyTextToClipboard(this.getStudyId());
460+
},
461+
432462
__copyNodeIdToClipboard: function() {
433463
osparc.utils.Utils.copyTextToClipboard(this.getNodeId());
434464
},

‎services/static-webserver/client/source/class/osparc/metadata/ServicesInStudy.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -147,12 +147,7 @@ qx.Class.define("osparc.metadata.ServicesInStudy", {
147147
studyId: this._studyData["uuid"],
148148
label: node["label"]
149149
});
150-
const title = this.tr("Service information");
151-
const width = osparc.info.CardLarge.WIDTH;
152-
const height = osparc.info.CardLarge.HEIGHT;
153-
osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
154-
maxHeight: height
155-
});
150+
osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
156151
}, this);
157152
this._servicesGrid.add(infoButton, {
158153
row: i,

‎services/static-webserver/client/source/class/osparc/node/slideshow/BaseNodeView.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -217,17 +217,13 @@ qx.Class.define("osparc.node.slideshow.BaseNodeView", {
217217

218218
__openServiceDetails: function() {
219219
const node = this.getNode();
220-
const serviceDetails = new osparc.info.ServiceLarge(node.getMetaData(), {
220+
const metadata = node.getMetaData();
221+
const serviceDetails = new osparc.info.ServiceLarge(metadata, {
221222
nodeId: node.getNodeId(),
222223
label: node.getLabel(),
223224
studyId: node.getStudy().getUuid()
224225
});
225-
const title = this.tr("Service information");
226-
const width = osparc.info.CardLarge.WIDTH;
227-
const height = osparc.info.CardLarge.HEIGHT;
228-
osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
229-
maxHeight: height
230-
});
226+
osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
231227
},
232228

233229
__openInstructions: function() {

‎services/static-webserver/client/source/class/osparc/service/ServiceListItem.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,7 @@ qx.Class.define("osparc.service.ServiceListItem", {
161161
osparc.store.Services.getService(key, version)
162162
.then(serviceMetadata => {
163163
const serviceDetails = new osparc.info.ServiceLarge(serviceMetadata);
164-
const title = this.tr("Service information");
165-
const width = osparc.info.CardLarge.WIDTH;
166-
const height = osparc.info.CardLarge.HEIGHT;
167-
osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
168-
maxHeight: height
169-
});
164+
osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
170165
});
171166
},
172167

0 commit comments

Comments
 (0)