@geops/rvf-mobility-web-component 0.1.31 → 0.1.33

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.31",
+  "version": "0.1.33",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/Map/Map.tsx

@@ -18,6 +18,9 @@ function Map({ children, ...props }: RealtimeMapProps) {
 
   const view = useMemo(() => {
     if (!maxextent) {
+      if (maxextent === "") {
+        return new View();
+      }
       return;
     }
     const bbox = maxextent.split(",").map((c) => {
@@ -74,6 +77,7 @@ function Map({ children, ...props }: RealtimeMapProps) {
     const bbox = extent.split(",").map((c) => {
       return parseFloat(c);
     });
+
     if (bbox) {
       map.getView().fit(bbox);
     }

package/src/NotificationLayer/NotificationLayer.tsx

@@ -1,3 +1,4 @@
+import { FeatureCollection } from "geojson";
 import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 import { useEffect, useMemo, useState } from "preact/hooks";
@@ -6,6 +7,7 @@ import useMapContext from "../utils/hooks/useMapContext";
 import useZoom from "../utils/hooks/useZoom";
 import {
   addNotificationsLayers,
+  getCurrentGraph,
   getNotificationsWithStatus,
   parsePreviewNotification,
 } from "./notificationUtils";
@@ -16,28 +18,18 @@ interface Metadata {
   graphs?: Graphs;
 }
 
-const useNotifications = () => {
-  const {
-    baselayer,
-    baseLayer,
-    notificationat,
-    notificationbeforelayerid,
-    notificationurl,
-  } = useMapContext();
-  const zoom = useZoom();
-  const [notifications, setNotifications] = useState([]);
-  const [previewNotification, setPreviewNotification] = useState(null);
-  const [shouldAddPreviewNotifications, setShouldAddPreviewNotifications] =
-    useState<boolean>(true);
+const useStyleName = (): string => {
+  const { baselayer } = useMapContext();
+  return baselayer;
+};
 
-  const [style, setStyle] = useState<string>();
+const useStyleMetadata = (): Metadata => {
+  const { baseLayer } = useMapContext();
   const [styleMetadata, setStyleMetadata] = useState<Metadata>();
-
   useEffect(() => {
     if (!baseLayer) {
       return;
     }
-    setStyle(baselayer);
     if (!baseLayer.loaded) {
       // @ts-expect-error bad type definition
       baseLayer.once("load", () => {
@@ -46,24 +38,36 @@ const useNotifications = () => {
     } else {
       setStyleMetadata(baseLayer.mapLibreMap?.getStyle()?.metadata);
     }
-  }, [baseLayer, baselayer]);
+  }, [baseLayer]);
+  return styleMetadata;
+};
+
+const useGraphMapping = (
+  defaultMapping: Record<number, string> = { 1: "osm" },
+): Record<number, string> => {
+  const styleMetadata = useStyleMetadata();
+  const graphMapping = useMemo(() => {
+    return styleMetadata?.graphs || defaultMapping;
+  }, [defaultMapping, styleMetadata?.graphs]);
+  return graphMapping;
+};
+
+const useNotifications = (): FeatureCollection => {
+  const { notificationat, notificationurl } = useMapContext();
+  const [notifications, setNotifications] = useState([]);
+  const [previewNotification, setPreviewNotification] = useState(null);
+  const [shouldAddPreviewNotifications, setShouldAddPreviewNotifications] =
+    useState<boolean>(true);
+
+  const styleName = useStyleName();
+  const graphMapping = useGraphMapping();
 
   const now = useMemo(() => {
     return notificationat ? new Date(notificationat) : new Date();
   }, [notificationat]);
 
-  const graphMapping = useMemo(() => {
-    return styleMetadata?.graphs || { 1: "osm" };
-  }, [styleMetadata]);
-
   const graphsString = useMemo(() => {
-    return [
-      ...new Set(
-        Object.keys(graphMapping || []).map((key) => {
-          return graphMapping[key];
-        }),
-      ),
-    ].join(",");
+    return [...new Set(Object.values(graphMapping))].join(",");
   }, [graphMapping]);
 
   useEffect(() => {
@@ -105,12 +109,12 @@ const useNotifications = () => {
   useEffect(() => {
     // Merge notifications with the previewNotification
     const newNotifications = [...notifications];
-    if (shouldAddPreviewNotifications && previewNotification?.[style]) {
-      const parsedPreviewNotification = parsePreviewNotification(
-        previewNotification?.[style],
-      );
+    const notifByStyle = previewNotification?.[styleName];
+
+    if (shouldAddPreviewNotifications && notifByStyle) {
+      const parsedPreviewNotification = parsePreviewNotification(notifByStyle);
       const index = newNotifications.findIndex((n) => {
-        return n.properties.id === previewNotification[style].id;
+        return n.properties.id === notifByStyle.id;
       });
 
       if (index > -1) {
@@ -126,42 +130,47 @@ const useNotifications = () => {
     previewNotification,
     notifications,
     shouldAddPreviewNotifications,
-    style,
+    styleName,
     now,
   ]);
 
-  useEffect(() => {
-    // Add the notifications to the map
-    if (styleMetadata && notifications?.length) {
-      addNotificationsLayers(
-        baseLayer,
-        notifications,
-        notificationbeforelayerid,
-        zoom,
-        graphMapping,
-      );
+  if (previewNotification?.id) {
+    const index = notifications.findIndex((n) => {
+      return n.properties.id === previewNotification.id;
+    });
+    if (index > -1) {
+      notifications[index].isPreview = true;
+      notifications[index].features.forEach((feature) => {
+        feature.properties.isPreview = true;
+      });
     }
-  }, [
-    notifications,
-    notificationbeforelayerid,
-    styleMetadata,
-    zoom,
-    graphMapping,
-    baseLayer,
-  ]);
-
-  return notifications;
+  }
+
+  const features =
+    notifications
+      ?.map((notification) => {
+        return notification.features;
+      })
+      .flat() || [];
+
+  return {
+    features: features,
+    type: "FeatureCollection",
+  };
 };
 
 export default function NotificationLayer(props: MaplibreStyleLayerOptions) {
-  useNotifications();
-  const { baseLayer, map } = useMapContext();
+  const notifications = useNotifications();
+  const { baseLayer, map, notificationbeforelayerid } = useMapContext();
+  const graphMapping = useGraphMapping();
+  const zoom = useZoom();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
       return null;
     }
     return new MaplibreStyleLayer({
+      beforeId: notificationbeforelayerid,
       isQueryable: true,
       layersFilter: ({ metadata }) => {
         return metadata?.["general.filter"] === "notifications";
@@ -169,7 +178,25 @@ export default function NotificationLayer(props: MaplibreStyleLayerOptions) {
       maplibreLayer: baseLayer,
       ...(props || {}),
     });
-  }, [baseLayer, props]);
+  }, [baseLayer, notificationbeforelayerid, props]);
+
+  // Update data and style layers
+  useEffect(() => {
+    if (!baseLayer || !graphMapping) {
+      return null;
+    }
+    const graph = getCurrentGraph(graphMapping, zoom);
+    if (!graph) {
+      return null;
+    }
+    addNotificationsLayers(
+      baseLayer,
+      "notifications",
+      notifications,
+      notificationbeforelayerid,
+      graph,
+    );
+  }, [baseLayer, graphMapping, notificationbeforelayerid, notifications, zoom]);
 
   useEffect(() => {
     if (!map || !layer) {

package/src/NotificationLayer/notificationUtils.ts

@@ -2,6 +2,7 @@ import { FeatureCollection } from "geojson";
 import { Feature } from "ol";
 import { getCenter } from "ol/extent";
 import GeoJSON from "ol/format/GeoJSON";
+import { toLonLat } from "ol/proj";
 
 import addSourceAndLayers from "../utils/addSourceAndLayers";
 
@@ -19,14 +20,32 @@ export const getTime = (str) => {
  */
 const getNotificationsWithStatus = (notifications, now) => {
   return notifications
-    .filter((n) => {
+    .filter((notification) => {
       // TODO: The backend should be responsible to returns only good notifications.
-      const notOutOfDate = n.properties.affected_time_intervals.some((ati) => {
-        return now < new Date(ati.end);
-      });
+      let notOutOfDate = notification.properties.affected_time_intervals.some(
+        (ati) => {
+          return now < new Date(ati.end);
+        },
+      );
+      if (!notOutOfDate) {
+        notOutOfDate = notification.properties.publications.some(
+          (publication) => {
+            return (
+              now >= new Date(publication.visible_from) &&
+              now <= new Date(publication.visible_until)
+            );
+          },
+        );
+      }
       return notOutOfDate;
     })
     .map((n) => {
+      const isPublished = n.properties.publications.some((publication) => {
+        return (
+          now >= new Date(publication.visible_from) &&
+          now <= new Date(publication.visible_until)
+        );
+      });
       const isActive = n.properties.affected_time_intervals.some((ati) => {
         const {
           end,
@@ -88,6 +107,7 @@ const getNotificationsWithStatus = (notifications, now) => {
         ...n.properties,
         iconRefPoint,
         isActive,
+        isPublished,
         starts,
       };
 
@@ -98,6 +118,22 @@ const getNotificationsWithStatus = (notifications, now) => {
         };
       });
 
+      if (iconRefPoint) {
+        features.push({
+          geometry: {
+            coordinates: toLonLat(iconRefPoint),
+            type: "Point",
+          },
+          id: Math.random() + "",
+          properties: {
+            ...properties,
+            disruption_type: "whatever",
+            isIconRefPoint: true,
+          },
+          type: "Feature",
+        });
+      }
+
       return {
         ...n,
         features,
@@ -106,7 +142,7 @@ const getNotificationsWithStatus = (notifications, now) => {
     });
 };
 
-const getCurrentGraph = (mapping: object, zoom: number) => {
+export const getCurrentGraph = (mapping: object, zoom: number) => {
   const breakPoints = Object.keys(mapping).map((k) => {
     return parseFloat(k);
   });
@@ -116,41 +152,76 @@ const getCurrentGraph = (mapping: object, zoom: number) => {
   return mapping[closest || Math.min(...breakPoints)];
 };
 
+// export const getDisruptionActiveStyleLayers = (
+//   id = "notificationActive",
+//   graph,
+// ) => {
+//   return [
+//     {
+//       filter: [
+//         "all",
+//         ["==", ["get", "isActive"], true],
+//         ["==", ["get", "graph"], graph],
+//         ["==", ["get", "disruption_type"], "DISRUPTION"],
+//       ],
+//       id: id,
+//       layout: { visibility: "visible" },
+//       metadata: {
+//         "general.filter": "notifications",
+//       },
+//       paint: {
+//         "line-color": "rgba(255,0,0,1)",
+//         "line-dasharray": [2, 2],
+//         "line-width": 5,
+//       },
+//       source: "notifications",
+//       type: "line",
+//     },
+//   ];
+// };
+
 /**
  * This function add layers in the mapbox style to show notifications lines.
  */
 const addNotificationsLayers = (
   mapboxLayer: object,
-  notifications: FeatureCollection[],
+  sourceId: string,
+  sourceData: FeatureCollection,
   beforeLayerId: string,
-  zoom: number,
-  graphMapping: object,
+  graph: number,
 ) => {
   if (!mapboxLayer) {
     return;
   }
-  const features = notifications
-    .map((n) => {
-      return n.features;
-    })
-    .flat();
+
   addSourceAndLayers(
     mapboxLayer,
-    "notifications",
-    {
-      data: {
-        features,
-        type: "FeatureCollection",
-      },
-      generateId: true,
-      type: "geojson",
-    },
+    sourceId,
+    sourceData,
     [
+      // {
+      //   filter: [
+      //     "all",
+      //     ["==", ["get", "isPreview"], true],
+      //     ["==", ["get", "disruption_type"], "DISRUPTION"],
+      //   ],
+      //   id: "notificationsPreviewDisruption",
+      //   layout: { visibility: "visible" },
+      //   metadata: {
+      //     "general.filter": "notifications",
+      //   },
+      //   paint: {
+      //     "line-color": "rgba(255,255,0,0.2)",
+      //     "line-width": 10,
+      //   },
+      //   source: "notifications",
+      //   type: "line",
+      // },
       {
         filter: [
           "all",
           ["==", ["get", "isActive"], true],
-          ["==", ["get", "graph"], getCurrentGraph(graphMapping, zoom)],
+          ["==", ["get", "graph"], graph],
           ["==", ["get", "disruption_type"], "DISRUPTION"],
         ],
         id: "notificationsActive",
@@ -166,6 +237,103 @@ const addNotificationsLayers = (
         source: "notifications",
         type: "line",
       },
+      // {
+      //   filter: [
+      //     "all",
+      //     ["==", ["get", "isPreview"], true],
+      //     // ["==", ["get", "graph"], graph],
+      //     ["==", ["get", "disruption_type"], "DEVIATION"],
+      //   ],
+      //   id: "notificationsPreviewDeviation",
+      //   layout: { visibility: "visible" },
+      //   metadata: {
+      //     "general.filter": "notifications",
+      //   },
+      //   paint: {
+      //     "line-color": "rgba(255,255,0,0.2)",
+      //     "line-width": 10,
+      //   },
+      //   source: "notifications",
+      //   type: "line",
+      // },
+      {
+        filter: [
+          "all",
+          ["==", ["get", "isActive"], true],
+          ["==", ["get", "disruption_type"], "DEVIATION"],
+        ],
+        id: "notificationsActiveDeviation",
+        layout: { visibility: "visible" },
+        paint: {
+          "line-color": "#000000",
+          "line-dasharray": [2, 2],
+          "line-opacity": 0.5,
+          "line-width": 5,
+        },
+        source: "notifications",
+        type: "line",
+      },
+      {
+        filter: [
+          "all",
+          ["==", ["get", "isIconRefPoint"], true],
+          // ["==", ["get", "isActive"], true],
+        ],
+        id: "notificationsIconRefPointActive",
+        layout: { visibility: "visible" },
+        metadata: {
+          "general.filter": "notifications",
+        },
+        paint: {
+          "circle-color": "#ff0000",
+          "circle-radius": 10,
+        },
+        source: "notifications",
+        type: "circle",
+      },
+
+      {
+        filter: [
+          "all",
+          ["==", ["get", "isIconRefPoint"], true],
+          ["==", ["get", "isActive"], true],
+        ],
+        id: "notificationsIconRefPointActive",
+        layout: {
+          "icon-image": "warning",
+          "icon-size": 0.15,
+          visibility: "visible",
+        },
+        metadata: {
+          "general.filter": "notifications",
+        },
+        paint: {},
+        source: "notifications",
+        type: "symbol",
+      },
+      {
+        filter: [
+          "all",
+          ["==", ["get", "isIconRefPoint"], true],
+          ["==", ["get", "isActive"], false],
+          ["==", ["get", "isPublished"], true],
+        ],
+        id: "notificationsIconRefPointNonActive",
+        layout: {
+          "icon-image": "warningbanner",
+          "icon-size": 0.15,
+          "text-field": ["get", "starts"],
+          "text-offset": [1.5, 0],
+          "text-size": 8,
+          visibility: "visible",
+        },
+        metadata: {
+          "general.filter": "notifications",
+        },
+        paint: {},
+        source: "notifications",
+        type: "symbol",
+      },
     ],
     beforeLayerId,
   );

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -246,7 +246,7 @@ function RvfMobilityMap({
 
   // TODO: this should be removed. The parent application should be responsible to do this
   // or we should find something that fit more usecases
-  useUpdatePermalink(map, permalink === "true");
+  useUpdatePermalink(map, permalink === "true", eventNodeRef);
 
   const mapContextValue = useMemo(() => {
     return {
@@ -518,7 +518,7 @@ function RvfMobilityMap({
       <MapContext.Provider value={mapContextValue}>
         <RvfContext.Provider value={rvfContextValue}>
           <div
-            className="relative size-full overflow-hidden rounded-[16px] border font-sans  @container/main"
+            className="relative size-full overflow-hidden font-sans  @container/main"
             ref={eventNodeRef}
             style={styleProps}
           >

package/src/utils/addSourceAndLayers.ts

@@ -1,3 +1,11 @@
+import warningbanner from "../icons/warning-banner.png";
+import warning from "../icons/warning.png";
+
+const icons = {
+  warning: warning,
+  warningbanner: warningbanner,
+};
+
 // Add a source and styleLayer using the id in parameter.
 const addSourceAndLayers = (
   mapboxLayer,
@@ -20,13 +28,27 @@ const addSourceAndLayers = (
   }
   const { mbMap } = mapboxLayer;
 
+  Object.keys(icons).forEach((icon) => {
+    if (!mbMap.getImage(icon)) {
+      mbMap.loadImage(icons[icon]).then((image) => {
+        if (!mbMap.getImage(icon)) {
+          mbMap.addImage(icon, image.data);
+        }
+      });
+    }
+  });
+
   // Update source
   if (sourceId && sourceData) {
     const source = mbMap.getSource(sourceId);
     if (source) {
-      source.setData(sourceData.data);
+      source.setData(sourceData);
     } else {
-      mbMap.addSource(sourceId, sourceData);
+      mbMap.addSource(sourceId, {
+        data: sourceData,
+        generateId: true,
+        type: "geojson",
+      });
     }
   }
 

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -2,17 +2,22 @@ import debounce from "lodash.debounce";
 import { Map } from "ol";
 import { EventsKey } from "ol/events";
 import { unByKey } from "ol/Observable";
-import { useEffect } from "preact/hooks";
+import { MutableRef, useEffect } from "preact/hooks";
 
 import { LAYER_PROP_IS_EXPORTING } from "../constants";
 import getLayersAsFlatArray from "../getLayersAsFlatArray";
 import getPermalinkParameters from "../getPermalinkParameters";
+import MobilityEvent from "../MobilityEvent";
 
 /**
  * This hook only update parameters in the url, it does not apply the url parameters.
  */
 
-const useUpdatePermalink = (map: Map, permalink: boolean) => {
+const useUpdatePermalink = (
+  map: Map,
+  permalink: boolean,
+  eventNodeRef: MutableRef<HTMLDivElement>,
+) => {
   useEffect(() => {
     let moveEndKey: EventsKey;
     let loadEndKey: EventsKey;
@@ -23,17 +28,17 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
 
       // Update x,y,z in URL on moveend
       moveEndKey = map?.on("moveend", (evt) => {
-        updatePermalinkDebounced(evt.map);
+        updatePermalinkDebounced(evt.map, eventNodeRef);
       });
 
       // Update layers in URL on change:visible event
       loadEndKey = map.once("loadend", (evt) => {
-        updatePermalinkDebounced(evt.map);
+        updatePermalinkDebounced(evt.map, eventNodeRef);
         changeVisibleKeys = getLayersAsFlatArray(
           evt.map.getLayers().getArray(),
         ).map((layer) => {
           return layer.on("change:visible", () => {
-            updatePermalinkDebounced(evt.map);
+            updatePermalinkDebounced(evt.map, eventNodeRef);
           });
         });
       });
@@ -44,11 +49,14 @@ const useUpdatePermalink = (map: Map, permalink: boolean) => {
       unByKey(loadEndKey);
       unByKey(changeVisibleKeys);
     };
-  }, [map, permalink]);
+  }, [map, permalink, eventNodeRef]);
   return null;
 };
 
-const updatePermalink = (map: Map) => {
+const updatePermalink = (
+  map: Map,
+  eventNodeRef: MutableRef<HTMLDivElement>,
+) => {
   // No update when exporting
   if (map.get(LAYER_PROP_IS_EXPORTING)) {
     return;
@@ -57,6 +65,9 @@ const updatePermalink = (map: Map) => {
   const urlParams = getPermalinkParameters(map, currentUrlParams);
   urlParams.set("permalink", "true");
   window.history.replaceState(null, null, `?${urlParams.toString()}`);
+  eventNodeRef?.current?.dispatchEvent(
+    new MobilityEvent<string>("mwc:permalink", window.location.href),
+  );
 };
 
 const updatePermalinkDebounced = debounce(updatePermalink, 1000);

package/src/utils/hooks/useZoom.tsx

@@ -15,15 +15,27 @@ const useZoom = () => {
     if (view) {
       setZoom(view.getZoom());
     }
-    const zoomListener = view.on("change:resolution", () => {
+    const onZoomChange = (evt) => {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        return setZoom(view.getZoom());
+        return setZoom(evt.target.getZoom());
       }, 150);
+    };
+    let zoomListener = view.on("change:resolution", onZoomChange);
+
+    const key = map.on("change:view", () => {
+      const view = map.getView();
+      unByKey(zoomListener);
+      if (view) {
+        setZoom(view.getZoom());
+      }
+      zoomListener = view.on("change:resolution", onZoomChange);
     });
+
     return () => {
       clearTimeout(timeout);
       unByKey(zoomListener);
+      unByKey(key);
     };
   }, [map]);
   return zoom;