@geops/rvf-mobility-web-component 0.1.83 → 0.1.84

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.83",
+  "version": "0.1.84",
   "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.10.0",
-    "mobility-toolbox-js": "3.4.7",
+    "mobility-toolbox-js": "3.5.1-beta.4",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

package/src/Departure/Departure.tsx

@@ -14,7 +14,8 @@ export interface DepartureProps {
 }
 
 function Departure({ departure, index, ...props }: DepartureProps) {
-  const { setStationId, setTrainId } = useMapContext();
+  const { realtimeLayer, setFeaturesInfos, setStationId, setTrainId } =
+    useMapContext();
 
   const departureState = useMemo(() => {
     return { departure, index };
@@ -23,10 +24,12 @@ function Departure({ departure, index, ...props }: DepartureProps) {
   return (
     <DepartureContext.Provider value={departureState}>
       <button
-        className="w-full border-b"
+        className="w-full cursor-pointer border-b"
         onClick={() => {
-          setTrainId(departure.train_id);
+          setFeaturesInfos(undefined);
           setStationId();
+          realtimeLayer?.setVisible(true);
+          setTrainId(departure.train_id);
         }}
         {...props}
       >

package/src/FeatureDetails/FeatureDetails.tsx

@@ -25,6 +25,7 @@ function FeatureDetails({ feature, featuresInfo, layer }: FeatureDetailsProps) {
   const {
     linesIds,
     linesNetworkPlanLayer,
+    notificationId,
     notificationsLayer,
     realtimeLayer,
     stationId,
@@ -50,10 +51,9 @@ function FeatureDetails({ feature, featuresInfo, layer }: FeatureDetailsProps) {
             features={featuresInfo?.features || []}
           />
         )}
-      {feature &&
-        !!notificationsLayer &&
-        !!layer &&
-        layer.get("name") === notificationsLayer.get("name") && (
+      {!!notificationsLayer &&
+        layer === notificationsLayer &&
+        notificationId && (
           <NotificationDetails className={contentClassName} feature={feature} />
         )}
     </>

package/src/FeaturesInfosListener/FeaturesInfosListener.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "preact/hooks";
 
+import { LNP_LINE_ID_PROP } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
 /**
@@ -10,7 +11,9 @@ function FeaturesInfosListener() {
     baseLayer,
     featuresInfos,
     featuresInfosHovered,
+    linesNetworkPlanLayer,
     realtimeLayer,
+    setLinesIds,
     setSelectedFeature,
     setSelectedFeatures,
     setStationId,
@@ -38,6 +41,20 @@ function FeaturesInfosListener() {
         return info.layer === stationsLayer;
       })?.features || [];
 
+    // Find the line to highlight in the LNP layer
+    const linesFeatures =
+      featuresInfos?.find((featuresInfo) => {
+        return featuresInfo.layer === linesNetworkPlanLayer;
+      })?.features || [];
+
+    const linesIds = [
+      ...new Set(
+        (linesFeatures || []).map((f) => {
+          return f.get(LNP_LINE_ID_PROP) as string;
+        }),
+      ),
+    ];
+
     const features =
       featuresInfos?.flatMap((info) => {
         return info.features;
@@ -53,11 +70,16 @@ function FeaturesInfosListener() {
     } else {
       setSelectedFeatures(features);
       setSelectedFeature(realtimeFeature || stationFeature || features[0]);
+      if (linesIds.length) {
+        setLinesIds(linesIds?.length ? linesIds : null);
+      }
     }
   }, [
     baseLayer?.mapLibreMap,
     featuresInfos,
+    linesNetworkPlanLayer,
     realtimeLayer,
+    setLinesIds,
     setSelectedFeature,
     setSelectedFeatures,
     setStationId,

package/src/LayerTreeMenu/LayerTreeMenu.tsx

@@ -5,7 +5,11 @@ import { memo, useEffect, useMemo, useState } from "preact/compat";
 
 import LayerTree from "../LayerTree";
 import { SelectionType } from "../LayerTree/TreeItem";
-import { LAYER_TREE_ORDER } from "../utils/constants";
+import {
+  LAYER_TREE_HIDE_PROP,
+  LAYER_TREE_ORDER,
+  LAYER_TREE_TITLE_FUNC_PROP,
+} from "../utils/constants";
 import useLayersConfig from "../utils/hooks/useLayersConfig";
 import useMapContext from "../utils/hooks/useMapContext";
 
@@ -39,7 +43,7 @@ const getConfigForLayer = (
   layersConfig: Record<string, LayerConfig> = {},
 ): LayerTreeConfig => {
   const defaultTitle = layersConfig[layer.get("name")]?.title || "";
-  const customTitleFunction = layer.get("layerTreeTitle");
+  const customTitleFunction = layer.get(LAYER_TREE_TITLE_FUNC_PROP);
   let title = defaultTitle;
   if (typeof customTitleFunction === "function") {
     title = customTitleFunction(title);
@@ -78,8 +82,12 @@ function LayerTreeMenu({
         .getArray()
         .filter(
           filter ??
-            (() => {
-              return true;
+            ((layer) => {
+              return (
+                (layer.get(LAYER_TREE_HIDE_PROP) ||
+                  layersConfig[layer.get("name")]?.[LAYER_TREE_HIDE_PROP]) !==
+                true
+              );
             }),
         )
         .sort((a, b) => {

package/src/LayoutState/LayoutState.tsx

@@ -1,7 +1,9 @@
-import { useEffect } from "preact/hooks";
+import { useCallback, useEffect } from "preact/hooks";
 
-import useLnpLineInfo from "../utils/hooks/useLnp";
+import useFit from "../utils/hooks/useFit";
+import useLnpLineInfo, { useLnpStopInfo } from "../utils/hooks/useLnp";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRealtimeTrainByRouteIdentifier from "../utils/hooks/useRealtimeTrainsByRouteIdentifier";
 
 /**
  * This component is responsible for updating the layout state in the context.
@@ -14,6 +16,7 @@ function LayoutState() {
     hasDetails,
     hasLayerTree,
     hasLnp,
+    hasNotification,
     hasPrint,
     hasRealtime,
     hasShare,
@@ -22,11 +25,13 @@ function LayoutState() {
     isSearchOpen,
     isShareMenuOpen,
     layertree,
+    lineid,
     linesIds,
     lnp,
-    lnpid,
     mapset,
     notification,
+    notificationid,
+    notificationId,
     permalink,
     previewNotifications,
     print,
@@ -54,16 +59,22 @@ function LayoutState() {
     setIsSearchOpen,
     setIsShareMenuOpen,
     setLinesIds,
+    setNotificationId,
     setStationId,
     setTrainId,
     share,
     stationId,
+    stationid,
     tenant,
     toolbar,
+    trainid,
     trainId,
   } = useMapContext();
 
-  const lineInfo = useLnpLineInfo(lnpid);
+  const lineInfo = useLnpLineInfo(lineid);
+  const stopInfo = useLnpStopInfo(stationid);
+  const trainInfo = useRealtimeTrainByRouteIdentifier(trainid);
+  const fit = useFit();
 
   useEffect(() => {
     setHasStations(!!tenant);
@@ -122,28 +133,80 @@ function LayoutState() {
   }, [layertree, setHasLayerTree]);
 
   useEffect(() => {
-    setLinesIds(lineInfo ? [lineInfo.external_id] : null);
+    setLinesIds(lineInfo?.external_id ? [lineInfo.external_id] : null);
   }, [lineInfo, setLinesIds]);
 
+  // Zoom when linesids attribute changes
+  useEffect(() => {
+    fit.current(lineInfo, true);
+  }, [lineInfo, fit]);
+
+  useEffect(() => {
+    setStationId(stopInfo?.external_id);
+  }, [stopInfo, setStationId]);
+
+  // Center and zoom when stationid attribute changes
+  useEffect(() => {
+    fit.current(stopInfo, true);
+  }, [stopInfo, fit]);
+
+  useEffect(() => {
+    setNotificationId(notificationid);
+  }, [notificationid, setNotificationId]);
+
+  useEffect(() => {
+    setTrainId(trainInfo?.train_id);
+  }, [setTrainId, trainInfo]);
+
+  // Center and zoom when trainid attribute changes
+  useEffect(() => {
+    fit.current(trainInfo, true);
+  }, [trainInfo, fit]);
+
+  // Close all menus
+  const closeMenus = useCallback(() => {
+    setIsLayerTreeOpen(false);
+    setIsExportMenuOpen(false);
+    setIsSearchOpen(false);
+    setIsShareMenuOpen(false);
+  }, [
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsSearchOpen,
+    setIsShareMenuOpen,
+  ]);
+
+  // Close all features details
+  const closeFeatureDetails = useCallback(() => {
+    setStationId(null);
+    setTrainId(null);
+    setNotificationId(null);
+    setLinesIds(null);
+    setFeaturesInfos(null);
+  }, [
+    setStationId,
+    setTrainId,
+    setNotificationId,
+    setLinesIds,
+    setFeaturesInfos,
+  ]);
+
   useEffect(() => {
     if (isSearchOpen) {
       setIsLayerTreeOpen(false);
       setIsExportMenuOpen(false);
       setIsShareMenuOpen(false);
       setStationId(null);
-      setTrainId(null);
-      setFeaturesInfos(null);
-      setLinesIds(null);
+
+      closeFeatureDetails();
     }
   }, [
+    closeFeatureDetails,
     isSearchOpen,
-    setFeaturesInfos,
     setIsExportMenuOpen,
     setIsLayerTreeOpen,
     setIsShareMenuOpen,
-    setLinesIds,
     setStationId,
-    setTrainId,
   ]);
 
   useEffect(() => {
@@ -151,20 +214,15 @@ function LayoutState() {
       setIsLayerTreeOpen(false);
       setIsExportMenuOpen(false);
       setIsSearchOpen(false);
-      setStationId(null);
-      setTrainId(null);
-      setFeaturesInfos(null);
-      setLinesIds(null);
+
+      closeFeatureDetails();
     }
   }, [
     isShareMenuOpen,
-    setFeaturesInfos,
+    closeFeatureDetails,
     setIsExportMenuOpen,
     setIsLayerTreeOpen,
     setIsSearchOpen,
-    setLinesIds,
-    setStationId,
-    setTrainId,
   ]);
 
   useEffect(() => {
@@ -172,22 +230,17 @@ function LayoutState() {
       setIsExportMenuOpen(false);
       setIsLayerTreeOpen(isLayerTreeOpen);
       setIsSearchOpen(false);
-      setFeaturesInfos(null);
-      setTrainId(null);
-      setStationId(null);
-      setLinesIds(null);
       setIsShareMenuOpen(false);
+
+      closeFeatureDetails();
     }
   }, [
     isLayerTreeOpen,
-    setFeaturesInfos,
+    closeFeatureDetails,
     setIsExportMenuOpen,
     setIsLayerTreeOpen,
     setIsSearchOpen,
     setIsShareMenuOpen,
-    setLinesIds,
-    setStationId,
-    setTrainId,
   ]);
 
   useEffect(() => {
@@ -195,84 +248,109 @@ function LayoutState() {
       setIsLayerTreeOpen(false);
       setIsExportMenuOpen(isExportMenuOpen);
       setIsSearchOpen(false);
-      setFeaturesInfos(null);
-      setTrainId(null);
-      setLinesIds(null);
       setIsShareMenuOpen(false);
-      setStationId(null);
+
+      closeFeatureDetails();
     }
   }, [
+    closeFeatureDetails,
     isExportMenuOpen,
-    setFeaturesInfos,
     setIsExportMenuOpen,
     setIsLayerTreeOpen,
     setIsSearchOpen,
     setIsShareMenuOpen,
-    setLinesIds,
-    setStationId,
-    setTrainId,
   ]);
 
   useEffect(() => {
     if (selectedFeature) {
-      setIsLayerTreeOpen(false);
-      setIsSearchOpen(false);
-      setIsExportMenuOpen(false);
-      setIsShareMenuOpen(false);
+      closeMenus();
       setTrainId(selectedFeature?.get("train_id") || null);
       setStationId(selectedFeature?.get("uid") || null);
-    } else if (!selectedFeature) {
-      setTrainId(null);
-      setStationId(null);
+      setNotificationId(selectedFeature?.get("situationId") || null);
     }
   }, [
     selectedFeature,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
+    closeMenus,
     setStationId,
     setTrainId,
+    setNotificationId,
   ]);
 
   useEffect(() => {
     if (stationId) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsSearchOpen(false);
+      closeMenus();
+
       setTrainId(null);
-      setIsShareMenuOpen(false);
       setLinesIds(null);
+      setNotificationId(null);
     }
   }, [
     setFeaturesInfos,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
+    closeMenus,
     setLinesIds,
+    setNotificationId,
     setTrainId,
     stationId,
   ]);
 
   useEffect(() => {
     if (trainId) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsSearchOpen(false);
+      closeMenus();
+
+      // Close overlay details
       setStationId(null);
-      setIsShareMenuOpen(false);
+      setLinesIds(null);
+      setNotificationId(null);
     }
   }, [
+    closeMenus,
     setFeaturesInfos,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
+    setLinesIds,
+    setNotificationId,
     setStationId,
     trainId,
   ]);
 
+  useEffect(() => {
+    if (notificationId) {
+      closeMenus();
+
+      // Close overlay details
+      setStationId(null);
+      setLinesIds(null);
+      setTrainId(null);
+    }
+  }, [
+    closeMenus,
+    notificationId,
+    setFeaturesInfos,
+    setLinesIds,
+    setNotificationId,
+    setStationId,
+    setTrainId,
+  ]);
+
+  useEffect(() => {
+    if (linesIds?.length) {
+      closeMenus();
+
+      // Close overlay details
+      setStationId(null);
+      setNotificationId(null);
+      setTrainId(null);
+    }
+  }, [
+    linesIds?.length,
+    notificationId,
+    setFeaturesInfos,
+    closeMenus,
+
+    setLinesIds,
+    setNotificationId,
+    setStationId,
+    setTrainId,
+  ]);
+
   useEffect(() => {
     setIsOverlayOpen(
       (hasDetails && !!selectedFeature) ||
@@ -281,7 +359,8 @@ function LayoutState() {
         (hasShare && isShareMenuOpen) ||
         (hasRealtime && !!trainId) ||
         (tenant && !!stationId) ||
-        (hasLnp && !!linesIds),
+        (hasLnp && !!linesIds) ||
+        (hasNotification && !!notificationId),
     );
   }, [
     hasDetails,
@@ -299,6 +378,8 @@ function LayoutState() {
     setIsOverlayOpen,
     hasLnp,
     linesIds,
+    hasNotification,
+    notificationId,
   ]);
 
   return null;

package/src/LinesNetworkPlanDetails/LinesNetworkPlanDetails.tsx

@@ -12,7 +12,7 @@ import type { RealtimeLine } from "mobility-toolbox-js/types";
 import type { Feature } from "ol";
 import type { PreactDOMAttributes } from "preact";
 
-import type { LineInfo } from "../utils/hooks/useLnp";
+import type { LnpLineInfo } from "../utils/hooks/useLnp";
 
 const RUNS_PROP = "runs";
 
@@ -46,7 +46,7 @@ function LinesNetworkPlanDetails({
     [layerConfig],
   );
 
-  const lineInfosByOperator: Record<string, LineInfo[]> = useMemo(() => {
+  const lineInfosByOperator: Record<string, LnpLineInfo[]> = useMemo(() => {
     const byOperators = {};
 
     [

package/src/LinesNetworkPlanLayerHighlight/LinesNetworkPlanLayerHighlight.tsx

@@ -2,24 +2,14 @@ import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
-import {
-  LNP_GEOPS_FILTER_HIGHLIGHT,
-  LNP_LINE_ID_PROP,
-} from "../utils/constants";
+import { LNP_GEOPS_FILTER_HIGHLIGHT } from "../utils/constants";
 import highlightLinesNetworkPlan from "../utils/highlightLinesNetworkPlan";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 
 function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
-  const {
-    baseLayer,
-    featuresInfos,
-    linesIds,
-    linesNetworkPlanLayer,
-    map,
-    setLinesIds,
-  } = useMapContext();
+  const { baseLayer, linesIds, map } = useMapContext();
 
   const layer = useMemo(() => {
     if (!baseLayer) {
@@ -48,34 +38,6 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
     };
   }, [map, layer]);
 
-  useEffect(() => {
-    if (!layer || !featuresInfos?.length || !linesNetworkPlanLayer) {
-      return;
-    }
-    const features =
-      featuresInfos.find((featuresInfo) => {
-        return featuresInfo.layer === linesNetworkPlanLayer;
-      })?.features || [];
-
-    if (!features.length) {
-      setLinesIds(null);
-      return;
-    }
-
-    const ids = [
-      ...new Set(
-        (features || []).map((f) => {
-          return f.get(LNP_LINE_ID_PROP) as string;
-        }),
-      ),
-    ];
-    if (!ids.length) {
-      setLinesIds(null);
-      return;
-    }
-    setLinesIds(ids?.length ? ids : null);
-  }, [featuresInfos, layer, linesNetworkPlanLayer, setLinesIds]);
-
   useEffect(() => {
     if (!layer || !baseLayer?.loaded) {
       return;

package/src/MapLayout/MapLayout.tsx

@@ -102,7 +102,7 @@ function MapLayout({
               {hasSearch && <SearchButton />}
             </div>
 
-            {hasSearch && (
+            {hasSearch && isSearchOpen && (
               <div
                 className={twMerge(
                   "absolute top-14 left-0 z-5 w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-47px)]",
@@ -111,13 +111,8 @@ function MapLayout({
               >
                 <Search
                   className={
-                    "border-grey @container m-0 h-[48px] gap-4 rounded-2xl border p-2 px-4 text-base @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
+                    "@container @sm/main:gap-4 @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
                   }
-                  // inputClassName="h-6 text-base"
-                  inputContainerClassName="border-none"
-                  resultClassName="text-base  **:hover:cursor-pointer p-2"
-                  resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-t-0 "
-                  withResultsClassName="text-base !rounded-b-none"
                 />
               </div>
             )}

package/src/MobilityMap/MobilityMap.tsx

@@ -38,7 +38,6 @@ import type {
   LayerGetFeatureInfoResponse,
   RealtimeStation,
   RealtimeStationId,
-  RealtimeStopSequence,
   RealtimeTrainId,
   SituationType,
 } from "mobility-toolbox-js/types";
@@ -75,7 +74,6 @@ function MobilityMap(props: MobilityMapProps) {
   const [isShareMenuOpen, setIsShareMenuOpen] = useState<boolean>(false);
   const [isLayerTreeOpen, setIsLayerTreeOpen] = useState<boolean>(false);
   const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
-  const [stopSequence, setStopSequence] = useState<RealtimeStopSequence>();
   const [stationsLayer, setStationsLayer] = useState<MaplibreStyleLayer>();
   const [station, setStation] = useState<RealtimeStation>();
   const [realtimeLayer, setRealtimeLayer] = useState<MtbRealtimeLayer>();
@@ -84,7 +82,7 @@ function MobilityMap(props: MobilityMapProps) {
   const [linesNetworkPlanLayer, setLinesNetworkPlanLayer] =
     useState<MaplibreStyleLayer>();
   const [map, setMap] = useState<OlMap>();
-  const [stationId, setStationId] = useState<RealtimeStationId>();
+  const [stationId, setStationId] = useState<RealtimeStationId | string>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
   const [linesIds, setLinesIds] = useState<string[]>();
   const [notificationId, setNotificationId] = useState<string>();
@@ -187,12 +185,10 @@ function MobilityMap(props: MobilityMapProps) {
       setStation,
       setStationId,
       setStationsLayer,
-      setStopSequence,
       setTrainId,
       station,
       stationId,
       stationsLayer,
-      stopSequence,
       trainId,
     };
   }, [
@@ -235,7 +231,6 @@ function MobilityMap(props: MobilityMapProps) {
     station,
     stationId,
     stationsLayer,
-    stopSequence,
     trainId,
   ]);