118 lines
33 KiB
HTML
118 lines
33 KiB
HTML
|
<!DOCTYPE>
|
||
|
|
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>cytoscape-cose-bilkent.js demo</title>
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||
|
|
|
||
|
|
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
|
||
|
|
|
||
|
|
<!-- for testing with local version of cytoscape.js -->
|
||
|
|
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
|
||
|
|
|
||
|
|
<!--polyfills are needed for this extension for old browsers like IE -->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/shim.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
|
||
|
|
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
|
||
|
|
<script src="cytoscape-cose-bilkent.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: helvetica;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cy {
|
||
|
|
width: 100%;
|
||
|
|
height: 90%;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
opacity: 0.5;
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded',function(){
|
||
|
|
|
||
|
|
var cy = window.cy = cytoscape({
|
||
|
|
container: document.getElementById('cy'),
|
||
|
|
|
||
|
|
ready: function(){
|
||
|
|
this.nodes().forEach(function(node){
|
||
|
|
let width = [30, 70, 110];
|
||
|
|
let size = width[Math.floor(Math.random()*3)];
|
||
|
|
node.css("width", size);
|
||
|
|
node.css("height", size);
|
||
|
|
});
|
||
|
|
this.layout({name: 'cose-bilkent', animationDuration: 1000}).run();
|
||
|
|
},
|
||
|
|
|
||
|
|
style: [
|
||
|
|
{
|
||
|
|
selector: 'node',
|
||
|
|
style: {
|
||
|
|
'background-color': '#ad1a66'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
selector: 'edge',
|
||
|
|
style: {
|
||
|
|
'width': 3,
|
||
|
|
'line-color': '#ad1a66'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
elements: [{"data":{"id":"glyph9","sbgnbbox":{"x":1452.639173965406,"y":609.3619416544145,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"hexokinase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1452.639173965406,"y":609.3619416544145},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph0","sbgnbbox":{"x":1351.3490293961959,"y":518.9529901384763,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"glucose","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1351.3490293961959,"y":518.9529901384763},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph6","sbgnbbox":{"x":1358.2854747390154,"y":707.9866590968695,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ATP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":1358.2854747390154,"y":707.9866590968695},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph8","sbgnbbox":{"x":1322.9939787691299,"y":614.6878118623499,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1322.9939787691299,"y":614.6878118623499},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph7","sbgnbbox":{"x":1239.4852011317887,"y":543.2369849876238,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ADP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":1239.4852011317887,"y":543.2369849876238},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph12","sbgnbbox":{"x":841.6855140740067,"y":765.0152660242113,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ADP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":841.6855140740067,"y":765.0152660242113},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph13","sbgnbbox":{"x":1019.5908382748769,"y":841.6087025848726,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ATP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":1019.5908382748769,"y":841.6087025848726},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph1","sbgnbbox":{"x":1231.2768042260652,"y":673.2683218469676,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"glucose 6P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1231.2768042260652,"y":673.2683218469676},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph2","sbgnbbox":{"x":1039.8995038336504,"y":730.180116446269,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"fructose 6P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1039.8995038336504,"y":730.180116446269},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph15","sbgnbbox":{"x":569.5498472077387,"y":506.89980858075364,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"triose-P isomerase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":569.5498472077387,"y":506.89980858075364},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},{"data":{"id":"glyph3","sbgnbbox":{"x":903.0347368937041,"y":654.3308627056822,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"fructose 1,6P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":903.0347368937041,"y
|
||
|
|
{"data":{"id":"e66","sbgnclass":"production","sbgncardinality":0,"source":"glyph33","target":"glyph35","portsource":"glyph33","porttarget":"glyph35"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},
|
||
|
|
{"data":{"id":"e67","sbgnclass":"production","sbgncardinality":0,"source":"glyph13","target":"glyph22","portsource":"glyph13","porttarget":"glyph22"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},
|
||
|
|
{"data":{"id":"e68","sbgnclass":"production","sbgncardinality":0,"source":"glyph17","target":"glyph6","portsource":"glyph17","porttarget":"glyph6"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""},
|
||
|
|
{"data":{"id":"e69","sbgnclass":"production","sbgncardinality":0,"source":"glyph25","target":"glyph27","portsource":"glyph25","porttarget":"glyph27"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbed":false,"grabbable":true,"classes":""}]
|
||
|
|
});
|
||
|
|
document.getElementById("layoutButton").addEventListener("click", function(){
|
||
|
|
var layout = cy.layout({
|
||
|
|
name: 'cose-bilkent',
|
||
|
|
animate: 'end',
|
||
|
|
animationEasing: 'ease-out',
|
||
|
|
animationDuration: 1000,
|
||
|
|
randomize: true
|
||
|
|
});
|
||
|
|
|
||
|
|
layout.run();
|
||
|
|
});
|
||
|
|
document.getElementById("randomize").addEventListener("click", function(){
|
||
|
|
var layout = cy.layout({
|
||
|
|
name: 'random',
|
||
|
|
animate: true,
|
||
|
|
animationDuration: 1000,
|
||
|
|
animationEasing: 'ease-out'
|
||
|
|
});
|
||
|
|
|
||
|
|
layout.run();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>cytoscape-cose-bilkent demo</h1>
|
||
|
|
|
||
|
|
<button id="randomize" type="button">Randomize</button>
|
||
|
|
<button id="layoutButton" type="button">CoSE-Bilkent</button>
|
||
|
|
|
||
|
|
<div id="cy"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|