feat: add lineid, notificationid, trainid and stationid attributes and reactor search to allow multiple search types

package.json

@@ -10,7 +10,7 @@
     "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
     "maplibre-gl": "^5.10.0",
-    "mobility-toolbox-js": "3.4.6",
+    "mobility-toolbox-js": "3.5.0",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

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}
       >

src/FeatureDetails/FeatureDetails.tsx

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

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";
 
 /**
@@ -9,7 +10,9 @@ function FeaturesInfosListener() {
   const {
     featuresInfos,
     featuresInfosHovered,
+    linesNetworkPlanLayer,
     realtimeLayer,
+    setLinesIds,
     setSelectedFeature,
     setSelectedFeatures,
     setStationId,
@@ -37,6 +40,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;
@@ -52,10 +69,15 @@ function FeaturesInfosListener() {
     } else {
       setSelectedFeatures(features);
       setSelectedFeature(realtimeFeature || stationFeature || features[0]);
+      if (linesIds.length) {
+        setLinesIds(linesIds?.length ? linesIds : null);
+      }
     }
   }, [
     featuresInfos,
+    linesNetworkPlanLayer,
     realtimeLayer,
+    setLinesIds,
     setSelectedFeature,
     setSelectedFeatures,
     setStationId,

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) => {