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

package/src/utils/getDelayTextForVehicle.test.ts

@@ -2,31 +2,31 @@ import getDelayTextForVehicle from "./getDelayTextForVehicle";
 
 describe("getDelayTextForVehicle", () => {
   it("returns cancelled character", () => {
-    expect(getDelayTextForVehicle(7200000, true)).toBe(
+    expect(getDelayTextForVehicle(null, null, 7200000, true)).toBe(
       String.fromCodePoint(0x00d7),
     );
   });
 
   it("returns hours (floor)", () => {
-    expect(getDelayTextForVehicle(7200000)).toBe("+2h");
-    expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
+    expect(getDelayTextForVehicle(null, null, 7200000)).toBe("+2h");
+    expect(getDelayTextForVehicle(null, null, 7255555)).toBe("+2h1m");
   });
 
   it("returns minutes (round)", () => {
-    expect(getDelayTextForVehicle(120000)).toBe("+2m");
-    expect(getDelayTextForVehicle(151000)).toBe("+3m");
+    expect(getDelayTextForVehicle(null, null, 120000)).toBe("+2m");
+    expect(getDelayTextForVehicle(null, null, 151000)).toBe("+3m");
   });
 
   it("doesn't display seconds", () => {
-    expect(getDelayTextForVehicle(1000)).toBe("");
-    expect(getDelayTextForVehicle(30000)).toBe("+1m");
-    expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
+    expect(getDelayTextForVehicle(null, null, 1000)).toBe("");
+    expect(getDelayTextForVehicle(null, null, 30000)).toBe("+1m");
+    expect(getDelayTextForVehicle(null, null, 7255555)).toBe("+2h1m");
   });
 
   it("returns empty value", () => {
-    expect(getDelayTextForVehicle(1000)).toBe("");
-    expect(getDelayTextForVehicle(null)).toBe("");
-    expect(getDelayTextForVehicle(undefined)).toBe("");
-    expect(getDelayTextForVehicle(0)).toBe("");
+    expect(getDelayTextForVehicle(null, null, 1000)).toBe("");
+    expect(getDelayTextForVehicle(null, null, null)).toBe("");
+    expect(getDelayTextForVehicle(null, null, undefined)).toBe("");
+    expect(getDelayTextForVehicle(null, null, 0)).toBe("");
   });
 });

package/src/utils/getDelayTextForVehicle.ts

@@ -1,11 +1,15 @@
 import getDelayString from "./getDelayString";
 
+import type { RealtimeTrajectory, ViewState } from "mobility-toolbox-js/types";
+
 /**
  * This function returns the text displays near the vehicle.
  * We use getDelayString inside it to make sure that RouteSchedule and
  * the map have the same values.
  */
 const getDelayTextForVehicle = (
+  trajectory: RealtimeTrajectory,
+  viewState: ViewState,
   delayInMs: number,
   cancelled = false,
 ): string => {

package/src/utils/getMainColorForVehicle.ts

@@ -1,3 +1,5 @@
+import { realtimeStyleUtils } from "mobility-toolbox-js/ol";
+
 import getBgColor from "./getBgColor";
 
 import type {
@@ -8,11 +10,13 @@ import type {
   RealtimeTrajectory,
 } from "mobility-toolbox-js/types";
 
-// This function returns the main color of a line using a line, trajectory, stopsequence or departure object.
+/**
+ * Return the color depending on an object representing a vehicle or a line.
+ * This function is used to have the same color on the map and on other components.
+ */
 const getMainColorForVehicle = (object: unknown = null): string => {
   const line =
     (object as RealtimeTrajectory)?.properties?.line ||
-    // @ts-expect-error bad type definition
     (object as RealtimeStopSequence)?.line ||
     (object as RealtimeLine);
 
@@ -35,10 +39,13 @@ const getMainColorForVehicle = (object: unknown = null): string => {
         type = "rail";
       }
     }
-    color = getBgColor(type, line);
+    color =
+      getBgColor(type, line) ||
+      realtimeStyleUtils.getColorForType(type) ||
+      realtimeStyleUtils.getColorForType("rail");
   }
 
-  if (color && color[0] !== "#") {
+  if (color && !color.startsWith("#")) {
     color = `#${color}`;
   }
 

package/src/utils/getRadius.ts

@@ -1,5 +1,7 @@
 import { realtimeConfig } from "mobility-toolbox-js/ol";
 
+import type { RealtimeMot } from "mobility-toolbox-js/types";
+
 // mobility-portal config
 const trackerRadiusMapping = {
   0: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 3, 3, 4, 4, 6, 7, 7], // Tram
@@ -28,11 +30,15 @@ const radiusMapping: Record<number, number[]> = trackerRadiusMapping;
 //   [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 7, 7, 7, 12, 12, 15],
 // ];
 
-export const getRadius = (type = 0, zoom = 0, cancelled = false) => {
+export const getRadius = (
+  type: number | RealtimeMot = 0,
+  zoom = 0,
+  cancelled = false,
+) => {
+  const z = Math.min(Math.floor(zoom || 1), 16);
   try {
-    // @ts-expect-error - bad type definition
     const typeIdx = realtimeConfig.getTypeIndex(type);
-    return radiusMapping[typeIdx][zoom] * (cancelled ? 2 : 1);
+    return radiusMapping[typeIdx][z] * (cancelled ? 2 : 1);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (e) {
     return 1;

package/src/utils/getTextColor.ts

@@ -4,7 +4,7 @@ const getTextColor = (type) => {
   if (type === "bus" || type === "tram") {
     return "#fff";
   }
-  return realtimeConfig.getTextColor(type);
+  return realtimeConfig.getTextColorForType(type);
 };
 
 export default getTextColor;

package/src/utils/getTextColorForVehicle.ts

@@ -0,0 +1,29 @@
+import { realtimeConfig } from "mobility-toolbox-js/ol";
+
+import type {
+  RealtimeDeparture,
+  RealtimeLine,
+  RealtimeStopSequence,
+  RealtimeTrajectory,
+} from "mobility-toolbox-js/types";
+
+import type { LnpLineInfo } from "./hooks/useLnp";
+
+const getTextColorForVehicle = (object: unknown) => {
+  const textColor =
+    (object as LnpLineInfo | RealtimeLine).text_color ||
+    (object as RealtimeDeparture | RealtimeStopSequence).line?.text_color ||
+    (object as RealtimeTrajectory).properties?.line?.text_color;
+
+  if (textColor) {
+    return textColor;
+  }
+
+  const type =
+    (object as RealtimeStopSequence).type ||
+    (object as RealtimeTrajectory).properties?.type;
+
+  return realtimeConfig.getTextColorForType(type);
+};
+
+export default getTextColorForVehicle;

package/src/utils/getTextFontForVehicle.test.ts

@@ -2,6 +2,6 @@ import getTextFontForVehicle from "./getTextFontForVehicle";
 
 describe("getTextFontForVehicle", () => {
   it("returns font that inherit", () => {
-    expect(getTextFontForVehicle(12)).toBe("bold 12px arial");
+    expect(getTextFontForVehicle(null, null, 12)).toBe("bold 12px arial");
   });
 });

package/src/utils/getTextFontForVehicle.tsx

@@ -1,8 +1,16 @@
+import type { ViewState } from "mobility-toolbox-js/types";
+
 /**
- * Return the font for the delay text in the map.
+ * Return the font depending on an object representing a vehicle or a line.
+ * This function is used to have the same font on the map and on other components.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getTextFontForVehicle = (fontSize: number, text?: string) => {
+const getTextFontForVehicle = (
+  object?: unknown,
+  viewState?: ViewState,
+  fontSize?: number,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  text?: string,
+) => {
   return `bold ${fontSize}px arial`;
 };
 

package/src/utils/getTextForVehicle.ts

@@ -4,12 +4,18 @@ import type {
   RealtimeTrajectory,
 } from "mobility-toolbox-js/types";
 
+import type { LnpLineInfo } from "./hooks/useLnp";
+
+/**
+ * Return the text depending on an object representing a vehicle or a line.
+ * This function is used to have the same text on the map and on other components.
+ */
 const getTextForVehicle = (object: unknown = ""): string => {
   const name =
     (object as RealtimeTrajectory)?.properties?.line?.name ||
-    // @ts-expect-error bad type definition
     (object as RealtimeStopSequence)?.line?.name ||
     (object as RealtimeLine)?.name ||
+    (object as LnpLineInfo)?.short_name ||
     (object as string) ||
     "";
 

package/src/utils/hooks/useFit.tsx

@@ -0,0 +1,69 @@
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { fromExtent } from "ol/geom/Polygon";
+import { useEffect, useRef } from "preact/hooks";
+
+import useFitOnFeatures from "./useFitOnFeatures";
+
+import type {
+  RealtimeRouteIdentifierMatch,
+  RealtimeTrainDetail,
+} from "mobility-toolbox-js/types";
+import type { GeoJSONFeature } from "ol/format/GeoJSON";
+
+import type { LnpLineInfo, LnpStopInfo } from "./useLnp";
+import type { StopsFeature } from "./useSearchStops";
+
+export type FitOnObject = (obj: FitObject, willOverlayOpen?: boolean) => void;
+
+export type FitObject =
+  | LnpLineInfo
+  | LnpStopInfo
+  | RealtimeRouteIdentifierMatch
+  | RealtimeTrainDetail
+  | StopsFeature;
+
+function useFit() {
+  const fitOnFeatures = useFitOnFeatures();
+  const fit = useRef<FitOnObject>();
+
+  useEffect(() => {
+    fit.current = (obj: FitObject, willOverlayOpen = false) => {
+      if (
+        (obj as StopsFeature)?.type === "Feature" &&
+        (obj as StopsFeature).geometry
+      ) {
+        fitOnFeatures.current([obj as GeoJSONFeature], willOverlayOpen);
+        return;
+      }
+      let extent =
+        (obj as LnpLineInfo)?.extent || (obj as RealtimeTrainDetail)?.bounds;
+
+      if ((obj as RealtimeRouteIdentifierMatch)?.trains?.length) {
+        extent = (obj as RealtimeRouteIdentifierMatch).trains[0].bounds as [
+          number,
+          number,
+          number,
+          number,
+        ];
+      }
+
+      if (extent) {
+        const feature = new Feature(fromExtent(extent));
+        fitOnFeatures.current([feature], willOverlayOpen);
+        return;
+      }
+
+      const coordinate = (obj as LnpStopInfo)?.coordinates;
+      if (coordinate) {
+        const feature = new Feature(new Point(coordinate));
+        fitOnFeatures.current([feature], willOverlayOpen);
+        return;
+      }
+    };
+  }, [fitOnFeatures]);
+
+  return fit;
+}
+
+export default useFit;

package/src/utils/hooks/useFitOnFeatures.tsx

@@ -0,0 +1,77 @@
+import { GeoJSON } from "ol/format";
+import { Vector } from "ol/source";
+import { useEffect, useRef } from "preact/hooks";
+
+import { FIT_ON_FEATURES_MAX_ZOOM_POINT } from "../constants";
+
+import useMapContext from "./useMapContext";
+
+import type { Feature, Map } from "ol";
+import type { GeoJSONFeature } from "ol/format/GeoJSON";
+const geojson = new GeoJSON();
+
+export type FitOnFeatures = (
+  features: (Feature | GeoJSONFeature)[],
+  willOverlayOpen?: boolean,
+  map?: Map,
+) => void;
+
+const useFitOnFeatures = () => {
+  const { isOverlayOpen, map: contextMap } = useMapContext();
+
+  const isOverlayOpenRef = useRef(isOverlayOpen);
+  const fitOnFeatures = useRef<FitOnFeatures>();
+
+  useEffect(() => {
+    isOverlayOpenRef.current = isOverlayOpen;
+  }, [isOverlayOpen]);
+
+  useEffect(() => {
+    fitOnFeatures.current = (
+      features: (Feature | GeoJSONFeature)[],
+      willOverlayOpen = false,
+      map?: Map,
+    ) => {
+      if ((!map && !contextMap) || !features?.length) {
+        return;
+      }
+      let feats = features as Feature[];
+
+      // Convert to ol features if GeoJSON
+      const geoJSONFeature = features?.[0] as GeoJSONFeature;
+      if (geoJSONFeature?.geometry && geoJSONFeature?.type === "Feature") {
+        // Single feature case
+        feats = geojson.readFeatures(
+          {
+            features,
+            type: "FeatureCollection",
+          },
+          { featureProjection: "EPSG:3857" },
+        );
+      }
+
+      const mapToUse = map || contextMap;
+      const extent = new Vector({ features: feats }).getExtent();
+      mapToUse.getView().fit(extent, {
+        duration: 500,
+        maxZoom:
+          extent[0] === extent[2] || extent[1] === extent[3]
+            ? FIT_ON_FEATURES_MAX_ZOOM_POINT
+            : undefined,
+        padding: [
+          50,
+          50,
+          50,
+          willOverlayOpen || isOverlayOpenRef.current ? 350 : 50,
+        ],
+      });
+      return () => {
+        mapToUse?.getView().cancelAnimations();
+      };
+    };
+  }, [contextMap]);
+
+  return fitOnFeatures;
+};
+
+export default useFitOnFeatures;

package/src/utils/hooks/useLayersConfig.tsx

@@ -4,10 +4,13 @@ import { LAYERS_NAMES } from "../constants";
 
 import useMapContext from "./useMapContext";
 
+import type { LAYER_TREE_HIDE_PROP } from "../constants";
+
 export interface LayerConfig {
   featurelink?: {
     href?: string;
   };
+  [LAYER_TREE_HIDE_PROP]?: boolean;
   link?: {
     href?: string;
     show?: boolean;

package/src/utils/hooks/useLnp.tsx

@@ -6,8 +6,9 @@ import useMapContext from "./useMapContext";
 
 import type { VectorTileSource } from "maplibre-gl";
 
-export interface LineInfo {
+export interface LnpLineInfo {
   color: string;
+  extent: [number, number, number, number];
   external_id: string;
   id: string;
   long_name: string;
@@ -18,16 +19,19 @@ export interface LineInfo {
   text_color: string;
 }
 
-export interface StopInfo {
+export interface LnpStopInfo {
+  codes: string[];
+  coordinates: [number, number];
   external_id: string;
   importance: number;
   long_name: string;
   short_name: string;
+  tralis_network: string;
   visibility_level: number;
 }
 
-export type LinesInfos = Record<string, LineInfo>;
-export type StopsInfos = Record<string, StopInfo>;
+export type LinesInfos = Record<string, LnpLineInfo>;
+export type StopsInfos = Record<string, LnpStopInfo>;
 
 let cacheLnpSourceInfo: {
   [LNP_MD_LINES]: LinesInfos;
@@ -91,7 +95,7 @@ export function useLnpStopsInfos(): StopsInfos {
  * This hook search line informations from lnp data. It takes a string in
  * parameter then it will search if there is a property that exactly match this value.
  */
-function useLnpLineInfo(text: string): LineInfo {
+function useLnpLineInfo(text: string): LnpLineInfo {
   const linesInfos = useLnpLinesInfos();
 
   if (!linesInfos || !text) {
@@ -109,4 +113,34 @@ function useLnpLineInfo(text: string): LineInfo {
   });
 }
 
+/**
+ * This hook search line informations from lnp data. It takes a string in
+ * parameter then it will search if there is a property that exactly match this value.
+ */
+export function useLnpStopInfo(text: string): LnpStopInfo {
+  const stationsInfos = useLnpStopsInfos();
+
+  if (!stationsInfos || !text) {
+    return null;
+  }
+
+  if (stationsInfos[text]) {
+    return stationsInfos[text];
+  }
+
+  return Object.values(stationsInfos).find((info) => {
+    return (
+      ["id", "external_id", "short_name", "long_name"].find((key) => {
+        return !!info[key] && info[key].toLowerCase() === text.toLowerCase();
+      }) ||
+      info?.codes?.find((code) => {
+        return (
+          code.toLowerCase() === text.toLowerCase() ||
+          code.split(":")[1]?.toLowerCase() === text.toLowerCase()
+        );
+      })
+    );
+  });
+}
+
 export default useLnpLineInfo;

package/src/utils/hooks/useMapContext.tsx

@@ -97,14 +97,12 @@ export type MapContextType = {
   setSelectedFeature: (feature: Feature) => void;
   setSelectedFeatures: (features: Feature[]) => void;
   setStation: (station?: RealtimeStation) => void;
-  setStationId: (stationId?: RealtimeStationId) => void;
+  setStationId: (stationId?: RealtimeStationId | string) => void;
   setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => void;
-  setStopSequence: (stopSequence?: RealtimeStopSequence) => void;
   setTrainId: (trainId?: RealtimeTrainId) => void;
   station: RealtimeStation;
-  stationId: RealtimeStationId;
+  stationId: RealtimeStationId | string;
   stationsLayer: MaplibreStyleLayer;
-  stopSequence: RealtimeStopSequence;
   trainId: RealtimeTrainId;
 } & MobilityMapProps;
 
@@ -150,7 +148,6 @@ export const MapContext = createContext<MapContextType>({
   setStation: (station?: RealtimeStation) => {},
   setStationId: (stationId?: RealtimeStationId) => {},
   setStationsLayer: (stationsLayer?: MaplibreStyleLayer) => {},
-  setStopSequence: (stopSequence?: RealtimeStopSequence) => {},
   setTrainId: (trainId?: RealtimeTrainId) => {},
 } as MapContextType);
 

package/src/utils/hooks/useRealtimeDepartures.tsx

@@ -0,0 +1,45 @@
+import { debounceDeparturesMessages } from "mobility-toolbox-js/ol";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+import type { RealtimeDeparture } from "mobility-toolbox-js/types";
+
+function useRealtimeDepartures(stationId: number | string) {
+  const { realtimeLayer } = useMapContext();
+  const [departures, setDepartures] = useState<RealtimeDeparture[]>();
+
+  const api = useMemo(() => {
+    return realtimeLayer?.api;
+  }, [realtimeLayer?.api]);
+
+  useEffect(() => {
+    if (!stationId || !api) {
+      return;
+    }
+
+    if (!api.wsApi.open) {
+      api.open();
+    }
+
+    const onMessage = debounceDeparturesMessages(
+      (newDepartures: RealtimeDeparture[]) => {
+        setDepartures(newDepartures);
+        return null;
+      },
+      false,
+      180,
+    );
+    // @ts-expect-error bad type definition
+    api.subscribeTimetable(stationId, onMessage);
+
+    return () => {
+      setDepartures(null);
+      api.unsubscribeTimetable(stationId as number);
+    };
+  }, [stationId, api]);
+
+  return departures;
+}
+
+export default useRealtimeDepartures;

package/src/utils/hooks/useRealtimeRenderedTrajectory.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+import type { RealtimeTrajectory } from "mobility-toolbox-js/types";
+
+function useRealtimeRenderedTrajectories(trainId: number | string) {
+  const { realtimeLayer } = useMapContext();
+  const [trajectory, setTrajectory] = useState<RealtimeTrajectory>();
+  const [trainIdFound, setTrainIdFound] = useState<string>();
+
+  // We try to find the trainId every second until we have it
+  // TODO: find a efficient way to find the trajectory without polling
+  useEffect(() => {
+    if (trainIdFound || !trainId || !realtimeLayer) {
+      return;
+    }
+    const timeout = setInterval(() => {
+      let traj = realtimeLayer?.trajectories?.[trainId];
+
+      if (!traj) {
+        traj = Object.values(realtimeLayer?.trajectories)?.find((item) => {
+          return item.properties.route_identifier === trainId;
+        });
+      }
+
+      if (traj) {
+        setTrajectory(traj);
+        setTrainIdFound(traj.properties.train_id);
+      }
+    }, 1000);
+
+    return () => {
+      clearInterval(timeout);
+      setTrainIdFound(undefined);
+    };
+  }, [trainId, realtimeLayer, trainIdFound]);
+
+  return trajectory;
+}
+
+export default useRealtimeRenderedTrajectories;

package/src/utils/hooks/useRealtimeStation.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+import type { RealtimeStation } from "mobility-toolbox-js/types";
+
+function useRealtimeStation(stationId: number | string) {
+  const { realtimeLayer } = useMapContext();
+  const [station, setStation] = useState<RealtimeStation>();
+  const api = useMemo(() => {
+    return realtimeLayer?.api;
+  }, [realtimeLayer?.api]);
+
+  useEffect(() => {
+    if (!stationId || !api) {
+      return;
+    }
+
+    if (!api.wsApi.open) {
+      api.wsApi.connect(api.url);
+    }
+
+    api.subscribe(`station ${stationId}`, ({ content }) => {
+      if (content) {
+        setStation(content as RealtimeStation);
+      }
+    });
+
+    return () => {
+      setStation(undefined);
+      if (stationId) {
+        api?.unsubscribe(`station ${stationId}`);
+      }
+    };
+  }, [stationId, api]);
+  return station;
+}
+
+export default useRealtimeStation;

package/src/utils/hooks/useRealtimeStopSequences.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "./useMapContext";
+
+import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
+
+function useRealtimeStopSequences(trainId: string) {
+  const { realtimeLayer } = useMapContext();
+  const [stopSequences, setStopSequences] = useState<RealtimeStopSequence[]>();
+
+  const api = useMemo(() => {
+    return realtimeLayer?.api;
+  }, [realtimeLayer?.api]);
+
+  useEffect(() => {
+    let trainIdSubscribed = null;
+    if (!trainId || !api) {
+      return;
+    }
+
+    if (!api.wsApi.open) {
+      api.open();
+    }
+
+    trainIdSubscribed = trainId;
+
+    const onMessage = ({ content }) => {
+      if (content) {
+        setStopSequences([...content]);
+      }
+    };
+    api.subscribeStopSequence(trainId, onMessage);
+
+    return () => {
+      setStopSequences([]);
+      api.unsubscribeStopSequence(trainIdSubscribed);
+    };
+  }, [trainId, api]);
+
+  return stopSequences;
+}
+
+export default useRealtimeStopSequences;