Some major refactoring

panoramix/static/panoramix.js

@@ -5,7 +5,8 @@ var px = (function() {
   var Slice = function(data, dashboard){
     var timer;
     var token = $('#' + data.token);
-    var selector = '#' + data.token + ' .slice_container';
+    var container_id = data.token + '_con';
+    var selector = '#' + container_id;
     var container = $(selector);
     var slice_id = data.form_data;
     var name = data['viz_name'];
@@ -31,12 +32,14 @@ var px = (function() {
         token.find("img.loading").hide();
         var err = '<div class="alert alert-danger">' + msg  + '</div>';
         container.html(err);
+        container.show();
         $('#timer').removeClass('btn-warning');
         $('span.query').removeClass('disabled');
         $('#timer').addClass('btn-danger');
       },
       data: data,
       container: container,
+      container_id: container_id,
       selector: selector,
       render: function() {
         token.find("img.loading").show();

panoramix/static/widgets/viz_directed_force.js

@@ -3,10 +3,9 @@ Modified from http://bl.ocks.org/d3noob/5141278
 */
 
 function viz_directed_force(slice) {
-  var token = d3.select('#' + slice.data.token);
-  var xy = token.select('#chart').node().getBoundingClientRect();
-  var width = xy.width;
-  var height = xy.height - 25;
+  var div = d3.select(slice.selector);
+  var width = slice.container.width();
+  var height = slice.container.height() - 25;
   var radius = Math.min(width, height) / 2;
   var link_length = slice.data.form_data['link_length'];
   if (link_length === undefined){
@@ -59,7 +58,7 @@ function viz_directed_force(slice) {
         .on("tick", tick)
         .start();
 
-    var svg = token.select("#chart").append("svg")
+    var svg = div.append("svg")
         .attr("width", width)
         .attr("height", height);
 

panoramix/static/widgets/viz_pivot_table.css

@@ -1,3 +1,3 @@
-li.widget.pivot_table div.token {
+li.widget.pivot_table div.slice_container {
     overflow: auto;
 }

panoramix/static/widgets/viz_pivot_table.js

@@ -1,22 +1,19 @@
 px.registerViz('pivot_table', function(slice) {
-  var token_name = slice.data['token'];
-  var token = $('#' + token_name);
+  container = slice.container;
   var form_data = slice.data.form_data;
 
   function refresh() {
     $.getJSON(slice.data.json_endpoint, function(json){
-      token.html(json.data);
+      container.html(json.data);
       if (form_data.groupby.length == 1){
-        var table = token.find('table').DataTable({
+        var table = container.find('table').DataTable({
           paging: false,
           searching: false,
         });
         table.column('-1').order( 'desc' ).draw();
       }
-      token.show();
       slice.done(json);
     }).fail(function(xhr){
-        token.show();
         slice.error(xhr.responseText);
     });
   }

panoramix/static/widgets/viz_sankey.css

@@ -1,28 +1,21 @@
-#chart {
-  height: 100%;
-}
-div.token {
-  height: 100%;
-}
-
-.node rect {
+.sankey .node rect {
   cursor: move;
   fill-opacity: .9;
   shape-rendering: crispEdges;
 }
 
-.node text {
+.sankey .node text {
   pointer-events: none;
   text-shadow: 0 1px 0 #fff;
 }
 
-.link {
+.sankey .link {
   fill: none;
   stroke: #000;
   stroke-opacity: .2;
 }
 
-.link:hover {
+.sankey .link:hover {
   stroke-opacity: .5;
 }
 

panoramix/static/widgets/viz_sankey.js

@@ -1,20 +1,18 @@
 function viz_sankey(slice) {
-    var token = d3.select('#' + slice.data.token);
-    var div = token.select("#chart");
-    var xy = div.node().getBoundingClientRect();
-    var width = xy.width;
-    var height = xy.height - 25;
+    var div = d3.select(slice.selector);
 
     var render = function() {
-        var margin = {top: 1, right: 1, bottom: 6, left: 1};
+        var width = slice.container.width();
+        var height = slice.container.height() - 25;
+        var margin = {top: 5, right: 5, bottom: 5, left: 5};
         width = width - margin.left - margin.right;
         height = height - margin.top - margin.bottom;
 
         var formatNumber = d3.format(",.0f"),
             format = function(d) { return formatNumber(d) + " TWh"; },
             color = d3.scale.category20();
 
-        var svg = token.select("#chart").append("svg")
+        var svg = div.append("svg")
             .attr("width", width + margin.left + margin.right)
             .attr("height", height + margin.top + margin.bottom)
           .append("g")
@@ -95,7 +93,6 @@ function viz_sankey(slice) {
             sankey.relayout();
             link.attr("d", path);
           }
-            token.select("img.loading").remove();
           slice.done(json);
         });
     }

panoramix/static/widgets/viz_sunburst.css

@@ -1,32 +1,19 @@
-#sidebar {
-  float: right;
-  width: 100px;
-}
-
-text.middle{
+.sunburst text.middle{
     text-anchor: middle;
 }
 
-#sequence {
+.sunburst #sequence {
 }
 
-#legend {
+.sunburst #legend {
   padding: 10px 0 0 3px;
 }
 
-#sequence text, #legend text {
+.sunburst #sequence text, #legend text {
   font-weight: 600;
   fill: #fff;
 }
 
-.sunburst #chart {
-  height: 100%;
-}
-
-.sunburst div.token {
-  height: 100%;
-}
-
 .sunburst path {
   stroke: #fff;
 }

panoramix/static/widgets/viz_sunburst.js

@@ -3,7 +3,7 @@ Modified from http://bl.ocks.org/kerryrodden/7090426
 */
 
 function viz_sunburst(slice) {
-  var token = d3.select('#' + slice.data.token);
+  var container = d3.select(slice.selector);
   var render = function() {
     // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
     var b = {
@@ -13,13 +13,11 @@ function viz_sunburst(slice) {
 
     // Total size of all segments; we set this later, after loading the data.
     var totalSize = 0;
-    var div = token.select("#chart");
-    var xy = div.node().getBoundingClientRect();
-    var width = xy.width;
-    var height = xy.height - 25;
+    var width = slice.container.width();
+    var height = slice.container.height() - 25;
     var radius = Math.min(width, height) / 2;
 
-    var vis = div.append("svg:svg")
+    var vis = container.append("svg:svg")
         .attr("width", width)
         .attr("height", height)
         .append("svg:g")
@@ -84,7 +82,7 @@ function viz_sunburst(slice) {
 
 
       // Add the mouseleave handler to the bounding circle.
-      token.select("#container").on("mouseleave", mouseleave);
+      container.select("#container").on("mouseleave", mouseleave);
 
       // Get total size of the tree = value of root node from partition.
       totalSize = path.node().__data__.value;
@@ -117,12 +115,12 @@ function viz_sunburst(slice) {
       updateBreadcrumbs(sequenceArray, percentageString);
 
       // Fade all the segments.
-      token.selectAll("path")
+      container.selectAll("path")
           .style("stroke-width", "1px")
           .style("opacity", 0.3);
 
       // Then highlight only those that are an ancestor of the current segment.
-      token.selectAll("path")
+      container.selectAll("path")
           .filter(function(node) {
             return (sequenceArray.indexOf(node) >= 0);
           })
@@ -135,16 +133,16 @@ function viz_sunburst(slice) {
     function mouseleave(d) {
 
       // Hide the breadcrumb trail
-      token.select("#trail")
+      container.select("#trail")
           .style("visibility", "hidden");
       gMiddleText.selectAll("*").remove();
 
       // Deactivate all segments during transition.
-      token.selectAll("path").on("mouseenter", null);
+      container.selectAll("path").on("mouseenter", null);
       //gMiddleText.selectAll("*").remove();
 
       // Transition each segment to full opacity and then reactivate it.
-      token.selectAll("path")
+      container.selectAll("path")
           .transition()
           .duration(200)
           .style("opacity", 1)

panoramix/static/widgets/viz_wordcloud.js

@@ -1,9 +1,8 @@
 px.registerViz('word_cloud', function(slice) {
   var slice = slice;
-  var token = d3.select(slice.selector);
+  var chart = d3.select(slice.selector);
   console.log(slice.data.json_endpoint);
   function refresh() {
-    return '';
     d3.json(slice.data.json_endpoint, function(error, json) {
       if (error != null){
         slice.error(error.responseText);
@@ -24,7 +23,6 @@ px.registerViz('word_cloud', function(slice) {
       else {
         var f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30; };
       }
-      console.log('ici');
       var size = [slice.container.width(), slice.container.height() - 25];
 
       scale = d3.scale.linear()
@@ -41,9 +39,9 @@ px.registerViz('word_cloud', function(slice) {
         .on("end", draw);
       layout.start();
       function draw(words) {
-        token.selectAll("*").remove();
+        chart.selectAll("*").remove();
 
-        token.append("svg")
+        chart.append("svg")
             .attr("width", layout.size()[0])
             .attr("height", layout.size()[1])
           .append("g")

panoramix/static/widgets/viz_world_map.js

@@ -3,13 +3,9 @@
 */
 
 function viz_world_map(slice) {
-    var token = d3.select('#' + slice.data.token);
     var render = function() {
-    // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
-    var div = token;
-    var xy = div.node().getBoundingClientRect();
-    var width = xy.width;
-    var height = xy.height - 25;
+    var container = slice.container;
+    var div = d3.select(slice.selector);
 
     d3.json(slice.data.json_endpoint, function(error, json){
 
@@ -35,8 +31,9 @@ function viz_world_map(slice) {
         d[country.country] = country;
       }
       f = d3.format('.3s');
+      container.show();
       var map = new Datamap({
-        element: document.getElementById(slice.data.token),
+        element: slice.container.get(0),
         data: json.data,
         fills: {
           defaultFill: 'grey'
@@ -77,7 +74,7 @@ function viz_world_map(slice) {
       map.updateChoropleth(d);
       if(slice.data.form_data.show_bubbles){
         map.bubbles(json.data);
-        token.selectAll("circle.datamaps-bubble").style('fill', '#005a63');
+        div.selectAll("circle.datamaps-bubble").style('fill', '#005a63');
       }
       slice.done(json);
     });

panoramix/templates/panoramix/dashboard.html

@@ -111,7 +111,7 @@ <h2>
               </table>
               <div id="{{ viz.token }}" class="token" style="height: 100%;">
                 <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
-                <div class="slice_container" style="height: 100%; width: 100%;">{{ viz_macros.viz_html(viz) }}</div>
+                <div class="slice_container" id="{{ viz.token }}_con" style="height: 100%; width: 100%;">{{ viz_macros.viz_html(viz) }}</div>
               </div>
           </li>
         {% endfor %}

panoramix/templates/panoramix/explore.html

@@ -150,7 +150,7 @@
               <div class="alert alert-warning">{{ viz.warning_msg }}</div>
             {% endif %}
           {% endblock %}
-          <div class="slice_container" style="height: 100%; width: 100%">{{ viz_macros.viz_html(viz) }}</div>
+          <div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%">{{ viz_macros.viz_html(viz) }}</div>
         </div>
       </div>
     </div>

panoramix/templates/panoramix/viz_markup.html

@@ -1,4 +1,5 @@
 {% macro viz_html(viz) %}
+{{ viz.rendered()|safe }}
 {% endmacro %}
 
 {% macro viz_js(viz) %}

panoramix/viz.py

@@ -939,10 +939,17 @@ class SankeyViz(BaseViz):
             'row_limit',
         )
     },)
-    form_overrides = {}
+    form_overrides = {
+        'groupby': {
+            'label': 'Source / Target',
+            'description': "Choose a source and a target",
+        },
+    }
 
     def query_obj(self):
         qry = super(SankeyViz, self).query_obj()
+        if len(qry['groupby']) != 2:
+            raise Exception("Pick exactly 2 columns as [Source / Target]")
         qry['metrics'] = [
             self.form_data['metric']]
         return qry