@geops/rvf-mobility-web-component 0.1.72 → 0.1.74

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.72",
+  "version": "0.1.74",
   "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.9.0",
-    "mobility-toolbox-js": "3.4.4",
+    "mobility-toolbox-js": "3.4.5",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -28,6 +28,11 @@ function MobilityNotifications({
   const [situations, setSituations] = useState<SituationType[]>([]);
 
   useEffect(() => {
+    // Rounded to minutes for caching purposes
+    const now = new Date();
+    now.setMilliseconds(0);
+    now.setSeconds(0);
+
     new MocoAPI({
       apiKey: apikey || undefined,
       tenant: notificationtenant,
@@ -35,10 +40,10 @@ function MobilityNotifications({
     })
       .export({
         contentMedium: true,
-        graph:
-          "np_topo4,np_topo5,np_topo6,np_topo7,np_topo8,np_topo9,np_topo10,np_topo11,np_topo12,np_topo13,np_topo14,np_topo15,osm",
-        hasGeoms: true,
-        publicAt: new Date().toISOString(),
+        includeGeoms: false,
+        includeLines: true,
+        includeStops: true,
+        publicAt: now.toISOString(),
       })
       .then((data) => {
         if (data?.paginatedSituations?.results) {

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -85,7 +85,6 @@ function LinesNetworkPlanDetails({
       ),
     ]
       .filter((id) => {
-        // console.log("ID", id, lineInfos);
         return !!id && !!lineInfos?.[id];
       })
       .forEach((id) => {
@@ -129,7 +128,6 @@ function LinesNetworkPlanDetails({
     return byLineId;
   }, [features]);
 
-  // console.log("ICI", features, lineInfos, lineInfosByOperator);
   if (!features?.length || !lineInfos) {
     return null;
   }

package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx

@@ -237,7 +237,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <Bicycle />
           </div>
         );
@@ -254,7 +254,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <Bicycle />
           </div>
         );
@@ -274,7 +274,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <CargoBike />
           </div>
         );
@@ -291,7 +291,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <CargoBike />
           </div>
         );
@@ -308,7 +308,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <Car />
           </div>
         );
@@ -325,7 +325,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <Car />
           </div>
         );
@@ -342,7 +342,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <Car />
           </div>
         );
@@ -359,7 +359,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <Scooter />
           </div>
         );
@@ -376,7 +376,7 @@ function RvfSharedMobilityLayerGroup(props: GroupOptions) {
       layerTreeTitle: (title) => {
         return (
           <div className="flex items-center justify-between gap-2">
-            {t(title)}
+            {t(title) || title}
             <Ride />
           </div>
         );

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -154,7 +154,6 @@ function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
         return f.features;
       });
 
-      console.log(features);
       // Append more infos about the features
       for (const feature of features) {
         const clusterId = feature.get("cluster_id");
@@ -166,7 +165,6 @@ function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
               .getSource<GeoJSONSource>(sourceId)
               ?.getClusterLeaves(clusterId, 1000, 0)) || [];
 
-          console.log(leaves);
           feature.set(
             "clusterLeaves",
             leaves.map((l) => {

package/src/SituationDetails/SituationDetails.tsx

@@ -248,6 +248,7 @@ function SituationDetails({
                         return (
                           <img
                             alt={label}
+                            className={"h-fit"}
                             key={absoluteUrl + label}
                             src={absoluteUrl}
                             title={label}

package/src/utils/getRadius.ts

@@ -2,19 +2,19 @@ import { realtimeConfig } from "mobility-toolbox-js/ol";
 
 // mobility-portal config
 const trackerRadiusMapping = {
-  0: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 6, 7, 7, 7],
-  1: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 6, 7, 7, 7],
-  2: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 3, 7, 12, 12, 15],
-  3: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 4, 6, 6, 6],
-  4: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 3, 7, 12, 12, 15],
-  5: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 4, 7, 7, 7],
-  6: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 4, 7, 7, 7],
-  7: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 4, 7, 7, 7],
-  8: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 4, 6, 6, 6],
-  9: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 3, 7, 12, 12, 15],
+  0: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 3, 3, 4, 4, 6, 7, 7], // Tram
+  1: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 3, 3, 4, 4, 6, 7, 7], // Subway
+  2: [0, 0, 0, 0, 0, 2, 2, 2, 2, 3, 3, 4, 4, 6, 7, 12, 15], // Train
+  3: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 3, 3, 4, 6, 6, 6], // Bus
+  4: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 3, 3, 6, 7, 12, 15], // Ferry
+  5: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 3, 3, 4, 6, 7, 7], // Cable car
+  6: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 3, 3, 4, 6, 7, 7], // Gondola
+  7: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 3, 3, 4, 6, 7, 7], // Funicular
+  8: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 3, 3, 4, 6, 6, 6], // Long distance bus
+  9: [0, 0, 0, 0, 0, 2, 2, 2, 2, 3, 3, 4, 4, 6, 7, 12, 15], // Rail
 };
 
-const radiusMapping: number[][] = trackerRadiusMapping;
+const radiusMapping: Record<number, number[]> = trackerRadiusMapping;
 // [
 //   [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
 //   [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],

package/src/utils/hooks/useInitialPermalink.tsx

@@ -14,7 +14,7 @@ const useInitialPermalink = (
   const { permalinktemplate } = useMapContext();
   const props = useMemo(() => {
     const template = permalinkTemplate || permalinktemplate;
-    console.log("template", template);
+
     if (!template) {
       return null;
     }

package/src/utils/hooks/useLnpLineInfo.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useMemo } from "preact/hooks";
+
+import { LNP_MD_LINES, LNP_MD_STOPS, LNP_SOURCE_ID } from "../constants";
+
+import useMapContext from "./useMapContext";
+
+import type { VectorTileSource } from "maplibre-gl";
+
+export interface LineInfo {
+  color: string;
+  external_id: string;
+  id: string;
+  long_name: string;
+  mot: string;
+  operator_name: string;
+  runs: number;
+  short_name: string;
+  text_color: string;
+}
+
+export interface StopInfo {
+  external_id: string;
+  importance: number;
+  long_name: string;
+  short_name: string;
+  visibility_level: number;
+}
+
+export type LinesInfos = Record<string, LineInfo>;
+export type StopsInfos = Record<string, StopInfo>;
+
+let cacheLnpSourceInfo: {
+  [LNP_MD_LINES]: LinesInfos;
+  [LNP_MD_STOPS]: StopsInfos;
+} = null;
+
+export function useLnpSourceInfos() {
+  const { baseLayer } = useMapContext();
+
+  const sourceUrl = useMemo(() => {
+    return baseLayer?.mapLibreMap?.getSource<VectorTileSource>(LNP_SOURCE_ID)
+      ?.url;
+  }, [baseLayer]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const fetchInfos = async (url) => {
+      if (!cacheLnpSourceInfo) {
+        const response = await fetch(url, { signal: abortController.signal });
+        const data = await response.json();
+        cacheLnpSourceInfo = data;
+      }
+    };
+    if (sourceUrl) {
+      void fetchInfos(sourceUrl);
+    }
+    return () => {
+      abortController?.abort();
+    };
+  }, [sourceUrl]);
+
+  return cacheLnpSourceInfo;
+}
+
+export function useLnpLinesInfos(): LinesInfos {
+  const infos = useLnpSourceInfos();
+  return infos?.[LNP_MD_LINES];
+}
+
+export function useLnpStopsInfos(): StopsInfos {
+  const infos = useLnpSourceInfos();
+  return infos?.[LNP_MD_STOPS];
+}
+
+/**
+ * This hook search lines 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 {
+  const linesInfos = useLnpLinesInfos();
+
+  if (!linesInfos) {
+    return null;
+  }
+
+  if (linesInfos[text]) {
+    return linesInfos[text];
+  }
+
+  return Object.values(linesInfos).find((info) => {
+    return ["id", "external_id", "short_name", "long_name"].find((key) => {
+      return info[key] === text;
+    });
+  });
+}
+
+export default useLnpLineInfo;

package/src/utils/realtimeRVFStyle.ts

@@ -385,7 +385,7 @@ const realtimeRVFStyle: RealtimeStyleFunction = (
         delayText = getDelayTextCanvas(
           text,
           fontSize,
-          getDelayFont(fontSize, text),
+          getDelayFont(hover || viewState.zoom >= 13 ? fontSize : 0, text), // Only display delay labels on zoom 13+
           getDelayColor(delay, cancelled, true),
           delayOutlineColor,
           pixelRatio,