huge npm refactor of all visualizations. table views are broken due t…

…o broken shimming for jquery/jquery-ui, dashboards are broken due to refactor of explore views.

panoramix/assets/html/base.html

@@ -4,7 +4,7 @@
 {% block head_css %}
   {{super()}}
   <link rel="shortcut icon" href="/static/refactor/images/favicon.png" />
-  <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/vendor/jquery-ui.min.css" />
+  <link rel="stylesheet" type="text/css" href="/static/refactor/vendor/jquery-ui/jquery-ui.min.css" />
   <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/panoramix.css" />
 
   <!-- Replace with custom bootstrap theme -->
@@ -13,9 +13,8 @@
 {% endblock %}
 
 {% block body %}
-
-  {% include 'appbuilder/general/confirm.html' %}
-  {% include 'appbuilder/general/alert.html' %}
+    {% include 'appbuilder/general/confirm.html' %}
+    {% include 'appbuilder/general/alert.html' %}
 
   {% block navbar %}
     <header class="top" role="header">
@@ -42,6 +41,6 @@
 {% block tail_js %}
   {{ super() }}
   <!-- @TODO get this to shim correctly with a require('jquery-ui') -->
-  <script src="/static/refactor/javascripts/vendor/jquery-ui.min.js"></script>
+  <script src="/static/refactor/vendor/jquery-ui/jquery-ui.min.js"></script>
   <script src="/static/refactor/javascripts/dist/base.entry.js"></script>
 {% endblock %}

panoramix/assets/html/explore.html

@@ -1,11 +1,5 @@
 {% extends "refactor/base.html" %}
 
-{% block head_css %}
-  {{super()}}
-  <link rel="stylesheet" type="text/css" href="/static/lib/pygments.css" />
-  <link href="/static/lib/bootstrap-toggle.min.css" rel="stylesheet">
-{% endblock %}
-
 {% block content_fluid %}
   {% set datasource = viz.datasource %}
   {% set form = viz.form %}

panoramix/assets/html/viz.html

@@ -8,20 +8,4 @@
     {% extends 'refactor/explore.html' %}
   {% endif %}
 
-
-  {% block head_css %}
-      {{super()}}
-      {% for css in viz.css_files %}
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
-      {% endfor %}
-  {% endblock %}
-
-
-  {% block tail %}
-      {{super()}}
-      {% for js in viz.js_files %}
-        <script src="{{ url_for('static', filename=js) }}"></script>
-      {% endfor %}
-  {% endblock %}
-
 {% endif %}

panoramix/assets/javascripts/explore.js

@@ -1,17 +1,70 @@
+// 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
+
+// css
+require('../vendor/pygments.css');
+require('../vendor/bootstrap-toggle/bootstrap-toggle.min.css');
+
+// js
+var $  = window.$  || require('jquery');
+var px = window.px || require('./modules/panoramix.js');
 require('select2');
-require('./vendor/bootstrap-toggle.min.js');
-require('./vendor/select2.sortable.js');
+require('../vendor/bootstrap-toggle/bootstrap-toggle.min.js');
+require('../vendor/select2.sortable.js');
+
+// 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:    undefined,
+  sankey:         'sankey.js',
+  sunburst:       'sunburst.js',
+  table:          'table.js',
+  word_cloud:     'word_cloud.js',
+  world_map:      'world_map.js',
+};
 
 $(document).ready(function() {
   px.initExploreView();
 
+  // Dynamically register this visualization
+  var visType = window.viz_type.value;
+  var visSource = sourceMap[visType];
+
+  if (visSource) {
+    var visFactory = require('../visualizations/' + visSource);
+    if (typeof visFactory === 'function') {
+      // @TODO handle px.registerViz here instead of in each file?
+      px.registerViz(visType, visFactory);
+    }
+  }
+  else {
+    console.error("require(", visType, ") failed.");
+  }
+
   var data  = $('.slice').data('slice');
   var slice = px.Slice(data);
 
+  //
   $('.slice').data('slice', slice);
 
+  // call vis render method, which issues ajax
   px.renderSlice();
 
+  // make checkbox inputs display as toggles
   $(':checkbox')
     .addClass('pull-right')
     .attr("data-onstyle", "default")

panoramix/assets/javascripts/modules/panoramix.js

@@ -1,3 +1,6 @@
+var $  = window.$  || require('jquery');
+var d3 = window.d3 || require('d3');
+
 var color = function(){
   // Color related utility functions go in this object
   var bnbColors = [
@@ -7,8 +10,8 @@ var color = function(){
     '#ff3339', '#ff1ab1', '#005c66', '#00b3a5', '#55d12e', '#b37e00', '#988b4e',
   ];
   var spectrums = {
-    'fire': ['white', 'yellow', 'red', 'black'],
     'blue_white_yellow': ['#00d1c1', 'white', '#ffb400'],
+    'fire': ['white', 'yellow', 'red', 'black'],
     'white_black': ['white', 'black'],
     'black_white': ['black', 'white'],
   }
@@ -346,6 +349,7 @@ var px = (function() {
       });
     });
     $("#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);
@@ -382,6 +386,7 @@ var px = (function() {
         $(this).parent().parent().remove();
       });
     }
+
     $(window).bind("popstate", function(event) {
       // Browser back button
       var returnLocation = history.location || document.location;
@@ -409,7 +414,7 @@ var px = (function() {
         $("#query").submit();
       }
     });
-    add_filter();
+
     $(".druidify").click(druidify);
 
     function create_choices(term, data) {

panoramix/assets/package.json

@@ -38,13 +38,17 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "bootstrap": "^3.3.6",
+    "bootstrap-datepicker": "^1.6.0",
     "brace": "^0.7.0",
     "d3": "^3.5.14",
     "d3-cloud": "^1.2.1",
     "d3-sankey": "^0.2.1",
     "d3-tip": "^0.6.7",
+    "d3.layout.cloud": "^1.2.0",
+    "exports-loader": "^0.6.3",
     "gridster": "^0.5.6",
-    "jquery": "^2.2.0",
+    "imports-loader": "^0.6.5",
+    "jquery": "^2.2.1",
     "jquery-ui": "^1.10.5",
     "react": "^0.14.7",
     "react-bootstrap": "^0.28.3",

panoramix/static/lib/dataTables/dataTables.bootstrap.js → panoramix/assets/vendor/dataTables/dataTables.bootstrap.js

@@ -125,7 +125,7 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
 	};
 
 	// IE9 throws an 'unknown error' if document.activeElement is used
-	// inside an iframe or frame. 
+	// inside an iframe or frame.
 	var activeEl;
 
 	try {

panoramix/static/lib/datamaps.all.js → panoramix/assets/vendor/datamaps/datamaps.all.js

@@ -12131,8 +12131,8 @@
         "scale": [0.036003600360036005, 0.016927109510951093],
         "translate": [-180, -85.609038]
     }
-}
-;
+  };
+
   Datamap.prototype.abwTopo = '__ABW__';
   Datamap.prototype.afgTopo = '__AFG__';
   Datamap.prototype.agoTopo = '__AGO__';

panoramix/static/lib/para/d3.parcoords.css → panoramix/assets/vendor/parallel_coordinates/d3.parcoords.css

@@ -54,7 +54,18 @@
     clear: left; font-size: 12px; line-height: 18px; height: 18px;
     margin: 0px;
 }
-.parcoords .row:nth-child(odd) { background: rgba(0,0,0,0.05); }
-.parcoords .header { font-weight: bold; }
-.parcoords .cell { float: left; overflow: hidden; white-space: nowrap; width: 100px; height: 18px; }
-.parcoords .col-0 { width: 180px; }
+.parcoords .row:nth-child(odd) {
+  background: rgba(0,0,0,0.05);
+}
+.parcoords .header {
+  font-weight: bold;
+}
+.parcoords .cell {
+  float: left;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100px; height: 18px;
+}
+.parcoords .col-0 {
+  width: 180px;
+}