Add an interactive debugging page

danthedeckie · Mar 19, 2024 · 0e6ce69 · 0e6ce69
1 parent b6b1451
commit 0e6ce69
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 5 deletions.
diff --git a/Makefile b/Makefile
@@ -1,9 +1,9 @@
-serve:
-	node esbuild.mjs serve
-
 build:
 	NODE_ENV='production' node esbuild.mjs build
 
+serve:
+	node esbuild.mjs serve
+
 test:
 	node --experimental-vm-modules node_modules/jest/bin/jest.js
 

diff --git a/dist/debug.html b/dist/debug.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="manifest" href="manifest.json" />
+    <title>Fuzzy list-of-names matcher - Debugging tool</title>
+    <link rel="stylesheet" href="css/main.css" />
+  </head>
+  <body>
+    <h1>Name finder - debugging</h1>
+    <div class="intro">
+      <p>
+        The tools on this page are to help visualise &amp; interactively
+        experiment with the underlying functions used in the main
+        <a href="/">Fuzzy list-of-names matcher</a>.<br />
+        Ideally use the unit tests to drive development for real feature
+        building, but sometimes interactive playing with feature changes is
+        quicker.
+      </p>
+    </div>
+    <div class="entry">
+      <label>
+        normalise
+        <input type="text" id="normaliseInput" /><br />
+        <span id="normaliseOutput"></span>
+      </label>
+      <label>
+        makeStemmed
+        <input type="text" id="makeStemmedInput" /><br />
+        <span id="makeStemmedOutput"></span>
+      </label>
+      <label>
+        makeVariations
+        <input type="text" id="makeVariationsInput" /><br />
+        <span id="makeVariationsOutput"></span>
+      </label>
+    </div>
+    <div class="entry">
+      <label>
+        getScore
+        <input type="text" id="getScoreInput" /><br />
+      </label>
+      <label>
+        getScore search list:
+        <textarea id="getScoreSearchInput"></textarea>
+      </label>
+      <span id="getScoreOutput"></span>
+    </div>
+    <script src="js/debug.js"></script>
+    <script>
+      new EventSource("/esbuild").addEventListener("change", () =>
+        location.reload()
+      );
+    </script>
+  </body>
+</html>
diff --git a/esbuild.mjs b/esbuild.mjs
@@ -8,7 +8,7 @@ const pwd = dirname(fileURLToPath(import.meta.url));
 const [command, ...args] = process.argv.slice(2);
 
 const config = {
-  entryPoints: ["src/js/main.js", "src/css/main.css"],
+  entryPoints: ["src/js/main.js", "src/css/main.css", "src/js/debug.js"],
   outdir: "dist",
   // Stuff you shouldn't need to edit:
   target: ["chrome58", "firefox57", "safari11", "edge19"],

diff --git a/src/js/debug.js b/src/js/debug.js
@@ -0,0 +1,44 @@
+import {
+  normalise,
+  makeStemmed,
+  makeVariations,
+  getScore,
+  makeMatchesMap,
+} from "./lib";
+
+const normaliseInputEl = document.getElementById("normaliseInput");
+const normaliseOutputEl = document.getElementById("normaliseOutput");
+
+normaliseInputEl.addEventListener("input", () => {
+  normaliseOutputEl.innerHTML = normalise(normaliseInputEl.value);
+});
+
+const makeStemmedInputEl = document.getElementById("makeStemmedInput");
+const makeStemmedOutputEl = document.getElementById("makeStemmedOutput");
+
+makeStemmedInputEl.addEventListener("input", () => {
+  makeStemmedOutputEl.innerHTML = makeStemmed(makeStemmedInputEl.value);
+});
+
+const makeVariationsInputEl = document.getElementById("makeVariationsInput");
+const makeVariationsOutputEl = document.getElementById("makeVariationsOutput");
+
+makeVariationsInputEl.addEventListener("input", () => {
+  makeVariationsOutputEl.innerHTML = makeVariations(
+    makeVariationsInputEl.value
+  ).join("<br>");
+});
+
+const getScoreInputEl = document.getElementById("getScoreInput");
+const getScoreSearchInput = document.getElementById("getScoreSearchInput");
+const getScoreOutputEl = document.getElementById("getScoreOutput");
+
+function updateMatchesMapOutput() {
+  getScoreOutputEl.innerHTML = getScore(
+    getScoreInputEl.value,
+    makeMatchesMap(getScoreSearchInput.value.trim().split(/\r?\n/))
+  ).join("<br>");
+}
+
+getScoreInputEl.addEventListener("input", updateMatchesMapOutput);
+getScoreSearchInput.addEventListener("input", updateMatchesMapOutput);
diff --git a/src/js/lib.js b/src/js/lib.js
@@ -70,7 +70,7 @@ export function makeFirstInitialAndLastName(value) {
     .replace(/ . /, " ");
 }
 
-function makeStemmed(value) {
+export function makeStemmed(value) {
   /* This function takes a name and converts it to a simplified "stem"
    * form, eg Thomas -> t_m, Maria -> m_r_, Philip -> f_l_p
    * which catches a lot of spelling variations.