@geops/rvf-mobility-web-component 0.1.128 → 0.1.129

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -1,299 +0,0 @@
-import {
-  getGraphByZoom,
-  RealtimeLayer as MtbRealtimeLayer,
-} from "mobility-toolbox-js/ol";
-import GeoJSON from "ol/format/GeoJSON";
-import { unByKey } from "ol/Observable";
-import { Vector } from "ol/source";
-import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import centerOnVehicle from "../utils/centerOnVehicle";
-import { LAYER_NAME_REALTIME } from "../utils/constants";
-import getDelayColorForVehicle from "../utils/getDelayColorForVehicle";
-import getDelayTextForVehicle from "../utils/getDelayTextForVehicle";
-import getMainColorForVehicle from "../utils/getMainColorForVehicle";
-import getTextColorForVehicle from "../utils/getTextColorForVehicle";
-import getTextFontForVehicle from "../utils/getTextFontForVehicle";
-import getTextForVehicle from "../utils/getTextForVehicle";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { RealtimeLayerOptions } from "mobility-toolbox-js/ol/layers/RealtimeLayer";
-import type {
-  RealtimeMot,
-  RealtimeTrainId,
-  StyleMetadataGraphs,
-} from "mobility-toolbox-js/types";
-
-const TRACKING_ZOOM = 16;
-
-const useGraphs = true; //;window.location?.href?.includes("graphs=true");
-const geojson = new GeoJSON();
-
-function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
-  const {
-    apikey,
-    baseLayer,
-    isFollowing,
-    isTracking,
-    linesNetworkPlanLayer,
-    map,
-    mots,
-    realtimebboxparameters,
-    realtimeurl,
-    setIsFollowing,
-    setIsTracking,
-    setRealtimeLayer,
-    tenant,
-    trainId,
-  } = useMapContext();
-
-  const [graphByZoom, setGraphByZoom] = useState<(null | string)[]>([]);
-  const [isLnpVisible, setIsLnpVisible] = useState(false);
-
-  const layer = useMemo(() => {
-    if (!apikey || !realtimeurl) {
-      return null;
-    }
-    const lay = new MtbRealtimeLayer({
-      apiKey: apikey,
-      bboxParameters: realtimebboxparameters
-        ?.split(" ")
-        .reduce((acc, string) => {
-          if (!string) {
-            return acc;
-          }
-          const [key, value] = string.split("=");
-          acc[key] = value;
-          return acc;
-        }, {}),
-      getMotsByZoom: mots
-        ? () => {
-            return mots.split(",") as RealtimeMot[];
-          }
-        : undefined,
-      isQueryable: true,
-      minZoom: 5, // It depends fo the radius mapping in realtimeStyleUtils
-      name: LAYER_NAME_REALTIME,
-      tenant,
-      url: realtimeurl,
-      zIndex: 1,
-      ...props,
-      styleOptions: {
-        getColor: getMainColorForVehicle,
-        getDelayColor: getDelayColorForVehicle,
-        getDelayText: getDelayTextForVehicle,
-        getText: getTextForVehicle,
-        getTextColor: getTextColorForVehicle,
-        getTextFont: getTextFontForVehicle,
-        ...(props?.styleOptions || {}),
-      },
-    });
-
-    return lay;
-  }, [apikey, realtimeurl, realtimebboxparameters, mots, tenant, props]);
-
-  useEffect(() => {
-    let key;
-    if (!map || !layer) {
-      return;
-    }
-    if (map.getView()?.getCenter()) {
-      map.addLayer(layer);
-    } else {
-      key = map.once("moveend", () => {
-        map.addLayer(layer);
-      });
-    }
-
-    setRealtimeLayer(layer);
-
-    return () => {
-      if (key) {
-        unByKey(key);
-      }
-      map.removeLayer(layer);
-      setRealtimeLayer(null);
-    };
-  }, [map, setRealtimeLayer, layer]);
-
-  // Behavior when vehicle is selected or not.
-  useEffect(() => {
-    if (!trainId) {
-      setIsFollowing(false);
-    }
-  }, [trainId, setIsFollowing]);
-
-  // Behavior when user tracking is activated or not.
-  useEffect(() => {
-    const olKeys = [];
-    if (isTracking) {
-      setIsFollowing(false);
-    }
-    return () => {
-      unByKey(olKeys);
-    };
-  }, [isTracking, setIsFollowing]);
-
-  // Deactive auto zooming when the user pans the map
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    let onMovestartKey = null;
-    onMovestartKey = map.getView().on("change:center", (evt) => {
-      if (evt.target.getInteracting()) {
-        setIsFollowing(false);
-        setIsTracking(false);
-      }
-    });
-    return () => {
-      unByKey(onMovestartKey);
-    };
-  }, [map, setIsFollowing, setIsTracking]);
-
-  useEffect(() => {
-    let interval = null;
-
-    if (layer) {
-      layer.engine.useThrottle = !isFollowing;
-      // We deactivate the bbox on moveend when following to have smoother experience.
-      // The correct bbox will be set later by getting the full trajectory.
-      layer.engine.isUpdateBboxOnMoveEnd = !isFollowing;
-      // layer.useRequestAnimationFrame = isFollowing;
-      layer.allowRenderWhenAnimating = !!isFollowing;
-    }
-    if (!isFollowing || !trainId || !map || !layer) {
-      return;
-    }
-
-    setIsTracking(false);
-
-    const followVehicle = async (id: RealtimeTrainId) => {
-      let vehicle = id && layer?.trajectories?.[id];
-
-      if (!vehicle) {
-        const message = await layer.api.getTrajectory(trainId, layer.mode);
-        vehicle = message?.content;
-
-        // We get the fulltrajectory to set the api bbox correctly.
-        const fullMessage = await layer.api.getFullTrajectory(
-          trainId,
-          layer.mode,
-          undefined,
-        );
-        if (fullMessage?.content) {
-          try {
-            const features = geojson.readFeatures(fullMessage.content);
-            const extent = new Vector({ features }).getExtent();
-            layer.api.bbox = [...extent, ...layer.api.bbox.slice(4)];
-          } catch (err) {
-            // eslint-disable-next-line no-console
-            console.warn(
-              "Error parsing full trajectory feature:",
-              err,
-              fullMessage?.content,
-            );
-          }
-        }
-      }
-
-      const success = await centerOnVehicle(vehicle, map, TRACKING_ZOOM);
-
-      // Once the map is zoomed on the vehicle we follow him, only recenter , no zoom changes.
-      if (success === true) {
-        interval = setInterval(() => {
-          void centerOnVehicle(
-            layer?.trajectories?.[trainId],
-            map,
-            TRACKING_ZOOM,
-          );
-        }, 1000);
-      }
-    };
-    void followVehicle(trainId);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [isFollowing, map, layer, trainId, setIsTracking]);
-
-  // DO NOT CENTER ON THE TRAIN
-  // useEffect(() => {
-  //   if (trainId) {
-  //     // No animation, it's nicer for the user.
-  //     const center = layer?.trajectories?.[trainId]?.properties?.coordinate;
-  //     if (center) {
-  //       map.getView().setCenter(center);
-  //     }
-  //   }
-  // }, [map, trainId, layer]);
-
-  // Subscribe to the full trajectory of the selected vehicle.
-  useEffect(() => {
-    if (!trainId || !layer?.api) {
-      return;
-    }
-    layer.selectedVehicleId = trainId;
-    layer.highlightTrajectory(trainId).catch((err) => {
-      // eslint-disable-next-line no-console
-      console.error("Error highlighting trajectory:", err);
-    });
-
-    return () => {
-      if (layer?.selectedVehicleId) {
-        layer.api?.unsubscribeFullTrajectory(layer.selectedVehicleId);
-        layer.selectedVehicleId = null;
-        layer.vectorLayer.getSource().clear();
-      }
-    };
-  }, [trainId, layer, layer?.api]);
-
-  // Get graphs value
-  useEffect(() => {
-    if (!map || !baseLayer) {
-      return;
-    }
-    const key = map.once("rendercomplete", () => {
-      const metadata = baseLayer.mapLibreMap?.getStyle()?.metadata as {
-        graphs: StyleMetadataGraphs;
-      };
-      const tmpGraphByZoom = [];
-      for (let i = 0; i < 26; i++) {
-        tmpGraphByZoom.push(getGraphByZoom(i, metadata?.graphs));
-      }
-      setGraphByZoom(tmpGraphByZoom);
-    });
-    return () => {
-      unByKey(key);
-    };
-  }, [map, baseLayer, layer]);
-
-  // Watch lnp visibility
-  useEffect(() => {
-    const key = linesNetworkPlanLayer?.on("change:visible", () => {
-      const visible = linesNetworkPlanLayer.getVisible();
-      setIsLnpVisible(visible);
-    });
-    setIsLnpVisible(linesNetworkPlanLayer?.getVisible() || false);
-    return () => {
-      unByKey(key);
-    };
-  }, [linesNetworkPlanLayer]);
-
-  // Apply graphByZoom only when lnp layer is there and visible
-  useEffect(() => {
-    if (!layer || !graphByZoom?.length) {
-      return;
-    }
-    if (useGraphs && isLnpVisible) {
-      layer.engine.graphByZoom = graphByZoom;
-    } else {
-      layer.engine.graphByZoom = [];
-    }
-    layer.engine.setBbox();
-  }, [isLnpVisible, layer, graphByZoom, linesNetworkPlanLayer]);
-
-  return null;
-}
-
-export default memo(RealtimeLayer);

package/src/RealtimeLayer/index.tsx

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

package/src/RouteDestination/RouteDestination.test.tsx

@@ -1,13 +0,0 @@
-import { render } from "@testing-library/preact";
-
-import RouteDestination from "./RouteDestination";
-
-describe("RouteDestination", () => {
-  test("should display destination", () => {
-    const { container } = render(
-      // @ts-expect-error bad type definition
-      <RouteDestination stopSequence={{ destination: "foo" }} />,
-    );
-    expect(container.textContent).toMatch("foo");
-  });
-});

package/src/RouteDestination/RouteDestination.tsx

@@ -1,15 +0,0 @@
-import { memo } from "preact/compat";
-
-import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteDestinationProps = {
-  stopSequence?: RealtimeStopSequence;
-} & JSX.HTMLAttributes<HTMLSpanElement> &
-  PreactDOMAttributes;
-
-function RouteDestination({ stopSequence, ...props }: RouteDestinationProps) {
-  const { destination } = stopSequence || {};
-  return <span {...props}>{destination}</span>;
-}
-export default memo(RouteDestination);

package/src/RouteDestination/index.tsx

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

package/src/RouteFollowingButton/RouteFollowingButton.tsx

@@ -1,30 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Tracking from "../icons/Tracking";
-import IconButton from "../ui/IconButton";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { IconButtonProps } from "../ui/IconButton/IconButton";
-
-function RouteFollowingButton({
-  children,
-  className,
-  ...props
-}: IconButtonProps) {
-  const { isFollowing, setIsFollowing } = useMapContext();
-  return (
-    <IconButton
-      className={twMerge(`${isFollowing ? "animate-pulse" : ""}`, className)}
-      onClick={() => {
-        setIsFollowing(!isFollowing);
-      }}
-      selected={isFollowing}
-      {...props}
-    >
-      {children || <Tracking />}
-    </IconButton>
-  );
-}
-
-export default memo(RouteFollowingButton);

package/src/RouteFollowingButton/index.tsx

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

package/src/RouteIcon/RouteIcon.tsx

@@ -1,99 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-import NoRealtime from "../icons/NoRealtime";
-import getMainColorForVehicle from "../utils/getMainColorForVehicle";
-import getTextColorForVehicle from "../utils/getTextColorForVehicle";
-import getTextFontForVehicle from "../utils/getTextFontForVehicle";
-import getTextForVehicle from "../utils/getTextForVehicle";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type {
-  RealtimeDeparture,
-  RealtimeLine,
-  RealtimeStopSequence,
-  RealtimeTrajectory,
-} from "mobility-toolbox-js/types";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-import type { LnpLineInfo } from "../utils/hooks/useLnp";
-
-export type RouteIconProps = {
-  className?: string;
-  departure?: RealtimeDeparture;
-  displayNoRealtimeIcon?: boolean;
-  line?: RealtimeLine;
-  lineInfo?: LnpLineInfo;
-  stopSequence?: RealtimeStopSequence;
-  trajectory?: RealtimeTrajectory;
-} & HTMLAttributes<HTMLSpanElement> &
-  PreactDOMAttributes;
-const fontSizesByNbLetters = [16, 16, 16, 14, 12];
-
-function RouteIcon({
-  children,
-  className,
-  departure,
-  displayNoRealtimeIcon = false,
-  line,
-  lineInfo,
-  stopSequence,
-  trajectory,
-  ...props
-}: RouteIconProps) {
-  const { realtimeLayer } = useMapContext();
-  const lineToUse =
-    line ||
-    lineInfo ||
-    departure?.line ||
-    stopSequence?.line ||
-    trajectory?.properties?.line;
-  const trainId = stopSequence?.id || departure?.train_id;
-  const trajectoryToUse = trajectory || realtimeLayer?.trajectories[trainId];
-  const objectToUse =
-    line || lineInfo || departure || stopSequence || trajectory;
-
-  const backgroundColor = getMainColorForVehicle(objectToUse);
-  const color = getTextColorForVehicle(objectToUse);
-  const text = getTextForVehicle(objectToUse);
-  const fontSize = fontSizesByNbLetters[text.length] || 12;
-  const font = getTextFontForVehicle(objectToUse, null, fontSize, text);
-
-  // RealtimeIcon only for stopsequence for now
-  const hasRealtime =
-    stopSequence?.has_realtime_journey ||
-    departure?.has_realtime_journey ||
-    trajectoryToUse?.properties?.has_realtime_journey ||
-    (stopSequence?.stations?.[0]?.state &&
-      stopSequence?.stations?.[0]?.state !== "TIME_BASED");
-  const showNoRealtimeIcon = !!stopSequence || !!departure || !!trajectoryToUse;
-  const isCancelled = stopSequence?.stations[0]?.state === "JOURNEY_CANCELLED";
-
-  let borderColor = lineToUse?.stroke || "black";
-  if (borderColor === backgroundColor) {
-    borderColor = "black";
-  }
-
-  return (
-    <span
-      className={twMerge(
-        "relative flex h-[40px] min-w-[40px] items-center justify-center rounded-full border-2 px-1",
-        className,
-      )}
-      style={{
-        backgroundColor,
-        borderColor,
-        color,
-        font,
-      }}
-      {...props}
-    >
-      {children || text}
-
-      {displayNoRealtimeIcon &&
-        showNoRealtimeIcon &&
-        !isCancelled &&
-        !hasRealtime && <NoRealtime className={"absolute -top-3 -right-3"} />}
-    </span>
-  );
-}
-export default RouteIcon;

package/src/RouteIcon/index.tsx

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

package/src/RouteIdentifier/RouteIdentifer.tsx

@@ -1,36 +0,0 @@
-import { memo } from "preact/compat";
-
-import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteIdentifierProps = {
-  stopSequence?: RealtimeStopSequence;
-} & JSX.HTMLAttributes<HTMLSpanElement> &
-  PreactDOMAttributes;
-
-function RouteIdentifier({ stopSequence, ...props }: RouteIdentifierProps) {
-  const { longName, routeIdentifier } = stopSequence || {};
-  let text = longName;
-  if (routeIdentifier) {
-    // first part of the id, without leading zeros.
-    let id = routeIdentifier;
-
-    if (routeIdentifier.includes(".")) {
-      [id] = routeIdentifier.split(".");
-    } else if (routeIdentifier.includes("_")) {
-      [id] = routeIdentifier.split("_");
-    } else if (routeIdentifier.includes(":")) {
-      [id] = routeIdentifier.split(":");
-    }
-
-    if (/^\d*$/.test(id)) {
-      id = `${parseInt(id, 10)}`;
-    }
-
-    if (!longName.includes(id)) {
-      text = `${longName} (${id})`;
-    }
-  }
-  return <span {...props}>{text}</span>;
-}
-export default memo(RouteIdentifier);

package/src/RouteIdentifier/index.tsx

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

package/src/RouteInfos/RouteInfos.tsx

@@ -1,26 +0,0 @@
-import { memo } from "preact/compat";
-
-import RouteDestination from "../RouteDestination";
-import RouteIdentifier from "../RouteIdentifier";
-
-import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
-import type { JSX, PreactDOMAttributes } from "preact";
-
-export type RouteInfosProps = {
-  stopSequence?: RealtimeStopSequence;
-} & JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RouteInfos({ stopSequence, ...props }: RouteInfosProps) {
-  return (
-    <div {...props}>
-      <RouteDestination
-        className="text-base font-bold"
-        stopSequence={stopSequence}
-      />
-      <RouteIdentifier className="text-sm" stopSequence={stopSequence} />
-    </div>
-  );
-}
-
-export default memo(RouteInfos);

package/src/RouteInfos/index.tsx

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

package/src/RouteSchedule/RouteSchedule.tsx

@@ -1,59 +0,0 @@
-import { memo } from "preact/compat";
-import { useRef } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import RouteScheduleFooter from "../RouteScheduleFooter";
-import RouteScheduleHeader from "../RouteScheduleHeader";
-import RouteStop from "../RouteStop";
-import ShadowOverflow from "../ShadowOverflow";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRealtimeStopSequences from "../utils/hooks/useRealtimeStopSequences";
-import useScrollTo from "../utils/hooks/useScrollTo";
-
-import type { RealtimeStop } from "mobility-toolbox-js/types";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type RouteScheduleProps = {
-  className?: string;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RouteSchedule({ className }: RouteScheduleProps) {
-  const { trainId } = useMapContext();
-  const stopSequences = useRealtimeStopSequences(trainId);
-  const ref = useRef<HTMLDivElement>();
-
-  useScrollTo(ref, "[data-station-passed=false]", [stopSequences]);
-
-  if (!stopSequences?.[0]) {
-    return null;
-  }
-  const stopSequence = stopSequences[0];
-  return (
-    <>
-      <RouteScheduleHeader stopSequence={stopSequence} />
-      <ShadowOverflow ref={ref}>
-        <div className={twMerge("text-base", className)}>
-          {stopSequence.stations.map((stop: RealtimeStop, index: number) => {
-            const { arrivalTime, departureTime, stationId, stationName } = stop;
-            return (
-              <RouteStop
-                // Train line can go in circle so begin and end have the same id,
-                index={index}
-                // using the time in the key should fix the issue.
-                key={
-                  (`${stationId}` || stationName) + arrivalTime + departureTime
-                }
-                stop={stop}
-                stopSequence={stopSequence}
-              />
-            );
-          })}
-          <RouteScheduleFooter stopSequence={stopSequence} />
-        </div>
-      </ShadowOverflow>
-    </>
-  );
-}
-
-export default memo(RouteSchedule);

package/src/RouteSchedule/index.tsx

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

package/src/RouteScheduleFooter/RouteScheduleFooter.tsx

@@ -1,46 +0,0 @@
-import { memo } from "preact/compat";
-
-import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
-
-const defaultRenderLink = (text: string, url: string) => {
-  return url ? (
-    <a
-      className="whitespace-normal underline"
-      href={url}
-      rel="noreferrer"
-      target="_blank"
-    >
-      {text}
-    </a>
-  ) : (
-    text
-  );
-};
-
-function RouteScheduleFooter({
-  stopSequence,
-}: {
-  stopSequence: RealtimeStopSequence;
-}) {
-  if (!stopSequence.operator && !stopSequence.publisher) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className="m-4 mb-0 flex flex-wrap text-[10px] text-gray-500">
-        {stopSequence.operator &&
-          defaultRenderLink(stopSequence.operator, stopSequence.operatorUrl)}
-        {stopSequence.operator && stopSequence.publisher && <span> - </span>}
-        {stopSequence.publisher &&
-          defaultRenderLink(stopSequence.publisher, stopSequence.publisherUrl)}
-        {stopSequence.license && <span>&nbsp;(</span>}
-        {stopSequence.license &&
-          defaultRenderLink(stopSequence.license, stopSequence.licenseUrl)}
-        {stopSequence.license && ")"}
-      </div>
-    </>
-  );
-}
-
-export default memo(RouteScheduleFooter);

package/src/RouteScheduleFooter/index.tsx

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

package/src/RouteScheduleHeader/RouteScheduleHeader.tsx

@@ -1,23 +0,0 @@
-import { memo } from "preact/compat";
-
-import RouteFollowingButton from "../RouteFollowingButton";
-import RouteIcon from "../RouteIcon";
-import RouteInfos from "../RouteInfos";
-
-import type { RealtimeStopSequence } from "mobility-toolbox-js/types";
-
-function RouteScheduleHeader({
-  stopSequence,
-}: {
-  stopSequence: RealtimeStopSequence;
-}) {
-  return (
-    <div className="flex items-center gap-x-4 bg-slate-100 p-4 py-2">
-      <RouteIcon stopSequence={stopSequence} />
-      <RouteInfos className="flex grow flex-col" stopSequence={stopSequence} />
-      <RouteFollowingButton />
-    </div>
-  );
-}
-
-export default memo(RouteScheduleHeader);