Sync filter options with URL parameter

src/utils/filter-containers.js

@@ -1,3 +1,23 @@
+let filterTimeout;
+
+function filterTimeoutCallback() {
+  let newHistory = encodeURI(document.querySelector('#filter').value);
+  history.pushState({}, '', '?filter=' + newHistory);
+}
+
+function filterHistory() {
+  if (typeof filterTimeout !== 'undefined') {
+    clearTimeout(filterTimeout);
+  }
+  filterTimeout = setTimeout(filterTimeoutCallback, 500);
+}
+
+function filterMap(element) {
+  let component = element.split('=');
+  this[component[0]] = component[1];
+  return this;
+}
+
 export function filterContainers() {
 
   // Fetch DOM elements, break each word in input filter.
@@ -31,4 +51,29 @@ export function filterContainers() {
       containers[i].classList.add('show');
     }
   }
+  filterHistory();
+}
+
+export function filterOnLoad() {
+  let filterInput = document.querySelector('#filter');
+  if (!filterInput) {
+    setTimeout(filterOnLoad, 1000);
+    return;
+  }
+  let search = decodeURIComponent(location.search);
+  if (!search) {
+    return;
+  }
+
+  let searchObj = search
+    .substring(1)
+    .split('&')
+    .map(filterMap, {})[0];
+
+  if (searchObj.filter) {
+    filterInput.value = searchObj.filter;
+    console.log('about to call filterContainers');
+    console.log(typeof filterContainers);
+    setTimeout(filterContainers, 2000);
+  }
 }

src/utils/request.js

@@ -1,7 +1,7 @@
 import request from 'superagent';
 import _ from 'lodash';
 
-var host = window.location.href + 'apis/';
+var host = window.location.href.split('?')[0].split('#')[0] + 'apis/';
 var wsHost = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + window.location.pathname;
 
 function asPromise(fn){

src/vis-physical/index.js

@@ -5,7 +5,7 @@ import d3 from 'd3';
 import _ from 'lodash';
 
 import { uuidRegExp, capitalize } from '../utils/helpers';
-import { filterContainers} from "../utils/filter-containers";
+import { filterContainers, filterOnLoad } from "../utils/filter-containers";
 
 var { innerWidth:W, innerHeight:H } = window;
 
@@ -24,6 +24,7 @@ let filterInput = filterDiv.append('input')
     .attr('placeholder', 'filter containers');
 
 filterInput.on('keyup', filterContainers);
+filterOnLoad();
 
 function removeVis() {
   cluster = wrapper.selectAll('.node-cluster')