@geops/rvf-mobility-web-component 0.1.115 → 0.1.117

package/jest-setup.js

@@ -3,3 +3,11 @@ import "jest-canvas-mock";
 global.URL.createObjectURL = jest.fn(() => {
   return "fooblob";
 });
+
+class TextEncoder {
+  constructor() {}
+  decode() {}
+  encode() {}
+}
+
+global.TextDecoder = TextEncoder;

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.115",
+  "version": "0.1.117",
   "homepage": "https://rvf-mobility-web-component.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -12,32 +12,32 @@
     "jspdf": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "5.12.0",
-    "mobility-toolbox-js": "3.6.4",
-    "ol": "^10.7.0",
-    "preact": "^10.28.3",
+    "mobility-toolbox-js": "3.6.7",
+    "ol": "^10.8.0",
+    "preact": "^10.28.4",
     "preact-custom-element": "^4.6.0",
     "react": "npm:@preact/compat@^18.3.1",
     "react-dom": "npm:@preact/compat@^18.3.1",
     "react-icons": "^5.5.0",
-    "react-spatial": "^2.0.1",
+    "react-spatial": "^2.0.3",
     "rosetta": "^1.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.4.1",
-    "@commitlint/config-conventional": "^20.4.1",
-    "@eslint/js": "^9.39.2",
-    "@geops/eslint-config-react": "^1.6.0-beta.1",
-    "@tailwindcss/cli": "^4.1.18",
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
+    "@eslint/js": "^9",
+    "@geops/eslint-config-react": "^1.6.0",
+    "@tailwindcss/cli": "^4.2.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
     "@types/geojson": "^7946.0.16",
     "@types/jest": "^30.0.0",
-    "@types/lodash": "^4.17.23",
+    "@types/lodash": "^4.17.24",
     "@types/preact-custom-element": "^4.0.4",
     "concurrently": "^9.2.1",
-    "esbuild": "^0.27.2",
+    "esbuild": "^0.27.3",
     "esbuild-sass-plugin": "^3.6.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9",
     "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
@@ -47,15 +47,15 @@
     "jest-environment-jsdom": "^30.2.0",
     "jest-preset-preact": "^4.1.1",
     "next": "15.5.7",
-    "preact-render-to-string": "^6.6.5",
+    "preact-render-to-string": "^6.6.6",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "standard-version": "^9.5.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0"
+    "typescript-eslint": "^8.56.1"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js && cp index*.js* doc/public/",

package/src/FeaturesInfosListener/FeaturesInfosListener.tsx

@@ -24,6 +24,11 @@ function FeaturesInfosListener() {
   } = useMapContext();
 
   useEffect(() => {
+    // We want to call this use effect only when a hover happened
+    // and a query has been done not when the component is mounted
+    if (!featuresInfosHovered?.length) {
+      return;
+    }
     const [realtimeFeature] =
       featuresInfosHovered?.find((info) => {
         return info.layer === realtimeLayer;
@@ -34,7 +39,7 @@ function FeaturesInfosListener() {
         return info.layer === notificationsLayer;
       })?.features || [];
 
-    // We prioritize only symbol notifications, becaus ewe want to be able to click on trians on lines
+    // We prioritize only symbol notifications, because we want to be able to click on trains on lines
     const isSymbolNotification =
       notificationFeature?.getGeometry()?.getType() === "Point";
 
@@ -50,6 +55,15 @@ function FeaturesInfosListener() {
   }, [featuresInfosHovered, notificationsLayer, realtimeLayer]);
 
   useEffect(() => {
+    // We want to call this use effect only when a click happened
+    // and a query has been done not when the component is mounted
+    if (!featuresInfos?.length) {
+      // Reinitialize selected features
+      setSelectedFeature(null);
+      setSelectedFeatures([]);
+      return;
+    }
+
     const [realtimeFeature] =
       featuresInfos?.find((info) => {
         return info.layer === realtimeLayer;
@@ -84,7 +98,7 @@ function FeaturesInfosListener() {
         return info.features;
       }) || [];
 
-    // We prioritize only symbol notifications, becaus ewe want to be able to click on trians on lines
+    // We prioritize only symbol notifications, because we want to be able to click on trains on lines
     const isSymbolNotification =
       notificationFeature?.getGeometry()?.getType() === "Point";
 

package/src/LayoutState/LayoutState.tsx

@@ -345,10 +345,10 @@ function LayoutState() {
 
   useEffect(() => {
     setIsOverlayOpen(
-      (hasDetails && !!selectedFeature) ||
-        (hasPrint && isExportMenuOpen) ||
+      (hasPrint && isExportMenuOpen) ||
         (hasLayerTree && isLayerTreeOpen) ||
         (hasShare && isShareMenuOpen) ||
+        (hasDetails && !!selectedFeature) || // For custom layers details.
         (hasDetails && hasRealtime && !!trainId) ||
         (hasDetails && tenant && !!stationId) ||
         (hasDetails && hasLnp && !!linesIds) ||

package/src/NotificationDetails/NotificationDetails.tsx

@@ -11,6 +11,7 @@ import Link from "../ui/Link";
 import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 import useMocoSituation from "../utils/hooks/useMocoSituation";
+import mergePublications from "../utils/mergePublications";
 
 import type {
   MultilingualTextualContentType,
@@ -88,6 +89,9 @@ function NotificationDetails({
       });
     }) || [];
 
+  // Merge similar publications
+  publicationsToDisplay = mergePublications(publicationsToDisplay);
+
   // Display the current and next affected time intervals not the one in the past
   timeIntervalsToDisplay =
     (situationParsed?.affectedTimeIntervals || []).filter(

package/src/Overlay/Overlay.tsx

@@ -39,25 +39,21 @@ function Overlay({
         className)
       }
     >
-      {hasChildren && (
-        <>
-          <ScrollableHandler
-            className="absolute inset-0 flex h-[65px] touch-none justify-center @lg/main:hidden"
-            style={{ width: "100%" }}
-            {...ScrollableHandlerProps}
-          >
-            <div
-              className="m-2 mr-[-60px] bg-gray-300"
-              style={{
-                borderRadius: 2,
-                height: 4,
-                width: 32,
-              }}
-            />
-          </ScrollableHandler>
-          {children}
-        </>
-      )}
+      <ScrollableHandler
+        className="absolute inset-0 flex h-[65px] touch-none justify-center @lg/main:hidden"
+        style={{ width: "100%" }}
+        {...ScrollableHandlerProps}
+      >
+        <div
+          className="m-2 mr-[-60px] bg-gray-300"
+          style={{
+            borderRadius: 2,
+            height: 4,
+            width: 32,
+          }}
+        />
+      </ScrollableHandler>
+      {children}
     </div>
   );
 }

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -94,13 +94,14 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
   }, [apikey, realtimeurl, realtimebboxparameters, mots, tenant, props]);
 
   useEffect(() => {
+    let key;
     if (!map || !layer) {
       return;
     }
     if (map.getView()?.getCenter()) {
       map.addLayer(layer);
     } else {
-      map.once("moveend", () => {
+      key = map.once("moveend", () => {
         map.addLayer(layer);
       });
     }
@@ -108,6 +109,9 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
     setRealtimeLayer(layer);
 
     return () => {
+      if (key) {
+        unByKey(key);
+      }
       map.removeLayer(layer);
       setRealtimeLayer(null);
     };

package/src/RouteFollowingButton/RouteFollowingButton.tsx

@@ -0,0 +1,30 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import Tracking from "../icons/Tracking";
+import IconButton from "../ui/IconButton";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { IconButtonProps } from "../ui/IconButton/IconButton";
+
+function RouteFollowingButton({
+  children,
+  className,
+  ...props
+}: IconButtonProps) {
+  const { isFollowing, setIsFollowing } = useMapContext();
+  return (
+    <IconButton
+      className={twMerge(`${isFollowing ? "animate-pulse" : ""}`, className)}
+      onClick={() => {
+        setIsFollowing(!isFollowing);
+      }}
+      selected={isFollowing}
+      {...props}
+    >
+      {children || <Tracking />}
+    </IconButton>
+  );
+}
+
+export default memo(RouteFollowingButton);

package/src/RouteFollowingButton/index.tsx

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

package/src/RouteSchedule/RouteSchedule.tsx

@@ -1,5 +1,5 @@
 import { memo } from "preact/compat";
-import { useEffect, useRef } from "preact/hooks";
+import { useRef } from "preact/hooks";
 import { twMerge } from "tailwind-merge";
 
 import RouteScheduleFooter from "../RouteScheduleFooter";
@@ -8,6 +8,7 @@ import RouteStop from "../RouteStop";
 import ShadowOverflow from "../ShadowOverflow";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRealtimeStopSequences from "../utils/hooks/useRealtimeStopSequences";
+import useScrollTo from "../utils/hooks/useScrollTo";
 
 import type { RealtimeStop } from "mobility-toolbox-js/types";
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
@@ -20,29 +21,9 @@ export type RouteScheduleProps = {
 function RouteSchedule({ className }: RouteScheduleProps) {
   const { trainId } = useMapContext();
   const stopSequences = useRealtimeStopSequences(trainId);
-  const ref = useRef();
+  const ref = useRef<HTMLDivElement>();
 
-  useEffect(() => {
-    const interval = window.setInterval(() => {
-      const elt = ref.current as HTMLDivElement;
-      if (!elt) {
-        return;
-      }
-      const nextStation = elt.querySelector("[data-station-passed=false]");
-      if (nextStation) {
-        // We use scrollTo avoid scrolling the entire window.
-        (nextStation.parentNode.parentNode as Element).scrollTo({
-          behavior: "smooth",
-          top: (nextStation as HTMLElement).offsetTop || 0,
-        });
-      }
-      clearInterval(interval);
-    }, 300);
-    return () => {
-      clearTimeout(interval);
-    };
-    // Scroll automatically when a new scroll infos is set.
-  }, [stopSequences]);
+  useScrollTo(ref, "[data-station-passed=false]", [stopSequences]);
 
   if (!stopSequences?.[0]) {
     return null;
@@ -51,8 +32,8 @@ function RouteSchedule({ className }: RouteScheduleProps) {
   return (
     <>
       <RouteScheduleHeader stopSequence={stopSequence} />
-      <ShadowOverflow>
-        <div className={twMerge("text-base", className)} ref={ref}>
+      <ShadowOverflow ref={ref}>
+        <div className={twMerge("text-base", className)}>
           {stopSequence.stations.map((stop: RealtimeStop, index: number) => {
             const { arrivalTime, departureTime, stationId, stationName } = stop;
             return (

package/src/RouteScheduleHeader/RouteScheduleHeader.tsx

@@ -1,10 +1,8 @@
 import { memo } from "preact/compat";
 
-import Tracking from "../icons/Tracking";
+import RouteFollowingButton from "../RouteFollowingButton";
 import RouteIcon from "../RouteIcon";
 import RouteInfos from "../RouteInfos";
-import IconButton from "../ui/IconButton";
-import useMapContext from "../utils/hooks/useMapContext";
 
 import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
 
@@ -13,20 +11,11 @@ function RouteScheduleHeader({
 }: {
   stopSequence: RealtimeStopSequence;
 }) {
-  const { isFollowing, setIsFollowing } = useMapContext();
   return (
     <div className="flex items-center gap-x-4 bg-slate-100 p-4 py-2">
       <RouteIcon stopSequence={stopSequence} />
       <RouteInfos className="flex grow flex-col" stopSequence={stopSequence} />
-      <IconButton
-        className={`${isFollowing ? "animate-pulse" : ""}`}
-        onClick={() => {
-          setIsFollowing(!isFollowing);
-        }}
-        selected={isFollowing}
-      >
-        <Tracking />
-      </IconButton>
+      <RouteFollowingButton />
     </div>
   );
 }

package/src/RouteStop/RouteStop.tsx

@@ -1,5 +1,6 @@
 import { memo } from "preact/compat";
 import { useEffect, useMemo, useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
 import DebugStop from "../DebugStop/DebugStop";
 import RouteStopDelay from "../RouteStopDelay";
@@ -30,6 +31,7 @@ export type RouteScheduleStopProps = {
 
 function RouteStop({
   children,
+  className,
   classNameGreyOut = "text-gray-600",
   index,
   invertColor = false,
@@ -74,7 +76,10 @@ function RouteStop({
     <RouteStopContext.Provider value={routeStopState}>
       <button
         // max-h-[58px] because the svg showing the progress is 58px height.
-        className={`flex max-h-[58px] w-full scroll-mt-[50px] items-stretch rounded text-left hover:bg-slate-100 ${colorScheme}`}
+        className={twMerge(
+          `flex max-h-[58px] w-full scroll-mt-[50px] items-stretch rounded text-left hover:bg-slate-100 ${colorScheme}`,
+          className,
+        )}
         data-station-passed={status.isPassed} // Use for auto scroll
         onClick={() => {
           if (stop.coordinate) {

package/src/ShadowOverflow/ShadowOverflow.tsx

@@ -1,15 +1,23 @@
-import { memo } from "preact/compat";
+import { forwardRef, memo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
 import type { PreactDOMAttributes } from "preact";
+import type { MutableRef } from "preact/hooks";
 
-function ShadowOverflow({
-  children,
-  className,
-  ...props
-}: { className?: string } & PreactDOMAttributes) {
+function ShadowOverflow(
+  {
+    children,
+    className,
+    ...props
+  }: { className?: string } & PreactDOMAttributes,
+  ref: MutableRef<HTMLDivElement>,
+) {
   return (
-    <div {...props} className={twMerge("relative overflow-y-auto", className)}>
+    <div
+      {...props}
+      className={twMerge("relative overflow-y-auto", className)}
+      ref={ref}
+    >
       <div className="pointer-events-none sticky top-0 right-0 left-0 h-4 bg-gradient-to-t from-transparent to-white"></div>
       {children}
       <div className="pointer-events-none sticky right-0 bottom-[-1px] left-0 h-4 bg-gradient-to-b from-transparent to-white"></div>
@@ -17,4 +25,4 @@ function ShadowOverflow({
   );
 }
 
-export default memo(ShadowOverflow);
+export default memo(forwardRef(ShadowOverflow));

package/src/SituationDetails/SituationDetails.tsx

@@ -13,6 +13,7 @@ import ArrowUp from "../icons/ArrowUp";
 import Warning from "../icons/Warning";
 import Link from "../ui/Link";
 import useI18n from "../utils/hooks/useI18n";
+import mergePublications from "../utils/mergePublications";
 
 import type { MultilingualTextualContentType } from "mobility-toolbox-js/types";
 
@@ -99,6 +100,8 @@ function SituationDetails({
       });
     }) || [];
 
+  publicationsToDisplay = mergePublications(publicationsToDisplay);
+
   // Display the current and next affected time intervals not the one in the past
   timeIntervalsToDisplay =
     (situation?.affectedTimeIntervals || []).filter(
@@ -112,7 +115,7 @@ function SituationDetails({
 
   // Display the reasons
   reasonsToDisplay = (situation?.reasons || []).map(({ name }) => {
-    return name;
+    return name && t(name.replace(".", ""));
   });
 
   return (

package/src/StopsSearch/StopsSearch.tsx

@@ -291,7 +291,7 @@ function StopsSearch({
             resultsContainerClassName,
           )}
         >
-          {results && results.length === 0 && (
+          {!!results?.length && (
             <div
               className={twMerge(
                 "flex grow gap-3 border border-solid p-3 pt-2 text-zinc-400",

package/src/utils/hooks/useLnp.tsx

@@ -108,7 +108,7 @@ function useLnpLineInfo(text: string): LnpLineInfo {
 
   return Object.values(linesInfos).find((info) => {
     return ["id", "external_id", "short_name", "long_name"].find((key) => {
-      return !!info[key] && info[key] === text;
+      return !!info[key] && info[key].toLowerCase() === text.toLowerCase();
     });
   });
 }

package/src/utils/hooks/useScrollTo.tsx

@@ -0,0 +1,36 @@
+import { useLayoutEffect } from "react";
+
+import type { MutableRef } from "react";
+
+const defaultScrollOptions: ScrollIntoViewOptions = { behavior: "smooth" };
+
+function useScrollTo(
+  ref: MutableRef<HTMLElement>,
+  targetSelector: string,
+  dependenciesArray: unknown[] = [],
+  scrollToOptions: ScrollIntoViewOptions = defaultScrollOptions,
+) {
+  useLayoutEffect(() => {
+    const elt = ref.current;
+    if (!elt) {
+      return;
+    }
+    const scrollToElt = elt.querySelector(targetSelector);
+
+    if (scrollToElt) {
+      try {
+        // We use scrollTo avoid scrolling the entire window.
+        elt.scrollTo({
+          ...scrollToOptions,
+          top: (scrollToElt as HTMLElement).offsetTop || 0,
+        });
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error("Error while scrolling to element", err);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...dependenciesArray]);
+}
+
+export default useScrollTo;

package/src/utils/mergePublications.test.ts

@@ -0,0 +1,91 @@
+import mergePublications from "./mergePublications";
+
+import type { PublicationType } from "mobility-toolbox-js/types";
+
+describe("mergePublications", () => {
+  it("should merge publications with same publication windows and textual contents", () => {
+    const publications = [
+      {
+        publicationLines: [
+          {
+            category: "DISRUPTION",
+            hasIcon: true,
+            lines: [
+              {
+                name: "510",
+                operatorRef: "SBG",
+              },
+              {
+                name: "510",
+                operatorRef: "SBG",
+              },
+              {
+                name: "510",
+                operatorRef: "SBG",
+              },
+            ],
+            mot: "BUS",
+          },
+        ],
+        publicationStops: [],
+        publicationWindows: [],
+        serviceCondition: "DIVERTED",
+        serviceConditionGroup: "CHANGES",
+        severity: "NORMAL",
+        severityGroup: "NORMAL",
+        textualContentLarge: null,
+        textualContentMedium: {
+          de: {
+            consequence: "",
+            description:
+              "Zwischen <b>Denzlingen Mattenbühl</b> und <b>Denzlingen Bahnhof</b> kommt es vom <b>26. Februar 2026 ab 08:00 Uhr bis auf Weiteres</b> zu <b>einer Umleitung und Haltausfällen</b> wegen einer Baumaßnahme. Betroffen <b>sind die Linien 510 und 512</b>. Es kommt zu folgenden Änderungen:<br>\n                <b>Umleitung Linie 510</b>: Die Haltestellen Denzlingen Gewerbegebiet bis Denzlingen Mattenbühl werden nicht bedient.  <br><br>Die Änderungen sind in der elektronischen Fahrplanauskunft EFA hinterlegt.",
+            durationText: "",
+            reason: "",
+            recommendation: "",
+            summary:
+              "Linien 510 und 512: Umleitung und Haltentfall wegen einer Baumaßnahme",
+          },
+        },
+      },
+      {
+        publicationLines: [
+          {
+            category: "DISRUPTION",
+            hasIcon: true,
+            lines: [
+              {
+                name: "512",
+                operatorRef: "SBG",
+              },
+            ],
+            mot: "BUS",
+          },
+        ],
+        publicationStops: [],
+        publicationWindows: [],
+        serviceCondition: "DIVERTED",
+        serviceConditionGroup: "CHANGES",
+        severity: "NORMAL",
+        severityGroup: "NORMAL",
+        textualContentLarge: null,
+        textualContentMedium: {
+          de: {
+            consequence: "",
+            description:
+              "Zwischen <b>Denzlingen Mattenbühl</b> und <b>Denzlingen Bahnhof</b> kommt es vom <b>26. Februar 2026 ab 08:00 Uhr bis auf Weiteres</b> zu <b>einer Umleitung und Haltausfällen</b> wegen einer Baumaßnahme. Betroffen <b>sind die Linien 510 und 512</b>. Es kommt zu folgenden Änderungen:<br>\n                <b>Umleitung Linie 510</b>: Die Haltestellen Denzlingen Gewerbegebiet bis Denzlingen Mattenbühl werden nicht bedient.  <br><br>Die Änderungen sind in der elektronischen Fahrplanauskunft EFA hinterlegt.",
+            durationText: "",
+            reason: "",
+            recommendation: "",
+            summary:
+              "Linien 510 und 512: Umleitung und Haltentfall wegen einer Baumaßnahme",
+          },
+        },
+      },
+    ] as PublicationType[];
+    const merged = mergePublications(publications);
+    expect(merged).toHaveLength(1);
+    expect(merged[0].publicationLines).toHaveLength(2);
+    expect(merged[0].publicationLines?.[0].lines[0].name).toBe("510");
+    expect(merged[0].publicationLines?.[1].lines[0].name).toBe("512");
+  });
+});

package/src/utils/mergePublications.ts

@@ -0,0 +1,52 @@
+import type { PublicationType } from "mobility-toolbox-js/types";
+
+/**
+ * When imported from external source, some publication have the same publication
+ * windows and the same textualContents but only differs the lines or stations.
+ * In that case we merge them (lines and stops) to avoid duplicates in the display.
+ * TODO fixes this in backend oder import
+ */
+const mergePublications = (
+  publications: PublicationType[] = [],
+): PublicationType[] => {
+  const mergedPublications: PublicationType[] = [];
+  try {
+    publications.forEach((publication) => {
+      const publicationsWindowsStr = JSON.stringify(
+        publication.publicationWindows,
+      );
+      const textualContentStr = JSON.stringify(publication.textualContents);
+
+      // Find a previous identical publication
+      const identicalPublication = mergedPublications.find((p) => {
+        return (
+          p.severity === publication.severity &&
+          p.serviceCondition === publication.serviceCondition &&
+          JSON.stringify(p.publicationWindows) === publicationsWindowsStr &&
+          JSON.stringify(p.textualContents) === textualContentStr
+        );
+      });
+
+      if (identicalPublication) {
+        // We move the lines and stops on the same publication to display them together and avoid duplicates
+        identicalPublication.publicationLines = [
+          ...(identicalPublication.publicationLines || []),
+          ...(publication.publicationLines || []),
+        ];
+        identicalPublication.publicationStops = [
+          ...(identicalPublication.publicationStops || []),
+          ...(publication.publicationStops || []),
+        ];
+        return false;
+      }
+      mergedPublications.push(publication);
+    });
+  } catch (error) {
+    // JSON parsing could failed, we log the error and return the non merged
+    // publications to avoid breaking the display
+    console.error("Error merging publications", error);
+    return publications;
+  }
+  return mergedPublications;
+};
+export default mergePublications;