Merge pull request #344 from github/file-viz

More visualization changes

Author: hendrikvanantwerpen

stack-graphs/src/visualization/visualization.css

@@ -85,6 +85,10 @@
     stroke: black;
 }
 
+.sg .node.definition .background {
+    stroke-width: 2px;
+}
+
 /* --- push symbol --- */
 
 .sg .node.push_scoped_symbol .push_scope {
@@ -102,6 +106,10 @@
     fill: black;
 }
 
+.sg .node.reference .background {
+    stroke-width: 2px;
+}
+
 /* --- root --- */
 
 .sg .node.root .background {
@@ -128,6 +136,10 @@
     fill: black;
 }
 
+.sg .node.scope.exported .background {
+    stroke-width: 2px;
+}
+
 /* --- plain labeled node --- */
 
 .sg .node.scope.plain_labeled_node .border {
@@ -139,10 +151,6 @@
     rx: 6px;
 }
 
-.sg .node.scope.plain_labeled_node.exported .background {
-    stroke: black;
-}
-
 /* --- path highlight --- */
 
 .sg .node.path-node .border {
@@ -314,6 +322,40 @@
     margin: 0px 1px;
 }
 
+/* ------------------------------------------------------------------------------------------------
+ * Legend
+ */
+
+#sg-legend {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    background-color: #bbbbbb;
+    padding: 6px;
+    border-radius: 6px;
+    z-index: 1;
+}
+
+#sg-legend h1 {
+    font-variant: small-caps;
+    font-weight: bold;
+    font-size: inherit;
+    border-bottom: solid 1px #777777;
+    margin: 0px;
+}
+
+#sg-legend ul {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+}
+
+#sg-legend li {
+    padding: 3px 6px;
+    margin: 3px 0px;
+    border: 1px solid white;
+}
+
 /* ------------------------------------------------------------------------------------------------
  * Help
  */
@@ -419,6 +461,9 @@
 .sg .node.global .background {
     fill: #0077bb; /* blue */
 }
+#sg-legend .global {
+    background-color: #0077bb; /* blue */
+}
 .sg .edge.global path,
 .sg .edge.global text {
     stroke: #0077bb; /* blue */
@@ -427,7 +472,9 @@
 .sg .node.file-0 .background {
     fill: #77aadd; /* light blue */
 }
-
+#sg-legend .file-0 {
+    background-color: #77aadd; /* light blue */
+}
 .sg .node.file-0 .arrow,
 .sg .edge.file-0 text
 {
@@ -447,6 +494,9 @@
 {
     fill: #ee8866; /* orange */
 }
+#sg-legend .file-1 {
+    background-color: #ee8866; /* orange */
+}
 .sg .node.file-1 .arrow {
     fill: #3d1407; /* orange (darkened) */
 }
@@ -464,6 +514,9 @@
 {
     fill: #eedd88; /* light yellow */
 }
+#sg-legend .file-2 {
+    background-color: #eedd88; /* light yellow */
+}
 .sg .node.file-2 .arrow {
     fill: #413809; /* light yellow (darkened) */
 }
@@ -481,6 +534,9 @@
 {
     fill: #ffaabb; /* pink */
 }
+#sg-legend .file-3 {
+    background-color: #ffaabb; /* pink */
+}
 .sg .node.file-3 .arrow {
     fill: #550011; /* pink (darkened) */
 }
@@ -498,6 +554,9 @@
 {
     fill: #99ddff; /* light cyan */
 }
+#sg-legend .file-4 {
+    background-color: #99ddff; /* light cyan */
+}
 .sg .node.file-4 .arrow {
     fill: #003652; /* light cyan (darkened) */
 }
@@ -515,6 +574,9 @@
 {
     fill: #44bb99; /* mint */
 }
+#sg-legend .file-5 {
+    background-color: #44bb99; /* mint */
+}
 .sg .node.file-5 .arrow {
     fill: #0e251f; /* mint (darkened) */
 }
@@ -532,6 +594,9 @@
 {
     fill: #bbcc33; /* pear */
 }
+#sg-legend .file-6 {
+    background-color: #bbcc33; /* pear */
+}
 .sg .node.file-6 .arrow {
     fill: #25290a; /* pear (darkened) */
 }
@@ -549,6 +614,9 @@
 {
     fill: #aaaa00; /* olive */
 }
+#sg-legend .file-7 {
+    background-color: #aaaa00; /* olive */
+}
 .sg .node.file-7 .arrow {
     fill: #222200; /* olive (darkened) */
 }

stack-graphs/src/visualization/visualization.js

@@ -163,7 +163,8 @@ class StackGraph {
         // render UI
         this.render_help();
         this.render_tooltip();
-        this.render_graph()
+        this.render_legend();
+        this.render_graph();
 
         // pan & zoom
         let zoom = d3.zoom()
@@ -471,9 +472,9 @@ class StackGraph {
         }
     }
 
-    /* ------------------------------------------------------------------------------------------------
-    * Path Highlighting
-    */
+    // ------------------------------------------------------------------------------------------------
+    // Path Highlighting
+    //
 
     paths_mouseover(e, node) {
         if (this.paths_lock !== null) {
@@ -781,6 +782,30 @@ class StackGraph {
             || (this.current_edge !== null && path.derived.edges.hasOwnProperty(this.edge_to_id_str(this.current_edge)));
     }
 
+    // ------------------------------------------------------------------------------------------------
+    // Legend
+    //
+
+    render_legend() {
+        const legend = d3.select('body').append('div')
+            .attr('id', 'sg-legend')
+        legend.append("h1").text("Files");
+        const items = legend.append("ul");
+        items.append("li")
+            .classed("global", true)
+            .text("[global]");
+        for (const file in this.F) {
+            items.append("li")
+                .classed('file-' + this.F[file], true)
+                .text(file);
+        }
+    }
+
+    legend_update() {
+        const legend = d3.select('#sg-legend');
+        legend.style('visibility', this.show_file_legend() ? null : 'hidden');
+    }
+
     // ------------------------------------------------------------------------------------------------
     // Help
     //
@@ -802,6 +827,10 @@ class StackGraph {
             Pan by dragging the background with the mouse.
             Zoom using the scroll wheel.
         `);
+        this.show_files_legend_toggle = this.new_setting(help_content, "sg-files-legend", "Show files legend (<kbd>f</kbd>)", true);
+        this.show_files_legend_toggle.on("change", (e => {
+            this.legend_update();
+        }));
         this.show_all_node_labels_toggle = this.new_setting(help_content, "sg-scope-labels", "Show all node labels (<kbd>l</kbd>)", false);
         this.show_all_node_labels_toggle.on("change", (e => {
             this.render_graph();
@@ -838,6 +867,10 @@ class StackGraph {
 
     help_keypress(e) {
         switch (e.keyCode) {
+            case 70: // f
+                this.show_files_legend_toggle.property("checked", !this.show_files_legend_toggle.property("checked"));
+                this.legend_update();
+                break;
             case 72: // h
                 this.help_toggle.property("checked", !this.help_toggle.property("checked"));
                 break;
@@ -860,6 +893,10 @@ class StackGraph {
         return this.show_all_node_labels_toggle.property("checked");
     }
 
+    show_file_legend() {
+        return this.show_files_legend_toggle.property("checked");
+    }
+
     new_setting(element, id, html, initial) {
         const toggle = element.append("div");
         const toggle_input = toggle.append('input')