Skip to content

Commit

Permalink
🐛🎨 [Frontend] Fix: Filter and focus Service Catalog items (ITISFounda…
Browse files Browse the repository at this point in the history 
…tion#6969)
  • Loading branch information
@odeimaiz
odeimaiz authored Dec 16, 2024
1 parent 088192c commit 95d208b
Show file tree
Hide file tree
Showing 9 changed files with 32 additions and 102 deletions.
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/data/model/IframeHandler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand Down
13 changes: 11 additions & 2 deletions services/static-webserver/client/source/class/osparc/data/model/Service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
},

Expand Down Expand Up @@ -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,
Expand All @@ -158,7 +166,8 @@ qx.Class.define("osparc.data.model.Service", {

statics: {
IgnoreSerializationProps: [
"hits"
"xType",
"hits",
]
},

Expand Down
3 changes: 0 additions & 3 deletions services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,9 +356,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
this.__workbenchUI.openServiceCatalog({
x: 50,
y: 50
}, {
x: 50,
y: 50
});
});
homeAndNodesTree.add(addNewNodeBtn);
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/filter/NodeTypeFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/filter/group/ServiceFilterGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/service/ServiceList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
68 changes: 2 additions & 66 deletions services/static-webserver/client/source/class/osparc/service/ServiceListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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()) {
Expand Down Expand Up @@ -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(),
Expand Down
18 changes: 9 additions & 9 deletions services/static-webserver/client/source/class/osparc/workbench/ServiceCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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(), {
Expand All @@ -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 => {
Expand Down
24 changes: 6 additions & 18 deletions services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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,
Expand All @@ -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;
},
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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());
}
Expand All @@ -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);
}
Expand Down

0 comments on commit 95d208b

Please sign in to comment.