95 lines
4.6 KiB
Markdown
95 lines
4.6 KiB
Markdown
# 06. Results Dashboard with Dynamic Confidence and Top-5 Display
|
|
|
|
meta:
|
|
id: multi-image-user-feedback-06
|
|
feature: multi-image-user-feedback
|
|
priority: P1
|
|
depends_on: [multi-image-user-feedback-01, multi-image-user-feedback-04, multi-image-user-feedback-05]
|
|
tags: [ui, frontend, results]
|
|
|
|
objective:
|
|
|
|
- Enhance the results dashboard to display an info panel showing what data the user provided (1/2 images, species) and how it affected confidence.
|
|
- Show top-5 species/disease combination predictions as a compact card stack.
|
|
- Animate confidence transitions when the user lands on results.
|
|
|
|
deliverables:
|
|
|
|
- `src/components/ResultsDashboard.tsx` — updated dashboard
|
|
- `src/components/InfoProvidedBanner.tsx` — new component showing what info was used
|
|
- `src/components/TopCombinationsCard.tsx` — new component for top-5 species/disease combo list
|
|
|
|
steps:
|
|
|
|
1. Create `src/components/InfoProvidedBanner.tsx`:
|
|
- Display a banner/panel at the top of results showing:
|
|
- Number of images analyzed (1 or 2)
|
|
- Whether user identified the plant species (yes/no, with species name if yes)
|
|
- Icons/checkmarks for each piece of info
|
|
- Show a compact breakdown: "You provided: 📸 2 images · 🌿 Species: Tomato"
|
|
- Props: `{ numImages: number, userSpecies?: string | null }`
|
|
- Style: subtle background, small text, positioned between page header and results
|
|
- Animate in with a fade-slide effect
|
|
|
|
2. Create `src/components/TopCombinationsCard.tsx`:
|
|
- Display the top-5 species/disease combination predictions from the API response
|
|
- Each row: rank badge, disease name, plant name, confidence bar
|
|
- Clicking a row expands it to show full disease info (reuses DiseaseCard internals)
|
|
- Props: `{ predictions: TopPrediction[], onSelect: (diseaseId: string) => void }`
|
|
- States:
|
|
- Loading: skeleton rows
|
|
- Empty: no combinations available
|
|
- Error: graceful message
|
|
- Populated: ranked list with horizontal confidence bars
|
|
- Confidence bar: colored (green/amber/red) horizontal bar with percentage label
|
|
- The top-5 is filterable: user can toggle between "All diseases" and "Constrained to your species" (when species was provided)
|
|
|
|
3. Update `src/components/ResultsDashboard.tsx`:
|
|
- Accept new props: `numImages: number`, `infoProvided: string[]`, `userSpecies?: string`, `topCombinations?: TopPrediction[]`
|
|
- Add `InfoProvidedBanner` at the top of the results area
|
|
- Add `TopCombinationsCard` in the right sidebar (below image preview on desktop)
|
|
- When `infoProvided` includes species, show a tag/badge: "Species identified: Tomato" with a lock icon (implying the results are constrained to that species)
|
|
- When the response contains a species confidence, show a "How confidence changes with more info" mini-accordion:
|
|
- "With 1 image: 65% confidence"
|
|
- "With 2 images: 72% confidence"
|
|
- "With 2 images + species: 88% confidence"
|
|
- This educates the user on the value of providing more info
|
|
|
|
4. Animate confidence transitions:
|
|
- When results load, confidence badges count up from 0 to their final percentage
|
|
- Use CSS `@keyframes` for the count-up animation
|
|
- Duration: ~600ms with ease-out curve
|
|
- Only animate on initial load, not on re-renders
|
|
|
|
5. Handle edge cases:
|
|
- No top combinations (no species match) → show message: "No common patterns found"
|
|
- Single image, no species → hide the "how confidence changes" section (nothing to compare)
|
|
- Single image with species → show comparison vs without species (estimate)
|
|
- Demo mode → show realistic mock combos
|
|
|
|
tests:
|
|
|
|
- Unit: InfoProvidedBanner renders correct icons for 1/2 images and species presence
|
|
- Unit: TopCombinationsCard renders ranked list and toggles between constrained/all
|
|
- Unit: confidence count-up animation triggers on mount
|
|
- Integration: full results page with all new sections renders correctly
|
|
|
|
acceptance_criteria:
|
|
|
|
- InfoProvidedBanner shows how many images and whether species was identified
|
|
- TopCombinationsCard shows top-5 predictions with confidence bars
|
|
- Confidence values count up on page load
|
|
- When species info is available, a "how confidence changes" section is visible
|
|
- All existing results functionality (DiseaseCard, SymptomChecker, etc.) still works
|
|
|
|
validation:
|
|
|
|
- `npx tsc --noEmit` passes
|
|
- Manual test: navigate to results with 2 images + species → verify all UI sections
|
|
- Manual test: navigate with 1 image no species → verify simplified UI
|
|
|
|
notes:
|
|
|
|
- The top-5 combos come from the identify API response's `topSpeciesDisease` field
|
|
- Confidence comparison values are estimated when the model hasn't been run with/without the constraint — the API provides both constrained and unconstrained confidence
|