Simplifying the viz interface (#2005)

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -23,12 +23,8 @@ const propTypes = {
   viz_type: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
   containerId: PropTypes.string.isRequired,
-  json_endpoint: PropTypes.string.isRequired,
-  csv_endpoint: PropTypes.string.isRequired,
-  standalone_endpoint: PropTypes.string.isRequired,
   query: PropTypes.string,
   column_formats: PropTypes.object,
-  data: PropTypes.any,
   chartStatus: PropTypes.string,
   isStarred: PropTypes.bool.isRequired,
   chartUpdateStartTime: PropTypes.number.isRequired,
@@ -37,88 +33,59 @@ const propTypes = {
   table_name: PropTypes.string,
 };
 
-class ChartContainer extends React.Component {
+class ChartContainer extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       selector: `#${props.containerId}`,
-      mockSlice: {},
-      viz: {},
     };
   }
 
-  componentWillMount() {
-    const mockSlice = this.getMockedSliceObject(this.props);
-    this.setState({
-      mockSlice,
-      viz: visMap[this.props.viz_type](mockSlice),
-    });
-  }
-
-  componentDidMount() {
-    this.state.viz.render();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.chartStatus === 'loading') {
-      const mockSlice = this.getMockedSliceObject(nextProps);
-      this.setState({
-        mockSlice,
-        viz: visMap[nextProps.viz_type](mockSlice),
-      });
+  renderViz() {
+    const mockSlice = this.getMockedSliceObject();
+    try {
+      visMap[this.props.viz_type](mockSlice, this.props.queryResponse);
+      this.setState({ mockSlice });
+    } catch (e) {
+      this.props.actions.chartRenderingFailed(e);
     }
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.chartStatus === 'loading') {
-      this.state.viz.render();
-    }
-    if (prevProps.height !== this.props.height) {
-      this.state.viz.resize();
+    if (
+        prevProps.queryResponse !== this.props.queryResponse ||
+        prevProps.height !== this.props.height
+      ) {
+      this.renderViz();
     }
   }
 
-  getMockedSliceObject(props) {
+  getMockedSliceObject() {
+    const props = this.props;
     return {
       viewSqlQuery: props.query,
-
-      data: {
-        csv_endpoint: props.csv_endpoint,
-        json_endpoint: props.json_endpoint,
-        standalone_endpoint: props.standalone_endpoint,
-      },
-
       containerId: props.containerId,
-
-      jsonEndpoint: () => props.json_endpoint,
-
+      selector: this.state.selector,
       container: {
         html: (data) => {
           // this should be a callback to clear the contents of the slice container
           $(this.state.selector).html(data);
         },
-
         css: (dim, size) => {
           // dimension can be 'height'
           // pixel string can be '300px'
           // should call callback to adjust height of chart
           $(this.state.selector).css(dim, size);
         },
-        height: () => parseInt(this.props.height, 10) - 100,
-
-        show: () => { this.render(); },
-
+        height: () => parseInt(props.height, 10) - 100,
+        show: () => { },
         get: (n) => ($(this.state.selector).get(n)),
-
         find: (classname) => ($(this.state.selector).find(classname)),
-
       },
 
       width: () => this.chartContainerRef.getBoundingClientRect().width,
 
-      height: () => parseInt(this.props.height, 10) - 100,
-
-      selector: this.state.selector,
+      height: () => parseInt(props.height, 10) - 100,
 
       setFilter: () => {
         // set filter according to data in store
@@ -130,32 +97,25 @@ class ChartContainer extends React.Component {
         {}
       ),
 
-      done: (payload) => {
-        // finished rendering callback
-        // Todo: end timer and chartLoading set to success
-        props.actions.chartUpdateSucceeded(payload.query);
-      },
-
+      done: () => {},
       clearError: () => {
         // no need to do anything here since Alert is closable
         // query button will also remove Alert
       },
-
-      error(msg) {
-        let payload = { error: msg };
-        try {
-          payload = JSON.parse(msg);
-        } catch (e) {
-          // pass
-        }
-        props.actions.chartUpdateFailed(payload.error, payload.query);
-      },
+      error() {},
 
       d3format: (col, number) => {
         // mock d3format function in Slice object in superset.js
         const format = props.column_formats[col];
         return d3format(format, number);
       },
+
+      data: {
+        csv_endpoint: props.queryResponse.csv_endpoint,
+        json_endpoint: props.queryResponse.json_endpoint,
+        standalone_endpoint: props.queryResponse.standalone_endpoint,
+      },
+
     };
   }
 
@@ -199,7 +159,7 @@ class ChartContainer extends React.Component {
         }
         <div
           id={this.props.containerId}
-          ref={(ref) => { this.chartContainerRef = ref; }}
+          ref={ref => { this.chartContainerRef = ref; }}
           className={this.props.viz_type}
           style={{
             opacity: loading ? '0.25' : '1',
@@ -251,11 +211,13 @@ class ChartContainer extends React.Component {
                   state={CHART_STATUS_MAP[this.props.chartStatus]}
                   style={{ fontSize: '10px', marginRight: '5px' }}
                 />
-                <ExploreActionButtons
-                  slice={this.state.mockSlice}
-                  canDownload={this.props.can_download}
-                  query={this.props.query}
-                />
+                {this.state.mockSlice &&
+                  <ExploreActionButtons
+                    slice={this.state.mockSlice}
+                    canDownload={this.props.can_download}
+                    query={this.props.queryResponse.query}
+                  />
+                }
               </div>
             </div>
           }
@@ -276,18 +238,15 @@ function mapStateToProps(state) {
     slice_name: state.viz.form_data.slice_name,
     viz_type: state.viz.form_data.viz_type,
     can_download: state.can_download,
-    csv_endpoint: state.viz.csv_endpoint,
-    json_endpoint: state.viz.json_endpoint,
-    standalone_endpoint: state.viz.standalone_endpoint,
     chartUpdateStartTime: state.chartUpdateStartTime,
     chartUpdateEndTime: state.chartUpdateEndTime,
     query: state.viz.query,
     column_formats: state.viz.column_formats,
-    data: state.viz.data,
     chartStatus: state.chartStatus,
     isStarred: state.isStarred,
     alert: state.chartAlert,
     table_name: state.viz.form_data.datasource_name,
+    queryResponse: state.queryResponse,
   };
 }