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

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 {

package/src/utils/constants.ts

@@ -18,9 +18,10 @@ export const LAYER_NAME_LINESNETWORKPLAN = "liniennetz";
 export const LAYER_NAME_MAPSET = "mapset";
 
 export const RVF_EXTENT_4326 = [7.5, 47.7, 8.45, 48.4];
+export const MAX_EXTENT_4326 = RVF_EXTENT_4326;
 
 export const MAX_EXTENT = transformExtent(
-  RVF_EXTENT_4326,
+  MAX_EXTENT_4326,
   "EPSG:4326",
   "EPSG:3857",
 );

package/src/utils/hooks/useLayersConfig.tsx

@@ -5,6 +5,9 @@ import { LAYERS_NAMES } from "../constants";
 import useMapContext from "./useMapContext";
 
 export interface LayerConfig {
+  featurelink?: {
+    href?: string;
+  };
   link?: {
     href?: string;
     show?: boolean;

package/src/utils/hooks/{useLnpLineInfo.tsx → useLnp.tsx}

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { LNP_MD_LINES, LNP_MD_STOPS, LNP_SOURCE_ID } from "../constants";
 
@@ -36,15 +36,30 @@ let cacheLnpSourceInfo: {
 
 export function useLnpSourceInfos() {
   const { baseLayer } = useMapContext();
+  const [sourceUrl, setSourceUrl] = useState<string>(null);
 
-  const sourceUrl = useMemo(() => {
-    return baseLayer?.mapLibreMap?.getSource<VectorTileSource>(LNP_SOURCE_ID)
-      ?.url;
-  }, [baseLayer]);
+  useEffect(() => {
+    const url =
+      baseLayer?.mapLibreMap?.getSource<VectorTileSource>(LNP_SOURCE_ID)?.url;
+    const onSourceData = (e) => {
+      if (e.sourceId === LNP_SOURCE_ID && e.isSourceLoaded) {
+        setSourceUrl(e.source?.url);
+        baseLayer?.mapLibreMap?.off("sourcedata", onSourceData);
+      }
+    };
+    if (!url) {
+      baseLayer?.mapLibreMap?.on("sourcedata", onSourceData);
+    } else {
+      setSourceUrl(url);
+    }
+    return () => {
+      baseLayer?.mapLibreMap?.off("sourcedata", onSourceData);
+    };
+  }, [baseLayer?.mapLibreMap]);
 
   useEffect(() => {
     const abortController = new AbortController();
-    const fetchInfos = async (url) => {
+    const fetchInfos = async (url: string) => {
       if (!cacheLnpSourceInfo) {
         const response = await fetch(url, { signal: abortController.signal });
         const data = await response.json();
@@ -73,13 +88,13 @@ export function useLnpStopsInfos(): StopsInfos {
 }
 
 /**
- * This hook search lines informations from lnp data. It takes a string in
+ * This hook search line informations from lnp data. It takes a string in
  * parameter then it will search if there is a property that exactly match this value.
  */
 function useLnpLineInfo(text: string): LineInfo {
   const linesInfos = useLnpLinesInfos();
 
-  if (!linesInfos) {
+  if (!linesInfos || !text) {
     return null;
   }
 
@@ -89,7 +104,7 @@ function useLnpLineInfo(text: string): LineInfo {
 
   return Object.values(linesInfos).find((info) => {
     return ["id", "external_id", "short_name", "long_name"].find((key) => {
-      return info[key] === text;
+      return !!info[key] && info[key] === text;
     });
   });
 }

package/src/utils/hooks/useMapContext.tsx

@@ -50,6 +50,7 @@ export type MapContextType = {
   linesNetworkPlanLayer: MaplibreStyleLayer;
   map: Map;
   mapsetLayer?: MapsetLayer;
+  notificationId?: string;
   notificationsLayer?: MocoLayer;
   permalinkUrlSearchParams: URLSearchParams;
   previewNotifications?: SituationType[];
@@ -86,6 +87,7 @@ export type MapContextType = {
   setLinesNetworkPlanLayer: (layer?: MaplibreStyleLayer) => void;
   setMap: (map?: Map) => void;
   setMapsetLayer: (mapsetLayer?: MapsetLayer) => void;
+  setNotificationId: (notificationId?: string) => void;
   setNotificationsLayer: (notificationsLayer?: MocoLayer) => void;
   setPermalinkUrlSearchParams: (
     setPermalinkUrlSearchParams: URLSearchParams,
@@ -132,9 +134,11 @@ export const MapContext = createContext<MapContextType>({
   setBaseLayer: (baseLayer?: MaplibreLayer) => {},
   setIsFollowing: (isFollowing: boolean) => {},
   setIsTracking: (isTracking: boolean) => {},
+  setLinesIds: (linesIds: string[]) => {},
   setLinesNetworkPlanLayer: (linesNetworkPlanLayer: MaplibreStyleLayer) => {},
   setMap: (map?: Map) => {},
   setMapsetLayer: (mapsetLayer?: MapsetLayer) => {},
+  setNotificationId: (notificationId?: string) => {},
   setNotificationsLayer: (notificationsLayer?: MocoLayer) => {},
   setPermalinkUrlSearchParams: (
     permalinkUrlSearchParams: URLSearchParams,

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -1,238 +0,0 @@
-import { getFeatureInfoAtCoordinate } from "mobility-toolbox-js/ol";
-import { GeoJSON } from "ol/format";
-import { unByKey } from "ol/Observable";
-import { useCallback, useEffect } from "preact/hooks";
-
-import {
-  LAYER_NAME_REALTIME,
-  LAYER_NAME_STATIONS,
-  PROVIDER_LOGOS_BY_FEED_ID,
-} from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRvfContext from "../utils/hooks/useRvfContext";
-import MobilityEvent from "../utils/MobilityEvent";
-import { fetchSharingStation } from "../utils/sharingGraphqlUtils";
-
-import type { GeoJSONSource } from "maplibre-gl";
-import type { Feature, MapBrowserEvent } from "ol";
-
-const geojson = new GeoJSON();
-
-function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
-  const {
-    baseLayer,
-    map,
-    queryablelayers,
-    realtimeLayer,
-    setStationId,
-    setTrainId,
-    stationId,
-    stationsLayer,
-    tenant,
-    trainId,
-  } = useMapContext();
-  const { selectedFeature, setSelectedFeature, setSelectedFeatures } =
-    useRvfContext();
-
-  // Send the selctedFEature to the parent window
-  useEffect(() => {
-    eventNode?.dispatchEvent(
-      new MobilityEvent("mwc:selectedfeature", {
-        feature: selectedFeature
-          ? geojson.writeFeatureObject(selectedFeature)
-          : null,
-      }),
-    );
-  }, [eventNode, selectedFeature]);
-
-  const onPointerMove = useCallback(
-    (evt: MapBrowserEvent<PointerEvent>) => {
-      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
-        hitTolerance: 5,
-        layerFilter: (l) => {
-          return l === realtimeLayer;
-        },
-      });
-      realtimeLayer?.highlight(realtimeFeature as Feature);
-
-      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l === stationsLayer;
-        },
-      });
-
-      const [stationFeature] = stationsFeatures.filter((feat) => {
-        return feat.get("tralis_network")?.includes(tenant);
-      });
-
-      // Send all the features under the cursor
-      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return queryablelayers
-            ? queryablelayers.split(",").includes(l.get("name"))
-            : l.get("isQueryable");
-        },
-      }) as Feature[];
-
-      evt.map.getTargetElement().style.cursor =
-        realtimeFeature || stationFeature || features?.length
-          ? "pointer"
-          : "default";
-    },
-    [queryablelayers, realtimeLayer, stationsLayer, tenant],
-  );
-
-  const onSingleClick = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
-      if (!baseLayer?.mapLibreMap) {
-        return;
-      }
-      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
-        hitTolerance: 5,
-        layerFilter: (l) => {
-          return l === realtimeLayer;
-        },
-      }) as Feature[];
-      realtimeFeature?.set("layerName", LAYER_NAME_REALTIME);
-
-      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l === stationsLayer;
-        },
-      });
-      const [stationFeature] = stationsFeatures.filter((feat) => {
-        return feat.get("tralis_network")?.includes(tenant);
-      }) as Feature[];
-      stationFeature?.set("layerName", LAYER_NAME_STATIONS);
-
-      const newStationId = stationFeature?.get("uid");
-
-      const newTrainId = realtimeFeature?.get("train_id");
-
-      if (newStationId && stationId !== newStationId) {
-        setStationId(newStationId);
-        setTrainId(null);
-      } else if (newTrainId && newTrainId !== trainId) {
-        setTrainId(realtimeFeature.get("train_id"));
-        setStationId(null);
-      } else {
-        setTrainId(null);
-        setStationId(null);
-      }
-
-      // Send all the features under the cursor
-      // const features = evt.map.getFeaturesAtPixel(evt.pixel, {
-      //   hitTolerance: 5,
-      //   layerFilter: (l) => {
-      //     console.log(queryablelayers);
-      //     return queryablelayers
-      //       ? queryablelayers.split(",").includes(l.get("name"))
-      //       : l.get("isQueryable");
-      //   },
-      // }) as Feature[];
-
-      const queryableLayers = evt.map.getAllLayers().filter((l) => {
-        return queryablelayers
-          ? queryablelayers.split(",").includes(l.get("name"))
-          : l.get("isQueryable");
-      });
-      const featuresInfos = await getFeatureInfoAtCoordinate(
-        evt.coordinate,
-        queryableLayers,
-        5,
-        true,
-      );
-
-      // Set the layerName as property of the feature
-      featuresInfos.forEach((f) => {
-        f.features.forEach((feat) => {
-          feat.set("layerName", f.layer.get("name"));
-        });
-      });
-
-      const features = featuresInfos.flatMap((f) => {
-        return f.features;
-      });
-
-      // Append more infos about the features
-      for (const feature of features) {
-        const clusterId = feature.get("cluster_id");
-        if (clusterId) {
-          const vtFeat = feature.get("vectorTileFeature");
-          const sourceId = vtFeat.layer.source;
-          const leaves =
-            (await baseLayer.mapLibreMap
-              .getSource<GeoJSONSource>(sourceId)
-              ?.getClusterLeaves(clusterId, 1000, 0)) || [];
-
-          feature.set(
-            "clusterLeaves",
-            leaves.map((l) => {
-              return geojson.readFeature(l);
-            }),
-          );
-        }
-
-        // Sharing station
-        const sharingStationId = selectedFeature?.get("station_id");
-        if (sharingStationId) {
-          const sharingStationInfo =
-            await fetchSharingStation(sharingStationId);
-          selectedFeature.setProperties(sharingStationInfo);
-          selectedFeature.set(
-            "provider_logo",
-            PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
-          );
-        }
-      }
-
-      if (newStationId || newTrainId || !features.length) {
-        setSelectedFeature(null);
-        setSelectedFeatures([]);
-      } else {
-        setSelectedFeatures(features);
-
-        // We prioritize some layers like the notification one over the others
-        const notificationFeature = features.find((feat) => {
-          return feat.get("situation");
-        });
-        if (notificationFeature) {
-          setSelectedFeature(notificationFeature);
-        } else {
-          setSelectedFeature(features[0]);
-        }
-      }
-    },
-    [
-      baseLayer?.mapLibreMap,
-      stationId,
-      trainId,
-      realtimeLayer,
-      stationsLayer,
-      tenant,
-      setStationId,
-      setTrainId,
-      queryablelayers,
-      selectedFeature,
-      setSelectedFeature,
-      setSelectedFeatures,
-    ],
-  );
-
-  useEffect(() => {
-    const key = map?.on("singleclick", onSingleClick);
-    return () => {
-      unByKey(key);
-    };
-  }, [map, onSingleClick]);
-
-  useEffect(() => {
-    const key = map?.on("pointermove", onPointerMove);
-    return () => {
-      unByKey(key);
-    };
-  }, [map, onPointerMove]);
-
-  return null;
-}
-export default SingleClickListener;

package/src/RvfSingleClickListener/index.tsx

@@ -1 +0,0 @@
-export { default } from "./RvfSingleClickListener";