✨ [Frontend] Group Sim4Life Featured services (#7841)

Author: odeimaiz

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

@@ -23,7 +23,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
 
     this._setLayout(new qx.ui.layout.VBox());
 
-    const showAllButton = this.__showAllButton = new qx.ui.form.Button().set({
+    const showAllButton = this.__expandButton = new qx.ui.form.Button().set({
       margin: 10,
       marginBottom: 5
     });
@@ -70,7 +70,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
   },
 
   members: {
-    __showAllButton: null,
+    __expandButton: null,
     __contentContainer: null,
 
     _createChildControlImpl: function(id) {
@@ -116,7 +116,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
     __createContentContainer: function() {
       let contentContainer = null;
       const expanded = this.isExpanded();
-      const showAllBtn = this.__showAllButton;
+      const showAllBtn = this.__expandButton;
       if (expanded) {
         contentContainer = new osparc.dashboard.CardContainer();
         showAllBtn.show();
@@ -174,6 +174,10 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
       return this.__contentContainer;
     },
 
+    getExpandButton: function() {
+      return this.__expandButton;
+    },
+
     // overridden
     add: function(child, idx) {
       if (osparc.dashboard.CardContainer.isValidCard(child)) {

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

@@ -324,7 +324,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       this._addToLayout(resourcesContainer);
     },
 
-    __groupByChanged: function(groupBy) {
+    _groupByChanged: function(groupBy) {
       // if cards are grouped they need to be in grid mode
       this._resourcesContainer.setMode("grid");
       this.__viewModeLayout.setVisibility(groupBy ? "excluded" : "visible");
@@ -356,27 +356,34 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
       const dontGroup = new qx.ui.menu.RadioButton(this.tr("None"));
       osparc.utils.Utils.setIdToWidget(dontGroup, "groupByNone");
-      dontGroup.addListener("execute", () => this.__groupByChanged(null));
+      dontGroup.addListener("execute", () => this._groupByChanged(null));
 
       groupByMenu.add(dontGroup);
       groupOptions.add(dontGroup);
 
       if (this._resourceType === "template") {
-        const tagByGroup = new qx.ui.menu.RadioButton(this.tr("Tags"));
-        tagByGroup.addListener("execute", () => this.__groupByChanged("tags"));
-        groupByMenu.add(tagByGroup);
-        groupOptions.add(tagByGroup);
+        const groupByTag = new qx.ui.menu.RadioButton(this.tr("Tags"));
+        groupByTag.addListener("execute", () => this._groupByChanged("tags"));
+        groupByMenu.add(groupByTag);
+        groupOptions.add(groupByTag);
         if (
           osparc.product.Utils.isProduct("s4l") ||
           osparc.product.Utils.isProduct("s4lacad") ||
           osparc.product.Utils.isProduct("s4llite")
         ) {
-          tagByGroup.execute();
+          groupByTag.execute();
         }
+      } else if (this._resourceType === "service" && osparc.product.Utils.groupServices()) {
+        const groupByFeatured = new qx.ui.menu.RadioButton(this.tr("Featured"));
+        groupByFeatured.addListener("execute", () => this._groupByChanged("groupedServices"));
+        groupByMenu.add(groupByFeatured);
+        groupOptions.add(groupByFeatured);
+        groupByFeatured.execute();
+        groupByButton.exclude(); // don't let users change the grouping
       }
 
       const groupByShared = new qx.ui.menu.RadioButton(this.tr("Shared with"));
-      groupByShared.addListener("execute", () => this.__groupByChanged("shared"));
+      groupByShared.addListener("execute", () => this._groupByChanged("shared"));
       groupByMenu.add(groupByShared);
       groupOptions.add(groupByShared);
 

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

@@ -58,7 +58,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     groupBy: {
-      check: [null, "tags", "shared"],
+      check: [null, "tags", "shared", "groupedServices"],
       init: null,
       nullable: true
     }
@@ -309,8 +309,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
           case "shared":
             groupTitle = "Not Shared";
             break;
+          case "groupedServices":
+            groupTitle = "Misc";
+            break;
         }
-        const noGroupContainer = this.__createGroupContainer("no-group", groupTitle, "transparent");
+        const noGroupContainer = this.__createGroupContainer("no-group", groupTitle, "text");
         this.__groupedContainers.add(noGroupContainer);
         this._add(this.__groupedContainers);
       } else {
@@ -525,12 +528,55 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       }
     },
 
+    __groupByGroupedServices: function(cards, resourceData) {
+      const groupedServicesConfig = osparc.store.Products.getInstance().getGroupedServicesUiConfig();
+      if (groupedServicesConfig == null) {
+        return;
+      }
+
+      // create group containers for each category
+      groupedServicesConfig["categories"].forEach(category => {
+        if (this.__getGroupContainer(category["id"]) === null) {
+          const groupContainer = this.__createGroupContainer(category["id"], category["title"], category["color"]);
+          groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
+          this.__groupedContainers.add(groupContainer);
+        }
+      });
+
+      // get the right container
+      let container = null;
+      const serviceKey = resourceData["key"];
+      if (serviceKey) {
+        const groupInfo = groupedServicesConfig["services"].find(serviceInfo => serviceInfo["serviceKey"] === serviceKey);
+        if (groupInfo) {
+          container = this.__getGroupContainer(groupInfo["category"]);
+        }
+      }
+      if (container === null) {
+        container = this.__getGroupContainer("no-group");
+        container.setHeaderIcon("@FontAwesome5Solid/tag/24");
+      }
+
+      // create the card and add it to the container
+      const card = this.__createCard(resourceData);
+      this.__addCardToContainer(card, container);
+      cards.push(card);
+
+      this.__moveNoGroupToLast();
+      this.__groupedContainersList.forEach(groupedContainer => {
+        groupedContainer.setExpanded(true);
+        groupedContainer.getExpandButton().exclude();
+      });
+    },
+
     __resourceToCards: function(resourceData) {
       const cardsCreated = [];
       if (this.getGroupBy() === "tags") {
         this.__groupByTags(cardsCreated, resourceData);
       } else if (this.getGroupBy() === "shared") {
         this.__groupByShareWith(cardsCreated, resourceData);
+      } else if (this.getGroupBy() === "groupedServices") {
+        this.__groupByGroupedServices(cardsCreated, resourceData);
       } else {
         const card = this.__createCard(resourceData);
         this.__addCardToContainer(card, this.__nonGroupedContainer);

services/static-webserver/client/source/class/osparc/product/Utils.js

@@ -380,5 +380,9 @@ qx.Class.define("osparc.product.Utils", {
     hasNewPlusButton: function() {
       return Boolean(osparc.store.Products.getInstance().getPlusButtonUiConfig());
     },
+
+    groupServices: function() {
+      return Boolean(osparc.store.Products.getInstance().getGroupedServicesUiConfig());
+    },
   }
 });

services/static-webserver/client/source/class/osparc/store/Products.js

@@ -92,5 +92,9 @@ qx.Class.define("osparc.store.Products", {
     getNewStudiesUiConfig: function() {
       return this.__uiConfig["newStudies"];
     },
+
+    getGroupedServicesUiConfig: function() {
+      return this.__uiConfig["groupedServices"];
+    },
   }
 });

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

@@ -120,6 +120,32 @@
         "newStudyLabel": "New Pipeline",
         "idToWidget": "emptyStudyBtn"
       }]
+    },
+    "groupedServices": {
+      "categories": [{
+        "id": "featured",
+        "title": "Featured",
+        "color": "product-color"
+      }],
+      "services": [{
+        "serviceKey": "simcore/services/dynamic/s4l-ui",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-jupyter",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/iseg-web",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-ui-framework",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner-gpu",
+        "category": "featured"
+      }]
     }
   },
   "s4lacad": {
@@ -146,6 +172,32 @@
         "newStudyLabel": "New Pipeline",
         "idToWidget": "emptyStudyBtn"
       }]
+    },
+    "groupedServices": {
+      "categories": [{
+        "id": "featured",
+        "title": "Featured",
+        "color": "product-color"
+      }],
+      "services": [{
+        "serviceKey": "simcore/services/dynamic/s4l-ui",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-jupyter",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/iseg-web",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-ui-framework",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner-gpu",
+        "category": "featured"
+      }]
     }
   },
   "s4llite": {

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

@@ -7,6 +7,9 @@
     },
     "newStudies": {
       "$ref": "#/definitions/buttonConfig"
+    },
+    "groupedServices": {
+      "$ref": "#/definitions/groupedServicesConfig"
     }
   },
   "additionalProperties": false,
@@ -92,6 +95,34 @@
         }
       },
       "additionalProperties": false
+    },
+    "groupedServicesConfig": {
+      "type": "object",
+      "properties": {
+        "categories": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": { "type": "string" },
+              "title": { "type": "string" },
+              "description": { "type": "string" }
+            },
+            "required": ["id", "title"]
+          }
+        },
+        "services": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "serviceKey": { "type": "string" },
+              "category": { "type": "string" }
+            },
+            "required": ["serviceKey", "category"]
+          }
+        }
+      }
     }
   }
 }