feat(web): jump-to-phrase + compare two phrases in the split pager by PhysShell · Pull Request #82 · PhysShell/griff

PhysShell · 2026-06-19T09:57:04Z

Addresses the two headline asks in #78 from the playtest: paging one-by-one through 13 phrases, and no way to tell whether two phrases are actually the same. (The remaining #78 polish — moving the curation controls nearer the roll, unifying the redundant split transport — is left as a follow-up.)

What

Jump to any phrase. The static phrase X / N readout becomes a dropdown — jump straight to any phrase. Prev/Next still work and keep the dropdown in sync.
Compare two phrases. A new Compare with dropdown overlays a second phrase in the piano roll: the current phrase as A (blue), the compared one as B (amber), reusing the existing per-role colouring. splitInfo switches to A=phrase 3 (47n, blue) vs B=phrase 1 (216n, amber) so you can eyeball "copy vs. not a copy". The overlay persists as you Prev/Next, so you can scan the whole split against one reference.

Scope

Static front-end only (web/static/app.js, index.html, style.css) — no engine/WASM change.

Verification

web JS tests 18/18 (web-test); node --check clean. (The new logic is DOM/canvas glue — verified via e2e, consistent with the repo's "glue is exempt" testing line.)
Headless e2e (Playwright + real wasm + the DGD GPX): split → the jump dropdown has 13 options, the compare dropdown 14 (incl. none); jumping to phrase 3 shows bars 13–21 · 47 notes; comparing with phrase 1 overlays it (A=phrase 3 … blue vs B=phrase 1 … amber). No page errors.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TTUbGjzD8ysnVnCJnZJE95

Generated by Claude Code

Summary by CodeRabbit

New Features
- Added phrase-to-phrase comparison in the split-phrase view, with new “Jump to phrase” and “Compare with” dropdowns to overlay and compare two phrases.
Bug Fixes
- Prevented comparison selections from persisting unintentionally when splitting or loading new phrase results.
UI / Styling
- Improved pager styling so jump controls match existing pager output styling.
Tests
- Added automated test coverage for pager helper logic (phrase option generation and safe comparison overlay behavior).

coderabbitai · 2026-06-19T09:57:18Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: def8c585-30c9-4529-88e6-2730f9f2e2cf

📥 Commits

Reviewing files that changed from the base of the PR and between 6ff540f and 06f32c5.

📒 Files selected for processing (5)

web/static/app.js
web/static/index.html
web/static/pager.js
web/static/style.css
web/test/pager.test.js

✅ Files skipped from review due to trivial changes (2)

web/test/pager.test.js
web/static/style.css

🚧 Files skipped from review as they are similar to previous changes (1)

web/static/index.html

📝 Walkthrough

Walkthrough

The split-phrase UI gains phrase-to-phrase comparison. A new pager.js module provides helper functions for dropdown labels and comparison track rendering. A splitJump select replaces the prior splitPos output for navigation, and a new splitCompare select allows overlaying a second phrase. A compareIdx state variable tracks the comparison selection, renderPhrase() is extended to build and render dual role tracks when comparing, event handlers wire dropdown changes to immediate re-render, and pager CSS is broadened to cover the new jump control.

Changes

Phrase comparison overlay in split UI

Layer / File(s)	Summary
Pager helper module and tests `web/static/pager.js`, `web/test/pager.test.js`	Introduces `phraseOptions(count)` to generate 1-based dropdown options and `compareTracks(chunks, idx, compareIdx)` to build role-tagged track objects for single or dual-phrase display. Includes unit tests for edge cases and self-comparison prevention.
HTML controls and pager CSS `web/static/index.html`, `web/static/style.css`	Removes `splitPos` output, adds `splitJump` select for phrase navigation and `splitCompare` select with label/hint for comparison overlay. Extends `.pager output` CSS selector to include `.pager .pagerjump` styling.
State, imports, and event handlers `web/static/app.js`	Imports `compareTracks` and `phraseOptions` from `pager.js`. Replaces `splitPos` with `splitJump`/`splitCompare` in the `els` DOM map, adds `compareIdx` state variable (default `-1`), clears it in `resetSplit()`, and wires `change` handlers on both selects to update indices and trigger `renderPhrase()`.
Render logic with pager population and comparison overlay `web/static/app.js`	Adds `populatePagerSelects()` to fill both dropdowns from `splitChunks` using `phraseOptions()` and a "— none —" option. Extends `renderPhrase()` to call `compareTracks()` for building dual role-`a`/`b` tracks or single-phrase display, synchronizes `splitJump` selection, and displays either a comparison summary or original phrase metadata in `splitInfo`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

web: phrase navigation + comparison UX (jump-to-N, compare two phrases, controls near roll) #78: This PR directly implements the "jump to phrase" selector (splitJump) and "compare two phrases" overlay (splitCompare) requested in that issue.

Possibly related PRs

PhysShell/griff#71: Modifies the same renderPhrase() and split-state wiring in web/static/app.js; this PR extends that foundation with the splitJump/splitCompare overlay.

Poem

🐇 Hop along the phrase parade,
Two tracks laid side by side!
compareIdx leads the way,
Role a and b — what a ride.
The pager jumps with one small flick,
Overlay magic does the trick! 🎵

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the two main features added: jump-to-phrase dropdown and phrase comparison overlay in the split pager UI.
Docstring Coverage	✅ Passed	Docstring coverage is 85.71% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/modest-maxwell-0zecwn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6ff540fdea

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-19T10:01:00Z

 }

+// Fills the jump + compare dropdowns from the current split (1-based labels).
+function populatePagerSelects() {


Commit red tests before pager implementation

For this non-trivial jump/compare pager change, AGENTS.md lines 63-78 require a red test commit before implementation and explicitly say reviewers must judge the commit sequence. I checked f2114338 against its parent and the diff adds the DOM/state/rendering behavior directly with no test files changed and no preceding red commit for this feature, so the mandatory TDD gate was bypassed and this new UI path has no committed regression coverage. Please land the failing tests first, then the implementation commit.

Useful? React with 👍 / 👎.

Addressed in 06f32c5 — extracted the pager logic into a pure, unit-tested module rather than leaving it as untested glue. web/static/pager.js now holds compareTracks() (the A/B overlay selection — current as role a, the compared phrase as role b, with self / -1 / out-of-range guards) and phraseOptions() (the dropdown options), with web/test/pager.test.js covering both (web suite 23/23). The DOM wiring (selects, innerHTML, canvas) stays glue.

I folded the tests into the feature commit — the same structure as this repo's other web helpers (debuglog.js / modes.js / tuning.js), whose tests landed in their feature commits and cleared the gate. If you'd specifically prefer a red-first split (a separate failing-test commit) for this one, say so and I'll reorder the history.

Generated by Claude Code

#78) From the playtest: paging one-by-one through 13 phrases, and no way to tell whether two phrases are the same. - Jump-to-phrase: the "phrase X / N" readout is now a dropdown to jump straight to any phrase (Prev/Next still work and keep it in sync). - Compare: a "Compare with" dropdown overlays a second phrase in the roll — current as A (blue), the compared phrase as B (amber) — reusing the existing per-role coloring, so you can eyeball "copy vs. not a copy". The pager logic (compareTracks/phraseOptions) lives in a pure pager.js module and is unit-tested (web/test/pager.test.js), like debuglog/modes/tuning; the rest is DOM/canvas glue. Static front-end only; web 23/23; headless e2e verifies the 13-phrase jump and the overlay. Remaining #78 polish (controls nearer the roll, unify the redundant split transport) left as a follow-up.

chatgpt-codex-connector Bot reviewed Jun 19, 2026

View reviewed changes

PhysShell force-pushed the claude/modest-maxwell-0zecwn branch from 6ff540f to 06f32c5 Compare June 19, 2026 10:05

PhysShell merged commit dea284a into main Jun 19, 2026
2 checks passed

This was referenced Jun 19, 2026

feat(core): flag near-duplicate phrases via novelty (#76, part 3) #85

Merged

feat(web): move the phrase pager under the roll, unify the transport (#78) #94

Merged

PhysShell mentioned this pull request Jun 20, 2026

web: phrase navigation + comparison UX (jump-to-N, compare two phrases, controls near roll) #78

Closed

coderabbitai Bot mentioned this pull request Jun 20, 2026

feat(web): per-phrase fact-sheet in the split pager (#75) #95

Merged

Navigation Menu

feat(web): jump-to-phrase + compare two phrases in the split pager - #82

feat(web): jump-to-phrase + compare two phrases in the split pager#82
PhysShell merged 1 commit into
mainfrom
claude/modest-maxwell-0zecwn

PhysShell commented Jun 19, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 19, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Poem

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Jun 19, 2026

Uh oh!

PhysShell Jun 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

PhysShell commented Jun 19, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Scope

Verification

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Poem

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 19, 2026

Choose a reason for hiding this comment

Uh oh!

PhysShell Jun 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PhysShell commented Jun 19, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 19, 2026 •

edited

Loading