Map Filter Panel
Component Detail
Description
Collapsible filter panel allowing coordinators to narrow visible mentor markers by availability status or specialization. Emits filter change events consumed by the map screen to re-query visible mentors. Fully keyboard accessible with labeled controls.
map-filter-panel
Summaries
The Map Filter Panel directly improves the effectiveness of coordinator workflows by letting them instantly narrow the visible mentor pool by availability and specialization — eliminating manual scanning of all markers. As a shared component used across multiple features, it delivers multiplied return on development investment: build once, improve the user experience everywhere it appears. This filtering capability is critical to coordinator efficiency at scale, reducing time-to-match and improving program throughput, which translates directly to more students connected with the right mentor at the right time.
This is a medium-complexity shared component with no external service dependencies, making it independently schedulable early in the sprint cycle. Because it is marked shared, coordination is required between all feature teams consuming it to agree on the filter criteria interface (AvailabilityStatus, specialization list) before implementation begins. Plan for accessibility testing as a mandatory gate — labeled controls and keyboard focus management are explicit requirements. The collapsible state adds a layer of interaction logic that warrants dedicated QA.
Changes to the filter schema (e.g., adding filter types) will ripple to all consuming screens, so treat the interface as a stable contract.
Map Filter Panel is a shared, stateful widget that manages collapsed/expanded state internally and emits filter-change events via onAvailabilityFilterChanged and onSpecializationFilterChanged callbacks. It exposes resetFilters() for external reset triggers and getActiveFilterCount() for badge display on the parent screen. There are no service dependencies — filter state is managed locally and pushed to the parent via callbacks, keeping the component decoupled from data fetching. Implement using a Flutter AnimatedContainer or SizeTransition for the collapse animation.
Accessibility requires Semantics widgets with explicit labels on all controls and FocusScopeNode management when expanding to direct focus to the first control.
Responsibilities
- Render filter controls for availability and specialization
- Emit filter-changed events to parent screen
- Toggle between collapsed and expanded states
- Maintain accessible focus management when expanded
Interfaces
build(BuildContext context)
onAvailabilityFilterChanged(AvailabilityStatus? status)
onSpecializationFilterChanged(List<String> specializations)
resetFilters()
getActiveFilterCount() → int
Relationships
Used Integrations (1)
External integrations and APIs this component relies on