fix: minor UI update

This commit is contained in:
Xiaohan-Tian
2026-05-28 21:53:44 -07:00
parent 4d415a7f7d
commit ad17263b82
@@ -186,48 +186,48 @@ const GlobalEventListTab: React.FC<GlobalEventListTabProps> = ({
const markerRows = useMemo<MarkerRowData[]>(() => ( const markerRows = useMemo<MarkerRowData[]>(() => (
showMarkers && markerTrack showMarkers && markerTrack
? markerTrack.getRegions().filter((region): region is KGMarkerRegion => region instanceof KGMarkerRegion).map(region => ({ ? markerTrack.getRegions().filter((region): region is KGMarkerRegion => region instanceof KGMarkerRegion).map(region => ({
id: region.getId(), id: region.getId(),
type: 'marker', type: 'marker',
region, region,
absoluteStartBeat: region.getStartFromBeat(), absoluteStartBeat: region.getStartFromBeat(),
durationBeats: region.getLength(), durationBeats: region.getLength(),
})) }))
: [] : []
), [globalTracks, markerTrack, showMarkers]); ), [globalTracks, markerTrack, showMarkers]);
const tempoRows = useMemo<TempoRowData[]>(() => ( const tempoRows = useMemo<TempoRowData[]>(() => (
showTempo && tempoTrack showTempo && tempoTrack
? getSortedTempoRegions(tempoTrack, timeSignature.numerator).map(region => ({ ? getSortedTempoRegions(tempoTrack, timeSignature.numerator).map(region => ({
id: region.getId(), id: region.getId(),
type: 'tempo', type: 'tempo',
region, region,
absoluteStartBeat: region.getStartFromBeat(), absoluteStartBeat: region.getStartFromBeat(),
durationBeats: region.getLength(), durationBeats: region.getLength(),
})) }))
: [] : []
), [globalTracks, showTempo, tempoTrack, timeSignature.numerator]); ), [globalTracks, showTempo, tempoTrack, timeSignature.numerator]);
const keySignatureRows = useMemo<KeySignatureRowData[]>(() => ( const keySignatureRows = useMemo<KeySignatureRowData[]>(() => (
showKeySignature && signatureTrack showKeySignature && signatureTrack
? getSortedKeySignatureRegions(signatureTrack, timeSignature.numerator).map(region => ({ ? getSortedKeySignatureRegions(signatureTrack, timeSignature.numerator).map(region => ({
id: region.getId(), id: region.getId(),
type: 'key-signature', type: 'key-signature',
region, region,
absoluteStartBeat: region.getStartFromBeat(), absoluteStartBeat: region.getStartFromBeat(),
durationBeats: region.getLength(), durationBeats: region.getLength(),
})) }))
: [] : []
), [globalTracks, showKeySignature, signatureTrack, timeSignature.numerator]); ), [globalTracks, showKeySignature, signatureTrack, timeSignature.numerator]);
const chordRows = useMemo<ChordRowData[]>(() => ( const chordRows = useMemo<ChordRowData[]>(() => (
showChords && chordTrack showChords && chordTrack
? chordTrack.getRegions().filter((region): region is KGChordRegion => region instanceof KGChordRegion).map(region => ({ ? chordTrack.getRegions().filter((region): region is KGChordRegion => region instanceof KGChordRegion).map(region => ({
id: region.getId(), id: region.getId(),
type: 'chord', type: 'chord',
region, region,
absoluteStartBeat: region.getStartFromBeat(), absoluteStartBeat: region.getStartFromBeat(),
durationBeats: region.getLength(), durationBeats: region.getLength(),
})) }))
: [] : []
), [chordTrack, globalTracks, showChords]); ), [chordTrack, globalTracks, showChords]);
@@ -755,7 +755,7 @@ const GlobalEventListTab: React.FC<GlobalEventListTabProps> = ({
<div className="event-list-tabs" role="tablist" aria-label="Global event filters"> <div className="event-list-tabs" role="tablist" aria-label="Global event filters">
<button className={`event-list-tab${showMarkers ? ' active' : ''}`} aria-pressed={showMarkers} type="button" onClick={() => setShowMarkers(value => !value)}>Marker</button> <button className={`event-list-tab${showMarkers ? ' active' : ''}`} aria-pressed={showMarkers} type="button" onClick={() => setShowMarkers(value => !value)}>Marker</button>
<button className={`event-list-tab${showTempo ? ' active' : ''}`} aria-pressed={showTempo} type="button" onClick={() => setShowTempo(value => !value)}>Tempo</button> <button className={`event-list-tab${showTempo ? ' active' : ''}`} aria-pressed={showTempo} type="button" onClick={() => setShowTempo(value => !value)}>Tempo</button>
<button className={`event-list-tab${showKeySignature ? ' active' : ''}`} aria-pressed={showKeySignature} type="button" onClick={() => setShowKeySignature(value => !value)}>Key Signature</button> <button className={`event-list-tab${showKeySignature ? ' active' : ''}`} aria-pressed={showKeySignature} type="button" onClick={() => setShowKeySignature(value => !value)}>Key Sig.</button>
<button className={`event-list-tab${showChords ? ' active' : ''}`} aria-pressed={showChords} type="button" onClick={() => setShowChords(value => !value)}>Chord</button> <button className={`event-list-tab${showChords ? ' active' : ''}`} aria-pressed={showChords} type="button" onClick={() => setShowChords(value => !value)}>Chord</button>
</div> </div>