Node search with Fuse.js.

web/package-lock.json

@@ -8,7 +8,8 @@
       "name": "vite-svelte-flow-template",
       "version": "0.0.0",
       "dependencies": {
-        "@xyflow/svelte": "^0.0.40"
+        "@xyflow/svelte": "^0.0.40",
+        "fuse.js": "^7.0.0"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.2",
@@ -1386,6 +1387,14 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -3048,6 +3057,11 @@
       "dev": true,
       "optional": true
     },
+    "fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q=="
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",

web/package.json

@@ -19,6 +19,7 @@
     "vite": "^5.2.8"
   },
   "dependencies": {
-    "@xyflow/svelte": "^0.0.40"
+    "@xyflow/svelte": "^0.0.40",
+    "fuse.js": "^7.0.0"
   }
 }

web/src/App.svelte

@@ -47,17 +47,24 @@
     },
   ]);
 
-  function onPaneContextMenu({ detail: { event } }) {
+  function closeNodeSearch() {
+    nodeSearchPos = undefined;
+  }
+  function toggleNodeSearch({ detail: { event } }) {
+    if (nodeSearchPos) {
+      closeNodeSearch();
+      return;
+    }
     event.preventDefault();
     const width = 500;
     const height = 200;
-    showNodeSearch = {
+    nodeSearchPos = {
       top: event.clientY < height - 200 ? event.clientY : undefined,
       left: event.clientX < width - 200 ? event.clientX : undefined,
       right: event.clientX >= width - 200 ? width - event.clientX : undefined,
       bottom: event.clientY >= height - 200 ? height - event.clientY : undefined
     };
-    showNodeSearch = {
+    nodeSearchPos = {
       top: event.clientY,
       left: event.clientX - 150,
     };
@@ -66,20 +73,27 @@
     nodes.update((n) => [...n, node]);
   }
 
-  let showNodeSearch;
+  const boxes = [
+    { name: 'Compute PageRank' },
+    { name: 'Import Parquet' },
+    { name: 'Export Parquet' },
+    { name: 'Export CSV' },
+  ];
+
+  let nodeSearchPos;
 </script>
 
 <div style:height="100vh">
   <SvelteFlow {nodes} {edges} {nodeTypes} fitView
-    on:nodecontextmenu={onPaneContextMenu}
-    on:panecontextmenu={onPaneContextMenu}
-    on:paneclick={() => showNodeSearch = undefined}
-    on:nodeclick={() => showNodeSearch = undefined}
+    on:paneclick={toggleNodeSearch}
+    proOptions={{ hideAttribution: true }}
+    maxZoom={1.5}
+    minZoom={0.3}
     >
     <Background />
     <Controls />
     <Background />
     <MiniMap />
-    {#if showNodeSearch}<NodeSearch on:add={addNode} pos={showNodeSearch} />{/if}
+    {#if nodeSearchPos}<NodeSearch boxes={boxes} on:cancel={closeNodeSearch} on:add={addNode} pos={nodeSearchPos} />{/if}
   </SvelteFlow>
 </div>

web/src/NodeSearch.svelte

@@ -1,23 +1,72 @@
 <script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  import Fuse from 'fuse.js'
+  const dispatch = createEventDispatcher();
   export let pos;
-  console.log({pos});
-  function titleClicked() {
-    expanded = !expanded;
+  export let boxes;
+  let searchBox: HTMLInputElement;
+  let hits = [];
+  let selectedIndex = 0;
+  onMount(() => searchBox.focus());
+  const fuse = new Fuse(boxes, {
+    keys: ['name']
+  })
+  function onInput() {
+    console.log('input', searchBox.value, selectedIndex);
+    hits = fuse.search(searchBox.value);
+    selectedIndex = Math.min(selectedIndex, hits.length - 1);
   }
+  function onKeyDown(e) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, hits.length - 1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+    } else if (e.key === 'Enter') {
+      dispatch('add', {x: pos.left, y: pos.top, ...hits[selectedIndex].item});
+    } else if (e.key === 'Escape') {
+      dispatch('cancel');
+    }
+  }
+
 </script>
 
 <div class="node-search"
 style="top: {pos.top}px; left: {pos.left}px; right: {pos.right}px; bottom: {pos.bottom}px;">
 
-  Node Search!
+  <input
+    bind:this={searchBox}
+    on:input={onInput}
+    on:keydown={onKeyDown}
+    on:focusout={() => dispatch('cancel')}
+    placeholder="Search for box">
+  {#each hits as box, index}
+    <div class="search-result" class:selected={index == selectedIndex}>{index} {box.item.name}</div>
+  {/each}
 </div>
 
 <style>
+  input {
+    width: calc(100% - 26px);
+    font-size: 20px;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    margin: 4px;
+  }
+  .search-result {
+    padding: 4px;
+  }
+  .search-result.selected {
+    background-color: #f80;
+    border-radius: 4px;
+  }
   .node-search {
     position: absolute;
     width: 300px;
     z-index: 5;
-    padding: 8px;
+    padding: 4px;
     border-radius: 4px;
     border: 1px solid #888;
     background-color: white;

web/src/app.css

@@ -1,3 +1,6 @@
+body {
+  margin: 0;
+}
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;