Filter problems and summarize recent practice

scripts/gen-problem-cards.py

@@ -37,22 +37,24 @@ def parse_args() -> argparse.Namespace:
 
 
 def read_json(path: Path) -> object:
-    return json.loads(path.read_text())
+    return json.loads(path.read_text(encoding="utf-8"))
 
 
 def card(problem: dict[str, object], page: str, title: str) -> str:
     """One lobby card, named the way the interview will name the exercise.
 
-    Keyed by page name, with the scenario title and no topic tags: the
+    Keyed by page name, with the scenario title and topic metadata: the
     recommendation line reads the title off this card, and "Recommended: Coin
     Change", a `coin-change` key or a "Dynamic Programming" tag tells the
-    candidate what they are about to be asked. The published title is not in
-    the page at all; the source slot is filled from the page map only when the
-    candidate turns that on to drill one problem by name.
+    candidate what they are about to be asked. Topics stay in data attributes
+    for local filtering and are not rendered on the card. The published title
+    is not in the page at all; the source slot is filled from the page map only
+    when the candidate turns that on to drill one problem by name.
     """
+    topics = "|".join(str(topic) for topic in problem.get("topics", []))
     return "\n".join(
         [
-            f'  <button class="problem-card" type="button" data-problem="{html.escape(page)}" data-difficulty="{html.escape(problem["difficulty"])}">',
+            f'  <button class="problem-card" type="button" data-problem="{html.escape(page)}" data-difficulty="{html.escape(problem["difficulty"])}" data-topics="{html.escape(topics)}">',
             f'    <span class="problem-title">{html.escape(title)}</span>',
             '    <span class="problem-source" hidden></span>',
             f'    <span class="problem-meta">{html.escape(problem["difficulty"])}</span>',
@@ -79,7 +81,7 @@ def generated(problems: list) -> str:
 
 def main() -> int:
     args = parse_args()
-    html_text = INDEX.read_text()
+    html_text = INDEX.read_text(encoding="utf-8")
     opening = re.search(
         rf"^([ \t]*){re.escape(START)}[ \t]*$", html_text, flags=re.MULTILINE
     )
@@ -113,7 +115,7 @@ def main() -> int:
         return 0
 
     if updated != html_text:
-        INDEX.write_text(updated)
+        INDEX.write_text(updated, encoding="utf-8")
         print(f"updated {len(problems)} problem cards in web/index.html")
     return 0
 

tests/browser/dom.js

@@ -334,7 +334,20 @@ export function installDocument(markup) {
   // `#start` and `button#start` render into two different places, which is a
   // page a browser cannot produce.
   const node = (element) => {
-    if (!nodes.has(element)) nodes.set(element, new Element(element.tag));
+    if (!nodes.has(element)) {
+      const created = new Element(element.tag);
+      for (const [name, value] of Object.entries(element.attributes)) {
+        if (name.startsWith("data-")) {
+          const key = name
+            .slice(5)
+            .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+          created.dataset[key] = value;
+        }
+      }
+      if ("value" in element.attributes)
+        created.value = element.attributes.value;
+      nodes.set(element, created);
+    }
     return nodes.get(element);
   };
   globalThis.document = {

tests/browser/lobby-render.test.js

@@ -46,6 +46,7 @@ const SIGNED_OUT = {
   start: "Start interview",
   "progress-summary": "Could not load progress saved on this device.",
 };
+const PROBLEM_FILTERS = new Set(["problem-topic", "problem-filter-summary"]);
 
 test("the lobby page loads outside a browser and says what it was given", () => {
   for (const [id, expected] of Object.entries(SIGNED_OUT)) {
@@ -62,7 +63,13 @@ test("no other panel of the lobby speaks before anything has loaded", () => {
   const spoke = [];
   for (const [, id] of markup.matchAll(/id="([^"]+)"/g)) {
     const node = dom.node(id);
-    if (node && node.spoken().length && !(id in SIGNED_OUT)) spoke.push(id);
+    if (
+      node &&
+      node.spoken().length &&
+      !(id in SIGNED_OUT) &&
+      !PROBLEM_FILTERS.has(id)
+    )
+      spoke.push(id);
   }
   assert.deepEqual(
     spoke,

tests/browser/lobby.test.js

@@ -362,6 +362,87 @@ lobbyTest(
   { viewport: { width: 1280, height: 800 } },
 );
 
+lobbyTest(
+  "topic and difficulty filters narrow the problem cards together",
+  async (page) => {
+    await lobby(page);
+    await page.click("details.problem-picker summary");
+
+    await page.selectOption("#problem-topic", "Array");
+    const filtered = await page
+      .locator("[data-problem]:visible")
+      .evaluateAll((cards) =>
+        cards.map((card) => ({
+          difficulty: card.dataset.difficulty,
+          topics: card.dataset.topics.split("|"),
+        })),
+      );
+    assert.ok(filtered.length > 0, "the topic filter hid every problem");
+    assert.ok(
+      filtered.every(
+        (card) => card.difficulty === "Medium" && card.topics.includes("Array"),
+      ),
+      "a visible card did not match both filters",
+    );
+
+    await page.click("#problem-filters-reset");
+    assert.ok(
+      (await page.locator("[data-problem]:visible").count()) > filtered.length,
+      "reset did not restore the other Medium problems",
+    );
+  },
+);
+
+lobbyTest(
+  "recent assessed reports produce a practice snapshot",
+  async (page) => {
+    reports = [
+      {
+        problemId: EASY[0],
+        createdAt: 30,
+        payload: { report: { decision: "NO_HIRE" } },
+      },
+      {
+        problemId: EASY[1],
+        createdAt: 20,
+        payload: { report: { decision: "HIRE" } },
+      },
+      {
+        problemId: MEDIUM[0],
+        createdAt: 10,
+        payload: { report: { decision: "NO_HIRE" } },
+      },
+    ];
+    await lobby(page);
+
+    assert.equal(
+      await page.locator("#recent-performance-summary").textContent(),
+      "Last 3 assessed interviews: 1 passed, 2 missed (33%).",
+    );
+    assert.equal(await page.locator("#recent-performance").isHidden(), false);
+  },
+);
+
+lobbyTest(
+  "a failed report load hides the recent practice snapshot",
+  async (page) => {
+    failing = new Set(["/api/reports"]);
+    await page.goto(`${base}/`, { waitUntil: "domcontentloaded" });
+    await settles(
+      page,
+      () =>
+        document.querySelector("#progress-summary").textContent ===
+        "Could not load saved account progress.",
+    );
+
+    assert.equal(await page.locator("#recent-performance").isHidden(), true);
+    assert.equal(
+      await page.locator("#recent-performance-summary").textContent(),
+      "",
+    );
+  },
+);
+
 lobbyTest(
   "a candidate who touches nothing gets the server's own default length",
   async (page) => {

tests/browser/practice-insights.test.js

@@ -0,0 +1,72 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+import {
+  availableTopics,
+  filterProblems,
+  recentPerformance,
+} from "../../web/practice-insights.js";
+
+const problems = [
+  { id: "a", difficulty: "Easy", topics: ["Array", "Hash Table"] },
+  { id: "b", difficulty: "Medium", topics: ["Array", "Sorting"] },
+  { id: "c", difficulty: "Hard", topics: ["Graph"] },
+];
+
+test("topics are unique and sorted", () => {
+  assert.deepEqual(availableTopics(problems), [
+    "Array",
+    "Graph",
+    "Hash Table",
+    "Sorting",
+  ]);
+});
+
+test("difficulty and topic filters combine", () => {
+  assert.deepEqual(
+    filterProblems(problems, {
+      difficulties: new Set(["Medium", "Hard"]),
+      topic: "Array",
+    }).map((problem) => problem.id),
+    ["b"],
+  );
+});
+
+test("recent performance summarizes assessed reports newest first", () => {
+  const reports = [
+    { problemId: "a", at: 10, report: { decision: "NO_HIRE" } },
+    { problemId: "b", at: 30, report: { decision: "HIRE" } },
+    { problemId: "a", at: 20, report: { decision: "NO_HIRE" } },
+    { problemId: "c", at: 40, report: { decision: "HIRE" } },
+  ];
+
+  assert.deepEqual(recentPerformance(problems, reports, 3), {
+    attempts: 3,
+    passes: 2,
+    misses: 1,
+    passRate: 67,
+    streak: 2,
+    latestDecision: "HIRE",
+    weakTopics: ["Hash Table"],
+  });
+});
+
+test("recent performance ignores unscored and undated entries", () => {
+  assert.equal(
+    recentPerformance(problems, [
+      { problemId: "a", at: null, report: { decision: "NO_HIRE" } },
+      { problemId: "b", at: 20, report: { decision: "PENDING" } },
+    ]),
+    null,
+  );
+});
+
+test("topics with more misses than passes are highlighted", () => {
+  const snapshot = recentPerformance(problems, [
+    { problemId: "a", at: 30, report: { decision: "NO_HIRE" } },
+    { problemId: "a", at: 20, report: { decision: "NO_HIRE" } },
+    { problemId: "b", at: 10, report: { decision: "HIRE" } },
+  ]);
+
+  assert.deepEqual(snapshot.weakTopics, ["Hash Table", "Array"]);
+});