<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="css/dependency.css">
<link rel="stylesheet" type="text/css" href="components/sidr/stylesheets/jquery.sidr.dark.css">
<link rel="stylesheet" type="text/css" href="components/editor/editor.css">
</head>
<body>
<!-- A lot of Javascript here :) -->
<script type="text/javascript" src="components/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="components/underscore/underscore-min.js"></script>
<script type="text/javascript" src="components/d3/d3.js"></script>
<!-- ================================================= -->
<!-- ===========ACTUAL HTML ================ -->
<!-- ================================================= -->
<form id="form">
<label><input type="range" name="circle_size" min="1" max="50" value="15"/> Circle size</label><br>
<label><input type="range" name="charge_multiplier" min="1" max="500" value="100"/> Charge multiplier</label><br>
<label><input type="range" name="link_strength" min="0.1" max="100" value="7"/> Link strength</label><br>
<label><input type="checkbox" name="show_texts_near_circles"/> Show names</label><br>
<input id="search_input" placeholder="Type regexp to filter nodes" style="width:100%;"><br>
</form>
<!-- Add editor logic with button and everything else -->
<script type="text/javascript" src="components/sidr/jquery.sidr.js"></script>
<script type="text/javascript" src="components/ace/ace.js"></script>
<script type="text/javascript" src="components/editor/editor.js"></script>
<a id="simple-menu" class="editor-button" href="#sidr">Live editor</a>
<div id="chart">
<!-- Here the SVG will be placed-->
</div>
<script type="text/javascript" src="origin.js"></script>
<script src="components/depvis/depvis-graph-actions-select.js"></script>
<script src="components/depvis/depvis-parse.js"></script>
<script src="components/depvis/depvis-config.js"></script>
<script src="components/depvis/depvis-visualizer.js"></script>
<script>
// ===================================================
// =============== CONFIGURABLE PARAMS ==============
// ===================================================
let config = dvconfig.create();
const dvgraph = objcdv.parse_dependencies_graph(dependencies);
const d3graph = dvgraph.d3jsGraph();
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
// ===================================================
// =============== http://d3js.org/ Magic ===========
// ===================================================
const container = d3.select("#chart").append("svg")
.attr("width", x)
.attr("height", y)
.style("overflow", "hidden");
const svg = container.append('g');
const actions = graph_actions.create(svg, dvgraph);
let visualizer = dvvisualizer.create(svg, config, d3graph);
visualizer.initialize();
visualizer.setupZoom(container);
// ===================================================
// =============== NODES SETUP ==================
// ===================================================
// Handling pressing
visualizer.objectNodes
.on("click", d => {
if (d3.event.defaultPrevented) { return }
actions.selectNodesStartingFromNode(d, 1);
visualizer.reapply_charge_and_links()
})
.on("contextmenu", d => {
if (d3.event.defaultPrevented) { return }
// Don't actually show context menu
d3.event.preventDefault();
actions.selectNodesStartingFromNode(d);
visualizer.reapply_charge_and_links()
});
/*
Window resize update
*/
w.onresize = () => {
x = w.innerWidth || e.clientWidth || g.clientWidth;
y = w.innerHeight || e.clientHeight || g.clientHeight;
container.attr("width", Math.ceil(x)).attr("height", Math.ceil(y));
visualizer.updateCenter(x / 2, y / 2);
};
</script>
<script>
// ===================================================
// =============== INPUTS HANDLING ==============
// ===================================================
d3.selectAll("input").on("change", function change() {
if (this.name === "circle_size") {
config.default_circle_radius = parseInt(this.value);
visualizer.updateRadiuses(parseInt(this.value));
}
if (this.name === "charge_multiplier") {
let chargeMultiplier = parseInt(this.value);
visualizer.reapply_charge(chargeMultiplier)
}
if (this.name === "link_strength") {
let linkStrength = parseInt(this.value) / 10;
visualizer.reapply_links_strength(linkStrength)
}
if (this.name === "show_texts_near_circles") {
visualizer.updateTextVisibility(this.checked)
}
});
</script>
<script>
// ===================================================
// =============== LIVE FILTERING ==============
// ===================================================
function live_filter_graph(regexp, classname, invert) {
classname = setDefaultValue(classname, "filtered");
invert = setDefaultValue(invert, false);
const re = new RegExp(regexp, "i");
visualizer.allNodes
.classed(classname, node => {
let filtered = !node.name.match(re);
filtered = invert ? !filtered : filtered;
node.filtered = filtered;
node.neighbours = !filtered;
return filtered;
})
.transition();
svg.selectAll('.link')
.classed(classname, l => {
let filtered = !(l.sourceNode.name.match(re) && l.targetNode.name.match(re));
filtered = invert ? !filtered : filtered;
return filtered;
})
.attr("marker-end", l => {
let filtered = !(l.sourceNode.name.match(re) && l.targetNode.name.match(re));
filtered = invert ? !filtered : filtered;
return filtered ? "" : "url(#default)"
})
.transition()
}
d3.select("#search_input").on("input", function () {
// Filter all items
console.log("Input changed to" + this.value);
actions.deselect_selected_node();
if (this.value && this.value.length) {
live_filter_graph(this.value, "filtered");
}
visualizer.reapply_charge_and_links();
});
</script>