🎨 Redesign: Study information page (#4396)

ITISFoundation · Jun 22, 2023 · b537b67 · b537b67
1 parent f61f6ea
commit b537b67
Show file tree

Hide file tree

Showing 13 changed files with 304 additions and 452 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
     },