plant-disease-id/tasks/multi-image-user-feedback/06-dynamic-results-dashboard.md

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