🐛🎨 [Frontend] Fix: Filter and focus Service Catalog items

services/static-webserver/client/source/class/osparc/data/model/IframeHandler.js

@@ -378,7 +378,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       const node = this.getNode();
       if (node.getServiceUrl() !== null) {
         // restart button pushed
-        if (this.getIFrame().getSource().includes(node.getServiceUrl())) {
+        if (this.getIFrame() && this.getIFrame().getSource().includes(node.getServiceUrl())) {
           this.__loadIframe();
         }
 

services/static-webserver/client/source/class/osparc/data/model/Service.js

@@ -43,7 +43,8 @@ qx.Class.define("osparc.data.model.Service", {
       bootOptions: serviceData.bootOptions,
       classifiers: serviceData.classifiers || [],
       quality: serviceData.quality || null,
-      hits: serviceData.hits || 0
+      xType: serviceData.xType || null,
+      hits: serviceData.hits || 0,
     });
   },
 
@@ -147,6 +148,13 @@ qx.Class.define("osparc.data.model.Service", {
     },
 
     // ------ ignore for serializing ------
+    xType: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeXType",
+    },
+
     hits: {
       check: "Number",
       init: 0,
@@ -158,7 +166,8 @@ qx.Class.define("osparc.data.model.Service", {
 
   statics: {
     IgnoreSerializationProps: [
-      "hits"
+      "xType",
+      "hits",
     ]
   },
 

services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

@@ -356,9 +356,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         this.__workbenchUI.openServiceCatalog({
           x: 50,
           y: 50
-        }, {
-          x: 50,
-          y: 50
         });
       });
       homeAndNodesTree.add(addNewNodeBtn);

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("Service types"), filterId, filterGroupId);
+    this.base(arguments, this.tr("Type"), filterId, filterGroupId);
     this._setLayout(new qx.ui.layout.HBox());
 
     this.__buildMenu();

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

@@ -27,7 +27,7 @@ qx.Class.define("osparc.filter.group.ServiceFilterGroup", {
    */
   construct: function(filterGroupId) {
     this.base(arguments);
-    this._setLayout(new qx.ui.layout.HBox(5));
+    this._setLayout(new qx.ui.layout.HBox(10));
     this.__filterGroupId = filterGroupId;
     const textFilter = this.__textFilter = new osparc.filter.TextFilter("text", filterGroupId);
     osparc.utils.Utils.setIdToWidget(textFilter, "serviceFiltersTextFld");

services/static-webserver/client/source/class/osparc/service/ServiceList.js

@@ -29,7 +29,7 @@ qx.Class.define("osparc.service.ServiceList", {
    */
   construct: function(filterGroupId) {
     this.base(arguments);
-    this._setLayout(new qx.ui.layout.Flow(5, 5));
+    this._setLayout(new qx.ui.layout.VBox(5));
     if (filterGroupId) {
       this.__filterGroup = filterGroupId;
     }

services/static-webserver/client/source/class/osparc/service/ServiceListItem.js

@@ -26,7 +26,8 @@ qx.Class.define("osparc.service.ServiceListItem", {
       height: this.self().ITEM_HEIGHT,
       paddingTop: 0,
       paddingBottom: 0,
-      allowGrowX: true
+      allowGrowX: true,
+      focusable: true,
     });
 
     this.setResourceType("service");
@@ -60,33 +61,6 @@ qx.Class.define("osparc.service.ServiceListItem", {
     __versionsBox: null,
     __infoBtn: null,
 
-    _createChildControlImpl: function(id) {
-      let control;
-      switch (id) {
-        case "extended-layout":
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
-          this._add(control, {
-            row: 1,
-            column: 0,
-            colSpan: osparc.dashboard.ListButtonBase.POS.HITS
-          });
-          break;
-        case "version-layout": {
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
-          this.getChildControl("extended-layout").add(control);
-          const versionLabel = new qx.ui.basic.Label(this.tr("Version"));
-          control.add(versionLabel);
-          const selectBox = this.__versionsBox = new qx.ui.form.SelectBox();
-          control.add(selectBox);
-          const infoBtn = this.__infoBtn = new qx.ui.form.Button(null, "@MaterialIcons/info_outline/16");
-          infoBtn.addListener("execute", () => this.__showServiceDetails(), this);
-          control.add(infoBtn);
-          break;
-        }
-      }
-      return control || this.base(arguments, id);
-    },
-
     __applyService: function(service) {
       // BASE
       if (service.getThumbnail()) {
@@ -123,44 +97,6 @@ qx.Class.define("osparc.service.ServiceListItem", {
       });
     },
 
-    __itemSelected: function(selected) {
-      this.setHeight(selected ? 70 : 35);
-      const extendedLayout = this.getChildControl("extended-layout");
-      const versionLayout = this.getChildControl("version-layout");
-      extendedLayout.setVisibility(selected ? "visible" : "excluded");
-      versionLayout.setVisibility(selected ? "visible" : "excluded");
-      this.__populateVersions();
-    },
-
-    __populateVersions: function() {
-      const serviceKey = this.getService().getKey();
-      const selectBox = this.__versionsBox;
-      selectBox.removeAll();
-      const versions = osparc.service.Utils.getVersions(serviceKey);
-      const latest = new qx.ui.form.ListItem(this.self().LATEST);
-      latest.version = this.self().LATEST;
-      selectBox.add(latest);
-      versions.forEach(version => {
-        const listItem = osparc.service.Utils.versionToListItem(serviceKey, version);
-        selectBox.add(listItem);
-      });
-      osparc.utils.Utils.growSelectBox(selectBox, 200);
-      selectBox.setSelection([latest]);
-    },
-
-    __showServiceDetails: function() {
-      const key = this.getService().getKey();
-      let version = this.__versionsBox.getSelection()[0].version;
-      if (version === this.self().LATEST) {
-        version = this.__versionsBox.getChildrenContainer().getSelectables()[1].version;
-      }
-      osparc.store.Services.getService(key, version)
-        .then(serviceMetadata => {
-          const serviceDetails = new osparc.info.ServiceLarge(serviceMetadata);
-          osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
-        });
-    },
-
     _filterText: function(text) {
       const checks = [
         this.getService().getName(),

services/static-webserver/client/source/class/osparc/workbench/ServiceCatalog.js

@@ -54,18 +54,18 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
 
     this.__sortBy = osparc.service.SortServicesButtons.DefaultSorting;
 
-    let catalogLayout = new qx.ui.layout.VBox();
+    const catalogLayout = new qx.ui.layout.VBox();
     this.setLayout(catalogLayout);
 
-    let filterLayout = this.__createFilterLayout();
+    const filterLayout = this.__createFilterLayout();
     this.add(filterLayout);
 
-    let list = this.__createListLayout();
+    const list = this.__createListLayout();
     this.add(list, {
       flex: 1
     });
 
-    let btnLayout = this.__createButtonsLayout();
+    const btnLayout = this.__createButtonsLayout();
     this.add(btnLayout);
 
     this.__createEvents();
@@ -103,9 +103,11 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
       });
 
       const filters = new osparc.filter.group.ServiceFilterGroup("serviceCatalog").set({
-        maxHeight: 30
+        maxHeight: 30,
+      });
+      this.__textFilter = filters.getTextFilter().getChildControl("textfield", true).set({
+        minWidth: 150,
       });
-      this.__textFilter = filters.getTextFilter().getChildControl("textfield", true);
       layout.add(filters);
 
       layout.add(new qx.ui.core.Spacer(), {
@@ -131,9 +133,7 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
         width: 568,
         backgroundColor: "background-main"
       });
-      const scrolledServices = new qx.ui.container.Scroll().set({
-        height: 260
-      });
+      const scrolledServices = new qx.ui.container.Scroll();
       scrolledServices.add(serviceList);
 
       this.__serviceList.addListener("changeSelected", e => {

services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js

@@ -290,12 +290,11 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
     },
 
     __openServiceCatalog: function(e) {
-      const winPos = this.__pointerEventToScreenPos(e);
       const nodePos = this.__pointerEventToWorkbenchPos(e);
-      this.openServiceCatalog(winPos, nodePos);
+      this.openServiceCatalog(nodePos);
     },
 
-    openServiceCatalog: function(winPos, nodePos) {
+    openServiceCatalog: function(nodePos) {
       if (this.getStudy().isReadOnly()) {
         return null;
       }
@@ -304,11 +303,6 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
         return null;
       }
       const srvCat = new osparc.workbench.ServiceCatalog();
-      const maxLeft = this.getBounds().width - osparc.workbench.ServiceCatalog.Width;
-      const maxHeight = this.getBounds().height - osparc.workbench.ServiceCatalog.Height;
-      const posX = Math.min(winPos.x, maxLeft);
-      const posY = Math.min(winPos.y, maxHeight);
-      srvCat.moveTo(posX + this.__getLeftOffset(), posY + this.__getTopOffset());
       srvCat.addListener("addService", async e => {
         const {
           service,
@@ -321,6 +315,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
           this._createEdgeBetweenNodes(nodeLeftId ? nodeLeftId : newNodeId, nodeRightId ? nodeRightId : newNodeId, true);
         }
       }, this);
+      srvCat.center();
       srvCat.open();
       return srvCat;
     },
@@ -770,8 +765,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
         let dragNodeId = data.nodeId;
 
         if (this.__tempEdgeNodeId === dragNodeId) {
-          const winPos = this.__unscaleCoordinates(this.__pointerPos.x, this.__pointerPos.y);
-          const srvCat = this.openServiceCatalog(winPos, this.__pointerPos);
+          const srvCat = this.openServiceCatalog(this.__pointerPos);
           if (srvCat) {
             this.__tempEdgeIsInput === true ? srvCat.setContext(null, dragNodeId) : srvCat.setContext(dragNodeId, null);
             srvCat.addListener("close", () => this.__removeTempEdge(), this);
@@ -1331,10 +1325,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
           "text": "\uf090", // in
           "action": () => {
             const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), true);
-            const srvCat = this.openServiceCatalog({
-              x: 50,
-              y: 50
-            }, freePos);
+            const srvCat = this.openServiceCatalog(freePos);
             if (srvCat) {
               srvCat.setContext(null, nodeUI.getNodeId());
             }
@@ -1344,10 +1335,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
           "text": "\uf08b", // out
           "action": () => {
             const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), false);
-            const srvCat = this.openServiceCatalog({
-              x: 50,
-              y: 50
-            }, freePos);
+            const srvCat = this.openServiceCatalog(freePos);
             if (srvCat) {
               srvCat.setContext(nodeUI.getNodeId(), null);
             }