This is an archive of the discontinued LLVM Phabricator instance.

Differential D126218

[BOLT][UTILS] Add dot2html helper tool to embed dot into html
ClosedPublic

Authored by Amir on May 23 2022, 9:27 AM.

Details

Reviewers
rafauler
maksfb
Commits
rG51c20e5804a2: [BOLT][UTILS] Add dot2html helper tool to embed dot into html
Summary

To be rendered in browser using d3-graphviz.
Example:

Diff Detail

Event Timeline

Amir created this revision.May 23 2022, 9:27 AM
Herald added a reviewer: rafauler. · View Herald TranscriptMay 23 2022, 9:27 AM
Herald added a reviewer: maksfb. · View Herald Transcript
Herald added a project: Restricted Project. · View Herald Transcript
Herald added a subscriber: ayermolo. · View Herald Transcript
Harbormaster completed remote builds in B165861: Diff 431402.May 23 2022, 9:35 AM
Amir updated this revision to Diff 431448.May 23 2022, 12:03 PM

chmod +x

Harbormaster completed remote builds in B165889: Diff 431448.May 23 2022, 12:08 PM
Amir updated this revision to Diff 431459.May 23 2022, 1:04 PM

Support for both -dot-tooltip-code and no-code nodes.

Harbormaster completed remote builds in B165899: Diff 431459.May 23 2022, 1:11 PM
Amir published this revision for review.May 23 2022, 1:15 PM
Amir edited the summary of this revision. (Show Details)
Herald added a project: Restricted Project. · View Herald TranscriptMay 23 2022, 1:15 PM
Herald added subscribers: llvm-commits, yota9, aheejin. · View Herald Transcript
Amir mentioned this in D125945: [BOLT][NFC] Dump function CFG into html, rendered in browser using d3-graphviz.May 23 2022, 1:17 PM
rafauler accepted this revision.May 23 2022, 5:00 PM

Awesome!

This revision is now accepted and ready to land.May 23 2022, 5:00 PM
Amir updated this revision to Diff 433662.Jun 1 2022, 11:36 PM

Animated node expansion - removes graph jumping on the screen on a click

This revision was landed with ongoing or failed builds.Jun 1 2022, 11:37 PM
Closed by commit rG51c20e5804a2: [BOLT][UTILS] Add dot2html helper tool to embed dot into html (authored by Amir). · Explain Why
This revision was automatically updated to reflect the committed changes.
Amir added a commit: rG51c20e5804a2: [BOLT][UTILS] Add dot2html helper tool to embed dot into html.
Harbormaster completed remote builds in B167454: Diff 433662.Jun 1 2022, 11:43 PM

Revision Contents

PathSize
bolt/
utils/
dot2html/
85 lines
29 lines

Diff 433663

bolt/utils/dot2html/d3-graphviz-template.html

  • This file was added.
<!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>

bolt/utils/dot2html/dot2html.py

  • This file was added.
PropertyOld ValueNew Value
File Modenull100755
#!/usr/bin/env python3
import argparse
import os
import sys
BASE_PATH = os.path.dirname(os.path.abspath(__file__))
HTML_TEMPLATE_NAME = 'd3-graphviz-template.html'
HTML_TEMPLATE_PATH = os.path.join(BASE_PATH, HTML_TEMPLATE_NAME)
def main():
parser = argparse.ArgumentParser()
parser.add_argument('dotfile', nargs='?', type=argparse.FileType('r'),
default=sys.stdin,
help='Input .dot file, reads from stdin if not set')
parser.add_argument('htmlfile', nargs='?', type=argparse.FileType('w'),
default=sys.stdout,
help='Output .html file, writes to stdout if not set')
args = parser.parse_args()
template = open(HTML_TEMPLATE_PATH, 'r')
for line in template:
if "<INSERT_DOT>" in line:
print(args.dotfile.read(), file=args.htmlfile, end='')
else:
print(line, file=args.htmlfile, end='')
if __name__ == "__main__":
main()