diff --git a/services/static-webserver/client/source/class/osparc/component/snapshots/IterationsView.js b/services/static-webserver/client/source/class/osparc/component/snapshots/IterationsView.js index 547b64f4c05..bce411446e9 100644 --- a/services/static-webserver/client/source/class/osparc/component/snapshots/IterationsView.js +++ b/services/static-webserver/client/source/class/osparc/component/snapshots/IterationsView.js @@ -138,7 +138,6 @@ qx.Class.define("osparc.component.snapshots.IterationsView", { const iterationData = this.__iterations[idx]; const iteration = new osparc.data.model.Study(iterationData); - iteration.buildWorkbench(); iteration.setReadOnly(true); iteration.nodeUpdated(dataUpdate); const iterationDataUpdated = iteration.serialize(false); @@ -171,7 +170,6 @@ qx.Class.define("osparc.component.snapshots.IterationsView", { if (idx > -1) { const iterationData = this.__iterations[idx]; const iteration = new osparc.data.model.Study(iterationData); - iteration.buildWorkbench(); iteration.setReadOnly(true); this.__iterationPreview.setStudy(iteration); this.__iterationPreview.loadModel(iteration.getWorkbench()); @@ -221,7 +219,6 @@ qx.Class.define("osparc.component.snapshots.IterationsView", { } const study = new osparc.data.model.Study(studyData); - study.buildWorkbench(); study.setReadOnly(true); this.__iterationPreview.set({ study: study diff --git a/services/static-webserver/client/source/class/osparc/component/snapshots/SnapshotsView.js b/services/static-webserver/client/source/class/osparc/component/snapshots/SnapshotsView.js index 1f78377cd3e..eb88e6e3002 100644 --- a/services/static-webserver/client/source/class/osparc/component/snapshots/SnapshotsView.js +++ b/services/static-webserver/client/source/class/osparc/component/snapshots/SnapshotsView.js @@ -219,7 +219,6 @@ qx.Class.define("osparc.component.snapshots.SnapshotsView", { studyData["workbench"] = data["workbench"]; studyData["ui"] = data["ui"]; const study = new osparc.data.model.Study(studyData); - study.buildWorkbench(); study.setReadOnly(true); this.__snapshotPreview.set({ study: study diff --git a/services/static-webserver/client/source/class/osparc/component/workbench/WorkbenchUI.js b/services/static-webserver/client/source/class/osparc/component/workbench/WorkbenchUI.js index ce88a838c68..d5a0a1a5366 100644 --- a/services/static-webserver/client/source/class/osparc/component/workbench/WorkbenchUI.js +++ b/services/static-webserver/client/source/class/osparc/component/workbench/WorkbenchUI.js @@ -1933,7 +1933,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", { if (!this.isPropertyInitialized("study") || this.__startHint === null) { return; } - const isEmptyWorkspace = this.getStudy().isPipelineEmtpy(); + const isEmptyWorkspace = this.getStudy().isPipelineEmpty(); this.__startHint.setVisibility(isEmptyWorkspace ? "visible" : "excluded"); if (isEmptyWorkspace) { const hintBounds = this.__startHint.getBounds() || this.__startHint.getSizeHint(); diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js index 01e65bd9cc1..36200972e36 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js @@ -40,8 +40,8 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", { }, statics: { - WIDTH: 710, - HEIGHT: 710, + WIDTH: 715, + HEIGHT: 715, popUpInWindow: function(moreOpts) { const title = qx.locale.Manager.tr("Details"); 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 d1676bff7aa..f5292c47a33 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js @@ -86,19 +86,21 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { }, __getNodesTree: function() { - const study = new osparc.data.model.Study(this.__studyData); - study.buildWorkbench(); const nodesTree = new osparc.component.widget.NodesTree().set({ 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()) { + nodesTree.exclude(); + } nodesTree.setStudy(study); return nodesTree; }, __getThumbnailSuggestions: function() { const study = new osparc.data.model.Study(this.__studyData); - study.buildWorkbench(); const thumbnailSuggestions = new osparc.component.editor.ThumbnailSuggestions().set({ minHeight: this.self().THUMBNAIL_SLIDER_HEIGHT, maxHeight: this.self().THUMBNAIL_SLIDER_HEIGHT @@ -153,7 +155,6 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", { __getWorkbenchUIPreview: function() { const study = new osparc.data.model.Study(this.__studyData); - study.buildWorkbench(); // make nodes not movable study.setReadOnly(true); const workbenchUIPreview = new osparc.component.workbench.WorkbenchUIPreview(); diff --git a/services/static-webserver/client/source/class/osparc/data/model/Study.js b/services/static-webserver/client/source/class/osparc/data/model/Study.js index 229f92e586b..d469505520c 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/Study.js +++ b/services/static-webserver/client/source/class/osparc/data/model/Study.js @@ -65,6 +65,8 @@ qx.Class.define("osparc.data.model.Study", { workbench.setStudy(this); this.setUi(new osparc.data.model.StudyUI(studyData.ui)); + + this.__buildWorkbench(); }, properties: { @@ -311,7 +313,7 @@ qx.Class.define("osparc.data.model.Study", { }, members: { - buildWorkbench: function() { + __buildWorkbench: function() { this.getWorkbench().buildWorkbench(); }, @@ -457,10 +459,14 @@ qx.Class.define("osparc.data.model.Study", { return false; }, - isPipelineEmtpy: function() { + isPipelineEmpty: function() { return Object.keys(this.getWorkbench().getNodes()).length === 0; }, + isPipelineMononode: function() { + return Object.keys(this.getWorkbench().getNodes()).length === 1; + }, + __applyAccessRights: function(accessRights) { if (this.isSnapshot()) { this.setReadOnly(true); diff --git a/services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js b/services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js index 7d06dca4805..a51333dee27 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js +++ b/services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js @@ -171,7 +171,6 @@ qx.Class.define("osparc.desktop.StudyEditor", { this.__reloadSnapshotsAndIterations(); - study.buildWorkbench(); study.openStudy() .then(() => { this.__lastSavedStudy = study.serialize(); diff --git a/services/static-webserver/client/source/class/osparc/info/MergedLarge.js b/services/static-webserver/client/source/class/osparc/info/MergedLarge.js index a9ff7b47519..48b6aeb7a87 100644 --- a/services/static-webserver/client/source/class/osparc/info/MergedLarge.js +++ b/services/static-webserver/client/source/class/osparc/info/MergedLarge.js @@ -218,7 +218,7 @@ qx.Class.define("osparc.info.MergedLarge", { }, __createExtraInfo: function(extraInfo) { - const moreInfo = osparc.info.StudyUtils.createExtraInfo(extraInfo).set({ + const moreInfo = osparc.info.StudyUtils.createExtraInfoGrid(extraInfo).set({ width: osparc.info.CardLarge.EXTRA_INFO_WIDTH }); diff --git a/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js b/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js index 6b7f804eafd..977e62a18fc 100644 --- a/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js +++ b/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js @@ -179,19 +179,27 @@ qx.Class.define("osparc.info.ServiceLarge", { __extraInfo: function() { const extraInfo = [{ - label: this.tr("Version"), + label: this.tr("KEY"), + view: this.__createKey(), + action: { + button: osparc.utils.Utils.getCopyButton(), + callback: this.__copyKeyToClipboard, + ctx: this + } + }, { + label: this.tr("VERSION"), view: this.__createVersion(), action: null }, { - label: this.tr("Contact"), + label: this.tr("CONTACT"), view: this.__createContact(), action: null }, { - label: this.tr("Authors"), + label: this.tr("AUTHORS"), view: this.__createAuthors(), action: null }, { - label: this.tr("Access Rights"), + label: this.tr("ACCESS RIGHTS"), view: this.__createAccessRights(), action: { button: osparc.utils.Utils.getViewButton(), @@ -200,9 +208,12 @@ qx.Class.define("osparc.info.ServiceLarge", { } }]; - if (this.getService()["classifiers"]) { + if ( + osparc.product.Utils.showClassifiers() && + this.getService()["classifiers"] + ) { extraInfo.push({ - label: this.tr("Classifiers"), + label: this.tr("CLASSIFIERS"), view: this.__createClassifiers(), action: { button: osparc.utils.Utils.getViewButton(), @@ -218,7 +229,7 @@ qx.Class.define("osparc.info.ServiceLarge", { osparc.component.metadata.Quality.isEnabled(this.getService()["quality"]) ) { extraInfo.push({ - label: this.tr("Quality"), + label: this.tr("QUAILITY"), view: this.__createQuality(), action: { button: osparc.utils.Utils.getViewButton(), @@ -230,7 +241,7 @@ qx.Class.define("osparc.info.ServiceLarge", { if (this.getNodeId()) { extraInfo.splice(0, 0, { - label: this.tr("Service ID"), + label: this.tr("SERVICE ID"), view: this.__createNodeId(), action: { button: osparc.utils.Utils.getCopyButton(), @@ -240,16 +251,6 @@ qx.Class.define("osparc.info.ServiceLarge", { }); } - extraInfo.splice(1, 0, { - label: this.tr("Key"), - view: this.__createKey(), - action: { - button: osparc.utils.Utils.getCopyButton(), - callback: this.__copyKeyToClipboard, - ctx: this - } - }); - return extraInfo; }, diff --git a/services/static-webserver/client/source/class/osparc/info/StudyLarge.js b/services/static-webserver/client/source/class/osparc/info/StudyLarge.js index 351d5307bac..d8ba58b925a 100644 --- a/services/static-webserver/client/source/class/osparc/info/StudyLarge.js +++ b/services/static-webserver/client/source/class/osparc/info/StudyLarge.js @@ -61,73 +61,39 @@ qx.Class.define("osparc.info.StudyLarge", { _rebuildLayout: function() { this._removeAll(); - const title = this.__createTitle(); + const title = osparc.info.StudyUtils.createTitle(this.getStudy()).set({ + font: "text-14" + }); const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor); - this._add(titleLayout); - - const extraInfo = this.__extraInfo(); - const extraInfoLayout = this.__createExtraInfo(extraInfo); - - if (osparc.product.Utils.showStudyPreview()) { - const studyThumbnailExplorer = new osparc.dashboard.StudyThumbnailExplorer(this.getStudy().serialize()); - this._add(studyThumbnailExplorer); - } - - const bounds = this.getBounds(); - const offset = 30; - let widgetWidth = bounds ? bounds.width - offset : 500 - offset; - let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING; - const maxThumbnailHeight = extraInfo.length*20; - const slim = widgetWidth < osparc.info.CardLarge.EXTRA_INFO_WIDTH + osparc.info.CardLarge.THUMBNAIL_MIN_WIDTH + 2 * osparc.info.CardLarge.PADDING - 20; - let hBox = null; - if (slim) { - this._add(extraInfoLayout); - } else { - hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({ - alignX: "center" - })); - hBox.add(extraInfoLayout); - thumbnailWidth -= osparc.info.CardLarge.EXTRA_INFO_WIDTH; - } - thumbnailWidth = Math.min(thumbnailWidth - 20, osparc.info.CardLarge.THUMBNAIL_MAX_WIDTH); - const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight); - const thumbnailLayout = this.__createViewWithEdit(thumbnail, this.__openThumbnailEditor); - thumbnailLayout.getLayout().set({ - alignX: "center" + const button = new qx.ui.form.Button(null, "@FontAwesome5Solid/copy/12").set({ + label: osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Id", + toolTipText: "Copy " + osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Id" }); - if (slim) { - this._add(thumbnailLayout); - } else { - hBox.add(thumbnailLayout, { - flex: 1 - }); - this._add(hBox); - } - + button.addListener("execute", () => osparc.utils.Utils.copyTextToClipboard(this.getStudy().getUuid())); + let autoStartButton = null; if (osparc.product.Utils.showDisableServiceAutoStart() && this.__canIWrite()) { - const autoStart = this.__createDisableServiceAutoStart(); - this._add(autoStart); + autoStartButton = this.__createDisableServiceAutoStart(); } - if (this.getStudy().getTags().length || this.__canIWrite()) { - const tags = this.__createTags(); - const editInTitle = this.__createViewWithEdit(tags.getChildren()[0], null); - tags.addAt(editInTitle, 0); - if (this.__canIWrite()) { - const editButton = editInTitle.getChildren()[1]; - editButton.setIcon("@FontAwesome5Solid/eye/12"); - editButton.addListener("execute", () => this.fireEvent("openTags"), this); - osparc.utils.Utils.setIdToWidget(editButton, "editStudyEditTagsBtn"); - } - this._add(tags); + const titleAndCopyLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)); + titleAndCopyLayout.add(titleLayout); + titleAndCopyLayout.add(new qx.ui.core.Spacer(), { + flex: 1 + }); + titleAndCopyLayout.add(button); + if (autoStartButton) { + titleAndCopyLayout.add(autoStartButton); } + this._add(titleAndCopyLayout); - if (this.getStudy().getDescription() || this.__canIWrite()) { - const description = this.__createDescription(); - const editInTitle = this.__createViewWithEdit(description.getChildren()[0], this.__openDescriptionEditor); - description.addAt(editInTitle, 0); - this._add(description); + if (osparc.product.Utils.showStudyPreview() && !this.getStudy().isPipelineEmpty()) { + const studyThumbnailExplorer = new osparc.dashboard.StudyThumbnailExplorer(this.getStudy().serialize()); + this._add(studyThumbnailExplorer); } + + const extraInfo = this.__extraInfo(); + const extraInfoLayout = this.__createExtraInfo(extraInfo); + this._add(extraInfoLayout); }, __createViewWithEdit: function(view, cb) { @@ -147,113 +113,101 @@ qx.Class.define("osparc.info.StudyLarge", { }, __extraInfo: function() { - const extraInfo = [{ - label: this.tr("Author"), - view: this.__createOwner(), - action: null - }, { - label: this.tr("Creation Date"), - view: this.__createCreationDate(), - action: null - }, { - label: this.tr("Last Modified"), - view: this.__createLastChangeDate(), - action: null - }, { - label: this.tr("Access Rights"), - view: this.__createAccessRights(), - action: { - button: osparc.utils.Utils.getViewButton(), - callback: this.isOpenOptions() ? this.__openAccessRights : "openAccessRights", - ctx: this + const extraInfo = { + "AUTHOR": { + label: this.tr("AUTHOR"), + view: osparc.info.StudyUtils.createOwner(this.getStudy()), + action: null + }, + "ACCESS_RIGHTS": { + label: this.tr("ACCESS RIGHTS"), + view: osparc.info.StudyUtils.createAccessRights(this.getStudy()), + action: { + button: osparc.utils.Utils.getViewButton(), + callback: this.isOpenOptions() ? this.__openAccessRights : "openAccessRights", + ctx: this + } + }, + "CREATED": { + label: this.tr("CREATED"), + view: osparc.info.StudyUtils.createCreationDate(this.getStudy()), + action: null + }, + "MODIFIED": { + label: this.tr("MODIFIED"), + view: osparc.info.StudyUtils.createLastChangeDate(this.getStudy()), + action: null + }, + "TAGS": { + label: this.tr("TAGS"), + view: osparc.info.StudyUtils.createTags(this.getStudy()), + action: { + button: osparc.utils.Utils.getViewButton(), + callback: this.isOpenOptions() ? this.__openTagsEditor : "openTags", + ctx: this + } + }, + "DESCRIPTION": { + label: this.tr("DESCRIPTION"), + view: osparc.info.StudyUtils.createDescription(this.getStudy(), 120), + action: { + button: osparc.utils.Utils.getEditButton(), + callback: this.__canIWrite() ? this.__openDescriptionEditor : null, + ctx: this + } + }, + "THUMBNAIL": { + label: this.tr("THUMBNAIL"), + view: this.__createThumbnail(), + action: { + button: osparc.utils.Utils.getEditButton(), + callback: this.__canIWrite() ? this.__openThumbnailEditor : null, + ctx: this + } } - }]; + }; if ( osparc.product.Utils.showQuality() && this.getStudy().getQuality() && osparc.component.metadata.Quality.isEnabled(this.getStudy().getQuality()) ) { - extraInfo.push({ - label: this.tr("Quality"), - view: this.__createQuality(), + extraInfo["QUALITY"] = { + label: this.tr("QUALITY"), + view: osparc.info.StudyUtils.createQuality(this.getStudy()), action: { button: osparc.utils.Utils.getViewButton(), callback: this.isOpenOptions() ? this.__openQuality : "openQuality", ctx: this } - }); + }; } if (osparc.product.Utils.showClassifiers()) { - extraInfo.push({ - label: this.tr("Classifiers"), - view: this.__createClassifiers(), + extraInfo["CLASSIFIERS"] = { + label: this.tr("CLASSIFIERS"), + view: osparc.info.StudyUtils.createClassifiers(this.getStudy()), action: (this.getStudy().getClassifiers().length || this.__canIWrite()) ? { button: osparc.utils.Utils.getViewButton(), callback: this.isOpenOptions() ? this.__openClassifiers : "openClassifiers", ctx: this } : null - }); + }; } - extraInfo.splice(0, 0, { - label: osparc.utils.Utils.capitalize(osparc.product.Utils.getStudyAlias()) + " ID", - view: this.__createStudyId(), - action: { - button: osparc.utils.Utils.getCopyButton(), - callback: this.__copyUuidToClipboard, - ctx: this - } - }); - return extraInfo; }, __createExtraInfo: function(extraInfo) { - const moreInfo = osparc.info.StudyUtils.createExtraInfo(extraInfo).set({ - width: osparc.info.CardLarge.EXTRA_INFO_WIDTH - }); - + const moreInfo = osparc.info.StudyUtils.createExtraInfoGrid(extraInfo); return moreInfo; }, - __createTitle: function() { - const title = osparc.info.StudyUtils.createTitle(this.getStudy()).set({ - font: "text-14" - }); - return title; - }, - __createStudyId: function() { return osparc.info.StudyUtils.createUuid(this.getStudy()); }, - __createOwner: function() { - return osparc.info.StudyUtils.createOwner(this.getStudy()); - }, - - __createCreationDate: function() { - return osparc.info.StudyUtils.createCreationDate(this.getStudy()); - }, - - __createLastChangeDate: function() { - return osparc.info.StudyUtils.createLastChangeDate(this.getStudy()); - }, - - __createAccessRights: function() { - return osparc.info.StudyUtils.createAccessRights(this.getStudy()); - }, - - __createClassifiers: function() { - return osparc.info.StudyUtils.createClassifiers(this.getStudy()); - }, - - __createQuality: function() { - return osparc.info.StudyUtils.createQuality(this.getStudy()); - }, - - __createThumbnail: function(maxWidth, maxHeight = 160) { + __createThumbnail: function(maxWidth = 160, maxHeight = 100) { return osparc.info.StudyUtils.createThumbnail(this.getStudy(), maxWidth, maxHeight); }, @@ -261,15 +215,6 @@ qx.Class.define("osparc.info.StudyLarge", { return osparc.info.StudyUtils.createDisableServiceAutoStart(this.getStudy()); }, - __createTags: function() { - return osparc.info.StudyUtils.createTags(this.getStudy()); - }, - - __createDescription: function() { - const maxHeight = 400; - return osparc.info.StudyUtils.createDescription(this.getStudy(), maxHeight); - }, - __openTitleEditor: function() { const title = this.tr("Edit Title"); const titleEditor = new osparc.component.widget.Renamer(this.getStudy().getName(), null, title); @@ -284,13 +229,9 @@ qx.Class.define("osparc.info.StudyLarge", { titleEditor.open(); }, - __copyUuidToClipboard: function() { - osparc.utils.Utils.copyTextToClipboard(this.getStudy().getUuid()); - }, - __openAccessRights: function() { const permissionsView = osparc.info.StudyUtils.openAccessRights(this.getStudy().serialize()); - permissionsView.addListener("updateStudy", e => { + permissionsView.addListener("updateAccessRights", e => { const updatedData = e.getData(); this.getStudy().setAccessRights(updatedData["accessRights"]); this.fireDataEvent("updateStudy", updatedData); diff --git a/services/static-webserver/client/source/class/osparc/info/StudyMedium.js b/services/static-webserver/client/source/class/osparc/info/StudyMedium.js index f447e219a6f..400cef5de74 100644 --- a/services/static-webserver/client/source/class/osparc/info/StudyMedium.js +++ b/services/static-webserver/client/source/class/osparc/info/StudyMedium.js @@ -20,18 +20,18 @@ qx.Class.define("osparc.info.StudyMedium", { extend: qx.ui.core.Widget, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study */ construct: function(study) { this.base(arguments); this.set({ - padding: this.self().PADDING, + padding: 0, backgroundColor: "background-main" }); - this._setLayout(new qx.ui.layout.VBox(8)); + this._setLayout(new qx.ui.layout.VBox(20)); - if (study instanceof osparc.data.model.Study) { + if (study) { this.setStudy(study); } @@ -47,85 +47,31 @@ qx.Class.define("osparc.info.StudyMedium", { } }, - statics: { - PADDING: 0, - EXTRA_INFO_WIDTH: 220, - THUMBNAIL_MIN_WIDTH: 110, - THUMBNAIL_MAX_WIDTH: 180 - }, - members: { - /** - * @param studyData {Object} Serialized Study Object - */ - setStudyData: function(studyData) { - const study = new osparc.data.model.Study(studyData, false); - this.setStudy(study); - }, - - checkResize: function(bounds) { - this.__rebuildLayout(bounds.width); - }, - __applyStudy: function() { this.__rebuildLayout(); }, - __rebuildLayout: function(width) { + __rebuildLayout: function() { this._removeAll(); const nameAndMenuButton = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({ alignY: "middle" })); - nameAndMenuButton.add(this.__createTitle(), { + nameAndMenuButton.add(osparc.info.StudyUtils.createTitle(this.getStudy()), { flex: 1 }); nameAndMenuButton.add(this.__createMenuButton()); this._add(nameAndMenuButton); - const extraInfo = this.__extraInfo(); - const extraInfoLayout = this.__createExtraInfo(extraInfo); - - const bounds = this.getBounds(); - let widgetWidth = null; - const offset = 10; - if (width) { - widgetWidth = width - offset; - } else if (bounds) { - widgetWidth = bounds.width - offset; - } else { - widgetWidth = 350 - offset; - } - let thumbnailWidth = widgetWidth - 2*this.self().PADDING; - const maxThumbnailHeight = extraInfo.length*20; - const slim = widgetWidth < this.self().EXTRA_INFO_WIDTH + this.self().THUMBNAIL_MIN_WIDTH + 2*this.self().PADDING; - if (slim) { - this._add(extraInfoLayout); - thumbnailWidth = Math.min(thumbnailWidth, this.self().THUMBNAIL_MAX_WIDTH); - const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight); - if (thumbnail) { - this._add(thumbnail); - } - } else { - const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({ - alignX: "center" - })); - hBox.add(extraInfoLayout); - thumbnailWidth -= this.self().EXTRA_INFO_WIDTH; - thumbnailWidth = Math.min(thumbnailWidth, this.self().THUMBNAIL_MAX_WIDTH); - const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight); - if (thumbnail) { - hBox.add(thumbnail, { - flex: 1 - }); - } - this._add(hBox); + const thumbnail = this.__createThumbnail(160, 100); + if (thumbnail) { + this._add(thumbnail); } - const description = this.__createDescription(); - if (description) { - this._add(description); - } + const extraInfo = this.__extraInfo(); + const extraInfoLayout = this.__createExtraInfo(extraInfo); + this._add(extraInfoLayout); }, __createMenuButton: function() { @@ -151,33 +97,23 @@ qx.Class.define("osparc.info.StudyMedium", { __getMoreInfoMenuButton: function() { const moreInfoButton = new qx.ui.menu.Button(this.tr("More Info")); - moreInfoButton.addListener("execute", () => { - this.__openStudyDetails(); - }, this); + moreInfoButton.addListener("execute", () => this.__openStudyDetails(), this); return moreInfoButton; }, __extraInfo: function() { const extraInfo = [{ - label: this.tr("Author"), - view: this.__createOwner(), - action: null + label: this.tr("AUTHOR"), + view: osparc.info.StudyUtils.createOwner(this.getStudy()) }, { - label: this.tr("Creation Date"), - view: this.__createCreationDate(), - action: null + label: this.tr("ACCESS RIGHTS"), + view: osparc.info.StudyUtils.createAccessRights(this.getStudy()) }, { - label: this.tr("Last Modified"), - view: this.__createLastChangeDate(), - action: null + label: this.tr("CREATED"), + view: osparc.info.StudyUtils.createCreationDate(this.getStudy()) }, { - label: this.tr("Access Rights"), - view: this.__createAccessRights(), - action: { - button: osparc.utils.Utils.getViewButton(), - callback: this.__openAccessRights, - ctx: this - } + label: this.tr("MODIFIED"), + view: osparc.info.StudyUtils.createLastChangeDate(this.getStudy()) }]; if ( @@ -185,8 +121,8 @@ qx.Class.define("osparc.info.StudyMedium", { osparc.component.metadata.Quality.isEnabled(this.getStudy().getQuality()) ) { extraInfo.push({ - label: this.tr("Quality"), - view: this.__createQuality(), + label: this.tr("QUALITY"), + view: osparc.info.StudyUtils.createQuality(this.getStudy()), action: { button: osparc.utils.Utils.getViewButton(), callback: this.__openQuality, @@ -194,39 +130,24 @@ qx.Class.define("osparc.info.StudyMedium", { } }); } - return extraInfo; - }, - __createExtraInfo: function(extraInfo) { - const moreInfo = osparc.info.StudyUtils.createExtraInfo(extraInfo).set({ - width: this.self().EXTRA_INFO_WIDTH + extraInfo.push({ + label: this.tr("TAGS"), + view: osparc.info.StudyUtils.createTags(this.getStudy()) }); - return moreInfo; - }, - - __createTitle: function() { - return osparc.info.StudyUtils.createTitle(this.getStudy()); - }, - - __createOwner: function() { - return osparc.info.StudyUtils.createOwner(this.getStudy()); - }, - - __createCreationDate: function() { - return osparc.info.StudyUtils.createCreationDate(this.getStudy()); - }, + extraInfo.push({ + label: this.tr("DESCRIPTION"), + view: osparc.info.StudyUtils.createDescription(this.getStudy(), 200) + }); - __createLastChangeDate: function() { - return osparc.info.StudyUtils.createLastChangeDate(this.getStudy()); + return extraInfo; }, - __createAccessRights: function() { - return osparc.info.StudyUtils.createAccessRights(this.getStudy()); - }, + __createExtraInfo: function(extraInfo) { + const moreInfo = osparc.info.StudyUtils.createExtraInfoVBox(extraInfo); - __createQuality: function() { - return osparc.info.StudyUtils.createQuality(this.getStudy()); + return moreInfo; }, __createThumbnail: function(maxWidth, maxHeight = 150) { @@ -236,14 +157,6 @@ qx.Class.define("osparc.info.StudyMedium", { return null; }, - __createDescription: function() { - if (this.getStudy().getDescription()) { - const maxHeight = 300; - return osparc.info.StudyUtils.createDescription(this.getStudy(), maxHeight); - } - return null; - }, - __openAccessRights: function() { const permissionsView = osparc.info.StudyUtils.openAccessRights(this.getStudy().serialize()); permissionsView.addListener("updateAccessRights", e => { diff --git a/services/static-webserver/client/source/class/osparc/info/StudyUtils.js b/services/static-webserver/client/source/class/osparc/info/StudyUtils.js index 422793a38a2..81405c8a704 100644 --- a/services/static-webserver/client/source/class/osparc/info/StudyUtils.js +++ b/services/static-webserver/client/source/class/osparc/info/StudyUtils.js @@ -21,102 +21,73 @@ qx.Class.define("osparc.info.StudyUtils", { statics: { /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model */ createTitle: function(study) { const title = osparc.info.Utils.createTitle(); - if (study instanceof osparc.data.model.Study) { - study.bind("name", title, "value"); - } else { - title.setValue(study["name"]); - } + study.bind("name", title, "value"); return title; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model */ createUuid: function(study) { const uuid = osparc.info.Utils.createId(); - if (study instanceof osparc.data.model.Study) { - study.bind("uuid", uuid, "value"); - study.bind("uuid", uuid, "toolTipText"); - } else { - uuid.set({ - value: study["uuid"], - toolTipText: study["uuid"] - }); - } + study.bind("uuid", uuid, "value"); + study.bind("uuid", uuid, "toolTipText"); return uuid; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model */ createOwner: function(study) { const owner = new qx.ui.basic.Label(); - if (study instanceof osparc.data.model.Study) { - study.bind("prjOwner", owner, "value", { - converter: email => { - if (email === osparc.auth.Data.getInstance().getEmail()) { - return qx.locale.Manager.tr("me"); - } - return osparc.utils.Utils.getNameFromEmail(email); - }, - onUpdate: (source, target) => { - target.setToolTipText(source.getPrjOwner()); + study.bind("prjOwner", owner, "value", { + converter: email => { + if (email === osparc.auth.Data.getInstance().getEmail()) { + return qx.locale.Manager.tr("me"); } - }); - } else { - owner.set({ - value: osparc.utils.Utils.getNameFromEmail(study["prjOwner"]), - toolTipText: study["prjOwner"] - }); - } + return osparc.utils.Utils.getNameFromEmail(email); + }, + onUpdate: (source, target) => { + target.setToolTipText(source.getPrjOwner()); + } + }); return owner; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model */ createCreationDate: function(study) { const creationDate = new qx.ui.basic.Label(); - if (study instanceof osparc.data.model.Study) { - const dateOptions = { - converter: date => osparc.utils.Utils.formatDateAndTime(date) - }; - study.bind("creationDate", creationDate, "value", dateOptions); - } else { - const date = osparc.utils.Utils.formatDateAndTime(new Date(study["creationDate"])); - creationDate.setValue(date); - } + study.bind("creationDate", creationDate, "value", { + converter: date => osparc.utils.Utils.formatDateAndTime(date) + }); return creationDate; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model */ createLastChangeDate: function(study) { const lastChangeDate = new qx.ui.basic.Label(); - if (study instanceof osparc.data.model.Study) { - const dateOptions = { - converter: date => osparc.utils.Utils.formatDateAndTime(date) - }; - study.bind("lastChangeDate", lastChangeDate, "value", dateOptions); - } else { - const date = osparc.utils.Utils.formatDateAndTime(new Date(study["lastChangeDate"])); - lastChangeDate.setValue(date); - } + study.bind("lastChangeDate", lastChangeDate, "value", { + converter: date => osparc.utils.Utils.formatDateAndTime(date) + }); return lastChangeDate; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model */ createAccessRights: function(study) { + const accessRights = new qx.ui.basic.Label(); let permissions = ""; const myGID = osparc.auth.Data.getInstance().getGroupId(); - const ar = (study instanceof osparc.data.model.Study) ? study.getAccessRights() : study["accessRights"]; + const ar = study.getAccessRights(); if (myGID in ar) { if (ar[myGID]["delete"]) { permissions = qx.locale.Manager.tr("Owner"); @@ -126,22 +97,18 @@ qx.Class.define("osparc.info.StudyUtils", { permissions = qx.locale.Manager.tr("Viewer"); } } - const accessRights = new qx.ui.basic.Label(permissions); + accessRights.setValue(permissions); return accessRights; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model */ createClassifiers: function(study) { const nClassifiers = new qx.ui.basic.Label(); - if (study instanceof osparc.data.model.Study) { - study.bind("classifiers", nClassifiers, "value", { - converter: classifiers => `(${classifiers.length})` - }); - } else { - nClassifiers.setValue(`(${study["classifiers"].length})`); - } + study.bind("classifiers", nClassifiers, "value", { + converter: classifiers => `(${classifiers.length})` + }); return nClassifiers; }, @@ -167,75 +134,46 @@ qx.Class.define("osparc.info.StudyUtils", { tsrLayout.exclude(); } }; - study.addListener("changeQuality", () => { - addStars(study); - }, this); + study.addListener("changeQuality", () => addStars(study), this); addStars(study); return tsrLayout; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model * @param maxWidth {Number} thumbnail's maxWidth * @param maxHeight {Number} thumbnail's maxHeight */ createThumbnail: function(study, maxWidth, maxHeight) { const thumbnail = osparc.info.Utils.createThumbnail(maxWidth, maxHeight); const noThumbnail = "osparc/no_photography_black_24dp.svg"; - if (study instanceof osparc.data.model.Study) { - study.bind("thumbnail", thumbnail, "source", { - converter: thumb => thumb ? thumb : noThumbnail, - onUpdate: (source, target) => { - if (source.getThumbnail() === "") { - target.getChildControl("image").set({ - minWidth: 100, - minHeight: 100 - }); - } + study.bind("thumbnail", thumbnail, "source", { + converter: thumb => thumb ? thumb : noThumbnail, + onUpdate: (source, target) => { + if (source.getThumbnail() === "") { + target.getChildControl("image").set({ + minWidth: 100, + minHeight: 100 + }); } - }); - } else if (study["thumbnail"]) { - thumbnail.set({ - source: study["thumbnail"] - }); - } else { - thumbnail.set({ - source: noThumbnail, - minWidth: 100, - minHeight: 100 - }); - } + } + }); return thumbnail; }, /** - * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object + * @param study {osparc.data.model.Study} Study Model * @param maxHeight {Number} description's maxHeight */ createDescription: function(study, maxHeight) { - const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({ - alignY: "middle" - })); - - const label = new qx.ui.basic.Label(qx.locale.Manager.tr("Description")).set({ - font: "text-13" - }); - descriptionLayout.add(label); - const description = new osparc.ui.markdown.Markdown().set({ noMargin: true, maxHeight: maxHeight }); - if (study instanceof osparc.data.model.Study) { - study.bind("description", description, "value", { - converter: desc => desc ? desc : "Add description" - }); - } else { - description.setValue(study["description"] ? study["description"] : "Add description"); - } - descriptionLayout.add(description); - - return descriptionLayout; + study.bind("description", description, "value", { + converter: desc => desc ? desc : "Add description" + }); + return description; }, /** @@ -263,18 +201,7 @@ qx.Class.define("osparc.info.StudyUtils", { * @param study {osparc.data.model.Study} Study Model */ createTags: function(study) { - const tagsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({ - alignY: "middle" - })); - - const label = new qx.ui.basic.Label(qx.locale.Manager.tr("Tags")).set({ - font: "text-13" - }); - tagsLayout.add(label); - const tagsContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)); - tagsContainer.setMarginTop(5); - tagsLayout.add(tagsContainer); const addTags = model => { tagsContainer.removeAll(); @@ -289,48 +216,116 @@ qx.Class.define("osparc.info.StudyUtils", { study.addListener("changeTags", () => addTags(study), this); addTags(study); - return tagsLayout; + return tagsContainer; }, - createExtraInfo: function(extraInfos) { - const grid = new qx.ui.layout.Grid(8, 5); + createExtraInfoVBox: function(extraInfos) { + const grid = new qx.ui.layout.Grid(10, 8); grid.setColumnAlign(0, "right", "middle"); grid.setColumnAlign(1, "left", "middle"); - const moreInfo = new qx.ui.container.Composite(grid).set({ - allowGrowX: false, - alignX: "center", - alignY: "middle" - }); + const moreInfo = new qx.ui.container.Composite(grid); + + Object.keys(extraInfos).forEach((key, idx) => { + const extraInfo = extraInfos[key]; - for (let i=0; i { - const cb = extraInfo.action.callback; - if (typeof cb === "string") { - extraInfo.action.ctx.fireEvent(cb); - } else { - cb.call(extraInfo.action.ctx); - } - }, this); - moreInfo.add(extraInfo.action.button, { - row: i, - column: 2 + const grid = new qx.ui.layout.Grid(40, 5); + grid.setColumnAlign(0, "left", "middle"); + grid.setColumnAlign(1, "left", "middle"); + grid.setColumnAlign(2, "left", "middle"); + grid.setColumnAlign(3, "left", "middle"); + grid.setRowHeight(2, 10); // spacer + grid.setRowHeight(5, 10); // spacer + const moreInfo = new qx.ui.container.Composite(grid); + + Object.keys(positions).forEach(key => { + if (key in extraInfos) { + const extraInfo = extraInfos[key]; + const gridInfo = positions[key]; + + const titleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)); + const title = new qx.ui.basic.Label(extraInfo.label); + titleLayout.add(title); + if (extraInfo.action) { + titleLayout.add(extraInfo.action.button); + extraInfo.action.button.addListener("execute", () => { + const cb = extraInfo.action.callback; + if (typeof cb === "string") { + extraInfo.action.ctx.fireEvent(cb); + } else { + cb.call(extraInfo.action.ctx); + } + }, this); + } + moreInfo.add(titleLayout, { + row: gridInfo.row, + column: gridInfo.column, + colSpan: gridInfo.colSpan ? gridInfo.colSpan : 1 + }); + + moreInfo.add(extraInfo.view, { + row: gridInfo.row+1, + column: gridInfo.column, + colSpan: gridInfo.colSpan ? gridInfo.colSpan : 1 }); } - } + }); return moreInfo; }, diff --git a/services/static-webserver/client/source/class/osparc/navigation/BreadcrumbsSlideshow.js b/services/static-webserver/client/source/class/osparc/navigation/BreadcrumbsSlideshow.js index 81b39d1d18e..b644116fc75 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/BreadcrumbsSlideshow.js +++ b/services/static-webserver/client/source/class/osparc/navigation/BreadcrumbsSlideshow.js @@ -43,7 +43,7 @@ qx.Class.define("osparc.navigation.BreadcrumbsSlideshow", { } else { this._removeAll(); const label = new qx.ui.basic.Label(); - if (study.isPipelineEmtpy()) { + if (study.isPipelineEmpty()) { label.setValue(this.tr("Pipeline is empty")); } else { label.setValue(this.tr("There are no visible nodes, enable some by editing the App Mode"));