Add a search box for nodes

package-lock.json

@@ -307,6 +307,11 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "fuse.js": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
+      "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw=="
+    },
     "get-port": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "svelte-preprocess-markdown": "^2.7.3"
   },
   "dependencies": {
+    "fuse.js": "^6.4.6",
     "sirv-cli": "^1.0.10",
     "vis-data": "^7.1.2",
     "vis-network": "^9.0.0"

src/App.svelte

@@ -5,6 +5,7 @@
   import Network from "./Network.svelte";
   import Summary from "./Summary.svelte";
   import { redraw } from "./store.js";
+  import SearchBox from "./SearchBox.svelte";
 
   let edges;
   let includeDatasetNodes = true;
@@ -40,11 +41,17 @@
 
   <FrontMatter />
 
-  <label><input type="checkbox" bind:checked={includeDatasetNodes} />include
-    dataset</label>
-
   {#if data && selectedNode}
+    <h2>Search Box</h2>
+    <p>Search for a particular dataset or table.</p>
+    <SearchBox {data} bind:root={selectedNode} />
+
+    <h2>Network</h2>
+    <label><input type="checkbox" bind:checked={includeDatasetNodes} />include
+      dataset</label>
     <Network {data} bind:network bind:selectedNode />
+
+    <h2>Summary</h2>
     <Summary {data} {network} bind:root={selectedNode} />
   {/if}
 </div>

src/SearchBox.svelte

@@ -0,0 +1,56 @@
+<script>
+    import Fuse from "fuse.js";
+    import { redraw } from "./store.js";
+
+    export let data;
+    export let root;
+
+    let fuse;
+    let term;
+    let results;
+    let timeout;
+
+    $: data &&
+        (fuse = new Fuse(data.nodes.get(), {
+            keys: ["label"],
+            includeScore: true,
+        }));
+
+    function search(term) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            console.log("search");
+            results = fuse.search(term).slice(0, 10);
+        }, 750);
+    }
+</script>
+
+<input bind:value={term} on:input={() => search(term)} />
+
+<div>
+    {#if results}
+        <table>
+            <thead>
+                <tr>
+                    <th>title</th>
+                    <th>score</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each results as row}
+                    <tr>
+                        <td>
+                            <a
+                                href="javascript:void(0)"
+                                on:click={() => {
+                                    root = row.item;
+                                    redraw.set(true);
+                                }}>{row.item.title}</a>
+                        </td>
+                        <td>{row.score}</td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    {/if}
+</div>

src/Summary.svelte

@@ -24,7 +24,7 @@
 
 <div id="summary">
     {#if output}
-        <h3>Summary of {root.label}</h3>
+        <h3>{root.title}</h3>
         <h4>References</h4>
         <ul>
             {#each output.links.references as node}