Infer types. Smart defaults for the visualize window. Basic implementation. (#1134)

* Implement smart suggestions for the visualize flow.

* Address JS comments.

* Implement caravel dataframe wrapper.
This commit is contained in:
Bogdan
2016-09-23 11:14:38 -07:00
committed by GitHub
parent fc921d63a1
commit df89bec712
5 changed files with 218 additions and 48 deletions

View File

@@ -72,7 +72,7 @@ class ResultSet extends React.Component {
<div className="ResultSet">
<Table
data={results.data}
columns={results.columns}
columns={results.columns.map((col) => col.name)}
sortable
className="table table-condensed table-bordered"
filterBy={this.state.searchText}

View File

@@ -26,10 +26,25 @@ class VisualizeModal extends React.Component {
columns: {},
hints: [],
};
// update columns if possible
this.setStateFromProps();
}
componentWillMount() {
this.setStateFromProps();
}
componentDidMount() {
this.validate();
}
setStateFromProps() {
if (!this.props.query || !this.props.query.results.columns) {
return;
}
const columns = {};
this.props.query.results.columns.forEach((col) => {
columns[col.name] = col;
});
this.setState({ columns });
}
validate() {
const hints = [];
const cols = this.mergedColumns();
@@ -67,8 +82,8 @@ class VisualizeModal extends React.Component {
const columns = Object.assign({}, this.state.columns);
if (this.props.query && this.props.query.results.columns) {
this.props.query.results.columns.forEach((col) => {
if (columns[col] === undefined) {
columns[col] = {};
if (columns[col.name] === undefined) {
columns[col.name] = col;
}
});
}
@@ -88,17 +103,17 @@ class VisualizeModal extends React.Component {
this.setState({ datasourceName: event.target.value });
this.validate();
}
changeCheckbox(attr, col, event) {
changeCheckbox(attr, columnName, event) {
let columns = this.mergedColumns();
const column = Object.assign({}, columns[col], { [attr]: event.target.checked });
columns = Object.assign({}, columns, { [col]: column });
const column = Object.assign({}, columns[columnName], { [attr]: event.target.checked });
columns = Object.assign({}, columns, { [columnName]: column });
this.setState({ columns }, this.validate);
}
changeAggFunction(col, option) {
changeAggFunction(columnName, option) {
let columns = this.mergedColumns();
const val = (option) ? option.value : null;
const column = Object.assign({}, columns[col], { agg: val });
columns = Object.assign({}, columns, { [col]: column });
const column = Object.assign({}, columns[columnName], { agg: val });
columns = Object.assign({}, columns, { [columnName]: column });
this.setState({ columns }, this.validate);
}
render() {
@@ -106,12 +121,12 @@ class VisualizeModal extends React.Component {
return <div />;
}
const tableData = this.props.query.results.columns.map((col) => ({
column: col,
column: col.name,
is_dimension: (
<input
type="checkbox"
onChange={this.changeCheckbox.bind(this, 'is_dim', col)}
checked={(this.state.columns[col]) ? this.state.columns[col].is_dim : false}
onChange={this.changeCheckbox.bind(this, 'is_dim', col.name)}
checked={(this.state.columns[col.name]) ? this.state.columns[col.name].is_dim : false}
className="form-control"
/>
),
@@ -119,8 +134,8 @@ class VisualizeModal extends React.Component {
<input
type="checkbox"
className="form-control"
onChange={this.changeCheckbox.bind(this, 'is_date', col)}
checked={(this.state.columns[col]) ? this.state.columns[col].is_date : false}
onChange={this.changeCheckbox.bind(this, 'is_date', col.name)}
checked={(this.state.columns[col.name]) ? this.state.columns[col.name].is_date : false}
/>
),
agg_func: (
@@ -132,8 +147,8 @@ class VisualizeModal extends React.Component {
{ value: 'avg', label: 'AVG(x)' },
{ value: 'count_distinct', label: 'COUNT(DISTINCT x)' },
]}
onChange={this.changeAggFunction.bind(this, col)}
value={(this.state.columns[col]) ? this.state.columns[col].agg : null}
onChange={this.changeAggFunction.bind(this, col.name)}
value={(this.state.columns[col.name]) ? this.state.columns[col.name].agg : null}
/>
),
}));