lyrics-transcriber 0.44.0__py3-none-any.whl → 0.46.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -1,11 +1,13 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useMemo, memo } from 'react'
 import {
     AnchorSequence,
     CorrectionData,
     GapSequence,
     HighlightInfo,
     InteractionMode,
-    LyricsSegment
+    LyricsSegment,
+    ReferenceSource,
+    WordCorrection
 } from '../types'
 import { Box, Button, Grid, useMediaQuery, useTheme } from '@mui/material'
 import { ApiClient } from '../api'
@@ -29,7 +31,6 @@ import { getWordsFromIds } from './shared/utils/wordUtils'
 import AddLyricsModal from './AddLyricsModal'
 import { RestoreFromTrash, OndemandVideo } from '@mui/icons-material'
 import FindReplaceModal from './FindReplaceModal'
-import GlobalSyncEditor from './GlobalSyncEditor'
 
 // Add type for window augmentation at the top of the file
 declare global {
@@ -39,6 +40,7 @@ declare global {
     }
 }
 
+const debugLog = false;
 export interface LyricsAnalyzerProps {
     data: CorrectionData
     onFileLoad: () => void
@@ -64,6 +66,161 @@ export type ModalContent = {
     }
 }
 
+// Define types for the memoized components
+interface MemoizedTranscriptionViewProps {
+    data: CorrectionData
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick: (info: WordClickInfo) => void
+    flashingType: FlashType
+    flashingHandler: string | null
+    highlightInfo: HighlightInfo | null
+    onPlaySegment?: (time: number) => void
+    currentTime: number
+    anchors: AnchorSequence[]
+    disableHighlighting: boolean
+}
+
+// Create a memoized TranscriptionView component
+const MemoizedTranscriptionView = memo(function MemoizedTranscriptionView({
+    data,
+    mode,
+    onElementClick,
+    onWordClick,
+    flashingType,
+    flashingHandler,
+    highlightInfo,
+    onPlaySegment,
+    currentTime,
+    anchors,
+    disableHighlighting
+}: MemoizedTranscriptionViewProps) {
+    return (
+        <TranscriptionView
+            data={data}
+            mode={mode}
+            onElementClick={onElementClick}
+            onWordClick={onWordClick}
+            flashingType={flashingType}
+            flashingHandler={flashingHandler}
+            highlightInfo={highlightInfo}
+            onPlaySegment={onPlaySegment}
+            currentTime={disableHighlighting ? undefined : currentTime}
+            anchors={anchors}
+        />
+    );
+});
+
+interface MemoizedReferenceViewProps {
+    referenceSources: Record<string, ReferenceSource>
+    anchors: AnchorSequence[]
+    gaps: GapSequence[]
+    mode: InteractionMode
+    onElementClick: (content: ModalContent) => void
+    onWordClick: (info: WordClickInfo) => void
+    flashingType: FlashType
+    highlightInfo: HighlightInfo | null
+    currentSource: string
+    onSourceChange: (source: string) => void
+    corrected_segments: LyricsSegment[]
+    corrections: WordCorrection[]
+    onAddLyrics?: () => void
+}
+
+// Create a memoized ReferenceView component
+const MemoizedReferenceView = memo(function MemoizedReferenceView({
+    referenceSources,
+    anchors,
+    gaps,
+    mode,
+    onElementClick,
+    onWordClick,
+    flashingType,
+    highlightInfo,
+    currentSource,
+    onSourceChange,
+    corrected_segments,
+    corrections,
+    onAddLyrics
+}: MemoizedReferenceViewProps) {
+    return (
+        <ReferenceView
+            referenceSources={referenceSources}
+            anchors={anchors}
+            gaps={gaps}
+            mode={mode}
+            onElementClick={onElementClick}
+            onWordClick={onWordClick}
+            flashingType={flashingType}
+            highlightInfo={highlightInfo}
+            currentSource={currentSource}
+            onSourceChange={onSourceChange}
+            corrected_segments={corrected_segments}
+            corrections={corrections}
+            onAddLyrics={onAddLyrics}
+        />
+    );
+});
+
+interface MemoizedHeaderProps {
+    isReadOnly: boolean
+    onFileLoad: () => void
+    data: CorrectionData
+    onMetricClick: {
+        anchor: () => void
+        corrected: () => void
+        uncorrected: () => void
+    }
+    effectiveMode: InteractionMode
+    onModeChange: (mode: InteractionMode) => void
+    apiClient: ApiClient | null
+    audioHash: string
+    onTimeUpdate: (time: number) => void
+    onHandlerToggle: (handler: string, enabled: boolean) => void
+    isUpdatingHandlers: boolean
+    onHandlerClick?: (handler: string) => void
+    onAddLyrics?: () => void
+    onFindReplace?: () => void
+    onEditAll?: () => void
+}
+
+// Create a memoized Header component
+const MemoizedHeader = memo(function MemoizedHeader({
+    isReadOnly,
+    onFileLoad,
+    data,
+    onMetricClick,
+    effectiveMode,
+    onModeChange,
+    apiClient,
+    audioHash,
+    onTimeUpdate,
+    onHandlerToggle,
+    isUpdatingHandlers,
+    onHandlerClick,
+    onFindReplace,
+    onEditAll
+}: MemoizedHeaderProps) {
+    return (
+        <Header
+            isReadOnly={isReadOnly}
+            onFileLoad={onFileLoad}
+            data={data}
+            onMetricClick={onMetricClick}
+            effectiveMode={effectiveMode}
+            onModeChange={onModeChange}
+            apiClient={apiClient}
+            audioHash={audioHash}
+            onTimeUpdate={onTimeUpdate}
+            onHandlerToggle={onHandlerToggle}
+            isUpdatingHandlers={isUpdatingHandlers}
+            onHandlerClick={onHandlerClick}
+            onFindReplace={onFindReplace}
+            onEditAll={onEditAll}
+        />
+    );
+});
+
 export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClient, isReadOnly, audioHash }: LyricsAnalyzerProps) {
     const [modalContent, setModalContent] = useState<ModalContent | null>(null)
     const [flashingType, setFlashingType] = useState<FlashType>(null)
@@ -85,6 +242,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         index: number
         originalSegment: LyricsSegment
     } | null>(null)
+    const [isEditAllModalOpen, setIsEditAllModalOpen] = useState(false)
+    const [globalEditSegment, setGlobalEditSegment] = useState<LyricsSegment | null>(null)
+    const [originalGlobalSegment, setOriginalGlobalSegment] = useState<LyricsSegment | null>(null)
+    const [originalTranscribedGlobalSegment, setOriginalTranscribedGlobalSegment] = useState<LyricsSegment | null>(null)
+    const [isLoadingGlobalEdit, setIsLoadingGlobalEdit] = useState(false)
     const [isReviewModalOpen, setIsReviewModalOpen] = useState(false)
     const [currentAudioTime, setCurrentAudioTime] = useState(0)
     const [isUpdatingHandlers, setIsUpdatingHandlers] = useState(false)
@@ -93,24 +255,25 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     const [isAddLyricsModalOpen, setIsAddLyricsModalOpen] = useState(false)
     const [isAnyModalOpen, setIsAnyModalOpen] = useState(false)
     const [isFindReplaceModalOpen, setIsFindReplaceModalOpen] = useState(false)
-    const [isGlobalSyncEditorOpen, setIsGlobalSyncEditorOpen] = useState(false)
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
     // 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 ?? {})
-        });
+        if (debugLog) {
+            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]);
 
     // Load saved data
@@ -132,17 +295,21 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     useEffect(() => {
         const { currentModalHandler } = getModalState()
 
-        console.log('LyricsAnalyzer - Setting up keyboard effect', {
-            isAnyModalOpen,
-            hasSpacebarHandler: !!currentModalHandler
-        })
+        if (debugLog) {
+            console.log('LyricsAnalyzer - Setting up keyboard effect', {
+                isAnyModalOpen,
+                hasSpacebarHandler: !!currentModalHandler
+            })
+        }
 
         const { handleKeyDown, handleKeyUp } = setupKeyboardHandlers({
             setIsShiftPressed,
         })
 
         // Always add keyboard listeners
-        console.log('LyricsAnalyzer - Adding keyboard event listeners')
+        if (debugLog) {
+            console.log('LyricsAnalyzer - Adding keyboard event listeners')
+        }
         window.addEventListener('keydown', handleKeyDown)
         window.addEventListener('keyup', handleKeyUp)
 
@@ -153,7 +320,9 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
 
         // Cleanup function
         return () => {
-            console.log('LyricsAnalyzer - Cleanup effect running')
+            if (debugLog) {
+                console.log('LyricsAnalyzer - Cleanup effect running')
+            }
             window.removeEventListener('keydown', handleKeyDown)
             window.removeEventListener('keyup', handleKeyUp)
             document.body.style.userSelect = ''
@@ -167,10 +336,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
             editModalSegment ||
             isReviewModalOpen ||
             isAddLyricsModalOpen ||
-            isFindReplaceModalOpen
+            isFindReplaceModalOpen ||
+            isEditAllModalOpen
         )
         setIsAnyModalOpen(modalOpen)
-    }, [modalContent, editModalSegment, isReviewModalOpen, isAddLyricsModalOpen, isFindReplaceModalOpen])
+    }, [modalContent, editModalSegment, isReviewModalOpen, isAddLyricsModalOpen, isFindReplaceModalOpen, isEditAllModalOpen])
 
     // Calculate effective mode based on modifier key states
     const effectiveMode = isShiftPressed ? 'highlight' : interactionMode
@@ -194,7 +364,9 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     }, [])
 
     const handleWordClick = useCallback((info: WordClickInfo) => {
-        console.log('LyricsAnalyzer handleWordClick:', { info });
+        if (debugLog) {
+            console.log('LyricsAnalyzer handleWordClick:', { info });
+        }
 
         if (effectiveMode === 'highlight') {
             // Find if this word is part of a correction
@@ -342,7 +514,9 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         if (!apiClient) return
 
         try {
-            console.log('Submitting changes to server')
+            if (debugLog) {
+                console.log('Submitting changes to server')
+            }
             await apiClient.submitCorrections(data)
 
             setIsReviewComplete(true)
@@ -431,15 +605,20 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     }, [apiClient, data.metadata.enabled_handlers, handleFlash])
 
     const handleHandlerClick = useCallback((handler: string) => {
-        console.log('Handler clicked:', handler);
+        if (debugLog) {
+            console.log('Handler clicked:', handler);
+        }
         setFlashingHandler(handler);
         setFlashingType('handler');
-        console.log('Set flashingHandler to:', handler);
-        console.log('Set flashingType to: handler');
-
+        if (debugLog) {
+            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');
+            if (debugLog) {
+                console.log('Clearing flash state');
+            }
             setFlashingHandler(null);
             setFlashingType(null);
         }, 1500);
@@ -447,9 +626,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
 
     // Wrap setModalSpacebarHandler in useCallback
     const handleSetModalSpacebarHandler = useCallback((handler: (() => (e: KeyboardEvent) => void) | undefined) => {
-        console.log('LyricsAnalyzer - Setting modal handler:', {
-            hasHandler: !!handler
-        })
+        if (debugLog) {
+            console.log('LyricsAnalyzer - Setting modal handler:', {
+                hasHandler: !!handler
+            })
+        }
         // Update the global modal handler
         setModalHandler(handler ? handler() : undefined, !!handler)
     }, [])
@@ -472,6 +653,221 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         setData(newData)
     }
 
+    // Add handler for Edit All functionality
+    const handleEditAll = useCallback(() => {
+        console.log('EditAll - Starting process');
+        
+        // Create empty placeholder segments to prevent the modal from closing
+        const placeholderSegment: LyricsSegment = {
+            id: 'loading-placeholder',
+            words: [],
+            text: '',
+            start_time: 0,
+            end_time: 1
+        };
+        
+        // Set placeholder segments first
+        setGlobalEditSegment(placeholderSegment);
+        setOriginalGlobalSegment(placeholderSegment);
+        
+        // Show loading state
+        setIsLoadingGlobalEdit(true);
+        console.log('EditAll - Set loading state to true');
+        
+        // Open the modal with placeholder data
+        setIsEditAllModalOpen(true);
+        console.log('EditAll - Set modal open to true');
+        
+        // Use requestAnimationFrame to ensure the modal with loading state is rendered
+        // before doing the expensive operation
+        requestAnimationFrame(() => {
+            console.log('EditAll - Inside requestAnimationFrame');
+            
+            // Use setTimeout to allow the modal to render before doing the expensive operation
+            setTimeout(() => {
+                console.log('EditAll - Inside setTimeout, starting data processing');
+                
+                try {
+                    console.time('EditAll - Data processing');
+                    
+                    // Create a combined segment with all words from all segments
+                    const allWords = data.corrected_segments.flatMap(segment => segment.words)
+                    console.log(`EditAll - Collected ${allWords.length} words from all segments`);
+
+                    // Sort words by start time to maintain chronological order
+                    const sortedWords = [...allWords].sort((a, b) => {
+                        const aTime = a.start_time ?? 0
+                        const bTime = b.start_time ?? 0
+                        return aTime - bTime
+                    })
+                    console.log('EditAll - Sorted words by start time');
+
+                    // Create a global segment containing all words
+                    const globalSegment: LyricsSegment = {
+                        id: 'global-edit',
+                        words: sortedWords,
+                        text: sortedWords.map(w => w.text).join(' '),
+                        start_time: sortedWords[0]?.start_time ?? null,
+                        end_time: sortedWords[sortedWords.length - 1]?.end_time ?? null
+                    }
+                    console.log('EditAll - Created global segment');
+
+                    // Store the original global segment for reset functionality
+                    setGlobalEditSegment(globalSegment)
+                    console.log('EditAll - Set global edit segment');
+                    
+                    setOriginalGlobalSegment(JSON.parse(JSON.stringify(globalSegment)))
+                    console.log('EditAll - Set original global segment');
+                    
+                    // Create the original transcribed global segment for Un-Correct functionality
+                    if (originalData.original_segments) {
+                        console.log('EditAll - Processing original segments for Un-Correct functionality');
+                        
+                        // Get all words from original segments
+                        const originalWords = originalData.original_segments.flatMap((segment: LyricsSegment) => segment.words)
+                        console.log(`EditAll - Collected ${originalWords.length} words from original segments`);
+                        
+                        // Sort words by start time
+                        const sortedOriginalWords = [...originalWords].sort((a, b) => {
+                            const aTime = a.start_time ?? 0
+                            const bTime = b.start_time ?? 0
+                            return aTime - bTime
+                        })
+                        console.log('EditAll - Sorted original words by start time');
+                        
+                        // Create the original transcribed global segment
+                        const originalTranscribedGlobal: LyricsSegment = {
+                            id: 'original-transcribed-global',
+                            words: sortedOriginalWords,
+                            text: sortedOriginalWords.map(w => w.text).join(' '),
+                            start_time: sortedOriginalWords[0]?.start_time ?? null,
+                            end_time: sortedOriginalWords[sortedOriginalWords.length - 1]?.end_time ?? null
+                        }
+                        console.log('EditAll - Created original transcribed global segment');
+                        
+                        setOriginalTranscribedGlobalSegment(originalTranscribedGlobal)
+                        console.log('EditAll - Set original transcribed global segment');
+                    } else {
+                        setOriginalTranscribedGlobalSegment(null)
+                        console.log('EditAll - No original segments found, set original transcribed global segment to null');
+                    }
+                    
+                    console.timeEnd('EditAll - Data processing');
+                } catch (error) {
+                    console.error('Error preparing global edit data:', error);
+                } finally {
+                    // Clear loading state
+                    console.log('EditAll - Finished processing, setting loading state to false');
+                    setIsLoadingGlobalEdit(false);
+                }
+            }, 100); // Small delay to allow the modal to render
+        });
+    }, [data.corrected_segments, originalData.original_segments])
+
+    // Handle saving the global edit
+    const handleSaveGlobalEdit = useCallback((updatedSegment: LyricsSegment) => {
+        console.log('Global Edit - Saving with new approach:', {
+            updatedSegmentId: updatedSegment.id,
+            wordCount: updatedSegment.words.length,
+            originalSegmentCount: data.corrected_segments.length,
+            originalTotalWordCount: data.corrected_segments.reduce((count, segment) => count + segment.words.length, 0)
+        })
+
+        // Get the updated words from the global segment
+        const updatedWords = updatedSegment.words
+
+        // Create a new array of segments with the same structure as the original
+        const updatedSegments = []
+        let wordIndex = 0
+
+        // Distribute words to segments based on the original segment sizes
+        for (const segment of data.corrected_segments) {
+            const originalWordCount = segment.words.length
+
+            // Get the words for this segment from the updated global segment
+            const segmentWords = []
+            const endIndex = Math.min(wordIndex + originalWordCount, updatedWords.length)
+
+            for (let i = wordIndex; i < endIndex; i++) {
+                segmentWords.push(updatedWords[i])
+            }
+
+            // Update the word index for the next segment
+            wordIndex = endIndex
+
+            // If we have words for this segment, create an updated segment
+            if (segmentWords.length > 0) {
+                // Recalculate segment start and end times
+                const validStartTimes = segmentWords.map(w => w.start_time).filter((t): t is number => t !== null)
+                const validEndTimes = segmentWords.map(w => w.end_time).filter((t): t is number => t !== null)
+
+                const segmentStartTime = validStartTimes.length > 0 ? Math.min(...validStartTimes) : null
+                const segmentEndTime = validEndTimes.length > 0 ? Math.max(...validEndTimes) : null
+
+                // Create the updated segment
+                updatedSegments.push({
+                    ...segment,
+                    words: segmentWords,
+                    text: segmentWords.map(w => w.text).join(' '),
+                    start_time: segmentStartTime,
+                    end_time: segmentEndTime
+                })
+            }
+        }
+
+        // If there are any remaining words, add them to the last segment
+        if (wordIndex < updatedWords.length) {
+            const remainingWords = updatedWords.slice(wordIndex)
+            const lastSegment = updatedSegments[updatedSegments.length - 1]
+
+            // Combine the remaining words with the last segment
+            const combinedWords = [...lastSegment.words, ...remainingWords]
+
+            // Recalculate segment start and end times
+            const validStartTimes = combinedWords.map(w => w.start_time).filter((t): t is number => t !== null)
+            const validEndTimes = combinedWords.map(w => w.end_time).filter((t): t is number => t !== null)
+
+            const segmentStartTime = validStartTimes.length > 0 ? Math.min(...validStartTimes) : null
+            const segmentEndTime = validEndTimes.length > 0 ? Math.max(...validEndTimes) : null
+
+            // Update the last segment
+            updatedSegments[updatedSegments.length - 1] = {
+                ...lastSegment,
+                words: combinedWords,
+                text: combinedWords.map(w => w.text).join(' '),
+                start_time: segmentStartTime,
+                end_time: segmentEndTime
+            }
+        }
+
+        console.log('Global Edit - Updated Segments with new approach:', {
+            segmentCount: updatedSegments.length,
+            firstSegmentWordCount: updatedSegments[0]?.words.length,
+            totalWordCount: updatedSegments.reduce((count, segment) => count + segment.words.length, 0),
+            originalTotalWordCount: data.corrected_segments.reduce((count, segment) => count + segment.words.length, 0)
+        })
+
+        // Update the data with the new segments
+        setData({
+            ...data,
+            corrected_segments: updatedSegments
+        })
+
+        // Close the modal
+        setIsEditAllModalOpen(false)
+        setGlobalEditSegment(null)
+    }, [data])
+
+    // Memoize the metric click handlers
+    const metricClickHandlers = useMemo(() => ({
+        anchor: () => handleFlash('anchor'),
+        corrected: () => handleFlash('corrected'),
+        uncorrected: () => handleFlash('uncorrected')
+    }), [handleFlash]);
+
+    // Determine if any modal is open to disable highlighting
+    const isAnyModalOpenMemo = useMemo(() => isAnyModalOpen, [isAnyModalOpen]);
+
     return (
         <Box sx={{
             p: 1,
@@ -479,15 +875,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
             maxWidth: '100%',
             overflowX: 'hidden'
         }}>
-            <Header
+            <MemoizedHeader
                 isReadOnly={isReadOnly}
                 onFileLoad={onFileLoad}
                 data={data}
-                onMetricClick={{
-                    anchor: () => handleFlash('anchor'),
-                    corrected: () => handleFlash('corrected'),
-                    uncorrected: () => handleFlash('uncorrected')
-                }}
+                onMetricClick={metricClickHandlers}
                 effectiveMode={effectiveMode}
                 onModeChange={setInteractionMode}
                 apiClient={apiClient}
@@ -498,12 +890,12 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onHandlerClick={handleHandlerClick}
                 onAddLyrics={() => setIsAddLyricsModalOpen(true)}
                 onFindReplace={() => setIsFindReplaceModalOpen(true)}
-                onEditSync={() => setIsGlobalSyncEditorOpen(true)}
+                onEditAll={handleEditAll}
             />
 
-            <Grid container spacing={1} direction={isMobile ? 'column' : 'row'}>
+            <Grid container direction={isMobile ? 'column' : 'row'}>
                 <Grid item xs={12} md={6}>
-                    <TranscriptionView
+                    <MemoizedTranscriptionView
                         data={data}
                         mode={effectiveMode}
                         onElementClick={setModalContent}
@@ -514,6 +906,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         onPlaySegment={handlePlaySegment}
                         currentTime={currentAudioTime}
                         anchors={data.anchor_sequences}
+                        disableHighlighting={isAnyModalOpenMemo}
                     />
                     {!isReadOnly && apiClient && (
                         <Box sx={{
@@ -543,7 +936,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                     )}
                 </Grid>
                 <Grid item xs={12} md={6}>
-                    <ReferenceView
+                    <MemoizedReferenceView
                         referenceSources={data.reference_lyrics}
                         anchors={data.anchor_sequences}
                         gaps={data.gap_sequences}
@@ -556,10 +949,32 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         onSourceChange={setCurrentSource}
                         corrected_segments={data.corrected_segments}
                         corrections={data.corrections}
+                        onAddLyrics={() => setIsAddLyricsModalOpen(true)}
                     />
                 </Grid>
             </Grid>
 
+            <EditModal
+                open={isEditAllModalOpen}
+                onClose={() => {
+                    setIsEditAllModalOpen(false)
+                    setGlobalEditSegment(null)
+                    setOriginalGlobalSegment(null)
+                    setOriginalTranscribedGlobalSegment(null)
+                    handleSetModalSpacebarHandler(undefined)
+                }}
+                segment={globalEditSegment}
+                segmentIndex={null}
+                originalSegment={originalGlobalSegment}
+                onSave={handleSaveGlobalEdit}
+                onPlaySegment={handlePlaySegment}
+                currentTime={currentAudioTime}
+                setModalSpacebarHandler={handleSetModalSpacebarHandler}
+                originalTranscribedSegment={originalTranscribedGlobalSegment}
+                isGlobal={true}
+                isLoading={isLoadingGlobalEdit}
+            />
+
             <EditModal
                 open={Boolean(editModalSegment)}
                 onClose={() => {
@@ -581,7 +996,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                     editModalSegment?.segment && editModalSegment?.index !== null
                         ? originalData.original_segments.find(
                             (s: LyricsSegment) => s.id === editModalSegment.segment.id
-                          ) || null
+                        ) || null
                         : null
                 }
             />
@@ -609,23 +1024,6 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onReplace={handleFindReplace}
                 data={data}
             />
-
-            {/* Add GlobalSyncEditor modal */}
-            {!isReadOnly && (
-                <GlobalSyncEditor
-                    open={isGlobalSyncEditorOpen}
-                    onClose={() => setIsGlobalSyncEditorOpen(false)}
-                    segments={data.corrected_segments || []}
-                    onSave={(updatedSegments) => {
-                        const newData = { ...data, corrected_segments: updatedSegments };
-                        setData(newData);
-                        saveData(newData, initialData);
-                    }}
-                    onPlaySegment={handlePlaySegment}
-                    currentTime={currentAudioTime}
-                    setModalSpacebarHandler={handleSetModalSpacebarHandler}
-                />
-            )}
         </Box>
     )
 }