Several frontend bugs affecting reliability and usability.
1. Keyboard event conflicts between components
Files: ImageView.js lines 346-360, ImageDisplay.js lines 198-214, CompactImageClassifications.js lines 178-213
Three separate document.addEventListener('keydown') handlers are active simultaneously. CompactImageClassifications correctly filters out INPUT/TEXTAREA targets, but ImageView (arrow keys) and ImageDisplay (+/-/0 zoom) do not. Pressing these keys while typing in a comment or metadata input triggers navigation or zoom.
2. No React error boundary
No error boundary exists anywhere in the component tree. Any uncaught render error in any component crashes the entire application to a blank white screen.
3. No 404 route
File: App.js, lines 393-429
No catch-all route is defined. Navigating to an undefined path renders a blank page with no feedback.
4. Components defined inside render functions
Files: ApiKeys.js lines 161-204, App.js lines 284-391
CreateApiKeyModal, NewKeyDisplayModal, and HomePage are defined inside their parent component bodies. They are new component types on every render, causing React to unmount/remount them and lose all internal state (focus, input values, scroll position).
5. Shared loading state across unrelated components
File: ImageComments.js lines 49, 99, 143
ImageComments calls setLoading(true) on a parent loading state shared with sibling components. Adding a comment causes unrelated panels (classifications, metadata) to show loading indicators.
6. httpx streaming response may truncate
File (backend): backend/routers/images.py, lines 330-358
The async with httpx.AsyncClient() context manager exits before StreamingResponse finishes consuming bytes. The underlying connection may close before all bytes transfer, truncating image downloads and thumbnails.
7. ProjectReport fires unbounded concurrent API calls
File: ProjectReport.js, lines 50-75
Promise.all fires 2 API calls per image simultaneously. For 500 images, that is 1000 concurrent requests with no throttling or progress indication.
Several frontend bugs affecting reliability and usability.
1. Keyboard event conflicts between components
Files:
ImageView.jslines 346-360,ImageDisplay.jslines 198-214,CompactImageClassifications.jslines 178-213Three separate
document.addEventListener('keydown')handlers are active simultaneously.CompactImageClassificationscorrectly filters out INPUT/TEXTAREA targets, butImageView(arrow keys) andImageDisplay(+/-/0 zoom) do not. Pressing these keys while typing in a comment or metadata input triggers navigation or zoom.2. No React error boundary
No error boundary exists anywhere in the component tree. Any uncaught render error in any component crashes the entire application to a blank white screen.
3. No 404 route
File:
App.js, lines 393-429No catch-all route is defined. Navigating to an undefined path renders a blank page with no feedback.
4. Components defined inside render functions
Files:
ApiKeys.jslines 161-204,App.jslines 284-391CreateApiKeyModal,NewKeyDisplayModal, andHomePageare defined inside their parent component bodies. They are new component types on every render, causing React to unmount/remount them and lose all internal state (focus, input values, scroll position).5. Shared loading state across unrelated components
File:
ImageComments.jslines 49, 99, 143ImageCommentscallssetLoading(true)on a parent loading state shared with sibling components. Adding a comment causes unrelated panels (classifications, metadata) to show loading indicators.6. httpx streaming response may truncate
File (backend):
backend/routers/images.py, lines 330-358The
async with httpx.AsyncClient()context manager exits beforeStreamingResponsefinishes consuming bytes. The underlying connection may close before all bytes transfer, truncating image downloads and thumbnails.7. ProjectReport fires unbounded concurrent API calls
File:
ProjectReport.js, lines 50-75Promise.allfires 2 API calls per image simultaneously. For 500 images, that is 1000 concurrent requests with no throttling or progress indication.