@geops/rvf-mobility-web-component 0.1.61 → 0.1.63

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -1,37 +1,92 @@
+import { GeoJSON } from "ol/format";
+import { memo } from "preact/compat";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
+import { twMerge } from "tailwind-merge";
 
+import ShadowOverflow from "../../ShadowOverflow";
 import { PROVIDER_LOGOS_BY_FEED_ID } from "../../utils/constants";
+import useMapContext from "../../utils/hooks/useMapContext";
+import { fetchSharingStation } from "../../utils/sharingGraphqlUtils";
 
 import FloatingVehiclesDetails from "./FloatingVehiclesDetails";
 import StationDetails from "./StationDetails";
 
+import type { GeoJSONSource } from "maplibre-gl";
 import type { Feature } from "ol";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+const geojson = new GeoJSON();
 
-export interface RvfSharedMobilityDetailsProps {
+export type RvfSharedMobilityDetailsProps = {
+  className?: string;
   feature: Feature;
-}
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
 
-function RvfSharedMobilityDetails({ feature }: RvfSharedMobilityDetailsProps) {
+function RvfSharedMobilityDetails({
+  className,
+  feature,
+  ...props
+}: RvfSharedMobilityDetailsProps) {
+  const { baseLayer } = useMapContext();
   const [features, setFeatures] = useState([]);
   const isStationDetails = !!feature.get("station_id");
   const isFloatingVehicle = !!feature.get("vehicle_id");
   const isCluster = !!feature.get("cluster_id");
 
+  // Get station infos from MobiDataBW graphql API
+  useEffect(() => {
+    if (isStationDetails) {
+      // Sharing station
+      const sharingStationId = feature?.get("station_id");
+      const feedId = feature?.get("feed_id");
+      if (sharingStationId) {
+        fetchSharingStation(sharingStationId)
+          .then((sharingStationInfo) => {
+            feature.setProperties(sharingStationInfo);
+            feature.set("provider_logo", PROVIDER_LOGOS_BY_FEED_ID[feedId]);
+          })
+          .catch((error) => {
+            console.warn("Error fetching sharing station info:", error);
+          });
+      }
+    }
+  }, [feature, isStationDetails]);
+
   useEffect(() => {
     if (isCluster) {
-      setFeatures(feature.get("features"));
+      const clusterId = feature.get("cluster_id");
+      if (clusterId) {
+        // Append leaves infos about the cluster
+        const vtFeat = feature.get("vectorTileFeature");
+        const sourceId = vtFeat.layer.source;
+        baseLayer.mapLibreMap
+          .getSource<GeoJSONSource>(sourceId)
+          ?.getClusterLeaves(clusterId, 1000, 0)
+          .then((leaves) => {
+            const featuresLeaves = leaves.map((l) => {
+              return geojson.readFeature(l);
+            });
+            setFeatures(featuresLeaves || []);
+          })
+          .catch(() => {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Impossible to get cluster ${clusterId} leaves from source ${sourceId}`,
+            );
+          });
+      }
     } else {
-      setFeatures([feature]);
+      setFeatures(feature ? [feature] : []);
     }
-  }, [feature, isFloatingVehicle, isCluster]);
+  }, [feature, isFloatingVehicle, isCluster, baseLayer?.mapLibreMap]);
 
   const featuresByFeedId: Record<string, Feature[]> = useMemo(() => {
     const featuresByFeedIdd = {};
     if (isStationDetails) {
       return null;
     }
-    features.forEach((featuree) => {
+    (features || []).forEach((featuree) => {
       const feedId = featuree.get("feed_id");
       if (featuresByFeedIdd[feedId]) {
         featuresByFeedIdd[feedId].push(featuree);
@@ -43,35 +98,37 @@ function RvfSharedMobilityDetails({ feature }: RvfSharedMobilityDetailsProps) {
   }, [features, isStationDetails]);
 
   return (
-    <div className={"space-y-4"}>
-      {isStationDetails && (
-        <>
-          <img
-            alt="logo"
-            className="max-w-24"
-            src={PROVIDER_LOGOS_BY_FEED_ID[features[0]?.get("feed_id")]}
-          />
-          {features.length && isStationDetails && (
-            <StationDetails feature={features[0]} />
-          )}
-        </>
-      )}
-      {(isFloatingVehicle || isCluster) &&
-        featuresByFeedId &&
-        Object.entries(featuresByFeedId).map(([key, feats]) => {
-          return (
-            <Fragment key={key}>
-              <img
-                alt="logo"
-                className="max-w-24"
-                src={PROVIDER_LOGOS_BY_FEED_ID[feats[0]?.get("feed_id")]}
-              />
-              <FloatingVehiclesDetails features={feats} />
-            </Fragment>
-          );
-        })}
-    </div>
+    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
+      <div className={"space-y-4"}>
+        {isStationDetails && (
+          <>
+            <img
+              alt="logo"
+              className="max-w-24"
+              src={PROVIDER_LOGOS_BY_FEED_ID[features[0]?.get("feed_id")]}
+            />
+            {features.length && isStationDetails && (
+              <StationDetails feature={features[0]} />
+            )}
+          </>
+        )}
+        {(isFloatingVehicle || isCluster) &&
+          featuresByFeedId &&
+          Object.entries(featuresByFeedId).map(([key, feats]) => {
+            return (
+              <Fragment key={key}>
+                <img
+                  alt="logo"
+                  className="max-w-24"
+                  src={PROVIDER_LOGOS_BY_FEED_ID[feats[0]?.get("feed_id")]}
+                />
+                <FloatingVehiclesDetails features={feats} />
+              </Fragment>
+            );
+          })}
+      </div>
+    </ShadowOverflow>
   );
 }
 
-export default RvfSharedMobilityDetails;
+export default memo(RvfSharedMobilityDetails);

package/src/RvfLink/RvfLink.tsx

@@ -11,7 +11,7 @@ export type RvfLinkProps = {
   PreactDOMAttributes;
 
 const baseClasses =
-  "my-1 flex items-center leading-[1.1] underline text-[14px] @sm/main:text-[16px] @md/main:text-[18px] items-center justify-left font-semibold";
+  "my-1 flex items-center leading-[1.1] underline text-base items-center justify-left font-semibold gap-1";
 
 export const themes = {
   primary: {
@@ -40,8 +40,11 @@ function RvfLink({
 
   return (
     <a className={classes} rel="noreferrer" target="_blank" {...props}>
+      {(!(props.href as string)?.includes(window.location.hostname) ||
+        !(props.href as string)?.startsWith("(https?|ftp)")) && (
+        <ArrowUpRight height="20" width="20" />
+      )}
       {children}
-      <ArrowUpRight />
     </a>
   );
 }

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -1,3 +1,10 @@
+import {
+  type MaplibreLayer,
+  type MaplibreStyleLayer,
+  type MapsetLayer as MbtMapsetLayer,
+  type RealtimeLayer as MbtRealtimeLayer,
+  type MocoLayer,
+} from "mobility-toolbox-js/ol";
 import { memo } from "preact/compat";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { twMerge } from "tailwind-merge";
@@ -13,6 +20,7 @@ import LayoutState from "../LayoutState";
 import LinesNetworkPlanLayer from "../LinesNetworkPlanLayer";
 import Map from "../Map";
 import MapDispatchEvents from "../MapDispatchEvents";
+import MapsetLayer from "../MapsetLayer";
 import MobilityMapAttributes from "../MobilityMap/MobilityMapAttributes";
 import NotificationsLayer from "../NotificationsLayer";
 import Overlay from "../Overlay";
@@ -50,12 +58,6 @@ import tailwind from "../style.css";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
-import type {
-  MaplibreLayer,
-  MaplibreStyleLayer,
-  RealtimeLayer as MbtRealtimeLayer,
-  MocoLayer,
-} from "mobility-toolbox-js/ol";
 import type {
   LayerGetFeatureInfoResponse,
   RealtimeStation,
@@ -154,6 +156,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
   const [hasGeolocation, setHasGeolocation] = useState<boolean>(false);
   const [hasLnp, setHasLnp] = useState<boolean>(false);
   const [hasDetails, setHasDetails] = useState<boolean>(false);
+  const [hasMapset, setHasMapset] = useState<boolean>(false);
   const [hasNotification, setHasNotification] = useState<boolean>(false);
   const [hasPermalink, setHasPermalink] = useState<boolean>(false);
   const [hasPrint, setHasPrint] = useState<boolean>(false);
@@ -175,9 +178,12 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
   const [notificationsLayer, setNotificationsLayer] = useState<MocoLayer>();
   const [linesNetworkPlanLayer, setLinesNetworkPlanLayer] =
     useState<MaplibreStyleLayer>();
+  const [mapsetLayer, setMapsetLayer] = useState<MbtMapsetLayer>();
+
   const [map, setMap] = useState<OlMap>();
   const [stationId, setStationId] = useState<RealtimeStationId>();
   const [trainId, setTrainId] = useState<RealtimeTrainId>();
+  const [linesIds, setLinesIds] = useState<string[]>();
   const [featuresInfos, setFeaturesInfos] = useState<
     LayerGetFeatureInfoResponse[]
   >([]);
@@ -216,6 +222,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
       hasGeolocation,
       hasLayerTree,
       hasLnp,
+      hasMapset,
       hasNotification,
       hasPermalink,
       hasPrint,
@@ -232,8 +239,10 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
       isSearchOpen,
       isShareMenuOpen,
       isTracking,
+      linesIds,
       linesNetworkPlanLayer,
       map,
+      mapsetLayer,
       notificationsLayer,
       permalinkUrlSearchParams,
       previewNotifications,
@@ -247,6 +256,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
       setHasGeolocation,
       setHasLayerTree,
       setHasLnp,
+      setHasMapset,
       setHasNotification,
       setHasPermalink,
       setHasPrint,
@@ -263,8 +273,10 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
       setIsSearchOpen,
       setIsShareMenuOpen,
       setIsTracking,
+      setLinesIds,
       setLinesNetworkPlanLayer,
       setMap,
+      setMapsetLayer,
       setNotificationsLayer,
       setPermalinkUrlSearchParams,
       setPreviewNotifications,
@@ -291,6 +303,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
     hasGeolocation,
     hasLayerTree,
     hasLnp,
+    hasMapset,
     hasNotification,
     hasPermalink,
     hasPrint,
@@ -307,8 +320,10 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
     isSearchOpen,
     isShareMenuOpen,
     isTracking,
+    linesIds,
     linesNetworkPlanLayer,
     map,
+    mapsetLayer,
     notificationsLayer,
     permalinkUrlSearchParams,
     previewNotifications,
@@ -456,6 +471,9 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                 <RvfTarifZonenLayer />
                 <RvfSellingPointsLayer />
                 {hasLnp && <LinesNetworkPlanLayer />}
+
+                {hasMapset && <MapsetLayer />}
+
                 <RvfPoisLayer />
                 <RvfSharedMobilityLayerGroup />
                 {mainlink && (
@@ -490,11 +508,11 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                 )}
               </Map>
 
-              <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2 *:pointer-events-auto">
+              <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2">
                 {hasToolbar && (
                   <div
                     className={
-                      "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
+                      "pointer-events-none relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm *:pointer-events-auto"
                     }
                     //  className="w-fit rounded-2xl bg-black/10 p-1 backdrop-blur-sm">
                   >
@@ -540,7 +558,7 @@ function RvfMobilityMap(props: RvfMobilityMapProps) {
                 {/* Desktop (>= lg) */}
                 <div
                   className={twMerge(
-                    "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
+                    "pointer-events-none flex w-0 flex-1 flex-col overflow-hidden rounded-2xl",
                     isOverlayOpen ? "@lg:min-w-64" : "p-0",
                   )}
                   style={{ containerType: "normal" }}

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -3,16 +3,15 @@ import { useEffect, useMemo } from "preact/hooks";
 
 import { EMPTY_FEATURE_COLLECTION, SOURCE_SELECT } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
-import useRvfContext from "../utils/hooks/useRvfContext";
 
 const geojson = new GeoJSON({
   dataProjection: "EPSG:4326",
   featureProjection: "EPSG:3857",
 });
 
-function SingleClickListener() {
+function RvfSelectedFeatureHighlightLayer() {
   const { baseLayer } = useMapContext();
-  const { selectedFeature } = useRvfContext();
+  const { selectedFeature } = useMapContext();
 
   // const layer = useMemo(() => {
   //   const layer = new VectorLayer({
@@ -55,7 +54,12 @@ function SingleClickListener() {
           hover: true,
         });
         if (feature.get("cluster_id")) {
-          feature.set("mot", feature.get("features")[0].get("form_factor"));
+          // Maybe not the most robust solutions, so I set scooter by default in case something changes in the style.
+          feature.set(
+            "mot",
+            feature.get("vectorTileFeature")?.source?.split("_")?.pop() ||
+              "scooter",
+          );
           feature.set("provider_name", "");
           feature.set("num_vehicles_available", feature.get("point_count"));
         }
@@ -93,4 +97,4 @@ function SingleClickListener() {
 
   return null;
 }
-export default SingleClickListener;
+export default RvfSelectedFeatureHighlightLayer;

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -154,6 +154,7 @@ 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");
@@ -165,8 +166,9 @@ function SingleClickListener({ eventNode }: { eventNode: HTMLElement }) {
               .getSource<GeoJSONSource>(sourceId)
               ?.getClusterLeaves(clusterId, 1000, 0)) || [];
 
+          console.log(leaves);
           feature.set(
-            "features",
+            "clusterLeaves",
             leaves.map((l) => {
               return geojson.readFeature(l);
             }),