fix: style and search

src/utils/filter-containers.js

@@ -2,7 +2,8 @@ let filterTimeout;
 
 function filterTimeoutCallback() {
   let newHistory = encodeURI(document.querySelector('#filter').value);
-  history.pushState({}, '', '?filter=' + newHistory);
+  let newHistoryNodes = encodeURI(document.querySelector('#filter-nodes').value);
+  history.pushState({}, '', '?filter=' + newHistory + '&filterNodes=' + newHistoryNodes);
 }
 
 function filterHistory() {

src/utils/filter-nodes.js

@@ -1,8 +1,9 @@
 let filterNodesTimeout;
 
 function filterNodesTimeoutCallback() {
-  let newHistory = encodeURI(document.querySelector('#filter-nodes').value);
-  history.pushState({}, '', '?filterNodes=' + newHistory);
+  let newHistory = encodeURI(document.querySelector('#filter').value);
+  let newHistoryNodes = encodeURI(document.querySelector('#filter-nodes').value);
+  history.pushState({}, '', '?filter=' + newHistory + '&filterNodes=' + newHistoryNodes);
 }
 
 function filterNodesHistory() {
@@ -28,15 +29,20 @@ export function filterNodes() {
   for (let i = 0; i < nodes.length; i++) {
 
     // Get node title.
-    let spanText = nodes[i].querySelector('.labelarea').querySelector('span').innerHTML;
+    let spanText = nodes[i].querySelector('.labelarea').querySelectorAll('span');
 
     // 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;
+      for(let k = 0; k < spanText.length; k++) {
+        if (spanText[k].innerHTML.indexOf(filterNodesValues[j]) >= 0) {
+          hide = false;
+          break;
+        }
+      }
+      if(!hide) {
         break;
       }
     }

src/vis-physical/styles.less

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