✨ [Frontend] App Browser with Hypertools

services/static-webserver/client/source/class/osparc/dashboard/ServiceBrowser.js → services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js

@@ -22,7 +22,7 @@
  * @ignore(fetch)
  */
 
-qx.Class.define("osparc.dashboard.ServiceBrowser", {
+qx.Class.define("osparc.dashboard.AppBrowser", {
   extend: osparc.dashboard.ResourceBrowserBase,
 
   construct: function() {
@@ -43,8 +43,12 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
       this._resourcesInitialized = true;
 
       this._resourcesList = [];
-      osparc.store.Services.getServicesLatest()
-        .then(services => {
+      Promise.all([
+        osparc.store.Services.getServicesLatest(),
+        osparc.store.Templates.getTemplatesHypertools(),
+      ])
+        .then(resps => {
+          const services = resps[0];
           // Show "Contact Us" message if services.length === 0
           // Most probably is a product-stranger user (it can also be that the catalog is down)
           if (Object.keys(services).length === 0) {
@@ -65,30 +69,52 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
 
     reloadResources: function() {
       this.__loadServices();
+      this.__loadHypertools();
     },
 
     __loadServices: function() {
       const excludeFrontend = true;
       const excludeDeprecated = true
       osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)
-        .then(servicesList => this.__setServicesToList(servicesList.filter(service => service !== null)));
+        .then(servicesList => {
+          servicesList.forEach(service => service["resourceType"] = "service");
+          this._resourcesList.push(...servicesList.filter(service => service !== null));
+          this.__sortAndReload();
+        });
+    },
+
+    __loadHypertools: function() {
+      osparc.store.Templates.getTemplatesHypertools()
+        .then(hypertoolsList => {
+          hypertoolsList.forEach(hypertool => hypertool["resourceType"] = "hypertool");
+          this._resourcesList.push(...hypertoolsList.filter(hypertool => hypertool !== null));
+          this.__sortAndReload();
+        });
+    },
+
+    __sortAndReload: function() {
+      osparc.service.Utils.sortObjectsBasedOn(this._resourcesList, this.__sortBy);
+      this._reloadCards();
     },
 
     _updateServiceData: function(serviceData) {
       serviceData["resourceType"] = "service";
-      const servicesList = this._resourcesList;
-      const index = servicesList.findIndex(service => service["key"] === serviceData["key"] && service["version"] === serviceData["version"]);
+      const appsList = this._resourcesList;
+      const index = appsList.findIndex(service => service["key"] === serviceData["key"] && service["version"] === serviceData["version"]);
       if (index !== -1) {
-        servicesList[index] = serviceData;
+        appsList[index] = serviceData;
         this._reloadCards();
       }
     },
 
-    __setServicesToList: function(servicesList) {
-      servicesList.forEach(service => service["resourceType"] = "service");
-      osparc.service.Utils.sortObjectsBasedOn(servicesList, this.__sortBy);
-      this._resourcesList = servicesList;
-      this._reloadCards();
+    _updateHypertoolData: function(hypertoolData) {
+      hypertoolData["resourceType"] = "hypertool";
+      const appsList = this._resourcesList;
+      const index = appsList.findIndex(service => service["uuid"] === hypertoolData["uuid"]);
+      if (index !== -1) {
+        appsList[index] = hypertoolData;
+        this._reloadCards();
+      }
     },
 
     _reloadCards: function() {
@@ -103,8 +129,8 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
     },
 
     __itemClicked: function(card) {
-      const serviceData = card.getResourceData();
-      this._openResourceDetails(serviceData);
+      const appData = card.getResourceData();
+      this._openResourceDetails(appData);
       this.resetSelection();
     },
 
@@ -126,6 +152,28 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
       return this._resourcesContainer;
     },
 
+    __addSortingButtons: function() {
+      const containerSortButtons = new osparc.service.SortServicesButtons();
+      containerSortButtons.set({
+        appearance: "form-button-outlined"
+      });
+      containerSortButtons.addListener("sortBy", e => {
+        this.__sortBy = e.getData();
+        this.__sortAndReload();
+      }, this);
+      this._toolbar.add(containerSortButtons);
+    },
+
+    _populateCardMenu: function(card) {
+      const menu = card.getMenu();
+      const appData = card.getResourceData();
+
+      const openButton = this._getOpenMenuButton(appData);
+      if (openButton) {
+        menu.add(openButton);
+      }
+    },
+
     __addNewServiceButtons: function() {
       const platformName = osparc.store.StaticInfo.getInstance().getPlatformName();
       const hasRights = osparc.data.Permissions.getInstance().canDo("studies.template.create.productAll");
@@ -140,7 +188,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
         this._toolbar.add(testDataButton);
       }
 
-      const addServiceButton = new qx.ui.form.Button(this.tr("Submit new service"), "@FontAwesome5Solid/plus-circle/14");
+      const addServiceButton = new qx.ui.form.Button(this.tr("Submit new app"), "@FontAwesome5Solid/plus-circle/14");
       addServiceButton.set({
         appearance: "form-button-outlined",
         visibility: hasRights ? "visible" : "excluded"
@@ -149,30 +197,8 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
       this._toolbar.add(addServiceButton);
     },
 
-    __addSortingButtons: function() {
-      const containerSortButtons = new osparc.service.SortServicesButtons();
-      containerSortButtons.set({
-        appearance: "form-button-outlined"
-      });
-      containerSortButtons.addListener("sortBy", e => {
-        this.__sortBy = e.getData();
-        this.__setServicesToList(this._resourcesList);
-      }, this);
-      this._toolbar.add(containerSortButtons);
-    },
-
-    _populateCardMenu: function(card) {
-      const menu = card.getMenu();
-      const serviceData = card.getResourceData();
-
-      const openButton = this._getOpenMenuButton(serviceData);
-      if (openButton) {
-        menu.add(openButton);
-      }
-    },
-
     __displayServiceSubmissionForm: function(formData) {
-      const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new service")).set({
+      const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new app")).set({
         modal: true,
         autoDestroy: true,
         showMinimize: false,

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

@@ -41,6 +41,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
+    "updateHypertool": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
     "tagClicked": "qx.event.type.Data",
     "emptyStudyClicked": "qx.event.type.Data"
@@ -160,10 +161,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
       return false;
     },
 
-    filterServiceType: function(resourceType, metadata, serviceType) {
-      if (serviceType && resourceType === "service") {
+    filterAppType: function(resourceType, metadata, appType) {
+      if (appType && ["service", "hypertool"].includes(resourceType)) {
         if (metadata && metadata.type) {
-          const matches = metadata.type === serviceType;
+          const matches = metadata.type === appType;
           return !matches;
         }
         return false;
@@ -221,11 +222,11 @@ qx.Class.define("osparc.dashboard.CardBase", {
       const organizations = groupsStore.getOrganizations();
       const myGroupId = groupsStore.getMyGroupId();
 
-      const sharedGrps = [];
       const groups = [];
       groups.push(groupEveryone);
       groups.push(groupProductEveryone);
       groups.push(...Object.values(organizations));
+      const sharedGrps = [];
       groups.forEach(group => {
         const idx = gids.indexOf(group.getGroupId());
         if (idx > -1) {
@@ -260,7 +261,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
               sharedGrpLabels.push("...");
               break;
             }
-            const sharedGrpLabel = sharedGrps[i].getLabel();
+            let sharedGrpLabel = sharedGrps[i].getLabel();
+            if ([groupEveryone, groupProductEveryone].includes(sharedGrps[i])) {
+              sharedGrpLabel = "Public";
+            }
             if (!sharedGrpLabels.includes(sharedGrpLabel)) {
               sharedGrpLabels.push(sharedGrpLabel);
             }
@@ -315,7 +319,12 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     resourceType: {
-      check: ["study", "template", "service"],
+      check: [
+        "study",
+        "template",
+        "service",
+        "hypertool",
+      ],
       init: true,
       nullable: true,
       event: "changeResourceType"
@@ -506,11 +515,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
       let icon = null;
       switch (resourceData["resourceType"]) {
         case "study":
-          uuid = resourceData.uuid ? resourceData.uuid : null;
-          owner = resourceData.prjOwner ? resourceData.prjOwner : "";
-          workbench = resourceData.workbench ? resourceData.workbench : {};
-          break;
         case "template":
+        case "hypertool":
           uuid = resourceData.uuid ? resourceData.uuid : null;
           owner = resourceData.prjOwner ? resourceData.prjOwner : "";
           workbench = resourceData.workbench ? resourceData.workbench : {};
@@ -543,7 +549,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
         workbench
       });
 
-      if (resourceData["resourceType"] === "study" || resourceData["resourceType"] === "template") {
+      if (["study", "template", "hypertool"].includes(resourceData["resourceType"])) {
         osparc.store.Services.getStudyServices(resourceData.uuid)
           .then(resp => {
             const services = resp["services"];
@@ -993,7 +999,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
       [
         "updateStudy",
         "updateTemplate",
-        "updateService"
+        "updateService",
+        "updateHypertool",
       ].forEach(ev => {
         resourceDetails.addListener(ev, e => this.fireDataEvent(ev, e.getData()));
       });
@@ -1045,6 +1052,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
         toolTipText += osparc.product.Utils.getStudyAlias();
       } else if (this.isResourceType("template")) {
         toolTipText += osparc.product.Utils.getTemplateAlias();
+      } else if (this.isResourceType("hypertool")) {
+        toolTipText += osparc.product.Utils.getAppAlias();
       }
       const control = new qx.ui.basic.Image().set({
         source: "@FontAwesome5Solid/times-circle/14",
@@ -1103,10 +1112,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
       return this.self().filterSharedWith(checks, sharedWith);
     },
 
-    _filterServiceType: function(serviceType) {
+    __filterAppType: function(appType) {
       const resourceType = this.getResourceType();
       const resourceData = this.getResourceData();
-      return this.self().filterServiceType(resourceType, resourceData, serviceType);
+      return this.self().filterAppType(resourceType, resourceData, appType);
     },
 
     _filterClassifiers: function(classifiers) {
@@ -1117,7 +1126,14 @@ qx.Class.define("osparc.dashboard.CardBase", {
     _shouldApplyFilter: function(data) {
       let filterId = "searchBarFilter";
       if (this.isPropertyInitialized("resourceType")) {
-        filterId += "-" + this.getResourceType();
+        switch (this.getResourceType()) {
+          case "hypertool":
+            filterId += "-service";
+            break;
+          default:
+            filterId += "-" + this.getResourceType();
+            break;
+        }
       }
       data = filterId in data ? data[filterId] : data;
       if (this._filterText(data.text)) {
@@ -1129,7 +1145,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       if (this._filterSharedWith(data.sharedWith)) {
         return true;
       }
-      if (this._filterServiceType(data.serviceType)) {
+      if (this.__filterAppType(data.appType)) {
         return true;
       }
       if (this._filterClassifiers(data.classifiers)) {
@@ -1141,7 +1157,14 @@ qx.Class.define("osparc.dashboard.CardBase", {
     _shouldReactToFilter: function(data) {
       let filterId = "searchBarFilter";
       if (this.isPropertyInitialized("resourceType")) {
-        filterId += "-" + this.getResourceType();
+        switch (this.getResourceType()) {
+          case "hypertool":
+            filterId += "-service";
+            break;
+          default:
+            filterId += "-" + this.getResourceType();
+            break;
+        }
       }
       data = filterId in data ? data[filterId] : data;
       if (data.text && data.text.length > 1) {
@@ -1153,7 +1176,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       if (data.sharedWith) {
         return true;
       }
-      if ("serviceType" in data) {
+      if ("appType" in data) {
         return true;
       }
       if (data.classifiers && data.classifiers.length) {