breccia-mapper/people/templates/people/network.html

{% extends 'base.html' %}

{% block content %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Network</li>
        </ol>
    </nav>

    <hr>

    <form class="form"
          method="POST">
        {% csrf_token %}

        <div class="row">
            <div class="col-md-6">
                <h3>Filter Relationships</h3>
                    {% load bootstrap4 %}
                    {% bootstrap_form form %}
            </div>

            <div class="col-md-6">
                <h3>Filter People</h3>
            </div>

        </div>
        {% buttons %}
            <button class="btn btn-block btn-info" type="submit">Filter</button>
        {% endbuttons %}
    </form>

    <div id="cy"
         style="width: 100%; min-height: 1000px; flex-grow: 1; border: 2px solid black"></div>


{% endblock %}

{% block extra_script %}
    <!--
    Embedding graph data in page as JSON allows filtering to be performed entirely on the backend when we send a POST.

    This is useful since one of the most popular browsers in several of the target countries is Opera Mini,
    which renders JavaScript on a proxy server to avoid running it on the frontend.
    -->
    {{ person_set|json_script:'person-set-data' }}

    {{ relationship_set|json_script:'relationship-set-data' }}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js"
            integrity="sha256-rI7zH7xDqO306nxvXUw9gqkeBpvvmddDdlXJjJM7rEM="
            crossorigin="anonymous"></script>

    <script type="application/javascript">
        /**
         * Populate a Cytoscape network from :class:`Person` and :class:`Relationship` JSON embedded in page.
         */
        function get_network() {
            // Initialise Cytoscape graph
            // See https://js.cytoscape.org/ for documentation
            var cy = cytoscape({
                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,
                        }
                    }
                ]
            });

            // Load people and add to graph
            var person_set = JSON.parse(document.getElementById('person-set-data').textContent);

            for (var person of person_set) {
                cy.add({
                    group: 'nodes',
                    data: {
                        id: 'person-' + person.pk.toString(),
                        name: person.name
                    }
                })
            }

            // Load relationships and add to graph
            var relationship_set = JSON.parse(document.getElementById('relationship-set-data').textContent);

            for (var relationship of relationship_set) {
                cy.add({
                    group: 'edges',
                    data: {
                        id: 'relationship-' + relationship.pk.toString(),
                        source: 'person-' + relationship.source.toString(),
                        target: 'person-' + relationship.target.toString()
                    }
                })
            }

            // Optimise graph layout
            var layout = cy.layout({
                name: 'cose',
                randomize: true,
                animate: false,
                idealEdgeLength: function(edge) {return 64;}
            });

            layout.run();
        }

        $( window ).on('load', get_network());
    </script>
{% endblock %}