Fix: Map does not zoom or highlight any banned country #4807
Conversation
WalkthroughRefactors the banned apps map view to enable country highlighting and zooming on search. Replaces dynamic per-feature GeoJSON styling with a simplified approach, introduces Changes
Sequence DiagramsequenceDiagram
participant User
participant SearchUI as Search UI
participant searchApps as searchApps()
participant Map
participant Highlight as highlightCountry()
participant Marker as placeCountryMarker()
participant SidePanel as showCountryInfo()
User->>SearchUI: Enter country name
SearchUI->>searchApps: Call searchApps(query)
alt geoJSONLoaded == false
searchApps->>SearchUI: Return (not ready)
else geoJSONLoaded == true
searchApps->>Map: Query allCountriesData
alt Results found
searchApps->>Highlight: highlightCountry(country, hasApps)
Highlight->>Map: Recolor country, zoom/pan
searchApps->>Marker: placeCountryMarker(country, apps)
Marker->>Map: Place marker, show tooltip
searchApps->>SidePanel: showCountryInfo(country, apps)
SidePanel->>SearchUI: Display country name, count, app list
else No results
searchApps->>SearchUI: showNoResults()
end
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
website/templates/banned_apps.html (3)
136-138: Graceful error handling for GeoJSON fetch, but lacks explicit failure notification.Setting
geoJSONLoaded = trueeven on fetch failure allows the search flow to proceed, butcountriesLayerwill beundefined. While downstream guard clauses (line 184) prevent null-pointer exceptions, users receive no visual feedback that the map is non-functional.Consider logging the error and optionally displaying a toast/banner to inform users that the map couldn't load the country boundaries. The current approach silently degrades, which could confuse users.
118-118: Minor: Redundant.toLowerCase()call.
countryNameis already lowercased on line 114, so calling.toLowerCase()again on line 118 is redundant. Consider removing it for clarity.- allCountriesData[countryName.toLowerCase()] = { + allCountriesData[countryName] = {
274-298: Minor: Country name formatting could handle multi-word names better.Line 281 capitalizes only the first letter:
.charAt(0).toUpperCase() + country.slice(1). This produces correct output for single-word names (e.g., "India" → "India") but inconsistent output for multi-word names if the backend returns lowercase (e.g., "united states" → "United states" instead of "United States").If the backend already returns properly formatted names (e.g., "United States"), this is not an issue. Verify the API response format before deciding whether to apply a title-case utility.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (1)
website/templates/banned_apps.html(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Run Tests
- GitHub Check: docker-test
🔇 Additional comments (5)
website/templates/banned_apps.html (5)
156-180: Solid search flow with GeoJSON readiness guard.The implementation correctly waits for
geoJSONLoadedbefore proceeding, preventing race conditions. The API call handles empty results gracefully. However, verify the following with your backend team:
- The
/api/banned_apps/search/endpoint consistently returns a structure with anappsarray (even if empty).- Empty
appsarray is used to distinguish "no apps for country" from "country not found" scenarios.- The search is case-insensitive on the backend side, or the frontend should normalize the query.
182-199: Solid country highlighting with appropriate zoom and color coding.The function correctly:
- Validates map and layer existence before proceeding (line 184).
- Resets prior state to prevent visual artifacts.
- Uses semantic color choices (red for banned, grey for not banned).
- Applies
flyToBounds()with a reasonable animation duration for UX.The implementation achieves the PR objective of zooming and highlighting on search.
201-242: Effective marker placement with single-marker-per-country design.The function:
- Clears previous markers to prevent clutter (line 204).
- Uses a custom div icon with count display—visually distinct and informative.
- Binds a tooltip showing app count (lines 231–234).
- Attaches a click handler to show country info panel (lines 237–239).
Achieves the PR objective of single marker per country with app count visibility and interactive details.
300-322: UI state management is clear and consistent.The helper functions (
showNoResults,hideResults,resetMap) correctly manage visibility of:
- Results grid (
resultsSection).- No-results message (
noResults).- Country info panel (
countryInfo).The state transitions ensure users see the appropriate UI for each search outcome. Implementation is clean and maintainable.
63-63: API integration verified and aligned correctly.The endpoint chain is fully implemented and functional:
- Frontend correctly calls
/api/banned_apps/search/?country={country}at line 167- Backend routing properly wires to
search_banned_appsview- View correctly filters
BannedAppbycountry_name__icontainsand returns active records only- Response structure with
app_name,app_type,country_name,ban_reason,ban_date,source_urlis properly defined in the model- Database indexing on
country_nameensures efficient queries- Empty input handling returns appropriate empty list response
The refactoring objectives are met and the code is production-ready. The suggestion to test edge cases (network failures, slow GeoJSON loading, rapid searches) remains a valid testing recommendation for comprehensive coverage.
|
Thank you! |
Fixes #4792
This PR fixes the map functionality in banned_apps.html where searching for a country did not zoom, highlight, or show relevant markers.
Improvements ~
1.Map now zooms correctly to the searched country.
2.Country highlighting fixed:
-Red → Countries with banned apps
-Grey → Countries with no banned apps
3.Single marker is shown for each country (to avoid clutter from multiple markers).
4.Marker click highlights all banned apps for the selected country
Before -
Untitled.design.mp4
After -
Untitled.design.1.mp4
Summary by CodeRabbit
New Features
Bug Fixes