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

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.77",
   "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.6",
     "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/MobilityMap/MobilityMap.tsx

@@ -87,6 +87,7 @@ function MobilityMap(props: MobilityMapProps) {
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
   const [linesIds, setLinesIds] = useState<string[]>();
+  const [notificationId, setNotificationId] = useState<string>();
 
   const [featuresInfos, setFeaturesInfos] = useState<
     LayerGetFeatureInfoResponse[]
@@ -141,6 +142,7 @@ function MobilityMap(props: MobilityMapProps) {
       linesNetworkPlanLayer,
       map,
       mapsetLayer,
+      notificationId,
       notificationsLayer,
       permalinkUrlSearchParams,
       previewNotifications,
@@ -175,6 +177,7 @@ function MobilityMap(props: MobilityMapProps) {
       setLinesNetworkPlanLayer,
       setMap,
       setMapsetLayer,
+      setNotificationId,
       setNotificationsLayer,
       setPermalinkUrlSearchParams,
       setPreviewNotifications,
@@ -222,6 +225,7 @@ function MobilityMap(props: MobilityMapProps) {
     linesNetworkPlanLayer,
     map,
     mapsetLayer,
+    notificationId,
     notificationsLayer,
     permalinkUrlSearchParams,
     previewNotifications,

package/src/NotificationDetails/NotificationDetails.tsx

@@ -1,7 +1,6 @@
 import {
   type AffectedTimeIntervalType,
   type PublicationType,
-  type SituationType,
   type TextualContentType,
 } from "mobility-toolbox-js/types";
 import { twMerge } from "tailwind-merge";
@@ -10,6 +9,7 @@ import Warning from "../icons/Warning";
 import ShadowOverflow from "../ShadowOverflow";
 import Link from "../ui/Link";
 import useI18n from "../utils/hooks/useI18n";
+import useMocoSituation from "../utils/hooks/useMocoSituation";
 
 import type {
   MultilingualTextualContentType,
@@ -64,30 +64,8 @@ function NotificationDetails({
   feature: Feature;
 }) {
   const { locale, t } = useI18n();
-  const { situation } = feature.getProperties();
-
-  // useEffect(() => {
-  //   const abortController = new AbortController();
-  //   if (!notificationtenant) {
-  //     setLines([]);
-  //   }
-  //   fetch(
-  //     `https://tralis-tracker-api.geops.io/api/lines/${notificationtenant}/`,
-  //   )
-  //     .then((res) => {
-  //       return res.json();
-  //     })
-  //     .then((data) => {
-  //       setLines(data);
-  //     })
-  //     .catch((err) => {
-  //       // eslint-disable-next-line no-console
-  //       console.error("Failed to fetch lines", err);
-  //     });
-  //   return () => {
-  //     abortController?.abort();
-  //   };
-  // }, [notificationtenant]);
+  const { situationId } = feature.getProperties();
+  const situationParsed = useMocoSituation(situationId);
 
   // moco export v2
   let textualContentMultilingual: Partial<MultilingualTextualContentType> = {};
@@ -96,41 +74,36 @@ function NotificationDetails({
   let publicationsToDisplay: PublicationType[] = [];
   let reasonsToDisplay: string[] = [];
 
-  try {
-    const situationParsed: SituationType = JSON.parse(situation) || {};
-    const publicationsArr: PublicationType[] =
-      situationParsed?.publications || [];
+  // const situationParsed: SituationType = JSON.parse(situation) || {};
+  const publicationsArr: PublicationType[] =
+    situationParsed?.publications || [];
 
-    // Find the current publication(s) at the current date
-    publicationsToDisplay =
-      publicationsArr?.filter(({ publicationWindows }) => {
-        return publicationWindows.find(({ endTime, startTime }) => {
-          const now = new Date();
-          const startT = new Date(startTime);
-          const endT = new Date(endTime);
-          return startT <= now && now <= endT;
-        });
-      }) || [];
+  // Find the current publication(s) at the current date
+  publicationsToDisplay =
+    publicationsArr?.filter(({ publicationWindows }) => {
+      return publicationWindows.find(({ endTime, startTime }) => {
+        const now = new Date();
+        const startT = new Date(startTime);
+        const endT = new Date(endTime);
+        return startT <= now && now <= endT;
+      });
+    }) || [];
 
-    // Display the current and next affected time intervals not the one in the past
-    timeIntervalsToDisplay =
-      (situationParsed?.affectedTimeIntervals || []).filter(
-        ({ endTime, startTime }) => {
-          const now = new Date();
-          const startT = new Date(startTime);
-          const endT = new Date(endTime);
-          return (startT <= now && now <= endT) || now < startT;
-        },
-      ) || [];
+  // Display the current and next affected time intervals not the one in the past
+  timeIntervalsToDisplay =
+    (situationParsed?.affectedTimeIntervals || []).filter(
+      ({ endTime, startTime }) => {
+        const now = new Date();
+        const startT = new Date(startTime);
+        const endT = new Date(endTime);
+        return (startT <= now && now <= endT) || now < startT;
+      },
+    ) || [];
 
-    // Display the reasons
-    reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => {
-      return name;
-    });
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error("Failed to parse publications", e);
-  }
+  // Display the reasons
+  reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => {
+    return name;
+  });
 
   return (
     <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>

package/src/NotificationsLayer/MocoLayer2.ts

@@ -0,0 +1,91 @@
+import {
+  getFeatureCollectionToRenderFromSituation,
+  MocoLayer,
+} from "mobility-toolbox-js/ol";
+import { unByKey } from "ol/Observable";
+
+import type { GeoJSONSource } from "maplibre-gl";
+import type { MocoNotificationFeatureCollectionToRender } from "mobility-toolbox-js/ol";
+import type { Map } from "ol";
+
+export const MOCO_SOURCE_ID = "moco";
+export const MOCO_MD_LAYER_FILTER = "moco";
+class MocoLayer2 extends MocoLayer {
+  constructor(options) {
+    super(options);
+  }
+
+  attachToMap(map: Map): void {
+    super.attachToMap(map);
+    unByKey(this.olEventsKeys);
+  }
+
+  getDataByGraph(
+    data: MocoNotificationFeatureCollectionToRender,
+  ): MocoNotificationFeatureCollectionToRender {
+    // const zoom = this.getMapInternal()?.getView()?.getZoom();
+    // const graphs = (
+    //   this.maplibreLayer?.mapLibreMap?.getStyle() as MapsStyleSpecification
+    // ).metadata?.graphs;
+
+    // const graph = getGraphByZoom(zoom, graphs);
+    const newData: MocoNotificationFeatureCollectionToRender = {
+      features: (data?.features || []).filter((feature) => {
+        delete feature.properties?.publicationStops;
+        delete feature.properties?.publicationLines;
+        delete feature.properties?.publication;
+        delete feature.properties?.situation;
+        return (
+          feature.properties?.graph === "osm" ||
+          // feature.properties?.graph === "np_topo4" ||
+          // feature.properties?.graph === "np_topo5" ||
+          // feature.properties?.graph === "np_topo6" //||
+          feature.properties?.graph === "np_topo7" ||
+          feature.properties?.graph === "np_topo8" ||
+          feature.properties?.graph === "np_topo9" ||
+          feature.properties?.graph === "np_topo10" ||
+          feature.properties?.graph === "np_topo11" ||
+          feature.properties?.graph === "np_topo12" ||
+          feature.properties?.graph === "np_topo13" ||
+          feature.properties?.graph === "np_topo14" ||
+          feature.properties?.graph === "np_topo15"
+        );
+      }),
+      type: "FeatureCollection",
+    };
+    return newData;
+  }
+  /**
+   * This function updates the GeoJSON source data, with the current situations available in this.situations.
+   * @returns
+   */
+  async updateData(): Promise<boolean | undefined> {
+    if (this.loadAll) {
+      const situations = await this.loadData();
+      // We don't use the setter here to avoid infinite loop
+      this.set("situations", situations ?? []);
+    }
+    const source = this.maplibreLayer?.mapLibreMap?.getSource(MOCO_SOURCE_ID);
+    if (!source) {
+      // eslint-disable-next-line no-console
+      console.warn("MocoLayer: No source found for id : ", MOCO_SOURCE_ID);
+      return Promise.reject(new Error("No source found"));
+    }
+
+    const data = {
+      features: (this.situations ?? []).flatMap((situation) => {
+        return getFeatureCollectionToRenderFromSituation(situation).features;
+      }),
+      type: "FeatureCollection",
+    } as MocoNotificationFeatureCollectionToRender;
+    // this.#dataInternal = data;
+
+    // Apply new data to the source
+    console.log(this.getDataByGraph(data));
+    // console.log(JSON.stringify(this.getDataByGraph(data)));
+    (source as GeoJSONSource).setData(this.getDataByGraph(data));
+    return Promise.resolve(true);
+  }
+}
+
+export default MocoLayer2;

package/src/NotificationsLayer/NotificationsLayer.tsx

@@ -1,12 +1,10 @@
-import { MocoLayer } from "mobility-toolbox-js/ol";
+import { MocoLayer, type MocoLayerOptions } from "mobility-toolbox-js/ol";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
 import { LAYER_NAME_NOTIFICATIONS } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { MocoLayerOptions } from "mobility-toolbox-js/ol";
-
 function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
   const {
     apikey,
@@ -28,9 +26,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/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,8 +1,8 @@
-import { type SituationType } from "mobility-toolbox-js/types";
 import { twMerge } from "tailwind-merge";
 
 import ShadowOverflow from "../../ShadowOverflow";
 import SituationDetails from "../../SituationDetails";
+import useMocoSituation from "../../utils/hooks/useMocoSituation";
 
 import type { Feature } from "ol";
 
@@ -20,17 +20,8 @@ function NotificationDetails({
   timeIntervalClassName?: string;
   toggleable?: boolean;
 }) {
-  const { situation } = feature.getProperties();
-
-  // moco export v2
-  let situationParsed: Partial<SituationType> = {};
-
-  try {
-    situationParsed = JSON.parse(situation) || {};
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error("Failed to parse publications", e);
-  }
+  const { situationId } = feature.getProperties();
+  const situationParsed = useMocoSituation(situationId);
 
   return (
     <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>

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/hooks/useMocoSituation.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+import type { MocoAPI } from "mobility-toolbox-js/maplibre";
+import type {
+  MocoExportParameters,
+  SituationType,
+} from "mobility-toolbox-js/types";
+
+function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
+  const { lang, notificationsLayer } = useMapContext();
+  const [situation, setSituation] = useState<SituationType>();
+
+  const api: MocoAPI | undefined = useMemo(() => {
+    return notificationsLayer?.api;
+  }, [notificationsLayer]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    api
+      ?.exportById(situationId, {
+        contentLarge: true,
+        contentMedium: true,
+        contentSmall: true,
+        includeGeoms: false,
+        includeLines: true,
+        includeStops: true,
+        [lang]: true,
+        limit: 1,
+        ...(params || {}),
+      })
+      .then((response) => {
+        setSituation(response);
+      })
+      .catch((err) => {
+        // 20: AbortError
+        if (err.code !== 20) {
+          setSituation(undefined);
+          // eslint-disable-next-line no-console
+          console.error("Failed to fetch situation", err);
+          return;
+        }
+      });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [api, situationId, params, lang]);
+
+  return situation;
+}
+
+export default useMocoSituation;