feat: show bigrams on the virtual keyboard

aradzie · Apr 3, 2024 · 76e4e1d · 76e4e1d
1 parent 6a5c4a6
commit 76e4e1d
Show file tree

Hide file tree

Showing 11 changed files with 463 additions and 21 deletions.
diff --git a/packages/keybr-keyboard-ui/lib/HeatmapLayer.test.tsx b/packages/keybr-keyboard-ui/lib/HeatmapLayer.test.tsx
@@ -3,7 +3,7 @@ import test from "ava";
 import TestRenderer from "react-test-renderer";
 import { HeatmapLayer } from "./HeatmapLayer.tsx";
 
-test("render empty", (t) => {
+test("empty", (t) => {
   const keyboard = loadKeyboard(Layout.EN_US);
 
   const renderer = TestRenderer.create(
@@ -15,16 +15,16 @@ test("render empty", (t) => {
   t.snapshot(renderer.toJSON());
 });
 
-test("render with equal counts", (t) => {
+test("equal counts", (t) => {
   const keyboard = loadKeyboard(Layout.EN_US);
 
   const renderer = TestRenderer.create(
     <KeyboardContext.Provider value={keyboard}>
       <HeatmapLayer
         histogram={[
-          [{ codePoint: 0x0061 }, 1],
-          [{ codePoint: 0x0062 }, 1],
-          [{ codePoint: 0x0063 }, 1],
+          [{ codePoint: /* a */ 0x0061 }, 1],
+          [{ codePoint: /* b */ 0x0062 }, 1],
+          [{ codePoint: /* c */ 0x0063 }, 1],
         ]}
         modifier="f"
       />
@@ -34,16 +34,35 @@ test("render with equal counts", (t) => {
   t.snapshot(renderer.toJSON());
 });
 
-test("render with different counts", (t) => {
+test("different counts", (t) => {
   const keyboard = loadKeyboard(Layout.EN_US);
 
   const renderer = TestRenderer.create(
     <KeyboardContext.Provider value={keyboard}>
       <HeatmapLayer
         histogram={[
-          [{ codePoint: 0x0061 }, 1],
-          [{ codePoint: 0x0062 }, 2],
-          [{ codePoint: 0x0063 }, 3],
+          [{ codePoint: /* a */ 0x0061 }, 1],
+          [{ codePoint: /* b */ 0x0062 }, 2],
+          [{ codePoint: /* c */ 0x0063 }, 3],
+        ]}
+        modifier="f"
+      />
+    </KeyboardContext.Provider>,
+  );
+
+  t.snapshot(renderer.toJSON());
+});
+
+test("combine counts for the same key", (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <HeatmapLayer
+        histogram={[
+          [{ codePoint: /* a */ 0x0061 }, 1],
+          [{ codePoint: /* A */ 0x0041 }, 1],
+          [{ codePoint: /* b */ 0x0062 }, 1],
         ]}
         modifier="f"
       />

diff --git a/packages/keybr-keyboard-ui/lib/HeatmapLayer.test.tsx.md b/packages/keybr-keyboard-ui/lib/HeatmapLayer.test.tsx.md
@@ -4,7 +4,7 @@ The actual snapshot is saved in `HeatmapLayer.test.tsx.snap`.
 
 Generated by [AVA](https://avajs.dev).
 
-## render empty
+## empty
 
 > Snapshot 1
 
@@ -17,7 +17,7 @@ Generated by [AVA](https://avajs.dev).
       type: 'svg',
     }
 
-## render with equal counts
+## equal counts
 
 > Snapshot 1
 
@@ -61,7 +61,7 @@ Generated by [AVA](https://avajs.dev).
       type: 'svg',
     }
 
-## render with different counts
+## different counts
 
 > Snapshot 1
 
@@ -104,3 +104,37 @@ Generated by [AVA](https://avajs.dev).
       },
       type: 'svg',
     }
+
+## combine counts for the same key
+
+> Snapshot 1
+
+    {
+      children: [
+        {
+          children: null,
+          props: {
+            className: 'spot spot_f',
+            cx: 269,
+            cy: 139,
+            r: 5,
+          },
+          type: 'circle',
+        },
+        {
+          children: null,
+          props: {
+            className: 'spot spot_f',
+            cx: 89,
+            cy: 99,
+            r: 25,
+          },
+          type: 'circle',
+        },
+      ],
+      props: {
+        x: 15,
+        y: 15,
+      },
+      type: 'svg',
+    }
diff --git a/packages/keybr-keyboard-ui/lib/HeatmapLayer.test.tsx.snap b/packages/keybr-keyboard-ui/lib/HeatmapLayer.test.tsx.snap
diff --git a/packages/keybr-keyboard-ui/lib/HeatmapLayer.tsx b/packages/keybr-keyboard-ui/lib/HeatmapLayer.tsx
@@ -26,29 +26,29 @@ export const HeatmapLayer = memo(function HeatmapLayer({
         switch (modifier) {
           case "h": {
             const r = frequency * 15 + 5;
-            // top left ellipse
+            // Top left ellipse.
             return (
               <path
                 key={id}
                 className={clsx(styles.spot, styles.spot_h)}
-                d={`M${cx - r},${cy + r} A${r},${r} 0 0 1 ${cx + r},${cy - r}`}
+                d={`M ${cx - r} ${cy + r} A${r} ${r} 0 0 1 ${cx + r} ${cy - r}`}
               />
             );
           }
           case "m": {
             const r = frequency * 15 + 5;
-            // bottom right ellipse
+            // Bottom right ellipse.
             return (
               <path
                 key={id}
                 className={clsx(styles.spot, styles.spot_m)}
-                d={`M${cx - r},${cy + r} A${r},${r} 0 0 0 ${cx + r},${cy - r}`}
+                d={`M ${cx - r} ${cy + r} A ${r} ${r} 0 0 0 ${cx + r} ${cy - r}`}
               />
             );
           }
           case "f": {
             const r = frequency * 20 + 5;
-            // just circle
+            // Just a circle.
             return (
               <circle
                 key={id}
@@ -72,20 +72,21 @@ function normalize(
   const map = new Map<KeyShape, number>();
   for (const [{ codePoint }, count] of histogram) {
     if (count > 0) {
-      const combo = keyboard.getCombo(codePoint);
-      if (combo != null && combo.prefix == null) {
+      let combo = keyboard.getCombo(codePoint);
+      while (combo != null) {
         const shape = keyboard.getShape(combo.id);
         if (shape != null) {
-          map.set(shape, count);
+          map.set(shape, (map.get(shape) ?? 0) + count);
         }
+        combo = combo.prefix;
       }
     }
   }
   if (map.size > 0) {
     const min = Math.min(...map.values());
     const max = Math.max(...map.values());
     return [...map]
-      .sort((a, b) => a[1] - b[1])
+      .sort(([, a], [, b]) => a - b)
       .map(([shape, count]) => [
         shape,
         max > min ? (count - min) / (max - min) : 0.5,

diff --git a/packages/keybr-keyboard-ui/lib/TransitionsLayer.module.less b/packages/keybr-keyboard-ui/lib/TransitionsLayer.module.less
@@ -0,0 +1,14 @@
+#marker {
+  /* Name only. */
+}
+
+.arrowPath {
+  fill: none;
+  stroke: #333;
+  stroke-width: 1px;
+}
+
+.arrowMarker {
+  fill: #333;
+  stroke: none;
+}
diff --git a/packages/keybr-keyboard-ui/lib/TransitionsLayer.module.less.d.ts b/packages/keybr-keyboard-ui/lib/TransitionsLayer.module.less.d.ts
@@ -0,0 +1,3 @@
+export const marker: string;
+export const arrowPath: string;
+export const arrowMarker: string;
diff --git a/packages/keybr-keyboard-ui/lib/TransitionsLayer.test.tsx b/packages/keybr-keyboard-ui/lib/TransitionsLayer.test.tsx
@@ -0,0 +1,61 @@
+import { KeyboardContext, Layout, loadKeyboard, Ngram2 } from "@keybr/keyboard";
+import test from "ava";
+import TestRenderer from "react-test-renderer";
+import { TransitionsLayer } from "./TransitionsLayer.tsx";
+
+test("empty", (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+  const ngram = new Ngram2([/* a */ 0x0061, /* b */ 0x0062, /* c */ 0x0063]);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <TransitionsLayer ngram={ngram} />
+    </KeyboardContext.Provider>,
+  );
+
+  t.snapshot(renderer.toJSON());
+});
+
+test("equal counts", (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+  const ngram = new Ngram2([/* a */ 0x0061, /* b */ 0x0062, /* c */ 0x0063]);
+  ngram.set(/* a */ 0x0061, /* b */ 0x0062, 1);
+  ngram.set(/* b */ 0x0062, /* c */ 0x0063, 1);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <TransitionsLayer ngram={ngram} />
+    </KeyboardContext.Provider>,
+  );
+
+  t.snapshot(renderer.toJSON());
+});
+
+test("different counts", (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+  const ngram = new Ngram2([/* a */ 0x0061, /* b */ 0x0062, /* c */ 0x0063]);
+  ngram.set(/* a */ 0x0061, /* b */ 0x0062, 1);
+  ngram.set(/* b */ 0x0062, /* c */ 0x0063, 2);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <TransitionsLayer ngram={ngram} />
+    </KeyboardContext.Provider>,
+  );
+
+  t.snapshot(renderer.toJSON());
+});
+
+test("self arrow", (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+  const ngram = new Ngram2([/* a */ 0x0061, /* b */ 0x0062, /* c */ 0x0063]);
+  ngram.set(/* a */ 0x0061, /* a */ 0x0061, 1);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <TransitionsLayer ngram={ngram} />
+    </KeyboardContext.Provider>,
+  );
+
+  t.snapshot(renderer.toJSON());
+});