From 512590d615f3b91d0e614d441d8cc30455592e89 Mon Sep 17 00:00:00 2001
From: James Graham <J.Graham@software.ac.uk>
Date: Mon, 9 Mar 2020 12:43:57 +0000
Subject: [PATCH] feat(network): Add style to network

Style nodes and edges of network
Fix layout of network not running

See #14
---
 breccia_mapper/templates/base.html   |  4 +++
 people/templates/people/network.html | 40 +++++++++++++++++++++-------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/breccia_mapper/templates/base.html b/breccia_mapper/templates/base.html
index e840c53..123d2ea 100644
--- a/breccia_mapper/templates/base.html
+++ b/breccia_mapper/templates/base.html
@@ -73,6 +73,10 @@
                             <a href="{% url 'activities:activity.list' %}" class="nav-link">Activities</a>
                         </li>
 
+                        <li class="nav-item">
+                            <a href="{% url 'people:network' %}" class="nav-link">Network</a>
+                        </li>
+
                         {% if request.user.is_superuser %}
                             <li class="nav-item">
                                 <a href="{% url 'admin:index' %}" class="nav-link">Admin</a>
diff --git a/people/templates/people/network.html b/people/templates/people/network.html
index 4c703eb..4c6757a 100644
--- a/people/templates/people/network.html
+++ b/people/templates/people/network.html
@@ -21,6 +21,7 @@
             crossorigin="anonymous"></script>
 
     <script type="application/javascript">
+        // Holder for Cytoscape.js graph - see https://js.cytoscape.org/
         var cy;
 
         /**
@@ -97,20 +98,39 @@
          */
         function get_network() {
             cy = cytoscape({
-                container: document.getElementById('cy')
+                container: document.getElementById('cy'),
+                style: [
+                    {
+                        selector: 'node[name]',
+                        style: {
+                            label: 'data(name)',
+                            'text-halign': 'center',
+                            'text-valign': 'center',
+                            'font-size': 8
+                        }
+                    },
+                    {
+                        selector: 'edge',
+                        style: {
+                            'mid-target-arrow-shape': 'triangle',
+                            'curve-style': 'straight',
+                            'width': 1,
+                        }
+                    }
+                ]
             });
 
             $.when(get_people_ajax()).then(function() {
-                get_relationships_ajax()
+                $.when(get_relationships_ajax()).then(function() {
+                    var layout = cy.layout({
+                        name: 'cose',
+                        randomize: true,
+                        animate: false,
+                        idealEdgeLength: function(edge) {return 64;}
+                    });
 
-            }).then(function() {
-                var layout = cy.layout({
-                    name: 'circle',
-                    randomize: true,
-                    animate: false
-                });
-
-                layout.run();
+                    layout.run();
+                })
             });
 
         }