86 lines
2.7 KiB
HTML
86 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<body>
|
|
<script src="https://d3js.org/d3.v5.min.js"></script>
|
|
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
|
|
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
|
|
<div id="graph" style="text-align: center;"></div>
|
|
<script>
|
|
var dotSrc = `
|
|
<INSERT_DOT>
|
|
`;
|
|
|
|
var dotSrcLines;
|
|
// Label to assembly line mapping
|
|
var labelAsm = {};
|
|
// regex to find node label line
|
|
const re = /^"(?<node>[^"]+)" \[label="\1/;
|
|
var graphviz = d3.select("#graph").graphviz();
|
|
|
|
function render() {
|
|
var t = d3.transition().delay(100).duration(500);
|
|
graphviz.transition(t).renderDot(dotSrc).on("end", interactive);
|
|
}
|
|
|
|
function setup() {
|
|
dotSrcLines = dotSrc.split('\n');
|
|
console.log("Removing assembly lines from nodes");
|
|
// find the assembly line for each label and preserve it in labelAsm
|
|
for (i = 0; i < dotSrcLines.length;) {
|
|
console.log("checking line %d: %s", i, dotSrcLines[i]);
|
|
match = dotSrcLines[i].match(re);
|
|
if (match && dotSrcLines[i+2].startsWith(' ')) {
|
|
console.log(match);
|
|
node = match.groups['node'];
|
|
console.log('Found node "%s" on line %d', node, i);
|
|
labelAsm[node] = dotSrcLines[i+2];
|
|
console.log(labelAsm);
|
|
console.log('Deleting line %d: %s', i+2, dotSrcLines[i+2]);
|
|
dotSrcLines.splice(i+2, 1);
|
|
i = i+3;
|
|
} else {
|
|
i++;
|
|
}
|
|
}
|
|
dotSrc = dotSrcLines.join('\n');
|
|
render();
|
|
}
|
|
|
|
function interactive() {
|
|
nodes = d3.selectAll('.node');
|
|
nodes.on("click", function () {
|
|
var title = d3.select(this).selectAll('title').text().trim();
|
|
var text = d3.select(this).selectAll('text').text();
|
|
var id = d3.select(this).attr('id');
|
|
var class1 = d3.select(this).attr('class');
|
|
dotElement = title.replace('->',' -> ');
|
|
console.log('Element id="%s" class="%s" title="%s" text="%s" dotElement="%s"', id, class1, title, text, dotElement);
|
|
console.log('Inserting assembly line for "%s"', dotElement);
|
|
for (i = 0; i < dotSrcLines.length;) {
|
|
var match = dotSrcLines[i].match(re);
|
|
if (match) {
|
|
var node = match.groups['node'];
|
|
if (node === dotElement) {
|
|
// check if we have an assembly line
|
|
var asm = labelAsm[node];
|
|
if (asm) {
|
|
// toggle the assembly line
|
|
if (dotSrcLines[i+2].startsWith(' ')) {
|
|
dotSrcLines.splice(i+2, 1);
|
|
} else {
|
|
dotSrcLines.splice(i+2, 0, asm);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
i++;
|
|
}
|
|
dotSrc = dotSrcLines.join('\n');
|
|
render();
|
|
});
|
|
}
|
|
|
|
setup();
|
|
</script>
|