Fixing the filters

panoramix/static/panoramix.js

@@ -101,6 +101,11 @@ var px = (function() {
       addFilter: function(slice_id, filters) {
         this.filters[slice_id] = filters;
         this.refreshExcept(slice_id);
+        console.log(this.filters);
+      },
+      readFilters: function() {
+        // Returns a list of human readable active filters
+        return JSON.stringify(this.filters, null, 4);
       },
       refreshExcept: function(slice_id) {
         this.slices.forEach(function(slice){

panoramix/static/widgets/viz_filter_box.js

@@ -1,23 +1,22 @@
 px.registerViz('filter_box', function(slice) {
   var slice = slice;
+  var filtersObj = {};
   d3token = d3.select(slice.selector);
 
   var fltChanged = function() {
     filters = []
-    d3token.selectAll('select.select2_box_filter').each(function(){
-      val = $(this).val();
-      name = $(this).attr('name');
-      if (val !== null && val !== undefined){
-        if (typeof val === 'string')
-          val = [val];
-        filters.push([name, val]);
+    for(flt in filtersObj) {
+      obj = filtersObj[flt];
+      val = obj.val()
+      if(val !== ''){
+        filters.push([flt, val.split(',')]);
       }
-    });
+    }
     slice.addFilter(filters);
   }
 
   var refresh = function() {
-      $('#code').attr('rows', '15')
+      d3token.selectAll("*").remove();
       var container = d3token
         .append('div')
         .classed('padded', true);
@@ -37,7 +36,7 @@ px.registerViz('filter_box', function(slice) {
             .attr('multiple', '')
             .attr('id', id);
 
-          $('#' + id).select2({
+          filtersObj[filter] = $('#' + id).select2({
             placeholder: "Select [" + filter + ']',
             containment: 'parent',
             dropdownAutoWidth : true,

panoramix/templates/panoramix/dashboard.html

@@ -54,6 +54,9 @@ body {
       </div>
       <div class="col-md-2">
         <div class="btn-group pull-right" role="group" >
+          <button type="button" id="filters" class="btn btn-default" data-toggle="tooltip" title="View the list of active filters">
+            <i class="fa fa-filter"></i>
+          </button>
           <button type="button" id="css" class="btn btn-default" data-toggle="modal" data-target="#css_modal">
             <i class="fa fa-code"></i>
           </button>
@@ -88,6 +91,7 @@ body {
                       <nobr class="icons">
                         <a><i class="fa fa-arrows drag"></i></a>
                         <a class="refresh"><i class="fa fa-refresh"></i></a>
+                        <a class="bug" data-slice_id="{{ slice.id }}" data-toggle="tooltip" title="console.log(this.slice);"><i class="fa fa-bug"></i></a>
                       </nobr>
                     </td>
                     <td>
@@ -124,6 +128,12 @@ body {
       $(document).ready(function() {
         px.initDashboardView();
         var dashboard = px.Dashboard({{ dashboard.id }});
+        $('#filters').click( function(){
+          alert(dashboard.readFilters());
+        });
+        $('a.bug').click( function(){
+          console.log(dashboard.getSlice($(this).data('slice_id')));
+        });
       });
     </script>
 {% endblock %}