Render nvdisasm CFGs in the browser with d3-graphviz

app.py

@@ -24,6 +24,13 @@ MODIFIERS = {
                  "--print-line-info-inline"],
 }
 EXTRA_EXAMPLE = {"cuobjdump": "--function vecadd", "nvdisasm": "--emit-json"}
+GRAPHVIZ_HEAD = "".join(f'<script src="https://cdn.jsdelivr.net/npm/{lib}"></script>' for lib in (
+    "d3@7.9.0/dist/d3.min.js", "@hpcc-js/wasm@2.20.0/dist/graphviz.umd.js", "d3-graphviz@5.6.0/build/d3-graphviz.min.js"))
+GRAPHVIZ_JS = """
+const graph = element.querySelector('.graph');
+d3.select(graph).graphviz({useWorker: false, zoom: true, fit: true})
+  .width(graph.clientWidth).height(graph.clientHeight).renderDot(props.value);
+"""
 EXAMPLES = sorted(str(p) for p in Path(__file__).with_name("examples").glob("*.cubin"))
 
 
@@ -73,7 +80,15 @@ with gr.Blocks(title="cuobjdump / nvdisasm") as demo:
     @gr.render(inputs=results)
     def show(results):
         for label, output in results.items():
-            gr.Code(output, label=label, max_lines=60)
+            if output.startswith("digraph"):
+                gr.Markdown(f"`{label}` (scroll to zoom, drag to pan)")
+                gr.HTML(output.replace("\t", "    "), head=GRAPHVIZ_HEAD, js_on_load=GRAPHVIZ_JS,
+                        html_template='<div class="graph" style="height:70vh;background:white;'
+                                      'border:1px solid var(--border-color-primary)"></div>')
+                with gr.Accordion(f"{label} (DOT source)", open=False):
+                    gr.Code(output, max_lines=60)
+            else:
+                gr.Code(output, label=label, max_lines=60)
 
     tool.change(select_tool, tool, [outputs, modifiers, extra])
     btn.click(run, [file, tool, outputs, modifiers, extra], results)