feat: retune network diagram styling

- Node size proportional to connections
- Font size proportional to connections
- Greater default spacing

people/static/js/network.js

@@ -9,6 +9,10 @@ var organisation_edges;
 var anonymise_people = false;
 var anonymise_organisations = false;
 
+function nodeSize (ele) {
+    return 100 + 20 * ele.connectedEdges().length;
+}
+
 var network_style = [
     {
         selector: 'node[name]',
@@ -21,32 +25,42 @@ var network_style = [
 
                 return anonymise ? ele.data('id') : ele.data('name')
             },
-            width: '100px',
+            width: nodeSize,
-            height: '100px',
+            height: nodeSize,
-            'text-halign': 'center',
+            textHalign: 'center',
-            'text-valign': 'center',
+            textValign: 'center',
-            'text-wrap': 'wrap',
+            textWrap: 'wrap',
-            'text-max-width': '90px',
+            textMaxWidth: function (ele) {
-            'font-size': '12rem',
+                return 0.8 * nodeSize(ele);
-            'background-color': 'data(nodeColor)',
+            },
-            'shape': 'data(nodeShape)'
+            fontSize: function (ele) {
+                return (16 + ele.connectedEdges().length).toString() + 'rem';
+            },
+            backgroundColor: 'data(nodeColor)',
+            shape: 'data(nodeShape)',
+            opacity: 0.7
         }
     },
     {
         selector: 'node:selected',
         style: {
-            'text-max-width': '300px',
+            textMaxWidth: function (ele) {
-            'font-size': '40rem',
+                return 0.8 * nodeSize(ele);
-            'z-index': 100,
+            },
+            fontSize: function (ele) {
+                return (50 + ele.connectedEdges().length).toString() + 'rem';
+            },
+            zIndex: 100,
         }
     },
     {
         selector: 'edge',
         style: {
-            'mid-target-arrow-shape': 'data(lineArrowShape)',
+            midTargetArrowShape: 'data(lineArrowShape)',
-            'curve-style': 'straight',
+            curveStyle: 'straight',
-            'width': 1,
+            width: 4,
-            'line-color': 'data(lineColor)'
+            lineColor: 'data(lineColor)',
+            opacity: 0.9
         }
     }
 ]
@@ -189,10 +203,12 @@ function get_network() {
     // Optimise graph layout
     var layout = cy.layout({
         name: 'cose',
-        randomize: true,
+        randomize: false,
         animate: false,
-        idealEdgeLength: function (edge) { return 40; },
+        nodeRepulsion: function (node) {
-        nodeRepulsion: function (node) { return 1e7; }
+            return 2 ** node.connectedEdges().length;
+        },
+        nodeOverlap: 80
     });
 
     layout.run();