var CytoView = module.exports = function(eles){
this.elements = eles;
this.stylesheet = cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(label)',
'background-color': 'data(color)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888',
'min-zoomed-font-size': 8,
'width': 'data(deg)',
'height': 'data(deg)',
'shape': 'data(shape)'
})
.selector('node:selected')
.css({
'background-color': '#66ff99',
'text-outline-color': '#888'
})
.selector('edge')
.css({
'width': 2,
'line-color': 'data(color)'
});
this.cy = null;
}
var renderPathway = function(data, target){
var entries = data.getElementsByTagName('entry');
for(var i = 0; i < entries.length; i++){
_processEntry(entries[i]);
}
var rels = data.getElementsByTagName('relation');
for(var i = 0; i < rels.length; i++){
_processRelation(rels[i]);
}
var cy = cytoscape({
container: target,
elements: {
nodes : nodes,
edges : links
},
style: cytoscape.stylesheet()
.selector('node').css({
'content': 'data(name)',
'text-valign': 'center',
'width': 'data(width)',
'height': 'data(height)',
'shape':'data(shape)',
'background-color': 'data(bkg_color)',
'text-valign': 'data(text_valign)',
/*'opacity': 'data(opacity)',*/
'border-color': '#000000',
'border-width': 'data(border_width)',
'font-size': 11,
'text-wrap': 'wrap',
'text-max-width': 'data(width)'
})
.selector('node')
.selector('edge').css({
'content': 'data(text)',
'target-arrow-shape': 'data(target_arrow_shape)',
'line-style': 'data(line_style)',
'line-color':'#000000',
'target-arrow-color':'#000000',
'text-valign' : 'bottom',
'font-size': 11
}),
layout: {
name: "preset",
fit: false,
positions: positions
},ready:function(){
console.log('Kegg Viewer ready');
}
});
return cy;
};
jQuery.getJSON("./data/performance-tuning.json", function(data){
var cy = cytoscape({
// these options hide parts of the graph during interaction
//hideEdgesOnViewport: true,
//hideLabelsOnViewport: true,
// this is an alternative that uses a bitmap during interaction
textureOnViewport: true,
// interpolate on high density displays instead of increasing resolution
pixelRatio: 1,
// a motion blur effect that increases perceived performance for little or no cost
motionBlur: true,
container: yourDiv,
style: cytoscape.stylesheet()
.selector('node')
.css({
'width': 'mapData(weight, 0, 100, 10, 60)',
'height': 'mapData(weight, 0, 100, 10, 60)'
})
.selector('edge')
.css({
'opacity': '0.666',
'width': 'mapData(weight, 0, 100, 1, 6)',
'curve-style': 'haystack' // fast edges!
})
.selector(':selected')
.css({
'background-color': 'black',
'opacity': 1
}),
layout: {
name: 'concentric',
concentric: function(){ return this.data('weight'); },
levelWidth: function( nodes ){ return 10; },
padding: 10
},
elements: data
});
});
init : function(container){
width = container.offsetWidth;
height = container.offsetHeight;
cy = cytoscape({
container: container,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 'data(fontWidth)',
'text-outline-color': 'black',
'background-color' : 'data(nodecolor)',
'width' : 'data(weight)',
'height' : 'data(weight)',
'font-size' : 'data(fontSize)'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'text-outline-color': 'black'
}),
//elements: testElements,
userPanningEnabled : false,
layout: {
name: 'preset',
padding: 10
},
});
console.log(cy);
},
}
}
}
}
console.log(interaction.elements);
//interaction.elements.nodes = nodes;
cy.load(interaction.elements);
});
});
console.log('finished rendering!');
},
headless: false,
renderer: {
name: "canvas"
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'font-size': 15,
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'background-color': 'mapData(expr, -28, -12, red, yellow)',
'text-outline-width': 2,
'text-outline-color': '#888',
'min-zoomed-font-size': 8,
'width': 'mapData(expr, -28, -10, 20, 60)',
'height': 'mapData(expr, -28, -10, 20, 60)'
})
.selector('node:selected')
.css({
Graphs.graph = function(element) {
var cy = Cytoscape({
"container": jQuery(element),
layout: {
name: 'cose',
padding: 10
},
style: Cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'data(faveShape)',
'width': 'mapData(weight, 40, 80, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': 'data(faveColor)',
'background-color': 'data(faveColor)',
'color': '#fff'
})
.selector(':selected')
.css({
'border-width': 3,
'border-color': '#333'
})
.selector('edge')
.css({
'opacity': 0.666,
'width': 'mapData(strength, 70, 100, 2, 6)',
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'circle',
'line-color': 'data(faveColor)',
'source-arrow-color': 'data(faveColor)',
'target-arrow-color': 'data(faveColor)'
})
.selector('edge.questionable')
.css({
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes:ctrl.nodes(),
// nodes: [
// { data: { id: 'j', name: 'Jerry', weight: 20, faveColor: '#6FB1FC', faveShape: 'ellipse' } },
// { data: { id: 'e', name: 'Elaine', weight: 20, faveColor: '#6FB1FC', faveShape: 'ellipse' } },
// { data: { id: 'k', name: 'Kramer', weight: 20, faveColor: '#6FB1FC', faveShape: 'ellipse' } },
// { data: { id: 'g', name: 'George', weight: 20, faveColor: '#6FB1FC', faveShape: 'ellipse' } }
// ],
edges:ctrl.edges()
// edges: [
// { data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
// { data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
// { data: { source: 'j', target: 'g', faveColor: '#6FB1FC', strength: 80 } },
// { data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 95 } },
// { data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },
// { data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 100 } },
// { data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 100 } },
// { data: { source: 'k', target: 'g', faveColor: '#86B342', strength: 100 } },
// { data: { source: 'g', target: 'j', faveColor: '#F5A45D', strength: 90 } }
// ]
},
ready: function(){
window.cy = this;
// giddy up
}
});
}
function getStylesheet() {
return cytoscape.stylesheet()
.selector("node")
.css({
"padding-top": "18px",
"padding-right": "18px",
"padding-bottom": "18px",
"padding-left": "18px",
"color": "white",
"content": "data(id)",
"text-wrap": "wrap",
"text-valign": "center",
"text-halign": "center"
})
.selector("edge")
.css({
"target-arrow-shape": "triangle",
"width": 4,
"line-color": "#ddd",
"target-arrow-color": "#ddd",
"curve-style": "bezier"
})
.selector("node.in")
.css({
"content": e => e.attr("id") + "\n(in)",
"background-color": "#37d077",
})
.selector("node.out")
.css({
"content": e => e.attr("id") + "\n(out)",
"background-color": "#e74c3c",
})
.selector("node.undec")
.css({
"content": e => e.attr("id") + "\n(undec)",
"background-color": "#95a5a6",
})
.selector("node.minmax")
.css({
"content": e => {
let min_max = e.attr("min_max_numbering");
min_max = min_max === Infinity ? "\u221e" : min_max;
return e.attr("id") + "\n(" + min_max + ")";
}
})
.selector("node.highlight")
.css({
"border-width": "4px",
"border-style": "solid",
"border-color": "magenta",
"border-opacity": 1
})
// Grounded Discussion Game
.selector("node.htb")
.css({
"background-color": "lightgreen"
})
.selector("node.cb")
.css({
"background-color": "pink"
})
.selector("node.concede")
.css({
"background-color": "green"
})
.selector("node.retract")
.css({
"background-color": "red"
})
// Preferred Discussion Game
.selector("node.preferred-in")
.css({
"background-color": "green"
})
.selector("node.preferred-out")
.css({
"background-color": "red"
})
}
export const applyDefaultStyle = function() {
return cytoscape.stylesheet()
.selector('node')
.style({
'font-size': 6,//graphState.fontSize,
'text-valign': 'center',
'text-halign': 'right',
'color': 'gray',
'text-max-width': 60,
'text-wrap': 'wrap',
'min-zoomed-font-size': 0.4,
'border-color': '#D84315',
'background-color' : function(e) {
var color = "#CCC" // default
if (e.data("group")) color = colors(e.data("group"))
else if (e.data("color")) color = e.data("color")
return e.data('starred') ? 'yellow' : color
},
// 'text-opacity' : 0, // hide label by default
'label': function(e) {
return e.data("name") ? e.data("name").trunc(20) : ""
}
})
// node with degree zero
.selector('node[[degree = 0]]')
.style({
'background-color': '#656565'
// 'display' :"none"
})
.selector('node[group="ghosts"]')
.style({
'background-opacity': .5,
'border-width': '3',
'border-color': 'gray',
'border-opacity': .6
// 'display' :"none"
})
.selector('edge')
.style({
'background-color' : "#000",
'target-arrow-shape': 'none', // default is undirected graph
'width': function(e) {
return e.data("weight") ? e.data("weight") : .5
},
'line-color' : '#AAAAAA',
'line-opacity': .7,
'font-size':8,
'text-opacity' : 0, // hide label by default
'label': function(e) {
return e.data("group") ? e.data("group") : ""
}
})
.selector('.edgehandles-hover')
.style({
'background-color': 'red'
})
.selector('.edgehandles-source')
.selector('.edgehandles-target')
.selector('.edgehandles-preview, .edgehandles-ghost-edge')
.style({
'line-color': 'red',
'target-arrow-color': 'red',
'source-arrow-color': 'red'
})
}
ctrl.render = function(element, isInitialized, context) {
if(isInitialized && context.rendered) return;
context.rendered = true
$('#cy')
.cytoscape({
layout: DagConfig.getLayout(args.type, ctrl.zratio()),
// zoomingEnabled: false,
style: cytoscape.stylesheet()
.selector('node')
.css(DagConfig.getNodeStyle(args.mode))
.selector(':selected')
.css(DagConfig.getSelectedStyle(args.mode))
.selector('node.hilite')
.css({
'text-background-color': '#ffffdf',
'text-background-opacity': 0.8,
'background-color': '#ffffaf',
'border-width': '1px',
'border-color': '#ffffa5',
'z-index': 9
})
.selector('node.hilite:selected')
.css({
'text-background-color': '#ffffdf'
})
.selector('edge')
.css({
'width': 2,
'line-color': '#bbb',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#bbb',
'opacity': 1
})
.selector('edge[succeeded]')
.css({
'line-color': DagConfig.colors.succeeded,
'target-arrow-color': DagConfig.colors.succeeded
})
.selector('edge[failed]')
.css({
'line-color': DagConfig.colors.failed,
'target-arrow-color': DagConfig.colors.failed
})
.selector('edge[running]')
.css({
'line-color': DagConfig.colors.running,
'target-arrow-color': DagConfig.colors.running
}),
ready: function() {
window.cy = this;
cy.elements().unselectify();
window.cy.on('tap', 'node', function(e) {
node = e.cyTarget;
status = node.data()['status'];
if(status.toLowerCase() !== 'queued') {
(args.onnodeclick || function() {})(node.id());
}
});
window.cy.on('tap', 'edge', function(e) {
edge = e.cyTarget;
(args.onedgeclick || function() {})(edge.data().bindings);
});
cy.load(((args.dag || {}).elements || {nodes: [], edges: []}));
cy.center(document.getElementById('cy'));
cy.zoomingEnabled(false);
cy.onRender(function() {
// if(! cy._centered) {
// cy.center(document.getElementById('cy'));
// cy._centered = true;
// }
});
}
})
}