allow user to trigger query to avoid overhead

src/client/visualizations/data-provider/data-provider.tsx

@@ -29,7 +29,7 @@ import { Essence } from "../../../common/models/essence/essence";
 import { Stage } from "../../../common/models/stage/stage";
 import { Timekeeper } from "../../../common/models/timekeeper/timekeeper";
 import { debounceWithPromise, Unary } from "../../../common/utils/functional/functional";
-import { Loader } from "../../components/loader/loader";
+import { Button } from "../../components/button/button";
 import { QueryError } from "../../components/query-error/query-error";
 import { reportError } from "../../utils/error-reporter/error-reporter";
 import { VisualizationQuery } from "../../views/cube-view/api-context";
@@ -46,21 +46,17 @@ interface DataProviderProps {
 
 interface DataProviderState {
  dataset: DatasetRequest;
+ requesting: boolean;
 }
 
 export class DataProvider extends React.Component<DataProviderProps, DataProviderState> {
  static contextType = DownloadableDatasetContext;
  context: DownloadableDataset;
 
- state: DataProviderState = { dataset: loading };
+ state: DataProviderState = { dataset: loading, requesting: false };
 
  private lastQueryEssence: Essence = null;
 
- componentDidMount() {
- const { essence } = this.props;
- this.loadData(essence);
- }
-
  componentWillUnmount() {
  this.lastQueryEssence = null;
  this.debouncedCallExecutor.cancel();
@@ -71,12 +67,14 @@ export class DataProvider extends React.Component<DataProviderProps, DataProvide
  const { essence } = nextProps;
  const hadDataLoaded = isLoaded(this.state.dataset);
  const essenceChanged = !essence.equals(this.props.essence);
- this.loadData(essence, hadDataLoaded && essenceChanged);
+ if (hadDataLoaded && essenceChanged) {
+ this.handleDatasetLoad(loading);
+ this.state.requesting = false;
+ }
  }
  }
 
- private loadData(essence: Essence, showSpinner = true) {
- if (showSpinner) this.handleDatasetLoad(loading);
+ private loadData(essence: Essence) {
  this.fetchData(essence)
  .then(loadedDataset => {
  // TODO: encode it better
@@ -99,10 +97,10 @@ export class DataProvider extends React.Component<DataProviderProps, DataProvide
  private callExecutor = (essence: Essence): Promise<DatasetRequest | null> =>
  this.props.query(essence)
  .then((dataset: Dataset) => {
-  // signal out of order requests with null
-  if (!this.wasUsedForLastQuery(essence)) return null;
-  return loaded(dataset);
-  },
+ // signal out of order requests with null
+ if (!this.wasUsedForLastQuery(essence)) return null;
+ return loaded(dataset);
+ },
  err => {
  // signal out of order requests with null
  if (!this.wasUsedForLastQuery(essence)) return null;
@@ -153,14 +151,28 @@ export class DataProvider extends React.Component<DataProviderProps, DataProvide
  return this.props.stage.equals(nextProps.stage);
  }
 
+ private sendRequest = () => {
+ this.state.requesting = true;
+ this.loadData(this.props.essence);
+ };
+
  render() {
  const { children } = this.props;
- const { dataset } = this.state;
+ const { dataset, requesting } = this.state;
  switch (dataset.status) {
  case DatasetRequestStatus.LOADING:
- return <Loader/>;
+ return (
+ <div style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '70vh',
+ }}>
+ <Button type="primary" title={requesting ? "Querying" : "Query"} disabled={requesting} onClick={this.sendRequest} />
+ </div>
+ );
  case DatasetRequestStatus.ERROR:
- return <QueryError error={dataset.error}/>;
+ return <QueryError error={dataset.error} />;
  case DatasetRequestStatus.LOADED:
  return children(dataset.dataset);
  }