title and refactoring

Author: odeimaiz

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

@@ -20,14 +20,14 @@ qx.Class.define("osparc.info.ServiceLarge", {
   extend: osparc.info.CardLarge,
 
   /**
-    * @param serviceData {Object} Serialized Service Object
+    * @param metadata {Object} Serialized Service Object
     * @param instance {Object} instance related data
     * @param openOptions {Boolean} open edit options in new window or fire event
     */
-  construct: function(serviceData, instance = null, openOptions = true) {
+  construct: function(metadata, instance = null, openOptions = true) {
     this.base(arguments);
 
-    this.setService(serviceData);
+    this.setService(metadata);
 
     if (instance) {
       if ("nodeId" in instance) {
@@ -79,6 +79,19 @@ qx.Class.define("osparc.info.ServiceLarge", {
     }
   },
 
+  statics: {
+    popUpInWindow: function(serviceLarge) {
+      const metadata = serviceLarge.getService();
+      const versionDisplay = osparc.service.Utils.extractVersionDisplay(metadata);
+      const title = `${metadata["name"]} ${versionDisplay}`;
+      const width = osparc.info.CardLarge.WIDTH;
+      const height = osparc.info.CardLarge.HEIGHT;
+      osparc.ui.window.Window.popUpInWindow(serviceLarge, title, width, height).set({
+        maxHeight: height
+      });
+    },
+  },
+
   members: {
     _rebuildLayout: function() {
       this._removeAll();

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

@@ -147,12 +147,7 @@ qx.Class.define("osparc.metadata.ServicesInStudy", {
             studyId: this._studyData["uuid"],
             label: node["label"]
           });
-          const title = this.tr("Service information");
-          const width = osparc.info.CardLarge.WIDTH;
-          const height = osparc.info.CardLarge.HEIGHT;
-          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
-            maxHeight: height
-          });
+          osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
         }, this);
         this._servicesGrid.add(infoButton, {
           row: i,

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

@@ -217,17 +217,13 @@ qx.Class.define("osparc.node.slideshow.BaseNodeView", {
 
     __openServiceDetails: function() {
       const node = this.getNode();
-      const serviceDetails = new osparc.info.ServiceLarge(node.getMetaData(), {
+      const metadata = node.getMetaData();
+      const serviceDetails = new osparc.info.ServiceLarge(metadata, {
         nodeId: node.getNodeId(),
         label: node.getLabel(),
         studyId: node.getStudy().getUuid()
       });
-      const title = this.tr("Service information");
-      const width = osparc.info.CardLarge.WIDTH;
-      const height = osparc.info.CardLarge.HEIGHT;
-      osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
-        maxHeight: height
-      });
+      osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
     },
 
     __openInstructions: function() {

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

@@ -161,12 +161,7 @@ qx.Class.define("osparc.service.ServiceListItem", {
       osparc.store.Services.getService(key, version)
         .then(serviceMetadata => {
           const serviceDetails = new osparc.info.ServiceLarge(serviceMetadata);
-          const title = this.tr("Service information");
-          const width = osparc.info.CardLarge.WIDTH;
-          const height = osparc.info.CardLarge.HEIGHT;
-          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
-            maxHeight: height
-          });
+          osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
         });
     },
 

services/static-webserver/client/source/class/osparc/widget/NodesTree.js

@@ -290,15 +290,13 @@ qx.Class.define("osparc.widget.NodesTree", {
           });
         } else {
           const node = study.getWorkbench().getNode(nodeId);
-          const serviceDetails = new osparc.info.ServiceLarge(node.getMetaData(), {
+          const metadata = node.getMetaData();
+          const serviceDetails = new osparc.info.ServiceLarge(metadata, {
             nodeId,
             label: node.getLabel(),
             studyId: study.getUuid()
           });
-          const title = this.tr("Service information");
-          osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
-            maxHeight: height
-          });
+          osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
         }
       }
     },

services/static-webserver/client/source/class/osparc/workbench/ServiceCatalog.js

@@ -300,12 +300,7 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
     __showServiceDetails: async function() {
       const serviceMetadata = await this.__getSelectedService();
       const serviceDetails = new osparc.info.ServiceLarge(serviceMetadata);
-      const title = this.tr("Service information");
-      const width = osparc.info.CardLarge.WIDTH;
-      const height = osparc.info.CardLarge.HEIGHT;
-      osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
-        maxHeight: height,
-      });
+      osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
     },
 
     __onCancel: function() {

services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js

@@ -1665,17 +1665,13 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
     __openNodeInfo: function(nodeId) {
       if (nodeId) {
         const node = this.getStudy().getWorkbench().getNode(nodeId);
-        const serviceDetails = new osparc.info.ServiceLarge(node.getMetaData(), {
+        const metadata = node.getMetaData();
+        const serviceDetails = new osparc.info.ServiceLarge(metadata, {
           nodeId,
           label: node.getLabel(),
           studyId: this.getStudy().getUuid()
         });
-        const title = this.tr("Service information");
-        const width = osparc.info.CardLarge.WIDTH;
-        const height = osparc.info.CardLarge.HEIGHT;
-        osparc.ui.window.Window.popUpInWindow(serviceDetails, title, width, height).set({
-          maxHeight: height
-        });
+        osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
       }
     },