Preselect filters (#752)

* Preselect filters in filter boxes according to the get parameters

* Use the JSX version in dashboard.html

* Use default parameters in ES6 and fix the indent

caravel/assets/javascripts/dashboard/Dashboard.jsx

@@ -2,6 +2,7 @@ var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
 var px = require('../modules/caravel.js');
 var d3 = require('d3');
+var urlLib = require('url');
 var showModal = require('../modules/utils.js').showModal;
 
 import React from 'react';
@@ -39,16 +40,26 @@ var Dashboard = function (dashboardData) {
       });
       this.slices = sliceObjects;
       this.refreshTimer = null;
+      this.loadPreSelectFilters();
       this.startPeriodicRender(0);
       this.bindResizeToWindowResize();
     },
-    setFilter: function (slice_id, col, vals) {
-      this.addFilter(slice_id, col, vals, false);
-    },
-    addFilter: function (slice_id, col, vals, merge) {
-      if (merge === undefined) {
-        merge = true;
+    loadPreSelectFilters: function () {
+      try {
+        var filters = JSON.parse(px.getParam("preselect_filters") || "{}");
+        for (var slice_id in filters) {
+          for (var col in filters[slice_id]) {
+            this.setFilter(slice_id, col, filters[slice_id][col], false, false);
+          }
+        }
+      } catch (e) {
+        console.error(e);
       }
+    },
+    setFilter: function (slice_id, col, vals, refresh) {
+      this.addFilter(slice_id, col, vals, false, refresh);
+    },
+    addFilter: function (slice_id, col, vals, merge = true, refresh = true) {
       if (!(slice_id in this.filters)) {
         this.filters[slice_id] = {};
       }
@@ -57,12 +68,22 @@ var Dashboard = function (dashboardData) {
       } else {
         this.filters[slice_id][col] = d3.merge([this.filters[slice_id][col], vals]);
       }
-      this.refreshExcept(slice_id);
+      if (refresh) {
+        this.refreshExcept(slice_id);
+      }
+      this.updateFilterParamsInUrl();
     },
     readFilters: function () {
       // Returns a list of human readable active filters
       return JSON.stringify(this.filters, null, 4);
     },
+    updateFilterParamsInUrl: function () {
+      var urlObj = urlLib.parse(location.href, true);
+      urlObj.query = urlObj.query || {};
+      urlObj.query.preselect_filters = this.readFilters();
+      urlObj.search = null;
+      history.pushState(urlObj.query, window.title, urlLib.format(urlObj));
+    },
     bindResizeToWindowResize: function () {
       var resizeTimer;
       var dash = this;
@@ -118,6 +139,7 @@ var Dashboard = function (dashboardData) {
     clearFilters: function (slice_id) {
       delete this.filters[slice_id];
       this.refreshExcept(slice_id);
+      this.updateFilterParamsInUrl();
     },
     removeFilter: function (slice_id, col, vals) {
       if (slice_id in this.filters) {
@@ -132,6 +154,7 @@ var Dashboard = function (dashboardData) {
         }
       }
       this.refreshExcept(slice_id);
+      this.updateFilterParamsInUrl();
     },
     getSlice: function (slice_id) {
       slice_id = parseInt(slice_id, 10);

caravel/assets/javascripts/modules/caravel.js

@@ -203,11 +203,13 @@ var px = (function () {
       container: container,
       container_id: container_id,
       selector: selector,
-      querystring: function () {
+      querystring: function (params) {
+        params = params || {};
         var parser = document.createElement('a');
         parser.href = data.json_endpoint;
         if (dashboard !== undefined) {
-          var flts = encodeURIComponent(JSON.stringify(dashboard.filters));
+          var flts = params.extraFilters === false ?
+              '' : encodeURIComponent(JSON.stringify(dashboard.filters));
           qrystr = parser.search + "&extra_filters=" + flts;
         } else if ($('#query').length === 0) {
           qrystr = parser.search;
@@ -226,10 +228,13 @@ var px = (function () {
         };
         return Mustache.render(s, context);
       },
-      jsonEndpoint: function () {
+      jsonEndpoint: function (params) {
+        params = params || {};
         var parser = document.createElement('a');
         parser.href = data.json_endpoint;
-        var endpoint = parser.pathname + this.querystring();
+        var endpoint = parser.pathname + this.querystring({
+          extraFilters: params.extraFilters
+        });
         endpoint += "&json=true";
         endpoint += "&force=" + this.force;
         return endpoint;
@@ -365,6 +370,11 @@ var px = (function () {
           dashboard.setFilter(slice_id, col, vals);
         }
       },
+      getFilters: function (col, vals) {
+        if (dashboard !== undefined) {
+          return dashboard.filters[slice_id];
+        }
+      },
       clearFilter: function () {
         if (dashboard !== undefined) {
           delete dashboard.clearFilter(slice_id);

caravel/assets/visualizations/filter_box.js

@@ -26,7 +26,12 @@ function filterBox(slice) {
       .append('div')
       .classed('padded', true);
 
-    $.getJSON(slice.jsonEndpoint(), function (payload) {
+    var preSelectDict = slice.getFilters() || {};
+    $.getJSON(slice.jsonEndpoint({
+        // filter box should ignore the filters
+        // otherwise there will be only a few options in the dropdown menu
+        extraFilters: false
+    }), function (payload) {
         var maxes = {};
 
         for (var filter in payload.data) {
@@ -55,6 +60,11 @@ function filterBox(slice) {
               formatResult: select2Formatter
             })
             .on('change', fltChanged);
+
+          var preSelect = preSelectDict[filter];
+          if (preSelect !== undefined) {
+           filtersObj[filter].select2('val', preSelect);
+          }
         }
         slice.done(payload);