Bug Fixes for #40 & #41 as well as an "Open Popup" button for ipython…

… iframes

static/__tests__/iframe/DataViewer-within-iframe-test.jsx

@@ -7,7 +7,7 @@ import { DataViewerMenu } from "../../dtale/DataViewerMenu";
 import mockPopsicle from "../MockPopsicle";
 import * as t from "../jest-assertions";
 import reduxUtils from "../redux-test-utils";
-import { buildInnerHTML, withGlobalJquery } from "../test-utils";
+import { buildInnerHTML, clickMainMenuButton, withGlobalJquery } from "../test-utils";
 
 const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetHeight");
 const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetWidth");
@@ -29,7 +29,7 @@ describe("DataViewer within iframe tests", () => {
     delete window.open;
     delete window.top;
     delete window.self;
-    window.location = { reload: jest.fn() };
+    window.location = { reload: jest.fn(), pathname: "/dtale/iframe/1" };
     window.open = jest.fn();
     window.top = { location: { href: "http://test.com" } };
     window.self = { location: { href: "http://test/dtale/iframe" } };
@@ -86,10 +86,12 @@ describe("DataViewer within iframe tests", () => {
           .map(s => s.text()),
         _.concat(
           ["Describe", "Filter", "Correlations", "Charts", "Resize", "Heat Map", "Instances 1", "About"],
-          ["Refresh", "Shutdown"]
+          ["Refresh", "Open Popup", "Shutdown"]
         ),
         "Should render default iframe menu options"
       );
+      clickMainMenuButton(result, "Open Popup");
+      expect(window.open.mock.calls[window.open.mock.calls.length - 1][0]).toBe("/dtale/iframe/1");
       done();
     }, 600);
   });

static/__tests__/popups/Correlations-test.jsx

@@ -54,6 +54,7 @@ describe("Correlations tests", () => {
       const chartCfg = { ctx, cfg, data: cfg.data, destroyed: false };
       chartCfg.destroy = () => (chartCfg.destroyed = true);
       chartCfg.getElementsAtXAxis = _evt => [{ _index: 0 }];
+      chartCfg.getElementAtEvent = _evt => [{ _datasetIndex: 0, _index: 0, _chart: { config: cfg, data: cfg.data } }];
       return chartCfg;
     });
 
@@ -169,7 +170,13 @@ describe("Correlations tests", () => {
   test("Correlations rendering data w/ no date columns", done => {
     const Correlations = require("../../popups/Correlations").ReactCorrelations;
     buildInnerHTML({ settings: "" });
-    const result = mount(<Correlations chartData={_.assign({}, chartData, { query: "no-date" })} dataId="1" />, {
+    const props = {
+      chartData: _.assign({}, chartData, { query: "no-date" }),
+      dataId: "1",
+      onClose: _.noop,
+      propagateState: _.noop,
+    };
+    const result = mount(<Correlations {...props} />, {
       attachTo: document.getElementById("content"),
     });
     result.update();
@@ -194,6 +201,12 @@ describe("Correlations tests", () => {
           scatterChart.data
         );
         t.deepEqual(label, ["col1: NaN", "col2: 1.5"], "should render label");
+        scatterChart.cfg.options.onClick({});
+        const corr = result.instance();
+
+        t.ok(corr.shouldComponentUpdate(_.assignIn({ foo: 1 }, corr.props)), "should update");
+        t.ok(!corr.shouldComponentUpdate(corr.props, _.assignIn({}, corr.state, { chart: null })), "shouldn't update");
+        t.ok(!corr.shouldComponentUpdate(corr.props, corr.state), "shouldn't update");
         done();
       }, 200);
     }, 200);

static/dtale/DataViewerMenu.jsx

@@ -9,7 +9,11 @@ import { lockCols, moveToFront, unlockCols, updateSort } from "./dataViewerMenuU
 import { SORT_PROPS, toggleHeatMap } from "./gridUtils";
 
 function open(path, dataId, height = 450, width = 500) {
-  window.open(`${path}/${dataId}`, "_blank", `titlebar=1,location=1,status=1,width=${width},height=${height}`);
+  let fullPath = path;
+  if (dataId) {
+    fullPath = `${fullPath}/${dataId}`;
+  }
+  window.open(fullPath, "_blank", `titlebar=1,location=1,status=1,width=${width},height=${height}`);
 }
 
 class ReactDataViewerMenu extends React.Component {
@@ -200,6 +204,16 @@ class ReactDataViewerMenu extends React.Component {
               </span>
             </li>
           </ConditionalRender>
+          <ConditionalRender display={global.top !== global.self}>
+            <li>
+              <span className="toggler-action">
+                <button className="btn btn-plain" onClick={() => open(window.location.pathname, null, 400, 700)}>
+                  <i className="ico-open-in-new" />
+                  <span className="font-weight-bold">Open Popup</span>
+                </button>
+              </span>
+            </li>
+          </ConditionalRender>
           <ConditionalRender display={hideShutdown == false}>
             <li>
               <span className="toggler-action">

static/popups/Correlations.jsx

@@ -29,6 +29,7 @@ function buildState() {
     selectedCols: [],
     tsUrl: null,
     selectedDate: null,
+    scatterUrl: null,
   };
 }
 
@@ -111,20 +112,25 @@ class ReactCorrelations extends React.Component {
   }
 
   buildScatter(selectedCols, date = null) {
-    corrUtils.toggleBouncer();
     const params = { selectedCols, query: this.props.chartData.query };
     if (date) {
       params.dateCol = this.state.selectedDate;
       params.date = date;
     }
     const path = `${BASE_SCATTER_URL}/${this.props.dataId}`;
-    fetchJson(buildURL(path, params, ["selectedCols", "query", "date", "dateCol"]), fetchedChartData => {
+    const scatterUrl = buildURL(path, params, ["selectedCols", "query", "date", "dateCol"]);
+    if (this.state.scatterUrl === scatterUrl) {
+      return;
+    }
+    corrUtils.toggleBouncer();
+    fetchJson(scatterUrl, fetchedChartData => {
       corrUtils.toggleBouncer();
       const newState = {
         selectedCols,
         stats: fetchedChartData.stats,
         date,
         scatterError: null,
+        scatterUrl,
       };
       if (fetchedChartData.error) {
         newState.scatterError = <RemovableError {...fetchedChartData} />;

static/popups/charts/ChartsBody.jsx

@@ -34,6 +34,9 @@ function createChartCfg(ctx, { data }, { columns, x, y, additionalOptions, chart
 }
 
 function createCharts(data, props) {
+  if (_.isEmpty(_.get(data, "data", {}))) {
+    return null;
+  }
   if (props.chartPerGroup) {
     return _.map(_.get(data, "data", {}), (series, seriesKey) => {
       const mainProps = _.pick(props, ["columns", "x", "y", "additionalOptions", "chartType", "configHandler"]);
@@ -44,12 +47,7 @@ function createCharts(data, props) {
       return chartUtils.chartWrapper(`chartCanvas-${seriesKey}`, null, builder);
     });
   }
-  const builder = ctx => {
-    if (_.isEmpty(_.get(data, "data", {}))) {
-      return null;
-    }
-    return createChartCfg(ctx, data, props);
-  };
+  const builder = ctx => createChartCfg(ctx, data, props);
   return [chartUtils.chartWrapper("chartCanvas", null, builder)];
 }