Atlas: Add "Bodemanalyses" layer

.changeset/orange-yaks-refuse.md

@@ -0,0 +1,5 @@
+---
+"@nmi-agro/fdm-app": minor
+---
+
+Added the soil analysis atlas. Users can select different soil parameters which will show each field on the atlas coloured according the parameter's value in its soil analyses.

.changeset/ready-clowns-pick.md

@@ -0,0 +1,5 @@
+---
+"@nmi-agro/fdm-app": minor
+---
+
+Users can no longer edit soil analyses by clicking the pencil icon on the parameter card's corner, if they don't have the right to edit the analysis that is the source of the value shown on the card.

fdm-app/app/components/blocks/atlas/atlas-legend.tsx

@@ -1,5 +1,27 @@
-import { Card, CardContent } from "~/components/ui/card"
+import type { SoilParameterDescription } from "@nmi-agro/fdm-core"
+import type { FeatureCollection, GeoJsonProperties, Geometry } from "geojson"
+import { TriangleAlert } from "lucide-react"
+import { useId, useMemo } from "react"
+import {
+    Bar,
+    BarChart,
+    type BarShapeProps,
+    Rectangle,
+    XAxis,
+    YAxis,
+} from "recharts"
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { ChartContainer } from "~/components/ui/chart"
 import { Spinner } from "~/components/ui/spinner"
+import {
+    GRADIENT_DEFINITIONS,
+    GRADIENT_SHADED_SOIL_PARAMETERS,
+    getGradientStops,
+    getShadedSoilParameters,
+    getShadingParameterMapper,
+    SHADED_SOIL_TYPES,
+    type ShadedSoilParameters,
+} from "./atlas-soil-analysis"
 
 interface ElevationLegendProps {
     min?: number
@@ -86,3 +108,199 @@ export function ElevationLegend({
         </div>
     )
 }
+interface SoilAnalysisLegendProps {
+    fieldsData?: FeatureCollection<Geometry, GeoJsonProperties>
+    selectedParameter: ShadedSoilParameters
+    soilParametersDescriptions: SoilParameterDescription
+    min?: number
+    max?: number
+}
+
+export function SoilAnalysisLegend(props: SoilAnalysisLegendProps) {
+    const { fieldsData, selectedParameter } = props
+
+    // Parameter shading config
+    const shadingConfig = Object.fromEntries(
+        getShadedSoilParameters().map((item) => [item.parameter, item]),
+    )
+
+    if (!shadingConfig[selectedParameter]) {
+        console.warn(
+            `${selectedParameter} not found in shaded soil parameters.`,
+        )
+    }
+
+    const anyDataAvailable = fieldsData?.features.some(
+        (feature) =>
+            feature.properties && selectedParameter in feature.properties,
+    )
+
+    const parameterDescription = props.soilParametersDescriptions.find(
+        (item) => item.parameter === props.selectedParameter,
+    )
+
+    const unitDisplay =
+        parameterDescription?.unit && parameterDescription.unit !== "-"
+            ? ` (${parameterDescription.unit})`
+            : ""
+    const title = parameterDescription
+        ? `${parameterDescription.name}${unitDisplay}`
+        : undefined
+
+    return (
+        <Card className="p-4 space-y-2 flex-initial min-h-0 overflow-y-auto">
+            <CardHeader className="p-0">
+                <CardTitle className="text-xs text-center text-muted-foreground">
+                    {title}
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+                {!shadingConfig[selectedParameter] ? null : shadingConfig[
+                      selectedParameter
+                  ].shading === "enum" ? (
+                    <EnumSoilAnalysisLegend {...props} />
+                ) : (
+                    <GradientSoilAnalysisLegend
+                        {...props}
+                        selectedParameter={selectedParameter}
+                    />
+                )}
+                {fieldsData &&
+                    fieldsData.features.length > 0 &&
+                    !anyDataAvailable && (
+                        <p className="flex flex-row items-center gap-2 text-[10pt]">
+                            <TriangleAlert className="h-4 w-4 text-orange-500" />
+                            Geen data op hele bedrijf
+                        </p>
+                    )}
+            </CardContent>
+        </Card>
+    )
+}
+
+function EnumSoilAnalysisLegend(props: SoilAnalysisLegendProps) {
+    const displayedOptions = useMemo(() => {
+        if (props.selectedParameter !== "b_soiltype_agr") return []
+        if (!props.fieldsData) return SHADED_SOIL_TYPES
+
+        const found = new Set<string>()
+
+        for (const feature of props.fieldsData.features) {
+            const value = feature.properties?.[props.selectedParameter]
+            if (typeof value !== "undefined") {
+                found.add(value as string)
+            }
+        }
+
+        return SHADED_SOIL_TYPES.filter((item) => found.has(item.value))
+    }, [props.selectedParameter, props.fieldsData])
+
+    return (
+        <table className="border-separate border-spacing-1">
+            <tbody>
+                {displayedOptions.map((opt) => (
+                    <tr key={opt.value}>
+                        <td className="align-middle">
+                            <div
+                                className="size-3 rounded"
+                                style={{ backgroundColor: opt.fill }}
+                            />
+                        </td>
+                        <td className="align-middle text-sm text-muted-foreground">
+                            {opt.label}
+                        </td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    )
+}
+
+function GradientSoilAnalysisLegend(
+    props: SoilAnalysisLegendProps & {
+        selectedParameter: ShadedSoilParameters
+    },
+) {
+    const gradientId = useId()
+
+    const gradDef =
+        GRADIENT_DEFINITIONS[
+            GRADIENT_SHADED_SOIL_PARAMETERS[
+                props.selectedParameter as keyof typeof GRADIENT_SHADED_SOIL_PARAMETERS
+            ]
+        ]
+
+    if (!gradDef) {
+        console.warn(
+            `No gradient definition found for parameter: ${props.selectedParameter}`,
+        )
+        return null
+    }
+
+    const parameterMapper = getShadingParameterMapper(props.selectedParameter)
+
+    const min = props.min ?? 0
+    const max = props.max ?? 1
+
+    const chartData = [{ name: "Legenda", min: min, max: max }]
+    const gradient = getGradientStops(
+        gradDef.gradient,
+        min,
+        max,
+        gradDef.center,
+    )
+
+    return (
+        <ChartContainer
+            config={{}}
+            initialDimension={{ width: 200, height: 50 }}
+            className="-mx-3 -mbe-3 min-w-60 aspect-24/5"
+        >
+            <BarChart
+                className="overflow-visible"
+                barSize={20}
+                data={chartData}
+                layout="vertical"
+                margin={{
+                    left: 15,
+                    right: 15,
+                    top: 0,
+                    bottom: 0,
+                }}
+            >
+                <defs>
+                    <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="0">
+                        {gradient.map((stop) => (
+                            <stop
+                                key={stop.normalPosition}
+                                offset={`${stop.normalPosition * 100}%`}
+                                stopColor={stop.color}
+                            />
+                        ))}
+                    </linearGradient>
+                </defs>
+                <XAxis
+                    type="number"
+                    domain={[min, max]}
+                    interval={0}
+                    niceTicks="snap125"
+                    tickFormatter={(n) =>
+                        (
+                            Math.round(parameterMapper.inverse(n) * 100) / 100
+                        ).toString()
+                    }
+                />
+                <YAxis type="category" dataKey="name" tickLine={false} hide />
+                <Bar
+                    isAnimationActive={false}
+                    dataKey={(
+                        entry: (typeof chartData)[number],
+                    ): [number, number] => [entry.min, entry.max]}
+                    shape={(props: BarShapeProps) => (
+                        <Rectangle {...props} fill={`url(#${gradientId})`} />
+                    )}
+                />
+            </BarChart>
+        </ChartContainer>
+    )
+}

fdm-app/app/components/blocks/atlas/atlas-panels.tsx

@@ -1,8 +1,12 @@
 import type { FeatureCollection } from "geojson"
 import throttle from "lodash.throttle"
 import { Check, ChevronDown, ChevronUp, Info } from "lucide-react"
-import type { MapGeoJSONFeature, MapLibreZoomEvent } from "maplibre-gl"
-import { useCallback, useEffect, useRef, useState } from "react"
+import type {
+    GeoJSONFeature,
+    MapGeoJSONFeature,
+    MapLibreZoomEvent,
+} from "maplibre-gl"
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react"
 import type { MapLayerMouseEvent as MapMouseEvent } from "react-map-gl/maplibre"
 import { useMap } from "react-map-gl/maplibre"
 import { data, NavLink, useFetcher } from "react-router"
@@ -21,15 +25,32 @@ import { Separator } from "~/components/ui/separator"
 import { Spinner } from "~/components/ui/spinner"
 import { cn } from "~/lib/utils"
 
+/**
+ * Renders a panel showing the field name or the cultivation name and the corresponding area,
+ * for the farm or cultivation field that is currently hovered on with the mouse pointer.
+ * It can also include contextual information if the field IDs "fieldsSaved", "fieldsAvailable" etc. are used.
+ *
+ * This component will always contain some HTML, but it will have hidden visibility if there is no intersected feature
+ *
+ * - `zoomLevelFields` is the zoom threshold after which no panel is shown
+ * - `layer` is a layer ID or an array of IDs for which the panel is shown
+ * - `layerExclude` can be a layerId or an array of IDs which block the panel from being shown
+ * - `render` can be used to render a custom panel instead of the default one.
+ *    It **SHOULD** be a stable reference since when it changes the event handlers on the map are reinstantiated.
+ * - `clickRedirectsToDetailsPage`, if set to true, causes the default panel to tell the user that clicking will navigate to a different page
+ * @returns the output of the render function, or a Card containing the information mentioned above.
+ */
 export function FieldsPanelHover({
     zoomLevelFields,
     layer,
     layerExclude,
+    render,
     clickRedirectsToDetailsPage = false,
 }: {
     zoomLevelFields: number
     layer: string[] | string
     layerExclude?: string[] | string
+    render?: (feature: GeoJSONFeature) => ReactNode
     clickRedirectsToDetailsPage?: boolean
 }) {
     const { current: map } = useMap()
@@ -108,7 +129,9 @@ export function FieldsPanelHover({
                                 ? feature.properties.b_name
                                 : feature.properties.b_lu_name
                             : "Naam"
-                        return (
+                        return active && render ? (
+                            render(feature)
+                        ) : (
                             <Card
                                 className={cn("w-full", !active && "invisible")}
                             >
@@ -179,6 +202,7 @@ export function FieldsPanelHover({
         zoomLevelFields,
         layerIdsKey,
         excludedLayerIdsKey,
+        render,
         clickRedirectsToDetailsPage,
     ])