Implement navigation via chunks

frontend/src/components/DocumentProcessor.jsx

@@ -1,4 +1,5 @@
 import 'katex/dist/katex.min.css';
+import { useState, useEffect } from 'react';
 
 // Import custom hooks
 import { useDocumentProcessor } from '../hooks/useDocumentProcessor';
@@ -12,6 +13,9 @@ import ChunkNavigation from './ChunkNavigation';
 import ChunkPanel from './ChunkPanel';
 
 function DocumentProcessor() {
+    // State for PDF navigation
+    const [pdfNavigation, setPdfNavigation] = useState(null);
+    
     // Custom hooks
     const {
         fileInputRef,
@@ -48,6 +52,16 @@ function DocumentProcessor() {
         handleMouseDown
     } = usePanelResize(50);
 
+    // Sync PDF page navigation with chunk switching
+    useEffect(() => {
+        if (pdfNavigation && documentData && documentData.chunks[currentChunkIndex]) {
+            const currentChunk = documentData.chunks[currentChunkIndex];
+            if (currentChunk.page && pdfNavigation.goToPage) {
+                pdfNavigation.goToPage(currentChunk.page);
+            }
+        }
+    }, [currentChunkIndex, pdfNavigation, documentData]);
+
     // Simplified startInteractiveLesson
     const handleStartInteractiveLesson = () => {
         startInteractiveLesson();
@@ -111,6 +125,7 @@ function DocumentProcessor() {
                 <DocumentViewer
                     selectedFile={selectedFile}
                     documentData={documentData}
+                    onPageChange={setPdfNavigation}
                 />
             </div>
 

frontend/src/components/DocumentViewer.jsx

@@ -5,7 +5,7 @@ import 'react-pdf/dist/Page/TextLayer.css';
 
 pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';
 
-const DocumentViewer = ({ selectedFile, documentData }) => {
+const DocumentViewer = ({ selectedFile, documentData, onPageChange }) => {
     const pdfContainerRef = useRef(null);
     const [numPages, setNumPages] = useState(null);
     const [currentPage, setCurrentPage] = useState(1);
@@ -29,6 +29,13 @@ const DocumentViewer = ({ selectedFile, documentData }) => {
         return () => window.removeEventListener('resize', updateContainerWidth);
     }, []);
 
+    // Expose goToPage function to parent component (only once when component mounts)
+    useEffect(() => {
+        if (onPageChange) {
+            onPageChange({ goToPage });
+        }
+    }, [onPageChange]);
+
     // Calculate optimal page width
     const getPageWidth = () => {
         if (!containerWidth) return 600; // Fallback
@@ -70,7 +77,7 @@ const DocumentViewer = ({ selectedFile, documentData }) => {
 
     // Jump to specific page
     const goToPage = (pageNumber) => {
-        if (!pdfContainerRef.current || !numPages) return;
+        if (!pdfContainerRef.current || !numPages || pageNumber < 1 || pageNumber > numPages) return;
         
         // Update visible pages immediately for target page
         const newVisiblePages = new Set();
@@ -80,17 +87,55 @@ const DocumentViewer = ({ selectedFile, documentData }) => {
         }
         setVisiblePages(newVisiblePages);
         
-        const container = pdfContainerRef.current;
-        const totalScrollHeight = container.scrollHeight - container.clientHeight;
-        
-        // Calculate scroll position for the target page
-        const targetScrollPercent = (pageNumber - 1) / numPages;
-        const targetScrollTop = targetScrollPercent * totalScrollHeight;
-        
-        container.scrollTo({
-            top: targetScrollTop,
-            behavior: 'smooth'
-        });
+        // Use setTimeout to ensure pages are rendered before scrolling
+        setTimeout(() => {
+            const container = pdfContainerRef.current;
+            if (!container) return;
+            
+            // Find the target page element by its data attribute or position
+            const pageElements = container.querySelectorAll('[data-page-number]');
+            let targetElement = null;
+            
+            // If we can't find elements by data attribute, calculate position manually
+            if (pageElements.length === 0) {
+                // Calculate approximate position based on page height
+                // Each page has some margin (mb-4 = 16px) plus the actual page height
+                const containerHeight = container.clientHeight;
+                const totalContent = container.scrollHeight;
+                const avgPageHeight = totalContent / numPages;
+                const targetPosition = (pageNumber - 1) * avgPageHeight;
+                
+                // Center the page in viewport
+                const scrollPosition = Math.max(0, targetPosition - containerHeight / 4);
+                
+                container.scrollTo({
+                    top: scrollPosition,
+                    behavior: 'smooth'
+                });
+            } else {
+                // Find the specific page element
+                for (const element of pageElements) {
+                    if (parseInt(element.getAttribute('data-page-number')) === pageNumber) {
+                        targetElement = element;
+                        break;
+                    }
+                }
+                
+                if (targetElement) {
+                    // Scroll to center the page in viewport
+                    const elementRect = targetElement.getBoundingClientRect();
+                    const containerRect = container.getBoundingClientRect();
+                    const scrollOffset = container.scrollTop;
+                    
+                    const targetPosition = scrollOffset + elementRect.top - containerRect.top - (container.clientHeight - elementRect.height) / 4;
+                    
+                    container.scrollTo({
+                        top: Math.max(0, targetPosition),
+                        behavior: 'smooth'
+                    });
+                }
+            }
+        }, 100); // Small delay to ensure rendering
     };
 
     // Zoom controls
@@ -131,10 +176,9 @@ const DocumentViewer = ({ selectedFile, documentData }) => {
                         {numPages && Array.from(new Array(numPages), (_, index) => {
                             const pageNum = index + 1;
                             const isVisible = visiblePages.has(pageNum);
-                            const currentZoom = isVisible ? zoomLevel : 1;
                             
                             return (
-                                <div key={pageNum} className="mb-4 flex justify-center">
+                                <div key={pageNum} className="mb-4 flex justify-center" data-page-number={pageNum}>
                                     <Page 
                                         pageNumber={pageNum} 
                                         width={isVisible ? getPageWidth() : getPageWidth() / zoomLevel}