From c1fdd4c423a80e9273dfcbbfb5e6413fad421816 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Mon, 3 Jul 2023 16:31:47 +0200 Subject: [PATCH 1/6] Do not create three Studies, reuse the copy --- .../dashboard/StudyThumbnailExplorer.js | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js index 5fbeb96dd0b..3735e74c26a 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js @@ -28,7 +28,9 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { maxHeight: this.self().LAYOUT_HEIGHT }); - this.__studyData = studyData; + const study = this.__study = new osparc.data.model.Study(studyData); + // make nodes not movable + study.setReadOnly(true); this.__buildLayout(); this.__attachEventHandlers(); @@ -42,7 +44,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }, members: { - __studyData: null, + __study: null, _createChildControlImpl: function(id) { let control; @@ -90,27 +92,25 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { hideRoot: false, simpleNodes: true }); - const study = new osparc.data.model.Study(this.__studyData); // Do not show the nodes tree if it's a mononode study - if (study.isPipelineMononode()) { + if (this.__study.isPipelineMononode()) { nodesTree.exclude(); } - nodesTree.setStudy(study); + nodesTree.setStudy(this.__study); return nodesTree; }, __getThumbnailSuggestions: function() { - const study = new osparc.data.model.Study(this.__studyData); const thumbnailSuggestions = new osparc.component.editor.ThumbnailSuggestions().set({ minHeight: this.self().THUMBNAIL_SLIDER_HEIGHT, maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT }); thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions(); - thumbnailSuggestions.setStudy(study); + thumbnailSuggestions.setStudy(this.__study); const params = { url: { - studyId: this.__studyData["uuid"] + studyId: this.__study.getUuid() } }; osparc.data.Resources.fetch("studyPreviews", "getPreviews", params) @@ -167,12 +167,9 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }, __getWorkbenchUIPreview: function() { - const study = new osparc.data.model.Study(this.__studyData); - // make nodes not movable - study.setReadOnly(true); const workbenchUIPreview = new osparc.component.workbench.WorkbenchUIPreview(); - workbenchUIPreview.setStudy(study); - workbenchUIPreview.loadModel(study.getWorkbench()); + workbenchUIPreview.setStudy(this.__study); + workbenchUIPreview.loadModel(this.__study.getWorkbench()); workbenchUIPreview.addListener("appear", () => { // give it some time to take the bounds setTimeout(() => { From 6bba3091213e6694e259ef712361d95b64565445 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Mon, 3 Jul 2023 17:01:33 +0200 Subject: [PATCH 2/6] do not show the Nodes Tree --- .../class/osparc/dashboard/StudyThumbnailExplorer.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js index 3735e74c26a..8ed6d0de8c5 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js @@ -121,18 +121,21 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }, __buildLayout: function() { - this.getChildControl("nodes-tree"); + // For now, do not show the Nodes Tree + // this.getChildControl("nodes-tree"); this.getChildControl("scroll-thumbnails"); this.getChildControl("thumbnail-viewer-layout"); }, __attachEventHandlers: function() { + /* const nodesTree = this.getChildControl("nodes-tree"); - const scrollThumbnails = this.getChildControl("scroll-thumbnails"); nodesTree.addListener("changeSelectedNode", e => { const selectedNodeId = e.getData(); scrollThumbnails.setSelectedNodeId(selectedNodeId); }); + */ + const scrollThumbnails = this.getChildControl("scroll-thumbnails"); const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout"); scrollThumbnails.addListener("thumbnailTapped", e => { const thumbnailData = e.getData(); From e1eda460a3d3b42a9db07ca6f322f331b1db0f71 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 4 Jul 2023 07:31:45 +0200 Subject: [PATCH 3/6] Do not add the preview if the study is in App Mode --- .../class/osparc/dashboard/StudyThumbnailExplorer.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js index 8ed6d0de8c5..7a4efeac104 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js @@ -193,9 +193,12 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { const scrollThumbnails = this.getChildControl("scroll-thumbnails"); scrollThumbnails.setSelectedNodeId(null); - const workbenchUIPreview = this.__getWorkbenchUIPreview(); - const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout"); - thumbnailViewerLayout.add(workbenchUIPreview); + // Do not add the preview if the study is in App Mode + if (!["guided", "app"].includes(this.__study.getUi())) { + const workbenchUIPreview = this.__getWorkbenchUIPreview(); + const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout"); + thumbnailViewerLayout.add(workbenchUIPreview); + } } } }); From 5a567e960bc653b35b1af02f38ded07f511bc331 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 4 Jul 2023 08:25:24 +0200 Subject: [PATCH 4/6] minor --- .../osparc/dashboard/StudyThumbnailExplorer.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js index 7a4efeac104..55d058843cb 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js @@ -66,7 +66,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }); break; } - case "scroll-thumbnails": { + case "thumbnails-scroll": { control = this.__getThumbnailSuggestions(); const thumbnailsLayout = this.getChildControl("thumbnails-layout"); thumbnailsLayout.add(control); @@ -105,7 +105,9 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { minHeight: this.self().THUMBNAIL_SLIDER_HEIGHT, maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT }); - thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions(); + if (this.__showWorkbenchUIPreview()) { + thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions(); + } thumbnailSuggestions.setStudy(this.__study); const params = { @@ -123,7 +125,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { __buildLayout: function() { // For now, do not show the Nodes Tree // this.getChildControl("nodes-tree"); - this.getChildControl("scroll-thumbnails"); + this.getChildControl("thumbnails-scroll"); this.getChildControl("thumbnail-viewer-layout"); }, @@ -135,7 +137,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { scrollThumbnails.setSelectedNodeId(selectedNodeId); }); */ - const scrollThumbnails = this.getChildControl("scroll-thumbnails"); + const scrollThumbnails = this.getChildControl("thumbnails-scroll"); const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout"); scrollThumbnails.addListener("thumbnailTapped", e => { const thumbnailData = e.getData(); @@ -190,15 +192,19 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }, __initComponents: function() { - const scrollThumbnails = this.getChildControl("scroll-thumbnails"); + const scrollThumbnails = this.getChildControl("thumbnails-scroll"); scrollThumbnails.setSelectedNodeId(null); // Do not add the preview if the study is in App Mode - if (!["guided", "app"].includes(this.__study.getUi())) { + if (this.__showWorkbenchUIPreview()) { const workbenchUIPreview = this.__getWorkbenchUIPreview(); const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout"); thumbnailViewerLayout.add(workbenchUIPreview); } + }, + + __showWorkbenchUIPreview: function() { + return !["guided", "app"].includes(this.__study.getUi().getMode()); } } }); From c14f48fdc0025ab67284bbd4850bc0a506d70d9a Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 4 Jul 2023 09:35:44 +0200 Subject: [PATCH 5/6] refactoring --- .../component/editor/ThumbnailSuggestions.js | 29 ++++++++----- .../dashboard/StudyThumbnailExplorer.js | 42 ++++++++++--------- 2 files changed, 42 insertions(+), 29 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/component/editor/ThumbnailSuggestions.js b/services/static-webserver/client/source/class/osparc/component/editor/ThumbnailSuggestions.js index 08fb7de2454..ab964ef6198 100644 --- a/services/static-webserver/client/source/class/osparc/component/editor/ThumbnailSuggestions.js +++ b/services/static-webserver/client/source/class/osparc/component/editor/ThumbnailSuggestions.js @@ -35,6 +35,7 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", { }, events: { + "thumbnailAdded": "qx.event.type.Event", "thumbnailTapped": "qx.event.type.Data" }, @@ -72,10 +73,7 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", { const srvMetadata = osparc.utils.Services.getMetaData(node.getKey(), node.getVersion()); if (srvMetadata && srvMetadata["thumbnail"] && !osparc.data.model.Node.isFrontend(node)) { const nodeId = node.getNodeId(); - if (!(nodeId in this.__thumbnailsPerNode)) { - this.__thumbnailsPerNode[nodeId] = []; - } - this.__thumbnailsPerNode[nodeId].push({ + this.__addThumbnail(nodeId, { type: "serviceImage", thumbnailUrl: srvMetadata["thumbnail"], fileUrl: srvMetadata["thumbnail"] @@ -84,13 +82,27 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", { }); }, + __addThumbnail: function(nodeId, thumbnailData) { + if (!(nodeId in this.__thumbnailsPerNode)) { + this.__thumbnailsPerNode[nodeId] = []; + } + this.__thumbnailsPerNode[nodeId].push(thumbnailData); + this.fireEvent("thumbnailAdded"); + }, + + __setThumbnails: function(nodeId, thumbnailsData) { + this.__thumbnailsPerNode[nodeId] = thumbnailsData; + this.fireEvent("thumbnailAdded"); + }, + addWorkbenchUIPreviewToSuggestions: function() { // make it first in the list - this.__thumbnailsPerNode["0000-workbenchUIPreview"] = [{ + this.__setThumbnails("0000-workbenchUIPreview", [{ type: "workbenchUIPreview", thumbnailUrl: osparc.product.Utils.getWorkbenhUIPreviewPath(), fileUrl: osparc.product.Utils.getWorkbenhUIPreviewPath() - }]; + }]); + const themeManager = qx.theme.manager.Meta.getInstance(); themeManager.addListener("changeTheme", () => this.addWorkbenchUIPreviewToSuggestions()); }, @@ -100,11 +112,8 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", { const nodeId = previewsPerNode["node_id"]; const previews = previewsPerNode["screenshots"]; if (previews && previews.length) { - if (!(nodeId in this.__thumbnailsPerNode)) { - this.__thumbnailsPerNode[nodeId] = []; - } previews.forEach(preview => { - this.__thumbnailsPerNode[nodeId].push({ + this.__addThumbnail(nodeId, { type: preview["mimetype"], thumbnailUrl: preview["thumbnail_url"], fileUrl: preview["file_url"] diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js index 55d058843cb..685648009f2 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js @@ -66,7 +66,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }); break; } - case "thumbnails-scroll": { + case "thumbnail-suggestions": { control = this.__getThumbnailSuggestions(); const thumbnailsLayout = this.getChildControl("thumbnails-layout"); thumbnailsLayout.add(control); @@ -96,7 +96,6 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { if (this.__study.isPipelineMononode()) { nodesTree.exclude(); } - nodesTree.setStudy(this.__study); return nodesTree; }, @@ -105,19 +104,6 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { minHeight: this.self().THUMBNAIL_SLIDER_HEIGHT, maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT }); - if (this.__showWorkbenchUIPreview()) { - thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions(); - } - thumbnailSuggestions.setStudy(this.__study); - - const params = { - url: { - studyId: this.__study.getUuid() - } - }; - osparc.data.Resources.fetch("studyPreviews", "getPreviews", params) - .then(previewsPerNodes => thumbnailSuggestions.addPreviewsToSuggestions(previewsPerNodes)) - .catch(err => console.error(err)); return thumbnailSuggestions; }, @@ -125,7 +111,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { __buildLayout: function() { // For now, do not show the Nodes Tree // this.getChildControl("nodes-tree"); - this.getChildControl("thumbnails-scroll"); + this.getChildControl("thumbnail-suggestions"); this.getChildControl("thumbnail-viewer-layout"); }, @@ -137,7 +123,7 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { scrollThumbnails.setSelectedNodeId(selectedNodeId); }); */ - const scrollThumbnails = this.getChildControl("thumbnails-scroll"); + const scrollThumbnails = this.getChildControl("thumbnail-suggestions"); const thumbnailViewerLayout = this.getChildControl("thumbnail-viewer-layout"); scrollThumbnails.addListener("thumbnailTapped", e => { const thumbnailData = e.getData(); @@ -192,8 +178,26 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }, __initComponents: function() { - const scrollThumbnails = this.getChildControl("thumbnails-scroll"); - scrollThumbnails.setSelectedNodeId(null); + /* + const nodesTree = this.getChildControl("nodes-tree"); + nodesTree.setStudy(this.__study); + */ + + const thumbnailSuggestions = this.getChildControl("thumbnail-suggestions"); + if (this.__showWorkbenchUIPreview()) { + thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions(); + } + thumbnailSuggestions.setStudy(this.__study); + const params = { + url: { + studyId: this.__study.getUuid() + } + }; + osparc.data.Resources.fetch("studyPreviews", "getPreviews", params) + .then(previewsPerNodes => thumbnailSuggestions.addPreviewsToSuggestions(previewsPerNodes)) + .catch(err => console.error(err)); + + thumbnailSuggestions.setSelectedNodeId(null); // Do not add the preview if the study is in App Mode if (this.__showWorkbenchUIPreview()) { From 70d309a5d16005960a430b7b55b7e67ac6594f61 Mon Sep 17 00:00:00 2001 From: Odei Maiz Date: Tue, 4 Jul 2023 09:40:48 +0200 Subject: [PATCH 6/6] Do not show the thumbnail explorer if there are no thumbnails --- .../source/class/osparc/dashboard/StudyThumbnailExplorer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js index 685648009f2..9ed2efb9f1b 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js @@ -104,7 +104,6 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { minHeight: this.self().THUMBNAIL_SLIDER_HEIGHT, maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT }); - return thumbnailSuggestions; }, @@ -184,6 +183,9 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { */ const thumbnailSuggestions = this.getChildControl("thumbnail-suggestions"); + // make it visible only if there are thumbnails + this.exclude(); + thumbnailSuggestions.addListener("thumbnailAdded", () => this.show()); if (this.__showWorkbenchUIPreview()) { thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions(); }