[panoramix] -> [dashed]

dashed/assets/javascripts/css-theme.js

@@ -0,0 +1 @@
+require('../stylesheets/less/index.less');

dashed/assets/javascripts/dashboard.js

@@ -0,0 +1,229 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var px = require('./modules/dashed.js');
+var d3 = require('d3');
+require('bootstrap');
+
+var ace = require('brace');
+require('brace/mode/css');
+require('brace/theme/crimson_editor');
+
+require('./dashed-select2.js');
+require('../node_modules/gridster/dist/jquery.gridster.min.css');
+require('../node_modules/gridster/dist/jquery.gridster.min.js');
+
+var Dashboard = function (dashboardData) {
+  var dashboard = $.extend(dashboardData, {
+    filters: {},
+    init: function () {
+      this.initDashboardView();
+      var sliceObjects = [],
+        dash = this;
+      dashboard.slices.forEach(function (data) {
+        var slice = px.Slice(data, dash);
+        $("#slice_" + data.slice_id).find('a.refresh').click(function () {
+          slice.render();
+        });
+        sliceObjects.push(slice);
+        slice.render();
+      });
+      this.slices = sliceObjects;
+    },
+    setFilter: function (slice_id, col, vals) {
+      this.addFilter(slice_id, col, vals, false);
+    },
+    addFilter: function (slice_id, col, vals, merge) {
+      if (merge === undefined) {
+        merge = true;
+      }
+      if (!(slice_id in this.filters)) {
+        this.filters[slice_id] = {};
+      }
+      if (!(col in this.filters[slice_id]) || !merge) {
+        this.filters[slice_id][col] = vals;
+      } else {
+        this.filters[slice_id][col] = d3.merge([this.filters[slice_id][col], vals]);
+      }
+      this.refreshExcept(slice_id);
+    },
+    readFilters: function () {
+      // Returns a list of human readable active filters
+      return JSON.stringify(this.filters, null, 4);
+    },
+    refreshExcept: function (slice_id) {
+      var immune = this.metadata.filter_immune_slices;
+      if (immune) {
+        this.slices.forEach(function (slice) {
+          if (slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) {
+            slice.render();
+          }
+        });
+      }
+    },
+    clearFilters: function (slice_id) {
+      delete this.filters[slice_id];
+      this.refreshExcept(slice_id);
+    },
+    removeFilter: function (slice_id, col, vals) {
+      if (slice_id in this.filters) {
+        if (col in this.filters[slice_id]) {
+          var a = [];
+          this.filters[slice_id][col].forEach(function (v) {
+            if (vals.indexOf(v) < 0) {
+              a.push(v);
+            }
+          });
+          this.filters[slice_id][col] = a;
+        }
+      }
+      this.refreshExcept(slice_id);
+    },
+    getSlice: function (slice_id) {
+      this.slices.forEach(function (slice, i) {
+        if (slice.slice_id === slice_id) {
+          return slice;
+        }
+      });
+    },
+    initDashboardView: function () {
+      dashboard = this;
+      var gridster = $(".gridster ul").gridster({
+        autogrow_cols: true,
+        widget_margins: [10, 10],
+        widget_base_dimensions: [100, 100],
+        draggable: {
+          handle: '.drag'
+        },
+        resize: {
+          enabled: true,
+          stop: function (e, ui, element) {
+            var slice_data = $(element).data('slice');
+            if (slice_data) {
+              dashboard.getSlice(slice_data.slice_id).resize();
+            }
+          }
+        },
+        serialize_params: function (_w, wgd) {
+          return {
+            slice_id: $(_w).attr('slice_id'),
+            col: wgd.col,
+            row: wgd.row,
+            size_x: wgd.size_x,
+            size_y: wgd.size_y
+          };
+        }
+      }).data('gridster');
+      $("div.gridster").css('visibility', 'visible');
+      $("#savedash").click(function () {
+        var expanded_slices = {};
+        $.each($(".slice_info"), function (i, d) {
+          var widget = $(this).parents('.widget');
+          var slice_description = widget.find('.slice_description');
+          if (slice_description.is(":visible")) {
+            expanded_slices[$(d).attr('slice_id')] = true;
+          }
+        });
+        var data = {
+          positions: gridster.serialize(),
+          css: editor.getValue(),
+          expanded_slices: expanded_slices
+        };
+        $.ajax({
+          type: "POST",
+          url: '/dashed/save_dash/' + dashboard.id + '/',
+          data: {
+            data: JSON.stringify(data)
+          },
+          success: function () {
+            alert("Saved!");
+          },
+          error: function () {
+            alert("Error :(");
+          }
+        });
+      });
+
+      var editor = ace.edit("dash_css");
+      editor.$blockScrolling = Infinity;
+
+      editor.setTheme("ace/theme/crimson_editor");
+      editor.setOptions({
+        minLines: 16,
+        maxLines: Infinity,
+        useWorker: false
+      });
+      editor.getSession().setMode("ace/mode/css");
+
+      $(".select2").select2({
+        dropdownAutoWidth: true
+      });
+      $("#css_template").on("change", function () {
+        var css = $(this).find('option:selected').data('css');
+        editor.setValue(css);
+
+        $('#dash_css').val(css);
+        injectCss("dashboard-template", css);
+
+      });
+      $('#filters').click(function () {
+        alert(dashboard.readFilters());
+      });
+      $("a.remove-chart").click(function () {
+        var li = $(this).parents("li");
+        gridster.remove_widget(li);
+      });
+
+      $("li.widget").click(function (e) {
+        var $this = $(this);
+        var $target = $(e.target);
+
+        if ($target.hasClass("slice_info")) {
+          $this.find(".slice_description").slideToggle(0, function () {
+            $this.find('.refresh').click();
+          });
+        } else if ($target.hasClass("controls-toggle")) {
+          $this.find(".chart-controls").toggle();
+        }
+      });
+
+      editor.on("change", function () {
+        var css = editor.getValue();
+        $('#dash_css').val(css);
+        injectCss("dashboard-template", css);
+      });
+
+      var css = $('.dashboard').data('css');
+      injectCss("dashboard-template", css);
+
+      // Injects the passed css string into a style sheet with the specified className
+      // If a stylesheet doesn't exist with the passed className, one will be injected into <head>
+      function injectCss(className, css) {
+
+        var head  = document.head || document.getElementsByTagName('head')[0];
+        var style = document.querySelector('.' + className);
+
+        if (!style) {
+          if (className.split(' ').length > 1) {
+            throw new Error("This method only supports selections with a single class name.");
+          }
+          style = document.createElement('style');
+          style.className = className;
+          style.type = 'text/css';
+          head.appendChild(style);
+        }
+
+        if (style.styleSheet) {
+          style.styleSheet.cssText = css;
+        } else {
+          style.innerHTML = css;
+        }
+      }
+    }
+  });
+  dashboard.init();
+  return dashboard;
+};
+
+$(document).ready(function () {
+  Dashboard($('.dashboard').data('dashboard'));
+});

dashed/assets/javascripts/dashed-select2.js

@@ -0,0 +1,5 @@
+require('../node_modules/select2/select2.css');
+require('../node_modules/select2-bootstrap-css/select2-bootstrap.min.css');
+require('../node_modules/jquery-ui/themes/base/jquery-ui.css');
+require('select2');
+require('../vendor/select2.sortable.js');

dashed/assets/javascripts/explore.js

@@ -0,0 +1,334 @@
+// Javascript for the explorer page
+// Init explorer view -> load vis dependencies -> read data (from dynamic html) -> render slice
+// nb: to add a new vis, you must also add a Python fn in viz.py
+//
+// js
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var px = require('./modules/dashed.js');
+
+require('jquery-ui');
+$.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
+require('bootstrap');
+
+require('./dashed-select2.js');
+
+require('../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
+
+// css
+require('../vendor/pygments.css');
+require('../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
+
+var slice;
+
+function prepForm() {
+  var i = 1;
+  // Assigning the right id to form elements in filters
+  $("#filters > div").each(function () {
+    $(this).attr("id", function () {
+        return "flt_" + i;
+      });
+    $(this).find("#flt_col_0")
+      .attr("id", function () {
+        return "flt_col_" + i;
+      })
+      .attr("name", function () {
+        return "flt_col_" + i;
+      });
+    $(this).find("#flt_op_0")
+      .attr("id", function () {
+        return "flt_op_" + i;
+      })
+      .attr("name", function () {
+        return "flt_op_" + i;
+      });
+    $(this).find("#flt_eq_0")
+      .attr("id", function () {
+        return "flt_eq_" + i;
+      })
+      .attr("name", function () {
+        return "flt_eq_" + i;
+      });
+    i++;
+  });
+}
+
+function renderSlice() {
+  prepForm();
+  slice.render();
+}
+
+function initExploreView() {
+
+  function druidify() {
+    $('div.alert').remove();
+    history.pushState({}, document.title, slice.querystring());
+    renderSlice();
+  }
+
+  function get_collapsed_fieldsets() {
+    var collapsed_fieldsets = $("#collapsed_fieldsets").val();
+
+    if (collapsed_fieldsets !== undefined && collapsed_fieldsets !== "") {
+      collapsed_fieldsets = collapsed_fieldsets.split('||');
+    } else {
+      collapsed_fieldsets = [];
+    }
+    return collapsed_fieldsets;
+  }
+
+  function toggle_fieldset(legend, animation) {
+    var parent = legend.parent();
+    var fieldset = parent.find(".legend_label").text();
+    var collapsed_fieldsets = get_collapsed_fieldsets();
+    var index;
+
+    if (parent.hasClass("collapsed")) {
+      if (animation) {
+        parent.find(".fieldset_content").slideDown();
+      } else {
+        parent.find(".fieldset_content").show();
+      }
+      parent.removeClass("collapsed");
+      parent.find("span.collapser").text("[-]");
+
+      // removing from array, js is overcomplicated
+      index = collapsed_fieldsets.indexOf(fieldset);
+      if (index !== -1) {
+        collapsed_fieldsets.splice(index, 1);
+      }
+    } else { // not collapsed
+      if (animation) {
+        parent.find(".fieldset_content").slideUp();
+      } else {
+        parent.find(".fieldset_content").hide();
+      }
+
+      parent.addClass("collapsed");
+      parent.find("span.collapser").text("[+]");
+      index = collapsed_fieldsets.indexOf(fieldset);
+      if (index === -1 && fieldset !== "" && fieldset !== undefined) {
+        collapsed_fieldsets.push(fieldset);
+      }
+    }
+
+    $("#collapsed_fieldsets").val(collapsed_fieldsets.join("||"));
+  }
+
+  $('legend').click(function () {
+    toggle_fieldset($(this), true);
+  });
+
+  function copyURLToClipboard(url) {
+    var textArea = document.createElement("textarea");
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-1000px';
+    textArea.value = url;
+
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    try {
+      var successful = document.execCommand('copy');
+      if (!successful) {
+        throw new Error("Not successful");
+      }
+    } catch (err) {
+      window.alert("Sorry, your browser does not support copying. Use Ctrl / Cmd + C!");
+    }
+    document.body.removeChild(textArea);
+    return successful;
+  }
+
+  $('#shortner').click(function () {
+    $.ajax({
+      type: "POST",
+      url: '/r/shortner/',
+      data: {
+        data: '/' + window.location.pathname + slice.querystring()
+      },
+      success: function (data) {
+        var close = '<a style="cursor: pointer;"><i class="fa fa-close" id="close_shortner"></i></a>';
+        var copy = '<a style="cursor: pointer;"><i class="fa fa-clipboard" title="Copy to clipboard" id="copy_url"></i></a>';
+        var spaces = '&nbsp;&nbsp;&nbsp;';
+        var popover = data + spaces + copy + spaces + close;
+
+        var $shortner = $('#shortner')
+          .popover({
+            content: popover,
+            placement: 'left',
+            html: true,
+            trigger: 'manual'
+          })
+          .popover('show');
+
+        $('#copy_url').tooltip().click(function () {
+          var success = copyURLToClipboard(data);
+          if (success) {
+            $(this).attr("data-original-title", "Copied!").tooltip('fixTitle').tooltip('show');
+            window.setTimeout(destroyPopover, 1200);
+          }
+        });
+        $('#close_shortner').click(destroyPopover);
+
+        function destroyPopover() {
+          $shortner.popover('destroy');
+        }
+      },
+      error: function () {
+        alert("Error :(");
+      }
+    });
+  });
+  $("#viz_type").change(function () {
+    $("#query").submit();
+  });
+
+  var collapsed_fieldsets = get_collapsed_fieldsets();
+  for (var i = 0; i < collapsed_fieldsets.length; i++) {
+    toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false);
+  }
+
+  $(".select2").select2({
+    dropdownAutoWidth: true
+  });
+  $(".select2Sortable").select2({
+    dropdownAutoWidth: true
+  });
+  $(".select2Sortable").select2Sortable({
+    bindOrder: 'sortableStop'
+  });
+  $("form").show();
+  $('[data-toggle="tooltip"]').tooltip({
+    container: 'body'
+  });
+  $(".ui-helper-hidden-accessible").remove(); // jQuery-ui 1.11+ creates a div for every tooltip
+
+  function set_filters() {
+    for (var i = 1; i < 10; i++) {
+      var eq = px.getParam("flt_eq_" + i);
+      if (eq !== '') {
+        add_filter(i);
+      }
+    }
+  }
+  set_filters();
+
+  function add_filter(i) {
+    var cp = $("#flt0").clone();
+    $(cp).appendTo("#filters");
+    $(cp).show();
+    if (i !== undefined) {
+      $(cp).find("#flt_eq_0").val(px.getParam("flt_eq_" + i));
+      $(cp).find("#flt_op_0").val(px.getParam("flt_op_" + i));
+      $(cp).find("#flt_col_0").val(px.getParam("flt_col_" + i));
+    }
+    $(cp).find('select').select2();
+    $(cp).find('.remove').click(function () {
+      $(this).parent().parent().remove();
+    });
+  }
+
+  $(window).bind("popstate", function (event) {
+    // Browser back button
+    var returnLocation = history.location || document.location;
+    // Could do something more lightweight here, but we're not optimizing
+    // for the use of the back button anyways
+    returnLocation.reload();
+  });
+
+  $("#plus").click(add_filter);
+  $("#btn_save").click(function () {
+    var slice_name = prompt("Name your slice!");
+    if (slice_name !== "" && slice_name !== null) {
+      $("#slice_name").val(slice_name);
+      prepForm();
+      $("#action").val("save");
+      $("#query").submit();
+    }
+  });
+  $("#btn_overwrite").click(function () {
+    var flag = confirm("Overwrite slice [" + $("#slice_name").val() + "] !?");
+    if (flag) {
+      $("#action").val("overwrite");
+      prepForm();
+      $("#query").submit();
+    }
+  });
+
+  $(".druidify").click(druidify);
+
+  function create_choices(term, data) {
+    var filtered = $(data).filter(function () {
+      return this.text.localeCompare(term) === 0;
+    });
+    if (filtered.length === 0) {
+      return {
+        id: term,
+        text: term
+      };
+    }
+  }
+
+  function initSelectionToValue(element, callback) {
+    callback({
+      id: element.val(),
+      text: element.val()
+    });
+  }
+
+  $(".select2_freeform").each(function () {
+    var parent = $(this).parent();
+    var name = $(this).attr('name');
+    var l = [];
+    var selected = '';
+    for (var i = 0; i < this.options.length; i++) {
+      l.push({
+        id: this.options[i].value,
+        text: this.options[i].text
+      });
+      if (this.options[i].selected) {
+        selected = this.options[i].value;
+      }
+    }
+    parent.append(
+      '<input class="' + $(this).attr('class') + '" name="' + name + '" type="text" value="' + selected + '">'
+    );
+    $("input[name='" + name + "']").select2({
+      createSearchChoice: create_choices,
+      initSelection: initSelectionToValue,
+      dropdownAutoWidth: true,
+      multiple: false,
+      data: l
+    });
+    $(this).remove();
+  });
+}
+
+$(document).ready(function () {
+  initExploreView();
+
+  // Dynamically register this visualization
+  var visType = window.viz_type.value;
+  px.registerViz(visType);
+
+  var data = $('.slice').data('slice');
+  slice = px.Slice(data);
+
+  //
+  $('.slice').data('slice', slice);
+
+  // call vis render method, which issues ajax
+  renderSlice();
+
+  // make checkbox inputs display as toggles
+  $(':checkbox')
+    .addClass('pull-right')
+    .attr("data-onstyle", "default")
+    .bootstrapToggle({
+      size: 'mini'
+    });
+
+  $('div.toggle').addClass('pull-right');
+  slice.bindResizeToWindowResize();
+});

dashed/assets/javascripts/featured.js

@@ -0,0 +1,19 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var px = require('./modules/dashed.js');
+
+require('bootstrap');
+require('datatables');
+require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
+
+$(document).ready(function () {
+  $('#dataset-table').DataTable({
+    bPaginate: false,
+    order: [
+      [1, "asc"]
+    ]
+  });
+  $('#dataset-table_info').remove();
+  //$('input[type=search]').addClass('form-control');  # TODO get search box to look nice
+  $('#dataset-table').show();
+});

dashed/assets/javascripts/index.jsx

@@ -0,0 +1,18 @@
+var $ = require('jquery');
+var jQuery = $;
+import React from 'react';
+import { render } from 'react-dom';
+import { Jumbotron } from 'react-bootstrap';
+
+class App extends React.Component {
+  render () {
+    return (
+      <Jumbotron>
+        <h1>Dashed</h1>
+        <p>Extensible visualization tool for exploring data from any database.</p>
+      </Jumbotron>
+    );
+  }
+}
+
+render(<App />, document.getElementById('app'));

dashed/assets/javascripts/modules/dashed.js

@@ -0,0 +1,300 @@
+var $ = require('jquery');
+var jQuery = $;
+var d3 = require('d3');
+
+require('../../stylesheets/dashed.css');
+
+// vis sources
+var sourceMap = {
+  area: 'nvd3_vis.js',
+  bar: 'nvd3_vis.js',
+  bubble: 'nvd3_vis.js',
+  big_number: 'big_number.js',
+  compare: 'nvd3_vis.js',
+  dist_bar: 'nvd3_vis.js',
+  directed_force: 'directed_force.js',
+  filter_box: 'filter_box.js',
+  heatmap: 'heatmap.js',
+  iframe: 'iframe.js',
+  line: 'nvd3_vis.js',
+  markup: 'markup.js',
+  para: 'parallel_coordinates.js',
+  pie: 'nvd3_vis.js',
+  pivot_table: 'pivot_table.js',
+  sankey: 'sankey.js',
+  sunburst: 'sunburst.js',
+  table: 'table.js',
+  word_cloud: 'word_cloud.js',
+  world_map: 'world_map.js'
+};
+
+var color = function () {
+  // Color related utility functions go in this object
+  var bnbColors = [
+    //rausch    hackb      kazan      babu      lima        beach     barol
+    '#ff5a5f', '#7b0051', '#007A87', '#00d1c1', '#8ce071', '#ffb400', '#b4a76c',
+    '#ff8083', '#cc0086', '#00a1b3', '#00ffeb', '#bbedab', '#ffd266', '#cbc29a',
+    '#ff3339', '#ff1ab1', '#005c66', '#00b3a5', '#55d12e', '#b37e00', '#988b4e'
+  ];
+  var spectrums = {
+    blue_white_yellow: ['#00d1c1', 'white', '#ffb400'],
+    fire: ['white', 'yellow', 'red', 'black'],
+    white_black: ['white', 'black'],
+    black_white: ['black', 'white']
+  };
+  var colorBnb = function () {
+    // Color factory
+    var seen = {};
+    return function (s) {
+      // next line is for dashed series that should have the same color
+      s = s.replace('---', '');
+      if (seen[s] === undefined) {
+        seen[s] = Object.keys(seen).length;
+      }
+      return this.bnbColors[seen[s] % this.bnbColors.length];
+    };
+  };
+  var colorScalerFactory = function (colors, data, accessor) {
+    // Returns a linear scaler our of an array of color
+    if (!Array.isArray(colors)) {
+      colors = spectrums[colors];
+    }
+
+    var ext = [0, 1];
+    if (data !== undefined) {
+      ext = d3.extent(data, accessor);
+    }
+
+    var points = [];
+    var chunkSize = (ext[1] - ext[0]) / colors.length;
+    $.each(colors, function (i, c) {
+      points.push(i * chunkSize);
+    });
+    return d3.scale.linear().domain(points).range(colors);
+  };
+  return {
+    bnbColors: bnbColors,
+    category21: colorBnb(),
+    colorScalerFactory: colorScalerFactory
+  };
+};
+
+var px = (function () {
+
+  var visualizations = {};
+  var slice;
+
+  function getParam(name) {
+    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+      results = regex.exec(location.search);
+    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+  }
+
+  function UTC(dttm) {
+    return new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
+  }
+  var tickMultiFormat = d3.time.format.multi([
+    [".%L", function (d) {
+      return d.getMilliseconds();
+    }], // If there are millisections, show  only them
+    [":%S", function (d) {
+      return d.getSeconds();
+    }], // If there are seconds, show only them
+    ["%a %b %d, %I:%M %p", function (d) {
+      return d.getMinutes() !== 0;
+    }], // If there are non-zero minutes, show Date, Hour:Minute [AM/PM]
+    ["%a %b %d, %I %p", function (d) {
+      return d.getHours() !== 0;
+    }], // If there are hours that are multiples of 3, show date and AM/PM
+    ["%a %b %d, %Y", function (d) {
+      return d.getDate() !== 1;
+    }], // If not the first of the month, do "month day, year."
+    ["%B %Y", function (d) {
+      return d.getMonth() !== 0 && d.getDate() === 1;
+    }], // If the first of the month, do "month day, year."
+    ["%Y", function (d) {
+      return true;
+    }] // fall back on month, year
+  ]);
+
+  function formatDate(dttm) {
+    var d = UTC(new Date(dttm));
+    //d = new Date(d.getTime() - 1 * 60 * 60 * 1000);
+    return tickMultiFormat(d);
+  }
+
+  function timeFormatFactory(d3timeFormat) {
+    var f = d3.time.format(d3timeFormat);
+    return function (dttm) {
+      var d = UTC(new Date(dttm));
+      return f(d);
+    };
+  }
+
+  var Slice = function (data, dashboard) {
+    var timer;
+    var token = $('#' + data.token);
+    var container_id = data.token + '_con';
+    var selector = '#' + container_id;
+    var container = $(selector);
+    var slice_id = data.slice_id;
+    var dttm = 0;
+    var stopwatch = function () {
+      dttm += 10;
+      var num = dttm / 1000;
+      $('#timer').text(num.toFixed(2) + " sec");
+    };
+    var qrystr = '';
+    var always = function (data) {
+      //Private f, runs after done and error
+      clearInterval(timer);
+      $('#timer').removeClass('btn-warning');
+    };
+    slice = {
+      data: data,
+      container: container,
+      container_id: container_id,
+      selector: selector,
+      querystring: function () {
+        var parser = document.createElement('a');
+        parser.href = data.json_endpoint;
+        if (dashboard !== undefined) {
+          var flts = encodeURIComponent(JSON.stringify(dashboard.filters));
+          qrystr = parser.search + "&extra_filters=" + flts;
+        } else if ($('#query').length === 0) {
+          qrystr = parser.search;
+        } else {
+          qrystr = '?' + $('#query').serialize();
+        }
+        return qrystr;
+      },
+      jsonEndpoint: function () {
+        var parser = document.createElement('a');
+        parser.href = data.json_endpoint;
+        var endpoint = parser.pathname + this.querystring() + "&json=true";
+        return endpoint;
+      },
+      done: function (data) {
+        clearInterval(timer);
+        token.find("img.loading").hide();
+        container.show();
+        if (data !== undefined) {
+          $("#query_container").html(data.query);
+        }
+        $('#timer').removeClass('btn-warning');
+        $('#timer').addClass('btn-success');
+        $('span.query').removeClass('disabled');
+        $('#json').click(function () {
+          window.location = data.json_endpoint;
+        });
+        $('#standalone').click(function () {
+          window.location = data.standalone_endpoint;
+        });
+        $('#csv').click(function () {
+          window.location = data.csv_endpoint;
+        });
+        $('.btn-group.results span').removeAttr('disabled');
+        always(data);
+      },
+      error: function (msg) {
+        token.find("img.loading").hide();
+        var err = '<div class="alert alert-danger">' + msg + '</div>';
+        container.html(err);
+        container.show();
+        $('span.query').removeClass('disabled');
+        $('#timer').addClass('btn-danger');
+        always(data);
+      },
+      width: function () {
+        return token.width();
+      },
+      height: function () {
+        var others = 0;
+        var widget = container.parents('.widget');
+        var slice_description = widget.find('.slice_description');
+        if (slice_description.is(":visible")) {
+          others += widget.find('.slice_description').height() + 25;
+        }
+        others += widget.find('.chart-header').height();
+        return widget.height() - others - 10;
+      },
+      bindResizeToWindowResize: function () {
+        var resizeTimer;
+        $(window).on('resize', function (e) {
+          clearTimeout(resizeTimer);
+          resizeTimer = setTimeout(function () {
+            slice.resize();
+          }, 500);
+        });
+      },
+      render: function () {
+        $('.btn-group.results span').attr('disabled', 'disabled');
+        token.find("img.loading").show();
+        container.hide();
+        container.html('');
+        dttm = 0;
+        timer = setInterval(stopwatch, 10);
+        $('#timer').removeClass('btn-danger btn-success');
+        $('#timer').addClass('btn-warning');
+        this.viz.render();
+      },
+      resize: function () {
+        token.find("img.loading").show();
+        container.hide();
+        container.html('');
+        this.viz.render();
+        this.viz.resize();
+      },
+      addFilter: function (col, vals) {
+        if (dashboard !== undefined) {
+          dashboard.addFilter(slice_id, col, vals);
+        }
+      },
+      setFilter: function (col, vals) {
+        if (dashboard !== undefined) {
+          dashboard.setFilter(slice_id, col, vals);
+        }
+      },
+      clearFilter: function () {
+        if (dashboard !== undefined) {
+          delete dashboard.clearFilter(slice_id);
+        }
+      },
+      removeFilter: function (col, vals) {
+        if (dashboard !== undefined) {
+          delete dashboard.removeFilter(slice_id, col, vals);
+        }
+      }
+    };
+    var visType = data.form_data.viz_type;
+    px.registerViz(visType);
+    slice.viz = visualizations[data.form_data.viz_type](slice);
+    return slice;
+  };
+
+  function registerViz(name) {
+    var visSource = sourceMap[name];
+
+    if (visSource) {
+      var visFactory = require('../../visualizations/' + visSource);
+      if (typeof visFactory === 'function') {
+        visualizations[name] = visFactory;
+      }
+    } else {
+      throw new Error("require(" + name + ") failed.");
+    }
+  }
+
+  // Export public functions
+  return {
+    registerViz: registerViz,
+    Slice: Slice,
+    formatDate: formatDate,
+    timeFormatFactory: timeFormatFactory,
+    color: color(),
+    getParam: getParam
+  };
+})();
+
+module.exports = px;

dashed/assets/javascripts/modules/utils.js

@@ -0,0 +1,55 @@
+var d3 = require('d3');
+
+/*
+    Utility function that takes a d3 svg:text selection and a max width, and splits the
+    text's text across multiple tspan lines such that any given line does not exceed max width
+
+    If text does not span multiple lines AND adjustedY is passed, will set the text to the passed val
+ */
+function wrapSvgText(text, width, adjustedY) {
+  var lineHeight = 1; // ems
+
+  text.each(function () {
+    var text = d3.select(this),
+        words = text.text().split(/\s+/),
+        word,
+        line = [],
+        lineNumber = 0,
+        x = text.attr("x"),
+        y = text.attr("y"),
+        dy = parseFloat(text.attr("dy")),
+        tspan = text.text(null)
+          .append("tspan")
+          .attr("x", x)
+          .attr("y", y)
+          .attr("dy", dy + "em");
+
+    var didWrap = false;
+
+    for (var i = 0; i < words.length; i++) {
+      word = words[i];
+      line.push(word);
+      tspan.text(line.join(" "));
+
+      if (tspan.node().getComputedTextLength() > width) {
+        line.pop(); // remove word that pushes over the limit
+        tspan.text(line.join(" "));
+        line = [word];
+        tspan = text.append("tspan")
+          .attr("x", x)
+          .attr("y", y)
+          .attr("dy", ++lineNumber * lineHeight + dy + "em")
+          .text(word);
+
+        didWrap = true;
+      }
+    }
+    if (!didWrap && typeof adjustedY !== "undefined") {
+      tspan.attr("y", adjustedY);
+    }
+  });
+}
+
+module.exports = {
+  wrapSvgText: wrapSvgText
+};

dashed/assets/javascripts/sql.js

@@ -0,0 +1,97 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+require('select2');
+require('datatables');
+require('bootstrap');
+
+var ace = require('brace');
+require('brace/mode/sql');
+require('brace/theme/crimson_editor');
+
+$(document).ready(function () {
+  function getParam(name) {
+    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+      results = regex.exec(location.search);
+    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+  }
+
+  function initSqlEditorView() {
+    var database_id = $('#database_id').val();
+    var editor = ace.edit("sql");
+    editor.$blockScrolling = Infinity;
+    editor.getSession().setUseWrapMode(true);
+
+    $('#sql').hide();
+    editor.setTheme("ace/theme/crimson_editor");
+    editor.setOptions({
+      minLines: 16,
+      maxLines: Infinity
+    });
+    editor.getSession().setMode("ace/mode/sql");
+    editor.focus();
+    $("select").select2({
+      dropdownAutoWidth: true
+    });
+
+    function showTableMetadata() {
+      $(".metadata").load(
+        '/dashed/table/' + database_id + '/' + $("#dbtable").val() + '/');
+    }
+    $("#dbtable").on("change", showTableMetadata);
+    showTableMetadata();
+    $("#create_view").click(function () {
+      alert("Not implemented");
+    });
+    $(".sqlcontent").show();
+
+    function selectStarOnClick() {
+      $.ajax('/dashed/select_star/' + database_id + '/' + $("#dbtable").val() + '/')
+        .done(function (msg) {
+          editor.setValue(msg);
+        });
+    }
+
+    $("#select_star").click(selectStarOnClick);
+
+    editor.setValue(getParam('sql'));
+    $(window).bind("popstate", function (event) {
+      // Could do something more lightweight here, but we're not optimizing
+      // for the use of the back button anyways
+      editor.setValue(getParam('sql'));
+      $("#run").click();
+    });
+    $("#run").click(function () {
+      $('#results').hide(0);
+      $('#loading').show(0);
+      history.pushState({}, document.title, '?sql=' + encodeURIComponent(editor.getValue()));
+      $.ajax({
+        type: "POST",
+        url: '/dashed/runsql/',
+        data: {
+          data: JSON.stringify({
+            database_id: $('#database_id').val(),
+            sql: editor.getSession().getValue()
+          })
+        },
+        success: function (data) {
+          $('#loading').hide(0);
+          $('#results').show(0);
+          $('#results').html(data);
+
+          $('table.sql_results').DataTable({
+            paging: false,
+            searching: true,
+            aaSorting: []
+          });
+        },
+        error: function (err, err2) {
+          $('#loading').hide(0);
+          $('#results').show(0);
+          $('#results').html(err.responseText);
+        }
+      });
+    });
+  }
+  initSqlEditorView();
+});

dashed/assets/javascripts/standalone.js

@@ -0,0 +1,13 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var px = require('./modules/dashed.js');
+
+require('bootstrap');
+
+$(document).ready(function () {
+  var slice;
+  var data = $('.slice').data('slice');
+  slice = px.Slice(data);
+  slice.render();
+  slice.bindResizeToWindowResize();
+});