🎨 [Frontend] Plus Button: Support myMostUsed Services (#7238)

Author: odeimaiz

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

@@ -44,6 +44,10 @@
     "newStudyLabel": "string", // optional
     "category": "categories.id", // optional
     "idToWidget": "string" // optional
+  }, {
+    "resourceType": "service", // it will create a study from the service
+    "myMostUsed": 2, // required
+    "category": "categories.id", // optional
   }, {
     "showDisabled": true, // it will show a disabled button on the defined item
     "title": "string", // required
@@ -201,12 +205,18 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
 
     __addIcon: function(menuButton, resourceInfo, resourceMetadata) {
       let source = null;
-      if (resourceInfo && "icon" in resourceInfo) {
+      if (resourceInfo && resourceInfo["icon"]) {
         // first the one set in the ui_config
         source = resourceInfo["icon"];
-      } else if (resourceMetadata && "thumbnail" in resourceMetadata) {
-        // second the one from the resource
+      } else if (resourceMetadata && resourceMetadata["icon"]) {
+        // second the icon from the resource
+        source = resourceMetadata["icon"];
+      } else if (resourceMetadata && resourceMetadata["thumbnail"]) {
+        // third the thumbnail from the resource
         source = resourceMetadata["thumbnail"];
+      } else {
+        // finally product icon
+        source = osparc.dashboard.CardBase.PRODUCT_ICON;
       }
 
       if (source) {
@@ -280,48 +290,76 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
     },
 
     __addFromServiceButton: function(newStudyData) {
-      const menuButton = this.self().createMenuButton(null, newStudyData["title"]);
-      osparc.utils.Utils.setIdToWidget(menuButton, newStudyData["idToWidget"]);
-      // disable it until found in services store
-      menuButton.setEnabled(false);
+      const addListenerToButton = (menuButton, latestMetadata) => {
+        menuButton.addListener("tap", () => {
+          this.fireDataEvent("newStudyFromServiceClicked", {
+            serviceMetadata: latestMetadata,
+            newStudyLabel: newStudyData["newStudyLabel"],
+          });
+        });
 
-      const key = newStudyData["expectedKey"];
-      // Include deprecated versions, they should all be updatable to a non deprecated version
-      const versions = osparc.service.Utils.getVersions(key, false);
-      if (versions.length && newStudyData) {
-        // scale to latest compatible
-        const latestVersion = versions[0];
-        const latestCompatible = osparc.service.Utils.getLatestCompatible(key, latestVersion);
-        osparc.store.Services.getService(latestCompatible["key"], latestCompatible["version"])
-          .then(latestMetadata => {
-            // make sure this one is not deprecated
-            if (osparc.service.Utils.isDeprecated(latestMetadata)) {
-              return;
-            }
-            menuButton.setEnabled(true);
-            menuButton.addListener("tap", () => {
-              this.fireDataEvent("newStudyFromServiceClicked", {
-                serviceMetadata: latestMetadata,
-                newStudyLabel: newStudyData["newStudyLabel"],
-              });
+        const cb = e => {
+          this.hide();
+          // so that is not consumed by the menu button itself
+          e.stopPropagation();
+          latestMetadata["resourceType"] = "service";
+          const resourceDetails = new osparc.dashboard.ResourceDetails(latestMetadata);
+          osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
+        }
+        const infoButton = new osparc.ui.basic.IconButton(osparc.ui.hint.InfoHint.INFO_ICON + "/16", cb);
+        // where the shortcut is supposed to go
+        // eslint-disable-next-line no-underscore-dangle
+        menuButton._add(infoButton, {column: 2});
+      };
+
+      if ("expectedKey" in newStudyData) {
+        const menuButton = this.self().createMenuButton(null, newStudyData["title"]);
+        osparc.utils.Utils.setIdToWidget(menuButton, newStudyData["idToWidget"]);
+        // disable it until found in services store
+        menuButton.setEnabled(false);
+
+        const key = newStudyData["expectedKey"];
+        // Include deprecated versions, they should all be updatable to a non deprecated version
+        const versions = osparc.service.Utils.getVersions(key, false);
+        if (versions.length && newStudyData) {
+          // scale to latest compatible
+          const latestVersion = versions[0];
+          const latestCompatible = osparc.service.Utils.getLatestCompatible(key, latestVersion);
+          osparc.store.Services.getService(latestCompatible["key"], latestCompatible["version"])
+            .then(latestMetadata => {
+              // make sure this one is not deprecated
+              if (osparc.service.Utils.isDeprecated(latestMetadata)) {
+                return;
+              }
+              menuButton.setEnabled(true);
+              this.__addIcon(menuButton, newStudyData, latestMetadata);
+              this.__addFromResourceButton(menuButton, newStudyData["category"]);
+              addListenerToButton(menuButton, latestMetadata);
             });
-
-            const cb = e => {
-              this.hide();
-              // so that is not consumed by the menu button itself
-              e.stopPropagation();
-              latestMetadata["resourceType"] = "service";
-              const resourceDetails = new osparc.dashboard.ResourceDetails(latestMetadata);
-              osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
+        }
+      } else if ("myMostUsed" in newStudyData) {
+        const excludeFrontend = true;
+        const excludeDeprecated = true
+        osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)
+          .then(servicesList => {
+            osparc.service.Utils.sortObjectsBasedOn(servicesList, {
+              "sort": "hits",
+              "order": "down"
+            });
+            for (let i=0; i<newStudyData["myMostUsed"]; i++) {
+              const latestMetadata = servicesList[i];
+              if (latestMetadata["hits"] > 0) {
+                const menuButton = new qx.ui.menu.Button().set({
+                  label: latestMetadata["name"],
+                  font: "text-16",
+                  allowGrowX: true,
+                });
+                this.__addIcon(menuButton, null, latestMetadata);
+                this.__addFromResourceButton(menuButton, newStudyData["category"]);
+                addListenerToButton(menuButton, latestMetadata);
+              }
             }
-            const infoButton = new osparc.ui.basic.IconButton(osparc.ui.hint.InfoHint.INFO_ICON + "/16", cb);
-            // where the shortcut is supposed to go
-            // eslint-disable-next-line no-underscore-dangle
-            menuButton._add(infoButton, {column: 2});
-
-            this.__addIcon(menuButton, newStudyData, latestMetadata);
-            this.__addFromResourceButton(menuButton, newStudyData["category"]);
-          })
+          });
       }
     },
 

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

@@ -935,36 +935,91 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       if (!osparc.product.Utils.hasNewPlusButton()) {
         switch (osparc.product.Utils.getProductName()) {
-          case "osparc":
-            this.__addEmptyStudyPlusButton();
-            break;
           case "tis":
           case "tiplite":
+            // this one is different since it groups all new buttons in one new button
             this.__addTIPPlusButton();
             break;
-          case "s4l":
-          case "s4lacad":
-          case "s4llite":
-            this.__addPlusButtonsFromServices();
+          default:
+            this.__addPlusButtons();
             break;
         }
       }
     },
 
-    __addEmptyStudyPlusButton: function() {
+    __addPlusButtons: function() {
+      const plusButtonConfig = osparc.store.Products.getInstance().getNewStudiesUiConfig();
+      plusButtonConfig["resources"].forEach(newStudyData => {
+        if (newStudyData["resourceType"] === "study") {
+          this.__addEmptyStudyPlusButton(newStudyData);
+        } else if (newStudyData["resourceType"] === "service") {
+          this.__addNewStudyFromServiceButton(newStudyData);
+        }
+      });
+    },
+
+    __addEmptyStudyPlusButton: function(newStudyData) {
       const mode = this._resourcesContainer.getMode();
-      const title = this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
+      const defTitle = this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
         firstUpperCase: true
-      })
-      const desc = this.tr("Start with an empty study");
+      });
+      const title = newStudyData["title"] || defTitle;
+      const desc = newStudyData["description"] || this.tr("Start with an empty study");
       const newEmptyStudyBtn = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
       newEmptyStudyBtn.setCardKey("new-study");
       newEmptyStudyBtn.subscribeToFilterGroup("searchBarFilter");
-      osparc.utils.Utils.setIdToWidget(newEmptyStudyBtn, "emptyStudyBtn");
-      newEmptyStudyBtn.addListener("tap", () => this.__newEmptyStudyBtnClicked("New Study"));
+      osparc.utils.Utils.setIdToWidget(newEmptyStudyBtn, newStudyData["idToWidget"]);
+      newEmptyStudyBtn.addListener("tap", () => this.__newEmptyStudyBtnClicked(newStudyData["newStudyLabel"]));
       this._resourcesContainer.addNonResourceCard(newEmptyStudyBtn);
     },
 
+    __addNewStudyFromServiceButton: function(newStudyData) {
+      if ("expectedKey" in newStudyData) {
+        const key = newStudyData["expectedKey"];
+        // Include deprecated versions, they should all be updatable to a non deprecated version
+        const versions = osparc.service.Utils.getVersions(key, false);
+        if (versions.length && newStudyData) {
+          // scale to latest compatible
+          const latestVersion = versions[0];
+          const latestCompatible = osparc.service.Utils.getLatestCompatible(key, latestVersion);
+          osparc.store.Services.getService(latestCompatible["key"], latestCompatible["version"])
+            .then(latestMetadata => {
+              // make sure this one is not deprecated
+              if (osparc.service.Utils.isDeprecated(latestMetadata)) {
+                return;
+              }
+              const title = newStudyData.title + " " + osparc.service.Utils.extractVersionDisplay(latestMetadata);
+              const desc = newStudyData.description;
+              const mode = this._resourcesContainer.getMode();
+              const newStudyFromServiceButton = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
+              newStudyFromServiceButton.setCardKey("new-"+key);
+              if (newStudyData["idToWidget"]) {
+                osparc.utils.Utils.setIdToWidget(newStudyFromServiceButton, newStudyData["idToWidget"]);
+              }
+              newStudyFromServiceButton.addListener("tap", () => this.__newStudyFromServiceBtnClicked(latestMetadata["key"], latestMetadata["version"], newStudyData.newStudyLabel));
+              this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton);
+            })
+        }
+      } else if ("myMostUsed" in newStudyData) {
+        const excludeFrontend = true;
+        const excludeDeprecated = true
+        osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)
+          .then(servicesList => {
+            osparc.service.Utils.sortObjectsBasedOn(servicesList, {
+              "sort": "hits",
+              "order": "down"
+            });
+            for (let i=0; i<newStudyData["myMostUsed"]; i++) {
+              const latestMetadata = servicesList[i];
+              const mode = this._resourcesContainer.getMode();
+              const newStudyFromServiceButton = (mode === "grid") ? new osparc.dashboard.GridButtonNew(latestMetadata["name"]) : new osparc.dashboard.ListButtonNew(latestMetadata["name"]);
+              newStudyFromServiceButton.addListener("tap", () => this.__newStudyFromServiceBtnClicked(latestMetadata["key"], latestMetadata["version"], latestMetadata["name"]));
+              this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton);
+            }
+          });
+      }
+    },
+
     __addTIPPlusButton: function() {
       const mode = this._resourcesContainer.getMode();
       const title = this.tr("New Plan");
@@ -975,15 +1030,15 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._resourcesContainer.addNonResourceCard(newPlansBtn);
       newPlansBtn.setEnabled(false);
 
-      const newStudiesData = osparc.store.Products.getInstance().getNewStudiesUiConfig();
-      if (newStudiesData) {
+      const newStudiesConfig = osparc.store.Products.getInstance().getNewStudiesUiConfig();
+      if (newStudiesConfig) {
         newPlansBtn.setEnabled(true);
 
         newPlansBtn.addListener("tap", () => {
           osparc.data.Resources.get("templates")
             .then(templates => {
               if (templates) {
-                const newStudies = new osparc.dashboard.NewStudies(newStudiesData);
+                const newStudies = new osparc.dashboard.NewStudies(newStudiesConfig);
                 newStudies.addListener("templatesLoaded", () => {
                   newStudies.setGroupBy("category");
                   const winTitle = this.tr("New Plan");
@@ -1007,45 +1062,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       }
     },
 
-    // Used in S4L products
-    __addNewStudyFromServiceButtons: function(key, newButtonInfo) {
-      // Include deprecated versions, they should all be updatable to a non deprecated version
-      const versions = osparc.service.Utils.getVersions(key, false);
-      if (versions.length && newButtonInfo) {
-        // scale to latest compatible
-        const latestVersion = versions[0];
-        const latestCompatible = osparc.service.Utils.getLatestCompatible(key, latestVersion);
-        osparc.store.Services.getService(latestCompatible["key"], latestCompatible["version"])
-          .then(latestMetadata => {
-            // make sure this one is not deprecated
-            if (osparc.service.Utils.isDeprecated(latestMetadata)) {
-              return;
-            }
-            const title = newButtonInfo.title + " " + osparc.service.Utils.extractVersionDisplay(latestMetadata);
-            const desc = newButtonInfo.description;
-            const mode = this._resourcesContainer.getMode();
-            const newStudyFromServiceButton = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
-            newStudyFromServiceButton.setCardKey("new-"+key);
-            if (newButtonInfo["idToWidget"]) {
-              osparc.utils.Utils.setIdToWidget(newStudyFromServiceButton, newButtonInfo["idToWidget"]);
-            }
-            newStudyFromServiceButton.addListener("tap", () => this.__newStudyFromServiceBtnClicked(latestMetadata["key"], latestMetadata["version"], newButtonInfo.newStudyLabel));
-            this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton);
-          })
-      }
-    },
-
-    __addPlusButtonsFromServices: function() {
-      // add new plus buttons if key services exists
-      const newStudiesData = osparc.store.Products.getInstance().getNewStudiesUiConfig();
-      if (newStudiesData) {
-        const newButtonsInfo = newStudiesData["resources"];
-        newButtonsInfo.forEach(newButtonInfo => {
-          this.__addNewStudyFromServiceButtons(newButtonInfo.expectedKey, newButtonInfo);
-        });
-      }
-    },
-
     // LAYOUT //
     _createLayout: function() {
       this._createSearchBar();

services/static-webserver/client/source/resource/osparc/ui_config.json

@@ -153,6 +153,9 @@
         "title": "Empty Study",
         "newStudyLabel": "New Study",
         "idToWidget": "emptyStudyBtn"
+      }, {
+        "resourceType": "service",
+        "myMostUsed": 2
       }]
     }
   }

services/static-webserver/client/source/resource/schemas/product-ui.json

@@ -63,6 +63,14 @@
                 "idToWidget": { "type": "string" }
               },
               "required": ["resourceType", "expectedKey", "title"]
+            }, {
+              "type": "object",
+              "properties": {
+                "resourceType": { "enum": ["service"] },
+                "myMostUsed": { "type": "integer" },
+                "category": { "type": "string" }
+              },
+              "required": ["resourceType", "myMostUsed"]
             }, {
               "type": "object",
               "properties": {