feat(#979): add forest cover map improvements - #996
Conversation
Introduces selection checkboxes for forest cover polygons in OpeningForestCover, allowing users to select/deselect all or individual polygons. The selected polygons are synchronized with the map display, so only selected forest cover polygons are rendered. State management for available and selected forest cover IDs is lifted to OpeningDetails and passed through OpeningSummary and OpeningsMap for consistent behavior.
Updated the MapProps interface to make forest cover ID-related props optional and added a conditional check before calling setAvailableForestCoverIds. This improves component flexibility and prevents potential runtime errors when these props are not provided.
Displays a message when no forest cover polygon is selected, guiding users to select from the table. Styles for the message have been added to ensure visibility and proper positioning.
Added popup rendering for forest cover inventory, reserve, and silviculture layers in OpeningsMapEntryPopup. Updated MapLayer property keys to use camelCase for consistency and to match popup component expectations.
Changed the color and removed fillColor for several map layers to use 'pink'. Updated the pink color palette in colorMap with new values and commented out the old palette.
…h dark theme Changed the popup text color from a CSS variable to colors.$gray-100 for consistency with the theme
|
NOTE: We're showing the selected forest cover polygons selected from the table if they're matched with the fetched map polygons. Since the data in the test database (PR) differs from production, and we're fetching map polygons from the maps service in production separately, we will see most of the forest cover rows being disabled as they're being fetched from the database, whereas the map polygons are from the maps service. This is an issue for testing this PR using the |
Clarifies the message shown when no forest cover polygon is selected and displayed on the map, improving user guidance.
There was a problem hiding this comment.
Pull Request Overview
This PR implements map improvements for the forest cover tab on the opening details page, adding checkbox-based selection functionality to control which forest cover polygons are displayed on the map. The changes enable users to selectively show/hide forest cover polygons and improve the visual styling of these map layers.
Key changes include:
- Added checkbox selection controls in the forest cover table to toggle polygon visibility on the map
- Updated forest cover map layer styling from orange/yellow colors to pink color scheme
- Implemented state management for tracking available and selected forest cover IDs
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
frontend/src/types/MapLayer.ts |
Updated forest cover layer styling and popup property keys |
frontend/src/screens/Openings/OpeningDetails/index.tsx |
Added state management for forest cover selection |
frontend/src/components/OpeningsMapEntryPopup/index.tsx |
Added popup support for forest cover layers |
frontend/src/components/OpeningsMap/styles.scss |
Added styling for empty map message |
frontend/src/components/OpeningsMap/index.tsx |
Implemented forest cover filtering and empty state message |
frontend/src/components/OpeningDetails/OpeningSummary/index.tsx |
Passed forest cover selection props to map component |
frontend/src/components/OpeningDetails/OpeningForestCover/index.tsx |
Added checkbox controls for polygon selection |
Comments suppressed due to low confidence (1)
frontend/src/types/MapLayer.ts:162
- The fillColor property is being removed but the comment suggests it was a vibrant pink. This creates inconsistency since the color is now set to 'pink' which will use the colorMap values. Consider removing or updating the comment to reflect the actual implementation.
},
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Deleted an unused commented line for the pink color map in MapLayer.ts to clean up the code.
Tooltip label now toggles between 'Select all' and 'Unselect all' based on selection state. Tooltip class name changed to 'forest-cover-map-tooltip' for consistency.
There was a problem hiding this comment.
Looks great! I have two comments:
-
- Do we need to have the Map word next to the 'master' checkbox?
-
There's a weird interaction bug where two polygons are showing despite only one is selected:
As you can see, A1 stuck around for some reasons but it has a different shade than the selected A1 in the beginning.
Added checks for FOREST_COVER_ID and SILV_POLYGON_NUMBER in feature filtering to prevent undefined errors. Updated useEffect dependencies and provided a stable key for OpeningsMapEntry to ensure correct rendering when selectedForestCoverIds change.
Changed the key prop in the forest cover table rows to use a combination of coverId, polygonId, and idx for improved uniqueness and to prevent potential rendering issues.
Introduced a container for the select-all checkbox and added a 'Map' label next to it in the forest cover table header. Updated styles to align the checkbox and label horizontally for improved clarity.
Description
This change implements the map improvements for the forest cover tab on the opening details page.
Fixes #979
Type of change
How Has This Been Tested?
Checklist
Further comments
Thanks for the PR!
Deployments, as required, will be available below:
Please create PRs in draft mode. Mark as ready to enable:
After merge, new images are deployed in: