me/breccia-mapper
1
0
Fork 0
mirror of https://github.com/Southampton-RSG/breccia-mapper.git synced 2026-03-03 11:27:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(network): Add style to network

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
breccia_mapper/templates/base.html
View File

@@ -73,6 +73,10 @@
<a href="{% url 'activities:activity.list' %}" class="nav-link">Activities</a> <a href="{% url 'activities:activity.list' %}" class="nav-link">Activities</a>
</li> </li>
<li class="nav-item">
<a href="{% url 'people:network' %}" class="nav-link">Network</a>
</li>
{% if request.user.is_superuser %} {% if request.user.is_superuser %}
<li class="nav-item"> <li class="nav-item">
<a href="{% url 'admin:index' %}" class="nav-link">Admin</a> <a href="{% url 'admin:index' %}" class="nav-link">Admin</a>

40
people/templates/people/network.html
View File

@@ -21,6 +21,7 @@
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script type="application/javascript"> <script type="application/javascript">
// Holder for Cytoscape.js graph - see https://js.cytoscape.org/
var cy; var cy;
/** /**
@@ -97,20 +98,39 @@
*/ */
function get_network() { function get_network() {
cy = cytoscape({ 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() { $.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() { layout.run();
var layout = cy.layout({ })
name: 'circle',
randomize: true,
animate: false
});
layout.run();
}); });
} }