better parser demo experience with debounce

package.json

@@ -24,7 +24,8 @@
     "react": "^18.3.1",
     "react-bootstrap": "1.5.1",
     "react-dom": "^18.3.1",
-    "tsup": "^8.2.4"
+    "tsup": "^8.2.4",
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",

src/App.css

@@ -8,13 +8,13 @@
 
 * {
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 :root {
     --secondary: #00c1fc;
     --primary: #ffda54;
-    
+
     /* change with theme */
     --theme-shade: #fefefe;
     --close: #f5f5f5;
@@ -23,7 +23,7 @@
     --farther: #555;
     --farthest: #333;
     --high-contrast: #444;
-    
+
     --input-bg: #fafafa;
 }
 
@@ -35,7 +35,7 @@
     --farther: #bbb;
     --farthest: #999;
     --high-contrast: #cfcfcf;
-    
+
     --input-bg: #ccc;
 }
 
@@ -52,6 +52,15 @@ body {
     color: var(--high-contrast);
 }
 
+.form-control.is-waiting {
+    /* border-color: #28a745; */
+    padding-right: calc(1.5em + 0.75rem) !important;
+    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0A%3C%21--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%0A%3Csvg%20fill%3D%22%23000000%22%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%0A%09%20viewBox%3D%220%200%2032.055%2032.055%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20d%3D%22M3.968%2C12.061C1.775%2C12.061%2C0%2C13.835%2C0%2C16.027c0%2C2.192%2C1.773%2C3.967%2C3.968%2C3.967c2.189%2C0%2C3.966-1.772%2C3.966-3.967%0A%09%09C7.934%2C13.835%2C6.157%2C12.061%2C3.968%2C12.061z%20M16.233%2C12.061c-2.188%2C0-3.968%2C1.773-3.968%2C3.965c0%2C2.192%2C1.778%2C3.967%2C3.968%2C3.967%0A%09%09s3.97-1.772%2C3.97-3.967C20.201%2C13.835%2C18.423%2C12.061%2C16.233%2C12.061z%20M28.09%2C12.061c-2.192%2C0-3.969%2C1.774-3.969%2C3.967%0A%09%09c0%2C2.19%2C1.774%2C3.965%2C3.969%2C3.965c2.188%2C0%2C3.965-1.772%2C3.965-3.965S30.278%2C12.061%2C28.09%2C12.061z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
 .block-border {
     border: 2px solid var(--farthest);
 }
@@ -94,13 +103,15 @@ hr {
     background-color: var(--closer) !important;
     color: var(--high-contrast);
 }
+
 .bg-white {
     background-color: var(--theme-shade) !important;
 }
 
 /* TODO: better handling of modals across light and dark modes */
-.modal-body, .modal-title {
-    color:#1d1f25;
+.modal-body,
+.modal-title {
+    color: #1d1f25;
 }
 
 .table {
@@ -143,8 +154,8 @@ kbd {
     border-radius: 3px;
     border: 1px solid #b4b4b4;
     box-shadow: 0 1px 1px rgba(0, 0, 0,
-    .2), 0 2px 0 0 rgba(255, 255, 255,
-    .7) inset;
+            .2), 0 2px 0 0 rgba(255, 255, 255,
+            .7) inset;
     color: #333;
     display: inline-block;
     font-size: .85em;
@@ -246,6 +257,7 @@ input {
     text-decoration: none;
     color: var(--farther);
 }
+
 .clickable:hover {
     color: var(--farther);
 }
@@ -257,19 +269,20 @@ input {
     border-radius: 0;
     border-color: var(--farther);
 }
+
 .clear-search-button:hover {
     color: #555;
 }
 
 .btn.bg-white:active,
 .btn.bg-white:hover {
-    color: #555 !important; 
+    color: #555 !important;
 }
 
 .btn-group.full-width {
     display: flex;
 }
-  
+
 .full-width .btn {
     flex: 1;
 }

src/demo-components/ParserDemo.tsx

@@ -15,6 +15,7 @@ import { parsePhrase } from "../lib/src/parsing/parse-phrase";
 // import VPDisplay from "../components/src/vp-explorer/VPDisplay";
 import { entryFeeder } from "./entryFeeder";
 import { removeRedundantVPSs } from "../lib/src/phrase-building/remove-redundant";
+import { useDebouncedCallback } from "use-debounce";
 
 const working = [
   "phrases with simple verbs",
@@ -68,21 +69,30 @@ function ParserDemo({
   const [result, setResult] = useState<
     ReturnType<typeof parsePhrase>["success"]
   >([]);
-  // ReturnType<typeof parsePhrase>["success"]
-  // TODO: don't reparse every keystroke, wait till typing stops
-  // https://stackoverflow.com/questions/42217121/how-to-start-search-only-when-user-stops-typing
   const [errors, setErrors] = useState<string[]>([]);
+  const [noneFound, setNoneFound] = useState<boolean>(false);
+  const debounced = useDebouncedCallback(async (value: string) => {
+    setText(value);
+    await waitforme(100);
+    const res = parsePhrase(tokenizer(value), dictionary);
+    setErrors(res.errors);
+    const r = removeRedundantVPSs(res.success);
+    if (!r.length) setNoneFound(true);
+    setResult(r);
+  }, 200);
   function handleInput(value: string) {
     if (!value) {
       setText("");
       setResult([]);
       setErrors([]);
+      setNoneFound(false);
       return;
     }
-    const res = parsePhrase(tokenizer(value), dictionary);
     setText(value);
-    setErrors(res.errors);
-    setResult(removeRedundantVPSs(res.success));
+    setResult([]);
+    setErrors([]);
+    setNoneFound(false);
+    debounced(value);
   }
   return (
     <div className="mt-3" style={{ marginBottom: "1000px" }}>
@@ -114,11 +124,13 @@ function ParserDemo({
         <input
           dir="rtl"
           className={`form-control ${
-            text && (errors.length || !result.length)
+            !text
+              ? ""
+              : text && (errors.length || noneFound)
               ? "is-invalid"
               : result.length
               ? "is-valid"
-              : ""
+              : "is-waiting"
           }`}
           type="text"
           value={text}
@@ -226,3 +238,11 @@ export default ParserDemo;
 //   console.error(e);
 //   return <div>ERROR RENDERING</div>;
 // }
+
+function waitforme(millisec: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve("");
+    }, millisec);
+  });
+}

src/lib/src/parsing/parse-vp.ts

@@ -37,9 +37,6 @@ import { personsFromPattern1 } from "./parse-noun-word";
 // TODO: word query for kawul/kedul/stat/dyn
 
 // TODO: test all types with pronouns
-// TODO: راشم ورشم درشم
-// TODO: لاړ شه لاړې شئ imperatives
-
 // TODO: way to get an error message for past participle and equative
 // not matching up
 
@@ -52,6 +49,7 @@ import { personsFromPattern1 } from "./parse-noun-word";
 // TODO: This parses extra options with demonstratives کور ته دې بوتلی شم
 
 // TODO: وایې نه خیستلی شو doesn't work
+// TODO: ستا د زاړه پلار سره یې کور ته ځم doesn't work
 
 // FOR display - Verb blocks should display VBP - VBE somehow
 
@@ -107,10 +105,6 @@ function getTenses(
   negative: boolean;
   verb: T.VerbEntry;
 }[] {
-  // TODO: this should be replaced with tagging in objects
-  function isVBP(x: T.ParsedVBE | T.ParsedVBP): x is T.ParsedVBP {
-    return x.info.type === "ability" || x.info.type === "ppart";
-  }
   const negIndex = blocks.findIndex((x) => x.type === "negative");
   const negative: T.NegativeBlock | undefined = blocks[negIndex] as
     | T.NegativeBlock
@@ -1307,3 +1301,8 @@ function createPossesivePossibilities(
     }
   });
 }
+
+// TODO: this should be replaced with tagging in objects
+function isVBP(x: T.ParsedVBE | T.ParsedVBP): x is T.ParsedVBP {
+  return x.info.type === "ability" || x.info.type === "ppart";
+}