@geops/rvf-mobility-web-component 0.1.73 → 0.1.75

package/src/utils/hooks/useLnp.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } 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, setSourceUrl] = useState<string>(null);
+
+  useEffect(() => {
+    const url =
+      baseLayer?.mapLibreMap?.getSource<VectorTileSource>(LNP_SOURCE_ID)?.url;
+    const onSourceData = (e) => {
+      if (e.sourceId === LNP_SOURCE_ID && e.isSourceLoaded) {
+        setSourceUrl(e.source?.url);
+        baseLayer?.mapLibreMap?.off("sourcedata", onSourceData);
+      }
+    };
+    if (!url) {
+      baseLayer?.mapLibreMap?.on("sourcedata", onSourceData);
+    } else {
+      setSourceUrl(url);
+    }
+    return () => {
+      baseLayer?.mapLibreMap?.off("sourcedata", onSourceData);
+    };
+  }, [baseLayer?.mapLibreMap]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    const fetchInfos = async (url: string) => {
+      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 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 {
+  const linesInfos = useLnpLinesInfos();
+
+  if (!linesInfos || !text) {
+    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] && info[key] === text;
+    });
+  });
+}
+
+export default useLnpLineInfo;

package/src/utils/hooks/useMapContext.tsx

@@ -50,6 +50,7 @@ export type MapContextType = {
   linesNetworkPlanLayer: MaplibreStyleLayer;
   map: Map;
   mapsetLayer?: MapsetLayer;
+  notificationId?: string;
   notificationsLayer?: MocoLayer;
   permalinkUrlSearchParams: URLSearchParams;
   previewNotifications?: SituationType[];
@@ -86,6 +87,7 @@ export type MapContextType = {
   setLinesNetworkPlanLayer: (layer?: MaplibreStyleLayer) => void;
   setMap: (map?: Map) => void;
   setMapsetLayer: (mapsetLayer?: MapsetLayer) => void;
+  setNotificationId: (notificationId?: string) => void;
   setNotificationsLayer: (notificationsLayer?: MocoLayer) => void;
   setPermalinkUrlSearchParams: (
     setPermalinkUrlSearchParams: URLSearchParams,
@@ -132,9 +134,11 @@ export const MapContext = createContext<MapContextType>({
   setBaseLayer: (baseLayer?: MaplibreLayer) => {},
   setIsFollowing: (isFollowing: boolean) => {},
   setIsTracking: (isTracking: boolean) => {},
+  setLinesIds: (linesIds: string[]) => {},
   setLinesNetworkPlanLayer: (linesNetworkPlanLayer: MaplibreStyleLayer) => {},
   setMap: (map?: Map) => {},
   setMapsetLayer: (mapsetLayer?: MapsetLayer) => {},
+  setNotificationId: (notificationId?: string) => {},
   setNotificationsLayer: (notificationsLayer?: MocoLayer) => {},
   setPermalinkUrlSearchParams: (
     permalinkUrlSearchParams: URLSearchParams,

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -1,240 +0,0 @@
-import { getFeatureInfoAtCoordinate } from "mobility-toolbox-js/ol";
-import { GeoJSON } from "ol/format";
-import { unByKey } from "ol/Observable";
-import { useCallback, useEffect } from "preact/hooks";
-
-import {
-  LAYER_NAME_REALTIME,
-  LAYER_NAME_STATIONS,
-  PROVIDER_LOGOS_BY_FEED_ID,
-} from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRvfContext from "../utils/hooks/useRvfContext";
-import MobilityEvent from "../utils/MobilityEvent";
-import { fetchSharingStation } from "../utils/sharingGraphqlUtils";
-
-import type { GeoJSONSource } from "maplibre-gl";
-import type { Feature, MapBrowserEvent } from "ol";
-
-const geojson = new GeoJSON();
-
-function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
-  const {
-    baseLayer,
-    map,
-    queryablelayers,
-    realtimeLayer,
-    setStationId,
-    setTrainId,
-    stationId,
-    stationsLayer,
-    tenant,
-    trainId,
-  } = useMapContext();
-  const { selectedFeature, setSelectedFeature, setSelectedFeatures } =
-    useRvfContext();
-
-  // Send the selctedFEature to the parent window
-  useEffect(() => {
-    eventNode?.dispatchEvent(
-      new MobilityEvent("mwc:selectedfeature", {
-        feature: selectedFeature
-          ? geojson.writeFeatureObject(selectedFeature)
-          : null,
-      }),
-    );
-  }, [eventNode, selectedFeature]);
-
-  const onPointerMove = useCallback(
-    (evt: MapBrowserEvent<PointerEvent>) => {
-      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
-        hitTolerance: 5,
-        layerFilter: (l) => {
-          return l === realtimeLayer;
-        },
-      });
-      realtimeLayer?.highlight(realtimeFeature as Feature);
-
-      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l === stationsLayer;
-        },
-      });
-
-      const [stationFeature] = stationsFeatures.filter((feat) => {
-        return feat.get("tralis_network")?.includes(tenant);
-      });
-
-      // Send all the features under the cursor
-      const features = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return queryablelayers
-            ? queryablelayers.split(",").includes(l.get("name"))
-            : l.get("isQueryable");
-        },
-      }) as Feature[];
-
-      evt.map.getTargetElement().style.cursor =
-        realtimeFeature || stationFeature || features?.length
-          ? "pointer"
-          : "default";
-    },
-    [queryablelayers, realtimeLayer, stationsLayer, tenant],
-  );
-
-  const onSingleClick = useCallback(
-    async (evt: MapBrowserEvent<PointerEvent>) => {
-      if (!baseLayer?.mapLibreMap) {
-        return;
-      }
-      const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
-        hitTolerance: 5,
-        layerFilter: (l) => {
-          return l === realtimeLayer;
-        },
-      }) as Feature[];
-      realtimeFeature?.set("layerName", LAYER_NAME_REALTIME);
-
-      const stationsFeatures = evt.map.getFeaturesAtPixel(evt.pixel, {
-        layerFilter: (l) => {
-          return l === stationsLayer;
-        },
-      });
-      const [stationFeature] = stationsFeatures.filter((feat) => {
-        return feat.get("tralis_network")?.includes(tenant);
-      }) as Feature[];
-      stationFeature?.set("layerName", LAYER_NAME_STATIONS);
-
-      const newStationId = stationFeature?.get("uid");
-
-      const newTrainId = realtimeFeature?.get("train_id");
-
-      if (newStationId && stationId !== newStationId) {
-        setStationId(newStationId);
-        setTrainId(null);
-      } else if (newTrainId && newTrainId !== trainId) {
-        setTrainId(realtimeFeature.get("train_id"));
-        setStationId(null);
-      } else {
-        setTrainId(null);
-        setStationId(null);
-      }
-
-      // Send all the features under the cursor
-      // const features = evt.map.getFeaturesAtPixel(evt.pixel, {
-      //   hitTolerance: 5,
-      //   layerFilter: (l) => {
-      //     console.log(queryablelayers);
-      //     return queryablelayers
-      //       ? queryablelayers.split(",").includes(l.get("name"))
-      //       : l.get("isQueryable");
-      //   },
-      // }) as Feature[];
-
-      const queryableLayers = evt.map.getAllLayers().filter((l) => {
-        return queryablelayers
-          ? queryablelayers.split(",").includes(l.get("name"))
-          : l.get("isQueryable");
-      });
-      const featuresInfos = await getFeatureInfoAtCoordinate(
-        evt.coordinate,
-        queryableLayers,
-        5,
-        true,
-      );
-
-      // Set the layerName as property of the feature
-      featuresInfos.forEach((f) => {
-        f.features.forEach((feat) => {
-          feat.set("layerName", f.layer.get("name"));
-        });
-      });
-
-      const features = featuresInfos.flatMap((f) => {
-        return f.features;
-      });
-
-      console.log(features);
-      // Append more infos about the features
-      for (const feature of features) {
-        const clusterId = feature.get("cluster_id");
-        if (clusterId) {
-          const vtFeat = feature.get("vectorTileFeature");
-          const sourceId = vtFeat.layer.source;
-          const leaves =
-            (await baseLayer.mapLibreMap
-              .getSource<GeoJSONSource>(sourceId)
-              ?.getClusterLeaves(clusterId, 1000, 0)) || [];
-
-          console.log(leaves);
-          feature.set(
-            "clusterLeaves",
-            leaves.map((l) => {
-              return geojson.readFeature(l);
-            }),
-          );
-        }
-
-        // Sharing station
-        const sharingStationId = selectedFeature?.get("station_id");
-        if (sharingStationId) {
-          const sharingStationInfo =
-            await fetchSharingStation(sharingStationId);
-          selectedFeature.setProperties(sharingStationInfo);
-          selectedFeature.set(
-            "provider_logo",
-            PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
-          );
-        }
-      }
-
-      if (newStationId || newTrainId || !features.length) {
-        setSelectedFeature(null);
-        setSelectedFeatures([]);
-      } else {
-        setSelectedFeatures(features);
-
-        // We prioritize some layers like the notification one over the others
-        const notificationFeature = features.find((feat) => {
-          return feat.get("situation");
-        });
-        if (notificationFeature) {
-          setSelectedFeature(notificationFeature);
-        } else {
-          setSelectedFeature(features[0]);
-        }
-      }
-    },
-    [
-      baseLayer?.mapLibreMap,
-      stationId,
-      trainId,
-      realtimeLayer,
-      stationsLayer,
-      tenant,
-      setStationId,
-      setTrainId,
-      queryablelayers,
-      selectedFeature,
-      setSelectedFeature,
-      setSelectedFeatures,
-    ],
-  );
-
-  useEffect(() => {
-    const key = map?.on("singleclick", onSingleClick);
-    return () => {
-      unByKey(key);
-    };
-  }, [map, onSingleClick]);
-
-  useEffect(() => {
-    const key = map?.on("pointermove", onPointerMove);
-    return () => {
-      unByKey(key);
-    };
-  }, [map, onPointerMove]);
-
-  return null;
-}
-export default SingleClickListener;

package/src/RvfSingleClickListener/index.tsx

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