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

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.74",
+  "version": "0.1.76",
   "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.5",
+    "mobility-toolbox-js": "3.4.6-beta.1",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",

package/src/FeatureDetails/FeatureDetails.tsx

@@ -23,37 +23,28 @@ export interface FeatureDetailsProps {
  */
 function FeatureDetails({ feature, featuresInfo, layer }: FeatureDetailsProps) {
   const {
+    linesIds,
     linesNetworkPlanLayer,
     notificationsLayer,
     realtimeLayer,
     stationId,
     stationsLayer,
-    tenant,
     trainId,
   } = useMapContext();
 
-  if (!feature) {
+  if (!layer) {
     return null;
   }
 
   return (
     <>
-      {feature &&
-        !!realtimeLayer &&
-        !!layer &&
-        layer.get("name") === realtimeLayer.get("name") &&
-        trainId && <RouteSchedule />}
-      {feature &&
-        !!stationsLayer &&
-        !!layer &&
-        layer.get("name") === stationsLayer.get("name") &&
-        tenant &&
-        stationId && <Station />}
-      {feature &&
-        !!linesNetworkPlanLayer &&
-        !!layer &&
-        layer.get("name") === linesNetworkPlanLayer.get("name") &&
-        featuresInfo?.features?.length && (
+      {!!realtimeLayer && layer === realtimeLayer && trainId && (
+        <RouteSchedule />
+      )}
+      {!!stationsLayer && layer === stationsLayer && stationId && <Station />}
+      {!!linesNetworkPlanLayer &&
+        layer === linesNetworkPlanLayer &&
+        linesIds && (
           <LinesNetworkPlanDetails
             className={contentClassName}
             features={featuresInfo?.features || []}

package/src/LayerTreeMenu/LayerTreeMenu.tsx

@@ -28,7 +28,7 @@ export interface LayerTreeConfig {
 
 export type LayerTreeMenuProps = {
   filter?: (layer: BaseLayer) => boolean;
-  order: string[];
+  order?: string[];
 } & HTMLAttributes<HTMLDivElement> &
   Partial<LayerTreeProps> &
   PreactDOMAttributes;

package/src/LayoutState/LayoutState.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "preact/hooks";
 
+import useLnpLineInfo from "../utils/hooks/useLnp";
 import useMapContext from "../utils/hooks/useMapContext";
 
 /**
@@ -12,6 +13,7 @@ function LayoutState() {
     geolocation,
     hasDetails,
     hasLayerTree,
+    hasLnp,
     hasPrint,
     hasRealtime,
     hasShare,
@@ -20,7 +22,9 @@ function LayoutState() {
     isSearchOpen,
     isShareMenuOpen,
     layertree,
+    linesIds,
     lnp,
+    lnpid,
     mapset,
     notification,
     permalink,
@@ -59,6 +63,8 @@ function LayoutState() {
     trainId,
   } = useMapContext();
 
+  const lineInfo = useLnpLineInfo(lnpid);
+
   useEffect(() => {
     setHasStations(!!tenant);
   }, [setHasStations, tenant]);
@@ -115,6 +121,10 @@ function LayoutState() {
     setHasLayerTree(layertree === "true");
   }, [layertree, setHasLayerTree]);
 
+  useEffect(() => {
+    setLinesIds(lineInfo ? [lineInfo.external_id] : null);
+  }, [lineInfo, setLinesIds]);
+
   useEffect(() => {
     if (isSearchOpen) {
       setIsLayerTreeOpen(false);
@@ -270,7 +280,8 @@ function LayoutState() {
         (hasLayerTree && isLayerTreeOpen) ||
         (hasShare && isShareMenuOpen) ||
         (hasRealtime && !!trainId) ||
-        (tenant && !!stationId),
+        (tenant && !!stationId) ||
+        (hasLnp && !!linesIds),
     );
   }, [
     hasDetails,
@@ -286,6 +297,8 @@ function LayoutState() {
     tenant,
     stationId,
     setIsOverlayOpen,
+    hasLnp,
+    linesIds,
   ]);
 
   return null;

package/src/LinesNetworkPlanDetails/LinesNetworkPlanDetails.tsx

@@ -1,43 +1,18 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useCallback, useMemo, useState } from "preact/hooks";
 import { twMerge } from "tailwind-merge";
 
 import RouteIcon from "../RouteIcon";
 import ShadowOverflow from "../ShadowOverflow";
-import {
-  LNP_LINE_ID_PROP,
-  LNP_MD_LINES,
-  LNP_MD_STOPS,
-  LNP_SOURCE_ID,
-} from "../utils/constants";
+import { LAYERS_NAMES, LNP_LINE_ID_PROP } from "../utils/constants";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
+import { useLnpLinesInfos, useLnpStopsInfos } from "../utils/hooks/useLnp";
 import useMapContext from "../utils/hooks/useMapContext";
 
-import type { VectorTileSource } from "maplibre-gl";
 import type { RealtimeLine } from "mobility-toolbox-js/types";
 import type { Feature } from "ol";
 import type { PreactDOMAttributes } from "preact";
 
-let cacheLineInfosById = null;
-let cacheStopInfosById = null;
-
-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;
-}
-
-interface StopInfo {
-  external_id: string;
-  importance: number;
-  long_name: string;
-  short_name: string;
-  visibility_level: number;
-}
+import type { LineInfo } from "../utils/hooks/useLnp";
 
 const RUNS_PROP = "runs";
 
@@ -46,9 +21,11 @@ function LinesNetworkPlanDetails({
   features,
   ...props
 }: { className?: string; features: Feature[] } & PreactDOMAttributes) {
-  const { baseLayer } = useMapContext();
-  const [lineInfos, setLineInfos] = useState<LineInfo[]>(null);
-  const [stopInfos, setStopInfos] = useState<StopInfo[]>(null);
+  const { linesIds } = useMapContext();
+  const lineInfos = useLnpLinesInfos();
+  const stopInfos = useLnpStopsInfos();
+  const layerConfig = useLayerConfig(LAYERS_NAMES.linesnetworkplan);
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
 
@@ -58,45 +35,27 @@ function LinesNetworkPlanDetails({
     );
   }, []);
 
-  useEffect(() => {
-    const source = baseLayer?.mapLibreMap?.getSource(LNP_SOURCE_ID);
-    const abortController = new AbortController();
-    const fetchInfos = async (url) => {
-      if (!cacheLineInfosById) {
-        const response = await fetch(url, { signal: abortController.signal });
-        const data = await response.json();
-        cacheLineInfosById = data[LNP_MD_LINES];
-        cacheStopInfosById = data[LNP_MD_STOPS];
-        if (!cacheLineInfosById) {
-          // eslint-disable-next-line no-console
-          console.warn("No lines informations found from ", url);
-        }
-        if (!cacheStopInfosById) {
-          // eslint-disable-next-line no-console
-          console.warn("No stops informations found from ", url);
-        }
+  const getLink = useCallback(
+    (id: string) => {
+      const href = layerConfig?.link?.href;
+      if (href) {
+        return href.replace(`{{id}}`, id);
       }
-      setLineInfos(cacheLineInfosById);
-      setStopInfos(cacheStopInfosById);
-    };
-    const url = (source as VectorTileSource)?.url;
-    if (url) {
-      void fetchInfos(url);
-    }
-    return () => {
-      abortController?.abort();
-    };
-  }, [baseLayer?.mapLibreMap]);
+      return null;
+    },
+    [layerConfig],
+  );
 
   const lineInfosByOperator: Record<string, LineInfo[]> = useMemo(() => {
     const byOperators = {};
 
     [
-      ...new Set(
-        features.map((f) => {
+      ...new Set([
+        ...(linesIds || []),
+        ...features.map((f) => {
           return f.get(LNP_LINE_ID_PROP);
         }),
-      ),
+      ]),
     ]
       .filter((id) => {
         return !!id && !!lineInfos?.[id];
@@ -110,7 +69,7 @@ function LinesNetworkPlanDetails({
         lineInfos[id].id = id;
 
         const runs = features
-          .filter((f) => {
+          ?.filter((f) => {
             return f.get(LNP_LINE_ID_PROP) === id;
           })
           .reduce((acc, featuree) => {
@@ -123,7 +82,7 @@ function LinesNetworkPlanDetails({
       });
 
     return byOperators;
-  }, [features, lineInfos]);
+  }, [features, lineInfos, linesIds]);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const stopInfoIdsByLineId: Record<string, string[]> = useMemo(() => {
@@ -143,7 +102,7 @@ function LinesNetworkPlanDetails({
     return byLineId;
   }, [features]);
 
-  if (!features?.length) {
+  if (!features?.length && !linesIds?.length) {
     return null;
   }
 
@@ -231,7 +190,17 @@ function LinesNetworkPlanDetails({
                             // }}
                           >
                             <div>
-                              <RouteIcon line={line}></RouteIcon>
+                              {getLink(lineInfo.id) ? (
+                                <a
+                                  href={getLink(lineInfo.id)}
+                                  rel="noreferrer"
+                                  target="_blank"
+                                >
+                                  <RouteIcon line={line}></RouteIcon>
+                                </a>
+                              ) : (
+                                <RouteIcon line={line}></RouteIcon>
+                              )}
                             </div>
                             {!!longName && (
                               <div className={"flex-1 text-left"}>

package/src/LinesNetworkPlanLayerHighlight/LinesNetworkPlanLayerHighlight.tsx

@@ -15,7 +15,6 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
   const {
     baseLayer,
     featuresInfos,
-    lines,
     linesIds,
     linesNetworkPlanLayer,
     map,
@@ -58,6 +57,11 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
         return featuresInfo.layer === linesNetworkPlanLayer;
       })?.features || [];
 
+    if (!features.length) {
+      setLinesIds(null);
+      return;
+    }
+
     const ids = [
       ...new Set(
         (features || []).map((f) => {
@@ -65,7 +69,11 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
         }),
       ),
     ];
-    setLinesIds(ids);
+    if (!ids.length) {
+      setLinesIds(null);
+      return;
+    }
+    setLinesIds(ids?.length ? ids : null);
   }, [featuresInfos, layer, linesNetworkPlanLayer, setLinesIds]);
 
   useEffect(() => {
@@ -81,7 +89,7 @@ function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
       // Reset the filter
       highlightLinesNetworkPlan(undefined, baseLayer);
     };
-  }, [baseLayer, baseLayer?.loaded, layer, lines, linesIds]);
+  }, [baseLayer, baseLayer?.loaded, layer, linesIds]);
 
   return null;
 }

package/src/MobilityMap/MobilityMap.tsx

@@ -102,7 +102,7 @@ function MobilityMap(props: MobilityMapProps) {
   const [previewNotifications, setPreviewNotifications] =
     useState<SituationType[]>();
 
-  const { lang, layers, lines, permalinktemplate } = props;
+  const { lang, layers, permalinktemplate } = props;
 
   // Apply initial visibility of layers
   useInitialLayersVisiblity(map, layers, permalinktemplate);
@@ -239,10 +239,6 @@ function MobilityMap(props: MobilityMapProps) {
     i18n.locale(lang);
   }, [lang]);
 
-  useEffect(() => {
-    setLinesIds(lines?.split(","));
-  }, [lines]);
-
   return (
     <I18nContext.Provider value={i18n}>
       {/* There is a bug in tailwindcss@4 , variables are not imported in the shadow dom

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -35,8 +35,8 @@ export type MobilityMapAttributeName =
   | "layers"
   | "layersconfig"
   | "layertree"
-  | "lines"
   | "lnp"
+  | "lnpid"
   | "mainlink"
   | "mainlinktitle"
   | "mapset"
@@ -152,6 +152,10 @@ where:
       <li><i>text</i> is the text display as a link</li>
       <li><i>show</i> show/hide the link in the details view</li>
     </ul>
+  <li><i>featurelink</i> defined a external link used when you click on single feature in detail view</li>
+    <ul style="list-style-type: disc; padding-left: 40px;">
+      <li><i>href</i> is the target of the link. The <i>href</i> can be template, for example for the meldungen layer you can use {{id}} to insert the id of the notification in the url.</li>
+    </ul>
   <li><i>title</i> is the title of the layer used in the details view header and in the layer tree, if not defined the layer name will be used.</li>
 </ul>`,
     public: true,
@@ -162,16 +166,16 @@ where:
     public: true,
     type: "boolean",
   },
-  lines: {
-    description: `A comma separated list of line ids to highlight on the linesnetworkplan layer. The line ids are the original_line_id property of the lines in the network plan.<br/>Ex: S1,RE10,RE1.`,
-    public: false,
-  },
   lnp: {
     defaultValue: "true",
     description: `Add the linesnetworkplans layer to the map. This layer will display lines network plans on the map.`,
     public: false,
     type: "boolean",
   },
+  lnpid: {
+    description: `An id or a short/long name of a line to highlight. <br/>Ex: S1`,
+    public: false,
+  },
   mainlink: {
     description:
       "A link displayed on bottom left of the map.  The link can be a template, for example  you can use {{x}} {{y}} {{z}} to insert the current position of the map in the url.<br/>Ex: http://mywebsite/mypage#map/{{x}}/{{y}}/{{z}}.",

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -28,11 +28,6 @@ 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,
@@ -43,7 +38,7 @@ function MobilityNotifications({
         includeGeoms: false,
         includeLines: true,
         includeStops: true,
-        publicAt: now.toISOString(),
+        publicNow: true, // improve caching efficiency compare to use of publicAt
       })
       .then((data) => {
         if (data?.paginatedSituations?.results) {

package/src/NotificationsLayer/NotificationsLayer.tsx

@@ -28,9 +28,9 @@ function NotificationsLayer(props?: Partial<MocoLayerOptions>) {
       apiParameters: {
         contentMedium: true,
       },
-      date: notificationat ? new Date(notificationat) : undefined,
       maplibreLayer: baseLayer,
       name: LAYER_NAME_NOTIFICATIONS,
+      publicAt: notificationat ? new Date(notificationat) : undefined,
       situations: previewNotifications,
       tenant: notificationtenant,
       url: notificationurl,

package/src/OverlayContent/OverlayContent.tsx

@@ -30,7 +30,6 @@ function OverlayContent({
     isLayerTreeOpen,
     isSearchOpen,
     isShareMenuOpen,
-    selectedFeature,
     setIsExportMenuOpen,
     setIsLayerTreeOpen,
     setIsShareMenuOpen,
@@ -39,7 +38,7 @@ function OverlayContent({
 
   return (
     <>
-      {hasDetails && selectedFeature && <OverlayDetails />}
+      {hasDetails && <OverlayDetails />}
       {hasPrint && isExportMenuOpen && (
         <>
           <OverlayHeader

package/src/OverlayDetails/OverlayDetails.tsx

@@ -13,10 +13,15 @@ import useMapContext from "../utils/hooks/useMapContext";
 function OverlayDetails() {
   const {
     featuresInfos,
+    linesIds,
+    linesNetworkPlanLayer,
+    notificationId,
+    notificationsLayer,
     realtimeLayer,
     selectedFeature,
     setFeaturesInfos,
     setLinesIds,
+    setNotificationId,
     setStationId,
     setTrainId,
     stationId,
@@ -40,9 +45,24 @@ function OverlayDetails() {
     if (stationId) {
       return stationsLayer;
     }
+    if (linesIds) {
+      return linesNetworkPlanLayer;
+    }
+    if (notificationId) {
+      return notificationsLayer;
+    }
     return undefined;
-  }, [featuresInfo?.layer, realtimeLayer, stationId, stationsLayer, trainId]);
-
+  }, [
+    featuresInfo?.layer,
+    trainId,
+    stationId,
+    linesIds,
+    notificationId,
+    realtimeLayer,
+    stationsLayer,
+    linesNetworkPlanLayer,
+    notificationsLayer,
+  ]);
   return (
     <>
       <OverlayDetailsHeader
@@ -53,6 +73,7 @@ function OverlayDetails() {
           setTrainId(null);
           setStationId(null);
           setLinesIds(null);
+          setNotificationId(null);
         }}
       />
       <FeatureDetails

package/src/OverlayDetailsHeader/OverlayDetailsHeader.tsx

@@ -22,6 +22,9 @@ function OverlayDetailsHeader({
 }: OverlayDetailsHeaderProps) {
   const { t } = useI18n();
   const layerConfig = useLayerConfig(layer?.get("name"));
+  if (!layer) {
+    return null;
+  }
   return (
     <OverlayHeader
       title={t(layerConfig?.title || "") || (layerConfig?.title ?? "")}

package/src/OverlayHeader/OverlayHeader.tsx

@@ -24,7 +24,7 @@ function OverlayHeader({
       {...props}
       className={twMerge(
         `flex flex-row items-center justify-between gap-2 border-b p-2 pl-4`,
-        className,
+        className as string,
       )}
     >
       {/* We set text-base so the clamp works on overlay container, not main */}

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -9,9 +9,10 @@ import type { FeatureDetailsProps } from "../FeatureDetails/FeatureDetails";
 
 const getIsSharedMobility = (selectedFeature): boolean => {
   if (
-    selectedFeature.get("station_id") ||
-    selectedFeature.get("vehicle_id") ||
-    selectedFeature.get("cluster_id")
+    !!selectedFeature &&
+    (selectedFeature.get("station_id") ||
+      selectedFeature.get("vehicle_id") ||
+      selectedFeature.get("cluster_id"))
   ) {
     return true;
   }
@@ -23,7 +24,7 @@ function RvfFeatureDetails({
   layer,
 }: FeatureDetailsProps) {
   const isSharedMobility = getIsSharedMobility(feature);
-  const isSellingPoint = !!feature.get("tickets");
+  const isSellingPoint = !!feature?.get("tickets");
 
   return (
     <>

package/src/RvfFeatureDetails/RvfSellingPointDetails/RvfSellingPointDetails.tsx

@@ -24,7 +24,7 @@ function RvfSellingPointDetails({ feature }: { feature: Feature }) {
     zip_code: zip,
   } = feature.getProperties();
   return (
-    <ShadowOverflow className="p-4 text-base">
+    <ShadowOverflow className="px-4 text-base">
       <div className="flex flex-col gap-4">
         <div className="flex gap-2">
           <span className={"min-w-[26px]"}>