From 63dfb4d06fd170664819c7aac58b749f9fe7d844 Mon Sep 17 00:00:00 2001
From: Benjamin Admin
 <benjaminadmin@37bf1d39-1dc6-4c68-807f-54c9737f55e1.fritz.box>
Date: Tue, 24 Mar 2026 12:20:50 +0100
Subject: [PATCH] fix: replace reset useEffects with key prop for step
 component remount

The reset useEffects in StepOrientation/Deskew/Dewarp/Crop were clearing
orientationResult when sessionId changed (e.g. during handleOrientationComplete),
causing the right side of ImageCompareView to show nothing. Using key={sessionId}
on the step components instead forces React to remount with fresh state when
switching sessions, without interfering with the upload/orientation flow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 admin-lehrer/app/(admin)/ai/ocr-overlay/page.tsx | 16 ++++++++--------
 .../app/(admin)/ai/ocr-pipeline/page.tsx         |  8 ++++----
 .../components/ocr-pipeline/StepCrop.tsx         |  7 -------
 .../components/ocr-pipeline/StepDeskew.tsx       |  8 --------
 .../components/ocr-pipeline/StepDewarp.tsx       |  7 -------
 .../components/ocr-pipeline/StepOrientation.tsx  |  8 --------
 6 files changed, 12 insertions(+), 42 deletions(-)

diff --git a/admin-lehrer/app/(admin)/ai/ocr-overlay/page.tsx b/admin-lehrer/app/(admin)/ai/ocr-overlay/page.tsx
index 7011eda..5840773 100644
--- a/admin-lehrer/app/(admin)/ai/ocr-overlay/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-overlay/page.tsx
@@ -382,13 +382,13 @@ export default function OcrOverlayPage() {
     if (mode === 'paddle-direct' || mode === 'kombi') {
       switch (currentStep) {
         case 0:
-          return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
+          return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
         case 1:
-          return <StepDeskew sessionId={sessionId} onNext={handleNext} />
+          return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
         case 2:
-          return <StepDewarp sessionId={sessionId} onNext={handleNext} />
+          return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
         case 3:
-          return <StepCrop sessionId={sessionId} onNext={handleNext} />
+          return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
         case 4:
           if (mode === 'kombi') {
             return (
@@ -420,13 +420,13 @@ export default function OcrOverlayPage() {
     }
     switch (currentStep) {
       case 0:
-        return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
+        return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
       case 1:
-        return <StepDeskew sessionId={sessionId} onNext={handleNext} />
+        return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 2:
-        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
+        return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 3:
-        return <StepCrop sessionId={sessionId} onNext={handleNext} />
+        return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 4:
         return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
       case 5:
diff --git a/admin-lehrer/app/(admin)/ai/ocr-pipeline/page.tsx b/admin-lehrer/app/(admin)/ai/ocr-pipeline/page.tsx
index 6fb4489..0c512a5 100644
--- a/admin-lehrer/app/(admin)/ai/ocr-pipeline/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-pipeline/page.tsx
@@ -397,13 +397,13 @@ export default function OcrPipelinePage() {
   const renderStep = () => {
     switch (currentStep) {
       case 0:
-        return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
+        return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
       case 1:
-        return <StepDeskew sessionId={sessionId} onNext={handleNext} />
+        return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 2:
-        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
+        return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 3:
-        return <StepCrop sessionId={sessionId} onNext={handleCropNext} />
+        return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleCropNext} />
       case 4:
         return <StepColumnDetection sessionId={sessionId} onNext={handleNext} onBoxSessionsCreated={handleBoxSessionsCreated} />
       case 5:
diff --git a/admin-lehrer/components/ocr-pipeline/StepCrop.tsx b/admin-lehrer/components/ocr-pipeline/StepCrop.tsx
index 484a692..e578e3c 100644
--- a/admin-lehrer/components/ocr-pipeline/StepCrop.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepCrop.tsx
@@ -17,13 +17,6 @@ export function StepCrop({ sessionId, onNext }: StepCropProps) {
   const [error, setError] = useState<string | null>(null)
   const [hasRun, setHasRun] = useState(false)
 
-  // Reset state when sessionId changes (e.g. switching sub-sessions)
-  useEffect(() => {
-    setCropResult(null)
-    setHasRun(false)
-    setError(null)
-  }, [sessionId])
-
   // Auto-trigger crop on mount
   useEffect(() => {
     if (!sessionId || hasRun) return
diff --git a/admin-lehrer/components/ocr-pipeline/StepDeskew.tsx b/admin-lehrer/components/ocr-pipeline/StepDeskew.tsx
index 9ea6dbb..73a1682 100644
--- a/admin-lehrer/components/ocr-pipeline/StepDeskew.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepDeskew.tsx
@@ -22,14 +22,6 @@ export function StepDeskew({ sessionId, onNext }: StepDeskewProps) {
   const [error, setError] = useState<string | null>(null)
   const [hasAutoRun, setHasAutoRun] = useState(false)
 
-  // Reset state when sessionId changes (e.g. switching sub-sessions)
-  useEffect(() => {
-    setSession(null)
-    setDeskewResult(null)
-    setHasAutoRun(false)
-    setError(null)
-  }, [sessionId])
-
   // Load session and auto-trigger deskew
   useEffect(() => {
     if (!sessionId || session) return
diff --git a/admin-lehrer/components/ocr-pipeline/StepDewarp.tsx b/admin-lehrer/components/ocr-pipeline/StepDewarp.tsx
index 9bcd43c..98f8514 100644
--- a/admin-lehrer/components/ocr-pipeline/StepDewarp.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepDewarp.tsx
@@ -20,13 +20,6 @@ export function StepDewarp({ sessionId, onNext }: StepDewarpProps) {
   const [showGrid, setShowGrid] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Reset state when sessionId changes (e.g. switching sub-sessions)
-  useEffect(() => {
-    setDewarpResult(null)
-    setDeskewResult(null)
-    setError(null)
-  }, [sessionId])
-
   // Load session info to get deskew_result (for fine-tuning init values)
   useEffect(() => {
     if (!sessionId) return
diff --git a/admin-lehrer/components/ocr-pipeline/StepOrientation.tsx b/admin-lehrer/components/ocr-pipeline/StepOrientation.tsx
index a77bb9b..9bf0515 100644
--- a/admin-lehrer/components/ocr-pipeline/StepOrientation.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepOrientation.tsx
@@ -30,14 +30,6 @@ export function StepOrientation({ sessionId: existingSessionId, onNext, onSubSes
   const [dragOver, setDragOver] = useState(false)
   const [sessionName, setSessionName] = useState('')
 
-  // Reset state when sessionId changes
-  useEffect(() => {
-    setSession(null)
-    setOrientationResult(null)
-    setPageSplitResult(null)
-    setError(null)
-  }, [existingSessionId])
-
   // Reload session data when navigating back
   useEffect(() => {
     if (!existingSessionId || session) return