Skip to content

Commit 95d208b

Browse files
odeimaizodeimaiz
authored
🐛🎨 [Frontend] Fix: Filter and focus Service Catalog items (#6969)
1 parent 088192c commit 95d208b

File tree

9 files changed

+32
-102
lines changed

9 files changed

+32
-102
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ qx.Class.define("osparc.data.model.IframeHandler", {
378378
const node = this.getNode();
379379
if (node.getServiceUrl() !== null) {
380380
// restart button pushed
381-
if (this.getIFrame().getSource().includes(node.getServiceUrl())) {
381+
if (this.getIFrame() && this.getIFrame().getSource().includes(node.getServiceUrl())) {
382382
this.__loadIframe();
383383
}
384384

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ qx.Class.define("osparc.data.model.Service", {
4343
bootOptions: serviceData.bootOptions,
4444
classifiers: serviceData.classifiers || [],
4545
quality: serviceData.quality || null,
46-
hits: serviceData.hits || 0
46+
xType: serviceData.xType || null,
47+
hits: serviceData.hits || 0,
4748
});
4849
},
4950

@@ -147,6 +148,13 @@ qx.Class.define("osparc.data.model.Service", {
147148
},
148149

149150
// ------ ignore for serializing ------
151+
xType: {
152+
check: "String",
153+
nullable: true,
154+
init: null,
155+
event: "changeXType",
156+
},
157+
150158
hits: {
151159
check: "Number",
152160
init: 0,
@@ -158,7 +166,8 @@ qx.Class.define("osparc.data.model.Service", {
158166

159167
statics: {
160168
IgnoreSerializationProps: [
161-
"hits"
169+
"xType",
170+
"hits",
162171
]
163172
},
164173

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -356,9 +356,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
356356
this.__workbenchUI.openServiceCatalog({
357357
x: 50,
358358
y: 50
359-
}, {
360-
x: 50,
361-
y: 50
362359
});
363360
});
364361
homeAndNodesTree.add(addNewNodeBtn);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ qx.Class.define("osparc.filter.NodeTypeFilter", {
2727
* @extends osparc.filter.TagsFilter
2828
*/
2929
construct: function(filterId, filterGroupId) {
30-
this.base(arguments, this.tr("Service types"), filterId, filterGroupId);
30+
this.base(arguments, this.tr("Type"), filterId, filterGroupId);
3131
this._setLayout(new qx.ui.layout.HBox());
3232

3333
this.__buildMenu();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ qx.Class.define("osparc.filter.group.ServiceFilterGroup", {
2727
*/
2828
construct: function(filterGroupId) {
2929
this.base(arguments);
30-
this._setLayout(new qx.ui.layout.HBox(5));
30+
this._setLayout(new qx.ui.layout.HBox(10));
3131
this.__filterGroupId = filterGroupId;
3232
const textFilter = this.__textFilter = new osparc.filter.TextFilter("text", filterGroupId);
3333
osparc.utils.Utils.setIdToWidget(textFilter, "serviceFiltersTextFld");

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ qx.Class.define("osparc.service.ServiceList", {
2929
*/
3030
construct: function(filterGroupId) {
3131
this.base(arguments);
32-
this._setLayout(new qx.ui.layout.Flow(5, 5));
32+
this._setLayout(new qx.ui.layout.VBox(5));
3333
if (filterGroupId) {
3434
this.__filterGroup = filterGroupId;
3535
}

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

Lines changed: 2 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ qx.Class.define("osparc.service.ServiceListItem", {
2626
height: this.self().ITEM_HEIGHT,
2727
paddingTop: 0,
2828
paddingBottom: 0,
29-
allowGrowX: true
29+
allowGrowX: true,
30+
focusable: true,
3031
});
3132

3233
this.setResourceType("service");
@@ -60,33 +61,6 @@ qx.Class.define("osparc.service.ServiceListItem", {
6061
__versionsBox: null,
6162
__infoBtn: null,
6263

63-
_createChildControlImpl: function(id) {
64-
let control;
65-
switch (id) {
66-
case "extended-layout":
67-
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
68-
this._add(control, {
69-
row: 1,
70-
column: 0,
71-
colSpan: osparc.dashboard.ListButtonBase.POS.HITS
72-
});
73-
break;
74-
case "version-layout": {
75-
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
76-
this.getChildControl("extended-layout").add(control);
77-
const versionLabel = new qx.ui.basic.Label(this.tr("Version"));
78-
control.add(versionLabel);
79-
const selectBox = this.__versionsBox = new qx.ui.form.SelectBox();
80-
control.add(selectBox);
81-
const infoBtn = this.__infoBtn = new qx.ui.form.Button(null, "@MaterialIcons/info_outline/16");
82-
infoBtn.addListener("execute", () => this.__showServiceDetails(), this);
83-
control.add(infoBtn);
84-
break;
85-
}
86-
}
87-
return control || this.base(arguments, id);
88-
},
89-
9064
__applyService: function(service) {
9165
// BASE
9266
if (service.getThumbnail()) {
@@ -123,44 +97,6 @@ qx.Class.define("osparc.service.ServiceListItem", {
12397
});
12498
},
12599

126-
__itemSelected: function(selected) {
127-
this.setHeight(selected ? 70 : 35);
128-
const extendedLayout = this.getChildControl("extended-layout");
129-
const versionLayout = this.getChildControl("version-layout");
130-
extendedLayout.setVisibility(selected ? "visible" : "excluded");
131-
versionLayout.setVisibility(selected ? "visible" : "excluded");
132-
this.__populateVersions();
133-
},
134-
135-
__populateVersions: function() {
136-
const serviceKey = this.getService().getKey();
137-
const selectBox = this.__versionsBox;
138-
selectBox.removeAll();
139-
const versions = osparc.service.Utils.getVersions(serviceKey);
140-
const latest = new qx.ui.form.ListItem(this.self().LATEST);
141-
latest.version = this.self().LATEST;
142-
selectBox.add(latest);
143-
versions.forEach(version => {
144-
const listItem = osparc.service.Utils.versionToListItem(serviceKey, version);
145-
selectBox.add(listItem);
146-
});
147-
osparc.utils.Utils.growSelectBox(selectBox, 200);
148-
selectBox.setSelection([latest]);
149-
},
150-
151-
__showServiceDetails: function() {
152-
const key = this.getService().getKey();
153-
let version = this.__versionsBox.getSelection()[0].version;
154-
if (version === this.self().LATEST) {
155-
version = this.__versionsBox.getChildrenContainer().getSelectables()[1].version;
156-
}
157-
osparc.store.Services.getService(key, version)
158-
.then(serviceMetadata => {
159-
const serviceDetails = new osparc.info.ServiceLarge(serviceMetadata);
160-
osparc.info.ServiceLarge.popUpInWindow(serviceDetails);
161-
});
162-
},
163-
164100
_filterText: function(text) {
165101
const checks = [
166102
this.getService().getName(),

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,18 +54,18 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
5454

5555
this.__sortBy = osparc.service.SortServicesButtons.DefaultSorting;
5656

57-
let catalogLayout = new qx.ui.layout.VBox();
57+
const catalogLayout = new qx.ui.layout.VBox();
5858
this.setLayout(catalogLayout);
5959

60-
let filterLayout = this.__createFilterLayout();
60+
const filterLayout = this.__createFilterLayout();
6161
this.add(filterLayout);
6262

63-
let list = this.__createListLayout();
63+
const list = this.__createListLayout();
6464
this.add(list, {
6565
flex: 1
6666
});
6767

68-
let btnLayout = this.__createButtonsLayout();
68+
const btnLayout = this.__createButtonsLayout();
6969
this.add(btnLayout);
7070

7171
this.__createEvents();
@@ -103,9 +103,11 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
103103
});
104104

105105
const filters = new osparc.filter.group.ServiceFilterGroup("serviceCatalog").set({
106-
maxHeight: 30
106+
maxHeight: 30,
107+
});
108+
this.__textFilter = filters.getTextFilter().getChildControl("textfield", true).set({
109+
minWidth: 150,
107110
});
108-
this.__textFilter = filters.getTextFilter().getChildControl("textfield", true);
109111
layout.add(filters);
110112

111113
layout.add(new qx.ui.core.Spacer(), {
@@ -131,9 +133,7 @@ qx.Class.define("osparc.workbench.ServiceCatalog", {
131133
width: 568,
132134
backgroundColor: "background-main"
133135
});
134-
const scrolledServices = new qx.ui.container.Scroll().set({
135-
height: 260
136-
});
136+
const scrolledServices = new qx.ui.container.Scroll();
137137
scrolledServices.add(serviceList);
138138

139139
this.__serviceList.addListener("changeSelected", e => {

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -290,12 +290,11 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
290290
},
291291

292292
__openServiceCatalog: function(e) {
293-
const winPos = this.__pointerEventToScreenPos(e);
294293
const nodePos = this.__pointerEventToWorkbenchPos(e);
295-
this.openServiceCatalog(winPos, nodePos);
294+
this.openServiceCatalog(nodePos);
296295
},
297296

298-
openServiceCatalog: function(winPos, nodePos) {
297+
openServiceCatalog: function(nodePos) {
299298
if (this.getStudy().isReadOnly()) {
300299
return null;
301300
}
@@ -304,11 +303,6 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
304303
return null;
305304
}
306305
const srvCat = new osparc.workbench.ServiceCatalog();
307-
const maxLeft = this.getBounds().width - osparc.workbench.ServiceCatalog.Width;
308-
const maxHeight = this.getBounds().height - osparc.workbench.ServiceCatalog.Height;
309-
const posX = Math.min(winPos.x, maxLeft);
310-
const posY = Math.min(winPos.y, maxHeight);
311-
srvCat.moveTo(posX + this.__getLeftOffset(), posY + this.__getTopOffset());
312306
srvCat.addListener("addService", async e => {
313307
const {
314308
service,
@@ -321,6 +315,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
321315
this._createEdgeBetweenNodes(nodeLeftId ? nodeLeftId : newNodeId, nodeRightId ? nodeRightId : newNodeId, true);
322316
}
323317
}, this);
318+
srvCat.center();
324319
srvCat.open();
325320
return srvCat;
326321
},
@@ -770,8 +765,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
770765
let dragNodeId = data.nodeId;
771766

772767
if (this.__tempEdgeNodeId === dragNodeId) {
773-
const winPos = this.__unscaleCoordinates(this.__pointerPos.x, this.__pointerPos.y);
774-
const srvCat = this.openServiceCatalog(winPos, this.__pointerPos);
768+
const srvCat = this.openServiceCatalog(this.__pointerPos);
775769
if (srvCat) {
776770
this.__tempEdgeIsInput === true ? srvCat.setContext(null, dragNodeId) : srvCat.setContext(dragNodeId, null);
777771
srvCat.addListener("close", () => this.__removeTempEdge(), this);
@@ -1331,10 +1325,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
13311325
"text": "\uf090", // in
13321326
"action": () => {
13331327
const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), true);
1334-
const srvCat = this.openServiceCatalog({
1335-
x: 50,
1336-
y: 50
1337-
}, freePos);
1328+
const srvCat = this.openServiceCatalog(freePos);
13381329
if (srvCat) {
13391330
srvCat.setContext(null, nodeUI.getNodeId());
13401331
}
@@ -1344,10 +1335,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
13441335
"text": "\uf08b", // out
13451336
"action": () => {
13461337
const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), false);
1347-
const srvCat = this.openServiceCatalog({
1348-
x: 50,
1349-
y: 50
1350-
}, freePos);
1338+
const srvCat = this.openServiceCatalog(freePos);
13511339
if (srvCat) {
13521340
srvCat.setContext(nodeUI.getNodeId(), null);
13531341
}

0 commit comments

Comments
 (0)