feat(network): Add style to network

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

See #14
This commit is contained in:
James Graham
2020-03-09 12:43:57 +00:00
parent 6e00c42302
commit 512590d615
2 changed files with 34 additions and 10 deletions

View File

@@ -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>

View File

@@ -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();
})
});
}