client: graph_view: filter initial. does not affect layout, only visibility

2 files changed, 70 insertions, 4 deletions

diff --git a/res/templates/index.html b/res/templates/index.html
index 3df57765..b20569f3 100644
--- a/res/templates/index.html
+++ b/res/templates/index.html
@@ -26,6 +26,26 @@
       </div>
       <div id="search-suggestion" class="suggestion" style="display: none">
       </div>
+      <div>
+		<ul class="dropdown-menu">
+			<li class="dropdown-item dropdown-menu-heading">Filter by Type</li>
+			<li class="dropdown-item dropdown-item-type dropdown-item-type-person">
+				<label><input type="checkbox" checked="checked" name="interest">Interest</label>
+			</li>
+			<li class="dropdown-item dropdown-item-type dropdown-item-type dropdown-item-type-Skill">
+				<label><input type="checkbox" checked="checked" name="skill">Skill</label>
+			</li>
+			<li class="dropdown-item dropdown-item-type dropdown-item-type-Club">
+				<label><input type="checkbox" checked="checked" name="club">Club</label>
+			</li>
+			<li class="dropdown-item dropdown-item-type dropdown-item-type-person">
+				<label><input type="checkbox" checked="checked" name="person">Person</label>
+			</li>
+			<li class="dropdown-item dropdown-item-type dropdown-item-type-Internship-proposal">
+				<label><input type="checkbox" checked="checked" name="internship-proposal">Intership Proposal</label>
+			</li>
+		</ul>
+       </div>
       <div class="export">
         <a href="#">Export</a>
       </div>
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index 57897819..14a0b33b 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -91,7 +91,10 @@ function GraphView(spec) {
         w = $(document.body).innerWidth(),
         h = $(document.body).innerHeight(),
         cx = w / 2,
-        cy = h / 2;
+        cy = h / 2,
+        // FIXME take filter names from index.html or both from graph db
+        filter_states = {'interest':null, 'skill':null, 'club':null, 'person':null, 'third-internship-proposal':null},
+        filter_state_names = ['interest', 'skill', 'club', 'person', 'third-internship-proposal'];
 
     util.assert(parent_element !== undefined && graph_name !== undefined &&
                 graph !== undefined && zoom_property !== undefined &&
@@ -101,10 +104,40 @@ function GraphView(spec) {
                 (temporary || svgInput !== undefined),
                 "missing spec variable");
     
+    function read_checkboxes() {
+        var checkboxes = $('.dropdown-item label input').map(
+        function (i, checkbox){
+                return checkbox.checked;
+            }
+        );
+        for (var i in checkboxes) {
+            if (filter_state_names[i] === undefined) {
+                continue;
+            }
+            filter_states[filter_state_names[i]] = checkboxes[i];
+        }
+    }
+
+    function redrawFromCheckboxChange()
+    {
+        var checkboxes = $('.dropdown-item label input').asEventStream('click').onValue(function (_) {
+                read_checkboxes();
+                console.log(filter_states);
+                update_view(true);
+            }
+        );
+    }
+
     zoom_property.onValue(function (val) {
         zoomInProgress = val;
     });
 
+    // Filter. FIXME: move away from here. separate element, connected via bacon property
+    if (!temporary) {
+        read_checkboxes();
+        redrawFromCheckboxChange();
+    }
+
     function range(start, end, number) {
         var ret = [],
             i,
@@ -226,7 +259,6 @@ function GraphView(spec) {
         }
     }
 
-
     function update_view(relayout) {
         var node,
             link,
@@ -648,6 +680,16 @@ function GraphView(spec) {
     function tick(e) {
         //console.log(e);
         //$(".debug").html(force.alpha());
+        // just hide them for now, and remove them from force layout afterwards, do not delete nodes/links themselves.
+        function node__is_shown(d) {
+            var type = d.type;
+            return filter_states[d.type];
+        }
+
+        function link__is_shown(d) {
+            return node__is_shown(d.__src) && node__is_shown(d.__dst);
+        }
+
         var node = vis.selectAll(".node")
             .data(graph.nodes(), function(d) {
                 return d.id;
@@ -706,8 +748,12 @@ function GraphView(spec) {
         });
 
         // After initial placement we can make the nodes visible.
-        //links.attr('visibility', 'visible');
-        node.attr('visibility', 'visible');
+        node.attr('visibility', function (d, i) {
+                 return !temporary && node__is_shown(d) ? 'visible' : 'hidden';
+             });
+        link.attr('visibility', function (d, i) {
+                 return !temporary && link__is_shown(d) ? 'visible' : 'hidden';
+             });
     }
 
     // SVG rendering order is last rendered on top, so to make sure