Skip to content

feat(editor): scale-degree overlay on fretted notes (in-key highlight) - #131

Merged
byrongamatos merged 3 commits into
mainfrom
feat/editor-scale-degree-tint
Jul 8, 2026
Merged

feat(editor): scale-degree overlay on fretted notes (in-key highlight)#131
byrongamatos merged 3 commits into
mainfrom
feat/editor-scale-degree-tint

Conversation

@ChrisBeWithYou

@ChrisBeWithYou ChrisBeWithYou commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

DAW roadmap 4.16a — the guitar-lane scale-degree tint. Its prerequisite (the D4 tuning→pitch resolver, _soundingPitchPure) shipped in #115. Editor-only.

What

With the in-key highlight active, each note in String view now shows a small scale-degree label in its top-right corner — 1, ♭3, 5, ♭7, … relative to the current key — coloured by role so the 1/3/5/7 harmonic skeleton pops:

  • root → gold · thirds (min/maj) → sky · fifth → green · sevenths (♭7/maj7) → violet · everything else → neutral tint.

Out-of-key notes still show their chromatic degree, dimmed, so a fretted line reads as scale degrees at a glance. Capo- and tuning-aware (it reuses the exact sounding pitch the in-key shading already computes). Shown only while the highlight is on; skipped for any note whose pitch can't be resolved. Display-only — it never edits the chart or the authored sd teaching mark, and the keys view / piano roll are untouched.

Implementation

  • @pure:scale-degree: _scaleDegreeSemisPure / _scaleDegreeLabelPure (degree relative to the tonic, flats for the chromatics) + _scaleDegreeColorPure (the role palette).
  • _drawNote: hoists the sounding pitch (degMidi) it already resolves for the in-key shading, then draws the degree label top-right when ghl is present. Zero extra per-note arrangement work.

Tests — tests/scale_degree.test.js (6, all fail on main)

Degree wrap in both directions, the full chromatic label row, a real A-major key (A=1, E=5, C#=3, G#=7), the non-finite guard, and the role palette (distinct 1/3/5/7, shared min/maj 3rd and 7th colours, neutral passing tones). Full JS suite green.

Scope / fresh region

New @pure:scale-degree block by @pure:scale, plus the overlay in _drawNote (the String-view note render) — a region no open PR touches (#126's roll work was in _drawPianoNote). No core, no spec.

Summary by CodeRabbit

  • New Features

    • Added scale-degree labels for fretted notes in String view when key highlighting is active.
    • Labels are key-relative and role-colored; in-key notes display accents by chord-tone role, while out-of-key notes are dimmed using chromatic degrees.
    • Overlay is display-only and won’t alter your chart or any authored note data.
  • Tests

    • Added automated coverage for chromatic spelling, degree wrapping, color roles, and edge cases (including non-finite inputs).

DAW roadmap 4.16a (the guitar-lane scale-degree tint; the D4 tuning→pitch
resolver it needed is _soundingPitchPure, shipped in #115). With the in-key
highlight active, each String-view note shows a small degree label in its
top-right, coloured by role.

- @pure:scale-degree: _scaleDegreeSemisPure / _scaleDegreeLabelPure give the
  degree relative to the tonic (0=root, flats for the chromatics:
  1 ♭2 2 ♭3 3 4 ♭5 5 ♯5 6 ♭7 7); _scaleDegreeColorPure is a chord-tone-leaning
  palette (root gold, 3rds sky, 5th green, 7ths violet, others neutral) so the
  1/3/5/7 skeleton pops against passing tones.
- _drawNote: hoists the sounding pitch it already computes for the in-key
  shading (degMidi) and, when ghl is present, draws the degree label top-right —
  out-of-key notes dimmed, unresolvable pitches skipped. Only renders while the
  highlight is on; keys view and the piano roll are untouched. Display-only —
  no edit, no change to the authored `sd` teaching mark.

Tests: tests/scale_degree.test.js (6) — degree wrap both directions, the full
chromatic label row, a real A-major key, non-finite guard, and the role palette
(distinct 1/3/5/7, shared min/maj 3rd + 7th, neutral passing tones). All fail on
main. Full JS suite green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HzMBtxWnLGHYkMMXtK38Bg
@coderabbitai

coderabbitai Bot commented Jul 8, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@byrongamatos, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 30 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e1b68828-9891-4d8c-9ce1-4094e9a7fe35

📥 Commits

Reviewing files that changed from the base of the PR and between c88b58a and 243b924.

📒 Files selected for processing (2)
  • CHANGELOG.md
  • screen.js
📝 Walkthrough

Walkthrough

This PR adds a scale-degree overlay for fretted notes in screen.js, using sounding-pitch-based degree resolution to color and label notes when key highlighting is active. It also adds standalone tests and a changelog entry.

Changes

Scale-degree overlay feature

Layer / File(s) Summary
Scale-degree helpers and rendering integration
screen.js
Adds pure label/color helpers, computes degMidi per note, uses it for outOfKey evaluation, and draws the conditional degree overlay when key highlighting is active.
Scale-degree test coverage
tests/scale_degree.test.js
Adds a Node.js script that extracts the pure helper block from screen.js and validates semitone wrapping, label output, input handling, and role/color mapping, with pass/fail reporting.
Changelog documentation
CHANGELOG.md
Adds an Unreleased changelog entry describing the overlay behavior and its display-only scope.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

🚥 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 clearly and concisely describes the main editor change: a scale-degree overlay on fretted notes when in-key highlighting is active.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/editor-scale-degree-tint

Comment @coderabbitai help to get the list of available commands.

Fix chromatic degree label at semitone 8: ♯5 -> ♭6 to honour the
documented flat/Nashville convention shared by ♭2/♭3/♭5/♭7. Add a
regression test asserting no chromatic label uses a sharp.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@byrongamatos

Copy link
Copy Markdown
Collaborator

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jul 8, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@byrongamatos
byrongamatos merged commit 1761586 into main Jul 8, 2026
@byrongamatos
byrongamatos deleted the feat/editor-scale-degree-tint branch July 8, 2026 07:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants