From 09e5f9c7b2d38bcbae6ea5feed098004e025a111 Mon Sep 17 00:00:00 2001
From: Vera Liu <vera.liu@airbnb.com>
Date: Tue, 25 Oct 2016 16:57:55 -0700
Subject: [PATCH 1/2] Use jquery calls in find() and html() of slice mock to
 Get pivot_table viz working

---
 .../explorev2/components/ChartContainer.jsx   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
index a3a7a45e031f..581b45880121 100644
--- a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { Panel } from 'react-bootstrap';
@@ -14,6 +15,13 @@ const propTypes = {
 };
 
 class ChartContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selector: `#${this.props.sliceContainerId}`,
+    };
+  }
+
   componentDidMount() {
     this.renderVis();
   }
@@ -27,8 +35,9 @@ class ChartContainer extends React.Component {
       jsonEndpoint: () => this.props.jsonEndpoint,
 
       container: {
-        html: () => {
+        html: (data) => {
           // this should be a callback to clear the contents of the slice container
+          $(this.state.selector).html(data);
         },
 
         css: () => {
@@ -37,17 +46,25 @@ class ChartContainer extends React.Component {
           // should call callback to adjust height of chart
         },
         height: () => parseInt(this.props.height, 10) - 100,
+
+        find: (classname) => ($(this.state.selector).find(classname)),
+
       },
 
       width: () => this.chartContainerRef.getBoundingClientRect().width,
 
       height: () => parseInt(this.props.height, 10) - 100,
 
-      selector: `#${this.props.sliceContainerId}`,
+      selector: this.state.selector,
 
       done: () => {
         // finished rendering callback
       },
+
+      error: () => {
+        // rendering error callback
+      },
+
       d3format: (col, number) => {
         // mock d3format function in Slice object in caravel.js
         const format = this.props.columnFormats[col];

From b9cf9526fa12bf99a7b2671aa86b5d9b2a1efe06 Mon Sep 17 00:00:00 2001
From: Vera Liu <vera.liu@airbnb.com>
Date: Thu, 27 Oct 2016 10:09:52 -0700
Subject: [PATCH 2/2] Borrowed code from caravel.js into error callback

---
 .../explorev2/components/ChartContainer.jsx   | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
index 581b45880121..9ddcca63f903 100644
--- a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -9,7 +9,7 @@ const propTypes = {
   sliceName: PropTypes.string.isRequired,
   vizType: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
-  sliceContainerId: PropTypes.string.isRequired,
+  containerId: PropTypes.string.isRequired,
   jsonEndpoint: PropTypes.string.isRequired,
   columnFormats: PropTypes.object,
 };
@@ -18,7 +18,7 @@ class ChartContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      selector: `#${this.props.sliceContainerId}`,
+      selector: `#${this.props.containerId}`,
     };
   }
 
@@ -61,8 +61,28 @@ class ChartContainer extends React.Component {
         // finished rendering callback
       },
 
-      error: () => {
-        // rendering error callback
+      error(msg, xhr) {
+        let errorMsg = msg;
+        let errHtml = '';
+        try {
+          const o = JSON.parse(msg);
+          if (o.error) {
+            errorMsg = o.error;
+          }
+        } catch (e) {
+          // pass
+        }
+        errHtml = `<div class="alert alert-danger">${errorMsg}</div>`;
+        if (xhr) {
+          const extendedMsg = this.getErrorMsg(xhr);
+          if (extendedMsg) {
+            errHtml += `<div class="alert alert-danger">${extendedMsg}</div>`;
+          }
+        }
+        $(this.state.selector).html(errHtml);
+        this.render();
+        $('span.query').removeClass('disabled');
+        $('.query-and-save button').removeAttr('disabled');
       },
 
       d3format: (col, number) => {
@@ -88,7 +108,7 @@ class ChartContainer extends React.Component {
           }
         >
           <div
-            id={this.props.sliceContainerId}
+            id={this.props.containerId}
             ref={(ref) => { this.chartContainerRef = ref; }}
             className={this.props.vizType}
           />
@@ -104,7 +124,7 @@ function mapStateToProps(state) {
   return {
     sliceName: state.sliceName,
     vizType: state.viz.formData.vizType,
-    sliceContainerId: `slice-container-${state.viz.formData.sliceId}`,
+    containerId: `slice-container-${state.viz.formData.sliceId}`,
     jsonEndpoint: state.viz.jsonEndPoint,
     columnFormats: state.viz.columnFormats,
   };