Add Bodemkaart soil map integration to Atlas#427
Conversation
🦋 Changeset detectedLatest commit: 52dd904 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 Bodemkaart (Soil Map) feature to Atlas: new SoilControl and control props, header/sidebar navigation links, a full atlas/soil route with WMS raster + GetFeatureInfo handling (EPSG:3857→4326 reprojection), fields overlay and highlight, map view state persistence, and popup styling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Client as Atlas Client
participant Loader as Server Loader
participant MapGL as Map Component
participant WMS as WMS Server
User->>Client: Navigate to /farm/.../atlas/soil
Client->>Loader: request loader data (fields, calendar, mapStyle)
Loader-->>Client: return fields GeoJSON and metadata
Client->>MapGL: initialize map (tiles, satellite base, soil WMS layer, fields GeoJSON)
MapGL->>MapGL: render layers
User->>MapGL: Click map
MapGL->>WMS: Send WMS GetFeatureInfo (EPSG:3857)
WMS-->>Client: Return feature JSON
Client->>Client: Reproject coords (EPSG:3857→EPSG:4326)
Client->>MapGL: Add highlight GeoJSON & open popup
User->>Client: Toggle Soil control
Client->>MapGL: Show/hide soil layer and clear selections if hidden
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## development #427 +/- ##
============================================
Coverage 88.07% 88.07%
============================================
Files 91 91
Lines 4620 4620
Branches 1492 1492
============================================
Hits 4069 4069
Misses 551 551
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 full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@fdm-app/app/routes/farm`.$b_id_farm.$calendar.atlas.soil.tsx:
- Around line 139-153: The sessionStorage access in the viewState initializer
(getViewState, initialViewState, viewState, setViewState) isn't guarded and uses
a generic key; wrap all sessionStorage calls in try/catch to safely handle
environments where storage throws, and use a namespaced key (e.g., include a
unique prefix and farm id/calendar identifier) instead of "mapViewState" so
state doesn't collide across pages; if reading fails or parsing throws, fall
back to initialViewState, and apply the same guarded namespaced write when
persisting viewState elsewhere in this module.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@fdm-app/app/routes/farm`.$b_id_farm.$calendar.atlas.soil.tsx:
- Around line 139-157: The component reads "mapViewState" but never persists
updates; add a useEffect that watches viewState (the state initialized by
initialViewState and updated via setViewState/onViewportChange) and writes
JSON.stringify(viewState) to sessionStorage under the "mapViewState" key,
guarding with typeof window !== "undefined" and a try/catch to ignore storage
errors (e.g., private mode) so atlas views stay in sync across routes.
🧹 Nitpick comments (1)
fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.soil.tsx (1)
70-100: Avoidanyforb_lu_nameto keep typing consistent.Other atlas loaders read
field.b_lu_namedirectly; keeping this typed avoids masking regressions.♻️ Suggested cleanup
- b_lu_name: (field as any).b_lu_name, + b_lu_name: field.b_lu_name,
| if (savedViewState) { | ||
| try { | ||
| try { | ||
| const savedViewState = sessionStorage.getItem("mapViewState") |
There was a problem hiding this comment.
why within try catch? can this generate an error?
There was a problem hiding this comment.
Yes, if you are in private mode of your browser
gerardhros
left a comment
There was a problem hiding this comment.
LGTM. one minor question.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@fdm-app/app/routes/farm`.$b_id_farm.$calendar.atlas.soil.tsx:
- Around line 388-395: Replace the invalid Tailwind class "w-87.5" with the
standard arbitrary width "w-[350px]" on the grid container that renders
FieldsPanelHover; find the div element containing className "grid gap-4 w-87.5"
(the parent of <FieldsPanelHover /> which uses ZOOM_LEVEL_FIELDS and
layer={fieldsSavedId}) and update the className to use "w-[350px]" for
consistency with the codebase.
🧹 Nitpick comments (1)
fdm-app/app/routes/farm.$b_id_farm.$calendar.atlas.soil.tsx (1)
169-248: Consider providing user feedback on GetFeatureInfo errors.The GetFeatureInfo implementation is well-structured with proper EPSG:3857 projection and coordinate reprojection. However, when the fetch fails or returns a non-ok response (lines 215, 243-245), the user receives no feedback—the click simply does nothing.
Consider providing visual feedback for error states (e.g., a toast notification or brief inline message) so users understand why no soil data appeared.
♻️ Example error feedback approach
+import { toast } from "sonner" // or your preferred toast library const onMapClick = useCallback( async (event: MapLayerMouseEvent) => { // ... existing code ... try { const response = await fetch(url) - if (response.ok) { + if (!response.ok) { + console.error("GetFeatureInfo request failed:", response.status) + // Optionally: toast.error("Kon bodemgegevens niet ophalen") + return + } const data = (await response.json()) as FeatureCollection // ... rest of success handling ... - } } catch (e) { console.error("Failed to fetch soil info", e) + // Optionally: toast.error("Kon bodemgegevens niet ophalen") } }, [showSoil], )
Summary by CodeRabbit
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.