JS Object Dependencies Graph
HTML
<script src="https://raw.github.com/anvaka/VivaGraphJS/master/dist/vivagraph.min.js"></script>
<form id='graphInput'>
Paste graph JSON here:<br/>
<textarea id='graphJSON' rows='2' cols='80'>
</textarea><br/>
<input type='submit' value='Visualize'/>
</form>
<div id='visualization'>
</div>
CSS
body,
#visualization,
#visualization > svg {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
#graphInput {
position: absolute;
z-index: 1;
}
JavaScript
function buildObjectCallGraph(obj, timeOutId) {
if (typeof Viva === 'undefined') {
if (!timeOutId) {
var head = document.getElementsByTagName('head')[0],
script = document.createElement('script');
script.setAttribute('src', 'https://raw.github.com/anvaka/VivaGraphJS/master/dist/vivagraph.min.js');
script.setAttribute("type","text/javascript");
head.appendChild(script);
}
var timeOutId = setTimeout(function() {
buildObjectCallGraph(obj, timeOutId);
}, 500);
return;
}
var g = new Viva.Graph.graph(),
properties = [],
key;
for (key in obj) {
g.addNode(key);
properties.push(key);
}
properties.forEach(function(propName) {
var content = '',
foundDependencies = {};
if (typeof obj[propName] === 'function') {
content = obj[propName].toString();
}
if (content) {
properties.forEach(function(otherPropName) {
// ignore self-declaration
if (otherPropName !== propName) {
if (content.match(new RegExp('\\b' + otherPropName + '\\b'))) {
// make sure we add it only once.
foundDependencies[otherPropName] = true;
}
}
});
for(var dependency in foundDependencies) {
if (foundDependencies.hasOwnProperty(dependency)) {
g.addLink(propName, dependency);
}
}
}
});
return Viva.Graph.serializer().storeToJSON(g);
}
function Test() {
this.foo = function() {
this.bar();
};
this.bar = function() {
this.deadEnd();
};
this.deadEnd = function() {
};
}
var g = buildObjectCallGraph(new Test());
$('#graphJSON').val(g);
function render(graphJSON) {
var graphics = Viva.Graph.View.svgGraphics(),
graph =...