Skip to content

Commit 1449f68

Browse files
odeimaizodeimaiz
authored
🐛 Meta fixes (ITISFoundation#3150)
1 parent f17b96b commit 1449f68

File tree

10 files changed

+149
-193
lines changed

10 files changed

+149
-193
lines changed

‎services/web/client/source/class/osparc/component/form/renderer/PropForm.js‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,16 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
184184
}
185185
},
186186

187+
__connectToInputNode: function(targetPortId, inputNodeId, outputKey) {
188+
this.getNode().addInputNode(inputNodeId);
189+
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
190+
.then(connected => {
191+
if (connected) {
192+
this.getNode().fireEvent("reloadModel");
193+
}
194+
});
195+
},
196+
187197
__addInputsMenuButtons: function(targetPortId, menu) {
188198
const study = this.getStudy();
189199
const thisNode = this.getNode();
@@ -197,15 +207,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
197207
inputNode.bind("label", paramButton, "label", {
198208
converter: val => val + " : " + inputNode.getOutput(outputKey).label
199209
});
200-
paramButton.addListener("execute", () => {
201-
this.getNode().addInputNode(inputNodeId);
202-
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
203-
.then(connected => {
204-
if (connected) {
205-
this.getNode().fireEvent("reloadModel");
206-
}
207-
});
208-
}, this);
210+
paramButton.addListener("execute", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);
209211
menu.add(paramButton);
210212
osparc.utils.Ports.arePortsCompatible(inputNode, outputKey, this.getNode(), targetPortId)
211213
.then(compatible => {
@@ -272,15 +274,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
272274
.then(compatible => {
273275
if (compatible) {
274276
const paramButton = new qx.ui.menu.Button(inputNode.getOutput(outputKey).label);
275-
paramButton.addListener("execute", () => {
276-
this.getNode().addInputNode(inputNodeId);
277-
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
278-
.then(connected => {
279-
if (connected) {
280-
this.getNode().fireEvent("reloadModel");
281-
}
282-
});
283-
}, this);
277+
paramButton.addListener("execute", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);
284278
menu.add(paramButton);
285279
menuBtn.show();
286280
}
@@ -303,15 +297,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
303297
const paramButton = new qx.ui.menu.Button();
304298
paramButton.nodeId = inputNodeId;
305299
paramNode.bind("label", paramButton, "label");
306-
paramButton.addListener("execute", () => {
307-
this.getNode().addInputNode(inputNodeId);
308-
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
309-
.then(connected => {
310-
if (connected) {
311-
this.getNode().fireEvent("reloadModel");
312-
}
313-
});
314-
}, this);
300+
paramButton.addListener("execute", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);
315301
if (!menu.getChildren().some(child => child.nodeId === paramButton.nodeId)) {
316302
menu.add(paramButton);
317303
menuBtn.show();

‎services/web/client/source/class/osparc/component/node/ParameterEditor.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
3030

3131
statics: {
3232
getParameterOutputTypeFromMD: function(metaData) {
33-
return metaData["outputs"]["out_1"]["type"];
33+
let type = metaData["outputs"]["out_1"]["type"];
34+
if (type === "ref_contentSchema") {
35+
type = metaData["outputs"]["out_1"]["contentSchema"]["type"];
36+
}
37+
return type;
3438
},
3539

3640
getParameterOutputType: function(node) {
@@ -40,7 +44,7 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
4044

4145
setParameterOutputValue: function(node, val) {
4246
node.setOutputData({
43-
"out_1": val
47+
"out_1": this.self().getParameterOutputType(node) === "array" ? osparc.ui.form.ContentSchemaArray.addArrayBrackets(val) : val
4448
});
4549
}
4650
},
@@ -58,6 +62,8 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
5862
let control;
5963
switch (id) {
6064
case "label":
65+
case "string":
66+
case "number":
6167
control = new qx.ui.form.TextField();
6268
break;
6369
case "data-type": {
@@ -75,9 +81,6 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
7581
});
7682
break;
7783
}
78-
case "number":
79-
control = new qx.ui.form.TextField();
80-
break;
8184
case "integer":
8285
control = new qx.ui.form.Spinner();
8386
control.set({
@@ -89,6 +92,7 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
8992
control = new qx.ui.form.CheckBox();
9093
break;
9194
case "ref_contentSchema":
95+
case "array":
9296
control = new osparc.ui.form.ContentSchemaArray();
9397
break;
9498
}

‎services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,16 +117,16 @@ qx.Class.define("osparc.component.workbench.ServiceCatalog", {
117117
}
118118

119119
const containterSortBtns = new qx.ui.container.Composite(new qx.ui.layout.HBox(4));
120-
const byNameBtn = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/sort-alpha-down/12");
121-
byNameBtn.sortBy = "name";
122120
const byHitsBtn = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/sort-numeric-down/12");
123121
byHitsBtn.sortBy = "hits";
122+
const byNameBtn = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/sort-alpha-down/12");
123+
byNameBtn.sortBy = "name";
124124
const sortByGroup = this.__sortByGroup = new qx.ui.form.RadioGroup().set({
125125
allowEmptySelection: false
126126
});
127127
[
128-
byNameBtn,
129-
byHitsBtn
128+
byHitsBtn,
129+
byNameBtn
130130
].forEach(btn => {
131131
containterSortBtns.add(btn);
132132
sortByGroup.add(btn);
@@ -225,6 +225,7 @@ qx.Class.define("osparc.component.workbench.ServiceCatalog", {
225225
},
226226

227227
__updateList: function() {
228+
osparc.component.filter.UIFilterController.getInstance().resetGroup("serviceCatalog");
228229
const filteredServices = [];
229230
this.__allServicesList.forEach(service => {
230231
if (this.__contextLeftNodeId === null && this.__contextRightNodeId === null) {

‎services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js‎

Lines changed: 64 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -308,11 +308,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
308308
const newNodeUI = this.__addNode(service, nodePos);
309309
if (nodeLeftId !== null || nodeRightId !== null) {
310310
const newNodeId = newNodeUI.getNodeId();
311-
this._createEdgeBetweenNodes({
312-
nodeId: nodeLeftId ? nodeLeftId : newNodeId
313-
}, {
314-
nodeId: nodeRightId ? nodeRightId : newNodeId
315-
});
311+
this._createEdgeBetweenNodes(nodeLeftId ? nodeLeftId : newNodeId, nodeRightId ? nodeRightId : newNodeId, true);
316312
}
317313
}, this);
318314
srvCat.open();
@@ -326,8 +322,9 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
326322
}
327323

328324
const newNodeUI = this._createNodeUI(node.getNodeId());
329-
this.__createDragDropMechanism(newNodeUI);
330325
this._addNodeUIToWorkbench(newNodeUI, pos);
326+
qx.ui.core.queue.Layout.flush();
327+
this.__createDragDropMechanism(newNodeUI);
331328
return newNodeUI;
332329
},
333330

@@ -359,7 +356,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
359356
let onNodeUI = null;
360357
this.__nodesUI.forEach(nodeUI => {
361358
const nBounds = nodeUI.getBounds();
362-
console.log();
363359
if (onNodeUI === null &&
364360
pos.x > nBounds.left &&
365361
pos.x < nBounds.left + nBounds.width &&
@@ -386,9 +382,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
386382
nodeUI.open();
387383
this.__nodesUI.push(nodeUI);
388384

389-
nodeUI.addListener("appear", () => {
390-
this.__updateNodeUIPos(nodeUI);
391-
}, this);
385+
nodeUI.addListener("appear", () => this.__updateNodeUIPos(nodeUI), this);
392386

393387
const isStudyReadOnly = this.getStudy().isReadOnly();
394388
nodeUI.set({
@@ -404,8 +398,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
404398
this.__addNodeListeners(nodeUI);
405399
}
406400

407-
qx.ui.core.queue.Layout.flush();
408-
409401
this.__updateHint();
410402
},
411403

@@ -600,58 +592,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
600592
return nodeUI;
601593
},
602594

603-
__createEdgeUI: function(node1Id, node2Id, edgeId) {
604-
const edge = this.__getWorkbench().createEdge(edgeId, node1Id, node2Id);
605-
if (!edge) {
606-
return null;
607-
}
608-
if (this.__edgeRepresentationExists(edge)) {
609-
return null;
610-
}
611-
612-
// build representation
613-
const nodeUI1 = this.getNodeUI(node1Id);
614-
const nodeUI2 = this.getNodeUI(node2Id);
615-
if (nodeUI1.getCurrentBounds() === null || nodeUI2.getCurrentBounds() === null) {
616-
console.error("bounds not ready");
617-
return null;
618-
}
619-
const port1 = nodeUI1.getOutputPort();
620-
const port2 = nodeUI2.getInputPort();
621-
if (port1 && port2) {
622-
nodeUI2.getNode().addInputNode(node1Id);
623-
const pointList = this.__getEdgePoints(nodeUI1, port1, nodeUI2, port2);
624-
const x1 = pointList[0] ? pointList[0][0] : 0;
625-
const y1 = pointList[0] ? pointList[0][1] : 0;
626-
const x2 = pointList[1] ? pointList[1][0] : 0;
627-
const y2 = pointList[1] ? pointList[1][1] : 0;
628-
const edgeRepresentation = this.__svgLayer.drawCurve(x1, y1, x2, y2, !edge.isPortConnected());
629-
630-
edge.addListener("changePortConnected", e => {
631-
const portConnected = e.getData();
632-
osparc.wrapper.Svg.updateCurveDashes(edgeRepresentation, !portConnected);
633-
}, this);
634-
635-
const edgeUI = new osparc.component.workbench.EdgeUI(edge, edgeRepresentation);
636-
this.__edgesUI.push(edgeUI);
637-
638-
const that = this;
639-
edgeUI.getRepresentation().widerCurve.node.addEventListener("click", e => {
640-
// this is needed to get out of the context of svg
641-
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
642-
e.stopPropagation();
643-
}, this);
644-
edgeUI.getRepresentation().node.addEventListener("click", e => {
645-
// this is needed to get out of the context of svg
646-
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
647-
e.stopPropagation();
648-
}, this);
649-
650-
return edgeUI;
651-
}
652-
return null;
653-
},
654-
655595
__edgeRepresentationExists: function(edge) {
656596
for (let i=0; i<this.__edgesUI.length; i++) {
657597
const edgeUI = this.__edgesUI[i];
@@ -732,11 +672,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
732672
let nodeAId = dropIsInput ? dragNodeId : dropNodeId;
733673
let nodeBId = dragIsInput ? dragNodeId : dropNodeId;
734674

735-
this._createEdgeBetweenNodes({
736-
nodeId: nodeAId
737-
}, {
738-
nodeId: nodeBId
739-
});
675+
this._createEdgeBetweenNodes(nodeAId, nodeBId, true);
740676
this.__removeTempEdge();
741677
this.__removePointerMoveListener();
742678
}
@@ -759,10 +695,54 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
759695
}, this);
760696
},
761697

762-
_createEdgeBetweenNodes: function(from, to, edgeId) {
763-
const node1Id = from.nodeId;
764-
const node2Id = to.nodeId;
765-
this.__createEdgeUI(node1Id, node2Id, edgeId);
698+
_createEdgeBetweenNodes: function(node1Id, node2Id, autoConnect = true) {
699+
const edge = this.__getWorkbench().createEdge(null, node1Id, node2Id, autoConnect);
700+
if (!edge) {
701+
return;
702+
}
703+
if (this.__edgeRepresentationExists(edge)) {
704+
return;
705+
}
706+
707+
// build representation
708+
const nodeUI1 = this.getNodeUI(node1Id);
709+
const nodeUI2 = this.getNodeUI(node2Id);
710+
if (nodeUI1.getCurrentBounds() === null || nodeUI2.getCurrentBounds() === null) {
711+
console.error("bounds not ready");
712+
return;
713+
}
714+
715+
const port1 = nodeUI1.getOutputPort();
716+
const port2 = nodeUI2.getInputPort();
717+
if (port1 && port2) {
718+
nodeUI2.getNode().addInputNode(node1Id);
719+
const pointList = this.__getEdgePoints(nodeUI1, port1, nodeUI2, port2);
720+
const x1 = pointList[0] ? pointList[0][0] : 0;
721+
const y1 = pointList[0] ? pointList[0][1] : 0;
722+
const x2 = pointList[1] ? pointList[1][0] : 0;
723+
const y2 = pointList[1] ? pointList[1][1] : 0;
724+
const edgeRepresentation = this.__svgLayer.drawCurve(x1, y1, x2, y2, !edge.isPortConnected());
725+
726+
edge.addListener("changePortConnected", e => {
727+
const portConnected = e.getData();
728+
osparc.wrapper.Svg.updateCurveDashes(edgeRepresentation, !portConnected);
729+
}, this);
730+
731+
const edgeUI = new osparc.component.workbench.EdgeUI(edge, edgeRepresentation);
732+
this.__edgesUI.push(edgeUI);
733+
734+
const that = this;
735+
edgeUI.getRepresentation().widerCurve.node.addEventListener("click", e => {
736+
// this is needed to get out of the context of svg
737+
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
738+
e.stopPropagation();
739+
}, this);
740+
edgeUI.getRepresentation().node.addEventListener("click", e => {
741+
// this is needed to get out of the context of svg
742+
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
743+
e.stopPropagation();
744+
}, this);
745+
}
766746
},
767747

768748
__updateAllEdges: function() {
@@ -1041,38 +1021,34 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
10411021
this.__clearAllAnnotations();
10421022
},
10431023

1024+
__reloadCurrentModel: function() {
1025+
if (this._currentModel) {
1026+
this.loadModel(this.getStudy().getWorkbench());
1027+
}
1028+
},
1029+
10441030
loadModel: function(model) {
10451031
if (this.__svgLayer.getReady()) {
10461032
this._loadModel(model);
10471033
} else {
1048-
this.__svgLayer.addListenerOnce("SvgWidgetReady", () => {
1049-
this._loadModel(model);
1050-
}, this);
1051-
}
1052-
},
1053-
1054-
__reloadCurrentModel: function() {
1055-
if (this._currentModel) {
1056-
this.loadModel(this._currentModel);
1034+
this.__svgLayer.addListenerOnce("SvgWidgetReady", () => this._loadModel(model), this);
10571035
}
10581036
},
10591037

10601038
_loadModel: async function(model) {
10611039
this._clearAll();
10621040
this._currentModel = model;
10631041
if (model) {
1064-
qx.ui.core.queue.Visibility.flush();
1065-
10661042
// create nodes
10671043
const nodes = model.getNodes();
10681044
const nodeUIs = [];
10691045
for (const nodeId in nodes) {
10701046
const node = nodes[nodeId];
10711047
const nodeUI = this._createNodeUI(nodeId);
1072-
this.__createDragDropMechanism(nodeUI);
10731048
this._addNodeUIToWorkbench(nodeUI, node.getPosition());
10741049
nodeUIs.push(nodeUI);
10751050
}
1051+
qx.ui.core.queue.Layout.flush();
10761052

10771053
let tries = 0;
10781054
const maxTries = 40;
@@ -1084,17 +1060,15 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
10841060
}
10851061
console.log("nodes visible", nodeUIs.length, tries*sleepFor);
10861062

1063+
nodeUIs.forEach(nodeUI => this.__createDragDropMechanism(nodeUI));
1064+
10871065
// create edges
10881066
for (const nodeId in nodes) {
10891067
const node = nodes[nodeId];
10901068
const inputNodeIDs = node.getInputNodes();
10911069
inputNodeIDs.forEach(inputNodeId => {
10921070
if (inputNodeId in nodes) {
1093-
this._createEdgeBetweenNodes({
1094-
nodeId: inputNodeId
1095-
}, {
1096-
nodeId: nodeId
1097-
});
1071+
this._createEdgeBetweenNodes(inputNodeId, nodeId, false);
10981072
}
10991073
});
11001074
}

0 commit comments

Comments
 (0)