Added a filter input field to the bubble graph visualization to show only the bubbles of interest

resources/views/app/bubble.blade.php

@@ -3,7 +3,16 @@
 @section('content')
 
 <h1 class="text-center">{{ $label }}</h1>
-<div style="width: 100%; height: 800px" id="svg-container">
+<div style="text-align:center;">
+<p>
+        <input type="text" id="filterInput" placeholder="Filter shown data...." size="100%">
+        <button class="btn btn-primary" onclick="FilterBubbleGraph()"><i class="fa fa-play"></i>Filter</button>
+        <button class="btn btn-primary" onclick="ResetBubbleGraph()"><i class="fa fa-minus-circle"></i>Reset</button>
+</p>
+</div>
+
+<div style="width: 100%; height: 800px;" id="svg-container">
+
 </div>
 
 <div class="text-muted bottom-right">
@@ -29,8 +38,26 @@
     window.addEventListener('DOMContentLoaded', function() {
         var container = document.getElementById("svg-container");
         var label = "{{ $label }}";
-        drawBubbleGraph(label, container);
-        @include('scripts.bubble-script')
+        var filter_field = "";
+        drawBubbleGraph(label, container, filter_field);
     });
+
+    function FilterBubbleGraph() {
+        var filter_field = document.getElementById('filterInput').value;
+        //console.log(filter_field);
+        var container = document.getElementById("svg-container");
+        var label = "{{ $label }}";
+        drawBubbleGraph(label, container, filter_field);
+    }
+
+    function ResetBubbleGraph() {
+        document.getElementById('filterInput').value = null;
+        var container = document.getElementById("svg-container");
+        var label = "{{ $label }}";
+        drawBubbleGraph(label, container, "");
+
+    }
+    @include('scripts.bubble-script')
+    @include('scripts.helper-functions')
 </script>
 @endsection
\ No newline at end of file

resources/views/app/dashboard.blade.php

@@ -186,7 +186,7 @@
             clearInterval(refresh_interval_id);
             var reload_countdown = 300;
             //draw the Bubble graph for the given agent in the given container
-            drawBubbleGraph(name, container);
+            drawBubbleGraph(name, container, "");
             //set the refresh interval
             var refresh = setInterval(function() {
                 reload_countdown -= 1;
@@ -195,7 +195,7 @@
                 if (reload_countdown === 0) {
                     //console.log('reload...');
                     reload_countdown = 300;
-                    drawBubbleGraph(name, container);
+                    drawBubbleGraph(name, container, "");
                 }
             }, 1000);
             //save the ID of the refresh Interval, to be cleared if new bubble graph is drawn

resources/views/scripts/bubble-script.blade.php

-function drawBubbleGraph(label, container) {
+function drawBubbleGraph(label, container, filter_field) {
 
     var url = "/app/ranking/" + label + "/json";
     clearContent(container.id);
@@ -7,6 +7,11 @@ function drawBubbleGraph(label, container) {
     d3.json(url).then(data => {
         data = data.slice(0, 100);
 
+        var data = data.filter(
+            o => Object.keys(o).some(
+                k =>  (k == "subject") ? Object.keys(o[k]).some(
+                    s => o[k][s].toLowerCase().includes(filter_field.toLowerCase())) : null ));
+
         var colors = d3.scaleLinear().domain([0, 1]).range(["#ffffb3", "red"]);
         var width = container.clientWidth;
         var height = container.clientHeight;