feat: add filter on nodes according to labels

src/main.js

@@ -39,6 +39,15 @@ tabPhysical.addEventListener('click', () => {
     filterDiv.classList.add('hide');
     filterDiv.classList.remove('show');
   }
+  filterDiv = document.querySelector('#filter-nodes-wrapper');
+  if (filterDiv.classList.value.indexOf('hide') >= 0) {
+    filterDiv.classList.remove('hide');
+    filterDiv.classList.add('show');
+  }
+  else {
+    filterDiv.classList.add('hide');
+    filterDiv.classList.remove('show');
+  }
 });
 
 /* Enable polling */

src/utils/filter-nodes.js

@@ -0,0 +1,79 @@
+let filterNodesTimeout;
+
+function filterNodesTimeoutCallback() {
+  let newHistory = encodeURI(document.querySelector('#filter-nodes').value);
+  history.pushState({}, '', '?filterNodes=' + newHistory);
+}
+
+function filterNodesHistory() {
+  if (typeof filterNodesTimeout !== 'undefined') {
+    clearTimeout(filterNodesTimeout);
+  }
+  filterNodesTimeout = setTimeout(filterNodesTimeoutCallback, 500);
+}
+
+function filterNodesMap(element) {
+  let component = element.split('=');
+  this[component[0]] = component[1];
+  return this;
+}
+
+export function filterNodes() {
+
+  // Fetch DOM elements, break each word in input filter.
+  let filterNodesValues = document.querySelector('#filter-nodes').value.trim().split(' ');
+  let nodes = document.querySelectorAll('.node');
+
+  // Iterate through each node.
+  for (let i = 0; i < nodes.length; i++) {
+
+    // Get node title.
+    let spanText = nodes[i].querySelector('.labelarea').querySelector('span').innerHTML;
+
+    // Define hidden by default.
+    let hide = true;
+
+    // Iterate through each word, show if any are found.
+    for (let j = 0; j < filterNodesValues.length; j++) {
+      if (spanText.indexOf(filterNodesValues[j]) >= 0) {
+        hide = false;
+        break;
+      }
+    }
+
+    // Display or hide node, based on filter.
+    if (hide) {
+      nodes[i].classList.add('hide');
+      nodes[i].classList.remove('show');
+    }
+    else {
+      nodes[i].classList.remove('hide');
+      nodes[i].classList.add('show');
+    }
+  }
+  filterNodesHistory();
+}
+
+export function filterNodesOnLoad() {
+  let filterNodesInput = document.querySelector('#filter-nodes');
+  if (!filterNodesInput) {
+    setTimeout(filterNodesOnLoad, 1000);
+    return;
+  }
+  let search = decodeURIComponent(location.search);
+  if (!search) {
+    return;
+  }
+
+  let searchObj = search
+    .substring(1)
+    .split('&')
+    .map(filterNodesMap, {})[0];
+
+  if (searchObj.filterNodes) {
+    filterNodesInput.value = searchObj.filterNodes;
+    console.log('about to call filterNodes');
+    console.log(typeof filterNodes);
+    setTimeout(filterNodes, 2000);
+  }
+}

src/vis-physical/index.js

@@ -6,6 +6,7 @@ import _ from 'lodash';
 
 import { uuidRegExp, capitalize } from '../utils/helpers';
 import { filterContainers, filterOnLoad } from "../utils/filter-containers";
+import { filterNodes, filterNodesOnLoad } from "../utils/filter-nodes";
 
 var { innerWidth:W, innerHeight:H } = window;
 
@@ -26,6 +27,17 @@ let filterInput = filterDiv.append('input')
 filterInput.on('keyup', filterContainers);
 filterOnLoad();
 
+let filterNodesDiv = wrapper.append('div')
+    .attr('id', 'filter-nodes-wrapper');
+
+let filterNodesInput = filterNodesDiv.append('input')
+    .attr('id', 'filter-nodes')
+    .attr('placeholder', 'filter nodes on labels');
+
+filterNodesInput.on('keyup', filterNodes);
+filterNodesOnLoad();
+
+
 function removeVis() {
   cluster = wrapper.selectAll('.node-cluster')
   cluster.remove();

src/vis-physical/styles.less

@@ -230,18 +230,18 @@
   100% { opacity: 1; transform: scale(1); max-height: 500px; }
 }
 
-#vis-physical .container.hide {
+#vis-physical .container.hide, #vis-physical .node.hide {
   animation: hide .5s forwards;
 }
 
-#vis-physical .container.show {
+#vis-physical .container.show, #vis-physical .node.show {
   animation: show .5s forwards;
 }
 
-#filter-wrapper.hide {
+#filter-wrapper.hide, #filter-nodes-wrapper.hide {
   animation: hide .5s forwards;
 }
 
-#filter-wrapper.show {
+#filter-wrapper.show, #filter-nodes-wrapper.show {
   animation: show .5s forwards;
 }