Add legends for MapFeatureExplorer layer options #2513
Conversation
- deforestation - birdsDensity - mammalDensity - amphibianDensity
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" WalkthroughThis update introduces a new map layer legend system. It adds a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SingleLayerOption
participant LayerLegend
User->>SingleLayerOption: Toggle map layer option
SingleLayerOption->>SingleLayerOption: Check if option is selected
alt Option is selected and has legend
SingleLayerOption->>LayerLegend: Render legend (with legend data)
LayerLegend->>LayerLegend: Determine legend type (range/category)
LayerLegend->>User: Display legend UI
end
Suggested labels
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx (1)
40-66: Categorical legend implementation with proper i18n support.The CategoryLegend component correctly renders categorical data as color blocks and uses the translation system for internationalized category labels.
One minor suggestion: consider showing all category labels instead of just the first and last for better user understanding, especially if the number of categories is small.
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (1)
151-181: Comprehensive styling for legends.The legend styles provide a clean and consistent visual presentation for both range and categorical legends. The use of flexbox for layouts and proper spacing ensures good visual hierarchy.
Consider increasing the font size for legend values from 10px to at least 12px to improve readability and accessibility.
.legendValues { - font-size: 10px; + font-size: 12px; }src/utils/mapsV2/mapSettings.config.ts (1)
380-390: Well-structured categorical legend for fire risk.The fire risk legend uses a categorical approach with six distinct categories and a logical color progression from yellow to dark red, representing increasing risk levels.
Consider extracting the category colors to a shared constant or theme if these colors might be reused elsewhere in the application.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/static/locales/en/maps.jsonis excluded by!**/*.json
📒 Files selected for processing (4)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss(2 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx(1 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx(3 hunks)src/utils/mapsV2/mapSettings.config.ts(11 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx (1)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/CustomSwitch.tsx (1)
StyledSwitch(34-43)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx (1)
src/utils/mapsV2/mapSettings.config.ts (3)
RangeLegendData(33-39)CategoryLegendData(49-52)LegendData(54-54)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: ESLint on Ubuntu
🔇 Additional comments (14)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx (4)
27-28: Good practice: Early return for unavailable layers.Moving the availability check to the top of the component is a good practice that prevents unnecessary rendering and improves code readability.
33-33: Clean code: Extracted selection state into a variable.Extracting the selection state into
isOptionSelectedimproves readability and avoids repeating the same expression multiple times in the component.
57-80: Improved structure with layerControls wrapper.The introduction of the layerControls wrapper div provides a clean separation between the controls and the legend, allowing for better styling and layout management.
81-83: Conditional legend rendering properly implemented.The legend is correctly rendered only when two conditions are met: the layer is selected and a legend configuration exists for the layer.
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx (2)
22-38: Well-implemented continuous range legend component.The RangeLegend component effectively visualizes continuous data with a gradient color scale and displays the min/max values along with optional units.
68-71: Clean type discrimination for rendering different legend types.The main LayerLegend component effectively uses TypeScript's type discrimination to render the appropriate legend type based on the
typeproperty.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (2)
122-123: Updated layout to accommodate legends.The SingleLayerOption component has been correctly updated to use a vertical layout, providing space for the legend below the controls.
144-149: Well-structured controls layout.The new layerControls class maintains the previous horizontal layout for the label and switch, using space-between for alignment.
src/utils/mapsV2/mapSettings.config.ts (6)
33-39: Well-defined RangeLegendData interface.The interface provides all necessary properties for continuous data legends, including min/max values, optional units, and gradient definition.
41-52: Comprehensive category type system.The LegendCategoryKey type and CategoryLegendData interface provide a structured approach to defining categorical legends with proper typing.
54-63: Clean integration with existing configuration system.The LegendData type and extension of the LayerConfig interface provide a clean way to add legend support without breaking existing functionality.
98-104: Forest cover legend implementation.The legend configuration for forestCover is well-implemented with appropriate min/max values and gradient colors.
122-129: Biomass legend with appropriate units.The forestBiomass legend correctly includes units (t/ha) which helps users understand the data being displayed.
207-214: Consistent implementation across data layers.The legend configurations for soil and biodiversity layers maintain a consistent approach, with appropriate values and color gradients for each data type.
Also applies to: 231-237, 255-262, 280-287, 307-313
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (5)
121-123: Validate vertical layout and replace hardcoded gap
Switching toflex-direction: columnalters the item stacking (removing the previous horizontal alignment) andgap: 4pxuses a literal value. Verify this change against the design mockups, and consider replacing the gap with a theme spacing token (e.g.,$spacingXSmall) to maintain consistency.
148-153: Use theme spacing forgapin.layerControls
gap: 10pxis a hardcoded value; swapping it for a semantic token (e.g.,$spacingSmall) will keep control spacing consistent across the app.
155-161: Leverage theme tokens for padding and gap in.layerLegend
The declarationspadding: 10pxandgap: 8pxare literal values. To align with the design system, replace these with the appropriate theme variables (for example,$spacingSmallor$spacingXSmall).
163-166: Refineborder-radiusfor the legend bar
border-radius: 300pxis excessive for an 8px-high element. A radius of4px(half the height) is clearer, easier to understand, and more maintainable.
179-184: Replace hardcoded font-size and margins with tokens
The.legendValuesblock usesfont-size: 10pxandmargin: 0 2px. Swap these for the corresponding font-size token (e.g.,$fontXXSmall) and spacing variables, and consider adding aline-heightfor better vertical alignment.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss(2 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/SingleLayerOption.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: ESLint on Ubuntu
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (2)
127-129: Ensure.legendVisiblemodifier is toggled correctly
The.legendVisibleclass removes the bottom border when a legend is rendered. Confirm that theSingleLayerOptioncomponent only applies this class when the legend is present—otherwise you may inadvertently drop borders in unintended states.
167-172: Support data-driven widths for category bars
With.legendCategoryColor { flex: 1 }, all categories render equally. If your legend needs to reflect proportional data, ensure the React component injects inlineflexor width styles, or extend the SCSS to accept dynamic modifiers for each category.Also applies to: 174-176
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx
Show resolved
Hide resolved
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/utils/mapsV2/mapSettings.config.ts (1)
114-114: 🛠️ Refactor suggestionConsider enabling the forestBiomass layer
The forestBiomass layer has a legend configuration added, but
canShowis still set tofalse. This seems inconsistent with the other layers that have legends and are now visible.- canShow: false, + canShow: true,Also applies to: 128-135
🧹 Nitpick comments (1)
src/utils/mapsV2/mapSettings.config.ts (1)
241-247: Consider adding pH unit label for clarityWhile pH is technically unitless, adding "pH units" as the unit would improve clarity for users who may not be familiar with soil science.
legend: { type: 'range', min: 3.5, max: 10, gradient: 'linear-gradient(90deg, #FE4242 0%, #F3F7C7 45.5%, #6C8DFF 100%)', + unit: 'pH units', },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss(2 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx(1 hunks)src/utils/mapsV2/mapSettings.config.ts(15 hunks)src/utils/multiTenancy/helpers.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/utils/multiTenancy/helpers.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx
- src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: ESLint on Ubuntu
🔇 Additional comments (11)
src/utils/mapsV2/mapSettings.config.ts (11)
33-62: Well-structured legend data interfacesThe new legend data type hierarchy with
SimpleLegendData,RangeLegendData, andCategoryLegendDatais well-designed. The interfaces provide a clear structure for different types of legends that might be needed for various map layers.
72-72: LGTM - Good integration of legend into LayerConfigExtending
LayerConfigwith an optionallegendproperty is a clean approach that allows legends to be defined only where needed.
107-110: Appropriate simple legend for forest coverThe green color (#036201) is an intuitive choice for representing forest cover on the map.
164-164: Good deforestation visualization enablementEnabling the deforestation layer and adding a clear red legend color (#FE1717) provides users with important information about forest loss.
Also applies to: 177-180
217-224: Verify soil nitrogen gradient colorsThe soil nitrogen gradient uses yellow-to-blue colors, which is different from most other soil properties that use earth tones. Confirm this is the intended color scheme for this property.
265-272: Appropriate legend for soil organic carbonThe legend configuration for soil organic carbon uses an appropriate range and color gradient that intuitively represents carbon content from low to high.
290-297: Verify soil bulk density maximum valueThe maximum value for soil bulk density is set to 176 cg/cm³ (1.76 g/cm³). Typical soil bulk densities rarely exceed 2 g/cm³, so this range seems appropriate, but please verify with domain experts.
317-324: Good species density gradientThe gradient from light to dark green for tree species density is intuitive and visually appropriate for representing biodiversity levels.
328-348: Well-implemented biodiversity legends with distinct color schemesEnabling the bird, mammal, and amphibian density layers with appropriate color gradients (blue, red, and green respectively) helps users distinguish between different biodiversity metrics while maintaining a consistent design pattern.
Also applies to: 352-371, 375-394
412-422: Excellent categorical legend for fire riskThe fire risk legend uses an intuitive progression from yellow to dark red across six categories, making it easy for users to understand the severity levels.
153-160:❓ Verification inconclusive
Verify identical legend configurations
The biomassPotential legend has identical configuration (range, gradient, unit) as forestBiomass. Please verify this is intentional and not a copy-paste error.
🏁 Script executed:
#!/bin/bash # Check if other layers have identical ranges and units that might need to be differentiated echo "Checking for potentially identical legend configurations..." grep -A 8 "legend: {" src/utils/mapsV2/mapSettings.config.ts | grep -E "min:|max:|unit:"Length of output: 789
Verify duplicate legend configurations
It looks like both
forestBiomassandbiomassPotentialinsrc/utils/mapsV2/mapSettings.config.tsuse the exact same legend settings (min: 0, max: 376, gradient, unit: ‘t/ha’). Please confirm this is intentional and, if not, adjust the range/gradient/unit for the appropriate layer.• Affected location:
- src/utils/mapsV2/mapSettings.config.ts – legend entries for forestBiomass vs biomassPotential
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/utils/mapsV2/mapSettings.config.ts (1)
201-208: Consider adjusting soilNitrogen gradient colorsThe soilNitrogen legend uses a yellow-blue gradient, which might not be the most intuitive color scheme for nitrogen content. Consider using a more standard color scale that better represents the data range.
- gradient: - 'linear-gradient(90deg, #FFF59A 0%, #FEFB27 48%, #6C8DFF 100%)', + gradient: + 'linear-gradient(90deg, #FFF59A 0%, #A7DB54 48%, #38812F 100%)',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx(1 hunks)src/utils/mapsV2/mapSettings.config.ts(13 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerLegend.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: ESLint on Ubuntu
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
src/utils/mapsV2/mapSettings.config.ts (10)
33-54: Well-structured legend interfacesThe new interfaces for legends are well-defined and provide good type safety. The
RangeLegendDatainterface handles numeric ranges with min/max values, optional units, and CSS gradients, whileCategoryLegendDatahandles categorical data with predefined keys and colors.
64-64: Clean interface extensionAdding the optional
legendproperty to theLayerConfiginterface is a non-breaking change that enhances functionality without disrupting existing code.
116-123: Good use of range legend for forestBiomassThe legend configuration includes appropriate min/max values, units (t/ha), and a color gradient that intuitively represents biomass levels from low (light yellow) to high (dark green).
152-152: Deforestation layer visibility changedThe
canShowproperty for the deforestation layer has been changed fromfalsetotrue. Ensure this is intentional and that the layer data is ready for public display.
225-231: Appropriate pH scale and color gradientThe soilPH legend correctly uses a range of 3.5-10 with a red-yellow-blue gradient that follows standard pH color conventions (acidic to alkaline). Also correctly omits units as pH is unitless.
326-332: Consistent unit definitions for biodiversity layersGood job maintaining consistent unit formatting ("{species}/ha") across all biodiversity layers, which helps users understand and compare the data.
Also applies to: 349-355, 372-378
396-406: Clear categorical legend for fire riskThe fire risk legend effectively uses a categorical approach with six distinct levels, each with an appropriate color that intuitively represents increasing risk intensity from yellow to dark red.
312-312:❓ Verification inconclusive
Multiple biodiversity layers made visible
The
canShowproperty has been changed fromfalsetotruefor birdDensity, mammalDensity, and amphibianDensity layers. Verify that these layers are ready for public display and the data is available.Also applies to: 336-336, 359-359
🏁 Script executed:
#!/bin/bash # Check if these layers are referenced in any documentation or API endpoints grep -r "birdDensity\|mammalDensity\|amphibianDensity" --include="*.ts" --include="*.tsx" --include="*.md" .Length of output: 502
Verify biodiversity layer readiness
A grep search shows that
birdDensity,mammalDensity, andamphibianDensityonly appear in
src/utils/mapsV2/mapSettings.config.ts (lines 312, 336, and 359) and aren’t referenced in any documentation or API endpoints.• Please confirm with the data team that these layers are fully populated and suitable for public display.
• If needed, update any API definitions and documentation to include these new biodiversity layers.
274-281:❓ Verification inconclusive
Verify soilBulkDensity max value
The max value for soilBulkDensity is set to 176 cg/cm³ (1.76 g/cm³), which seems low for some soil types. Typical soil bulk density ranges from 1.0 to 2.0+ g/cm³. Verify this maximum value against the actual data.
🌐 Web query:
What is the typical range for soil bulk density in g/cm³?💡 Result:
Soil bulk density typically ranges from 1.0 to 1.8 g/cm³ for mineral soils, though this can vary depending on soil type, texture, depth, and management practices[8].
The bulk density of soil is defined as the mass of dry soil per unit of bulk volume, including the air space[8]. This measurement is important as it serves as an indicator of soil compaction and affects various soil properties such as infiltration, rooting depth, available water capacity, soil porosity, nutrient availability, and microbial activity[7].
Different sources report slightly varying ranges:
- According to FAO's Global Soil Laboratory Network, typical values range from 1.0 to 1.7 g/cm³[10]
- Generally, bulk densities in undisturbed soils range from about 1.0 to 1.4 g/cm³
- A sampling study in Oklahoma from 47 fields reported an average bulk density of 1.45 g/cm³ up to 30 cm depth, with measurements ranging from 1.23 to 1.67 g/cm³[1][9]
Soil texture affects bulk density values:
- Sandy soils usually have higher bulk densities (1.3–1.7 g/cm³) than fine silts and clays (1.1–1.6 g/cm³) because they have larger but fewer pore spaces[3]
- Soils rich in organic matter, such as peaty soils, can have densities of less than 0.5 g/cm³[3]
The bulk density also varies based on soil depth, with subsurface layers typically having higher bulk density values than surface layers due to less organic matter, reduced aggregation, and fewer root penetrations[7][9].
Citations:
- 1: https://extension.okstate.edu/fact-sheets/basics-of-soil-bulk-density.html
- 2: https://www.nrcs.usda.gov/sites/default/files/2022-11/Bulk%20Density%20-%20Soil%20Health%20Guide_0.pdf
- 3: https://www.soilquality.org.au/factsheets/bulk-density-measurement
- 4: https://extension.sdstate.edu/bulk-density-indicator-soil-health
- 5: https://chem.libretexts.org/Ancillary_Materials/Exemplars_and_Case_Studies/Exemplars/Geology/Density_of_Rocks_and_Soils
- 6: https://study.com/learn/lesson/bulk-density-equation-compaction.html
- 7: https://www.nrcs.usda.gov/sites/default/files/2022-10/Soil%20Bulk%20Density%20Moisture%20Aeration.pdf
- 8: https://labmodules.soilweb.ca/soil-compaction-bulk-density/
- 9: https://extension.okstate.edu/fact-sheets/print-publications/pss/basics-of-soil-bulk-density-pss-2287-updated-a.pdf
- 10: https://openknowledge.fao.org/server/api/core/bitstreams/deed7688-a43e-4532-962f-d48768bd61c4/content
Verify soilBulkDensity max value
The legend’s max is currently set to 176 cg/cm³ (1.76 g/cm³), which aligns with typical mineral soil bulk densities (≈1.0–1.8 g/cm³). Please confirm that 1.76 g/cm³ matches the maximum in our underlying dataset, and adjust if your data exceed this value.
• File: src/utils/mapsV2/mapSettings.config.ts
Lines: 274–281 —legend.maxshould reflect the true maximum bulk density from your data.
141-148:❓ Verification inconclusive
Ensure biomassPotential legend is accurate
The biomassPotential legend uses identical values and gradient as forestBiomass. Verify that these two datasets actually share the same range and scale.
🏁 Script executed:
#!/bin/bash # Check if these two layers use the same data scale in the API or in any documentation grep -r "biomassPotential.*range\|forestBiomass.*range" --include="*.ts" --include="*.tsx" .Length of output: 94
🏁 Script executed:
#!/bin/bash # Locate legend configurations for both layers in the config file grep -R -nE "forestBiomass" --include="*.ts" src/utils/mapsV2/mapSettings.config.ts grep -R -nE "biomassPotential" --include="*.ts" src/utils/mapsV2/mapSettings.config.tsLength of output: 284
🏁 Script executed:
#!/bin/bash # Extract legend configuration for forestBiomass from mapSettings.config.ts grep -R -n -A7 -B3 "key: 'forestBiomass'" src/utils/mapsV2/mapSettings.config.tsLength of output: 401
🏁 Script executed:
#!/bin/bash # Extract legend configuration for forestBiomass grep -R -n -A20 "key: 'forestBiomass'" src/utils/mapsV2/mapSettings.config.ts # Extract legend configuration for biomassPotential grep -R -n -A20 "key: 'biomassPotential'" src/utils/mapsV2/mapSettings.config.tsLength of output: 1696
Verify biomassPotential legend range and gradient
Both
forestBiomass(lines 117–120) andbiomassPotential(lines 141–144) insrc/utils/mapsV2/mapSettings.config.tsuse an identical legend configuration:
- type:
'range'- min:
0- max:
376- gradient:
'linear-gradient(90deg, #FFF59A 0%, #FEFB27 48%, #36670C 100%)'Please confirm against the Walker et al. 2022 dataset (or API docs) that the potential biomass values truly span the same 0–376 t/ha range and use this color ramp. If the scale differs, update the
min/maxand/or gradient to reflect the correct potential biomass distribution.
Introduce legends for different layer options in the MapFeatureExplorer, enhancing the user interface with visual representations of data ranges and categories. Update localization files and styles to support these changes.
Pending: