Fixing the missing searchbox bug (#431)

* Fixing the missing searchbox bug

* Linting JS

* Layout tweaks

caravel/assets/visualizations/directed_force.js

@@ -7,13 +7,13 @@ require('./directed_force.css');
 /* Modified from http://bl.ocks.org/d3noob/5141278 */
 function directedForceVis(slice) {
   var div = d3.select(slice.selector);
-  var link_length = slice.data.form_data.link_length || 200;
-  var charge = slice.data.form_data.charge || -500;
 
   var render = function () {
     var width = slice.width();
     var height = slice.height() - 25;
     d3.json(slice.jsonEndpoint(), function (error, json) {
+      var link_length = json.form_data.link_length || 200;
+      var charge = json.form_data.charge || -500;
 
       if (error !== null) {
         slice.error(error.responseText);

caravel/assets/visualizations/pivot_table.js

@@ -7,10 +7,10 @@ require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-boots
 
 module.exports = function (slice) {
   var container = slice.container;
-  var form_data = slice.data.form_data;
 
   function refresh() {
     $.getJSON(slice.jsonEndpoint(), function (json) {
+      var form_data = json.form_data;
       container.html(json.data);
       if (form_data.groupby.length === 1) {
         var table = container.find('table').DataTable({

caravel/assets/visualizations/table.js

@@ -8,8 +8,6 @@ require('datatables.net-bs');
 require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 
 function tableVis(slice) {
-  var data = slice.data;
-  var form_data = data.form_data;
   var f = d3.format('.3s');
   var fC = d3.format('0,000');
   var timestampFormatter;
@@ -23,12 +21,13 @@ function tableVis(slice) {
 
     function onSuccess(json) {
       var data = json.data;
+      var form_data = json.form_data;
       var metrics = json.form_data.metrics;
 
       function col(c) {
         var arr = [];
         for (var i = 0; i < data.records.length; i++) {
-          arr.push(json.data.records[i][c]);
+          arr.push(data.records[i][c]);
         }
         return arr;
       }
@@ -43,7 +42,9 @@ function tableVis(slice) {
         timestampFormatter = px.timeFormatFactory(json.form_data.table_timestamp_format);
       }
 
-      var table = d3.select(slice.selector).html('').append('table')
+      var div = d3.select(slice.selector);
+      div.html('');
+      var table = div.append('table')
         .classed('dataframe dataframe table table-striped table-bordered table-condensed table-hover dataTable no-footer', true)
         .attr('width', '100%');
 
@@ -135,4 +136,4 @@ function tableVis(slice) {
   };
 }
 
-module.exports = tableVis;
+module.exports = tableVis;

caravel/viz.py

@@ -322,23 +322,25 @@ class TableViz(BaseViz):
     verbose_name = "Table View"
     credits = 'a <a href="https://github.com/airbnb/caravel">Caravel</a> original'
     fieldsets = ({
-        'label': "Chart Options",
-        'fields': (
-            'table_timestamp_format',
-            'row_limit',
-            ('include_search', None),
-        )
-    }, {
         'label': "GROUP BY",
+        'description': 'Use this section if you want a query that aggregates',
         'fields': (
             'groupby',
             'metrics',
         )
     }, {
         'label': "NOT GROUPED BY",
+        'description': 'Use this section if you want to query atomic rows',
         'fields': (
             'all_columns',
         )
+    }, {
+        'label': "Options",
+        'fields': (
+            'table_timestamp_format',
+            'row_limit',
+            ('include_search', None),
+        )
     })
     is_timeseries = False