{String.fromCharCode(this.icon)}
-
-
-
+ {graphView}
{
return 10 * this.state.widths[index];
- }
+ };
rowHeights = () => new Array(765)
.fill(true)
@@ -32,109 +33,127 @@ 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);
+ let maxWidth = this.state.maxWidth;
+
+ 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;
+ }
+
+ maxWidth += widths[index] * 10;
+ }
}
- }
- return widths;
- }
+ this.setState({maxWidth: maxWidth});
+ 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 = 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() {
+ let body;
+ let footer;
+
if (this.state.loading) {
- return (Loading data...
);
+ // Print loading spinner
+ body = ();
+ } 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 = (
+
+
+
+
+ );
+ } else {
+ // Display the grid
+ let displayHeight = this.state.rows.length * 20;
+ let displayWidth = this.state.maxWidth;
+
+ body = (
+ this.columnWidths(index)}
+ height={displayHeight < 600 ? displayHeight + 5 : 600}
+ rowCount={this.state.rows.length}
+ rowHeight={index => 20}
+ width={displayWidth < 900 ? displayWidth : 900}
+ >
+ {this.Cell}
+
+ );
}
- if (this.state.columnCount < 1) {
- return (
- e.stopPropagation()}>
-
- {this.props.node.options.name} View
+ return (
+ e.stopPropagation()}
+ >
+
+ {this.props.node.options.name} View
- Loading the data might take a while depending on how big the data is.
+ {body}
-
-
-
-
-
- );
- }
-
- return (
- e.stopPropagation()}>
-
- {this.props.node.options.name} View
-
-
- this.columnWidths(index)}
- height={150}
- rowCount={this.state.rowCount}
- rowHeight={index => 20}
- width={480}
- >
- {this.Cell}
-
-
+ {footer}
);
}
@@ -145,4 +164,4 @@ GraphView.propTypes = {
show: propTypes.bool,
toggleShow: propTypes.func,
onClose: propTypes.func,
-}
+};
diff --git a/front-end/src/styles/GraphView.css b/front-end/src/styles/GraphView.css
index 8c4e7a5..4648200 100644
--- a/front-end/src/styles/GraphView.css
+++ b/front-end/src/styles/GraphView.css
@@ -1,14 +1,21 @@
.Grid {
border: 1px solid #d9dddd;
width: auto;
+ margin: auto;
}
.GridItemEven, .GridItemOdd {
display: flex;
align-items: center;
justify-content: center;
+ border-right: 1px solid grey;
+ border-bottom: 1px solid grey;
}
.GridItemEven {
background-color: #f8f8f0;
}
+
+.GraphView {
+ max-width: 925px;
+}
\ No newline at end of file