Feat(eduviz): Manual Annotation System - Frontend

[Dhara124]

Summary

Implements a complete manual annotation and grading system for the EduViz Benchmark, enabling teachers to upload student work, draw error annotations, and score against dynamic educational rubrics — all within a responsive, fluid interface.

---

What Changed

New Files

File	Purpose
EduVizCanvas.jsx	Interactive annotation canvas with bbox drawing, selection, resize, implicit panning, and smart zoom
rubricConfig.js	Centralized task category definitions and scoring rubric configurations

Modified Files

File	Change
EduVizUploadInput.jsx	Dual-upload (Reference + Student images) with task type dropdown
EduVizDocumentView.jsx	Three-pane layout (Reference / Submission / Assessment) with synchronized responsive scaling via ResizeObserver
EduVizAssessmentPanel.jsx	Task-aware rubric switching, block-level "Why Incorrect" notes, global scoring section
EduVizErrorToolbar.jsx	Multi-label toggle system, compact mobile layout with scrollable toolbar
EduVizMetadataBar.jsx	Removed redundant Task dropdown (consolidated into Assessment Panel)
EduVizLayout.jsx	Fixed New Session race condition; URL-driven state cleanup
EduVizWindow.jsx	Fixed auto-load useEffect to prevent stale session re-fetch
eduvizSlice.js	Manual annotation state, metadata sync, comprehensive clearEduvizState, session rubrics
useEduVizJob.js	Streamlined upload flow with taskType persistence

---

Key Features

Dynamic Task Selection

• Task type dropdown at upload categorizes student work (Elementary Practice, Assessment, Middle School Writing, etc.)
• Real-time rubric switching in the Assessment Panel based on active task
• Category-specific scoring criteria defined in rubricConfig.js

Interactive Annotation Canvas

• Bounding box drawing with multi-label error classification
• Click-to-select, drag-to-move, handle-to-resize annotation boxes
• Implicit panning (drag empty space to navigate)
• Ctrl+Scroll zoom with cursor-anchored scaling
• Color-coded error type boundaries matching label colors

Responsive Viewport System

• ResizeObserver-based scaling for both submission and reference panes
• Smart "Auto-Fit" flag: auto-scales on window resize, preserves manual zoom
• requestAnimationFrame throttling to prevent ResizeObserver loop errors
• Reference pane architecture synchronized with submission canvas

Session State Management

• clearEduvizState resets all session-specific state (images, annotations, rubrics, sidebar)
• Navigate-first pattern in handleNewSession prevents race condition
• Auto-load useEffect guards against stale session re-fetch

[netlify]

✅ Deploy Preview for indic-arena ready!

Name	Link
🔨 Latest commit	2d17900
🔍 Latest deploy log	https://app.netlify.com/projects/indic-arena/deploys/69dc8d3cf16d3200081f0d12
😎 Deploy Preview	https://deploy-preview-330--indic-arena.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.