@geops/rvf-mobility-web-component 0.1.32 → 0.1.34

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

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/RouteIcon/RouteIcon.tsx

@@ -34,7 +34,7 @@ function RouteIcon({
     departure?.line ||
     stopSequence?.line ||
     trajectory?.properties?.line;
-  const type = stopSequence?.type || trajectory?.type;
+  const type = lineToUse?.type || stopSequence?.type || trajectory?.type;
   const backgroundColor = getMainColorForVehicle(
     line || departure || stopSequence || trajectory,
   );
@@ -46,7 +46,10 @@ function RouteIcon({
 
   const fontSize = fontSizesByNbLetters[text.length] || 12;
   const font = getTextFontForVehicle(fontSize, text);
-  const hasRealtime = stopSequence?.has_realtime_journey;
+
+  // RealtimeIcon only for stopsequence for now
+  const hasRealtime = stopSequence?.has_realtime_journey === true;
+  const showNoRealtimeIcon = !!stopSequence;
   const isCancelled = stopSequence?.stations[0]?.state === "JOURNEY_CANCELLED";
 
   if (borderColor === backgroundColor) {
@@ -67,7 +70,7 @@ function RouteIcon({
       >
         {children || text}
 
-        {!isCancelled && !hasRealtime && (
+        {showNoRealtimeIcon && !isCancelled && !hasRealtime && (
           <NoRealtime className={"absolute -left-2 -top-2"} />
         )}
       </span>

package/src/RouteStopProgress/RouteStopProgress.tsx

@@ -6,11 +6,16 @@ import useMapContext from "../utils/hooks/useMapContext";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
 export type RouteStopProgressProps = {
+  lineColor?: string;
   svgProps?: JSX.HTMLAttributes<SVGElement> & PreactDOMAttributes;
 } & JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
+function RouteStopProgress({
+  lineColor,
+  svgProps,
+  ...props
+}: RouteStopProgressProps) {
   const { stopSequence } = useMapContext();
   const { invertColor, status } = useRouteStop();
   const { isBoarding, isFirst, isLast, isLeft, isPassed, progress } = status;
@@ -19,16 +24,16 @@ function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
   const yDone = `${progress}%`;
 
   const greyColor = "rgb(156, 163, 175)";
-  const lineColor = getMainColorForVehicle(stopSequence);
+  const lineColorr = lineColor || getMainColorForVehicle(stopSequence);
 
-  let colorScheme = isPassed ? greyColor : lineColor;
-  let invertColorScheme = isPassed ? lineColor : greyColor;
+  let colorScheme = isPassed ? greyColor : lineColorr;
+  let invertColorScheme = isPassed ? lineColorr : greyColor;
   let progressDoneColor = greyColor;
 
   if (invertColor) {
-    colorScheme = isPassed ? lineColor : greyColor;
-    invertColorScheme = isPassed ? greyColor : lineColor;
-    progressDoneColor = lineColor;
+    colorScheme = isPassed ? lineColorr : greyColor;
+    invertColorScheme = isPassed ? greyColor : lineColorr;
+    progressDoneColor = lineColorr;
   }
 
   const circleColor =