@geops/rvf-mobility-web-component 0.1.75 → 0.1.76

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.75",
+  "version": "0.1.76",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
     "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^5.9.0",
-    "mobility-toolbox-js": "3.4.5",
+    "mobility-toolbox-js": "3.4.6-beta.1",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

package/src/LinesNetworkPlanLayerHighlight/LinesNetworkPlanLayerHighlight.tsx

@@ -15,7 +15,6 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
   const {
     baseLayer,
     featuresInfos,
-    lines,
     linesIds,
     linesNetworkPlanLayer,
     map,
@@ -58,6 +57,11 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
         return featuresInfo.layer === linesNetworkPlanLayer;
       })?.features || [];
 
+    if (!features.length) {
+      setLinesIds(null);
+      return;
+    }
+
     const ids = [
       ...new Set(
         (features || []).map((f) => {
@@ -65,6 +69,10 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
         }),
       ),
     ];
+    if (!ids.length) {
+      setLinesIds(null);
+      return;
+    }
     setLinesIds(ids?.length ? ids : null);
   }, [featuresInfos, layer, linesNetworkPlanLayer, setLinesIds]);
 
@@ -81,7 +89,7 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
       // Reset the filter
       highlightLinesNetworkPlan(undefined, baseLayer);
     };
-  }, [baseLayer, baseLayer?.loaded, layer, lines, linesIds]);
+  }, [baseLayer, baseLayer?.loaded, layer, linesIds]);
 
   return null;
 }

package/src/NotificationsLayer/NotificationsLayer.tsx

@@ -28,9 +28,9 @@ function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
       apiParameters: {
         contentMedium: true,
       },
-      date: notificationat ? new Date(notificationat) : undefined,
       maplibreLayer: baseLayer,
       name: LAYER_NAME_NOTIFICATIONS,
+      publicAt: notificationat ? new Date(notificationat) : undefined,
       situations: previewNotifications,
       tenant: notificationtenant,
       url: notificationurl,

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -95,90 +95,6 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     return baseLayer?.mapLibreMap;
   }, [baseLayer?.mapLibreMap]);
 
-  const updateData = useCallback(() => {
-    const abortController = new AbortController();
-    const extent = transformExtent(
-      map.getView().calculateExtent(),
-      "EPSG:3857",
-      "EPSG:4326",
-    );
-
-    const fetchData = async () => {
-      // Fill stations data
-      // The stations are also loaded in the style to have them displayed during export
-      const stations = await fetchStations(
-        WFS_STATIONS_TYPE,
-        abortController,
-        extent,
-      );
-      setStationsData(stations);
-
-      // Fill free float data
-      const freeFloatData = (await fetchSharingWFS(
-        WFS_FREE_FLOAT_TYPE,
-        abortController,
-        extent,
-      )) as FeatureCollection<Point, SharingVehicleWFS>;
-
-      const bikes: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const cargoBikes: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const cars: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-      const scooter: FeatureCollection<Point, SharingVehicleWFS> = {
-        features: [],
-        type: "FeatureCollection",
-      };
-
-      freeFloatData.features.forEach((feature) => {
-        if (feature.properties.form_factor === BIKE_FORM_FACTOR) {
-          bikes.features.push(feature);
-        } else if (feature.properties.form_factor === CARGOBIKE_FORM_FACTOR) {
-          cargoBikes.features.push(feature);
-        } else if (feature.properties.form_factor === CAR_FORM_FACTOR) {
-          cars.features.push(feature);
-        } else if (feature.properties.form_factor === SCOOTER_FORM_FACTOR) {
-          scooter.features.push(feature);
-        }
-      });
-
-      setBikeFreeFloatData(bikes);
-      setCargoBikeFreeFloatData(cargoBikes);
-      setCarFreeFloatData(cars);
-      setScooterFreeFloatData(scooter);
-    };
-
-    void fetchData();
-
-    return () => {
-      abortController.abort();
-    };
-  }, [map]);
-
-  // Request all stations and vehicleson each moveend event
-  useEffect(() => {
-    const key = map?.on("moveend", updateData);
-
-    // @ts-expect-error - change property can have custom values
-    const key2 = map?.on(`change:${LAYER_PROP_IS_EXPORTING}`, (evt) => {
-      // Reupdate the data after finishing eporting the map
-      if (!evt.target.get(LAYER_PROP_IS_EXPORTING)) {
-        updateData();
-      }
-    });
-    const key3 = map?.once("rendercomplete", updateData);
-    return () => {
-      unByKey([key, key2, key3]);
-    };
-  }, [map, updateData, mbMap]);
-
   useEffect(() => {
     if (!mbMap?.style || !stationsData) {
       return;
@@ -402,6 +318,101 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
     } as GroupOptions);
   }, [baseLayer, props, t]);
 
+  const updateData = useCallback(() => {
+    // Only update when layers are visible
+    if (map?.getView()?.getZoom() < 15.5 || !group.getVisible()) {
+      return;
+    }
+    const abortController = new AbortController();
+    const extent = transformExtent(
+      map.getView().calculateExtent(),
+      "EPSG:3857",
+      "EPSG:4326",
+    );
+
+    const fetchData = async () => {
+      // Fill stations data
+      // The stations are also loaded in the style to have them displayed during export
+      const stations = await fetchStations(
+        WFS_STATIONS_TYPE,
+        abortController,
+        extent,
+      );
+      setStationsData(stations);
+
+      // Fill free float data
+      const freeFloatData = (await fetchSharingWFS(
+        WFS_FREE_FLOAT_TYPE,
+        abortController,
+        extent,
+      )) as FeatureCollection<Point, SharingVehicleWFS>;
+
+      const bikes: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const cargoBikes: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const cars: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+      const scooter: FeatureCollection<Point, SharingVehicleWFS> = {
+        features: [],
+        type: "FeatureCollection",
+      };
+
+      freeFloatData.features.forEach((feature) => {
+        if (feature.properties.form_factor === BIKE_FORM_FACTOR) {
+          bikes.features.push(feature);
+        } else if (feature.properties.form_factor === CARGOBIKE_FORM_FACTOR) {
+          cargoBikes.features.push(feature);
+        } else if (feature.properties.form_factor === CAR_FORM_FACTOR) {
+          cars.features.push(feature);
+        } else if (feature.properties.form_factor === SCOOTER_FORM_FACTOR) {
+          scooter.features.push(feature);
+        }
+      });
+
+      setBikeFreeFloatData(bikes);
+      setCargoBikeFreeFloatData(cargoBikes);
+      setCarFreeFloatData(cars);
+      setScooterFreeFloatData(scooter);
+    };
+
+    void fetchData();
+
+    return () => {
+      abortController.abort();
+    };
+  }, [map, group]);
+
+  // Request all stations and vehicleson each moveend event
+  useEffect(() => {
+    const key = map?.on("moveend", () => {
+      return updateData();
+    });
+
+    // @ts-expect-error - change property can have custom values
+    const key2 = map?.on(`change:${LAYER_PROP_IS_EXPORTING}`, (evt) => {
+      // Reupdate the data after finishing eporting the map
+      if (!evt.target.get(LAYER_PROP_IS_EXPORTING)) {
+        updateData();
+      }
+    });
+    const key3 = map?.once("rendercomplete", updateData);
+    const key4 = group?.on("change:visible", (evt) => {
+      if (evt.target.getVisible()) {
+        updateData();
+      }
+    });
+    return () => {
+      unByKey([key, key2, key3, key4]);
+    };
+  }, [map, updateData, mbMap, group]);
+
   // Reload features every minute
   useEffect(() => {
     const interval = window.setInterval(() => {

package/src/SingleClickListener/SingleClickListener.tsx

@@ -17,7 +17,7 @@ export interface SingleClickListenerProps {
 
 function SingleClickListener({
   debounceOptions,
-  debounceTimeout = 0,
+  debounceTimeout = 150,
   hover = true,
 }: SingleClickListenerProps) {
   const {