Center node cluster div and add search feature to containers

src/main.js

@@ -29,6 +29,18 @@ tabPhysical.addEventListener('click',() => {
   document.body.className = 'tab2';
 });
 
+tabPhysical.addEventListener('click', () => {
+  let filterDiv = document.querySelector('#filter-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 */
 function reload(){
   provider.reload();

src/utils/filter-containers.js

@@ -0,0 +1,34 @@
+export function filterContainers() {
+
+  // Fetch DOM elements, break each word in input filter.
+  let filterValues = document.querySelector('#filter').value.trim().split(' ');
+  let containers = document.querySelectorAll('.container');
+
+  // Iterate through each container.
+  for (let i = 0; i < containers.length; i++) {
+
+    // Get container title.
+    let spanText = containers[i].querySelector('span').innerHTML;
+
+    // Define hidden by default.
+    let hide = true;
+
+    // Iterate through each word, show if any are found.
+    for (let j = 0; j < filterValues.length; j++) {
+      if (spanText.indexOf(filterValues[j]) >= 0) {
+        hide = false;
+        break;
+      }
+    }
+
+    // Display or hide container, based on filter.
+    if (hide) {
+      containers[i].classList.add('hide');
+      containers[i].classList.remove('show');
+    }
+    else {
+      containers[i].classList.remove('hide');
+      containers[i].classList.add('show');
+    }
+  }
+}

src/vis-physical/index.js

@@ -5,6 +5,7 @@ import d3 from 'd3';
 import _ from 'lodash';
 
 import { uuidRegExp, capitalize } from '../utils/helpers';
+import { filterContainers} from "../utils/filter-containers";
 
 var { innerWidth:W, innerHeight:H } = window;
 
@@ -15,6 +16,15 @@ var vis = d3.select('#app')
 var wrapper = vis.append('div')
     .classed('wrapper', true);
 
+let filterDiv = wrapper.append('div')
+    .attr('id', 'filter-wrapper');
+
+let filterInput = filterDiv.append('input')
+    .attr('id', 'filter')
+    .attr('placeholder', 'filter containers');
+
+filterInput.on('keyup', filterContainers);
+
 function removeVis() {
   cluster = wrapper.selectAll('.node-cluster')
   cluster.remove();

src/vis-physical/styles.less

@@ -86,7 +86,8 @@
   color: @gray-primary;
 
   .node-cluster {
-    float: left;
+    //float: left;
+    display: inline-block;
     padding: 15px;
     min-width: 80px;
     .clear();
@@ -217,3 +218,28 @@
   }
 }
 
+@keyframes hide {
+    0% { opacity: 1; transform: scale(1); max-height: 500px; }
+  100% { opacity: 0; transform: scale(0); max-height: 0; margin: 0; }
+}
+
+@keyframes show {
+    0% { opacity: 0; transform: scale(0); max-height: 0; margin: 0; }
+  100% { opacity: 1; transform: scale(1); max-height: 500px; }
+}
+
+#vis-physical .container.hide {
+  animation: hide .5s forwards;
+}
+
+#vis-physical .container.show {
+  animation: show .5s forwards;
+}
+
+#filter-wrapper.hide {
+  animation: hide .5s forwards;
+}
+
+#filter-wrapper.show {
+  animation: show .5s forwards;
+}