search

code.js

@@ -16,7 +16,7 @@ function onLoad() {
     packages = data.Packages
 
     // Show initial (root) packages.
-    $('#roots').text(data.Roots.map(i => packages[i]).join("\n"))
+    $('#roots').text(data.Roots.map(i => packages[i].PkgPath).join("\n"))
 
     // Show broken edges.
     broken = data.Broken
@@ -31,28 +31,38 @@ function onLoad() {
 
     // Populate package/module "directory" tree.
     $('#tree').jstree({
-	"core" : {
-	    "animation" : 0,
-	    "check_callback" : true,
-	    'data' : data.Tree,
+	"core": {
+	    "animation": 0,
+	    "check_callback": true,
+	    'data': data.Tree,
 	},
-	"types" : {
-	    "#" : {
+	"types": {
+	    "#": {
 	    },
-	    "root" : {
-		"icon" : "/static/3.3.11/assets/images/tree_icon.png"
+	    "root": {
+		"icon": "/static/3.3.11/assets/images/tree_icon.png"
 	    },
 	    "module": {
-		"icon" : "https://jstree.com/static/3.3.11/assets/images/tree_icon.png"
+		"icon": "https://jstree.com/static/3.3.11/assets/images/tree_icon.png"
 	    },
 	    "default": {
 	    },
-	    "pkg" : {
+	    "pkg": {
 		"icon": "https://old.jstree.com//static/v.1.0pre/_demo/file.png"
 	    }
 	},
-	"plugins" : ["contextmenu", "dnd", "search", "state", "types", "wholerow"],
+	"plugins": ["search", "state", "types", "wholerow"],
+	"search": {
+	    "case_sensitive": false,
+	    "show_only_matches": true,
+	}
     })
+
+    // Search the tree when the user types in the search box.
+    $("#search").keyup(function () {
+        var searchString = $(this).val();
+        $('#tree').jstree('search', searchString);
+    });
 
     // Show package info when a node is clicked.
     $('#tree').on("changed.jstree", function (e, data) {
@@ -83,7 +93,7 @@ function selectPkg(json) {
 
     // TODO(adonovan): display imports as a set of links,
     // with as ImportPath text and "select dir tree node" as action.
-    if (json.Imports != null) {
+    if (json.Imports != null) { // TODO(adonovan): how can this be null?
 	$('#imports').text(json.Imports.join(" "))
     }
 

index.html

@@ -32,6 +32,11 @@ <h2>Packages</h2>
 	of the graph rooted at the node, divided by the node's
 	in-degree. Click a package to show more information about
 	it.</span></span>
+    <form style='display: inline;'>
+      <label for='search'>Filter:
+	<input id='search' type='text' name='filter' size='50'/></label>
+      <button onclick='this.form.search.value=""'>Clear</button>
+    </form>
   </p>
   <div style='overflow: auto; width: 65%; height: 20em; border: thin solid grey; display: inline-block'>
     <div style='height: 20em;' id='tree'>tree</div>
@@ -46,7 +51,7 @@ <h2>Selected package: <span id='pkgname'>N/A</span></h2>
     <span class="tooltip">ⓘ<span class="tooltiptext">This list shows the packages
 	directly imported by the selected package</span></span>   
     <label for='imports'>Imports:</label>
-    <code><span id='imports'>...</span></code>
+    <code id='imports'>...</code>
   </p>
   <p>
     <span class="tooltip">ⓘ<span class="tooltiptext">Node x dominates

style.css

@@ -2,6 +2,7 @@ body { margin: 1em; font-family: "Minion Pro", serif; }
 h1, h2, h3, h4, .jstree-default { font-family: Lato; } 
 code, pre { font-family: Consolas, monospace; }
 button { font-size: 50%; }
+pre#imports { font-size: 50%; max-height: 3em; overflow: scroll; }
 
 /* the ⓘ symbol */
 .tooltip {