lyrics-transcriber 0.41.0__py3-none-any.whl → 0.43.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -6,22 +6,25 @@ import {
     InteractionMode,
     LyricsSegment
 } from '../types'
-import LockIcon from '@mui/icons-material/Lock'
-import UploadFileIcon from '@mui/icons-material/UploadFile'
-import { Box, Button, Grid, Typography, useMediaQuery, useTheme } from '@mui/material'
+import { Box, Button, Grid, useMediaQuery, useTheme } from '@mui/material'
 import { useCallback, useState, useEffect } from 'react'
 import { ApiClient } from '../api'
-import CorrectionMetrics from './CorrectionMetrics'
 import DetailsModal from './DetailsModal'
-import ModeSelector from './ModeSelector'
 import ReferenceView from './ReferenceView'
 import TranscriptionView from './TranscriptionView'
 import { WordClickInfo, FlashType } from './shared/types'
 import EditModal from './EditModal'
 import ReviewChangesModal from './ReviewChangesModal'
-import AudioPlayer from './AudioPlayer'
-import { nanoid } from 'nanoid'
-import { initializeDataWithIds, normalizeDataForSubmission } from './shared/utils/initializeDataWithIds'
+import {
+    addSegmentBefore,
+    splitSegment,
+    deleteSegment,
+    updateSegment
+} from './shared/utils/segmentOperations'
+import { loadSavedData, saveData, clearSavedData } from './shared/utils/localStorage'
+import { setupKeyboardHandlers, setModalHandler } from './shared/utils/keyboardHandlers'
+import Header from './Header'
+import { findWordById, getWordsFromIds } from './shared/utils/wordUtils'
 
 // Add type for window augmentation at the top of the file
 declare global {
@@ -31,12 +34,13 @@ declare global {
     }
 }
 
-interface LyricsAnalyzerProps {
+export interface LyricsAnalyzerProps {
     data: CorrectionData
     onFileLoad: () => void
     onShowMetadata: () => void
     apiClient: ApiClient | null
     isReadOnly: boolean
+    audioHash: string
 }
 
 export type ModalContent = {
@@ -44,26 +48,30 @@ export type ModalContent = {
     data: AnchorSequence & {
         wordId: string
         word?: string
+        anchor_sequences: AnchorSequence[]
     }
 } | {
     type: 'gap'
     data: GapSequence & {
         wordId: string
         word: string
+        anchor_sequences: AnchorSequence[]
     }
 }
 
-export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly }: LyricsAnalyzerProps) {
+export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly, audioHash }: LyricsAnalyzerProps) {
     const [modalContent, setModalContent] = useState<ModalContent | null>(null)
     const [flashingType, setFlashingType] = useState<FlashType>(null)
     const [highlightInfo, setHighlightInfo] = useState<HighlightInfo | null>(null)
     const [currentSource, setCurrentSource] = useState<string>(() => {
-        const availableSources = Object.keys(initialData.reference_texts)
+        if (!initialData?.reference_lyrics) {
+            return ''
+        }
+        const availableSources = Object.keys(initialData.reference_lyrics)
         return availableSources.length > 0 ? availableSources[0] : ''
     })
     const [isReviewComplete, setIsReviewComplete] = useState(false)
-    const [data, setData] = useState(() => initializeDataWithIds(initialData))
-    // Create deep copy of initial data for comparison later
+    const [data, setData] = useState(initialData)
     const [originalData] = useState(() => JSON.parse(JSON.stringify(initialData)))
     const [interactionMode, setInteractionMode] = useState<InteractionMode>('details')
     const [isShiftPressed, setIsShiftPressed] = useState(false)
@@ -75,115 +83,62 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     } | null>(null)
     const [isReviewModalOpen, setIsReviewModalOpen] = useState(false)
     const [currentAudioTime, setCurrentAudioTime] = useState(0)
+    const [isUpdatingHandlers, setIsUpdatingHandlers] = useState(false)
+    const [flashingHandler, setFlashingHandler] = useState<string | null>(null)
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
-    // Simple hash function for generating storage keys
-    const generateStorageKey = (text: string): string => {
-        let hash = 0;
-        for (let i = 0; i < text.length; i++) {
-            const char = text.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
-            hash = hash & hash; // Convert to 32-bit integer
-        }
-        return `song_${hash}`;
-    }
+    // Update debug logging to use new ID-based structure
+    useEffect(() => {
+        console.log('LyricsAnalyzer Initial Data:', {
+            hasData: !!initialData,
+            segmentsCount: initialData?.corrected_segments?.length ?? 0,
+            anchorsCount: initialData?.anchor_sequences?.length ?? 0,
+            gapsCount: initialData?.gap_sequences?.length ?? 0,
+            firstAnchor: initialData?.anchor_sequences?.[0] && {
+                transcribedWordIds: initialData.anchor_sequences[0].transcribed_word_ids,
+                referenceWordIds: initialData.anchor_sequences[0].reference_word_ids
+            },
+            firstSegment: initialData?.corrected_segments?.[0],
+            referenceSources: Object.keys(initialData?.reference_lyrics ?? {})
+        });
+    }, [initialData]);
 
-    // Add local storage handling
+    // Load saved data
     useEffect(() => {
-        const storageKey = generateStorageKey(initialData.transcribed_text);
-        const savedDataStr = localStorage.getItem('lyrics_analyzer_data');
-        const savedDataObj = savedDataStr ? JSON.parse(savedDataStr) : {};
-
-        if (savedDataObj[storageKey]) {
-            try {
-                const parsed = savedDataObj[storageKey];
-                if (parsed.transcribed_text === initialData.transcribed_text) {
-                    const stripIds = (obj: CorrectionData): LyricsSegment[] => {
-                        const clone = JSON.parse(JSON.stringify(obj));
-                        return clone.corrected_segments.map((segment: LyricsSegment) => {
-                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                            const { id: _id, ...strippedSegment } = segment;
-                            return {
-                                ...strippedSegment,
-                                words: segment.words.map(word => {
-                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                    const { id: _wordId, ...strippedWord } = word;
-                                    return strippedWord;
-                                })
-                            };
-                        });
-                    };
-
-                    const strippedSaved = stripIds(parsed);
-                    const strippedInitial = stripIds(initialData);
-
-                    const hasChanges = JSON.stringify(strippedSaved) !== JSON.stringify(strippedInitial);
-
-                    if (hasChanges && window.confirm('Found saved progress for this song. Would you like to restore it?')) {
-                        setData(parsed);
-                    } else if (!hasChanges) {
-                        delete savedDataObj[storageKey];
-                        localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj));
-                    }
-                }
-            } catch (error) {
-                console.error('Failed to parse saved data:', error);
-                delete savedDataObj[storageKey];
-                localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj));
-            }
+        const savedData = loadSavedData(initialData)
+        if (savedData && window.confirm('Found saved progress for this song. Would you like to restore it?')) {
+            setData(savedData)
         }
-    }, [initialData]);
+    }, [initialData])
 
-    // Save to local storage whenever data changes
+    // Save data
     useEffect(() => {
         if (!isReadOnly) {
-            const storageKey = generateStorageKey(initialData.transcribed_text);
-            const savedDataStr = localStorage.getItem('lyrics_analyzer_data');
-            const savedDataObj = savedDataStr ? JSON.parse(savedDataStr) : {};
-
-            savedDataObj[storageKey] = data;
-            localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj));
+            saveData(data, initialData)
         }
-    }, [data, isReadOnly, initialData.transcribed_text]);
+    }, [data, isReadOnly, initialData])
 
-    // Update keyboard event handler
+    // Keyboard handlers
     useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-                return
-            }
+        console.log('Setting up keyboard handlers in LyricsAnalyzer')
 
-            if (e.key === 'Shift') {
-                setIsShiftPressed(true)
-                document.body.style.userSelect = 'none'
-            } else if (e.key === 'Meta') {
-                setIsCtrlPressed(true)
-            } else if (e.key === ' ' || e.code === 'Space') {
-                e.preventDefault()
-                if (window.toggleAudioPlayback) {
-                    window.toggleAudioPlayback()
-                }
-            }
-        }
-
-        const handleKeyUp = (e: KeyboardEvent) => {
-            if (e.key === 'Shift') {
-                setIsShiftPressed(false)
-                document.body.style.userSelect = ''
-            } else if (e.key === 'Meta') {
-                setIsCtrlPressed(false)
-            }
-        }
+        const { handleKeyDown, handleKeyUp } = setupKeyboardHandlers({
+            setIsShiftPressed,
+            setIsCtrlPressed
+        })
 
+        console.log('Adding keyboard event listeners')
         window.addEventListener('keydown', handleKeyDown)
         window.addEventListener('keyup', handleKeyUp)
+
         return () => {
+            console.log('Removing keyboard event listeners')
             window.removeEventListener('keydown', handleKeyDown)
             window.removeEventListener('keyup', handleKeyUp)
             document.body.style.userSelect = ''
         }
-    }, [])
+    }, [setIsShiftPressed, setIsCtrlPressed])
 
     // Calculate effective mode based on modifier key states
     const effectiveMode = isShiftPressed ? 'highlight' :
@@ -209,85 +164,175 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     }, [])
 
     const handleWordClick = useCallback((info: WordClickInfo) => {
-        if (effectiveMode === 'edit') {
-            const segment = data.corrected_segments.find(segment =>
+        console.log('LyricsAnalyzer handleWordClick:', { info });
+
+        if (effectiveMode === 'highlight') {
+            // Find if this word is part of a correction
+            const correction = data.corrections?.find(c =>
+                c.corrected_word_id === info.word_id ||
+                c.word_id === info.word_id
+            );
+
+            if (correction) {
+                setHighlightInfo({
+                    type: 'correction',
+                    transcribed_words: [], // Required by type but not used for corrections
+                    correction: correction
+                });
+                setFlashingType('word');
+                return;
+            }
+
+            // Find if this word is part of an anchor sequence
+            const anchor = data.anchor_sequences?.find(a =>
+                a.transcribed_word_ids.includes(info.word_id) ||
+                Object.values(a.reference_word_ids).some(ids =>
+                    ids.includes(info.word_id)
+                )
+            );
+
+            if (anchor) {
+                // Create a temporary segment containing all words
+                const allWords = data.corrected_segments.flatMap(s => s.words)
+                const tempSegment: LyricsSegment = {
+                    id: 'temp',
+                    words: allWords,
+                    text: allWords.map(w => w.text).join(' '),
+                    start_time: allWords[0]?.start_time ?? null,
+                    end_time: allWords[allWords.length - 1]?.end_time ?? null
+                }
+
+                const transcribedWords = getWordsFromIds(
+                    [tempSegment],
+                    anchor.transcribed_word_ids
+                );
+
+                const referenceWords = Object.fromEntries(
+                    Object.entries(anchor.reference_word_ids).map(([source, ids]) => {
+                        const sourceWords = data.reference_lyrics[source].segments.flatMap(s => s.words)
+                        const tempSourceSegment: LyricsSegment = {
+                            id: `temp-${source}`,
+                            words: sourceWords,
+                            text: sourceWords.map(w => w.text).join(' '),
+                            start_time: sourceWords[0]?.start_time ?? null,
+                            end_time: sourceWords[sourceWords.length - 1]?.end_time ?? null
+                        }
+                        return [
+                            source,
+                            getWordsFromIds([tempSourceSegment], ids)
+                        ]
+                    })
+                );
+
+                setHighlightInfo({
+                    type: 'anchor',
+                    sequence: anchor,
+                    transcribed_words: transcribedWords,
+                    reference_words: referenceWords
+                });
+                setFlashingType('word');
+                return;
+            }
+
+            // Find if this word is part of a gap sequence
+            const gap = data.gap_sequences?.find(g =>
+                g.transcribed_word_ids.includes(info.word_id) ||
+                Object.values(g.reference_word_ids).some(ids =>
+                    ids.includes(info.word_id)
+                )
+            );
+
+            if (gap) {
+                const allWords = data.corrected_segments.flatMap(s => s.words)
+                const tempSegment: LyricsSegment = {
+                    id: 'temp',
+                    words: allWords,
+                    text: allWords.map(w => w.text).join(' '),
+                    start_time: allWords[0]?.start_time ?? null,
+                    end_time: allWords[allWords.length - 1]?.end_time ?? null
+                }
+
+                const transcribedWords = getWordsFromIds(
+                    [tempSegment],
+                    gap.transcribed_word_ids
+                );
+
+                const referenceWords = Object.fromEntries(
+                    Object.entries(gap.reference_word_ids).map(([source, ids]) => {
+                        const sourceWords = data.reference_lyrics[source].segments.flatMap(s => s.words)
+                        const tempSourceSegment: LyricsSegment = {
+                            id: `temp-${source}`,
+                            words: sourceWords,
+                            text: sourceWords.map(w => w.text).join(' '),
+                            start_time: sourceWords[0]?.start_time ?? null,
+                            end_time: sourceWords[sourceWords.length - 1]?.end_time ?? null
+                        }
+                        return [
+                            source,
+                            getWordsFromIds([tempSourceSegment], ids)
+                        ]
+                    })
+                );
+
+                setHighlightInfo({
+                    type: 'gap',
+                    sequence: gap,
+                    transcribed_words: transcribedWords,
+                    reference_words: referenceWords
+                });
+                setFlashingType('word');
+                return;
+            }
+        } else if (effectiveMode === 'edit') {
+            // Find the segment containing this word
+            const segmentIndex = data.corrected_segments.findIndex(segment =>
                 segment.words.some(word => word.id === info.word_id)
-            )
+            );
 
-            if (segment) {
-                const segmentIndex = data.corrected_segments.indexOf(segment)
+            if (segmentIndex !== -1) {
+                const segment = data.corrected_segments[segmentIndex];
                 setEditModalSegment({
                     segment,
                     index: segmentIndex,
-                    originalSegment: originalData.corrected_segments[segmentIndex]
-                })
+                    originalSegment: JSON.parse(JSON.stringify(segment))
+                });
             }
-        } else {
-            // Update flash handling for anchors/gaps
+        } else if (effectiveMode === 'details') {
             if (info.type === 'anchor' && info.anchor) {
-                handleFlash('word', {
+                const word = findWordById(data.corrected_segments, info.word_id);
+                setModalContent({
                     type: 'anchor',
-                    word_ids: info.anchor.word_ids,
-                    reference_word_ids: info.anchor.reference_word_ids
-                })
+                    data: {
+                        ...info.anchor,
+                        wordId: info.word_id,
+                        word: word?.text,
+                        anchor_sequences: data.anchor_sequences
+                    }
+                });
             } else if (info.type === 'gap' && info.gap) {
-                handleFlash('word', {
+                const word = findWordById(data.corrected_segments, info.word_id);
+                setModalContent({
                     type: 'gap',
-                    word_ids: info.gap.word_ids
-                })
+                    data: {
+                        ...info.gap,
+                        wordId: info.word_id,
+                        word: word?.text || '',
+                        anchor_sequences: data.anchor_sequences
+                    }
+                });
             }
         }
-    }, [effectiveMode, data.corrected_segments, handleFlash, originalData.corrected_segments])
+    }, [data, effectiveMode, setModalContent]);
 
     const handleUpdateSegment = useCallback((updatedSegment: LyricsSegment) => {
         if (!editModalSegment) return
-
-        const newData = { ...data }
-
-        // Ensure new words have IDs
-        updatedSegment.words = updatedSegment.words.map(word => ({
-            ...word,
-            id: word.id || nanoid()
-        }))
-
-        newData.corrected_segments[editModalSegment.index] = updatedSegment
-
-        // Update corrected_text
-        newData.corrected_text = newData.corrected_segments
-            .map(segment => segment.text)
-            .join('\n')
-
+        const newData = updateSegment(data, editModalSegment.index, updatedSegment)
         setData(newData)
         setEditModalSegment(null)
     }, [data, editModalSegment])
 
     const handleDeleteSegment = useCallback((segmentIndex: number) => {
-        const newData = { ...data }
-        const deletedSegment = newData.corrected_segments[segmentIndex]
-
-        // Remove segment
-        newData.corrected_segments = newData.corrected_segments.filter((_, index) => index !== segmentIndex)
-
-        // Update anchor and gap sequences to remove references to deleted words
-        newData.anchor_sequences = newData.anchor_sequences.map(anchor => ({
-            ...anchor,
-            word_ids: anchor.word_ids.filter(id =>
-                !deletedSegment.words.some(word => word.id === id)
-            )
-        }))
-
-        newData.gap_sequences = newData.gap_sequences.map(gap => ({
-            ...gap,
-            word_ids: gap.word_ids.filter(id =>
-                !deletedSegment.words.some(word => word.id === id)
-            )
-        }))
-
-        // Update corrected_text
-        newData.corrected_text = newData.corrected_segments
-            .map(segment => segment.text)
-            .join('\n')
-
+        const newData = deleteSegment(data, segmentIndex)
         setData(newData)
     }, [data])
 
@@ -300,8 +345,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
 
         try {
             console.log('Submitting changes to server')
-            const dataToSubmit = normalizeDataForSubmission(data)
-            await apiClient.submitCorrections(dataToSubmit)
+            await apiClient.submitCorrections(data)
 
             setIsReviewComplete(true)
             setIsReviewModalOpen(false)
@@ -323,114 +367,111 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
 
     const handleResetCorrections = useCallback(() => {
         if (window.confirm('Are you sure you want to reset all corrections? This cannot be undone.')) {
-            const storageKey = generateStorageKey(initialData.transcribed_text);
-            const savedDataStr = localStorage.getItem('lyrics_analyzer_data');
-            const savedDataObj = savedDataStr ? JSON.parse(savedDataStr) : {};
+            clearSavedData(initialData)
+            setData(JSON.parse(JSON.stringify(initialData)))
+            setModalContent(null)
+            setFlashingType(null)
+            setHighlightInfo(null)
+            setInteractionMode('details')
+        }
+    }, [initialData])
 
-            // Remove only this song's data
-            delete savedDataObj[storageKey];
-            localStorage.setItem('lyrics_analyzer_data', JSON.stringify(savedDataObj));
+    const handleAddSegment = useCallback((beforeIndex: number) => {
+        const newData = addSegmentBefore(data, beforeIndex)
+        setData(newData)
+    }, [data])
 
-            // Reset data to initial state with proper initialization
-            const freshData = initializeDataWithIds(JSON.parse(JSON.stringify(initialData)));
-            setData(freshData);
+    const handleSplitSegment = useCallback((segmentIndex: number, afterWordIndex: number) => {
+        const newData = splitSegment(data, segmentIndex, afterWordIndex)
+        if (newData) {
+            setData(newData)
+            setEditModalSegment(null)
+        }
+    }, [data])
 
-            // Reset any UI state that might affect highlights
-            setModalContent(null);
-            setFlashingType(null);
-            setHighlightInfo(null);
-            setInteractionMode('details');
+    const handleHandlerToggle = useCallback(async (handler: string, enabled: boolean) => {
+        if (!apiClient) return
+
+        try {
+            setIsUpdatingHandlers(true);
+
+            // Get current enabled handlers
+            const currentEnabled = new Set(data.metadata.enabled_handlers || [])
+
+            // Update the set based on the toggle
+            if (enabled) {
+                currentEnabled.add(handler)
+            } else {
+                currentEnabled.delete(handler)
+            }
+
+            // Call API to update handlers
+            const newData = await apiClient.updateHandlers(Array.from(currentEnabled))
+
+            // Update local state with new correction data
+            setData(newData)
+
+            // Clear any existing modals or highlights
+            setModalContent(null)
+            setFlashingType(null)
+            setHighlightInfo(null)
+
+            // Flash the updated corrections
+            handleFlash('corrected')
+        } catch (error) {
+            console.error('Failed to update handlers:', error)
+            alert('Failed to update correction handlers. Please try again.')
+        } finally {
+            setIsUpdatingHandlers(false);
         }
-    }, [initialData]);
+    }, [apiClient, data.metadata.enabled_handlers, handleFlash])
+
+    const handleHandlerClick = useCallback((handler: string) => {
+        console.log('Handler clicked:', handler);
+        setFlashingHandler(handler);
+        setFlashingType('handler');
+        console.log('Set flashingHandler to:', handler);
+        console.log('Set flashingType to: handler');
+
+        // Clear the flash after a short delay
+        setTimeout(() => {
+            console.log('Clearing flash state');
+            setFlashingHandler(null);
+            setFlashingType(null);
+        }, 1500);
+    }, []);
+
+    // Wrap setModalSpacebarHandler in useCallback
+    const handleSetModalSpacebarHandler = useCallback((handler: (() => (e: KeyboardEvent) => void) | undefined) => {
+        // Update the global modal handler
+        setModalHandler(handler ? handler() : undefined, !!handler)
+    }, [])
 
     return (
-        <Box>
-            {isReadOnly && (
-                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2, color: 'text.secondary' }}>
-                    <LockIcon sx={{ mr: 1 }} />
-                    <Typography variant="body2">
-                        View Only Mode
-                    </Typography>
-                </Box>
-            )}
-            <Box sx={{
-                display: 'flex',
-                flexDirection: isMobile ? 'column' : 'row',
-                gap: 2,
-                justifyContent: 'space-between',
-                alignItems: isMobile ? 'stretch' : 'center',
-                mb: 3
-            }}>
-                <Typography variant="h4" sx={{ fontSize: isMobile ? '1.75rem' : '2.125rem' }}>
-                    Lyrics Correction Review
-                </Typography>
-                {isReadOnly && (
-                    <Button
-                        variant="outlined"
-                        startIcon={<UploadFileIcon />}
-                        onClick={onFileLoad}
-                        fullWidth={isMobile}
-                    >
-                        Load File
-                    </Button>
-                )}
-            </Box>
-
-            <Box sx={{ mb: 3 }}>
-                <CorrectionMetrics
-                    // Anchor metrics
-                    anchorCount={data.metadata.anchor_sequences_count}
-                    multiSourceAnchors={data.anchor_sequences?.filter(anchor =>
-                        // Add null checks
-                        anchor?.reference_word_ids &&
-                        Object.keys(anchor.reference_word_ids || {}).length > 1
-                    ).length ?? 0}
-                    anchorWordCount={data.anchor_sequences?.reduce((sum, anchor) =>
-                        sum + (anchor.length || 0), 0) ?? 0}
-                    // Gap metrics
-                    correctedGapCount={data.gap_sequences?.filter(gap =>
-                        gap.corrections?.length > 0).length ?? 0}
-                    uncorrectedGapCount={data.gap_sequences?.filter(gap =>
-                        !gap.corrections?.length).length ?? 0}
-                    uncorrectedGaps={data.gap_sequences
-                        ?.filter(gap => !gap.corrections?.length && gap.word_ids)
-                        .map(gap => ({
-                            position: gap.word_ids?.[0] ?? '',
-                            length: gap.length ?? 0
-                        })) ?? []}
-                    // Correction details
-                    replacedCount={data.gap_sequences?.reduce((count, gap) =>
-                        count + (gap.corrections?.filter(c => !c.is_deletion && !c.split_total).length ?? 0), 0) ?? 0}
-                    addedCount={data.gap_sequences?.reduce((count, gap) =>
-                        count + (gap.corrections?.filter(c => c.split_total).length ?? 0), 0) ?? 0}
-                    deletedCount={data.gap_sequences?.reduce((count, gap) =>
-                        count + (gap.corrections?.filter(c => c.is_deletion).length ?? 0), 0) ?? 0}
-                    onMetricClick={{
-                        anchor: () => handleFlash('anchor'),
-                        corrected: () => handleFlash('corrected'),
-                        uncorrected: () => handleFlash('uncorrected')
-                    }}
-                    totalWords={data.metadata.total_words}
-                />
-            </Box>
-
-            <Box sx={{
-                display: 'flex',
-                flexDirection: isMobile ? 'column' : 'row',
-                gap: 5,
-                alignItems: 'flex-start',
-                justifyContent: 'flex-start',
-                mb: 3
-            }}>
-                <ModeSelector
-                    effectiveMode={effectiveMode}
-                    onChange={setInteractionMode}
-                />
-                <AudioPlayer
-                    apiClient={apiClient}
-                    onTimeUpdate={setCurrentAudioTime}
-                />
-            </Box>
+        <Box sx={{
+            p: 3,
+            pb: 6,
+            maxWidth: '100%',
+            overflowX: 'hidden'
+        }}>
+            <Header
+                isReadOnly={isReadOnly}
+                onFileLoad={onFileLoad}
+                data={data}
+                onMetricClick={{
+                    anchor: () => handleFlash('anchor'),
+                    corrected: () => handleFlash('corrected'),
+                    uncorrected: () => handleFlash('uncorrected')
+                }}
+                effectiveMode={effectiveMode}
+                onModeChange={setInteractionMode}
+                apiClient={apiClient}
+                audioHash={audioHash}
+                onTimeUpdate={setCurrentAudioTime}
+                onHandlerToggle={handleHandlerToggle}
+                isUpdatingHandlers={isUpdatingHandlers}
+                onHandlerClick={handleHandlerClick}
+            />
 
             <Grid container spacing={2} direction={isMobile ? 'column' : 'row'}>
                 <Grid item xs={12} md={6}>
@@ -440,14 +481,16 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         onElementClick={setModalContent}
                         onWordClick={handleWordClick}
                         flashingType={flashingType}
+                        flashingHandler={flashingHandler}
                         highlightInfo={highlightInfo}
                         onPlaySegment={handlePlaySegment}
                         currentTime={currentAudioTime}
+                        anchors={data.anchor_sequences}
                     />
                 </Grid>
                 <Grid item xs={12} md={6}>
                     <ReferenceView
-                        referenceTexts={data.reference_texts}
+                        referenceSources={data.reference_lyrics}
                         anchors={data.anchor_sequences}
                         gaps={data.gap_sequences}
                         mode={effectiveMode}
@@ -458,6 +501,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         currentSource={currentSource}
                         onSourceChange={setCurrentSource}
                         corrected_segments={data.corrected_segments}
+                        corrections={data.corrections}
                     />
                 </Grid>
             </Grid>
@@ -466,18 +510,26 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 open={modalContent !== null}
                 content={modalContent}
                 onClose={() => setModalContent(null)}
+                allCorrections={data.corrections}
+                referenceLyrics={data.reference_lyrics}
             />
 
             <EditModal
                 open={Boolean(editModalSegment)}
-                onClose={() => setEditModalSegment(null)}
+                onClose={() => {
+                    setEditModalSegment(null)
+                    handleSetModalSpacebarHandler(undefined)
+                }}
                 segment={editModalSegment?.segment ?? null}
                 segmentIndex={editModalSegment?.index ?? null}
                 originalSegment={editModalSegment?.originalSegment ?? null}
                 onSave={handleUpdateSegment}
                 onDelete={handleDeleteSegment}
+                onAddSegment={handleAddSegment}
+                onSplitSegment={handleSplitSegment}
                 onPlaySegment={handlePlaySegment}
                 currentTime={currentAudioTime}
+                setModalSpacebarHandler={handleSetModalSpacebarHandler}
             />
 
             <ReviewChangesModal
@@ -486,6 +538,8 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 originalData={originalData}
                 updatedData={data}
                 onSubmit={handleSubmitToServer}
+                apiClient={apiClient}
+                setModalSpacebarHandler={handleSetModalSpacebarHandler}
             />
 
             {!isReadOnly && apiClient && (