From dbef3543a9fada6f08824491dbef9d83f4eb845c Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Sat, 6 Aug 2016 23:08:24 -0700 Subject: [PATCH] Linted all, refactored VisualizeModal out --- caravel/assets/javascripts/SqlLab/actions.js | 2 +- .../SqlLab/components/ButtonWithTooltip.jsx | 50 +++++----- .../SqlLab/components/LeftPane.jsx | 81 ++++++++-------- .../{QueryLog.jsx => QueryHistory.jsx} | 37 ++++---- .../SqlLab/components/QueryTable.jsx | 68 ++------------ .../SqlLab/components/ResultSet.jsx | 64 ++++++++++--- .../SqlLab/components/SouthPane.jsx | 56 ++++++----- .../SqlLab/components/SqlEditor.jsx | 29 +++--- .../SqlLab/components/SqlEditorTopToolbar.jsx | 3 - .../SqlLab/components/TabbedSqlEditors.jsx | 10 +- .../components/TableWorkspaceElement.jsx | 5 +- .../SqlLab/components/VisualizeModal.jsx | 93 +++++++++++++++++++ caravel/assets/javascripts/SqlLab/main.css | 3 + caravel/assets/javascripts/SqlLab/reducers.js | 2 +- caravel/templates/caravel/sqllab.html | 6 ++ 15 files changed, 300 insertions(+), 209 deletions(-) rename caravel/assets/javascripts/SqlLab/components/{QueryLog.jsx => QueryHistory.jsx} (54%) create mode 100644 caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx create mode 100644 caravel/templates/caravel/sqllab.html diff --git a/caravel/assets/javascripts/SqlLab/actions.js b/caravel/assets/javascripts/SqlLab/actions.js index eb2b6d511bd..a2361368d11 100644 --- a/caravel/assets/javascripts/SqlLab/actions.js +++ b/caravel/assets/javascripts/SqlLab/actions.js @@ -22,7 +22,7 @@ export const REMOVE_WORKSPACE_QUERY = 'REMOVE_WORKSPACE_QUERY'; export const SET_ACTIVE_QUERY_EDITOR = 'SET_ACTIVE_QUERY_EDITOR'; export function resetState() { - return { type: RESET_STATE }; + return { type: RESET_STATE }; } export function addQueryEditor(queryEditor) { diff --git a/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx b/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx index 36220e6b4ff..622c721f6d3 100644 --- a/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx +++ b/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx @@ -1,33 +1,31 @@ import React from 'react'; import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'; - -class ButtonWithTooltip extends React.Component { - render() { - let tooltip = ( - - {this.props.tooltip} - - ); - return ( - { + let tooltip = ( + + {props.tooltip} + + ); + return ( + + - - ); - } -} + {props.children} + + + ); +}; + ButtonWithTooltip.defaultProps = { onClick: () => {}, disabled: false, diff --git a/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx b/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx index 27e441aac11..cebeb282880 100644 --- a/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx +++ b/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx @@ -8,51 +8,52 @@ import QueryLink from './QueryLink'; // CSS import 'react-select/dist/react-select.css'; -class LeftPane extends React.Component { - render() { - let queryElements; - if (this.props.workspaceQueries.length > 0) { - queryElements = this.props.workspaceQueries.map((q) => ); - } else { - queryElements = ( - - Use the save button on the SQL editor to save a query into this section for - future reference - - ); - } - return ( -
-
-
- - SQL Lab -
-
-
-
-
- - - - Saved Queries -
-
- {queryElements} -
-
- -
-
-
+const LeftPane = (props) => { + let queryElements; + if (props.workspaceQueries.length > 0) { + queryElements = props.workspaceQueries.map((q) => ); + } else { + queryElements = ( + + Use the save button on the SQL editor to save a query into this section for + future reference + ); } -} + return ( +
+
+
+ + SQL Lab +
+
+
+
+
+ + + + Saved Queries +
+
+ {queryElements} +
+
+ +
+
+
+ ); +}; + LeftPane.propTypes = { workspaceQueries: React.PropTypes.array, + actions: React.PropTypes.object, }; + LeftPane.defaultProps = { workspaceQueries: [], }; diff --git a/caravel/assets/javascripts/SqlLab/components/QueryLog.jsx b/caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx similarity index 54% rename from caravel/assets/javascripts/SqlLab/components/QueryLog.jsx rename to caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx index bc83a4627c6..071c4352c03 100644 --- a/caravel/assets/javascripts/SqlLab/components/QueryLog.jsx +++ b/caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx @@ -7,30 +7,29 @@ import * as Actions from '../actions'; import QueryTable from './QueryTable'; import { Alert } from 'react-bootstrap'; -class QueryLog extends React.Component { - render() { - const activeQeId = this.props.tabHistory[this.props.tabHistory.length - 1]; - const queries = this.props.queries.filter((q) => (q.sqlEditorId === activeQeId)); - if (queries.length > 0) { - return ( - - ); - } +const QueryHistory = (props) => { + const activeQeId = props.tabHistory[props.tabHistory.length - 1]; + const queries = props.queries.filter((q) => (q.sqlEditorId === activeQeId)); + if (queries.length > 0) { return ( - - No query history yet... - + ); } -} -QueryLog.defaultProps = { + return ( + + No query history yet... + + ); +}; + +QueryHistory.defaultProps = { queries: [], }; -QueryLog.propTypes = { +QueryHistory.propTypes = { queries: React.PropTypes.array, tabHistory: React.PropTypes.array, actions: React.PropTypes.object, @@ -48,4 +47,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect(mapStateToProps, mapDispatchToProps)(QueryLog); +export default connect(mapStateToProps, mapDispatchToProps)(QueryHistory); diff --git a/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx b/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx index 7b06220e22e..6aa8edd4cc8 100644 --- a/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx +++ b/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx @@ -1,12 +1,9 @@ import React from 'react'; -import { Alert, Modal } from 'react-bootstrap'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import * as Actions from '../actions'; -import Select from 'react-select'; - import moment from 'moment'; import { Table } from 'reactable'; @@ -14,6 +11,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import { github } from 'react-syntax-highlighter/dist/styles'; import Link from './Link'; +import VisualizeModal from './VisualizeModal'; // TODO move to CSS const STATE_COLOR_MAP = { @@ -35,9 +33,7 @@ class QueryTable extends React.Component { } showVisualizeModal(query) { this.setState({ showVisualizeModal: true }); - this.state.activeQuery = query; - } - changeChartType(event) { + this.setState({ activeQuery: query }); } render() { const data = this.props.queries.map((query) => { @@ -87,58 +83,13 @@ class QueryTable extends React.Component { return q; }).reverse(); - let visualizeModalBody; - if (this.state.activeQuery) { - const cols = this.state.activeQuery.results.columns; - visualizeModalBody = ( -
- , - is_date: , - agg_func: ( - +
@@ -27,14 +55,24 @@ class ResultSet extends React.Component { } if (results.data.length > 0) { return ( -
- {controls} - + + {controls} +
+
+ ); } @@ -45,10 +83,12 @@ ResultSet.propTypes = { query: React.PropTypes.object, showControls: React.PropTypes.boolean, search: React.PropTypes.boolean, + searchText: React.PropTypes.string, }; ResultSet.defaultProps = { showControls: true, search: true, + searchText: '', }; export default ResultSet; diff --git a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx index d193ab9c76b..5631872305f 100644 --- a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx +++ b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx @@ -1,38 +1,36 @@ import { Tab, Tabs } from 'react-bootstrap'; -import QueryLog from './QueryLog'; +import QueryHistory from './QueryHistory'; import ResultSet from './ResultSet'; import React from 'react'; -class SouthPane extends React.Component { - render() { - let results; - if (this.props.latestQuery) { - if (this.props.latestQuery.state === 'running') { - results = ( - Loading.. - ); - } else if (this.props.latestQuery.state === 'failed') { - results =
{this.props.latestQuery.msg}
; - } else if (this.props.latestQuery.state === 'success') { - results = ; - } - } else { - results =
Run a query to display results here
; +const SouthPane = (props) => { + let results; + if (props.latestQuery) { + if (props.latestQuery.state === 'running') { + results = ( + Loading.. + ); + } else if (props.latestQuery.state === 'failed') { + results =
{props.latestQuery.msg}
; + } else if (props.latestQuery.state === 'success') { + results = ; } - return ( - - -
- {results} -
- - - - - - ); + } else { + results =
Run a query to display results here
; } -} + return ( + + +
+ {results} +
+ + + + + + ); +}; SouthPane.propTypes = { latestQuery: React.PropTypes.object, diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx index ba097a00d95..3746e11f5a0 100644 --- a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx +++ b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx @@ -1,6 +1,14 @@ const $ = window.$ = require('jquery'); import React from 'react'; -import { Button, ButtonGroup, DropdownButton, Label, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { + Button, + ButtonGroup, + DropdownButton, + Label, + MenuItem, + OverlayTrigger, + Tooltip, +} from 'react-bootstrap'; import AceEditor from 'react-ace'; import 'brace/mode/sql'; @@ -29,6 +37,9 @@ class SqlEditor extends React.Component { }; } componentDidMount() { + this.onMount(); + } + onMount() { if (this.state.autorun) { this.setState({ autorun: false }); this.props.actions.queryEditorSetAutorun(this.props.queryEditor, false); @@ -94,12 +105,9 @@ class SqlEditor extends React.Component { this.props.actions.stopQuery(this.props.latestQuery); } textChange(text) { - this.setState({ sql: text }) + this.setState({ sql: text }); this.props.actions.queryEditorSetSql(this.props.queryEditor, text); } - notImplemented() { - alert('Not implemented'); - } addWorkspaceQuery() { this.props.actions.addWorkspaceQuery({ id: shortid.generate(), @@ -152,12 +160,12 @@ class SqlEditor extends React.Component { ); let limitWarning = null; - const row_limit = 1000; - if (this.props.latestQuery && this.props.latestQuery.rows === row_limit) { + const rowLimit = 1000; + if (this.props.latestQuery && this.props.latestQuery.rows === rowLimit) { const tooltip = ( It appears that the number of rows in the query results displayed - was limited on the server side to the {row_limit} limit. + was limited on the server side to the {rowLimit} limit. ); limitWarning = ( @@ -219,9 +227,8 @@ SqlEditor.propTypes = { SqlEditor.defaultProps = { }; -function mapStateToProps(state) { - return { - }; +function mapStateToProps() { + return {}; } function mapDispatchToProps(dispatch) { diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx index 0190241d338..87948d42a94 100644 --- a/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx +++ b/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx @@ -123,9 +123,6 @@ class SqlEditorTopToolbar extends React.Component { that.setState({ databaseLoading: false }); }); } - notImplemented() { - alert('Not implemented'); - } closePopover(ref) { this.refs[ref].hide(); } diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx index 76186d11e5d..c7d6b2478bc 100644 --- a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx +++ b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx @@ -35,10 +35,9 @@ class QueryEditors extends React.Component { } } render() { - const that = this; const editors = this.props.queryEditors.map((qe, i) => { let latestQuery; - that.props.queries.forEach((q) => { + this.props.queries.forEach((q) => { if (q.id === qe.latestQueryId) { latestQuery = q; } @@ -53,10 +52,10 @@ class QueryEditors extends React.Component { className="no-shadow" id="bg-vertical-dropdown-1" > - + close tab - + rename tab @@ -90,8 +89,9 @@ class QueryEditors extends React.Component { } QueryEditors.propTypes = { actions: React.PropTypes.object, - tabHistory: React.PropTypes.array, + queries: React.PropTypes.array, queryEditors: React.PropTypes.array, + tabHistory: React.PropTypes.array, workspaceDatabase: React.PropTypes.object, }; QueryEditors.defaultProps = { diff --git a/caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx b/caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx index e552c8b54cd..d43229ad8cc 100644 --- a/caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx +++ b/caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx @@ -12,10 +12,9 @@ import 'react-select/dist/react-select.css'; class TableWorkspaceElement extends React.Component { selectStar() { let cols = ''; - const that = this; - this.props.table.columns.forEach(function (col, i) { + this.props.table.columns.forEach((col, i) => { cols += col.name; - if (i < that.props.table.columns.length - 1) { + if (i < this.props.table.columns.length - 1) { cols += ', '; } }); diff --git a/caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx b/caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx new file mode 100644 index 00000000000..c0ecc902d1a --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx @@ -0,0 +1,93 @@ +import React from 'react'; +import { Alert, Modal } from 'react-bootstrap'; + +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import * as Actions from '../actions'; + +import Select from 'react-select'; +import { Table } from 'reactable'; + +class VisualizeModal extends React.Component { + constructor(props) { + super(props); + this.state = { + chartType: null, + }; + } + changeChartType(event) { + this.setState({ chartType: event.target.value }); + } + render() { + if (!(this.props.query)) { + return
; + } + const cols = this.props.query.results.columns; + const modal = ( +
+ + + Visualize (mock) + + + Not functional - Work in progress! +
+
({ + column: col, + is_dimension: , + is_date: , + agg_func: ( +