Hierarchy Tree View
Component Detail
Description
Flutter widget that renders the full organizational hierarchy as a collapsible, scrollable tree. Displays national associations, regions, and local chapters with parent-child indentation, node counts, and navigation to edit individual nodes.
hierarchy-tree-view
Summaries
The Hierarchy Tree View gives administrators a clear, interactive map of the entire organizational structure — from national associations down through regions to individual local chapters. This visual clarity is essential for managing a multi-tiered membership network where errors in structure (wrong parent assignments, missing nodes) can cascade into access control failures and misdirected communications. By making the hierarchy navigable and immediately editable, this component reduces the administrative overhead of org management and ensures the integrity of the data that underpins membership fees, reporting lines, and regional program delivery — directly protecting revenue and compliance.
This is a high-complexity component requiring recursive rendering logic, state management for expand/collapse across potentially hundreds of nodes, and integration with both the hierarchy-admin-panel and organization-unit-repository. The dual execution context (frontend and mobile) means the tree must be tested and optimized on both platforms, with particular attention to scroll performance under large datasets. The sub-component Tree Node Widget should be built and unit-tested independently first. Dependencies on the repository layer must be stable before integration work begins.
Performance testing with realistic data volumes is critical and should be scheduled before any user acceptance testing phase.
HierarchyTreeView is a stateful Flutter widget that recursively renders OrganizationUnit nodes from a root list. It exposes `expandToNode(unitId)` for deep-linking, `collapseAll()` for reset, `setHighlightedNode(unitId)` for search-result highlighting, and `refreshTree()` for pull-to-refresh integration. The tree delegates individual node rendering to the TreeNodeWidget sub-component, passing depth for indentation calculation and isExpanded for toggle state. Data is sourced from organization-unit-repository via the parent hierarchy-admin-panel.
Node tap events bubble up via the `onNodeTap` callback. Performance optimization should use ListView.builder for large branches and avoid rebuilding the entire tree on single-node state changes — consider using an InheritedWidget or a dedicated tree state notifier.
Responsibilities
- Render recursive tree of organization units
- Support expand/collapse per branch
- Navigate to node detail on tap
- Show unit type labels and member counts
Interfaces
HierarchyTreeView(rootNodes, onNodeTap)
collapseAll()
expandToNode(unitId)
refreshTree()
setHighlightedNode(unitId)
Relationships
Dependents (2)
Components that depend on this component
Sub-Components (1)
Individual node widget in the hierarchy tree showing unit name, type badge, and child count with tap-to-expand behaviour.
- Display unit name and type
- Show child node count
- Handle expand/collapse toggle