New explore dropdown UI #2336
New explore dropdown UI #2336
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
npm warn config production Use WalkthroughThe changes in this pull request involve extensive modifications to the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
🧹 Outside diff range and nitpick comments (2)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx (2)
28-28: Remove unnecessary div nestingThe extra
<div>wrapper appears to serve no semantic or styling purpose and can be removed to improve code clarity.- <div> <div> <MapLayerToggle // ... component content /> </div> <div className={styles.exploreDescription}> {tMaps('3trilliontrees')} </div> - </div>
Line range hint
31-57: Remove commented-out code blocksLarge blocks of commented code make the file harder to maintain and understand. If these features are planned for future implementation, consider:
- Tracking them in issues/tickets
- Relying on version control history
- Creating separate feature branches
📜 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/MapSettings.tsx(1 hunks)
🔇 Additional comments (3)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (3)
15-15: Verify the visual impact of reduced padding
The padding has been significantly reduced from 14px 16px to a uniform 8px. This could make the content feel cramped, especially given the fixed max-width: 182px.
Please confirm that:
- Content has sufficient breathing room
- Text remains readable
- Interactive elements have enough touch targets
24-24: LGTM! Enhanced visual hierarchy
The new styles improve the visual hierarchy with:
- Well-defined padding
- Subtle background color using rgba
- Consistent border-radius
Also applies to: 29-30
89-90: Verify the font size variable exists
The font size has been changed to $fontXXXSmallNew. Please ensure this variable is defined in the theme.
✅ Verification successful
Font size variable is properly defined
The $fontXXXSmallNew variable is correctly defined in src/theme/_fonts.scss as var(--font-xxx-extra-small-new) and is already being used in other components within the project.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the font size variable is defined in theme files
rg -l '\$fontXXXSmallNew' 'src/theme/**/*'
Length of output: 99
Script:
#!/bin/bash
# Let's first find any SCSS/CSS files that might define this variable
fd -e scss -e css | xargs rg '\$fontXXXSmallNew'
# Also search for any potential definition or usage of this font size variable
rg '\$fontXXXSmallNew'
Length of output: 911
Used MUI Modal to render explore features for better compatibility on mobile devices. Provided a cross icon to close the modal view for improved usability.
…project layer configurations -Implemented LayerSwitchContainer component for reusable layer switch functionality. -Added MapLayerControlPanel for structured display of layer categories and configurations. -Created ExploreDropdownHeaderMobile for mobile-specific dropdown header functionality. -Added MapSettings component with forest, soil, and project layer configurations. -Integrated reusable layer configurations with translations and custom styles. -Refactored existing layer toggle components for improved modularity and reusability. -Incorporated conditional rendering for mobile and desktop layouts.
- Updated `.exploreMainContainer` to include `max-height` and hide scrollbars using `::-webkit-scrollbar`. - Introduced a new `.exploreItemsContainer` class with `max-height` and `overflow-y: auto` to enable scrolling for the content. - Adjusted styles for responsiveness in `xsPhoneView` to support dynamic heights for mobile views.
sunilsabatp
force-pushed
the
feature/new-explore-ui
branch
from
d88dbb7 to
58456f8
Compare
…onality for potential future use.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (19)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/ExploreDropdownHeaderMobile.tsx (4)
1-7: Ensure resilience against missing translationsIn case the
'explore'key is missing in the translations, consider a fallback string or a safe check to avoid potential runtime errors.
8-10: Props naming consistencyThe interface name
Propsis too generic. To maintain clarity and consistency with other files, consider naming itExploreDropdownHeaderMobileProps.-interface Props { +interface ExploreDropdownHeaderMobileProps { setIsOpen: SetState<boolean>; }
12-25: Appropriate ARIA attributes for accessibilityWhen using interactive elements such as the close button, consider adding relevant ARIA attributes, like
aria-label="Close"or using a textual alternative for screen readers, to improve accessibility.
27-27: Exporting multiple itemsIf you anticipate adding more exports (like constants or helper functions), consider consolidating them under named exports for modularity and easier refactoring in the future.
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/MapLayerControlPanel.tsx (2)
8-15: Consider optional chaining improvementsIf the
source,covariates, or other fields may be absent from the data model in the future, consider optional chaining and default values, particularly when rendering or performing operations on these fields.
69-69: Export statement for flexible importsExporting multiple named exports along with the default could help reuse this component’s types/utility functions in other parts of the codebase without extra imports.
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerInfoPopupContent.tsx (2)
7-12: Prop naming clarity
anchorElandsetAnchorElmight be more descriptive astooltipAnchorElorpopupAnchorEl, making the UI purpose clearer.
68-68: Consistent export namingAs in other files, consider matching the component name with the default export for uniformity across your codebase.
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/index.tsx (4)
11-11: Check for large bundle sizes with Material-UI importsModal from
@mui/materialis straightforward, but ensure minimal bundling. Potentially usedynamic()or a code-splitting strategy if the modal is not frequently used.
103-103: Defaulting boolean propsConsider providing a default to
isMobilein the destructuring, e.g.isMobile = false, to simplify conditionals below.- isMobile, + isMobile = false,
117-117: Separation of concernsInstead of inline rendering, consider extracting this logic into a small function or separate component for readability and to facilitate future changes (e.g., toggling different map feature bars).
123-132: Use ARIA attributes for modalsWhen rendering the
<Modal>conditionally, ensure you include attributes such asaria-labelledbyoraria-describedbyto enhance accessibility for screen reader users.src/features/projectsV2/ProjectListControls/ProjectListControlForMobile.tsx (1)
136-136: Use a descriptive prop name or documentation for clarity.
By hardcodingisMobile={true}, you're clearly flagging that the component should adapt its behavior for mobile. However, consider adding a comment or clarifying docstring to emphasize why the mobile override is being forced here (versus deriving it from a responsive hook or global state).src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (3)
12-21: Ensure consistent overflow handling for extra content.
By settingmax-height: 485px;and hiding scrollbars (display: none;), users with long content may not realize there's more to scroll. Consider adding a subtle visual scroll indicator or an alternative approach that ensures discoverability.
33-44: Improve naming clarity.
Renaming.exploreItemsContainerto something more descriptive (e.g.,.exploreContentScrollContainer) might help future maintainers quickly grasp its purpose.
46-66: Add consistent spacing constants.
The.exploreFeatureMobileHeaderhas hardcoded padding, gap, and font sizes. Consider referencing shared spacing tokens (e.g.,$spacingSmall,$fontSmall) for consistent design.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx (3)
1-3: Clean up leftover import references.
You have new imports (SetState) and old ones (ChangeEventorStyledSwitch) commented out. Remove no-longer-used imports to keep the codebase lean.
88-96: Remove commented-out toggles if not needed.
Code references toMapLayerToggleorStyledSwitchmight become outdated quickly. Trim them if you don't plan to reintroduce them soon.
128-131: Extend modular approach to future config expansions.
UsingexploreConfigarrays is a great pattern. Document how devs can add more objects (e.g., new toggles, new layers) without duplicating logic in multiple places.
📜 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 (8)
src/features/projectsV2/ProjectListControls/ProjectListControlForMobile.tsx(1 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss(2 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx(3 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/index.tsx(3 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/ExploreDropdownHeaderMobile.tsx(1 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerInfoPopupContent.tsx(1 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerSwitchContainer.tsx(1 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/MapLayerControlPanel.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/LayerSwitchContainer.tsx
🔇 Additional comments (11)
src/features/projectsV2/ProjectsMap/MapFeatureExplorer/microComponents/MapLayerControlPanel.tsx (1)
17-28: Ensure type safety in the mapOptions callbackThe
updateMapOptionfunction sets abooleanvalue for options. If yourMapOptionstype can accept other types for different fields, consider stricter type checks or a more generalized approach.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/index.tsx (1)
97-97: Optional prop usage consistency
isMobileis optional. Ensure that any internal logic or child components referencingisMobilealso handleundefinedcorrectly, to avoid runtime issues.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (6)
25-29: Double-check phone resolution constraints.
Positioning the container absolutely in smaller viewports can lead to overlapping or unexpected layout artifacts on certain devices. Verify with a broad range of breakpoints to ensure a stable layout.
67-79: Double-check background color usage.
The subtle green background (rgba(0, 122, 73, 0.05)) might conflict with certain themes. Ensure this color aligns with brand palettes or configurable theme tokens.
80-95: Ensure accessible separation for dashed borders.
While a dashed HR provides visual separation, consider users with low vision. Confirm the contrast ratio meets accessibility standards or provide an alternative.
96-110: Keep consistent sizing with modals.
.layerInfoPopupContaineratmax-width: 189px;may appear too narrow on certain device sizes. Check the final design to confirm readability of text within the popup.
116-116: Standardize container styling.
The newly added background and padding on.toggleMainContainerlook good. Just ensure you apply the same styling approach used in.exploreItemSectionor other containers for consistent layout patterns across the module.Also applies to: 121-121
181-181: Confirm consistent use of extra-small font.
font-size: var(--font-xx-extra-small);is beneficial for space-limited UIs, but it can hinder readability on mobile devices. Verify that it meets accessibility guidelines.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx (3)
12-13: Good practice: Keep module imports collocated.
It's nice to see important modules likeMapLayerControlPanelandExploreDropdownHeaderMobilegrouped together. Maintaining consistent import ordering helps clarity.
18-19: Validate usage of optional props.
isMobile?andsetIsOpen?are helpful for flexible design. Ensure internal logic gracefully handles the absence of these props if not explicitly passed in.
22-27: Nice decoupling for responsive behavior.
This approach of passingisMobileandsetIsOpenkeeps concerns isolated in the parent while allowing the child component to adapt. Good job.
| const MapLayerControlPanel = ({ | ||
| category, | ||
| exploreConfig, | ||
| mapOptions, | ||
| updateMapOption, | ||
| }: Props) => { | ||
| return ( | ||
| <section className={styles.exploreItemSection}> | ||
| {category && <h2>{category}</h2>} | ||
| <div> | ||
| {exploreConfig.map((item) => { | ||
| if (!item.shouldRender) return <></>; | ||
| return ( | ||
| <LayerSwitchContainer | ||
| key={item.label} | ||
| showDivider={item.showDivider} | ||
| switchComponent={ | ||
| <StyledSwitch | ||
| checked={mapOptions?.['showProjects'] || false} | ||
| customColor={item.color} | ||
| onChange={( | ||
| _event: ChangeEvent<HTMLInputElement>, | ||
| checked: boolean | ||
| ) => { | ||
| if (updateMapOption) | ||
| updateMapOption('showProjects', checked); | ||
| }} | ||
| /> | ||
| } | ||
| label={item.label} | ||
| additionalInfo={item.additionalInfo} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Proposed switch logic improvements
Here, each switch is mapped to 'showProjects'. If you plan on handling different map options, pass a dynamic key from each item object so each item toggles the correct option.
- updateMapOption('showProjects', checked);
+ if (item.mapOptionKey) {
+ updateMapOption(item.mapOptionKey, checked);
+ }Committable suggestion skipped: line range outside the PR's diff.
| const LayerInfoPopupContent = ({ | ||
| additionalInfo, | ||
| handleMouseLeave, | ||
| setAnchorEl, | ||
| anchorEl, | ||
| }: Props) => { | ||
| const tMaps = useTranslations('Maps'); | ||
| return ( | ||
| <div | ||
| className={styles.layerInfoPopupContainer} | ||
| onMouseEnter={() => setAnchorEl(anchorEl)} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| {additionalInfo?.dataYears && ( | ||
| <div> | ||
| <p className={styles.label}>{tMaps('layers.dataYears')}</p> | ||
| <p>{additionalInfo?.dataYears}</p> | ||
| </div> | ||
| )} | ||
| {additionalInfo?.resolution && ( | ||
| <div> | ||
| <p className={styles.label}>{tMaps('layers.resolution')}</p> | ||
| <p>~{additionalInfo?.resolution}</p> | ||
| </div> | ||
| )} | ||
| {additionalInfo?.description && ( | ||
| <div> | ||
| <p className={styles.label}>{tMaps('layers.description')}</p> | ||
| <p>{additionalInfo.description}</p> | ||
| </div> | ||
| )} | ||
| {additionalInfo?.underlyingData && ( | ||
| <div> | ||
| <p className={styles.label}>{tMaps('layers.underlyingData')}</p> | ||
| <p>{additionalInfo.underlyingData}</p> | ||
| </div> | ||
| )} | ||
| {additionalInfo?.covariates && ( | ||
| <div> | ||
| <p>{tMaps('layers.covariates')}</p> | ||
| <a | ||
| href={additionalInfo.source} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className={styles.source} | ||
| > | ||
| {additionalInfo.covariates} | ||
| </a> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Validate link fields before rendering
When rendering href from additionalInfo.source, consider validating or sanitizing the input to prevent potential security risks (e.g., ensuring it uses a safe protocol).
<a
- href={additionalInfo.source}
+ href={additionalInfo.source?.startsWith('http') ? additionalInfo.source : '#'}
target="_blank"
rel="noopener noreferrer"
className={styles.source}
>| {isMobile && setIsOpen && ( | ||
| <ExploreDropdownHeaderMobile setIsOpen={setIsOpen} /> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid cramped mobile headers.
ExploreDropdownHeaderMobile typically runs close to the top of the viewport. Ensure there's enough breathing room or margins in the enclosing layout so the header doesn't visually clash with the device notch or other UI elements.
This PR handles the new explore drop down UI (mobile, desktop).