From 8cfe9e96b86533ff5073cd1a3980e9646463a2b9 Mon Sep 17 00:00:00 2001 From: x4base Date: Wed, 13 Jul 2016 10:23:43 -0500 Subject: [PATCH] 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 --- .../javascripts/dashboard/Dashboard.jsx | 37 +++++++++++++++---- caravel/assets/javascripts/modules/caravel.js | 18 +++++++-- caravel/assets/visualizations/filter_box.js | 12 +++++- 3 files changed, 55 insertions(+), 12 deletions(-) diff --git a/caravel/assets/javascripts/dashboard/Dashboard.jsx b/caravel/assets/javascripts/dashboard/Dashboard.jsx index 1d2cec105e..c04f58bc68 100644 --- a/caravel/assets/javascripts/dashboard/Dashboard.jsx +++ b/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); diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js index f70c26f194..e96a1e2bcc 100644 --- a/caravel/assets/javascripts/modules/caravel.js +++ b/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); diff --git a/caravel/assets/visualizations/filter_box.js b/caravel/assets/visualizations/filter_box.js index 754216d0e6..4e4b030ed7 100644 --- a/caravel/assets/visualizations/filter_box.js +++ b/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);