Better filtering

panoramix/assets/javascripts/dashboard.js

@@ -29,8 +29,21 @@ var Dashboard = function (dashboardData) {
         });
         this.slices = sliceObjects;
     },
-    addFilter: function (slice_id, filters) {
-      this.filters[slice_id] = filters;
+    setFilter: function(slice_id, col, vals) {
+      console.log([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 () {
@@ -45,10 +58,24 @@ var Dashboard = function (dashboardData) {
         }
       });
     },
-    clearFilter: function (slice_id) {
+    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) {

panoramix/assets/javascripts/explore.js

@@ -55,7 +55,7 @@ function initExploreView() {
   function get_collapsed_fieldsets(){
     var collapsed_fieldsets = $("#collapsed_fieldsets").val();
 
-    if (collapsed_fieldsets != undefined && collapsed_fieldsets != "") {
+    if (collapsed_fieldsets !== undefined && collapsed_fieldsets !== "") {
       collapsed_fieldsets = collapsed_fieldsets.split('||');
     }
     else {
@@ -68,7 +68,7 @@ function initExploreView() {
     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").slideUp();
@@ -79,7 +79,7 @@ function initExploreView() {
 
       parent.addClass("collapsed");
       parent.find("span.collapser").text("[+]");
-      var index = collapsed_fieldsets.indexOf(fieldset);
+      index = collapsed_fieldsets.indexOf(fieldset);
       if (index === -1 && fieldset !== "" && fieldset !== undefined) {
         collapsed_fieldsets.push(fieldset);
       }
@@ -94,7 +94,7 @@ function initExploreView() {
       parent.find("span.collapser").text("[-]");
 
       // removing from array, js is overcomplicated
-      var index = collapsed_fieldsets.indexOf(fieldset);
+      index = collapsed_fieldsets.indexOf(fieldset);
       if (index !== -1) {
         collapsed_fieldsets.splice(index, 1);
       }
@@ -176,7 +176,7 @@ function initExploreView() {
   function set_filters(){
     for (var i = 1; i < 10; i++){
       var eq = px.getParam("flt_eq_" + i);
-      if (eq != ''){
+      if (eq !== ''){
         add_filter(i);
       }
     }
@@ -187,7 +187,7 @@ function initExploreView() {
     var cp = $("#flt0").clone();
     $(cp).appendTo("#filters");
     $(cp).show();
-    if (i != undefined){
+    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));
@@ -210,7 +210,7 @@ function initExploreView() {
   $("#plus").click(add_filter);
   $("#btn_save").click(function () {
     var slice_name = prompt("Name your slice!");
-    if (slice_name != "" && slice_name != null) {
+    if (slice_name !== "" && slice_name !== null) {
       $("#slice_name").val(slice_name);
       prepForm();
       $("#action").val("save");

panoramix/assets/javascripts/modules/panoramix.js

@@ -216,10 +216,18 @@ var px = (function() {
         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);

panoramix/assets/javascripts/sql.js

@@ -18,7 +18,7 @@ $(document).ready(function() {
   function initSqlEditorView() {
     var database_id = $('#database_id').val();
     var editor = ace.edit("sql");
-    editor.$blockScrolling = Infinity
+    editor.$blockScrolling = Infinity;
     editor.getSession().setUseWrapMode(true);
 
     var textarea = $('#sql').hide();

panoramix/assets/visualizations/filter_box.js

@@ -10,15 +10,15 @@ function filterBox(slice) {
   var d3token = d3.select(slice.selector);
 
   var fltChanged = function() {
-    var filters = []
     for (var filter in filtersObj) {
       var obj = filtersObj[filter];
       var val = obj.val();
+      var vals = [];
       if (val !== '') {
-        filters.push([filter, val.split(',')]);
+        vals = val.split(',');
       }
+      slice.setFilter(filter, vals);
     }
-    slice.addFilter(filters);
   }
 
   var refresh = function() {

panoramix/assets/visualizations/nvd3_vis.js

@@ -185,6 +185,7 @@ function nvd3Vis(slice) {
           return px.color.category21(d[colorKey]);
         });
 
+        d3.select(slice.selector).html('');
         d3.select(slice.selector).append("svg")
           .datum(payload.data)
           .transition().duration(500)

panoramix/assets/visualizations/table.js

@@ -66,12 +66,11 @@ function tableVis(slice) {
           if(!d.isMetric){
             var td = d3.select(this);
             if (td.classed('filtered')){
-              slice.clearFilter(d.col, [d.val]);
-              table.selectAll('.filtered').classed('filtered', false);
+              slice.removeFilter(d.col, [d.val]);
+              d3.select(this).classed('filtered', false);
             } else {
-              table.selectAll('.filtered').classed('filtered', false);
               d3.select(this).classed('filtered', true);
-              slice.addFilter([[d.col, [d.val]]]);
+              slice.addFilter(d.col, [d.val]);
             }
           }
        })

panoramix/templates/panoramix/featured.html

@@ -24,7 +24,7 @@ <h4>{{ dataset.table_name }}</h4>
                 </div>
               </td>
               <td class="small_table">{{ dataset.database }}</td>
-              <td class="small_table">{{ dataset.owner }}</td>
+              <td class="small_table">{{ dataset.owner or '' }}</td>
               <td class="small_table"><a class="btn btn-default" href="{{ dataset.default_endpoint }}"><i class='fa fa-line-chart'/></a></td>
          </tr>
       {% endfor %}

panoramix/viz.py

@@ -156,15 +156,13 @@ def query_filters(self):
                 filters.append((col, op, eq))
 
         # Extra filters (coming from dashboard)
-        extra_filters = form_data.get('extra_filters', [])
+        extra_filters = form_data.get('extra_filters')
         if extra_filters:
             extra_filters = json.loads(extra_filters)
             for slice_filters in extra_filters.values():
-                if slice_filters:
-                    for col, vals in slice_filters:
-                        if col and vals:
-                            filters += [(col, 'in', ",".join(vals))]
-
+                for col, vals in slice_filters.items():
+                    if col and vals:
+                        filters += [(col, 'in', ",".join(vals))]
         return filters
 
     def query_obj(self):