docs/module-diagram.html
<html>
<head>
<title>dependo</title>
<style>
body {
background: #fff;
padding:0;
margin:0;
font-family:helvetica,arial;
overflow: hidden;
}
.graph {
width:100%;
height: 100%;
fill: #000;
overflow: hidden;
position: relative;
}
svg {
height: 100%;
width: 100%;
}
g.dimmed {
stroke-opacity: 0.05;
}
g.dimmed text.shadow {
stroke-opacity: 0;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
}
text.shadow {
stroke: #fff;
stroke-width: 3px;
stroke-opacity: .8;
}
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
path.link.licensing {
stroke: green;
}
path.link.resolved {
stroke-dasharray: 0,2 1;
}
.control-zoom {
position: fixed;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.25);
padding: 5px;
border-radius: 7px;
z-index: 100;
}
.control-zoom a {
background: rgba(255, 255, 255, 0.75);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
width: 19px;
height: 19px;
border-radius: 4px;
}
.control-zoom a:last-child {
margin: 0;
}
.control-zoom a:hover {
background-color: white;
}
.control-zoom > .control-zoom-in {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUwRTZCRkI3NjQzNzExRTBBQUI3RTAwMUU2MTZDRkQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUwRTZCRkI4NjQzNzExRTBBQUI3RTAwMUU2MTZDRkQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTBFNkJGQjU2NDM3MTFFMEFBQjdFMDAxRTYxNkNGRDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTBFNkJGQjY2NDM3MTFFMEFBQjdFMDAxRTYxNkNGRDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7cwPMXAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAARSURBVAhbY3jcwABBcAATAQBxlwhT4XiahwAAAABJRU5ErkJggg==);
margin-bottom: 5px;
}
.control-zoom > .control-zoom-out {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5MjRDMEQ5NjQzNzExRTBCM0JDQkU2MzVGQTBCNjRDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5MjRDMERBNjQzNzExRTBCM0JDQkU2MzVGQTBCNjRDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTkyNEMwRDc2NDM3MTFFMEIzQkNCRTYzNUZBMEI2NEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTkyNEMwRDg2NDM3MTFFMEIzQkNCRTYzNUZBMEI2NEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7uh53jAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAARSURBVAhbY/jfwABBcAATAQB6xwj7vHGbwAAAAABJRU5ErkJggg==);
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="graph">
<div class="control-zoom">
<a class="control-zoom-in" href="#" title="Zoom in"></a>
<a class="control-zoom-out" href="#" title="Zoom out"></a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var getGraphData = function() { return {"directed":true,"multigraph":false,"graph":[],"nodes":[{"id":"component/abstract-component"},{"id":"events"},{"id":"component/cache-component"},{"id":"../node_modules/pretty-bytes/index"},{"id":"component/cache/events"},{"id":"component/cache/factory"},{"id":"component/dependency-based-component"},{"id":"component/helper/sequential-promise"},{"id":"component/helper/spinner"},{"id":"component/npm/events"},{"id":"component/cache/abstract-driver"},{"id":"../node_modules/events/events"},{"id":"../node_modules/fs-extra/lib/index"},{"id":"../node_modules/jag/lib/jag"},{"id":"../node_modules/pify/index"},{"id":"fs"},{"id":"path"},{"id":"../node_modules/dot-object/index"},{"id":"component/cache/s3-driver"},{"id":"../node_modules/md5-file/index"},{"id":"../node_modules/progress-stream/index"},{"id":"component/helper/aws-credentials"},{"id":"component/cache/s3-unpacked-driver"},{"id":"helper/util"},{"id":"component/cache/void-driver"},{"id":"component/config-based-component"},{"id":"container"},{"id":"component/coverage-component"},{"id":"../node_modules/istanbul/index"},{"id":"component/coverage/events"},{"id":"component/coverage/factory"},{"id":"component/helper/container-transformer"},{"id":"component/helper/module-compile"},{"id":"component/test/events"},{"id":"component/coverage/abstract-driver"},{"id":"component/coverage/s3-driver"},{"id":"component/coverage/volatile-driver"},{"id":"os"},{"id":"../node_modules/chalk/index"},{"id":"component/emit-component"},{"id":"component/emit/emit-module"},{"id":"component/emit/events"},{"id":"../node_modules/print/print"},{"id":"../node_modules/readdir-enhanced/lib/index"},{"id":"component/factory"},{"id":"../node_modules/aws-sdk/lib/aws"},{"id":"component/helper/pattern-transformer"},{"id":"component/helper/transformer"},{"id":"../node_modules/sandboxed-module/lib/sandboxed_module"},{"id":"../node_modules/ora/index"},{"id":"component/npm-component"},{"id":"component/npm/cache"},{"id":"component/npm/npm-module"},{"id":"../node_modules/md5-hex/index"},{"id":"../node_modules/package-hash/index"},{"id":"child_process"},{"id":"component/preprocess-component"},{"id":"component/preprocess/factory"},{"id":"component/preprocess/abstract-transformer"},{"id":"component/preprocess/eval-transformer"},{"id":"logger"},{"id":"component/test-component"},{"id":"component/test/unit-runner"},{"id":"../node_modules/mocha/index"},{"id":"../node_modules/uuid/v1"},{"id":"config/abstract-config"},{"id":"config/factory"},{"id":"config/yaml-config"},{"id":"../node_modules/yaml-js/lib/yaml"},{"id":"../node_modules/yamljs/lib/Yaml"},{"id":"emitter"},{"id":"helper/env"},{"id":"recink"},{"id":"../node_modules/merge/merge"}],"links":[{"source":0,"target":1},{"source":2,"target":3},{"source":2,"target":4},{"source":2,"target":5},{"source":2,"target":6},{"source":2,"target":7},{"source":2,"target":8},{"source":2,"target":9},{"source":10,"target":11},{"source":10,"target":12},{"source":10,"target":13},{"source":10,"target":14},{"source":10,"target":4},{"source":10,"target":15},{"source":10,"target":16},{"source":4,"target":17},{"source":5,"target":10},{"source":18,"target":19},{"source":18,"target":14},{"source":18,"target":20},{"source":18,"target":10},{"source":18,"target":21},{"source":18,"target":15},{"source":18,"target":16},{"source":22,"target":12},{"source":22,"target":18},{"source":22,"target":23},{"source":22,"target":16},{"source":24,"target":10},{"source":25,"target":0},{"source":25,"target":26},{"source":25,"target":16},{"source":27,"target":28},{"source":27,"target":14},{"source":27,"target":29},{"source":27,"target":30},{"source":27,"target":6},{"source":27,"target":31},{"source":27,"target":32},{"source":27,"target":33},{"source":27,"target":15},{"source":27,"target":16},{"source":29,"target":17},{"source":30,"target":34},{"source":35,"target":34},{"source":35,"target":21},{"source":35,"target":16},{"source":36,"target":12},{"source":36,"target":14},{"source":36,"target":34},{"source":36,"target":15},{"source":36,"target":37},{"source":36,"target":16},{"source":6,"target":38},{"source":6,"target":25},{"source":39,"target":25},{"source":39,"target":40},{"source":39,"target":41},{"source":39,"target":31},{"source":39,"target":7},{"source":39,"target":16},{"source":40,"target":12},{"source":40,"target":42},{"source":40,"target":43},{"source":40,"target":41},{"source":40,"target":16},{"source":41,"target":17},{"source":44,"target":0},{"source":21,"target":45},{"source":31,"target":46},{"source":31,"target":47},{"source":32,"target":48},{"source":8,"target":49},{"source":50,"target":12},{"source":50,"target":6},{"source":50,"target":41},{"source":50,"target":51},{"source":50,"target":9},{"source":50,"target":52},{"source":50,"target":37},{"source":50,"target":16},{"source":51,"target":12},{"source":51,"target":16},{"source":9,"target":17},{"source":52,"target":12},{"source":52,"target":53},{"source":52,"target":54},{"source":52,"target":55},{"source":52,"target":7},{"source":52,"target":8},{"source":52,"target":16},{"source":56,"target":0},{"source":56,"target":25},{"source":56,"target":57},{"source":56,"target":26},{"source":59,"target":58},{"source":59,"target":60},{"source":57,"target":58},{"source":61,"target":42},{"source":61,"target":6},{"source":61,"target":41},{"source":61,"target":31},{"source":61,"target":33},{"source":61,"target":62},{"source":33,"target":17},{"source":62,"target":63},{"source":62,"target":64},{"source":62,"target":15},{"source":62,"target":60},{"source":62,"target":16},{"source":65,"target":12},{"source":65,"target":14},{"source":65,"target":15},{"source":66,"target":65},{"source":67,"target":68},{"source":67,"target":69},{"source":67,"target":65},{"source":26,"target":17},{"source":26,"target":42},{"source":70,"target":11},{"source":1,"target":17},{"source":23,"target":15},{"source":23,"target":16},{"source":60,"target":38},{"source":72,"target":73},{"source":72,"target":0},{"source":72,"target":66},{"source":72,"target":26},{"source":72,"target":70},{"source":72,"target":1},{"source":72,"target":60},{"source":72,"target":16}]};};
var graphIdentification = "6f14928243f36da111ed87145e2cfd0751d03164";
var nodePositions = null; //replace with the object you find in console to persist node positions
(function() {
var url = 'data.json'
var r = 10;
var graph, layout, zoom, nodes, links, data;
var linkedByIndex = {};
var graphWidth, graphHeight;
// Helpers
function formatClassName(prefix, object) {
return prefix + '-' + object.id.replace(/(\.|\/)/gi, '-');
}
function findElementByNode(prefix, node) {
var selector = '.'+formatClassName(prefix, node);
return graph.select(selector);
}
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}
function fadeRelatedNodes(d, opacity, nodes, links) {
// Clean
$('path.link').removeAttr('data-show');
nodes.style("stroke-opacity", function(o) {
var thisOpacity;
if (isConnected(d, o)) {
thisOpacity = 1;
} else {
thisOpacity = opacity;
}
this.setAttribute('fill-opacity', thisOpacity);
this.setAttribute('stroke-opacity', thisOpacity);
if(thisOpacity == 1) {
this.classList.remove('dimmed');
} else {
this.classList.add('dimmed');
}
return thisOpacity;
});
links.style("stroke-opacity", function(o) {
if (o.source === d) {
// Highlight target/sources of the link
var elmNodes = graph.selectAll('.'+formatClassName('node', o.target));
elmNodes.attr('fill-opacity', 1);
elmNodes.attr('stroke-opacity', 1);
elmNodes.classed('dimmed', false);
// Highlight arrows
var elmCurrentLink = $('path.link[data-source=' + o.source.index + ']');
elmCurrentLink.attr('data-show', true);
elmCurrentLink.attr('marker-end', 'url(#regular)');
return 1;
} else {
var elmAllLinks = $('path.link:not([data-show])');
if(opacity == 1) {
elmAllLinks.attr('marker-end', 'url(#regular)');
} else {
elmAllLinks.attr('marker-end', '');
}
return opacity;
}
});
}
function render() {
zoom = d3.behavior.zoom();
zoom.on("zoom", onZoomChanged);
// Setup layout
layout = d3.layout.force()
.gravity(.05)
.charge(-300)
.linkDistance(100);
// Setup graph
graph = d3.select(".graph")
.append("svg:svg")
.attr("pointer-events", "all")
.call(zoom)
.append('svg:g')
.attr('width', graphWidth)
.attr('height', graphHeight);
d3.select(window).on("resize", resize);
// Load graph data
var graphData = window.getGraphData();
// Load node placement
var storedNodes = getNodes();
graphData.nodes = graphData.nodes.map(function(n){
if(storedNodes[n.id]){
return storedNodes[n.id];
} else {
return n;
}
})
renderGraph(graphData);
data = graphData;
// Resize
resize();
centerGraph();
// Controlers
$('.control-zoom a').on('click', onControlZoomClicked);
}
function resize() {
graphWidth = window.innerWidth,
graphHeight = window.innerHeight;
graph.attr("width", graphWidth)
.attr("height", graphHeight);
layout.size([graphWidth, graphHeight])
.resume();
}
function centerGraph() {
var centerTranslate = [
(graphWidth / 2) - (graphWidth * 0.2 / 2),
(graphHeight / 2) - (graphHeight * 0.2 / 2),
];
zoom.translate(centerTranslate);
// Render transition
graph.transition()
.duration(500)
.attr("transform", "translate(" + zoom.translate() + ")" + " scale(" + zoom.scale() + ")");
}
function renderGraph(data) {
// Markers
graph.append("svg:defs").selectAll("marker")
.data(['regular'])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
// Lines
links = graph.append('svg:g').selectAll("line")
.data(data.links)
.enter().append("svg:path")
.attr('class', 'link')
.attr("data-target", function(o) { return o.target })
.attr("data-source", function(o) { return o.source })
.attr("marker-end", function(d) { return "url(#regular)"; });
// Nodes
nodes = graph.append('svg:g').selectAll("node")
.data(data.nodes)
.enter().append("svg:g")
.attr("class","node")
.call(layout.drag)
.on("mousedown", onNodeMouseDown);
// Circles
nodes.attr("class", function(d) { return formatClassName('node', d) })
nodes.append("svg:circle")
.attr("class", function(d) { return formatClassName('circle', d) })
.attr("r", 6)
.on("mouseover", onNodeMouseOver.bind(this, nodes, links) )
.on("mouseout", onNodeMouseOut.bind(this, nodes, links) );
// A copy of the text with a thick white stroke for legibility.
nodes.append("svg:text")
.attr("x", 15)
.attr("y", ".31em")
.attr("class", function(d) { return 'shadow ' + formatClassName('text', d) })
.text(function(d) { return d.id; });
nodes.append("svg:text")
.attr("class", function(d) { return formatClassName('text', d) })
.attr("x", 15)
.attr("y", ".31em")
.text(function(d) { return d.id; });
// Build linked index
data.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
// Draw the
layout.nodes(data.nodes);
layout.links(data.links);
layout.on("tick", onTick);
layout.start();
zoom.scale(0.4);
// Render transition
graph.transition()
.duration(500)
.attr("transform", "scale(" + zoom.scale() + ")");
}
function onNodeMouseOver(nodes, links, d) {
// Highlight circle
var elm = findElementByNode('circle', d);
elm.style("fill", '#b94431');
// Highlight related nodes
fadeRelatedNodes(d, .05, nodes, links);
}
function onNodeMouseOut(nodes, links, d) {
// Highlight circle
var elm = findElementByNode('circle', d);
elm.style("fill", '#ccc');
// Highlight related nodes
fadeRelatedNodes(d, 1, nodes, links);
debouncedPersist();
}
function onTick(e) {
links.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function onControlZoomClicked(e) {
var elmTarget = $(this)
var scaleProcentile = 0.20;
// Scale
var currentScale = zoom.scale();
var newScale;
if(elmTarget.hasClass('control-zoom-in')) {
newScale = currentScale * (1 + scaleProcentile);
} else {
newScale = currentScale * (1 - scaleProcentile);
}
newScale = Math.max(newScale, 0);
// Translate
var centerTranslate = [
(graphWidth / 2) - (graphWidth * newScale / 2),
(graphHeight / 2) - (graphHeight * newScale / 2)
];
// Store values
zoom
.translate(centerTranslate)
.scale(newScale);
// Render transition
graph.transition()
.duration(500)
.attr("transform", "translate(" + zoom.translate() + ")" + " scale(" + zoom.scale() + ")");
}
function onZoomChanged() {
graph.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
function persistNodes(nodes) {
var store = nodes.filter(function(n){ return n.fixed }).reduce(function(mem,n){
mem[n.id]=n;
return mem;
},{});
store = JSON.stringify(store);
window.localStorage.setItem("dependo"+window.graphIdentification, store);
}
function getNodes() {
try {
if(window.nodePositions){
return JSON.parse(window.nodePositions);
}else{
return JSON.parse(window.localStorage.getItem("dependo"+window.graphIdentification)) || {};
}
} catch (e) {
return {};
}
}
function onNodeMouseDown(d) {
d.fixed = true;
d3.select(this).classed("sticky", true);
debouncedPersist();
}
var persistTimer;
function debouncedPersist() {
clearTimeout(persistTimer);
persistTimer = setTimeout(function(){
persistNodes(data.nodes)
},1000);
}
render();
})();
</script>
</body>
</html>