fix(catune): repair tutorial highlighting after Peak/FWHM migration#143
Merged
Conversation
The 01-basics, 02-workflow, and 03-advanced tutorials still targeted
`[data-tutorial="slider-decay"]` and `[data-tutorial="slider-rise"]`,
which no longer exist — the kernel parameterization was migrated from
tau_rise/tau_decay to Peak/FWHM some time ago. driver.js found no
matching element, so the highlight either landed nowhere or fell back
to something nearby, depending on the step.
One selector was also broken by omission: `[data-tutorial="resize-handle"]`
never had a matching attribute anywhere — the Card component's resize
handle div was unlabeled.
This commit:
- Renames selectors in tutorial content:
`slider-decay` → `slider-fwhm`, `slider-rise` → `slider-peak`.
- Adds `data-tutorial="resize-handle"` to the Card resize handle in
`packages/ui/src/Card.tsx`.
- Updates step titles, body text, and section comments that still
described τ_rise / τ_decay semantics so the popover narrative matches
the slider it's highlighting. Mapping used:
Decay Time → FWHM (event width)
Rise Time → Peak Time
Advice about tuning order, parameter coupling, and artifact causes is
rewritten accordingly. The underlying kernel math (exponentials,
τ_rise/τ_decay) is still discussed where appropriate — the 05-theory
tutorial and the community scatter plot still refer to τ values
directly, so those remain unchanged.
- Fixes a stale JSDoc example in `packages/tutorials/src/types.ts`.
Cross-checked every selector referenced by tutorial content against
live `data-tutorial=` attributes in apps/catune/src and packages/*/src
— no unmatched selectors remain.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The tutorial overlay was misbehaving in CaTune because several of its driver.js step selectors no longer pointed at real DOM elements after the kernel parameter migration from
tau_rise/tau_decayto Peak/FWHM.Broken selectors:
[data-tutorial="slider-decay"]— renamed toslider-fwhminParameterPanel, never updated in the tutorial content (3 references across 3 tutorials).[data-tutorial="slider-rise"]— renamed toslider-peak, same story (2 references across 2 tutorials).[data-tutorial="resize-handle"]— never existed; the Card component's resize-handle div was unlabeled.So the tutorial would highlight nothing (or fall back to a sibling/parent, depending on driver.js's behaviour for missing targets) on any step touching a kernel-param slider or the "Card Height" step.
Fixes in this PR:
slider-decay→slider-fwhm,slider-rise→slider-peak).data-tutorial="resize-handle"to the Card resize handle in@calab/ui.05-theorytutorial and04-features(community scatter plot axes) continue to reference τ values directly because the underlying kernel math and the community submission schema still use them — left untouched.packages/tutorials/src/types.ts.Cross-checked every selector referenced in tutorial content against live
data-tutorial=attributes acrossapps/catune/srcandpackages/*/src: no unmatched selectors remain.Test plan
npx tsc -b apps/catune— cleannpx prettier --checkon touched files — cleannpm test --workspaces— 62/62 pass (catune + io, no regressions)🤖 Generated with Claude Code