Skip to content

Commit

Permalink
🐛 Meta fixes (#3150)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz committed Jun 29, 2022
1 parent f17b96b commit 1449f68
Show file tree
Hide file tree
Showing 10 changed files with 149 additions and 193 deletions.
40 changes: 13 additions & 27 deletions services/web/client/source/class/osparc/component/form/renderer/PropForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,16 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
}
},

__connectToInputNode: function(targetPortId, inputNodeId, outputKey) {
this.getNode().addInputNode(inputNodeId);
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
.then(connected => {
if (connected) {
this.getNode().fireEvent("reloadModel");
}
});
},

__addInputsMenuButtons: function(targetPortId, menu) {
const study = this.getStudy();
const thisNode = this.getNode();
Expand All @@ -197,15 +207,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
inputNode.bind("label", paramButton, "label", {
converter: val => val + " : " + inputNode.getOutput(outputKey).label
});
paramButton.addListener("execute", () => {
this.getNode().addInputNode(inputNodeId);
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
.then(connected => {
if (connected) {
this.getNode().fireEvent("reloadModel");
}
});
}, this);
paramButton.addListener("execute", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);
menu.add(paramButton);
osparc.utils.Ports.arePortsCompatible(inputNode, outputKey, this.getNode(), targetPortId)
.then(compatible => {
Expand Down Expand Up @@ -272,15 +274,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
.then(compatible => {
if (compatible) {
const paramButton = new qx.ui.menu.Button(inputNode.getOutput(outputKey).label);
paramButton.addListener("execute", () => {
this.getNode().addInputNode(inputNodeId);
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
.then(connected => {
if (connected) {
this.getNode().fireEvent("reloadModel");
}
});
}, this);
paramButton.addListener("execute", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);
menu.add(paramButton);
menuBtn.show();
}
Expand All @@ -303,15 +297,7 @@ qx.Class.define("osparc.component.form.renderer.PropForm", {
const paramButton = new qx.ui.menu.Button();
paramButton.nodeId = inputNodeId;
paramNode.bind("label", paramButton, "label");
paramButton.addListener("execute", () => {
this.getNode().addInputNode(inputNodeId);
this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)
.then(connected => {
if (connected) {
this.getNode().fireEvent("reloadModel");
}
});
}, this);
paramButton.addListener("execute", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);
if (!menu.getChildren().some(child => child.nodeId === paramButton.nodeId)) {
menu.add(paramButton);
menuBtn.show();
Expand Down
14 changes: 9 additions & 5 deletions services/web/client/source/class/osparc/component/node/ParameterEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@ qx.Class.define("osparc.component.node.ParameterEditor", {

statics: {
getParameterOutputTypeFromMD: function(metaData) {
return metaData["outputs"]["out_1"]["type"];
let type = metaData["outputs"]["out_1"]["type"];
if (type === "ref_contentSchema") {
type = metaData["outputs"]["out_1"]["contentSchema"]["type"];
}
return type;
},

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

setParameterOutputValue: function(node, val) {
node.setOutputData({
"out_1": val
"out_1": this.self().getParameterOutputType(node) === "array" ? osparc.ui.form.ContentSchemaArray.addArrayBrackets(val) : val
});
}
},
Expand All @@ -58,6 +62,8 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
let control;
switch (id) {
case "label":
case "string":
case "number":
control = new qx.ui.form.TextField();
break;
case "data-type": {
Expand All @@ -75,9 +81,6 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
});
break;
}
case "number":
control = new qx.ui.form.TextField();
break;
case "integer":
control = new qx.ui.form.Spinner();
control.set({
Expand All @@ -89,6 +92,7 @@ qx.Class.define("osparc.component.node.ParameterEditor", {
control = new qx.ui.form.CheckBox();
break;
case "ref_contentSchema":
case "array":
control = new osparc.ui.form.ContentSchemaArray();
break;
}
Expand Down
9 changes: 5 additions & 4 deletions services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,16 +117,16 @@ qx.Class.define("osparc.component.workbench.ServiceCatalog", {
}

const containterSortBtns = new qx.ui.container.Composite(new qx.ui.layout.HBox(4));
const byNameBtn = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/sort-alpha-down/12");
byNameBtn.sortBy = "name";
const byHitsBtn = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/sort-numeric-down/12");
byHitsBtn.sortBy = "hits";
const byNameBtn = new qx.ui.form.ToggleButton(null, "@FontAwesome5Solid/sort-alpha-down/12");
byNameBtn.sortBy = "name";
const sortByGroup = this.__sortByGroup = new qx.ui.form.RadioGroup().set({
allowEmptySelection: false
});
[
byNameBtn,
byHitsBtn
byHitsBtn,
byNameBtn
].forEach(btn => {
containterSortBtns.add(btn);
sortByGroup.add(btn);
Expand Down Expand Up @@ -225,6 +225,7 @@ qx.Class.define("osparc.component.workbench.ServiceCatalog", {
},

__updateList: function() {
osparc.component.filter.UIFilterController.getInstance().resetGroup("serviceCatalog");
const filteredServices = [];
this.__allServicesList.forEach(service => {
if (this.__contextLeftNodeId === null && this.__contextRightNodeId === null) {
Expand Down
154 changes: 64 additions & 90 deletions services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,11 +308,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
const newNodeUI = this.__addNode(service, nodePos);
if (nodeLeftId !== null || nodeRightId !== null) {
const newNodeId = newNodeUI.getNodeId();
this._createEdgeBetweenNodes({
nodeId: nodeLeftId ? nodeLeftId : newNodeId
}, {
nodeId: nodeRightId ? nodeRightId : newNodeId
});
this._createEdgeBetweenNodes(nodeLeftId ? nodeLeftId : newNodeId, nodeRightId ? nodeRightId : newNodeId, true);
}
}, this);
srvCat.open();
Expand All @@ -326,8 +322,9 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
}

const newNodeUI = this._createNodeUI(node.getNodeId());
this.__createDragDropMechanism(newNodeUI);
this._addNodeUIToWorkbench(newNodeUI, pos);
qx.ui.core.queue.Layout.flush();
this.__createDragDropMechanism(newNodeUI);
return newNodeUI;
},

Expand Down Expand Up @@ -359,7 +356,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
let onNodeUI = null;
this.__nodesUI.forEach(nodeUI => {
const nBounds = nodeUI.getBounds();
console.log();
if (onNodeUI === null &&
pos.x > nBounds.left &&
pos.x < nBounds.left + nBounds.width &&
Expand All @@ -386,9 +382,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
nodeUI.open();
this.__nodesUI.push(nodeUI);

nodeUI.addListener("appear", () => {
this.__updateNodeUIPos(nodeUI);
}, this);
nodeUI.addListener("appear", () => this.__updateNodeUIPos(nodeUI), this);

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

qx.ui.core.queue.Layout.flush();

this.__updateHint();
},

Expand Down Expand Up @@ -600,58 +592,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
return nodeUI;
},

__createEdgeUI: function(node1Id, node2Id, edgeId) {
const edge = this.__getWorkbench().createEdge(edgeId, node1Id, node2Id);
if (!edge) {
return null;
}
if (this.__edgeRepresentationExists(edge)) {
return null;
}

// build representation
const nodeUI1 = this.getNodeUI(node1Id);
const nodeUI2 = this.getNodeUI(node2Id);
if (nodeUI1.getCurrentBounds() === null || nodeUI2.getCurrentBounds() === null) {
console.error("bounds not ready");
return null;
}
const port1 = nodeUI1.getOutputPort();
const port2 = nodeUI2.getInputPort();
if (port1 && port2) {
nodeUI2.getNode().addInputNode(node1Id);
const pointList = this.__getEdgePoints(nodeUI1, port1, nodeUI2, port2);
const x1 = pointList[0] ? pointList[0][0] : 0;
const y1 = pointList[0] ? pointList[0][1] : 0;
const x2 = pointList[1] ? pointList[1][0] : 0;
const y2 = pointList[1] ? pointList[1][1] : 0;
const edgeRepresentation = this.__svgLayer.drawCurve(x1, y1, x2, y2, !edge.isPortConnected());

edge.addListener("changePortConnected", e => {
const portConnected = e.getData();
osparc.wrapper.Svg.updateCurveDashes(edgeRepresentation, !portConnected);
}, this);

const edgeUI = new osparc.component.workbench.EdgeUI(edge, edgeRepresentation);
this.__edgesUI.push(edgeUI);

const that = this;
edgeUI.getRepresentation().widerCurve.node.addEventListener("click", e => {
// this is needed to get out of the context of svg
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
e.stopPropagation();
}, this);
edgeUI.getRepresentation().node.addEventListener("click", e => {
// this is needed to get out of the context of svg
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
e.stopPropagation();
}, this);

return edgeUI;
}
return null;
},

__edgeRepresentationExists: function(edge) {
for (let i=0; i<this.__edgesUI.length; i++) {
const edgeUI = this.__edgesUI[i];
Expand Down Expand Up @@ -732,11 +672,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
let nodeAId = dropIsInput ? dragNodeId : dropNodeId;
let nodeBId = dragIsInput ? dragNodeId : dropNodeId;

this._createEdgeBetweenNodes({
nodeId: nodeAId
}, {
nodeId: nodeBId
});
this._createEdgeBetweenNodes(nodeAId, nodeBId, true);
this.__removeTempEdge();
this.__removePointerMoveListener();
}
Expand All @@ -759,10 +695,54 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
}, this);
},

_createEdgeBetweenNodes: function(from, to, edgeId) {
const node1Id = from.nodeId;
const node2Id = to.nodeId;
this.__createEdgeUI(node1Id, node2Id, edgeId);
_createEdgeBetweenNodes: function(node1Id, node2Id, autoConnect = true) {
const edge = this.__getWorkbench().createEdge(null, node1Id, node2Id, autoConnect);
if (!edge) {
return;
}
if (this.__edgeRepresentationExists(edge)) {
return;
}

// build representation
const nodeUI1 = this.getNodeUI(node1Id);
const nodeUI2 = this.getNodeUI(node2Id);
if (nodeUI1.getCurrentBounds() === null || nodeUI2.getCurrentBounds() === null) {
console.error("bounds not ready");
return;
}

const port1 = nodeUI1.getOutputPort();
const port2 = nodeUI2.getInputPort();
if (port1 && port2) {
nodeUI2.getNode().addInputNode(node1Id);
const pointList = this.__getEdgePoints(nodeUI1, port1, nodeUI2, port2);
const x1 = pointList[0] ? pointList[0][0] : 0;
const y1 = pointList[0] ? pointList[0][1] : 0;
const x2 = pointList[1] ? pointList[1][0] : 0;
const y2 = pointList[1] ? pointList[1][1] : 0;
const edgeRepresentation = this.__svgLayer.drawCurve(x1, y1, x2, y2, !edge.isPortConnected());

edge.addListener("changePortConnected", e => {
const portConnected = e.getData();
osparc.wrapper.Svg.updateCurveDashes(edgeRepresentation, !portConnected);
}, this);

const edgeUI = new osparc.component.workbench.EdgeUI(edge, edgeRepresentation);
this.__edgesUI.push(edgeUI);

const that = this;
edgeUI.getRepresentation().widerCurve.node.addEventListener("click", e => {
// this is needed to get out of the context of svg
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
e.stopPropagation();
}, this);
edgeUI.getRepresentation().node.addEventListener("click", e => {
// this is needed to get out of the context of svg
that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
e.stopPropagation();
}, this);
}
},

__updateAllEdges: function() {
Expand Down Expand Up @@ -1041,38 +1021,34 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
this.__clearAllAnnotations();
},

__reloadCurrentModel: function() {
if (this._currentModel) {
this.loadModel(this.getStudy().getWorkbench());
}
},

loadModel: function(model) {
if (this.__svgLayer.getReady()) {
this._loadModel(model);
} else {
this.__svgLayer.addListenerOnce("SvgWidgetReady", () => {
this._loadModel(model);
}, this);
}
},

__reloadCurrentModel: function() {
if (this._currentModel) {
this.loadModel(this._currentModel);
this.__svgLayer.addListenerOnce("SvgWidgetReady", () => this._loadModel(model), this);
}
},

_loadModel: async function(model) {
this._clearAll();
this._currentModel = model;
if (model) {
qx.ui.core.queue.Visibility.flush();

// create nodes
const nodes = model.getNodes();
const nodeUIs = [];
for (const nodeId in nodes) {
const node = nodes[nodeId];
const nodeUI = this._createNodeUI(nodeId);
this.__createDragDropMechanism(nodeUI);
this._addNodeUIToWorkbench(nodeUI, node.getPosition());
nodeUIs.push(nodeUI);
}
qx.ui.core.queue.Layout.flush();

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

nodeUIs.forEach(nodeUI => this.__createDragDropMechanism(nodeUI));

// create edges
for (const nodeId in nodes) {
const node = nodes[nodeId];
const inputNodeIDs = node.getInputNodes();
inputNodeIDs.forEach(inputNodeId => {
if (inputNodeId in nodes) {
this._createEdgeBetweenNodes({
nodeId: inputNodeId
}, {
nodeId: nodeId
});
this._createEdgeBetweenNodes(inputNodeId, nodeId, false);
}
});
}
Expand Down

0 comments on commit 1449f68

Please sign in to comment.