Skip to content

Instantly share code, notes, and snippets.

@vegarringdal

vegarringdal/index.html

Last active July 16, 2016 19:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vegarringdal/8e02e1bcc281f0bb7ecbf041a35f5245 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vegarringdal/8e02e1bcc281f0bb7ecbf041a35f5245 to your computer and use it in GitHub Desktop.
Download ZIP
cytoscape with cables
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet" />
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Compound nodes</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.0/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.3.6/cytoscape-cose-bilkent.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.3.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
<script src="script.js"></script>
</html>
Raw
script.js
var cy = cytoscape({
container: document.getElementById('cy')
});
cy.style(
[
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'shape': 'rectangle',
'width':"200",
'height':"25"
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': 'white'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle',
'curve-style': 'bezier'
}
},
{
selector: 'edge',
style: {
'label': 'data(id)',
'width': 3,
'line-color': '#ccc',
//'edge-text-rotation': 'autorotate',
'text-wrap': 'wrap'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
]
)
var cables = [
{tag:"cable1", tagFrom:"eq1", tagTo:"eq2", type:"BFOU"},
{tag:"cable2", tagFrom:"eq2", tagTo:"eq3", type:"BFOU"},
{tag:"cable3", tagFrom:"eq3", tagTo:"eq4", type:"BFOU"},
{tag:"cable4", tagFrom:"eq4", tagTo:"eq5", type:"BFOU"},
{tag:"cable5", tagFrom:"eq5", tagTo:"eq6", type:"BFOU"},
{tag:"cablhhhhhhhhe6", tagFrom:"eq6", tagTo:"eq7", type:"BFOU"},
{tag:"cable7", tagFrom:"eq7", tagTo:"eq8", type:"BFOU"},
{tag:"cable9", tagFrom:"eq7", tagTo:"eq10", type:"BFOU"},
{tag:"cable8", tagFrom:"eq8", tagTo:"eq9", type:"BFOU"}
]
var tags = [
{tag:"eq1", area: "TQ0105"},
{tag:"eq2", area: "TQ0106"},
{tag:"eq3", area: "TQ0105"},
{tag:"eq4", area: "TQ0106"},
{tag:"eq5", area: "TQ0106"},
{tag:"eq5", area: "TQ0106"},
{tag:"eq7", area: "TQ0105"},
{tag:"eq8", area: "TQ0105"},
{tag:"eq9", area: "TQ0105"},
{tag:"eq10", area: "TQ0105"}
]
var addedEq = new Set();
var nodes = [];
var edges = [];
cables.forEach((cable)=>{
var parent = "NA";
if(!addedEq.has(cable.tagFrom)){
addedEq.add(cable.tagFrom)
tags.forEach((tag)=>{
if(cable.tagFrom === tag.tag){
parent = tag.area
}
})
if(!addedEq.has(parent)){
nodes.push({
data: {
id: parent
}
})
}
nodes.push({
data: {
id: cable.tagFrom,
parent: parent
}
})
}
if(!addedEq.has(cable.tagTo)){
addedEq.add(cable.tagTo)
tags.forEach((tag)=>{
if(cable.tagTo === tag.tag){
parent = tag.area
}
})
if(!addedEq.has(parent)){
nodes.push({
data: {
id: parent
}
})
}
nodes.push({
data:{
id: cable.tagTo,
parent: parent
}
})
}
edges.push({
data:{
id: cable.tag +'\n'+cable.type ,
source: cable.tagFrom,
target: cable.tagTo
}
})
})
cy.add({
nodes: nodes,
edges: edges
})
var defaults = {
name: 'dagre',
// dagre algo options, uses default value on undefined
nodeSep: 50,//undefined, // the separation between adjacent nodes in the same rank
edgeSep: 50,//undefined, // the separation between adjacent edges in the same rank
rankSep: 200,//undefined, // the separation between adjacent nodes in the same rank
rankDir: 'tb',//undefined, // 'TB' for top to bottom flow, 'LR' for left to right
minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges
// general layout options
fit: true, // whether to fit to viewport
padding: 20, // fit padding
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
ready: function(){}, // on layoutready
stop: function(){} // on layoutstop
};
var defaultOptions = {
name: 'cose-bilkent',
// Called on `layoutready`
ready: function () {
},
// Called on `layoutstop`
stop: function () {
},
// Whether to fit the network view after when done
fit: true,
// Padding on fit
padding: 10,
// Whether to enable incremental mode
randomize: true,
// Node repulsion (non overlapping) multiplier
nodeRepulsion: 4500,
// Ideal edge (non nested) length
idealEdgeLength: 200,
// Divisor to compute edge forces
edgeElasticity: 0.45,//0.45,
// Nesting factor (multiplier) to compute ideal edge length for nested edges
nestingFactor: 0.1,
// Gravity force (constant)
gravity: 0.9,
// Maximum number of iterations to perform
numIter: 2500,
// For enabling tiling
tile: true,
// Type of layout animation. The option set is {'during', 'end', false}
animate: 'end',
// Represents the amount of the vertical space to put between the zero degree members during the tiling operation(can also be a function)
tilingPaddingVertical: 100,
// Represents the amount of the horizontal space to put between the zero degree members during the tiling operation(can also be a function)
tilingPaddingHorizontal: 100,
// Gravity range (constant) for compounds
gravityRangeCompound: 1.5,
// Gravity force (constant) for compounds
gravityCompound: 1.0,
// Gravity range (constant)
gravityRange: 3.8
};
/*cy.layout({
name: 'cose-bilkent',//'grid',//'concentric','breadthfirst',
// avoidOverlap: true,
// refresh: 20,
// circle: true,
// directed: true,
// numIter: 2500,
nodeRepulsion: 4500,
gravityRangeCompound: 1.5,
gravityCompound: 1.0,
idealEdgeLength: 500
// componentSpacing: 20,
// minNodeSpacing: 20,
// padding: 90
})*/
cy.layout(defaults)
Raw
styles.css
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment