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

refactor: move network js to own file

Browse Source 
Add initial styling to network - only placeholder at the moment

See #83
This commit is contained in:
James Graham
2021-04-19 17:14:54 +01:00
parent 78e35b70e0
commit 5a2890ece1
2 changed files with 114 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
people/static/js/network.js Normal file
View File

@@ -0,0 +1,112 @@
// Global reference to Cytoscape graph - needed for `save_image`
var cy;
var network_style = [
{
selector: 'node[name]',
style: {
label: 'data(name)',
'text-halign': 'center',
'text-valign': 'center',
'font-size': 8,
'background-color': function (ele) {
switch (ele.data('kind')) {
case 'person':
return '#0099cc'
default:
return '#669933'
}
},
'shape': function (ele) {
switch (ele.data('kind')) {
case 'person':
return 'ellipse'
default:
return 'rectangle'
}
}
}
},
{
selector: 'edge',
style: {
'mid-target-arrow-shape': 'triangle',
'curve-style': 'straight',
'width': 1,
}
}
]
/**
* Save the network as an image using the browser's normal file download flow.
*/
function save_image() {
saveAs(cy.png(), 'graph.png');
}
/**
* 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
cy = cytoscape({
container: document.getElementById('cy'),
style: network_style
});
// 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,
kind: 'person'
}
})
}
// Load organisations and add to graph
var organisation_set = JSON.parse(document.getElementById('organisation-set-data').textContent);
for (var item of organisation_set) {
cy.add({
group: 'nodes',
data: {
id: 'organisation-' + item.pk.toString(),
name: item.name,
kind: 'organisation'
}
})
}
// 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.pk.toString(),
target: 'person-' + relationship.target.pk.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());

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

@@ -67,100 +67,6 @@
integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw=="
crossorigin="anonymous"></script>
<script type="application/javascript">
// Global reference to Cytoscape graph - needed for `save_image`
var cy;
/**
* Save the network as an image using the browser's normal file download flow.
*/
function save_image() {
saveAs(cy.png(), 'graph.png');
}
/**
* 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
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 organisations and add to graph
var organisation_set = JSON.parse(document.getElementById('organisation-set-data').textContent);
for (var item of organisation_set) {
cy.add({
group: 'nodes',
data: {
id: 'organisation-' + item.pk.toString(),
name: item.name
},
style: {
shape: 'rectangle'
}
})
}
// 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.pk.toString(),
target: 'person-' + relationship.target.pk.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>
{% load staticfiles %}
<script src="{% static 'js/network.js' %}"></script>
{% endblock %}