From 1ea2c5448b31d7d37697c8b764c398ab2b4f30e7 Mon Sep 17 00:00:00 2001
From: James Graham <j.graham@software.ac.uk>
Date: Wed, 12 May 2021 19:37:46 +0100
Subject: [PATCH] feat: add button to hide organisations from graph

---
 people/static/js/network.js          | 24 ++++++++++++++++++++++++
 people/templates/people/network.html | 10 +++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/people/static/js/network.js b/people/static/js/network.js
index 46642df..90b5737 100644
--- a/people/static/js/network.js
+++ b/people/static/js/network.js
@@ -2,6 +2,10 @@
 // Global reference to Cytoscape graph - needed for `save_image`
 var cy;
 
+var hide_organisations = false;
+var organisation_nodes;
+var organisation_edges;
+
 var network_style = [
     {
         selector: 'node[name]',
@@ -44,6 +48,21 @@ function save_image() {
     saveAs(cy.png(), 'graph.png');
 }
 
+/**
+ * Hide or restore organisations and relationships with them.
+ */
+function toggle_organisations() {
+    hide_organisations = !hide_organisations;
+
+    if (hide_organisations) {
+        organisation_nodes.remove();
+        organisation_edges.remove();
+    } else {
+        organisation_nodes.restore();
+        organisation_edges.restore();
+    }
+}
+
 /**
  * Populate a Cytoscape network from :class:`Person` and :class:`Relationship` JSON embedded in page.
  */
@@ -80,11 +99,13 @@ function get_network() {
             data: {
                 id: 'organisation-' + item.pk.toString(),
                 name: item.name,
+                kind: 'organisation',
                 nodeColor: '#669933',
                 nodeShape: 'rectangle'
             }
         })
     }
+    organisation_nodes = cy.nodes('[kind = "organisation"]');
 
     // Load relationships and add to graph
     var relationship_set = JSON.parse(document.getElementById('relationship-set-data').textContent);
@@ -97,6 +118,7 @@ function get_network() {
                     id: 'relationship-' + relationship.pk.toString(),
                     source: 'person-' + relationship.source.pk.toString(),
                     target: 'person-' + relationship.target.pk.toString(),
+                    kind: 'person',
                     lineColor: {
                         'organisation-membership': '#669933'
                     }[relationship.kind] || 'grey',
@@ -120,6 +142,7 @@ function get_network() {
                     id: 'organisation-relationship-' + relationship.pk.toString(),
                     source: 'person-' + relationship.source.pk.toString(),
                     target: 'organisation-' + relationship.target.pk.toString(),
+                    kind: 'organisation',
                     lineColor: {
                         'organisation-membership': '#669933'
                     }[relationship.kind] || 'black',
@@ -131,6 +154,7 @@ function get_network() {
             // This is probably because it's been filtered out
         }
     }
+    organisation_edges = cy.edges('[kind = "organisation"]');
 
     // Optimise graph layout
     var layout = cy.layout({
diff --git a/people/templates/people/network.html b/people/templates/people/network.html
index ee693ee..a70f9e2 100644
--- a/people/templates/people/network.html
+++ b/people/templates/people/network.html
@@ -65,7 +65,15 @@
         {% endbuttons %}
     </form>
 
-    <button class="btn btn-block btn-info mb-3" onclick="save_image();">Save Image</button>
+    <div class="row">
+        <div class="col-md-4">
+            <button class="btn btn-block btn-info mb-3" onclick="save_image();">Save Image</button>
+        </div>
+
+        <div class="col-md-4">
+            <button class="btn btn-block btn-info mb-3" onclick="toggle_organisations();">Toggle Organisations</button>
+        </div>
+    </div>
 
     <div id="cy"
          class="mb-2"