Hypertool filter

Author: odeimaiz

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

@@ -160,7 +160,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       return false;
     },
 
-    filterServiceType: function(resourceType, metadata, serviceType) {
+    filterAppType: function(resourceType, metadata, serviceType) {
       if (serviceType && resourceType === "service") {
         if (metadata && metadata.type) {
           const matches = metadata.type === serviceType;
@@ -1103,10 +1103,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) {
@@ -1129,7 +1129,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)) {
@@ -1153,7 +1153,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) {

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

@@ -432,9 +432,9 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         this._searchBarFilter.setTagsActiveFilter(selectedTagIds);
       }, this);
 
-      resourceFilter.addListener("changeServiceType", e => {
-        const serviceType = e.getData();
-        this._searchBarFilter.setServiceTypeActiveFilter(serviceType.appType, serviceType.label);
+      resourceFilter.addListener("changeAppType", e => {
+        const appType = e.getData();
+        this._searchBarFilter.setAppTypeActiveFilter(appType.appType, appType.label);
       }, this);
 
       this._searchBarFilter.addListener("filterChanged", e => {

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

@@ -27,7 +27,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     this.__resourceType = resourceType;
     this.__sharedWithButtons = [];
     this.__tagButtons = [];
-    this.__serviceTypeButtons = [];
+    this.__appTypeButtons = [];
 
     this._setLayout(new qx.ui.layout.VBox(15));
     this.__buildLayout();
@@ -40,7 +40,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     "trashFolderRequested": "qx.event.type.Data",
     "changeSharedWith": "qx.event.type.Data",
     "changeSelectedTags": "qx.event.type.Data",
-    "changeServiceType": "qx.event.type.Data"
+    "changeAppType": "qx.event.type.Data",
   },
 
   members: {
@@ -49,7 +49,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     __trashButton: null,
     __sharedWithButtons: null,
     __tagButtons: null,
-    __serviceTypeButtons: null,
+    __appTypeButtons: null,
 
     __buildLayout: function() {
       const filtersSpacer = new qx.ui.core.Spacer(10, 10);
@@ -81,7 +81,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
           // this._add(this.__createResourceTypeContextButtons());
           this._add(filtersSpacer);
           this._add(this.__createSharedWithFilterLayout());
-          this._add(this.__createServiceTypeFilterLayout());
+          this._add(this.__createAppTypeFilterLayout());
           break;
       }
     },
@@ -442,7 +442,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     /* /TAGS */
 
     /* SERVICE TYPE */
-    __createServiceTypeFilterLayout: function() {
+    __createAppTypeFilterLayout: function() {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));
 
       const radioGroup = new qx.ui.form.RadioGroup();
@@ -458,15 +458,15 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
         const button = new qx.ui.toolbar.RadioButton(serviceType.label, serviceType.icon+iconSize);
         button.appType = serviceId;
         osparc.utils.Utils.setIdToWidget(button, this.__resourceType + "-serviceTypeFilterItem");
-        this.__serviceTypeButtons.push(button);
+        this.__appTypeButtons.push(button);
       });
 
       // hypertools filter
       const button = new qx.ui.toolbar.RadioButton("Hypertools", "@FontAwesome5Solid/wrench/"+iconSize);
       button.appType = "hypertool";
-      this.__serviceTypeButtons.push(button);
+      this.__appTypeButtons.push(button);
 
-      this.__serviceTypeButtons.forEach(btn => {
+      this.__appTypeButtons.forEach(btn => {
         btn.set({
           appearance: "filter-toggle-button",
           value: false
@@ -475,7 +475,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
         radioGroup.add(btn);
         btn.addListener("execute", () => {
           const checked = btn.getValue();
-          this.fireDataEvent("changeServiceType", {
+          this.fireDataEvent("changeAppType", {
             appType: checked ? btn.appType : null,
             label: checked ? btn.getLabel() : null
           });
@@ -498,9 +498,9 @@ 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);
+      if ("appType" in filterData) {
+        this.__appTypeButtons.forEach(btn => {
+          btn.setValue(filterData["appType"] === btn.appType);
         });
       }
     }

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

@@ -147,7 +147,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       this.__addSharedWith(sharedWithButton);
       menu.add(sharedWithButton);
 
-      if (this.__resourceType !== "service") {
+      if (["study", "template"].includes(this.__resourceType)) {
         const tagsButton = new qx.ui.menu.Button(this.tr("Tags"), "@FontAwesome5Solid/tags/12");
         osparc.utils.Utils.setIdToWidget(tagsButton, "searchBarFilter-tags-button");
         this.__addTags(tagsButton);
@@ -159,9 +159,9 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       }
 
       if (this.__resourceType === "service") {
-        const serviceTypeButton = new qx.ui.menu.Button(this.tr("Service Type"), "@FontAwesome5Solid/cogs/12");
-        this.__addServiceTypes(serviceTypeButton);
-        menu.add(serviceTypeButton);
+        const appTypeButton = new qx.ui.menu.Button(this.tr("App Type"), "@FontAwesome5Solid/cogs/12");
+        this.__addAppTypes(appTypeButton);
+        menu.add(appTypeButton);
       }
     },
 
@@ -258,20 +258,26 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       }
     },
 
-    __addServiceTypes: function(menuButton) {
+    __addAppTypes: function(menuButton) {
       const serviceTypeMenu = new qx.ui.menu.Menu();
       menuButton.setMenu(serviceTypeMenu);
+
+      const iconSize = 12;
       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);
+        serviceTypeButton.addListener("execute", () => this.__addChip("app-type", serviceId, serviceType.label), this);
       });
+
+      // hypertools filter
+      const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", "@FontAwesome5Solid/wrench/"+iconSize);
+      serviceTypeMenu.add(hypertoolTypeButton);
+      hypertoolTypeButton.addListener("execute", () => this.__addChip("app-type", "hypertool", "Hypertools"), this);
     },
 
     addTagActiveFilter: function(tag) {
@@ -300,10 +306,10 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       }
     },
 
-    setServiceTypeActiveFilter: function(appType, optionLabel) {
-      this.__removeChips("service-type");
+    setAppTypeActiveFilter: function(appType, optionLabel) {
+      this.__removeChips("app-type");
       if (appType && optionLabel) {
-        this.__addChip("service-type", appType, optionLabel);
+        this.__addChip("app-type", appType, optionLabel);
       } else {
         this.__filter();
       }
@@ -369,7 +375,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
         tags: [],
         classifiers: [],
         sharedWith: null,
-        serviceType: null,
+        appType: null,
         text: ""
       };
       const textFilter = this.getTextFilterValue();
@@ -385,8 +391,8 @@ 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;
+          case "app-type":
+            filterData.appType = chip.id;
             break;
         }
       });