feat: add panzoom widget to network view

people/static/js/network.js

@@ -100,6 +100,9 @@ function get_network() {
         style: network_style
     });
 
+    // Add pan + zoom widget with cytoscape-panzoom
+    cy.panzoom();
+
     // Load people and add to graph
     var person_set = JSON.parse(document.getElementById('person-set-data').textContent);
 

people/templates/people/network.html

@@ -1,5 +1,12 @@
 {% extends 'base.html' %}
 
+{% block extra_head %}
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.5.3/cytoscape.js-panzoom.min.css"
+        integrity="sha512-MJrzp+ZGajx6AWCCCmjBWo0rPFavM1aBghVUSVVa0uYv8THryrtEygjj5r2rUg/ms33SkEC5xJ3E4ycCmxWdrw=="
+        crossorigin="anonymous" />
+{% endblock %}
+
 {% block content %}
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
@@ -82,7 +89,7 @@
 
     <div id="cy"
          class="mb-2"
-         style="width: 100%; min-height: 1000px; flex-grow: 1; border: 2px solid black"></div>
+         style="width: 100%; min-height: 1000px; flex-grow: 1; border: 2px solid black; z-index: 999"></div>
 {% endblock %}
 
 {% block extra_script %}
@@ -101,6 +108,10 @@
             integrity="sha512-CBGCXtszkG5rYlQSTNUzk54/731Kz28WPk2uT1GCPCqgfVRJ2v514vzzf16HuGX9WVtE7JLqRuAERNAzFZ9Hpw=="
             crossorigin="anonymous"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.5.3/cytoscape-panzoom.min.js"
+            integrity="sha512-coQmIYa/SKS8wyZw14FTLJhHmp5jqIO2WxyGhjAnLGdym6RsLX412wLO1hqnFifU0NacrJvlUukRJEwjRkm0Xg=="
+            crossorigin="anonymous"></script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"
             integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw=="
             crossorigin="anonymous"></script>