client: split view/filter.js from view/graph_view

1 files changed, 9 insertions, 77 deletions

diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index 5f451f73..3c4d46f4 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -43,8 +43,8 @@
  * which resulted in overly complex (read: undefined/buggy) code.
  */
 
-define(['d3',  'Bacon', 'consts', 'util', 'view/selection', 'model/diff', 'view/item_info', 'view/bubble', 'model/types', 'view/layouts'],
-function(d3 ,   Bacon,   consts,   util ,  selection      ,  model_diff  ,  item_info,        view_bubble,   model_types,   view_layouts) {
+define(['d3',  'Bacon', 'consts', 'util', 'view/selection', 'model/diff', 'view/item_info', 'view/bubble', 'model/types', 'view/layouts', 'view/filter'],
+function(d3 ,   Bacon,   consts,   util ,  selection      ,  model_diff  ,  item_info,        view_bubble,   model_types,   view_layouts,  view_filter) {
 
 "use strict"
 
@@ -80,75 +80,6 @@ function translate(x, y) {
     return "translate(" + x + "," + y + ")";
 }
 
-function init_checkboxes(graph, update_view) {
-    var // FIXME take filter names from index.html or both from graph db
-        filter_states = _.object(_.map(model_types.nodetypes, function (type) { return [type, null]; }));
-
-    function create_checkboxes() {
-        var root = $('#menu__type-filter');
-
-        _.each(model_types.nodetypes, function (type) {
-            var input = $('<input type="checkbox" checked="checked">'),
-                div = $('<div class="menu__type-filter_item"></div>');
-
-            input.attr("name", type);
-            div.append(input);
-            div.append(util.capitalize(model_types.node_titles[type]));
-            root.append(div);
-        });
-    }
-
-    function read_checkboxes() {
-        var name,
-            value,
-            // jquery map does flattens, and we don't want that
-            checkboxes = _.map($('#menu__type-filter input'),
-                function (checkbox) {
-                        return [checkbox.name, checkbox.checked];
-                    }
-                );
-        for (var i in checkboxes) {
-            name = checkboxes[i][0];
-            value = checkboxes[i][1];
-            if (undefined === filter_states[name]) {
-                continue;
-            }
-            filter_states[name] = value;
-        }
-        return filter_states;
-    }
-
-    create_checkboxes();
-    read_checkboxes();
-    function filtered_states() {
-        var o = read_checkboxes(),
-            ret = {};
-
-        _.each(_.keys(o), function(type) {
-            if (!o[type]) {
-                ret[type] = 1;
-            }
-        });
-        return ret;
-    }
-    //$('.menu__type-filter_item,.menu__type-filter_item input')
-    $('#menu__type-filter')
-        .asEventStream('click')
-        .onValue(function (e) {
-            var inp = $(e.target).find('input')[0];
-
-            if (inp && inp.checked !== undefined) {
-                inp.checked = !inp.checked;
-                e.preventDefault();
-            }
-            e.stopPropagation();
-            graph.node__set_filtered_types(filtered_states());
-            update_view(true);
-        })
-
-    return filter_states;
-}
-
 // "CSS" for SVG elements. Reused for editing elements.
 var node_text_dx = 5,
     node_text_dy = '.30em';
@@ -225,6 +156,13 @@ function GraphView(spec) {
     $(window).asEventStream('resize').map(update_window_size).onValue(function () { update_view(false); });
     update_window_size();
 
+    // read updated filter states from filters view
+    view_filter.filter_states_bus.onValue(function (new_states) {
+        filter_states = new_states;
+        graph.node__set_filtered_types(filter_states);
+        update_view(true);
+    });
+
     function node__pass_filter(d) {
         var state = filter_states && filter_states[d.type];
 
@@ -235,12 +173,6 @@ function GraphView(spec) {
         return node__pass_filter(d.__src) && node__pass_filter(d.__dst);
     }
 
-
-    // Filter. FIXME: move away from here. separate element, connected via bacon property
-    if (!temporary) {
-        filter_states = init_checkboxes(graph, update_view);
-    }
-
     function range(start, end, number) {
         var ret = [],
             i,