Make it easier to see which pitch is being hovered over, when adding notes

[bryanbraun]

I wish there was an easier way to see which pitch is being hovered over when adding notes. The Note Header is often too far away to easily reference.

Options for improving this include:

• Displaying the current pitch in the paper margin to the right of the current row.
• Highlighting the current pitch in the Note Header (which could include highlighting the column to that note, if it helps).
  • This means no additional UI, no "covering up existing things," and possibly no Javascript. I like how much simpler that is.
  • Option 1 - CSS only: get rid of the note-header component, and move the header labels into the NoteLines or NoteLine components themselves. Instead of one position:sticky header, each individual header character would be position sticky. This could work, and I think it's worth an experiment .
    • There may be a performance impact of having up to 30 position sticky elements all sticking at once. See https://issues.chromium.org/issues/40533727 (though that example has 1700 position sticky elements).
    • Doing this would make it more difficult for the note header to extend all the way to edges of the paper, which isn't the worst thing in the world, but it looks a bit weird when scrolling over page lines and other elements in the margins.
    • I did a small exploration and it didn't feel straightforward.
  • Option 2 - Use JS: create an appState.activeNoteLine state value which would set a class in the note-header (ideally without fully rerendering all the content in the note-header... I don't want buzzing across all the notelines to make a massive cascade of rerenders).
    • I think it would work best to put the hover listener on the #note-lines component, and use event.target to figure out which line to highlight. This way, it's just one listener, and we can use a mouseout event to clear all styling.
    • We could possibly use a small throttle to limit rerendering too.
    • Maybe if I set a single class over the whole header (instead of on an individual header el), kind of like a body class, I can use some fancy css to highlight, and limit the rerendering? This could be a premature optimization though.
• I got this suggestion via email: displaying notes by colors... would help to work out where I am
  • This suggestion is aimed at smartphone users, who wouldn't be able to see aids based on hover states. Possibly this would fit under a "composition aids" setting?
  • This idea is similar to the "column shading" (representing black/white piano notes) that some other sites have.
    • Note that column shading for black/white notes doesn't help disambiguate for 15 note boxes and other ranges that have no black notes.
• [add more ideas here]

[bryanbraun]

(I got a +1 for this feature request from an email I received)