🎨 [Frontend] Dashboard: Filter Services by Type

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

@@ -117,6 +117,17 @@ qx.Class.define("osparc.dashboard.CardBase", {
       return false;
     },
 
+    filterServiceType: function(resourceType, metaData, serviceType) {
+      if (serviceType && resourceType === "service") {
+        if (metaData && metaData.type) {
+          const matches = metaData.type === serviceType;
+          return !matches;
+        }
+        return false;
+      }
+      return false;
+    },
+
     filterClassifiers: function(checks, classifiers) {
       if (classifiers && classifiers.length) {
         const includesAll = classifiers.every(classifier => checks.includes(classifier));
@@ -901,6 +912,12 @@ qx.Class.define("osparc.dashboard.CardBase", {
       return this.self().filterSharedWith(checks, sharedWith);
     },
 
+    _filterServiceType: function(serviceType) {
+      const resourceType = this.getResourceType();
+      const resourceData = this.getResourceData();
+      return this.self().filterServiceType(resourceType, resourceData, serviceType);
+    },
+
     _filterClassifiers: function(classifiers) {
       const checks = this.getClassifiers();
       return this.self().filterClassifiers(checks, classifiers);
@@ -921,6 +938,9 @@ qx.Class.define("osparc.dashboard.CardBase", {
       if (this._filterSharedWith(data.sharedWith)) {
         return true;
       }
+      if (this._filterServiceType(data.serviceType)) {
+        return true;
+      }
       if (this._filterClassifiers(data.classifiers)) {
         return true;
       }
@@ -942,6 +962,9 @@ qx.Class.define("osparc.dashboard.CardBase", {
       if (data.sharedWith) {
         return true;
       }
+      if ("serviceType" in data) {
+        return true;
+      }
       if (data.classifiers && data.classifiers.length) {
         return true;
       }

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

@@ -384,6 +384,11 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         this._searchBarFilter.setTagsActiveFilter(selectedTagIds);
       }, this);
 
+      resourceFilter.addListener("changeServiceType", e => {
+        const serviceType = e.getData();
+        this._searchBarFilter.setServiceTypeActiveFilter(serviceType.id, serviceType.label);
+      }, this);
+
       this._searchBarFilter.addListener("filterChanged", e => {
         const filterData = e.getData();
         resourceFilter.filterChanged(filterData);

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

@@ -25,27 +25,33 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     this.__resourceType = resourceType;
     this.__sharedWithButtons = [];
     this.__tagButtons = [];
+    this.__serviceTypeButtons = [];
 
     this._setLayout(new qx.ui.layout.VBox());
     this.__buildLayout();
   },
 
   events: {
     "changeSharedWith": "qx.event.type.Data",
-    "changeSelectedTags": "qx.event.type.Data"
+    "changeSelectedTags": "qx.event.type.Data",
+    "changeServiceType": "qx.event.type.Data"
   },
 
   members: {
     __resourceType: null,
     __sharedWithButtons: null,
     __tagButtons: null,
+    __serviceTypeButtons: null,
 
     __buildLayout: function() {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(40));
       layout.add(this.__createSharedWithFilterLayout());
       if (this.__resourceType !== "service") {
         layout.add(this.__createTagsFilterLayout());
       }
+      if (this.__resourceType === "service") {
+        layout.add(this.__createServiceTypeFilterLayout());
+      }
 
       const scrollContainer = new qx.ui.container.Scroll();
       scrollContainer.add(layout);
@@ -54,9 +60,12 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       });
     },
 
+    /* SHARED WITH */
     __createSharedWithFilterLayout: function() {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+
       const radioGroup = new qx.ui.form.RadioGroup();
+      radioGroup.setAllowEmptySelection(false);
 
       const options = osparc.dashboard.SearchBarFilter.getSharedWithOptions(this.__resourceType);
       options.forEach(option => {
@@ -82,11 +91,11 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
         this.__sharedWithButtons.push(button);
       });
 
-      radioGroup.setAllowEmptySelection(false);
-
       return layout;
     },
+    /* /SHARED WITH */
 
+    /* TAGS */
     __createTagsFilterLayout: function() {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
 
@@ -151,6 +160,46 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
         layout.add(showAllButton);
       }
     },
+    /* /TAGS */
+
+    /* SERVICE TYPE */
+    __createServiceTypeFilterLayout: function() {
+      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+
+      const radioGroup = new qx.ui.form.RadioGroup();
+      radioGroup.setAllowEmptySelection(true);
+
+      const serviceTypes = osparc.service.Utils.TYPES;
+      Object.keys(serviceTypes).forEach(serviceId => {
+        if (!["computational", "dynamic"].includes(serviceId)) {
+          return;
+        }
+        const serviceType = serviceTypes[serviceId];
+        const iconSize = 20;
+        const button = new qx.ui.toolbar.RadioButton(serviceType.label, serviceType.icon+iconSize);
+        button.id = serviceId;
+        button.set({
+          appearance: "filter-toggle-button",
+          value: false
+        });
+
+        layout.add(button);
+        radioGroup.add(button);
+
+        button.addListener("execute", () => {
+          const checked = button.getValue();
+          this.fireDataEvent("changeServiceType", {
+            id: checked ? serviceId : null,
+            label: checked ? serviceType.label : null
+          });
+        }, this);
+
+        this.__serviceTypeButtons.push(button);
+      });
+
+      return layout;
+    },
+    /* /SERVICE TYPE */
 
     filterChanged: function(filterData) {
       if ("sharedWith" in filterData) {
@@ -164,6 +213,11 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
           btn.setValue(filterData["tags"].includes(btn.id));
         });
       }
+      if ("serviceType" in filterData) {
+        this.__serviceTypeButtons.forEach(btn => {
+          btn.setValue(filterData["serviceType"] === btn.id);
+        });
+      }
     }
   }
 });

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

@@ -140,19 +140,27 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       }
       const menu = this.__filtersMenu;
       menu.removeAll();
-      const tagsButton = new qx.ui.menu.Button(this.tr("Tags"), "@FontAwesome5Solid/tags/12");
-      osparc.utils.Utils.setIdToWidget(tagsButton, "searchBarFilter-tags-button");
-      this.__addTags(tagsButton);
-      menu.add(tagsButton);
 
       const sharedWithButton = new qx.ui.menu.Button(this.tr("Shared with"), "@FontAwesome5Solid/share-alt/12");
       this.__addSharedWith(sharedWithButton);
       menu.add(sharedWithButton);
 
-      const classifiersButton = new qx.ui.menu.Button(this.tr("Classifiers"), "@FontAwesome5Solid/search/12");
-      osparc.utils.Utils.setIdToWidget(classifiersButton, "searchBarFilter-classifiers");
-      this.__addClassifiers(classifiersButton);
-      menu.add(classifiersButton);
+      if (this.__resourceType !== "service") {
+        const tagsButton = new qx.ui.menu.Button(this.tr("Tags"), "@FontAwesome5Solid/tags/12");
+        osparc.utils.Utils.setIdToWidget(tagsButton, "searchBarFilter-tags-button");
+        this.__addTags(tagsButton);
+        menu.add(tagsButton);
+
+        const classifiersButton = new qx.ui.menu.Button(this.tr("Classifiers"), "@FontAwesome5Solid/search/12");
+        this.__addClassifiers(classifiersButton);
+        menu.add(classifiersButton);
+      }
+
+      if (this.__resourceType === "service") {
+        const serviceTypeButton = new qx.ui.menu.Button(this.tr("Service Type"), "@FontAwesome5Solid/cogs/12");
+        this.__addServiceTypes(serviceTypeButton);
+        menu.add(serviceTypeButton);
+      }
     },
 
     __attachEventHandlers: function() {
@@ -248,6 +256,22 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       }
     },
 
+    __addServiceTypes: function(menuButton) {
+      const serviceTypeMenu = new qx.ui.menu.Menu();
+      menuButton.setMenu(serviceTypeMenu);
+      const serviceTypes = osparc.service.Utils.TYPES;
+      Object.keys(serviceTypes).forEach(serviceId => {
+        if (!["computational", "dynamic"].includes(serviceId)) {
+          return;
+        }
+        const serviceType = serviceTypes[serviceId];
+        const iconSize = 12;
+        const serviceTypeButton = new qx.ui.menu.Button(serviceType.label, serviceType.icon+iconSize);
+        serviceTypeMenu.add(serviceTypeButton);
+        serviceTypeButton.addListener("execute", () => this.__addChip("service-type", serviceId, serviceType.label), this);
+      });
+    },
+
     addTagActiveFilter: function(tag) {
       this.__addChip("tag", tag.id, tag.name);
     },
@@ -272,6 +296,15 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       }
     },
 
+    setServiceTypeActiveFilter: function(optionId, optionLabel) {
+      this.__removeChips("service-type");
+      if (optionId && optionLabel) {
+        this.__addChip("service-type", optionId, optionLabel);
+      } else {
+        this.__filter();
+      }
+    },
+
     __addChip: function(type, id, label) {
       const activeFilter = this.getChildControl("active-filters");
       const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);
@@ -328,6 +361,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
         tags: [],
         classifiers: [],
         sharedWith: null,
+        serviceType: null,
         text: ""
       };
       const textFilter = this.getTextFilterValue();
@@ -343,6 +377,9 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
           case "shared-with":
             filterData.sharedWith = chip.id === "show-all" ? null : chip.id;
             break;
+          case "service-type":
+            filterData.serviceType = chip.id;
+            break;
         }
       });
       return filterData;

services/static-webserver/client/source/class/osparc/filter/MFilterable.js

@@ -31,7 +31,7 @@ qx.Mixin.define("osparc.filter.MFilterable", {
     },
     /**
      * Subscriber function for incoming messages. It implements the common filtering workflow of every
-     * filterable GUI element: If the filter state is appropiate, compare it with the own state and act
+     * filterable GUI element: If the filter state is appropriate, compare it with the own state and act
      * accordingly by applying the filter or removing it.
      *
      * @param {qx.event.message.Message} msg Message dispatched.

services/static-webserver/client/source/class/osparc/filter/NodeTypeFilter.js

@@ -27,7 +27,7 @@ qx.Class.define("osparc.filter.NodeTypeFilter", {
    * @extends osparc.filter.TagsFilter
    */
   construct: function(filterId, filterGroupId) {
-    this.base(arguments, this.tr("Node types"), filterId, filterGroupId);
+    this.base(arguments, this.tr("Service types"), filterId, filterGroupId);
     this._setLayout(new qx.ui.layout.HBox());
 
     this.__buildMenu();