From ddd1e16b62044de80afbefc7f3ddaa588d6529fa Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 1 May 2020 08:36:25 -0400 Subject: [PATCH 1/8] fix: Bug #74 to ensure edge goes from out -> in ports --- front-end/src/API.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/front-end/src/API.js b/front-end/src/API.js index ef08f75..94790cd 100644 --- a/front-end/src/API.js +++ b/front-end/src/API.js @@ -144,9 +144,18 @@ export async function uploadWorkflow(formData) { async function handleEdge(link, method) { const sourceId = link.getSourcePort().getNode().options.id; const targetId = link.getTargetPort().getNode().options.id; - return fetchWrapper( - `/node/edge/${sourceId}/${targetId}`, - {method: method}); + + let endpoint; + + if (link.getSourcePort().options.in) { + // If edge goes from IN port -> OUT port, reverse the ports + endpoint = `/node/edge/${targetId}/${sourceId}`; + } else { + // Otherwise, keep source -> target edge + endpoint = `/node/edge/${sourceId}/${targetId}`; + } + + return fetchWrapper(endpoint, {method: method}); } From f36dd5dd113be9e253cbb07afd8dc2e25ef5bd2e Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 1 May 2020 12:04:39 -0400 Subject: [PATCH 2/8] feat: Add loading spinner; disabled if Node not executed --- front-end/package-lock.json | 8 ++ front-end/package.json | 1 + .../src/components/CustomNode/GraphView.js | 80 +++++++++++-------- 3 files changed, 54 insertions(+), 35 deletions(-) diff --git a/front-end/package-lock.json b/front-end/package-lock.json index a5eccc8..4288ba8 100644 --- a/front-end/package-lock.json +++ b/front-end/package-lock.json @@ -11563,6 +11563,14 @@ } } }, + "react-spinners-css": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/react-spinners-css/-/react-spinners-css-1.1.7.tgz", + "integrity": "sha512-wcnFtGXCgFbIDsPr9CDoDU+F01uojf+ot/jJi4DUfHJ9S/zVRE7lIfSbsSHtIeDltclr3Dq9rHnAUdYaOt4SIg==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-test-renderer": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz", diff --git a/front-end/package.json b/front-end/package.json index 7b0b6ce..c5a94d7 100644 --- a/front-end/package.json +++ b/front-end/package.json @@ -22,6 +22,7 @@ "react-bootstrap": "^1.0.0-beta.17", "react-dom": "^16.13.0", "react-scripts": "3.4.1", + "react-spinners-css": "^1.1.7", "react-window": "^1.8.5", "regenerator-runtime": "^0.13.5", "resize-observer-polyfill": "^1.5.1" diff --git a/front-end/src/components/CustomNode/GraphView.js b/front-end/src/components/CustomNode/GraphView.js index 72cf99f..e2736a6 100644 --- a/front-end/src/components/CustomNode/GraphView.js +++ b/front-end/src/components/CustomNode/GraphView.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Roller } from 'react-spinners-css'; import { Modal, Button } from 'react-bootstrap'; import propTypes from 'prop-types'; import { VariableSizeGrid as Grid } from 'react-window'; @@ -93,48 +94,57 @@ export default class GraphView extends React.Component { render() { - if (this.state.loading) { - return (
Loading data...
); - } + let body; + let footer; - if (this.state.columnCount < 1) { - return ( - e.stopPropagation()}> - - {this.props.node.options.name} View - - - Loading the data might take a while depending on how big the data is. - - - - - - - ); + if (this.state.loading) { + // Print loading message + body = (); + } else if (this.state.columns.length < 1) { + // Print instructions about loading + body = "Loading the data might take a while depending on how big the data is."; + footer = ( + + + + + ); + } else { + // Display the grid + body = ( + this.columnWidths(index)} + height={500} + rowCount={this.state.rows.length} + rowHeight={index => 20} + width={800} + > + {this.Cell} + + ); } return ( - e.stopPropagation()}> + e.stopPropagation()} + > - {this.props.node.options.name} View + {this.props.node.options.name} View - this.columnWidths(index)} - height={150} - rowCount={this.state.rowCount} - rowHeight={index => 20} - width={480} - > - {this.Cell} - + {body} + {footer} ); } @@ -145,4 +155,4 @@ GraphView.propTypes = { show: propTypes.bool, toggleShow: propTypes.func, onClose: propTypes.func, -} +}; From 358d2d5e8e7b40fbaadaa69302dc618ae8b30aae Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 1 May 2020 12:06:03 -0400 Subject: [PATCH 3/8] feat(ui): Hides `GraphView` for Flow Control nodes; adjusts size --- .../components/CustomNode/CustomNodeWidget.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/front-end/src/components/CustomNode/CustomNodeWidget.js b/front-end/src/components/CustomNode/CustomNodeWidget.js index f042588..3cf8cbc 100644 --- a/front-end/src/components/CustomNode/CustomNodeWidget.js +++ b/front-end/src/components/CustomNode/CustomNodeWidget.js @@ -59,19 +59,29 @@ export default class CustomNodeWidget extends React.Component { ); } + + let graphView; + let width = 40; + if (this.props.node.options.node_type !== "flow_control") { + graphView = ( +
+ Tabular +
+ ); + width = 80; + } + return (
{this.props.node.options.name}
-
+
{String.fromCharCode(this.icon)}
-
- Tabular -
+ {graphView} Date: Fri, 1 May 2020 12:12:51 -0400 Subject: [PATCH 4/8] fix: Changes grid to alternate color by row; add border --- .../src/components/CustomNode/GraphView.js | 23 ++++--------------- front-end/src/styles/GraphView.css | 2 ++ 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/front-end/src/components/CustomNode/GraphView.js b/front-end/src/components/CustomNode/GraphView.js index e2736a6..c7981cd 100644 --- a/front-end/src/components/CustomNode/GraphView.js +++ b/front-end/src/components/CustomNode/GraphView.js @@ -69,28 +69,15 @@ export default class GraphView extends React.Component { } Cell = ({ columnIndex, rowIndex, style }) => { - const className = columnIndex % 2 - ? rowIndex % 2 === 0 - ? 'GridItemOdd' - : 'GridItemEven' - : rowIndex % 2 - ? 'GridItemOdd' - : 'GridItemEven'; - - if (rowIndex === 0) { - return ( -
- {this.state.keys[columnIndex]} -
- ); - } - + const className = (rowIndex % 2 === 0) ? 'GridItemEven' : 'GridItemOdd'; + const column = this.state.columns[columnIndex]; + return (
- {this.state.data[this.state.keys[columnIndex]][rowIndex.toString()] } + {(rowIndex === 0) ? column : this.state.data[column][rowIndex.toString()]}
); - } + }; render() { diff --git a/front-end/src/styles/GraphView.css b/front-end/src/styles/GraphView.css index 8c4e7a5..f34d469 100644 --- a/front-end/src/styles/GraphView.css +++ b/front-end/src/styles/GraphView.css @@ -7,6 +7,8 @@ display: flex; align-items: center; justify-content: center; + border-right: 1px solid grey; + border-bottom: 1px solid grey; } .GridItemEven { From 70aee491669344f0d40fb1443dc143aa03c01596 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 1 May 2020 13:12:15 -0400 Subject: [PATCH 5/8] fix: Increase size of grid (issue #60) Includes slight refactor of `computeWidths` to add dynamic sizing/increase reability of function --- .../src/components/CustomNode/GraphView.js | 113 ++++++++++-------- front-end/src/styles/GraphView.css | 4 + 2 files changed, 70 insertions(+), 47 deletions(-) diff --git a/front-end/src/components/CustomNode/GraphView.js b/front-end/src/components/CustomNode/GraphView.js index c7981cd..17bb4c3 100644 --- a/front-end/src/components/CustomNode/GraphView.js +++ b/front-end/src/components/CustomNode/GraphView.js @@ -14,16 +14,16 @@ export default class GraphView extends React.Component { this.key_id = props.node.getNodeId(); this.state = { loading: false, - rowCount: 0, - columnCount: 0, data: [], - keys: [], + rows: [], + columns: [], + maxWidth: 0, gridRef: React.createRef()}; - } + }; columnWidths = (index) => { return 10 * this.state.widths[index]; - } + }; rowHeights = () => new Array(765) .fill(true) @@ -33,45 +33,62 @@ export default class GraphView extends React.Component { this.props.toggleShow(); }; - computeWidths = (columnCount, rowCount, json) => { - const widths = new Array(columnCount); - const keys = Object.keys(json); - for (let index = 0; index < columnCount; index++) { - const key = keys[index]; - widths[index] = key.length; - for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) { - const value = json[key][rowIndex.toString()]; - if (value != null && value.length > widths[index]) { - widths[index] = value.length; - } + /** + * Compute width of grid columns. + * + * Width is based on the maximum-length cell contained within the JSON data. + * + * @param {Object} columns The column information from the data + * @param {int} rowCount Number of rows in the data + * @param {Object} data The raw data from Node execution + * @returns {any[]} + */ + computeWidths = (columns, rowCount, data) => { + const columnCount = columns.length; + const widths = new Array(columnCount); + + for (let index = 0; index < columnCount; index++) { + const column = columns[index]; + widths[index] = column.length; + + for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) { + const row = data[column][rowIndex.toString()]; + + if (row != null && row.length > widths[index]) { + widths[index] = row.length; + } + + this.state.maxWidth += (widths[index] * 10); + } } - } - return widths; - } + return widths; + }; load = async () => { - this.setState({loading: true}) - API.retrieveData(this.key_id) + this.setState({loading: true}); + + API.retrieveData(this.key_id) .then(json => { - const keys = Object.keys(json); - const columnCount = keys.length; - const rows = Object.keys(json[keys[0]]); - const rowCount = rows.length; - const widths = this.computeWidths(columnCount, rowCount, json); - this.setState({ data: json, - keys: keys, - columnCount: columnCount, - rowCount: rowCount, - loading: false, - widths: widths}); - }).catch(err => console.log(err)); - } + const columns = Object.keys(json); + const rows = Object.keys(json[columns[0]]); + const widths = this.computeWidths(columns, rows.length, json); + + this.setState({ + data: json, + columns: columns, + rows: rows, + loading: false, + widths: widths + }); + }) + .catch(err => console.error(err)); + }; Cell = ({ columnIndex, rowIndex, style }) => { const className = (rowIndex % 2 === 0) ? 'GridItemEven' : 'GridItemOdd'; const column = this.state.columns[columnIndex]; - + return (
{(rowIndex === 0) ? column : this.state.data[column][rowIndex.toString()]} @@ -85,9 +102,9 @@ export default class GraphView extends React.Component { let footer; if (this.state.loading) { - // Print loading message + // Print loading spinner body = (); - } else if (this.state.columns.length < 1) { + } else if (this.state.data.length < 1) { // Print instructions about loading body = "Loading the data might take a while depending on how big the data is."; footer = ( @@ -101,16 +118,19 @@ export default class GraphView extends React.Component { ); } else { // Display the grid + let displayHeight = this.state.rows.length * 20; + let displayWidth = this.state.maxWidth; + body = ( this.columnWidths(index)} - height={500} + height={displayHeight < 600 ? displayHeight + 5 : 600} rowCount={this.state.rows.length} rowHeight={index => 20} - width={800} + width={displayWidth < 1000 ? displayWidth : 1000} > {this.Cell} @@ -121,17 +141,16 @@ export default class GraphView extends React.Component { e.stopPropagation()} > - - {this.props.node.options.name} View - - - {body} - - {footer} + + {this.props.node.options.name} View + + + {body} + + {footer} ); } diff --git a/front-end/src/styles/GraphView.css b/front-end/src/styles/GraphView.css index f34d469..3bcccc4 100644 --- a/front-end/src/styles/GraphView.css +++ b/front-end/src/styles/GraphView.css @@ -14,3 +14,7 @@ .GridItemEven { background-color: #f8f8f0; } + +.modal-dialog, .GraphView { + max-width: 70%; +} \ No newline at end of file From 5b593e4d27bab35acf1d1ee1725063ffb719f474 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 1 May 2020 17:17:11 -0400 Subject: [PATCH 6/8] fix: Change styles to use `dialogClassName`; reduce max size --- front-end/src/components/CustomNode/GraphView.js | 3 ++- front-end/src/styles/GraphView.css | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/front-end/src/components/CustomNode/GraphView.js b/front-end/src/components/CustomNode/GraphView.js index 17bb4c3..a12b3ba 100644 --- a/front-end/src/components/CustomNode/GraphView.js +++ b/front-end/src/components/CustomNode/GraphView.js @@ -130,7 +130,7 @@ export default class GraphView extends React.Component { height={displayHeight < 600 ? displayHeight + 5 : 600} rowCount={this.state.rows.length} rowHeight={index => 20} - width={displayWidth < 1000 ? displayWidth : 1000} + width={displayWidth < 800 ? displayWidth : 800} > {this.Cell} @@ -142,6 +142,7 @@ export default class GraphView extends React.Component { show={this.props.show} onHide={this.props.toggleShow} centered + dialogClassName={"GraphView"} onWheel={e => e.stopPropagation()} > diff --git a/front-end/src/styles/GraphView.css b/front-end/src/styles/GraphView.css index 3bcccc4..13fba60 100644 --- a/front-end/src/styles/GraphView.css +++ b/front-end/src/styles/GraphView.css @@ -15,6 +15,6 @@ background-color: #f8f8f0; } -.modal-dialog, .GraphView { - max-width: 70%; +.GraphView { + max-width: 825px; } \ No newline at end of file From a7cb38346f3b491a34c963f0550224f7ff05ce69 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 1 May 2020 17:18:27 -0400 Subject: [PATCH 7/8] fix: Solves warning for modifying state directly; now `this.setState` --- front-end/src/components/CustomNode/GraphView.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/front-end/src/components/CustomNode/GraphView.js b/front-end/src/components/CustomNode/GraphView.js index a12b3ba..dc65294 100644 --- a/front-end/src/components/CustomNode/GraphView.js +++ b/front-end/src/components/CustomNode/GraphView.js @@ -46,6 +46,7 @@ export default class GraphView extends React.Component { computeWidths = (columns, rowCount, data) => { const columnCount = columns.length; const widths = new Array(columnCount); + let maxWidth = this.state.maxWidth; for (let index = 0; index < columnCount; index++) { const column = columns[index]; @@ -58,10 +59,11 @@ export default class GraphView extends React.Component { widths[index] = row.length; } - this.state.maxWidth += (widths[index] * 10); + maxWidth += widths[index] * 10; } } + this.setState({maxWidth: maxWidth}); return widths; }; From ee522ab5a933674500397a279035dcb1c3d464b8 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 1 May 2020 17:24:33 -0400 Subject: [PATCH 8/8] fix: Center Grid within Modal window; bump max width back up --- front-end/src/components/CustomNode/GraphView.js | 2 +- front-end/src/styles/GraphView.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/front-end/src/components/CustomNode/GraphView.js b/front-end/src/components/CustomNode/GraphView.js index dc65294..f299792 100644 --- a/front-end/src/components/CustomNode/GraphView.js +++ b/front-end/src/components/CustomNode/GraphView.js @@ -132,7 +132,7 @@ export default class GraphView extends React.Component { height={displayHeight < 600 ? displayHeight + 5 : 600} rowCount={this.state.rows.length} rowHeight={index => 20} - width={displayWidth < 800 ? displayWidth : 800} + width={displayWidth < 900 ? displayWidth : 900} > {this.Cell} diff --git a/front-end/src/styles/GraphView.css b/front-end/src/styles/GraphView.css index 13fba60..4648200 100644 --- a/front-end/src/styles/GraphView.css +++ b/front-end/src/styles/GraphView.css @@ -1,6 +1,7 @@ .Grid { border: 1px solid #d9dddd; width: auto; + margin: auto; } .GridItemEven, .GridItemOdd { @@ -16,5 +17,5 @@ } .GraphView { - max-width: 825px; + max-width: 925px; } \ No newline at end of file