From 310295684fa1e146af9a0e9b3affc5bfdac75f3b Mon Sep 17 00:00:00 2001
From: Alon Levy <alon@pobox.com>
Date: Sun, 12 Apr 2015 19:06:37 +0200
Subject: client: introduce zen mode

---
 res/templates/index.html      | 10 ++++++----
 src/client/main.js            |  2 +-
 src/client/rz_core.js         |  1 +
 src/client/view/graph_view.js | 30 +++++++++++++++++++++++++-----
 src/client/view/selection.js  | 43 ++++++++++++++++++++++++++++++-------------
 5 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/res/templates/index.html b/res/templates/index.html
index 04676ec7..9c9a97b8 100644
--- a/res/templates/index.html
+++ b/res/templates/index.html
@@ -49,12 +49,14 @@ var RZ_VERSION = '{% include "fragment/version.txt" %}';
     <div id="tool-bar">
       <div id="tool-bar-top-bar">
         <div class="tool_bar_btn" id="btn_layout" title="Layout">Layout</div>
-        <div class="tool_bar_btn" id="btn_filter" title="Filter">Filter<div>
-          <div id="menu__type-filter" style="display:none">
-            <div id="menu__type-filter_header">Filter by type</div>
+        <div class="tool_bar_btn" id="btn_filter" title="Filter">Filter
+          <div>
+            <div id="menu__type-filter" style="display:none">
+              <div id="menu__type-filter_header">Filter by type</div>
+            </div>
           </div>
         </div>
-  </div>
+        <div class="tool_bar_btn" id="btn_zen_mode" style="display: none" title="Zen mode">Zen mode</div>
         <div id="tool-bar-multiple-node-operations" style="display: none">
           <div class="tool_bar_btn" id="btn_link_fan" title="Link nodes in fan">Connect</div>
           <div class="tool_bar_btn" id="btn_merge" title="Merge nodes">Merge</div>
diff --git a/src/client/main.js b/src/client/main.js
index 67981d9a..fb621070 100644
--- a/src/client/main.js
+++ b/src/client/main.js
@@ -44,7 +44,7 @@ function(textanalysis_ui,   textanalysis,   buttons,   history,   drag_n_drop,
         textanalysis.init(rz_core.main_graph);
         search.init();
         filter_menu.init();
-        selection.setup_toolbar(rz_core.main_graph);
+        selection.setup_toolbar(rz_core.main_graph, rz_core.main_graph_view);
         $.feedback({ajaxURL: rz_config.feedback_url});
         fix_feedback_scrolling_to_visibility_causing_topbar_to_slide_slowly_in_webkit();
 
diff --git a/src/client/rz_core.js b/src/client/rz_core.js
index fd947744..41534201 100644
--- a/src/client/rz_core.js
+++ b/src/client/rz_core.js
@@ -43,6 +43,7 @@ function svg_click_handler(e) {
     selection.clear();
     item_info.hide(false);
     filter_menu.hide();
+    main_graph_view.zen_mode__cancel();
     main_graph_view.hide_layout_menu();
     update_view__graph(false);
 }
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index a7d37052..3c97383f 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -155,6 +155,7 @@ function GraphView(spec) {
         vis,
         deliverables,
         filter_states,
+        zen_mode = false,
         // FIXME - want to use parent_element
         w,
         h,
@@ -181,14 +182,14 @@ function GraphView(spec) {
     $(window).asEventStream('resize').map(update_window_size).onValue(function () { update_view(false); });
     update_window_size();
 
-    function node__is_shown(d) {
+    function node__pass_filter(d) {
         var state = filter_states && filter_states[d.type];
 
         return temporary || state === undefined || state;
     }
 
-    function link__is_shown(d) {
-        return node__is_shown(d.__src) && node__is_shown(d.__dst);
+    function link__pass_filter(d) {
+        return node__pass_filter(d.__src) && node__pass_filter(d.__dst);
     }
 
 
@@ -382,12 +383,20 @@ function GraphView(spec) {
         return urlValid(d) && image_endings[d.url.slice(d.url.lastIndexOf('.') + 1)] !== undefined;
     };
 
+    function nodes__filtered() {
+        return graph.nodes().filter(node__pass_filter);
+    }
+
     function nodes__visible() {
-        return graph.nodes().filter(node__is_shown);
+        return zen_mode ? selection.related() : nodes__filtered();
+    }
+
+    function links__filtered() {
+        return graph.links().filter(link__pass_filter);
     }
 
     function links__visible() {
-        return graph.links().filter(link__is_shown);
+        return zen_mode ? graph.find_links__by_nodes(selection.related()) : links__filtered();
     }
 
     function update_view(relayout) {
@@ -1256,6 +1265,17 @@ function GraphView(spec) {
         zoomInProgress = val;
         tick();
     });
+
+    gv.link__pass_filter = link__pass_filter;
+    gv.node__pass_filter = node__pass_filter;
+    gv.zen_mode__toggle = function () {
+        zen_mode = !zen_mode;
+        update_view(true);
+    }
+    gv.zen_mode__cancel = function () {
+        zen_mode = false;
+        update_view(true);
+    }
     return gv;
 }
 
diff --git a/src/client/view/selection.js b/src/client/view/selection.js
index 3e76e93b..cf42f57b 100644
--- a/src/client/view/selection.js
+++ b/src/client/view/selection.js
@@ -1,5 +1,5 @@
-define(['Bacon', 'jquery', 'underscore', 'messages'],
-function(Bacon,           $,        _,    messages) {
+define(['Bacon', 'jquery', 'underscore', 'messages', 'util'],
+function(Bacon,           $,        _,    messages,   util) {
 
 var rz_core, // circular dependency, see get_rz_core
     selection_count_element = $('#selection-count');
@@ -122,15 +122,20 @@ function _type_to_state(type) {
 }
 
 function _select_nodes_helper(nodes, connected) {
-    _.each(connected.nodes, function (data) {
+    var main_graph_view = get_main_graph_view();
+
+    _.each(connected.nodes.filter(function (data) {
+        return main_graph_view.node__pass_filter(data.node);
+    }), function (data) {
         data.node.state = _type_to_state(data.type);
     });
-    _.each(connected.links, function (data) {
+    _.each(connected.links.filter(function (data) {
+        return main_graph_view.link__pass_filter(data.link);
+    }), function (data) {
         data.link.state = _type_to_state(data.type);
     });
     nodes.forEach(function (n) { n.state = 'selected'; });
     return connected.nodes.map(function (d) { return d.node; }).concat(nodes.slice());
-
 }
 
 function mutual_neighbours(nodes) {
@@ -140,8 +145,7 @@ function mutual_neighbours(nodes) {
     connected.nodes = connected.nodes.filter(function (data) {
         return _.size(data.sources) > 1;
     });
-    ids = _.object(_.map(connected.nodes, function (data) { return data.node.id; }),
-                   _.map(connected.nodes, function () { return true; }));
+    ids = util.set_from_array(_.map(connected.nodes, function (data) { return data.node.id; }));
     connected.links = connected.links.filter(function (data) {
         return ids[data.link.__src.id] || ids[data.link.__dst.id];
     });
@@ -260,7 +264,7 @@ var invert_nodes = function(nodes)
     select_nodes(invert(selected, nodes));
 }
 
-var setup_toolbar = function(main_graph)
+var setup_toolbar = function(main_graph, main_graph_view)
 {
     var merge_selection = function() {
             main_graph.nodes__merge(selected_ids());
@@ -278,21 +282,34 @@ var setup_toolbar = function(main_graph)
         merge_btn = $('#btn_merge'),
         delete_btn = $('#btn_delete'),
         link_fan_btn = $('#btn_link_fan'),
+        zen_mode_btn = $('#btn_zen_mode'),
         multiple_node_operations = $('#tool-bar-multiple-node-operations');
 
     merge_btn.asEventStream('click').onValue(merge_selection);
     delete_btn.asEventStream('click').onValue(delete_selection);
     link_fan_btn.asEventStream('click').onValue(link_fan_selection);
 
+    function show(e, visible) {
+        if (visible) {
+            e.show();
+        } else {
+            e.hide();
+        }
+    }
+
     selectionChangedBus.map(function (selection) { return selection.selected.length > 1; })
         .skipDuplicates()
         .onValue(function (visible) {
-            if (visible) {
-                multiple_node_operations.show();
-            } else {
-                multiple_node_operations.hide();
-            }
+            show(multiple_node_operations, visible);
         });
+
+    selectionChangedBus.map(function (selection) { return selection.selected.length > 0; })
+        .skipDuplicates()
+        .onValue(function (visible) {
+            show(zen_mode_btn, visible);
+        });
+
+    zen_mode_btn.asEventStream('click').onValue(main_graph_view.zen_mode__toggle);
 }
 
 var is_empty = function() {
-- 
cgit v1.3.1