bolt/utils/dot2html/d3-graphviz-template.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>