112 lines
5.2 KiB
Markdown
112 lines
5.2 KiB
Markdown
# 07. Post-Diagnosis Feedback Component (Accuracy / Unsure / Store Consent)
|
|
|
|
meta:
|
|
id: multi-image-user-feedback-07
|
|
feature: multi-image-user-feedback
|
|
priority: P1
|
|
depends_on: [multi-image-user-feedback-01, multi-image-user-feedback-06]
|
|
tags: [ui, frontend, feedback]
|
|
|
|
objective:
|
|
|
|
- Create a feedback panel that appears after the diagnosis results, asking the user to rate accuracy (✓ / ✗ / ?) and optionally consent to storing their images for model retraining.
|
|
|
|
deliverables:
|
|
|
|
- `src/components/PostDiagnosisFeedback.tsx` — new feedback component
|
|
- `src/components/ResultsDashboard.tsx` — updated to include feedback panel
|
|
|
|
steps:
|
|
|
|
1. Create `src/components/PostDiagnosisFeedback.tsx`:
|
|
|
|
Component structure (vertically stacked in a card):
|
|
|
|
```
|
|
┌─────────────────────────────────────────────┐
|
|
│ 💬 How accurate was this diagnosis? │
|
|
│ │
|
|
│ [ ✅ Correct ] [ ❌ Incorrect ] [ ❓ Unsure ] │
|
|
│ │
|
|
│ ── (if Incorrect or Unsure selected) ── │
|
|
│ What did you expect? (optional) │
|
|
│ [_____________________________] text input │
|
|
│ │
|
|
│ ──────────────────────────────────────────── │
|
|
│ │
|
|
│ ☐ Allow us to store these images to │
|
|
│ improve future diagnoses? │
|
|
│ (Your privacy matters — images stored │
|
|
│ securely and never shared) │
|
|
│ │
|
|
│ [ Submit Feedback ] → sent to /api/feedback │
|
|
│ │
|
|
│ ───── (after submission) ───── │
|
|
│ ✓ Thank you! Your feedback helps us improve. │
|
|
└─────────────────────────────────────────────┘
|
|
```
|
|
|
|
Props: `{ sessionId: string, imageIds: string[], predictedDiseaseId: string, userSpecies?: string, modelVersion: string, onSubmit?: () => void }`
|
|
|
|
States:
|
|
- **Pending**: not yet rated, three large buttons (✓/✗/?)
|
|
- **Rated**: accuracy selected, showing optional text input + consent checkbox
|
|
- **Submitting**: loading spinner on submit button
|
|
- **Submitted**: success message with thank-you text
|
|
- **Error**: submission failed, retry button
|
|
|
|
Implementation details:
|
|
- Accuracy buttons are large and touch-friendly (min 48px tap target)
|
|
- Selected button fills with its color: green (✓), red (✗), amber (?)
|
|
- Text input is an optional free-text field for user comments
|
|
- Consent checkbox has a brief privacy notice below it
|
|
- Submit button disabled until accuracy is rated
|
|
- On submit, POST to `/api/feedback` with `DiagnosisFeedback` body
|
|
- Animated transitions between states
|
|
|
|
2. Update `src/components/ResultsDashboard.tsx`:
|
|
- Import and render `PostDiagnosisFeedback` at the bottom of the results area
|
|
- Pass sessionId (generated from first imageId), imageIds, predictedDiseaseId, userSpecies
|
|
- Show feedback panel after all prediction cards
|
|
- If no predictions at all, still show feedback (they may want to tell us the model was wrong)
|
|
|
|
3. Handle edge cases:
|
|
- Feedback submission fails → show inline error with retry
|
|
- User refreshes page → already-submitted state persists if submission completed (could use sessionStorage)
|
|
- Consent unchecked → still submit feedback (just with consent=false)
|
|
- No predictions returned → show feedback anyway with "No disease identified" context
|
|
|
|
tests:
|
|
|
|
- Unit: all four states render correctly (pending/rated/submitting/submitted)
|
|
- Unit: accuracy selection toggles correctly (only one selected at a time)
|
|
- Unit: submit button disabled until accuracy is rated
|
|
- Unit: consent checkbox unchecked by default
|
|
- Unit: text input only shown when accuracy is "incorrect" or "unsure"
|
|
- Unit: submission calls /api/feedback with correct payload shape
|
|
- Integration: feedback flow from rating to submission to success
|
|
|
|
acceptance_criteria:
|
|
|
|
- Three accuracy rating buttons are always visible after results
|
|
- Rating is required before submission
|
|
- Optional text input appears for "Incorrect" or "Unsure" ratings
|
|
- Consent checkbox allows opting in to image storage
|
|
- Submit sends correct payload to /api/feedback
|
|
- Success message shown after submission
|
|
- Error state with retry if submission fails
|
|
|
|
validation:
|
|
|
|
- `npx tsc --noEmit` passes
|
|
- Manual test: rate accuracy, type notes, toggle consent, submit
|
|
- Manual test: verify API receives correct data
|
|
- A11y: verify all interactive elements have accessible labels
|
|
|
|
notes:
|
|
|
|
- The `sessionId` ties together upload → identify → feedback for the same session
|
|
- Privacy notice text should be reviewed for legal compliance
|
|
- Consider adding a "Share with the community" option in a future iteration
|
|
- Debounce the submit button to prevent double-submission
|