@@ -230,6 +230,8 @@
 
 #sg-tooltip {
     position: absolute;
+    top: 0px;
+    left: 0px;
     visibility: hidden;
     pointer-events: none;
     border: 0px;
@@ -322,3 +324,79 @@
     display: inline-block;
     margin: 0px 1px;
 }
+
+/* ------------------------------------------------------------------------------------------------
+ * Help
+ */
+
+#sg-help-toggle {
+    visibility: hidden;
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    z-index: 3;
+}
+
+.sg-help-label {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    background-color: #bbbbbb;
+    padding: 0px;
+    border-radius: 6px;
+    z-index: 2;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    margin: 0px;
+    font-size: 18px;
+}
+
+.sg-help-content {
+    visibility: hidden;
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    background-color: #bbbbbb;
+    padding: 6px;
+    border-radius: 6px;
+    z-index: 1;
+    min-height: 18px;
+    min-width: 18px;
+    max-width: 300px;
+    margin: 0px;
+}
+
+#sg-help-toggle:checked ~ .sg-help-content {
+    visibility: visible;
+}
+
+.sg-help-content h1 {
+    font-size: inherit;
+}
+
+.sg-help-content kbd {
+    font-family: monospace;
+    display: inline-block;
+    border-radius: 3px;
+    padding: 0px 4px;
+    box-shadow: 1px 1px 1px #777;
+    margin: 2px;
+    font-size: small;
+    vertical-align: text-bottom;
+    background: #eee;
+    font-variant: small-caps;
+}
+
+.sg-help-meta {
+    font-style: italic;
+}
+
+.sg-help-byline {
+    line-height: 20px;
+    font-style: italic;
+    width: 100%;
+    margin-left: 24px;
+    text-align: left;
+}
@@ -1,18 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class=""sg-container">
 
 <head>
     <meta charset="utf-8">
     <title>Stack Graph Visualization</title>
-    <style>
-        html,
-        body,
-        #container {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-        }
-    </style>
     <link href="visualization.css" type="text/css" rel="stylesheet"></link>
     <script src="https://d3js.org/d3.v7.js"></script>
     <script src="https://unpkg.com/d3-dag@0.10.0"></script>
@@ -1021,14 +1012,29 @@
             ]
         ;
     </script>
+    <style>
+        html, body, #container {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        overflow: hidden;
+        }
+    </style>
 </head>
 
 <body>
+    <div id="controls">
+        <input type="checkbox" id="show_all_node_labels" />
+        <label for="show_all_node_labels">show all node labels</label>
+    </div>
     <div id="container">
     </div>
     <script type="text/javascript">
         let container = d3.select("\#container");
-        new StackGraph(container, graph, paths);
+        const sg = new StackGraph(container, graph, paths, { version: "tree-sitter-stack-graph dev" });
+        document.getElementById("show_all_node_labels").addEventListener("click", function (ev) {{
+            sg.set_show_all_node_labels(ev.target.checked)
+        }});
     </script>
 </body>
 
 
@@ -13,7 +13,9 @@ class StackGraph {
     static distx = 15;
     static disty = 15;
 
-    constructor(container, graph, paths) {
+    constructor(container, graph, paths, metadata) {
+        this.metadata = metadata;
+
         this.graph = graph;
         this.paths = paths;
         this.compute_data();
@@ -116,8 +118,8 @@ class StackGraph {
     }
 
     set_show_all_node_labels(yn) {
-      this.show_all_node_labels = yn;
-      this.render();
+        this.show_all_node_labels = yn;
+        this.render();
     }
 
     render() {
@@ -215,6 +217,9 @@ class StackGraph {
             .attr('id', 'sg-tooltip')
             .classed(this.tooltip_orient_class(), true);
 
+        // help
+        this.render_help();
+
         // mouse events
         nodes
             .on("mouseover", (e, d) => {
@@ -260,6 +265,7 @@ class StackGraph {
         d3.select(window).on("keyup", (e) => {
             this.paths_keypress(e);
             this.tooltip_keypress(e);
+            this.help_keypress(e);
         })
     }
 
@@ -309,16 +315,15 @@ class StackGraph {
                 break;
             case "scope":
                 if (this.show_all_node_labels) {
-                    console.log(node);
                     let v = '';
                     let l = '';
                     for (let i = 0; i < node.debug_info.length; i++) {
-                      let info = node.debug_info[i];
-                      if (info.key == "tsg_variable") {
-                        v = info.value;
-                      } else if (info.key == "tsg_location") {
-                        l = info.value
-                      }
+                        let info = node.debug_info[i];
+                        if (info.key == "tsg_variable") {
+                            v = info.value;
+                        } else if (info.key == "tsg_location") {
+                            l = info.value
+                        }
                     }
                     this.render_symbol_node(g, v + " " + l);
                     g.classed('plain_labeled_node', true);
@@ -509,7 +514,7 @@ class StackGraph {
 
     tooltip_keypress(e) {
         const old_class = this.tooltip_orient_class();
-        switch(e.keyCode) {
+        switch (e.keyCode) {
             case 87: // w
                 this.current_orient.y = "north";
                 break;
@@ -684,7 +689,7 @@ class StackGraph {
         tooltip.add_row("end node", `${this.node_id_to_str(path.end_node)}`);
 
         const node_id = (this.current_node && this.node_to_id_str(this.current_node))
-                            || (this.current_edge && this.node_id_to_str(this.current_edge.source) );
+            || (this.current_edge && this.node_id_to_str(this.current_edge.source));
         const node_data = path.derived.nodes[node_id];
         tooltip.add_row("symbol stack", this.symbol_stack_to_array(node_data.symbol_stack));
         tooltip.add_row("scope stack", this.scope_stack_to_array(node_data.scope_stack));
@@ -696,6 +701,59 @@ class StackGraph {
             || (this.current_edge !== null && path.derived.edges.hasOwnProperty(this.edge_to_id_str(this.current_edge)));
     }
 
+    // ------------------------------------------------------------------------------------------------
+    // Help
+    //
+
+    render_help() {
+        const help = d3.select('body').append('div');
+        help.append('label')
+            .attr('for', 'sg-help-toggle')
+            .attr('class', 'sg-help-label')
+            .text("ⓘ");
+        this.help_toggle = help.append('input')
+            .attr('id', 'sg-help-toggle')
+            .attr('type', 'checkbox');
+        const help_content = help.append('div')
+            .attr('class', 'sg-help-content');
+
+        help_content.append("h1").text("Pan & Zoom");
+        help_content.append("p").html(`
+            Pan by dragging the background with the mouse.
+            Zoom using the scroll wheel.
+        `);
+
+        help_content.append("h1").text("Tooltip");
+        help_content.append("p").html(`
+            Hover over nodes and edges to get a tooltip with detailed information.
+            Change the tooltip orientation using the keys <kbd>w</kbd> for above, <kbd>a</kbd> for left of, <kbd>s</kbd> for below, or <kbd>d</kbd> for right of the pointer.
+        `);
+
+        help_content.append("h1").text("Path Selection");
+        help_content.append("p").html(`
+            Cycle through individual paths by clicking on a node with outgoing paths.
+            While a path is selected, clicks to other nodes than the source node have no effect.
+            Cycle through selected paths using the key <kbd>n</kbd>.
+            Path selection ends after cycling through all paths by clicking the node, or by pressing the <kbd>esc</kbd> key.
+        `);
+
+        help_content.append("p").attr("class", "sg-help-meta").html(`
+            Toggle visibility of this help anytime by pressing <kbd>h</kbd>.
+        `);
+
+        const byline = help_content.append('div')
+            .attr("class", "sg-help-byline");
+        if (this.metadata?.version) {
+            byline.text(this.metadata.version);
+        }
+    }
+
+    help_keypress(e) {
+        if (e.keyCode === 72) {
+            this.help_toggle.property("checked", !this.help_toggle.property("checked"));
+        }
+    }
+
     // ------------------------------------------------------------------------------------------------
     // Node & Edge IDs
     //
 
@@ -16,6 +16,9 @@ static D3: &'static str = include_str!("d3.v7.min.js");
 static D3_DAG: &'static str = include_str!("d3-dag.v0.10.0.min.js");
 static JS: &'static str = include_str!("visualization.js");
 
+static PKG: &'static str = env!("CARGO_PKG_NAME");
+static VERSION: &'static str = env!("CARGO_PKG_VERSION");
+
 //-----------------------------------------------------------------------------
 // StackGraph
 
@@ -29,33 +32,48 @@ impl StackGraph {
             r#"
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
+
 <meta charset="utf-8">
-<title>{}</title>
+<title>{title}</title>
+
+<!-- <link href="visualization.css" type="text/css" rel="stylesheet"></link> -->
 <style>
-{}
-</style>
-<style>
-  html, body, #container {{
-    width: 100%;
-    height: 100%;
-    margin: 0;
-  }}
+{CSS}
 </style>
+
+<!-- <script type="text/javascript" src="d3.v7.min.js"></script> -->
 <script type="text/javascript">
-{}
+{D3}
 </script>
+
+<!-- <script type="text/javascript" src="d3-dag.v0.10.0.min.js"></script> -->
 <script type="text/javascript">
-{}
+{D3_DAG}
 </script>
+
+<!-- <script type="text/javascript" src="visualization.js"></script> -->
 <script charset="utf-8">
-{}
+{JS}
 </script>
+
 <script type="text/javascript">
-  let graph = {};
-  let paths = {};
+  let graph = {graph};
+  let paths = {paths};
 </script>
+
+<style>
+  html, body, #container {{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+  }}
+</style>
+
 </head>
+
 <body>
   <div id="controls">
     <input type="checkbox" id="show_all_node_labels" />
@@ -65,15 +83,14 @@ impl StackGraph {
   </div>
   <script type="text/javascript">
     let container = d3.select("\#container");
-    let sg = new StackGraph(container, graph, paths);
+    let sg = new StackGraph(container, graph, paths, {{ version: "{PKG} {VERSION}" }});
     document.getElementById("show_all_node_labels").addEventListener("click", function (ev) {{
         sg.set_show_all_node_labels(ev.target.checked)
     }});
   </script>
 </body>
 </html>
-        "#,
-            title, CSS, D3, D3_DAG, JS, graph, paths
+"#
         );
         Ok(html)
     }