78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
|
// import cola from 'cytoscape-cola';
|
||
|
|
|
||
|
|
async function getData() {
|
||
|
|
try {
|
||
|
|
const resp = await fetch("/api/data");
|
||
|
|
if (!resp.ok) {
|
||
|
|
throw new Error(`Response status: ${resp.status}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const json = await resp.json();
|
||
|
|
return json;
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setupGraph() {
|
||
|
|
|
||
|
|
getData()
|
||
|
|
.catch(function (err) { console.error(err) })
|
||
|
|
.then(function (elements) {
|
||
|
|
|
||
|
|
var cy = window.cy = cytoscape({
|
||
|
|
|
||
|
|
container: document.getElementById('map-container'), // container to render in
|
||
|
|
|
||
|
|
elements: elements,
|
||
|
|
// elements: [ // list of graph elements to start with
|
||
|
|
// { // node a
|
||
|
|
// data: { id: 'a' }
|
||
|
|
// },
|
||
|
|
// { // node b
|
||
|
|
// data: { id: 'b' }
|
||
|
|
// },
|
||
|
|
// { // edge ab
|
||
|
|
// data: { id: 'ab', source: 'a', target: 'b' }
|
||
|
|
// }
|
||
|
|
// ],
|
||
|
|
|
||
|
|
style: [ // the stylesheet for the graph
|
||
|
|
{
|
||
|
|
selector: 'node',
|
||
|
|
style: {
|
||
|
|
'background-color': '#666',
|
||
|
|
'label': 'data(id)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
selector: 'edge',
|
||
|
|
style: {
|
||
|
|
'width': 1,
|
||
|
|
'line-color': '#1E88E5',
|
||
|
|
'target-arrow-color': '#1E88E5',
|
||
|
|
'target-arrow-shape': 'none',
|
||
|
|
'curve-style': 'bezier'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
selector: ".virtual-edge",
|
||
|
|
style: {
|
||
|
|
"line-color": "#BDBDBD",
|
||
|
|
"line-style": "dashed",
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
layout: {
|
||
|
|
name: 'cola',
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', setupGraph);
|