personal-projects/personal-portfolio
Template
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Implement dashboard callbacks for interactivity #68

New Issue
Closed
opened 2026-01-17 16:08:41 +00:00 by lmiranda · 0 comments
lmiranda commented 2026-01-17 16:08:41 +00:00
Owner
Copy Link

Summary

Create the callback functions that wire up the dashboard interactivity: map clicks, tab switches, year selection, and neighbourhood details panel.

Files to Create

File Callbacks
portfolio_app/pages/toronto/callbacks/map_callbacks.py Choropleth click → neighbourhood selection
portfolio_app/pages/toronto/callbacks/chart_callbacks.py Chart updates based on filters
portfolio_app/pages/toronto/callbacks/selection_callbacks.py Year/metric selector handlers
portfolio_app/pages/toronto/callbacks/__init__.py Register all callbacks

Callback Specifications

Map Callbacks

  • update_choropleth(year, metric, tab) - Redraw map with selected metric
  • handle_map_click(clickData) - Extract neighbourhood_id, update Store
  • highlight_selected(selected_id) - Visual feedback on selected neighbourhood

Chart Callbacks

  • update_kpi_cards(year, neighbourhood_id) - Refresh KPI values
  • update_supporting_charts(year, neighbourhood_id, tab) - Refresh bar/line charts
  • update_details_panel(neighbourhood_id) - Show all metrics for selection

Selection Callbacks

  • sync_year_across_tabs(year) - Keep year consistent across tabs
  • update_url_hash(tab) - Sync URL with active tab

State Management

Use dcc.Store for:

  • selected-neighbourhood-store - Currently selected neighbourhood ID
  • selected-year-store - Currently selected year
  • dashboard-data-store - Cached mart data (avoid re-fetching)

Acceptance Criteria

  • Map click selects neighbourhood and highlights it
  • Year selector updates all charts
  • Tab switch loads correct data
  • Details panel shows/hides smoothly
  • No callback errors in browser console
  • Callbacks are efficient (no unnecessary re-renders)

Technical Notes

  • Use @callback decorator (Dash 2.0+ style)
  • Prevent circular callbacks with prevent_initial_call=True where appropriate
  • Use dash.no_update to skip unchanged outputs
  • Consider clientside_callback for simple state updates

Labels: type:feature, component:frontend, priority:critical, tech:python, tech:dash

## Summary Create the callback functions that wire up the dashboard interactivity: map clicks, tab switches, year selection, and neighbourhood details panel. ## Files to Create | File | Callbacks | |------|-----------| | `portfolio_app/pages/toronto/callbacks/map_callbacks.py` | Choropleth click → neighbourhood selection | | `portfolio_app/pages/toronto/callbacks/chart_callbacks.py` | Chart updates based on filters | | `portfolio_app/pages/toronto/callbacks/selection_callbacks.py` | Year/metric selector handlers | | `portfolio_app/pages/toronto/callbacks/__init__.py` | Register all callbacks | ## Callback Specifications ### Map Callbacks - `update_choropleth(year, metric, tab)` - Redraw map with selected metric - `handle_map_click(clickData)` - Extract neighbourhood_id, update Store - `highlight_selected(selected_id)` - Visual feedback on selected neighbourhood ### Chart Callbacks - `update_kpi_cards(year, neighbourhood_id)` - Refresh KPI values - `update_supporting_charts(year, neighbourhood_id, tab)` - Refresh bar/line charts - `update_details_panel(neighbourhood_id)` - Show all metrics for selection ### Selection Callbacks - `sync_year_across_tabs(year)` - Keep year consistent across tabs - `update_url_hash(tab)` - Sync URL with active tab ## State Management Use `dcc.Store` for: - `selected-neighbourhood-store` - Currently selected neighbourhood ID - `selected-year-store` - Currently selected year - `dashboard-data-store` - Cached mart data (avoid re-fetching) ## Acceptance Criteria - [ ] Map click selects neighbourhood and highlights it - [ ] Year selector updates all charts - [ ] Tab switch loads correct data - [ ] Details panel shows/hides smoothly - [ ] No callback errors in browser console - [ ] Callbacks are efficient (no unnecessary re-renders) ## Technical Notes - Use `@callback` decorator (Dash 2.0+ style) - Prevent circular callbacks with `prevent_initial_call=True` where appropriate - Use `dash.no_update` to skip unchanged outputs - Consider `clientside_callback` for simple state updates **Labels:** type:feature, component:frontend, priority:critical, tech:python, tech:dash
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Complexity/Complex
High uncertainty or many dependencies
 Complexity/Medium
Some unknowns or dependencies
 Complexity/Simple
Straightforward, well-understood
 Effort/L
3-5 days
 Effort/M
1-2 days
 Effort/S
2-4 hours
 Effort/XL
> 1 week
 Effort/XS
< 2 hours
 Priority/Critical
Immediate attention required
 Priority/High
Important, needs attention soon
 Priority/Low
Nice to have, can wait
 Priority/Medium
Normal priority
 Type/Bug
Something isn't working
 Type/Chore
Maintenance tasks
 Type/Documentation
Documentation improvements
 Type/Feature
New feature or request
 Type/Refactor
Code refactoring without changing behavior
 Type/Test
Testing related
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
lmiranda
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: personal-projects/personal-portfolio#68
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?