map: show layers panel also for sampling point data

webapp/views/App/views/Data/MapView/GeoAttributeDataLayer/GeoAttributeDataLayer.js

@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { LayerGroup, LayersControl } from 'react-leaflet'
 import PropTypes from 'prop-types'
 
 import * as NodeDef from '@core/survey/nodeDef'
+import { useSystemConfigExperimentalFeatures } from '@webapp/store/system'
 import { ClusterMarker, useFlyToPoint } from '../common'
 import { CoordinateAttributeMarker } from './CoordinateAttributeMarker'
 import { useGeoAttributeDataLayer } from './useGeoAttributeDataLayer'
@@ -23,6 +24,7 @@ export const GeoAttributeDataLayer = (props) => {
     points,
   } = useGeoAttributeDataLayer(props)
 
+  const experimentalFeatures = useSystemConfigExperimentalFeatures()
   const { registerLayer, unregisterLayer, selectPoint, layerSortOrders } = useMapLayersPanel()
   const layerKey = NodeDef.getUuid(attributeDef)
   const sortOrder = layerSortOrders[layerKey] ?? 'none'
@@ -42,20 +44,13 @@ export const GeoAttributeDataLayer = (props) => {
   const onMarkerPopupOpen = useCallback((key) => selectPoint(key), [selectPoint])
   const onMarkerPopupClose = useCallback(() => selectPoint(null), [selectPoint])
 
-  // Stable wrapper so the panel always calls the latest flyToPoint without re-registering on popup state changes
-  const flyToPointRef = useRef(flyToPoint)
   useEffect(() => {
-    flyToPointRef.current = flyToPoint
-  }, [flyToPoint])
-  const stableFlyToPoint = useCallback((point) => flyToPointRef.current(point), [])
-
-  useEffect(() => {
-    if (points.length === 0) {
+    if (!experimentalFeatures || points.length === 0) {
       unregisterLayer({ key: layerKey })
       return
     }
-    registerLayer({ key: layerKey, layerName: layerInnerName, points, flyToPoint: stableFlyToPoint })
-  }, [layerKey, layerInnerName, points, registerLayer, stableFlyToPoint, unregisterLayer])
+    registerLayer({ key: layerKey, layerName: layerInnerName, points, flyToPoint })
+  }, [experimentalFeatures, flyToPoint, layerKey, layerInnerName, points, registerLayer, unregisterLayer])
 
   return (
     <LayersControl.Overlay name={layerName}>

webapp/views/App/views/Data/MapView/SamplingPointDataLayer/SamplingPointDataLayer.js

@@ -1,24 +1,36 @@
+import { useCallback, useEffect, useMemo } from 'react'
 import { LayersControl, LayerGroup } from 'react-leaflet'
 import PropTypes from 'prop-types'
 
+import { useSystemConfigExperimentalFeatures } from '@webapp/store/system'
 import { ClusterMarker, useFlyToPoint } from '../common'
+import { applySortOrder, useMapLayersPanel } from '../MapLayersPanel/MapLayersPanelContext'
 import { useSamplingPointDataLayer } from './useSamplingPointDataLayer'
 import { SamplingPointDataMarker } from './SamplingPointDataMarker'
 
 export const SamplingPointDataLayer = (props) => {
-  const { onRecordEditClick, createRecordFromSamplingPointDataItem } = props
+  const { levelIndex = 0, onRecordEditClick, createRecordFromSamplingPointDataItem } = props
 
   const {
     clusters,
     clusterExpansionZoomExtractor,
     clusterIconCreator,
     getClusterLeaves,
+    isLayerActive,
+    overlayInnerName,
     overlayName,
     currentMarkersColor,
     totalPoints,
     points,
   } = useSamplingPointDataLayer(props)
 
+  const experimentalFeatures = useSystemConfigExperimentalFeatures()
+  const { registerLayer, unregisterLayer, selectPoint, layerSortOrders } = useMapLayersPanel()
+
+  const layerKey = `sampling-point-data-${levelIndex}`
+  const sortOrder = layerSortOrders[layerKey] ?? 'none'
+  const sortedPoints = useMemo(() => applySortOrder(points, sortOrder), [points, sortOrder])
+
   const {
     currentPointShown,
     currentPointPopupOpen,
@@ -28,7 +40,27 @@ export const SamplingPointDataLayer = (props) => {
     onCurrentPointPopupClose,
     openPopupOfPoint,
     setMarkerByKey,
-  } = useFlyToPoint({ points, onRecordEditClick })
+  } = useFlyToPoint({ points: sortedPoints, onRecordEditClick })
+
+  const onMarkerPopupOpen = useCallback((key) => selectPoint(key), [selectPoint])
+  const onMarkerPopupClose = useCallback(() => selectPoint(null), [selectPoint])
+
+  useEffect(() => {
+    if (!experimentalFeatures || !isLayerActive || points.length === 0) {
+      unregisterLayer({ key: layerKey })
+      return
+    }
+    registerLayer({ key: layerKey, layerName: overlayInnerName, points, flyToPoint })
+  }, [
+    experimentalFeatures,
+    flyToPoint,
+    isLayerActive,
+    layerKey,
+    overlayInnerName,
+    points,
+    registerLayer,
+    unregisterLayer,
+  ])
 
   return (
     <LayersControl.Overlay name={overlayName}>
@@ -62,6 +94,8 @@ export const SamplingPointDataLayer = (props) => {
               flyToNextPoint={flyToNextPoint}
               flyToPreviousPoint={flyToPreviousPoint}
               markersColor={currentMarkersColor}
+              onPopupClose={onMarkerPopupClose}
+              onPopupOpen={onMarkerPopupOpen}
               onRecordEditClick={onRecordEditClick}
               pointFeature={cluster}
               setMarkerByKey={setMarkerByKey}
@@ -75,7 +109,11 @@ export const SamplingPointDataLayer = (props) => {
             flyToNextPoint={flyToNextPoint}
             flyToPreviousPoint={flyToPreviousPoint}
             markersColor={currentMarkersColor}
-            onPopupClose={onCurrentPointPopupClose}
+            onPopupClose={() => {
+              onCurrentPointPopupClose()
+              onMarkerPopupClose()
+            }}
+            onPopupOpen={onMarkerPopupOpen}
             onRecordEditClick={onRecordEditClick}
             pointFeature={currentPointShown}
             popupOpen={currentPointPopupOpen}

webapp/views/App/views/Data/MapView/SamplingPointDataLayer/SamplingPointDataMarker.js

@@ -15,6 +15,7 @@ export const SamplingPointDataMarker = (props) => {
     flyToPreviousPoint,
     markersColor,
     onPopupClose,
+    onPopupOpen,
     onRecordEditClick,
     pointFeature,
     popupOpen,
@@ -30,6 +31,10 @@ export const SamplingPointDataMarker = (props) => {
     flyToPoint(pointFeature)
   }, [flyToPoint, pointFeature])
 
+  const handlePopupOpen = useCallback(() => {
+    onPopupOpen?.(key)
+  }, [key, onPopupOpen])
+
   const pathOptions = useMemo(
     () => ({ color: markersColor, fillColor: markersColor, fillOpacity: 0.5 }),
     [markersColor]
@@ -44,7 +49,7 @@ export const SamplingPointDataMarker = (props) => {
         markerRef.current = ref
         setMarkerByKey({ key, marker: ref })
       }}
-      eventHandlers={{ dblclick: onDoubleClick, popupclose: onPopupClose }}
+      eventHandlers={{ dblclick: onDoubleClick, popupclose: onPopupClose, popupopen: handlePopupOpen }}
     >
       {showMarkersLabels && <MarkerTooltip color={markersColor}>{itemCodes.join(' - ')}</MarkerTooltip>}
 
@@ -66,6 +71,7 @@ SamplingPointDataMarker.propTypes = {
   flyToPreviousPoint: PropTypes.func.isRequired,
   markersColor: PropTypes.string,
   onPopupClose: PropTypes.func,
+  onPopupOpen: PropTypes.func,
   onRecordEditClick: PropTypes.func.isRequired,
   pointFeature: PropTypes.object.isRequired,
   popupOpen: PropTypes.bool,

webapp/views/App/views/Data/MapView/SamplingPointDataLayer/useSamplingPointDataLayer.js

@@ -38,6 +38,7 @@ const _convertItemsToPoints = (items) => {
         x: long,
         y: lat,
         properties: {
+          ancestorsKeys: itemCodes,
           cluster: false,
           itemUuid,
           itemCodes,
@@ -102,6 +103,7 @@ export const useSamplingPointDataLayer = (props) => {
   const map = useMap()
 
   const fetchCancelRef = useRef(null)
+  const [isLayerActive, setIsLayerActive] = useState(false)
   const [state, setState] = useState({ loaded: false, loading: false, points: [], items: [] })
   const { loaded, loading, points, items } = state
 
@@ -140,12 +142,16 @@ export const useSamplingPointDataLayer = (props) => {
   useMapLayerToggle({
     layerName: overlayName,
     onAdd: () => {
+      setIsLayerActive(true)
       const shouldLoadItems = !loaded && !loading
       if (shouldLoadItems) {
         fetchItemsAndConvertIntoPoints()
       }
       setState((statePrev) => ({ ...statePrev, loading: shouldLoadItems }))
     },
+    onRemove: () => {
+      setIsLayerActive(false)
+    },
   })
 
   // cancel items fetch (if any) on unmount
@@ -163,6 +169,8 @@ export const useSamplingPointDataLayer = (props) => {
     clusterExpansionZoomExtractor,
     clusterIconCreator,
     getClusterLeaves,
+    isLayerActive,
+    overlayInnerName,
     overlayName,
     currentMarkersColor,
     totalPoints: points.length,

webapp/views/App/views/Data/MapView/common/useFlyToPoint.js

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useMap } from 'react-leaflet'
 
 import { Numbers } from '@openforis/arena-core'
@@ -87,10 +87,17 @@ export const useFlyToPoint = ({ points, onRecordEditClick = null, zoomToMaxLevel
     []
   )
 
+  // Stable wrapper so the panel always calls the latest flyToPoint without re-registering on popup state changes
+  const flyToPointRef = useRef(flyToPoint)
+  useEffect(() => {
+    flyToPointRef.current = flyToPoint
+  }, [flyToPoint])
+  const stableFlyToPoint = useCallback((point) => flyToPointRef.current(point), [])
+
   return {
     currentPointShown,
     currentPointPopupOpen,
-    flyToPoint,
+    flyToPoint: stableFlyToPoint,
     flyToNextPoint,
     flyToPreviousPoint,
     onCurrentPointPopupClose,