Add field layers toggle control and fix geocoder mobile collapse#345
Conversation
🦋 Changeset detectedLatest commit: b50f942 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughAdds a Fields layer visibility toggle control and wiring across atlas routes, makes GeocoderControl collapsible on mobile via a new prop, and replaces conditional layer rendering with Mapbox layer layout visibility controlled by local showFields state. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Controls as Controls Component
participant CustomCtrl as CustomFieldsControl (IControl)
participant Route as Atlas Route (page state)
participant Map as Map / Mapbox Layers
User->>CustomCtrl: click Fields toggle
CustomCtrl->>Controls: call onToggleFields()
Controls->>Route: invoke handler to set showFields
Route->>Route: update showFields & compute layerLayout
Route->>Map: apply layerLayout (visibility) to field layers
Map->>User: field layers shown/hidden
Note right of Controls: Geocoder collapsed = isMobile || prop.collapsed
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## development #345 +/- ##
============================================
Coverage 87.34% 87.34%
============================================
Files 79 79
Lines 3872 3872
Branches 1099 1099
============================================
Hits 3382 3382
Misses 490 490
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
coderabbitai
Bot
changed the title
coderabbitai
Bot
added
branch:development
![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 (5)
.changeset/clever-boats-notice.md (1)
1-5: Polish the changeset description for readabilityConsider rephrasing to something like:
Fix geocoder bar being collapsed on mobile
or
Fixes the geocoder bar being collapsed on mobile
for slightly clearer English.fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx (1)
221-223: Field visibility toggle implementation is sound; small ergonomics tweaks possibleThe
showFieldsstate pluslayout.visibilitytoggle correctly hides/shows all field layers without tearing down sources, and the Controls API integration is consistent with other atlas routes.Two minor improvements you might consider:
- Use a functional updater to avoid any stale-closure edge cases on rapid toggling:
- onToggleFields={() => - setShowFields(!showFields) - } + onToggleFields={() => + setShowFields((prev) => !prev) + }
- Align
Layerusage with the pattern in the fields index route to avoidas anyand keep styles/props clearer:- <Layer - {...({ - ...fieldsAvailableStyle, - layout: layerLayout, - } as any)} - /> + <Layer {...fieldsAvailableStyle} layout={layerLayout} />(and similarly for the other
Layers usinglayout: layerLayout).Please sanity‑check that toggling the button hides all three visual representations (available, selected, saved/outline) and that selection/hover behavior is disabled when fields are hidden.
Also applies to: 285-304, 312-350
fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsx (1)
144-145: Overview map field toggle aligns with Controls; consider minor improvementsThe overview atlas now cleanly hooks into
Controlsand useslayout.visibilityto hide/show both available and saved field layers, which matches the intended UX.You might optionally:
- Switch to a functional updater for the toggle:
- onToggleFields={() => setShowFields(!showFields)} + onToggleFields={() => setShowFields((prev) => !prev)}
- If you want the visibility choice to survive a reload (like the viewState), persist
showFieldsinsessionStoragenext tomapViewState; not required for the current issue but consistent with your existing persistence pattern. Based on learnings, this keeps map behavior consistent across MapGL instances.Please verify that when fields are hidden, both hover panels correctly stop highlighting field geometries and only the basemap remains visible.
Also applies to: 161-162, 173-186, 188-201
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx (1)
201-208: Controlled map + field toggle are consistent with other atlas routes; only small tweaks suggestedThe move to a controlled
viewStatewithonMoveandControls.onViewportChangekeeps the map behavior predictable, and theshowFields/layerLayoutpattern correctly hides/shows both available and existing fields while creating a new one.Two minor suggestions:
- Use a functional updater for the toggle to avoid any stale-closure edge cases:
- onToggleFields={() => - setShowFields(!showFields) - } + onToggleFields={() => + setShowFields((prev) => !prev) + }
- (Optional) Extract the shared
layerLayout+Controlswiring pattern into a small helper or shared component if you find yourself repeating it across more atlas routes in future. Based on learnings, this would align with your goal of centralizing MapGL configuration/controls.Please confirm that geocoder navigation, manual panning/zooming, and the field visibility toggle all keep
viewStatein sync and that selecting a new field is impossible when layers are hidden.Also applies to: 213-216, 235-238, 294-308, 331-344, 346-376
fdm-app/app/components/blocks/atlas/atlas-controls.tsx (1)
48-132: CustomFieldsControl implementation is solid; fix likely typo in button classesThe custom Mapbox control using
useControl+createRootis a clean way to host theFieldsButton, andupdatePropskeeps it in sync with React state.One small nit:
- The class string
p-0!on the button is probably meant to be!p-0(or justp-0) for Tailwind/utility CSS to recognize it; as written it likely has no effect.No behavior change, but worth correcting for consistent styling.
Please double‑check the button’s padding in the browser; if it’s not being overridden as intended, updating
p-0!to!p-0(or similar) should fix it.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
.changeset/clever-boats-notice.md(1 hunks).changeset/fuzzy-ducks-pick.md(1 hunks)fdm-app/app/components/blocks/atlas/atlas-controls.tsx(2 hunks)fdm-app/app/components/blocks/atlas/atlas-geocoder.tsx(2 hunks)fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsx(4 hunks)fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx(7 hunks)fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (18)
📓 Common learnings
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/routes/farm.create.$b_id_farm.atlas.tsx:164-212
Timestamp: 2025-01-31T16:06:33.810Z
Learning: Map configuration in the application should be modularized using the `useMapConfig` hook and `MapControls` component to maintain consistency across all MapGL instances.
📚 Learning: 2024-11-25T14:42:26.660Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 6
File: fdm-app/app/components/blocks/field-map.tsx:0-0
Timestamp: 2024-11-25T14:42:26.660Z
Learning: In `fdm-app/app/components/blocks/field-map.tsx`, explicit cleanup of Mapbox GL resources is not necessary, as `react-map-gl` handles it automatically upon component unmount, and `MapRef` does not have a `remove` method.
Applied to files:
fdm-app/app/components/blocks/atlas/atlas-geocoder.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsxfdm-app/app/components/blocks/atlas/atlas-controls.tsx
📚 Learning: 2025-01-09T16:03:37.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A shared layout component `FarmLayoutBase` has been created in `components/custom/farm-layout-base.tsx` to maintain consistency across farm-related pages. The component handles farm selection dropdown, breadcrumb navigation, and provides a common layout structure.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-01-09T16:03:37.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The `FarmLayout` component in `components/custom/farm-layout.tsx` provides a reusable layout structure for farm-related pages, with support for farm selection dropdown, customizable breadcrumb titles, and flexible content rendering through either children or Outlet components.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-01-09T16:03:37.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: A comprehensive farm layout system has been created in `components/custom/farm-layouts/` with `BaseFarmLayout` and `FarmSidebarLayout` components. The system supports both simple and sidebar-based layouts while maintaining consistent header and farm selection functionality across all farm routes.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-09-23T12:27:07.391Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 274
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:151-204
Timestamp: 2025-09-23T12:27:07.391Z
Learning: In the FDM application, field overview functionality is implemented as a dedicated page accessible via `farm/{farmId}/{calendar}/field` rather than as a direct listing on the dashboard. The dashboard includes a "Perceelsoverzicht" quick action card that provides navigation to this comprehensive field management interface.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-01-09T16:03:37.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 42
File: fdm-app/app/routes/farm/_b_id_farm/layout.tsx:46-95
Timestamp: 2025-01-09T16:03:37.764Z
Learning: The farm layout system has been reorganized into separate components (`FarmHeader`, `ContentLayout`, `PaginationLayout`) to support different navigation patterns (sidebar, pagination) while maintaining consistent styling. Each layout component is designed to be used independently or combined as needed.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsx
📚 Learning: 2025-08-11T12:24:32.200Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 233
File: fdm-app/app/components/blocks/atlas-fields/cultivation-history.tsx:53-53
Timestamp: 2025-08-11T12:24:32.200Z
Learning: In `fdm-app/app/components/blocks/atlas-fields/cultivation-history.tsx`, the NMI API for cultivations guarantees that each year will be unique in the cultivation history data, so using `cultivation.year` as a React list key is safe and won't cause duplicate key warnings.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-09-23T12:29:34.184Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 274
File: fdm-app/app/routes/farm.$b_id_farm._index.tsx:160-163
Timestamp: 2025-09-23T12:29:34.184Z
Learning: In the FDM application, the fertilizer application route intentionally uses `${calendar}/field/fertilizer` instead of the originally planned `/farm/{farmId}/add/fertilizer` structure. This design decision prioritizes starting from the field list view to provide better field selection workflow before applying fertilizer, rather than direct dashboard-to-action navigation.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-01-31T15:05:14.310Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/routes/farm.create.$b_id_farm.fields.$b_id.tsx:601-610
Timestamp: 2025-01-31T15:05:14.310Z
Learning: The `updateField` function in fdm-core has optional parameters after `fdm` and `b_id`. The TypeScript definitions might show 8 required parameters due to a potential version mismatch.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsx
📚 Learning: 2025-09-26T08:34:50.413Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 279
File: fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx:277-283
Timestamp: 2025-09-26T08:34:50.413Z
Learning: In the fdm project, fdm-core and fdm-app are updated together as part of a monorepo structure, which eliminates legacy data concerns when new fields like b_isproductive are introduced. Both packages are synchronized, so there's no need for defensive coding against undefined values for newly introduced database fields.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsx
📚 Learning: 2025-01-31T14:29:37.599Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/components/custom/atlas/atlas.d.tsx:8-8
Timestamp: 2025-01-31T14:29:37.599Z
Learning: In the Atlas component's MapFieldsProps interface, mapStyle is intentionally restricted to "mapbox://styles/mapbox/satellite-streets-v12" as it's currently the only supported style option.
Applied to files:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsxfdm-app/app/components/blocks/atlas/atlas-controls.tsx
📚 Learning: 2025-01-31T16:06:33.810Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/routes/farm.create.$b_id_farm.atlas.tsx:164-212
Timestamp: 2025-01-31T16:06:33.810Z
Learning: MapGL implementations should use the shared `useMapConfig` hook for configuration and `getLayerStyle` utility for consistent styling. The hook supports both interactive and non-interactive maps, handling bounds calculation and view state management.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-01-31T15:41:43.741Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/components/custom/atlas/atlas-panels.tsx:28-28
Timestamp: 2025-01-31T15:41:43.741Z
Learning: When handling different map event types in react-map-gl v7.1.8, use MapLayerMouseEvent for mouse events (which have the point property) and ViewStateChangeEvent for view state changes. Use a type guard like 'point' in evt to safely access event-specific properties.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsxfdm-app/app/components/blocks/atlas/atlas-controls.tsx
📚 Learning: 2025-01-31T16:06:33.810Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/routes/farm.create.$b_id_farm.atlas.tsx:164-212
Timestamp: 2025-01-31T16:06:33.810Z
Learning: Map configuration in the application should be modularized using the `useMapConfig` hook and `MapControls` component to maintain consistency across all MapGL instances.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.fields._index.tsxfdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsxfdm-app/app/components/blocks/atlas/atlas-controls.tsx
📚 Learning: 2025-01-31T15:06:35.764Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 67
File: fdm-app/app/components/custom/atlas/atlas-sources.tsx:21-66
Timestamp: 2025-01-31T15:06:35.764Z
Learning: In react-map-gl components, when querying rendered features via map.queryRenderedFeatures(), the effect's dependency array must include any props that affect the map's rendered state (like source data) to ensure features are queried against the current map state.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
📚 Learning: 2025-06-10T13:10:03.154Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 161
File: fdm-app/app/components/blocks/field-map.tsx:0-0
Timestamp: 2025-06-10T13:10:03.154Z
Learning: When facing prop name inconsistencies with react-map-gl (like mapboxAccessToken vs mapboxApiAccessToken), using different import statements can resolve the issue more elegantly than changing prop names across multiple files.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsxfdm-app/app/components/blocks/atlas/atlas-controls.tsx
📚 Learning: 2025-06-10T12:20:38.360Z
Learnt from: SvenVw
Repo: SvenVw/fdm PR: 161
File: fdm-app/app/components/blocks/field-map.tsx:68-68
Timestamp: 2025-06-10T12:20:38.360Z
Learning: When using MapGL component from react-map-gl, the correct prop name for the Mapbox access token is `mapboxApiAccessToken` as verified by checking the MapboxProps interface. This should be consistent across all usages of the MapGL component.
Applied to files:
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx
🧬 Code graph analysis (3)
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx (1)
fdm-app/app/components/blocks/atlas/atlas-sources.tsx (2)
FieldsSourceSelected(39-97)FieldsSourceNotClickable(23-37)
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx (3)
fdm-app/app/components/blocks/atlas/atlas-viewstate.tsx (1)
getViewState(19-42)fdm-app/app/components/blocks/atlas/atlas-controls.tsx (1)
Controls(24-46)fdm-app/app/components/blocks/atlas/atlas-sources.tsx (2)
FieldsSourceAvailable(135-268)FieldsSourceNotClickable(23-37)
fdm-app/app/components/blocks/atlas/atlas-controls.tsx (1)
fdm-app/app/components/blocks/atlas/atlas-geocoder.tsx (1)
GeocoderControl(91-94)
🔇 Additional comments (3)
fdm-app/app/components/blocks/atlas/atlas-geocoder.tsx (1)
18-19: Geocoder collapsed prop wiring looks consistent with Controls usageAdding
collapsed?: booleanand threading it through to the geocoder options cleanly enables the mobile-specific behavior without affecting existing callers.Please verify on devices/emulation that the geocoder starts collapsed on mobile and expanded on desktop as intended.
Also applies to: 32-37
.changeset/fuzzy-ducks-pick.md (1)
1-5: Changeset accurately captures the new field-layer toggle featureThe minor release entry and description match the scope of the new map controls toggle.
fdm-app/app/components/blocks/atlas/atlas-controls.tsx (1)
1-46: Controls composition and mobile geocoder behavior look goodWiring
collapsed={isMobile}intoGeocoderControland conditionally renderingFieldsControlbased onshowFields/onToggleFieldscleanly extends the existing controls without breaking maps that don’t have fields.Please test on both mobile and desktop that: (1) the geocoder collapses only on mobile, and (2) maps without
showFields/onToggleFieldscontinue to render controls as before.
BoraIneviNMI
left a comment
BoraIneviNMI
left a comment
There was a problem hiding this comment.
Maybe the control state should reset if the user switches to a different farm from the header.
Otherwise, the changes look good to me.
SvenVw
added
enhancement
Resolved in b50f942 |
2 participants
Summary by CodeRabbit
New Features
Bug Fixes
UX Improvements
✏️ Tip: You can customize this high-level summary in your review settings.
Closes #327