Skip to content

Commit 588a777

Browse files
odeimaizodeimaiz
authored
🎨 Frontend: Improve study homepage (#4451)
1 parent 1a71293 commit 588a777

File tree

2 files changed

+66
-42
lines changed

2 files changed

+66
-42
lines changed

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

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", {
3535
},
3636

3737
events: {
38+
"thumbnailAdded": "qx.event.type.Event",
3839
"thumbnailTapped": "qx.event.type.Data"
3940
},
4041

@@ -72,10 +73,7 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", {
7273
const srvMetadata = osparc.utils.Services.getMetaData(node.getKey(), node.getVersion());
7374
if (srvMetadata && srvMetadata["thumbnail"] && !osparc.data.model.Node.isFrontend(node)) {
7475
const nodeId = node.getNodeId();
75-
if (!(nodeId in this.__thumbnailsPerNode)) {
76-
this.__thumbnailsPerNode[nodeId] = [];
77-
}
78-
this.__thumbnailsPerNode[nodeId].push({
76+
this.__addThumbnail(nodeId, {
7977
type: "serviceImage",
8078
thumbnailUrl: srvMetadata["thumbnail"],
8179
fileUrl: srvMetadata["thumbnail"]
@@ -84,13 +82,27 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", {
8482
});
8583
},
8684

85+
__addThumbnail: function(nodeId, thumbnailData) {
86+
if (!(nodeId in this.__thumbnailsPerNode)) {
87+
this.__thumbnailsPerNode[nodeId] = [];
88+
}
89+
this.__thumbnailsPerNode[nodeId].push(thumbnailData);
90+
this.fireEvent("thumbnailAdded");
91+
},
92+
93+
__setThumbnails: function(nodeId, thumbnailsData) {
94+
this.__thumbnailsPerNode[nodeId] = thumbnailsData;
95+
this.fireEvent("thumbnailAdded");
96+
},
97+
8798
addWorkbenchUIPreviewToSuggestions: function() {
8899
// make it first in the list
89-
this.__thumbnailsPerNode["0000-workbenchUIPreview"] = [{
100+
this.__setThumbnails("0000-workbenchUIPreview", [{
90101
type: "workbenchUIPreview",
91102
thumbnailUrl: osparc.product.Utils.getWorkbenhUIPreviewPath(),
92103
fileUrl: osparc.product.Utils.getWorkbenhUIPreviewPath()
93-
}];
104+
}]);
105+
94106
const themeManager = qx.theme.manager.Meta.getInstance();
95107
themeManager.addListener("changeTheme", () => this.addWorkbenchUIPreviewToSuggestions());
96108
},
@@ -100,11 +112,8 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", {
100112
const nodeId = previewsPerNode["node_id"];
101113
const previews = previewsPerNode["screenshots"];
102114
if (previews && previews.length) {
103-
if (!(nodeId in this.__thumbnailsPerNode)) {
104-
this.__thumbnailsPerNode[nodeId] = [];
105-
}
106115
previews.forEach(preview => {
107-
this.__thumbnailsPerNode[nodeId].push({
116+
this.__addThumbnail(nodeId, {
108117
type: preview["mimetype"],
109118
thumbnailUrl: preview["thumbnail_url"],
110119
fileUrl: preview["file_url"]

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

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
2828
maxHeight: this.self().LAYOUT_HEIGHT
2929
});
3030

31-
this.__studyData = studyData;
31+
const study = this.__study = new osparc.data.model.Study(studyData);
32+
// make nodes not movable
33+
study.setReadOnly(true);
3234

3335
this.__buildLayout();
3436
this.__attachEventHandlers();
@@ -42,7 +44,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
4244
},
4345

4446
members: {
45-
__studyData: null,
47+
__study: null,
4648

4749
_createChildControlImpl: function(id) {
4850
let control;
@@ -64,7 +66,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
6466
});
6567
break;
6668
}
67-
case "scroll-thumbnails": {
69+
case "thumbnail-suggestions": {
6870
control = this.__getThumbnailSuggestions();
6971
const thumbnailsLayout = this.getChildControl("thumbnails-layout");
7072
thumbnailsLayout.add(control);
@@ -90,49 +92,37 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
9092
hideRoot: false,
9193
simpleNodes: true
9294
});
93-
const study = new osparc.data.model.Study(this.__studyData);
9495
// Do not show the nodes tree if it's a mononode study
95-
if (study.isPipelineMononode()) {
96+
if (this.__study.isPipelineMononode()) {
9697
nodesTree.exclude();
9798
}
98-
nodesTree.setStudy(study);
9999
return nodesTree;
100100
},
101101

102102
__getThumbnailSuggestions: function() {
103-
const study = new osparc.data.model.Study(this.__studyData);
104103
const thumbnailSuggestions = new osparc.component.editor.ThumbnailSuggestions().set({
105104
minHeight: this.self().THUMBNAIL_SLIDER_HEIGHT,
106105
maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT
107106
});
108-
thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions();
109-
thumbnailSuggestions.setStudy(study);
110-
111-
const params = {
112-
url: {
113-
studyId: this.__studyData["uuid"]
114-
}
115-
};
116-
osparc.data.Resources.fetch("studyPreviews", "getPreviews", params)
117-
.then(previewsPerNodes => thumbnailSuggestions.addPreviewsToSuggestions(previewsPerNodes))
118-
.catch(err => console.error(err));
119-
120107
return thumbnailSuggestions;
121108
},
122109

123110
__buildLayout: function() {
124-
this.getChildControl("nodes-tree");
125-
this.getChildControl("scroll-thumbnails");
111+
// For now, do not show the Nodes Tree
112+
// this.getChildControl("nodes-tree");
113+
this.getChildControl("thumbnail-suggestions");
126114
this.getChildControl("thumbnail-viewer-layout");
127115
},
128116

129117
__attachEventHandlers: function() {
118+
/*
130119
const nodesTree = this.getChildControl("nodes-tree");
131-
const scrollThumbnails = this.getChildControl("scroll-thumbnails");
132120
nodesTree.addListener("changeSelectedNode", e => {
133121
const selectedNodeId = e.getData();
134122
scrollThumbnails.setSelectedNodeId(selectedNodeId);
135123
});
124+
*/
125+
const scrollThumbnails = this.getChildControl("thumbnail-suggestions");
136126
const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout");
137127
scrollThumbnails.addListener("thumbnailTapped", e => {
138128
const thumbnailData = e.getData();
@@ -167,12 +157,9 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
167157
},
168158

169159
__getWorkbenchUIPreview: function() {
170-
const study = new osparc.data.model.Study(this.__studyData);
171-
// make nodes not movable
172-
study.setReadOnly(true);
173160
const workbenchUIPreview = new osparc.component.workbench.WorkbenchUIPreview();
174-
workbenchUIPreview.setStudy(study);
175-
workbenchUIPreview.loadModel(study.getWorkbench());
161+
workbenchUIPreview.setStudy(this.__study);
162+
workbenchUIPreview.loadModel(this.__study.getWorkbench());
176163
workbenchUIPreview.addListener("appear", () => {
177164
// give it some time to take the bounds
178165
setTimeout(() => {
@@ -190,12 +177,40 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
190177
},
191178

192179
__initComponents: function() {
193-
const scrollThumbnails = this.getChildControl("scroll-thumbnails");
194-
scrollThumbnails.setSelectedNodeId(null);
180+
/*
181+
const nodesTree = this.getChildControl("nodes-tree");
182+
nodesTree.setStudy(this.__study);
183+
*/
184+
185+
const thumbnailSuggestions = this.getChildControl("thumbnail-suggestions");
186+
// make it visible only if there are thumbnails
187+
this.exclude();
188+
thumbnailSuggestions.addListener("thumbnailAdded", () => this.show());
189+
if (this.__showWorkbenchUIPreview()) {
190+
thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions();
191+
}
192+
thumbnailSuggestions.setStudy(this.__study);
193+
const params = {
194+
url: {
195+
studyId: this.__study.getUuid()
196+
}
197+
};
198+
osparc.data.Resources.fetch("studyPreviews", "getPreviews", params)
199+
.then(previewsPerNodes => thumbnailSuggestions.addPreviewsToSuggestions(previewsPerNodes))
200+
.catch(err => console.error(err));
195201

196-
const workbenchUIPreview = this.__getWorkbenchUIPreview();
197-
const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout");
198-
thumbnailViewerLayout.add(workbenchUIPreview);
202+
thumbnailSuggestions.setSelectedNodeId(null);
203+
204+
// Do not add the preview if the study is in App Mode
205+
if (this.__showWorkbenchUIPreview()) {
206+
const workbenchUIPreview = this.__getWorkbenchUIPreview();
207+
const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout");
208+
thumbnailViewerLayout.add(workbenchUIPreview);
209+
}
210+
},
211+
212+
__showWorkbenchUIPreview: function() {
213+
return !["guided", "app"].includes(this.__study.getUi().getMode());
199214
}
200215
}
201216
});

0 commit comments

Comments
 (0)