From 2c6e33b9becc1e82b013f6a95c7de2b6d8b5b0b9 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Wed, 31 Jan 2018 09:34:08 -0800
Subject: [PATCH 1/2] [Explore] Fix Stop Query Button behavior (#4301)

---
 superset/assets/javascripts/chart/chartAction.js         | 9 ++++-----
 .../explore/components/ExploreViewContainer.jsx          | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/superset/assets/javascripts/chart/chartAction.js b/superset/assets/javascripts/chart/chartAction.js
index 3682949bbb387..089a1dd1f7f7b 100644
--- a/superset/assets/javascripts/chart/chartAction.js
+++ b/superset/assets/javascripts/chart/chartAction.js
@@ -15,10 +15,7 @@ export function chartUpdateSucceeded(queryResponse, key) {
 }
 
 export const CHART_UPDATE_STOPPED = 'CHART_UPDATE_STOPPED';
-export function chartUpdateStopped(queryRequest, key) {
-  if (queryRequest) {
-    queryRequest.abort();
-  }
+export function chartUpdateStopped(key) {
   return { type: CHART_UPDATE_STOPPED, key };
 }
 
@@ -146,7 +143,9 @@ export function runQuery(formData, force = false, timeout = 60, key) {
         });
         if (err.statusText === 'timeout') {
           dispatch(chartUpdateTimeout(err.statusText, timeout, key));
-        } else if (err.statusText !== 'abort') {
+        } else if (err.statusText === 'abort') {
+          dispatch(chartUpdateStopped(key));
+        } else {
           let errObject;
           if (err.responseJSON) {
             errObject = err.responseJSON;
diff --git a/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
index bf9afd4be34b3..9b1ec1629bbf3 100644
--- a/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
+++ b/superset/assets/javascripts/explore/components/ExploreViewContainer.jsx
@@ -97,7 +97,7 @@ class ExploreViewContainer extends React.Component {
   }
 
   onStop() {
-    this.props.actions.chartUpdateStopped(this.props.chart.queryRequest);
+    return this.props.chart.queryRequest.abort();
   }
 
   getWidth() {

From 47c204227462b06bff745a234743025bdbe80523 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Wed, 31 Jan 2018 18:02:16 -0800
Subject: [PATCH 2/2] [Bug] Resize should trigger chart re-render (#4322)

---
 superset/assets/javascripts/chart/Chart.jsx   |  4 +-
 .../spec/javascripts/chart/Chart_spec.jsx     | 71 +++++++++++++++++++
 2 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 superset/assets/spec/javascripts/chart/Chart_spec.jsx

diff --git a/superset/assets/javascripts/chart/Chart.jsx b/superset/assets/javascripts/chart/Chart.jsx
index c9a4530f95aac..2824b255540e0 100644
--- a/superset/assets/javascripts/chart/Chart.jsx
+++ b/superset/assets/javascripts/chart/Chart.jsx
@@ -84,7 +84,7 @@ class Chart extends React.PureComponent {
   componentDidUpdate(prevProps) {
     if (
         this.props.queryResponse &&
-        this.props.chartStatus === 'success' &&
+        ['success', 'rendered'].indexOf(this.props.chartStatus) > -1 &&
         !this.props.queryResponse.error && (
         prevProps.annotationData !== this.props.annotationData ||
         prevProps.queryResponse !== this.props.queryResponse ||
@@ -183,7 +183,7 @@ class Chart extends React.PureComponent {
         {!this.props.chartAlert &&
           <ChartBody
             containerId={this.containerId}
-            vizType={this.props.formData.viz_type}
+            vizType={this.props.vizType}
             height={this.height}
             width={this.width}
             ref={(inner) => {
diff --git a/superset/assets/spec/javascripts/chart/Chart_spec.jsx b/superset/assets/spec/javascripts/chart/Chart_spec.jsx
new file mode 100644
index 0000000000000..f4754f477ca7d
--- /dev/null
+++ b/superset/assets/spec/javascripts/chart/Chart_spec.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import { chart as initChart } from '../../../javascripts/chart/chartReducer';
+import Chart from '../../../javascripts/chart/Chart';
+
+describe('Chart', () => {
+  const chart = {
+    ...initChart,
+    queryResponse: {
+      form_data: {},
+      error: null,
+      status: 'success',
+    },
+  };
+  const mockedProps = {
+    ...chart,
+    chartKey: 'slice_223',
+    containerId: 'slice-container-223',
+    datasource: {},
+    formData: {},
+    vizType: 'pie',
+    height: 300,
+    width: 400,
+    actions: {
+      runQuery: () => {},
+    },
+  };
+
+  describe('renderViz', () => {
+    let wrapper;
+    let stub;
+    beforeEach(() => {
+      wrapper = shallow(
+        <Chart {...mockedProps} />,
+      );
+      stub = sinon.stub(wrapper.instance(), 'renderViz');
+    });
+
+    it('should not call when loading', () => {
+      const prevProp = wrapper.props();
+      wrapper.setProps({
+        height: 100,
+      });
+      wrapper.instance().componentDidUpdate(prevProp);
+      expect(stub.callCount).to.equals(0);
+    });
+
+    it('should call after chart stop loading', () => {
+      const prevProp = wrapper.props();
+      wrapper.setProps({
+        chartStatus: 'success',
+      });
+      wrapper.instance().componentDidUpdate(prevProp);
+      expect(stub.callCount).to.equals(1);
+    });
+
+    it('should call after resize', () => {
+      const prevProp = wrapper.props();
+      wrapper.setProps({
+        chartStatus: 'rendered',
+        height: 100,
+      });
+      wrapper.instance().componentDidUpdate(prevProp);
+      expect(stub.callCount).to.equals(1);
+    });
+  });
+});