Skip to content
Snippets Groups Projects
Commit 20cbf193 authored by Allen Gilliland's avatar Allen Gilliland
Browse files

ripping out our paging controls now that the FixedDataTable can safely handle... 

ripping out our paging controls now that the FixedDataTable can safely handle displaying our 2000 row max.
parent 2f64d592
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/query_builder/visualization.react.js
+ 16
− 52
View file @ 20cbf193
......@@ -38,8 +38,7 @@ export default React.createClass({
getInitialState: function() {
return {
origQuery: JSON.stringify(this.props.card.dataset_query),
tablePage: 1
origQuery: JSON.stringify(this.props.card.dataset_query)
};
},
......@@ -47,8 +46,7 @@ export default React.createClass({
// whenever we are told that we are running a query lets update our understanding of the "current" query
if (nextProps.isRunning) {
this.setState({
origQuery: JSON.stringify(nextProps.card.dataset_query),
tablePage: 1
origQuery: JSON.stringify(nextProps.card.dataset_query)
});
}
},
......@@ -121,12 +119,6 @@ export default React.createClass({
this.props.setChartColorFn(color);
},
setPage: function(page) {
this.setState({
tablePage: page
});
},
renderChartColorPicker: function() {
if (this.props.card.display === "line" || this.props.card.display === "area" || this.props.card.display === "bar") {
var colors = this.props.visualizationSettingsApi.getDefaultColorHarmony();
......@@ -218,7 +210,7 @@ export default React.createClass({
render: function() {
var viz,
queryModified,
pagingControls;
tableFootnote;
if (!this.props.result) {
viz = (
......@@ -276,46 +268,9 @@ export default React.createClass({
);
} else if (this.props.card.display === "table") {
// TODO: check if we have a truncated result set and let the user know if that's the case
if(this.props.result.data.rows.length > this.props.tableRowsPerPage) {
// we need to show some paging controls
var hasPrev = (this.state.tablePage > 1),
hasNext = ((this.props.result.data.rows.length - (this.state.tablePage * this.props.tableRowsPerPage)) > 0),
offset = ((this.state.tablePage - 1) * this.props.tableRowsPerPage) + 1,
limit = (this.state.tablePage * this.props.tableRowsPerPage);
if (limit > this.props.result.data.rows.length) {
limit = this.props.result.data.rows.length;
}
var pagingButtons;
if (!hasPrev && !hasNext) {
// no actual paging required
pagingButtons = (<span><span>prev</span> <span>next</span></span>);
} else if (!hasPrev && hasNext) {
// only NEXT button is active
pagingButtons = (<span><span>prev</span> <a onClick={this.setPage.bind(null, this.state.tablePage+1)}>next</a></span>);
} else if (hasPrev && !hasNext) {
// only PREV button is active
pagingButtons = (<span><a onClick={this.setPage.bind(null, this.state.tablePage-1)}>prev</a> <span>next</span></span>);
} else {
// both PREV and NEXT are active
pagingButtons = (<span><a onClick={this.setPage.bind(null, this.state.tablePage-1)}>prev</a> <a onClick={this.setPage.bind(null, this.state.tablePage+1)}>next</a></span>);
}
pagingControls = (
<div className="mt1">
<b>{offset}</b> - <b>{limit}</b> of <b>{this.props.result.data.rows.length}</b> {pagingButtons}
</div>
);
}
viz = (
<QueryVisualizationTable
data={this.props.result.data}
maxRows={this.props.tableRowsPerPage}
page={this.state.tablePage}
setSortFn={this.props.setSortFn}
sort={this.props.card.dataset_query.query.order_by}
/>
......@@ -332,11 +287,20 @@ export default React.createClass({
}
// check if the query result was truncated and let the user know about it if so
if (this.props.result.data.rows_truncated && !pagingControls) {
pagingControls = (
if (this.props.result.data.rows_truncated ||
(this.props.card.dataset_query.type === "query" &&
this.props.card.dataset_query.query.aggregation[0] === "rows" &&
this.props.result.data.rows.length === 2000)) {
tableFootnote = (
<div className="mt1">
<span className="Badge Badge--headsUp mr2">Too many rows!</span>
Result data was capped at <b>{this.props.result.data.rows_truncated}</b> rows.
Result data was capped at <b>{this.props.result.row_count}</b> rows.
</div>
);
} else {
tableFootnote = (
<div className="mt1">
Showing <b>{this.props.result.row_count}</b> rows.
</div>
);
}
......@@ -374,7 +338,7 @@ export default React.createClass({
<div className="VisualizationSettings QueryBuilder-section flex align-center">
{this.renderVizControls()}
<div className="flex flex-align-right">
{pagingControls}
{tableFootnote}
</div>
</div>
</div>
......
resources/frontend_client/app/query_builder/visualization_table.react.js
+ 4
− 18
View file @ 20cbf193
......@@ -79,7 +79,6 @@ export default React.createClass({
var height = element.parentElement.offsetHeight;
if (width !== prevState.width || height !== prevState.height) {
console.log('updating dims');
var updatedState = {
width: width,
height: height
......@@ -112,7 +111,7 @@ export default React.createClass({
cellDataGetter: function(cellKey, row) {
// TODO: should we be casting all values toString()?
return(row[cellKey] !== null) ? row[cellKey].toString() : null;
return (row[cellKey] !== null) ? row[cellKey].toString() : null;
},
columnResized: function(width, idx) {
......@@ -128,8 +127,6 @@ export default React.createClass({
var column = this.props.data.cols[columnIndex],
colVal = (column !== null) ? column.name.toString() : null;
var headerClasses = cx({
'MB-DataTable-header' : true,
'flex': true,
......@@ -145,6 +142,8 @@ export default React.createClass({
}
if (this.isSortable()) {
// TODO: handle case where we are sorting by an aggregate column
return (
<div key={columnIndex} className={headerClasses} onClick={this.setSort.bind(null, column.id)}>
{colVal}
......@@ -163,19 +162,6 @@ export default React.createClass({
return false;
}
// remember that page numbers begin with 1 but our data indexes begin with 0, so account for that
// limit = end index in our data that we intend to show
var limit = (this.props.page * this.props.maxRows) - 1;
if (limit > this.props.data.rows.length) {
limit = this.props.data.rows.length - 1;
}
// offset = start index in our data that we intend to show
// rowCount = # of rows we intend to show
// calcColumnWidth = the calculated pixels available for a column if all available columns are rendered
var offset = ((this.props.page - 1) * this.props.maxRows),
rowCount = (limit - offset) + 1;
var component = this;
var tableColumns = this.props.data.cols.map(function (column, idx) {
var colVal = (column !== null) ? column.name.toString() : null;
......@@ -203,7 +189,7 @@ export default React.createClass({
className="MB-DataTable"
rowHeight={35}
rowGetter={this.rowGetter}
rowsCount={rowCount}
rowsCount={this.props.data.rows.length}
width={this.state.width}
height={this.state.height}
headerHeight={50}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment