🎨 [Frontend] Make version display more prominent

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

@@ -248,6 +248,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
           versionsBox.setSelection([selectedItem]);
         }
       });
+      osparc.utils.Utils.growSelectBox(versionsBox, 200);
 
       // then listen to changes
       versionsBox.addListener("changeSelection", e => {

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -450,7 +450,7 @@ qx.Class.define("osparc.data.Resources", {
        * SERVICES DEV
        */
       "servicesDev": {
-        useCache: false, // handled in its store
+        useCache: false, // handled in osparc.service.Store
         idField: ["key", "version"],
         endpoints: {
           get: {

services/static-webserver/client/source/class/osparc/data/model/Node.js

@@ -303,7 +303,7 @@ qx.Class.define("osparc.data.model.Node", {
     },
 
     getMinVisibleInputs: function(metadata) {
-      return ("min-visible-inputs" in metadata) ? metadata["min-visible-inputs"] : null;
+      return ("minVisibleInputs" in metadata) ? metadata["minVisibleInputs"] : null;
     },
 
     getOutput: function(outputs, outputKey) {

services/static-webserver/client/source/class/osparc/data/model/Service.js

@@ -23,18 +23,24 @@ qx.Class.define("osparc.data.model.Service", {
   extend: qx.core.Object,
 
   /**
-   * @param serviceData {Object} Object containing the serialized Study Data
+   * @param serviceData {Object} Object containing the serialized Service Data
    */
   construct: function(serviceData) {
     this.base(arguments);
 
     this.set({
       key: serviceData.key,
+      version: serviceData.version,
+      versionDisplay: serviceData.versionDisplay,
       name: serviceData.name,
       description: serviceData.description,
       thumbnail: serviceData.thumbnail,
+      serviceType: serviceData.type,
+      contact: serviceData.contact,
+      authors: serviceData.authors,
       owner: serviceData.owner || "",
       accessRights: serviceData.accessRights,
+      bootOptions: serviceData.bootOptions,
       classifiers: serviceData.classifiers || [],
       quality: serviceData.quality || null,
       hits: serviceData.hits || 0
@@ -49,6 +55,20 @@ qx.Class.define("osparc.data.model.Service", {
       init: null
     },
 
+    version: {
+      check: "String",
+      nullable: false,
+      event: "changeVersion",
+      init: null
+    },
+
+    versionDisplay: {
+      check: "String",
+      nullable: true,
+      event: "changeVersionDisplay",
+      init: null
+    },
+
     name: {
       check: "String",
       nullable: false,
@@ -58,14 +78,42 @@ qx.Class.define("osparc.data.model.Service", {
 
     description: {
       check: "String",
-      nullable: false,
+      nullable: true,
       event: "changeDescription",
       init: null
     },
 
+    thumbnail: {
+      check: "String",
+      nullable: true,
+      event: "changeThumbnail",
+      init: null
+    },
+
+    serviceType: {
+      check: "String",
+      nullable: true,
+      event: "changeServiceType",
+      init: ""
+    },
+
+    contact: {
+      check: "String",
+      nullable: true,
+      event: "changeContact",
+      init: ""
+    },
+
+    authors: {
+      check: "Object",
+      nullable: true,
+      event: "changeAuthors",
+      init: {}
+    },
+
     owner: {
       check: "String",
-      nullable: false,
+      nullable: true,
       event: "changeOwner",
       init: ""
     },
@@ -77,11 +125,11 @@ qx.Class.define("osparc.data.model.Service", {
       init: {}
     },
 
-    thumbnail: {
-      check: "String",
-      nullable: true,
-      event: "changeThumbnail",
-      init: null
+    bootOptions: {
+      check: "Object",
+      init: {},
+      event: "changeBootOptions",
+      nullable: true
     },
 
     classifiers: {

services/static-webserver/client/source/class/osparc/desktop/organizations/ServicesList.js

@@ -115,12 +115,13 @@ qx.Class.define("osparc.desktop.organizations.ServicesList", {
       }
 
       const gid = orgModel.getGid();
-      osparc.service.Store.getServicesLatest(false, false)
-        .then(latestServices => {
+      osparc.service.Store.getServicesLatest()
+        .then(servicesLatest => {
           const orgServices = [];
-          latestServices.forEach(latestService => {
-            if (gid in latestService["accessRights"]) {
-              orgServices.push(latestService);
+          Object.keys(servicesLatest).forEach(key => {
+            const serviceLatest = servicesLatest[key];
+            if (gid in serviceLatest["accessRights"]) {
+              orgServices.push(serviceLatest);
             }
           });
           orgServices.forEach(orgService => {

services/static-webserver/client/source/class/osparc/form/renderer/PropFormBase.js

@@ -181,18 +181,23 @@ qx.Class.define("osparc.form.renderer.PropFormBase", {
       const extendedVersion = firstColumnWidth > 300;
 
       const inputs = this.getNode().getInputs();
-      for (const portId in inputs) {
+      Object.keys(inputs).forEach((portId, idx) => {
         if (inputs[portId].description) {
           this._getLabelFieldChild(portId).child.set({
             value: extendedVersion ? inputs[portId].label + ". " + inputs[portId].description + ":" : inputs[portId].label,
             toolTipText: extendedVersion ? inputs[portId].label + "<br>" + inputs[portId].description : inputs[portId].label
           });
 
-          this._getInfoFieldChild(portId).child.setVisibility(extendedVersion ? "hidden" : "visible");
+          if (grid.getRowHeight(idx) === 0) {
+            // the port might be hidden
+            this._getInfoFieldChild(portId).child.setVisibility("hidden");
+          } else {
+            this._getInfoFieldChild(portId).child.setVisibility(extendedVersion ? "hidden" : "visible");
+          }
 
           grid.setColumnMinWidth(this.self().GRID_POS.CTRL_FIELD, extendedVersion ? 150 : 50);
         }
-      }
+      });
     },
 
     getValues: function() {

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

@@ -207,9 +207,17 @@ qx.Class.define("osparc.info.MergedLarge", {
         }
       });
 
+      if (osparc.data.Permissions.getInstance().isTester()) {
+        extraInfo.splice(i++, 0, {
+          label: this.tr("Service Integration Version"),
+          view: this.__createIntegrationVersion(),
+          action: null
+        });
+      }
+
       extraInfo.splice(i++, 0, {
         label: this.tr("Service Version"),
-        view: this.__createVersion(),
+        view: this.__createDisplayVersion(),
         action: null
       });
 
@@ -247,8 +255,12 @@ qx.Class.define("osparc.info.MergedLarge", {
       return osparc.info.ServiceUtils.createKey(this.getNode().getKey());
     },
 
-    __createVersion: function() {
-      return osparc.info.ServiceUtils.createVersion(this.getNode().getVersion() + "TODO: version display");
+    __createIntegrationVersion: function() {
+      return osparc.info.ServiceUtils.createVersion(this.getNode().getVersion());
+    },
+
+    __createDisplayVersion: function() {
+      return osparc.info.ServiceUtils.createVersionDisplay(this.getNode().getKey(), this.getNode().getVersion());
     },
 
     __createOwner: function() {
@@ -313,13 +325,7 @@ qx.Class.define("osparc.info.MergedLarge", {
         };
         promise = osparc.data.Resources.get("nodesInStudyResources", params);
       } else {
-        const params = {
-          url: osparc.data.Resources.getServiceUrl(
-            this.getNode().getKey(),
-            this.getNode().getVersion()
-          )
-        };
-        promise = osparc.data.Resources.get("serviceResources", params);
+        promise = osparc.service.Store.getResources(this.getNode().getKey(), this.getNode().getVersion())
       }
       promise
         .then(serviceResources => {

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

@@ -201,13 +201,19 @@ qx.Class.define("osparc.info.ServiceLarge", {
           callback: this.__copyKeyToClipboard,
           ctx: this
         }
-      }, {
+      });
+
+      if (osparc.data.Permissions.getInstance().isTester()) {
+        extraInfo.push({
+          label: this.tr("INTEGRATION VERSION"),
+          view: this.__createIntegrationVersion(),
+          action: null
+        });
+      }
+
+      extraInfo.push({
         label: this.tr("VERSION"),
-        view: this.__createVersion(),
-        action: null
-      }, {
-        label: this.tr("VERSION DISPLAY"),
-        view: this.__createVersionDisplay(),
+        view: this.__createDisplayVersion(),
         action: {
           button: osparc.service.Utils.canIWrite(this.getService()["accessRights"]) ? osparc.utils.Utils.getEditButton() : null,
           callback: this.__openVersionDisplayEditor,
@@ -284,17 +290,12 @@ qx.Class.define("osparc.info.ServiceLarge", {
       return osparc.info.ServiceUtils.createKey(this.getService()["key"]);
     },
 
-    __createVersion: function() {
+    __createIntegrationVersion: function() {
       return osparc.info.ServiceUtils.createVersion(this.getService()["version"]);
     },
 
-    __createVersionDisplay: function() {
-      const versionDisplayLabel = osparc.info.ServiceUtils.createVersionDisplay(this.getService()["key"], this.getService()["version"]);
-      if (versionDisplayLabel.getValue() || osparc.service.Utils.canIWrite(this.getService()["accessRights"])) {
-        // show it if it has a value or if the user can write (useful when it is still empty)
-        return versionDisplayLabel;
-      }
-      return null;
+    __createDisplayVersion: function() {
+      return osparc.info.ServiceUtils.createVersionDisplay(this.getService()["key"], this.getService()["version"]);
     },
 
     __createReleasedDate: function() {
@@ -359,13 +360,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
         };
         promise = osparc.data.Resources.get("nodesInStudyResources", params);
       } else {
-        const params = {
-          url: osparc.data.Resources.getServiceUrl(
-            this.getService()["key"],
-            this.getService()["version"]
-          )
-        };
-        promise = osparc.data.Resources.get("serviceResources", params);
+        promise = osparc.service.Store.getResources(this.getService()["key"], this.getService()["version"])
       }
       promise
         .then(serviceResources => {
@@ -479,7 +474,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
 
     __patchService: function(key, value) {
       const serviceDataCopy = osparc.utils.Utils.deepCloneObject(this.getService());
-      osparc.info.ServiceUtils.patchServiceData(serviceDataCopy, key, value)
+      osparc.service.Store.patchServiceData(serviceDataCopy, key, value)
         .then(() => {
           this.setService(serviceDataCopy);
           this.fireDataEvent("updateService", this.getService());

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

@@ -60,12 +60,14 @@ qx.Class.define("osparc.info.ServiceUtils", {
       version.set({
         value: serviceVersion
       });
-      osparc.utils.Utils.setIdToWidget(version, "serviceVersion");
       return version;
     },
 
     createVersionDisplay: function(key, version) {
-      return new qx.ui.basic.Label(osparc.service.Utils.getVersionDisplay(key, version));
+      const versionDisplay = osparc.service.Utils.getVersionDisplay(key, version);
+      const label = new qx.ui.basic.Label(versionDisplay ? versionDisplay : version);
+      osparc.utils.Utils.setIdToWidget(label, "serviceVersion");
+      return label;
     },
 
     createReleasedDate: function(key, version) {
@@ -295,22 +297,6 @@ qx.Class.define("osparc.info.ServiceUtils", {
       const title = serviceData["name"] + " - " + qx.locale.Manager.tr("Quality Assessment");
       osparc.ui.window.Window.popUpInWindow(qualityEditor, title, 650, 700);
       return qualityEditor;
-    },
-
-    patchServiceData: function(serviceData, fieldKey, value) {
-      const patchData = {};
-      patchData[fieldKey] = value;
-      const params = {
-        url: osparc.data.Resources.getServiceUrl(
-          serviceData["key"],
-          serviceData["version"]
-        ),
-        data: patchData
-      };
-      return osparc.data.Resources.fetch("servicesDev", "patch", params)
-        .then(() => {
-          serviceData[fieldKey] = value;
-        });
     }
   }
 });

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

@@ -158,7 +158,7 @@ qx.Class.define("osparc.metadata.ClassifiersEditor", {
           });
       } else {
         const serviceDataCopy = osparc.utils.Utils.deepCloneObject(this.__resourceData);
-        osparc.info.ServiceUtils.patchServiceData(serviceDataCopy, "classifiers", newClassifiers)
+        osparc.service.Store.patchServiceData(serviceDataCopy, "classifiers", newClassifiers)
           .then(() => {
             osparc.FlashMessenger.getInstance().logAs(this.tr("Classifiers successfully edited"));
             saveBtn.setFetching(false);

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

@@ -457,7 +457,7 @@ qx.Class.define("osparc.metadata.QualityEditor", {
         btn.setFetching(true);
         if (osparc.utils.Resources.isService(this.__resourceData)) {
           const serviceDataCopy = osparc.utils.Utils.deepCloneObject(this.__resourceData);
-          osparc.info.ServiceUtils.patchServiceData(serviceDataCopy, "quality", newQuality)
+          osparc.service.Store.patchServiceData(serviceDataCopy, "quality", newQuality)
             .then(() => {
               this.__initResourceData(serviceDataCopy);
               this.fireDataEvent("updateQuality", serviceDataCopy);

services/static-webserver/client/source/class/osparc/pricing/ServicesList.js

@@ -93,7 +93,7 @@ qx.Class.define("osparc.pricing.ServicesList", {
             const version = service["serviceVersion"];
             const serviceMetadata = osparc.service.Store.getMetadata(key, version);
             if (serviceMetadata) {
-              sList.push(qx.data.marshal.Json.createModel(serviceMetadata));
+              sList.push(new osparc.data.model.Service(serviceMetadata));
             }
           });
 
@@ -108,7 +108,6 @@ qx.Class.define("osparc.pricing.ServicesList", {
       srvCat.addListener("addService", e => {
         const data = e.getData();
         const service = data.service;
-        console.log(service);
         const params = {
           url: {
             pricingPlanId: this.getPricingPlanId()

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

@@ -70,11 +70,11 @@ qx.Class.define("osparc.service.ServiceList", {
         group.add(button);
         this._add(button);
         button.addListener("dbltap", () => {
-          this.fireDataEvent("serviceAdd", button.getServiceModel());
+          this.fireDataEvent("serviceAdd", button.getService());
         }, this);
         button.addListener("keypress", e => {
           if (e.getKeyIdentifier() === "Enter") {
-            this.fireDataEvent("serviceAdd", button.getServiceModel());
+            this.fireDataEvent("serviceAdd", button.getService());
           }
         }, this);
       });
@@ -89,7 +89,7 @@ qx.Class.define("osparc.service.ServiceList", {
      */
     getSelected: function() {
       if (this.__buttonGroup && this.__buttonGroup.getSelection().length) {
-        return this.__buttonGroup.getSelection()[0].getServiceModel();
+        return this.__buttonGroup.getSelection()[0].getService();
       }
       return null;
     },