Currently, the Django project I am working on has, among other things, functionality to upload a "blackbox" file that gets converted to "datapoints" (list of Python dicts) as well as to filter through a blackbox to display only certain datapoints based on the filter. If a user wants to switch to an unfiltered view of the blackbox after having applied a filter, the user has to manually clear the filter that was typed into the filter form and apply the empty filter. If the user wants to return to the same filter as before, the user has to re-enter the filter. Both actions require re-querying the database. The filters typed in get converted to Django Q objects.
What I want now is to add functionality to quickly toggle between an unfiltered view of a blackbox and the most recently used filter. The important idea here is to make sure that this toggle does not needlessly query the database. I am unsure of how to proceed and whether this should be done purely on the client side (jQuery and such) or at least partially on the server-side (Django). The front end currently uses Clusterize.js to optimize scrolling through the datapoints of a blackbox. Below is a snippet of the front end code that displays the datapoints of a blackbox:
function display_filtered_blackbox(blackbox_id, filter, e) {
....
var url = "/api/bb/" + bb_id + "f/"
$.getJSON(url, function(datapoints){
// datapoints is a list of tuples, each tuple represents a datapoint: (substituted format string, datapoint id)
display_filtered_datapoints(datapoints, blackbox_id, url);
....
}
}
function display_filtered_datapoints(filtered_datapoints, blackbox_id, url) {
....
for(i in datapoints){
clusterize.append(["<div class=list-group-item style='max-height: 42px; white-space: nowrap;' onclick=showDatapointDetail("+bb_id +","+i+")>" + datapoints[i][0]+"</div>"]);
}
....
}
So how exactly should I go about making a quick filter toggle like this? I feel like I'd want to somehow cache the datapoints for a filter on the Django side to make the toggle fast, but I'm not sure how to proceed with this idea or expand on it.
UPDATE 4 January 2016:
What I have attempted so far is making global variables for the most recent filter used, the most recent url for the filter, and a boolean that gets toggled each time my toggle_filter function is called (all this is in the jQuery). The html for the button to toggle a filter on/off is as follows:
<button onclick='toggle_filter(this.form.bb_id.value)'> Toggle Filter </button>
When a user first applies a filter, the global boolean isFiltered is set to true. The global variables for the set of filtered datapoints and the filter url are also set. Below is what I have attempted for the actual toggle_filter function:
function toggle_filter(blackbox_id) {
// recent_filter_url, recent_filtered_points, and isFiltered are the aforementioned globals
alert("Calling toggle filter; \n" + recent_filter_url + "\n" + bb_id + "\n" + isFiltered);
if (isFiltered == true) {
console.log("Filter toggled on");
console.log(isFiltered);
clusterize.clear();
display_filtered_datapoints(recent_filtered_points, blackbox_id, recent_filtered_url);
isFiltered = false;
}
else {
console.log("Filter toggled off");
console.log(isFiltered);
clusterize.clear();
display_points(blackbox_id); // the function that displays all the datapoints of a blackbox, unfiltered
isFiltered = true;
}
}
The alert is there currently as a debug to make sure that the function is called when the button is clicked, as well as to make sure that the globals have the right values. Right after the alert, though, the site goes back to the home page of recently uploaded blackboxes. Sometimes an error message flashes in the console before the site redirects. In addition, the url changes from
localhost:8000
to
localhost:8000/?bb_id=42&new_filter=stream_type%3Dhf
in the browser, something not in urls.py. I feel like I'm messing up something simple, but I can't quite figure it out.
