From 64cbe7f8a513a5271c777ef3044a4fc4248f5838 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:33:15 -0400 Subject: [PATCH 01/14] fix: remove data input ports from flow nodes --- pyworkflow/pyworkflow/nodes/flow_control/integer_input.py | 2 +- pyworkflow/pyworkflow/nodes/flow_control/string_input.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py b/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py index 086eb89..e917d07 100644 --- a/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py +++ b/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py @@ -8,7 +8,7 @@ class IntegerNode(FlowNode): Allows for Strings to replace 'string' fields in Nodes """ name = "Integer Input" - num_in = 1 + num_in = 0 num_out = 1 color = 'purple' diff --git a/pyworkflow/pyworkflow/nodes/flow_control/string_input.py b/pyworkflow/pyworkflow/nodes/flow_control/string_input.py index eaade18..a5714a1 100644 --- a/pyworkflow/pyworkflow/nodes/flow_control/string_input.py +++ b/pyworkflow/pyworkflow/nodes/flow_control/string_input.py @@ -8,7 +8,7 @@ class StringNode(FlowNode): Allows for Strings to replace 'string' fields in Nodes """ name = "String Input" - num_in = 1 + num_in = 0 num_out = 1 color = 'purple' From c7edc96e59628a5720151b84caaf4ebc998238ed Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:35:35 -0400 Subject: [PATCH 02/14] fix: add flow control checks in workflow behavior --- pyworkflow/pyworkflow/workflow.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pyworkflow/pyworkflow/workflow.py b/pyworkflow/pyworkflow/workflow.py index 6d29a07..a9515a8 100644 --- a/pyworkflow/pyworkflow/workflow.py +++ b/pyworkflow/pyworkflow/workflow.py @@ -172,7 +172,7 @@ def get_all_flow_var_options(self, node_id): for predecessor_id in self.get_node_predecessors(node_id): node = self.get_node(predecessor_id) - if node.node_type == 'FlowNode': + if node.node_type == 'flow_control': flow_variables.append(node.to_json()) return flow_variables @@ -314,7 +314,7 @@ def execute(self, node_id): except NodeException as e: raise e - if node_to_execute.data is None: + if node_to_execute.data is None and node_to_execute.node_type != "flow_control": raise WorkflowException('execute', 'There was a problem saving node output.') return node_to_execute @@ -384,7 +384,7 @@ def load_input_data(self, node_id): if node_to_retrieve is None: raise WorkflowException('retrieve node data', 'The workflow does not contain node %s' % predecessor_id) - if node_to_retrieve.node_type != 'FlowNode': + if node_to_retrieve.node_type != 'flow_control': input_data.append(self.retrieve_node_data(node_to_retrieve)) except WorkflowException: From d7977138703e6cb6c27589281d1fd3e4dfe629ab Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:36:46 -0400 Subject: [PATCH 03/14] feat(ui): add API function to retrieve node by ID --- front-end/src/API.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/front-end/src/API.js b/front-end/src/API.js index a61e6e8..a184885 100644 --- a/front-end/src/API.js +++ b/front-end/src/API.js @@ -26,6 +26,16 @@ function fetchWrapper(endpoint, options = {}) { } +/** + * Retrieve node info from server side workflow + * @param {string} nodeId - ID of node to retrieve + * @returns {Promise} - server response (node info and flow variables) + */ +export async function getNode(nodeId) { + return fetchWrapper(`/node/${nodeId}`); +} + + /** * Add node to server-side workflow * @param {CustomNodeModel} node - JS node to add From ad5b87200b89323fb7b1894bca953003629c8677 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:38:46 -0400 Subject: [PATCH 04/14] refactor(ui): layout node action icons with flex --- .../components/CustomNode/CustomNodeWidget.js | 29 ++++++++++--------- front-end/src/styles/CustomNode.css | 16 +++++----- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/front-end/src/components/CustomNode/CustomNodeWidget.js b/front-end/src/components/CustomNode/CustomNodeWidget.js index a5a8e2b..5c442e9 100644 --- a/front-end/src/components/CustomNode/CustomNodeWidget.js +++ b/front-end/src/components/CustomNode/CustomNodeWidget.js @@ -75,19 +75,22 @@ export default class CustomNodeWidget extends React.Component {
{this.props.node.options.name}
-
{String.fromCharCode(this.icon)}
- - {graphView} - +
+
+ {String.fromCharCode(this.icon)} +
+ + {graphView} + +
{ portWidgets["in"] }
diff --git a/front-end/src/styles/CustomNode.css b/front-end/src/styles/CustomNode.css index 0787cb9..97da783 100644 --- a/front-end/src/styles/CustomNode.css +++ b/front-end/src/styles/CustomNode.css @@ -40,21 +40,21 @@ border-left-color: mediumpurple; } +.custom-node-icons { + width: 100%; + position: absolute; + display: flex; + justify-content: space-evenly; + align-items: center; +} + .custom-node-configure { font-size: 1.5rem; cursor: pointer; - position: absolute; - left: 25%; - top: 50%; - transform: translate(-50%, -50%); } .custom-node-tabular { cursor: pointer; - position: absolute; - right: 25%; - top: 25%; - transform: translate(50%, -25%); } .custom-node-description { From aea81ac7c072297a7ac03849d08b88f66e4bb121 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:40:26 -0400 Subject: [PATCH 05/14] feat(ui): add input flow port to node model --- front-end/src/components/CustomNode/CustomNodeModel.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/front-end/src/components/CustomNode/CustomNodeModel.js b/front-end/src/components/CustomNode/CustomNodeModel.js index c382e3a..0b0c890 100644 --- a/front-end/src/components/CustomNode/CustomNodeModel.js +++ b/front-end/src/components/CustomNode/CustomNodeModel.js @@ -13,6 +13,14 @@ export default class CustomNodeModel extends NodeModel { this.configParams = options.option_types; this.options.status = options.status || "unconfigured"; + // add flow control input port + this.addPort( + new VPPortModel({ + in: true, + type: 'vp-port', + name: 'flow-in' + }) + ); const nIn = options.num_in === undefined ? 1 : options.num_in; const nOut = options.num_out === undefined ? 1 : options.num_out; // setup in and out ports From af9df7cefe05e26a98390285796f9940262bf119 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:41:05 -0400 Subject: [PATCH 06/14] feat(ui): render flow input port in node widget --- .../components/CustomNode/CustomNodeWidget.js | 15 +++++++++++++-- front-end/src/styles/CustomNode.css | 17 +++++++++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/front-end/src/components/CustomNode/CustomNodeWidget.js b/front-end/src/components/CustomNode/CustomNodeWidget.js index 5c442e9..6ee902f 100644 --- a/front-end/src/components/CustomNode/CustomNodeWidget.js +++ b/front-end/src/components/CustomNode/CustomNodeWidget.js @@ -47,7 +47,9 @@ export default class CustomNodeWidget extends React.Component { render() { const engine = this.props.engine; - const ports = _.values(this.props.node.getPorts()); + const allPorts = _.values(this.props.node.getPorts()); + const ports = allPorts.filter(p => p.options.name !== "flow-in"); + const flowPort = allPorts.find(p => p.options.name === "flow-in"); // group ports by type (in/out) const sortedPorts = _.groupBy(ports, p => p.options.in === true ? "in" : "out"); // create PortWidget array for each type @@ -55,11 +57,19 @@ export default class CustomNodeWidget extends React.Component { for (let portType in sortedPorts) { portWidgets[portType] = sortedPorts[portType].map(port => -
+
); } + const flowPortWidget = flowPort ? + +
+ + : null; + + let graphView; let width = 40; if (this.props.node.options.node_type !== "flow_control") { @@ -91,6 +101,7 @@ export default class CustomNodeWidget extends React.Component { onDelete={this.handleDelete} onSubmit={this.acceptConfiguration} />
+ {flowPortWidget}
{ portWidgets["in"] }
diff --git a/front-end/src/styles/CustomNode.css b/front-end/src/styles/CustomNode.css index 97da783..90c06e3 100644 --- a/front-end/src/styles/CustomNode.css +++ b/front-end/src/styles/CustomNode.css @@ -14,6 +14,10 @@ position: relative; } +.custom-node-name { + margin-bottom: 3px; +} + .port-col { display: flex; flex-direction: column; @@ -40,6 +44,19 @@ border-left-color: mediumpurple; } +.flow-port-div { + position: absolute; + top: -5px; + left: -5px; +} + +.flow-port { + width: 10px; + height: 10px; + border-radius: 5px; + background-color: purple; +} + .custom-node-icons { width: 100%; position: absolute; From c12c39e8b69ffcaa5f46fcdd271e9271b5c883ae Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:47:30 -0400 Subject: [PATCH 07/14] feat(ui): retrieve flow nodes from server Fetches only when the node config form goes from hidden to displayed, so flow node options are up-to-date. --- .../src/components/CustomNode/NodeConfig.js | 28 +++++++++++++------ front-end/src/components/Workspace.js | 1 - 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/front-end/src/components/CustomNode/NodeConfig.js b/front-end/src/components/CustomNode/NodeConfig.js index 67c8f94..a30df87 100644 --- a/front-end/src/components/CustomNode/NodeConfig.js +++ b/front-end/src/components/CustomNode/NodeConfig.js @@ -12,13 +12,25 @@ export default class NodeConfig extends React.Component { this.state = { disabled: false, data: {}, - flowData: {} + flowData: {}, + flowNodes: [] }; this.updateData = this.updateData.bind(this); this.handleDelete = this.handleDelete.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } + getFlowNodes() { + if (!this.props.node) return; + API.getNode(this.props.node.options.id) + .then(node => this.setState({flowNodes: node.flow_variables})) + .catch(err => console.log(err)); + } + + componentDidUpdate(prevProps) { + if (!prevProps.show && this.props.show) this.getFlowNodes(); + } + // callback to update form data in state; // resulting state will be sent to node config callback updateData(key, value, flow = false) { @@ -82,7 +94,7 @@ export default class NodeConfig extends React.Component { value={this.props.node.config[key]} flowValue={this.props.node.options.option_replace ? this.props.node.options.option_replace[key] : null} - globals={this.props.globals} + flowNodes={this.state.flowNodes} disableFunc={(v) => this.setState({disabled: v})}/> )} @@ -149,7 +161,7 @@ function OptionInput(props) { } const hideFlow = props.node.options.is_global - || props.type === "file" || props.globals.length === 0 + || props.type === "file" || props.flowNodes.length === 0; return ( {props.label} @@ -159,7 +171,7 @@ function OptionInput(props) { {hideFlow ? null : @@ -290,7 +302,7 @@ function FlowVariableOverride(props) { const handleSelect = (event) => { const uuid = event.target.value; - const flow = props.flowNodes.find(d => d.id === uuid); + const flow = props.flowNodes.find(d => d.node_id === uuid); const obj = { node_id: uuid, is_global: flow.is_global @@ -308,9 +320,9 @@ function FlowVariableOverride(props) { )} diff --git a/front-end/src/components/Workspace.js b/front-end/src/components/Workspace.js index d12410b..1d06abb 100644 --- a/front-end/src/components/Workspace.js +++ b/front-end/src/components/Workspace.js @@ -53,7 +53,6 @@ class Workspace extends React.Component { API.getGlobalVars() .then(vars => { this.setState({globals: vars}); - this.model.globals = vars; }) .catch(err => console.log(err)); } From 79a9cfb9d5eb26aaaa7796e4b9a726b44b5b4fd8 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 3 May 2020 16:47:43 -0400 Subject: [PATCH 08/14] refactor(ui): tweak link style --- front-end/src/components/VPLink/VPLinkModel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front-end/src/components/VPLink/VPLinkModel.js b/front-end/src/components/VPLink/VPLinkModel.js index a29e2bb..832c6fd 100644 --- a/front-end/src/components/VPLink/VPLinkModel.js +++ b/front-end/src/components/VPLink/VPLinkModel.js @@ -5,8 +5,8 @@ export default class VPLinkModel extends DefaultLinkModel { constructor() { super({ type: 'default', - width: 5, - color: 'orange' + width: 2, + color: 'black' }); this.registerListener({ targetPortChanged: event => { From b4b4d1daa0b4e0dce7cb5bb551bbb9de64d7c744 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Tue, 5 May 2020 19:57:05 -0400 Subject: [PATCH 09/14] fix: use replacement values from flow nodes --- pyworkflow/pyworkflow/node.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pyworkflow/pyworkflow/node.py b/pyworkflow/pyworkflow/node.py index 0a3bc20..88153ae 100644 --- a/pyworkflow/pyworkflow/node.py +++ b/pyworkflow/pyworkflow/node.py @@ -59,6 +59,8 @@ def get_execution_options(self, workflow, flow_nodes): if key == 'file': option.set_value(workflow.path(replacement_value)) + else: + option.set_value(replacement_value) execution_options[key] = option From e7a7dd585a5a606dd925b0589a6aa262a874d153 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Tue, 5 May 2020 20:26:47 -0400 Subject: [PATCH 10/14] refactor: don't replace option values unnecessarily --- pyworkflow/pyworkflow/node.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pyworkflow/pyworkflow/node.py b/pyworkflow/pyworkflow/node.py index 88153ae..898fe1c 100644 --- a/pyworkflow/pyworkflow/node.py +++ b/pyworkflow/pyworkflow/node.py @@ -54,13 +54,12 @@ def get_execution_options(self, workflow, flow_nodes): if key in flow_nodes: replacement_value = flow_nodes[key].get_replacement_value() + option.set_value(replacement_value) else: replacement_value = option.get_value() if key == 'file': option.set_value(workflow.path(replacement_value)) - else: - option.set_value(replacement_value) execution_options[key] = option From 19f65edad27e11c208a91dc45ea734283c705df7 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Wed, 6 May 2020 17:06:15 -0400 Subject: [PATCH 11/14] feat(ui): add flow out port to node model (only on flow nodes) --- front-end/src/components/CustomNode/CustomNodeModel.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/front-end/src/components/CustomNode/CustomNodeModel.js b/front-end/src/components/CustomNode/CustomNodeModel.js index 0b0c890..a3d05ff 100644 --- a/front-end/src/components/CustomNode/CustomNodeModel.js +++ b/front-end/src/components/CustomNode/CustomNodeModel.js @@ -21,6 +21,16 @@ export default class CustomNodeModel extends NodeModel { name: 'flow-in' }) ); + // if flow node, add flow control output port + if (this.options.node_type === "flow_control") { + this.addPort( + new VPPortModel({ + in: false, + type: 'vp-port', + name: 'flow-out' + }) + ); + } const nIn = options.num_in === undefined ? 1 : options.num_in; const nOut = options.num_out === undefined ? 1 : options.num_out; // setup in and out ports From 88e6e34237c07aa9e6c5c87835cdfacbca3f235f Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Wed, 6 May 2020 17:06:46 -0400 Subject: [PATCH 12/14] feat(ui): render flow out port like flow in port --- .../src/components/CustomNode/CustomNodeWidget.js | 15 ++++++++------- front-end/src/styles/CustomNode.css | 7 +++++++ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/front-end/src/components/CustomNode/CustomNodeWidget.js b/front-end/src/components/CustomNode/CustomNodeWidget.js index 6ee902f..6bc38eb 100644 --- a/front-end/src/components/CustomNode/CustomNodeWidget.js +++ b/front-end/src/components/CustomNode/CustomNodeWidget.js @@ -48,8 +48,9 @@ export default class CustomNodeWidget extends React.Component { render() { const engine = this.props.engine; const allPorts = _.values(this.props.node.getPorts()); - const ports = allPorts.filter(p => p.options.name !== "flow-in"); - const flowPort = allPorts.find(p => p.options.name === "flow-in"); + const ports = allPorts.filter(p => !p.options.name.includes("flow")); + const flowInPort = allPorts.find(p => p.options.name === "flow-in"); + const flowOutPort = allPorts.find(p => p.options.name === "flow-out"); // group ports by type (in/out) const sortedPorts = _.groupBy(ports, p => p.options.in === true ? "in" : "out"); // create PortWidget array for each type @@ -62,12 +63,12 @@ export default class CustomNodeWidget extends React.Component { ); } - const flowPortWidget = flowPort ? - + const flowPortWidgets = [flowInPort, flowOutPort].filter(p => p).map(port => +
- : null; + ); let graphView; @@ -101,7 +102,7 @@ export default class CustomNodeWidget extends React.Component { onDelete={this.handleDelete} onSubmit={this.acceptConfiguration} />
- {flowPortWidget} + {flowPortWidgets}
{ portWidgets["in"] }
diff --git a/front-end/src/styles/CustomNode.css b/front-end/src/styles/CustomNode.css index 90c06e3..2060c0b 100644 --- a/front-end/src/styles/CustomNode.css +++ b/front-end/src/styles/CustomNode.css @@ -47,9 +47,16 @@ .flow-port-div { position: absolute; top: -5px; +} + +.flow-port-div-in { left: -5px; } +.flow-port-div-out { + left: 85%; +} + .flow-port { width: 10px; height: 10px; From 56a089240bf5d51fec0cdd96d3590e4d7d8050bd Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Wed, 6 May 2020 17:07:25 -0400 Subject: [PATCH 13/14] fix(ui): improve logic in canLinkToPort method --- front-end/src/components/VPPort/VPPortModel.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/front-end/src/components/VPPort/VPPortModel.js b/front-end/src/components/VPPort/VPPortModel.js index 4c0897a..c72778d 100644 --- a/front-end/src/components/VPPort/VPPortModel.js +++ b/front-end/src/components/VPPort/VPPortModel.js @@ -9,8 +9,16 @@ export default class VPPortModel extends DefaultPortModel { } canLinkToPort(port) { - // can't both be in or out ports - return port instanceof VPPortModel - && this.options.in !== port.options.in; + // if connecting to flow port, make sure this is a flow port + // and opposite of other's direction + if (port.options.name.includes("flow")) { + return this.options.name.includes("flow") + && this.options.in !== port.options.in + // otherwise, make sure this is NOT a flow port, and ensure + // in/out compatibility + } else { + return !this.options.name.includes("flow") + && this.options.in !== port.options.in + } } } From 0ff3d9d5868eb613df47fed7e80c58eba34dc619 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Wed, 6 May 2020 17:07:47 -0400 Subject: [PATCH 14/14] fix: remove data out port on flow nodes --- .../pyworkflow/pyworkflow/nodes/flow_control/integer_input.py | 2 +- .../pyworkflow/pyworkflow/nodes/flow_control/string_input.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/back-end/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py b/back-end/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py index e917d07..0ecb0cf 100644 --- a/back-end/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py +++ b/back-end/pyworkflow/pyworkflow/nodes/flow_control/integer_input.py @@ -9,7 +9,7 @@ class IntegerNode(FlowNode): """ name = "Integer Input" num_in = 0 - num_out = 1 + num_out = 0 color = 'purple' OPTIONS = { diff --git a/back-end/pyworkflow/pyworkflow/nodes/flow_control/string_input.py b/back-end/pyworkflow/pyworkflow/nodes/flow_control/string_input.py index a5714a1..81a785b 100644 --- a/back-end/pyworkflow/pyworkflow/nodes/flow_control/string_input.py +++ b/back-end/pyworkflow/pyworkflow/nodes/flow_control/string_input.py @@ -9,7 +9,7 @@ class StringNode(FlowNode): """ name = "String Input" num_in = 0 - num_out = 1 + num_out = 0 color = 'purple' OPTIONS = {