Merge pull request #109 from mistercrunch/hash_change

Getting browser history to work on the explore view

.gitignore

@@ -2,6 +2,7 @@
 .DS_Store
 .coverage
 _build
+_static
 panoramix/bin/panoramixc
 build
 *.db

TODO.md

@@ -2,6 +2,7 @@
 List of TODO items for Panoramix
 
 ## Features
+* **URL shortner**
 * **Dashboard URL filters:** `{dash_url}#fltin__fieldname__value1,value2`
 * **Browser history in explore.html:** use location.hash to manage query history
 * **Default slice:** choose a default slice for the dataset instead of default endpoint

docs/img

@@ -0,0 +1 @@
+../panoramix/static/img/

panoramix/static/panoramix.js

@@ -19,11 +19,19 @@ var px = (function() {
         $('#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 = {
-      jsonEndpoint: function() {
+      data: data,
+      container: container,
+      container_id: container_id,
+      selector: selector,
+      querystring: function(){
         var parser = document.createElement('a');
         parser.href = data.json_endpoint;
-        // Shallow copy
         if (dashboard !== undefined){
           qrystr = parser.search + "&extra_filters=" + JSON.stringify(dashboard.filters);
         }
@@ -33,7 +41,12 @@ var px = (function() {
         else {
           qrystr = '?' + $('#query').serialize();
         }
-        var endpoint = parser.pathname + qrystr + "&json=true";
+        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) {
@@ -45,21 +58,21 @@ var px = (function() {
         $('#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) {
-        clearInterval(timer);
         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');
+        always(data);
       },
-      data: data,
-      container: container,
-      container_id: container_id,
-      selector: selector,
       width: function(){
         return token.width();
       },
@@ -67,6 +80,7 @@ var px = (function() {
         return token.height();
       },
       render: function() {
+        $('.btn-group.results span').attr('disabled','disabled');
         token.find("img.loading").show();
         container.hide();
         container.html('');
@@ -75,9 +89,6 @@ var px = (function() {
         $('#timer').removeClass('btn-danger btn-success');
         $('#timer').addClass('btn-warning');
         viz.render();
-        $('#json').click(function(){window.location=slice.jsonEndpoint()});
-        $('#standalone').click(function(){window.location=slice.data.standalone_endpoint});
-        $('#csv').click(function(){window.location=slice.data.csv_endpoint});
       },
       resize: function() {
         token.find("img.loading").show();
@@ -146,11 +157,62 @@ var px = (function() {
   }
 
   function registerViz(name, initViz) {
-
     visualizations[name] = initViz;
   }
 
   function initExploreView() {
+
+    function get_collapsed_fieldsets(){
+        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();
+        fieldset = parent.find(".legend_label").text();
+        collapsed_fieldsets = get_collapsed_fieldsets();
+
+        if (!parent.hasClass("collapsed")){
+          if (animation)
+            parent.find(".fieldset_content").slideUp();
+          else
+            parent.find(".fieldset_content").hide();
+
+          parent.addClass("collapsed");
+          parent.find("span.collapser").text("[+]");
+          var index = collapsed_fieldsets.indexOf(fieldset);
+          if (index === -1 && fieldset !== "" && fieldset !== undefined) {
+            collapsed_fieldsets.push(fieldset);
+          }
+        } else {
+          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
+          var index = collapsed_fieldsets.indexOf(fieldset);
+          if (index !== -1) {
+            collapsed_fieldsets.splice(index, 1);
+          }
+        }
+        $("#collapsed_fieldsets").val(collapsed_fieldsets.join("||"));
+    }
+
+    $('legend').click(function () {
+      toggle_fieldset($(this), true);
+    });
+    $("#viz_type").change(function() {$("#query").submit();});
+    collapsed_fieldsets = get_collapsed_fieldsets();
+    for(var i=0; i < collapsed_fieldsets.length; i++){
+      toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false);
+    }
     function getParam(name) {
       name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
       var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
@@ -205,10 +267,18 @@ var px = (function() {
         i++;
       });
     }
+    $(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();
+    });
 
     function druidify(){
       prepForm();
       $('div.alert').remove();
+      history.pushState({}, document.title, slice.querystring());
       slice.render();
     }
 

panoramix/static/widgets/viz_table.js

@@ -44,7 +44,8 @@ px.registerViz('table', function(slice) {
           }
        })
        .attr('title', function(d){
-         return fC(d.val);
+         if (!isNaN(d.val))
+           return fC(d.val);
        })
        .attr('data-sort', function(d){
           if (d.isMetric)

panoramix/templates/panoramix/explore.html

@@ -17,6 +17,8 @@
   </div>
 {% endmacro %}
 
+{% block title %}TEST{% endblock %}
+
 <div class="datasource">
   <form id="query" method="GET" style="display: none;">
     <div class="header">
@@ -35,7 +37,7 @@
             </a>
         </span>
         <span>{{ form.get_field("viz_type")(class_="select2") }}</span>
-        <div class="btn-group pull-right" role="group">
+        <div class="btn-group results pull-right" role="group">
           <span class="btn btn-default" id="standalone" title="Standalone version, use to embed anywhere" data-toggle="tooltip">
             <i class="fa fa-code"></i>
           </span>
@@ -206,67 +208,10 @@
     var slice = px.Slice(data);
     $('.slice').data('slice', slice);
     slice.render();
+  });
 
-    function get_collapsed_fieldsets(){
-        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();
-        fieldset = parent.find(".legend_label").text();
-        collapsed_fieldsets = get_collapsed_fieldsets();
-
-        if (!parent.hasClass("collapsed")){
-          if (animation)
-            parent.find(".fieldset_content").slideUp();
-          else
-            parent.find(".fieldset_content").hide();
-
-          parent.addClass("collapsed");
-          parent.find("span.collapser").text("[+]");
-          var index = collapsed_fieldsets.indexOf(fieldset);
-          if (index === -1 && fieldset !== "" && fieldset !== undefined) {
-            collapsed_fieldsets.push(fieldset);
-          }
-        } else {
-          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
-          var index = collapsed_fieldsets.indexOf(fieldset);
-          if (index !== -1) {
-            collapsed_fieldsets.splice(index, 1);
-          }
-        }
-        $("#collapsed_fieldsets").val(collapsed_fieldsets.join("||"));
-    }
-
-    $('legend').click(function () {
-      toggle_fieldset($(this), true);
-    });
-    $('#json').click(function () {
-      window.location = '{{ viz.json_endpoint | safe }}';
-    });
-    $('#csv').click(function () {
-      window.location = '{{ viz.csv_endpoint | safe }}';
-    });
-    $('#standalone').click(function () {
-      window.location = '{{ viz.standalone_endpoint | safe }}';
-    });
-    $("#viz_type").change(function() {$("#query").submit();});
-    collapsed_fieldsets = get_collapsed_fieldsets();
-    for(var i=0; i < collapsed_fieldsets.length; i++){
-      toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false);
-    }
+  $(window).on('hashchange', function() {
+    console.log("change occurred");
   });
 </script>
 {% endblock %}

panoramix/viz.py

@@ -245,6 +245,8 @@ class BaseViz(object):
         content = {
             'viz_name': self.viz_type,
             'json_endpoint': self.json_endpoint,
+            'csv_endpoint': self.csv_endpoint,
+            'standalone_endpoint': self.standalone_endpoint,
             'token': self.token,
             'form_data': self.form_data,
         }