Add ability to export CFGs to Graphviz DOT graphs (#152)

* Add ability to export CFG to Graphviz DOT format

* Save to DOT with block labels over instead of IDs

* Update version

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spcl/sdfv",
-    "version": "1.2.8",
+    "version": "1.2.9",
     "description": "A standalone viewer for SDFGs",
     "homepage": "https://github.com/spcl/dace-webclient",
     "main": "out/index.js",

src/renderer/renderer.ts

@@ -67,6 +67,7 @@ import {
     offset_sdfg,
     offset_state,
 } from './renderer_elements';
+import { cfgToDotGraph } from '../utils/sdfg/dotgraph';
 
 // External, non-typescript libraries which are presented as previously loaded
 // scripts and global javascript variables:
@@ -521,6 +522,18 @@ export class SDFGRenderer extends EventEmitter {
                     click: () => this.save_as_pdf(true),
                 }));
             }
+            $('<li>').appendTo(menu).append($('<span>', {
+                class: 'dropdown-item',
+                text: 'Export top-level CFG as DOT graph',
+                click: () => {
+                    this.save(
+                        (this.sdfg.attributes?.name ?? 'program') + '.dot',
+                        'data:text/plain;charset=utf-8,' + encodeURIComponent(
+                            cfgToDotGraph(this.sdfg)
+                        )
+                    );
+                },
+            }));
 
             $('<li>').appendTo(menu).append($('<hr>', {
                 class: 'dropdown-divider',

src/utils/sdfg/dotgraph.ts

@@ -0,0 +1,24 @@
+// Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
+
+import { JsonSDFGControlFlowRegion, JsonSDFGEdge } from '../..';
+
+function cfgEdgeToDotGraphEdge(
+    cfg: JsonSDFGControlFlowRegion, edge: JsonSDFGEdge
+): string {
+    const srcName = cfg.nodes[Number(edge.src)].label;
+    const dstName = cfg.nodes[Number(edge.dst)].label;
+    return srcName + ' -> ' + dstName;
+}
+
+export function cfgToDotGraph(cfg: JsonSDFGControlFlowRegion): string {
+    let graphString = '';
+
+    graphString += 'digraph "' + (cfg.attributes?.name ?? 'program') + '" {\n';
+
+    for (const edge of cfg.edges)
+        graphString += '  ' + cfgEdgeToDotGraphEdge(cfg, edge) + '\n';
+
+    graphString += '}\n';
+
+    return graphString;
+}