Fixing explore actions & slice controller interactions (#1292)

* Fixing explore actions & slice controller interactions * Addressing a comment
2016-10-07 14:06:26 -07:00 · 2016-10-07 14:06:26 -07:00 · 3384e7598e
parent 382b8e85da
commit 3384e7598e
9 changed files with 150 additions and 120 deletions
--- a/caravel/assets/javascripts/dashboard/Dashboard.jsx
+++ b/caravel/assets/javascripts/dashboard/Dashboard.jsx
@ -3,7 +3,7 @@ const jQuery = window.jQuery = require('jquery'); // eslint-disable-line
 const px = require('../modules/caravel.js');
 const d3 = require('d3');
 const urlLib = require('url');
-const showModal = require('../modules/utils.js').showModal;
+const utils = require('../modules/utils.js');

 import React from 'react';
 import { render } from 'react-dom';
@ -41,7 +41,8 @@ function injectCss(className, css) {
 }

 function dashboardContainer(dashboardData) {
-  let dashboard = $.extend(dashboardData, {
+  let dashboard = Object.assign({}, utils.controllerInterface, dashboardData, {
+    type: 'dashboard',
    filters: {},
    init() {
      this.initDashboardView();
@ -82,6 +83,23 @@ function dashboardContainer(dashboardData) {
    setFilter(sliceId, col, vals, refresh) {
      this.addFilter(sliceId, col, vals, false, refresh);
    },
+    done(slice) {
+      const refresh = slice.getWidgetHeader().find('.refresh');
+      const data = slice.data;
+      if (data !== undefined && data.is_cached) {
+        refresh
+        .addClass('danger')
+        .attr('title',
+              'Served from data cached at ' + data.cached_dttm +
+                '. Click to force refresh')
+                .tooltip('fixTitle');
+      } else {
+        refresh
+        .removeClass('danger')
+        .attr('title', 'Click to force refresh')
+        .tooltip('fixTitle');
+      }
+    },
    effectiveExtraFilters(sliceId) {
      // Summarized filter, not defined by sliceId
      // returns k=field, v=array of values
@ -250,7 +268,7 @@ function dashboardContainer(dashboardData) {
        },
        error(error) {
          const errorMsg = getAjaxErrorMsg(error);
-          showModal({
+          utils.showModal({
            title: 'Error',
            body: 'Sorry, there was an error adding slices to this dashboard: </ br>' + errorMsg,
          });
@ -279,14 +297,14 @@ function dashboardContainer(dashboardData) {
          data: JSON.stringify(data),
        },
        success() {
-          showModal({
+          utils.showModal({
            title: 'Success',
            body: 'This dashboard was saved successfully.',
          });
        },
        error(error) {
          const errorMsg = this.getAjaxErrorMsg(error);
-          showModal({
+          utils.showModal({
            title: 'Error',
            body: 'Sorry, there was an error saving this dashboard: </ br>' + errorMsg,
          });
@ -344,7 +362,7 @@ function dashboardContainer(dashboardData) {
        injectCss('dashboard-template', css);
      });
      $('#filters').click(() => {
-        showModal({
+        utils.showModal({
          title: '<span class="fa fa-info-circle"></span> Current Global Filters',
          body: 'The following global filters are currently applied:<br/>' +
                dashboard.readFilters(),
--- a/caravel/assets/javascripts/explore/components/EmbedCodeButton.jsx
+++ b/caravel/assets/javascripts/explore/components/EmbedCodeButton.jsx
@ -12,7 +12,6 @@ export default class EmbedCodeButton extends React.Component {
    this.state = {
      height: '400',
      width: '600',
-      srcLink: window.location.origin + props.slice.data.standalone_endpoint,
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }
@ -26,11 +25,15 @@ export default class EmbedCodeButton extends React.Component {
  }

  generateEmbedHTML() {
-    const { width, height, srcLink } = this.state;
+    const srcLink = window.location.origin + this.props.slice.data.standalone_endpoint;
    /* eslint max-len: 0 */
-    const embedHTML =
-      `<iframe src="${srcLink}" width="${width}" height="${height}" seamless frameBorder="0" scrolling="no"></iframe>`;
-    return embedHTML;
+    return `
+      <iframe
+        src="${srcLink}"
+        width="${this.state.width}"
+        height="${this.state.height}"
+        seamless frameBorder="0" scrolling="no">
+      </iframe>`;
  }

  renderPopover() {
--- a/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx
+++ b/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx
@ -13,7 +13,6 @@ export default function ExploreActionButtons({ canDownload, slice }) {
  const exportToCSVClasses = cx('btn btn-default btn-sm', {
    'disabled disabledButton': !canDownload,
  });
-
  return (
    <div className="btn-group results" role="group">
      <URLShortLinkButton slice={slice} />
--- a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx
+++ b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx
@ -13,8 +13,6 @@ export default class URLShortLinkButton extends React.Component {
    this.state = {
      shortUrl: '',
    };
-
-    this.getShortUrl();
  }

  getShortUrl() {
@ -22,7 +20,7 @@ export default class URLShortLinkButton extends React.Component {
      type: 'POST',
      url: '/r/shortner/',
      data: {
-        data: '/' + window.location.pathname + this.props.slice.querystring(),
+        data: '/' + window.location.pathname + window.location.search,
      },
      success: (data) => {
        this.setState({
@ -51,16 +49,15 @@ export default class URLShortLinkButton extends React.Component {
  }

  render() {
-    const shortUrl = this.state.shortUrl;
-    const isDisabled = shortUrl === '';
    return (
      <OverlayTrigger
        trigger="click"
        rootClose
        placement="left"
+        onEnter={this.getShortUrl.bind(this)}
        overlay={this.renderPopover()}
      >
-        <span className="btn btn-default btn-sm" disabled={isDisabled}>
+        <span className="btn btn-default btn-sm">
          <i className="fa fa-link"></i>&nbsp;
        </span>
      </OverlayTrigger>
--- a/caravel/assets/javascripts/explore/explore.jsx
+++ b/caravel/assets/javascripts/explore/explore.jsx
@ -5,7 +5,7 @@
 // js
 const $ = window.$ = require('jquery');
 const px = require('./../modules/caravel.js');
-const showModal = require('./../modules/utils.js').showModal;
+const utils = require('./../modules/utils.js');
 const jQuery = window.jQuery = require('jquery'); // eslint-disable-line

 import React from 'react';
@ -81,7 +81,7 @@ function saveSlice() {
  if (action === 'saveas') {
    const sliceName = $('input[name=new_slice_name]').val();
    if (sliceName === '') {
-      showModal({
+      utils.showModal({
        title: 'Error',
        body: 'You must pick a name for the new slice',
      });
@ -91,13 +91,13 @@ function saveSlice() {
  }
  const addToDash = $('input[name=addToDash]:checked').val();
  if (addToDash === 'existing' && $('#save_to_dashboard_id').val() === '') {
-    showModal({
+    utils.showModal({
      title: 'Error',
      body: 'You must pick an existing dashboard',
    });
    return;
  } else if (addToDash === 'new' && $('input[name=new_dashboard_name]').val() === '') {
-    showModal({
+    utils.showModal({
      title: 'Error',
      body: 'Please enter a name for the new dashboard',
    });
@ -336,16 +336,7 @@ function initExploreView() {
  prepSaveDialog();
 }

-function initComponents() {
-  const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
-  ReactDOM.render(
-    <QueryAndSaveBtns
-      canAdd={queryAndSaveBtnsEl.getAttribute('data-can-add')}
-      onQuery={() => query(true)}
-    />,
-    queryAndSaveBtnsEl
-  );
-
+function renderExploreActions() {
  const exploreActionsEl = document.getElementById('js-explore-actions');
  ReactDOM.render(
    <ExploreActionButtons
@ -356,14 +347,49 @@ function initComponents() {
  );
 }

+function initComponents() {
+  const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
+  ReactDOM.render(
+    <QueryAndSaveBtns
+      canAdd={queryAndSaveBtnsEl.getAttribute('data-can-add')}
+      onQuery={() => query(true)}
+    />,
+    queryAndSaveBtnsEl
+  );
+  renderExploreActions();
+}
+
+let exploreController = {
+  type: 'slice',
+  done: (sliceObj) => {
+    slice = sliceObj;
+    renderExploreActions();
+    const cachedSelector = $('#is_cached');
+    if (slice.data !== undefined && slice.data.is_cached) {
+      cachedSelector
+      .attr(
+        'title',
+        `Served from data cached at ${slice.data.cached_dttm}. Click [Query] to force refresh`)
+      .show()
+      .tooltip('fixTitle');
+    } else {
+      cachedSelector.hide();
+    }
+  },
+  error: (sliceObj) => {
+    slice = sliceObj;
+    renderExploreActions();
+  },
+};
+exploreController = Object.assign({}, utils.controllerInterface, exploreController);
+
+
 $(document).ready(function () {
  const data = $('.slice').data('slice');

  initExploreView();

-  slice = px.Slice(data);
-
-  $('.slice').data('slice', slice);
+  slice = px.Slice(data, exploreController);

  // call vis render method, which issues ajax
  // calls render on the slice for the first time
--- a/caravel/assets/javascripts/modules/caravel.js
+++ b/caravel/assets/javascripts/modules/caravel.js
@ -25,40 +25,41 @@ const px = function () {
      }
    }
    $('.favstar')
-      .attr('title', 'Click to favorite/unfavorite')
-      .css('cursor', 'pointer')
-      .each(show)
-      .each(function () {
-        let url = baseUrl + $(this).attr('class_name');
-        const star = this;
-        url += '/' + $(this).attr('obj_id') + '/';
-        $.getJSON(url + 'count/', function (data) {
-          if (data.count > 0) {
-            $(star).addClass('selected').each(show);
-          }
-        });
-      })
-      .click(function () {
-        $(this).toggleClass('selected');
-        let url = baseUrl + $(this).attr('class_name');
-        url += '/' + $(this).attr('obj_id') + '/';
-        if ($(this).hasClass('selected')) {
-          url += 'select/';
-        } else {
-          url += 'unselect/';
+    .attr('title', 'Click to favorite/unfavorite')
+    .css('cursor', 'pointer')
+    .each(show)
+    .each(function () {
+      let url = baseUrl + $(this).attr('class_name');
+      const star = this;
+      url += '/' + $(this).attr('obj_id') + '/';
+      $.getJSON(url + 'count/', function (data) {
+        if (data.count > 0) {
+          $(star).addClass('selected').each(show);
        }
-        $.get(url);
-        $(this).each(show);
-      })
+      });
+    })
+    .click(function () {
+      $(this).toggleClass('selected');
+      let url = baseUrl + $(this).attr('class_name');
+      url += '/' + $(this).attr('obj_id') + '/';
+      if ($(this).hasClass('selected')) {
+        url += 'select/';
+      } else {
+        url += 'unselect/';
+      }
+      $.get(url);
+      $(this).each(show);
+    })
    .tooltip();
  }
-  const Slice = function (data, dashboard) {
+  const Slice = function (data, controller) {
    let timer;
    const token = $('#' + data.token);
    const containerId = data.token + '_con';
    const selector = '#' + containerId;
    const container = $(selector);
    const sliceId = data.slice_id;
+    const origJsonEndpoint = data.json_endpoint;
    let dttm = 0;
    const stopwatch = function () {
      dttm += 10;
@ -76,16 +77,13 @@ const px = function () {
      container,
      containerId,
      selector,
-      querystring(params) {
-        const newParams = params || {};
+      querystring() {
        const parser = document.createElement('a');
        parser.href = data.json_endpoint;
-        if (dashboard !== undefined) {
-          let flts = '';
-          if (newParams.extraFilters !== false) {
-            flts = dashboard.effectiveExtraFilters(sliceId);
-            flts = encodeURIComponent(JSON.stringify(flts));
-          }
+        if (controller.type === 'dashboard') {
+          parser.href = origJsonEndpoint;
+          let flts = controller.effectiveExtraFilters(sliceId);
+          flts = encodeURIComponent(JSON.stringify(flts));
          qrystr = parser.search + '&extra_filters=' + flts;
        } else if ($('#query').length === 0) {
          qrystr = parser.search;
@ -104,11 +102,10 @@ const px = function () {
        };
        return Mustache.render(s, context);
      },
-      jsonEndpoint(params) {
-        const newParams = params || {};
+      jsonEndpoint() {
        const parser = document.createElement('a');
        parser.href = data.json_endpoint;
-        let endpoint = parser.pathname + this.querystring({ extraFilters: newParams.extraFilters });
+        let endpoint = parser.pathname + this.querystring();
        endpoint += '&json=true';
        endpoint += '&force=' + this.force;
        return endpoint;
@ -116,43 +113,16 @@ const px = function () {
      d3format(col, number) {
        // uses the utils memoized d3format function and formats based on
        // column level defined preferences
-        const format = this.data.column_formats[col];
+        const format = data.column_formats[col];
        return utils.d3format(format, number);
      },
      /* eslint no-shadow: 0 */
-      done(data) {
+      done(payload) {
+        Object.assign(data, payload);
+
        clearInterval(timer);
        token.find('img.loading').hide();
        container.show();
-        let cachedSelector = null;
-        if (dashboard === undefined) {
-          cachedSelector = $('#is_cached');
-          if (data !== undefined && data.is_cached) {
-            cachedSelector
-              .attr(
-                'title',
-                `Served from data cached at ${data.cached_dttm}. Click [Query] to force-refresh`)
-              .show()
-              .tooltip('fixTitle');
-          } else {
-            cachedSelector.hide();
-          }
-        } else {
-          const refresh = this.getWidgetHeader().find('.refresh');
-          if (data !== undefined && data.is_cached) {
-            refresh
-              .addClass('danger')
-              .attr('title',
-                    'Served from data cached at ' + data.cached_dttm +
-                    '. Click to force-refresh')
-              .tooltip('fixTitle');
-          } else {
-            refresh
-              .removeClass('danger')
-              .attr('title', 'Click to force-refresh')
-              .tooltip('fixTitle');
-          }
-        }

        if (data !== undefined) {
          slice.viewSqlQuery = data.query;
@ -162,6 +132,7 @@ const px = function () {
        $('#timer').addClass('label-success');
        $('.query-and-save button').removeAttr('disabled');
        always(data);
+        controller.done(this);
      },
      getErrorMsg(xhr) {
        if (xhr.statusText === 'timeout') {
@ -193,6 +164,7 @@ const px = function () {
        $('#timer').addClass('btn-danger');
        $('.query-and-save button').removeAttr('disabled');
        always(data);
+        controller.error(this);
      },
      width() {
        return token.width();
@ -238,30 +210,19 @@ const px = function () {
        this.viz.resize();
      },
      addFilter(col, vals) {
-        if (dashboard !== undefined) {
-          dashboard.addFilter(sliceId, col, vals);
-        }
+        controller.addFilter(sliceId, col, vals);
      },
      setFilter(col, vals) {
-        if (dashboard !== undefined) {
-          dashboard.setFilter(sliceId, col, vals);
-        }
+        controller.setFilter(sliceId, col, vals);
      },
      getFilters() {
-        if (dashboard !== undefined) {
-          return dashboard.filters[sliceId];
-        }
-        return false;
+        return controller.filters[sliceId];
      },
      clearFilter() {
-        if (dashboard !== undefined) {
-          dashboard.clearFilter(sliceId);
-        }
+        controller.clearFilter(sliceId);
      },
      removeFilter(col, vals) {
-        if (dashboard !== undefined) {
-          dashboard.removeFilter(sliceId, col, vals);
-        }
+        controller.removeFilter(sliceId, col, vals);
      },
    };
    slice.viz = vizMap[data.form_data.viz_type](slice);
--- a/caravel/assets/javascripts/modules/utils.js
+++ b/caravel/assets/javascripts/modules/utils.js
@ -103,7 +103,23 @@ function d3format(format, number) {
  }
  return formatters[format](number);
 }
+
+// Slice objects interact with their context through objects that implement
+// this controllerInterface (dashboard, explore, standalone)
+const controllerInterface = {
+  type: null,
+  done: () => {},
+  error: () => {},
+  always: () => {},
+  addFiler: () => {},
+  setFilter: () => {},
+  getFilters: () => false,
+  clearFilter: () => {},
+  removeFilter: () => {},
+};
+
 module.exports = {
+  controllerInterface,
  d3format,
  fixDataTableBodyHeight,
  showModal,
--- a/caravel/assets/javascripts/standalone.js
+++ b/caravel/assets/javascripts/standalone.js
@ -2,12 +2,16 @@ const $ = window.$ = require('jquery');
 /* eslint no-unused-vars: 0 */
 const jQuery = window.jQuery = $;
 const px = require('./modules/caravel.js');
+const utils = require('./modules/utils.js');

 require('bootstrap');

+const standaloneController = Object.assign(
+  {}, utils.controllerInterface, { type: 'standalone' });
+
 $(document).ready(function () {
  const data = $('.slice').data('slice');
-  const slice = px.Slice(data);
+  const slice = px.Slice(data, standaloneController);
  slice.render();
  slice.bindResizeToWindowResize();
 });
--- a/caravel/assets/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx
+++ b/caravel/assets/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx
@ -31,7 +31,13 @@ describe('EmbedCodeButton', () => {
      width: '2000',
      srcLink: 'http://localhost/endpoint_url',
    });
-    const embedHTML = `<iframe src="http://localhost/endpoint_url" width="2000" height="1000" seamless frameBorder="0" scrolling="no"></iframe>`;
+    const embedHTML = `
+      <iframe
+        src="nullendpoint_url"
+        width="2000"
+        height="1000"
+        seamless frameBorder="0" scrolling="no">
+      </iframe>`;
    expect(wrapper.instance().generateEmbedHTML()).to.equal(embedHTML);
  });
 });