@geops/rvf-mobility-web-component 0.1.83 → 0.1.84

package/src/SearchTrainsResults/SearchTrainsResults.tsx

@@ -0,0 +1,109 @@
+import { cloneElement, toChildArray } from "preact";
+import { memo } from "preact/compat";
+import { useCallback, useContext, useMemo } from "preact/hooks";
+
+import { SearchContext } from "../Search/SearchBase";
+import SearchResult from "../SearchResult";
+import SearchResults from "../SearchResults";
+import SearchResultsHeader from "../SearchResultsHeader";
+import useI18n from "../utils/hooks/useI18n";
+import useSearchTrains from "../utils/hooks/useSearchTrains";
+
+import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
+import type { ReactElement } from "preact/compat";
+
+import type {
+  SearchResultsChildProps,
+  SearchResultsProps,
+} from "../SearchResults/SearchResults";
+
+function SearchTrainsResults({
+  children,
+  filter,
+  resultClassName,
+  resultsClassName,
+  resultsContainerClassName,
+  sort,
+}: SearchResultsProps<RealtimeRouteIdentifierMatch>) {
+  const { open, query, setOpen, setSelectedQuery } = useContext(SearchContext);
+  const searchResponse = useSearchTrains(query);
+
+  const { t } = useI18n();
+
+  const onSelectResult = useCallback(
+    (item: RealtimeRouteIdentifierMatch) => {
+      setSelectedQuery(item.route_identifier);
+      setOpen(false);
+    },
+    [setOpen, setSelectedQuery],
+  );
+
+  const results = useMemo(() => {
+    let rs = [...(searchResponse?.results || [])];
+
+    if (filter) {
+      rs = rs.filter(filter);
+    }
+
+    if (sort) {
+      rs = rs.sort(sort);
+    }
+    return rs;
+  }, [searchResponse, filter, sort]);
+
+  const searchResponseFiltered = useMemo(() => {
+    return {
+      ...searchResponse,
+      results,
+    };
+  }, [results, searchResponse]);
+
+  const showResults = useMemo(() => {
+    return open && !!results?.length;
+  }, [open, results]);
+
+  if (!showResults) {
+    return null;
+  }
+
+  return (
+    <>
+      <SearchResultsHeader>{t("search_trains_results")}</SearchResultsHeader>
+      <SearchResults
+        className={resultsContainerClassName}
+        resultsClassName={resultsClassName}
+        searchResponse={searchResponseFiltered}
+      >
+        {results.map((item: RealtimeRouteIdentifierMatch) => {
+          return (
+            <SearchResult
+              className={resultClassName}
+              key={item.trains[0].train_id}
+            >
+              {toChildArray(children).map(
+                (
+                  child: ReactElement<
+                    SearchResultsChildProps<RealtimeRouteIdentifierMatch>
+                  >,
+                ) => {
+                  const onSelectItem = (
+                    itemm: RealtimeRouteIdentifierMatch,
+                    evt: Event,
+                  ) => {
+                    onSelectResult(itemm);
+                    child.props?.onSelectItem?.(itemm, evt);
+                  };
+                  return cloneElement(child, {
+                    item: item,
+                    onSelectItem,
+                  });
+                },
+              )}
+            </SearchResult>
+          );
+        })}
+      </SearchResults>
+    </>
+  );
+}
+export default memo(SearchTrainsResults);

package/src/SearchTrainsResults/index.tsx

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

package/src/SingleClickListener/SingleClickListener.tsx

@@ -25,6 +25,10 @@ function SingleClickListener({
     queryablelayers,
     setFeaturesInfos,
     setFeaturesInfosHovered,
+    setLinesIds,
+    setNotificationId,
+    setStationId,
+    setTrainId,
     stationsLayer,
     tenant,
   } = useMapContext();
@@ -50,7 +54,19 @@ function SingleClickListener({
         const stationsFeatures = featuresInfoStations?.features || [];
 
         const [stationFeature] = stationsFeatures.filter((feat) => {
-          return feat.get("tralis_network")?.includes(tenant);
+          // TODO: think how to do better. LNP stations should have a tralis_network property?
+          // travic stations has a tralis_network property
+          if (feat.get("tralis_network")) {
+            return feat.get("tralis_network").includes(tenant);
+          }
+
+          // We move the external_id to uid to be consistent across all stations (lnp and others)
+          if (!feat.get("uid") && feat.get("external_id")) {
+            feat.set("uid", feat.get("external_id"));
+          }
+
+          // LNP stations have no tralis_network property
+          return true;
         });
 
         // Replace the features clicked in the stations layer by the filtered one
@@ -85,8 +101,28 @@ function SingleClickListener({
     async (evt: MapBrowserEvent<PointerEvent>) => {
       const featuresInfos = await getFeaturesInfosAtEvt(evt);
       setFeaturesInfos(featuresInfos);
+      // When user click we close the overlay
+      if (
+        featuresInfos?.flatMap((fi) => {
+          return fi.features;
+        }).length === 0
+      ) {
+        // It means no feature selectable were clicked so we set all ids to null
+        // to close the overlay
+        setTrainId(null);
+        setStationId(null);
+        setNotificationId(null);
+        setLinesIds(null);
+      }
     },
-    [getFeaturesInfosAtEvt, setFeaturesInfos],
+    [
+      getFeaturesInfosAtEvt,
+      setFeaturesInfos,
+      setLinesIds,
+      setNotificationId,
+      setStationId,
+      setTrainId,
+    ],
   );
 
   useEffect(() => {

package/src/Station/Station.tsx

@@ -1,11 +1,12 @@
-import { debounceDeparturesMessages } from "mobility-toolbox-js/ol";
 import { memo } from "preact/compat";
-import { useEffect, useRef, useState } from "preact/hooks";
 import { twMerge } from "tailwind-merge";
 
 import Departure from "../Departure";
+import ShadowOverflow from "../ShadowOverflow";
 import StationHeader from "../StationHeader";
 import useMapContext from "../utils/hooks/useMapContext";
+import useRealtimeDepartures from "../utils/hooks/useRealtimeDepartures";
+import useRealtimeStation from "../utils/hooks/useRealtimeStation";
 
 import type { RealtimeDeparture } from "mobility-toolbox-js/types";
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
@@ -15,34 +16,10 @@ export type StationProps = {
 } & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-function Station(props: StationProps) {
-  const { realtimeLayer, station } = useMapContext();
-  const [departures, setDepartures] = useState<RealtimeDeparture[]>();
-  const ref = useRef();
-  const { className } = props;
-
-  useEffect(() => {
-    if (!station || !realtimeLayer?.api) {
-      return;
-    }
-
-    const onMessage = debounceDeparturesMessages(
-      (newDepartures: RealtimeDeparture[]) => {
-        setDepartures(newDepartures);
-        return null;
-      },
-      false,
-      180,
-    );
-    // @ts-expect-error bad type definition
-    realtimeLayer.api.subscribeDepartures(station?.properties?.uid, onMessage);
-
-    return () => {
-      setDepartures(null);
-      // @ts-expect-error bad type definition
-      realtimeLayer?.api?.unsubscribeDepartures(station?.properties.uid);
-    };
-  }, [station, realtimeLayer?.api]);
+function Station({ className, ...props }: StationProps) {
+  const { stationId } = useMapContext();
+  const station = useRealtimeStation(stationId);
+  const departures = useRealtimeDepartures(stationId);
 
   if (!station) {
     return null;
@@ -50,24 +27,22 @@ function Station(props: StationProps) {
 
   return (
     <>
-      <StationHeader />
-      <div
-        className={twMerge("flex flex-col p-2", className)}
-        ref={ref}
-        {...props}
-      >
-        {(departures || [])
-          // .filter(hideDepartures)
-          .map((departure: RealtimeDeparture, index: number) => {
-            return (
-              <Departure
-                departure={departure}
-                index={index}
-                key={departure.call_id}
-              />
-            );
-          })}
-      </div>
+      <StationHeader station={station} />
+      <ShadowOverflow>
+        <div className={twMerge("flex flex-col p-2", className)} {...props}>
+          {(departures || [])
+            // .filter(hideDepartures)
+            .map((departure: RealtimeDeparture, index: number) => {
+              return (
+                <Departure
+                  departure={departure}
+                  index={index}
+                  key={departure.call_id}
+                />
+              );
+            })}
+        </div>
+      </ShadowOverflow>
     </>
   );
 }

package/src/StationHeader/StationHeader.tsx

@@ -2,10 +2,10 @@ import { memo } from "preact/compat";
 
 import StationName from "../StationName";
 import StationServices from "../StationServices";
-import useMapContext from "../utils/hooks/useMapContext";
 
-function StationHeader() {
-  const { station } = useMapContext();
+import type { RealtimeStation } from "mobility-toolbox-js/types";
+
+function StationHeader({ station }: { station: RealtimeStation }) {
   return (
     <div className="flex items-center gap-x-4 bg-slate-100 p-4">
       <div className="flex grow flex-col">

package/src/StationsLayer/StationsLayer.tsx

@@ -18,11 +18,19 @@ function StationsLayer(props: Partial<MaplibreStyleLayerOptions>) {
       layersFilter: ({ metadata }) => {
         return (
           metadata?.["tralis.variable"] === "station" ||
-          metadata?.["general.filter"] === "stations"
+          metadata?.["general.filter"] === "stations" ||
+          metadata?.["geops.filter"] === "netzplan_stops"
         );
       },
       maplibreLayer: baseLayer,
       name: LAYER_NAME_STATIONS,
+      // queryRenderedLayersFilter: ({ metadata }) => {
+      //   return (
+      //     metadata?.["tralis.variable"] === "station" ||
+      //     metadata?.["general.filter"] === "stations" ||
+      //     metadata?.["geops.filter"] === "netzplan_stops" // we include lnp stations only on click
+      //   );
+      // },
       ...(props || {}),
     });
   }, [baseLayer, props]);

package/src/StopsSearch/StopsSearch.tsx

@@ -24,7 +24,7 @@ import type {
   TargetedKeyboardEvent,
 } from "preact";
 
-export type StopsFeature = StopsResponse["features"][0];
+import type { StopsFeature } from "../utils/hooks/useSearchStops";
 
 export type StopsSearchProps = {
   apikey: string;
@@ -235,7 +235,7 @@ function StopsSearch({
             searchIconContainerClassName,
           )}
         >
-          <Search className="size-4" />
+          <Search />
         </div>
         <div
           className={twMerge(

package/src/ui/InputSearch/InputSearch.tsx

@@ -0,0 +1,105 @@
+import { memo } from "preact/compat";
+import { useRef } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
+
+import Cancel from "../../icons/Cancel";
+import Search from "../../icons/Search";
+import useI18n from "../../utils/hooks/useI18n";
+import IconButton from "../IconButton";
+import Input from "../Input";
+
+import type { PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, ReactNode } from "preact/compat";
+
+import type { IconButtonProps } from "../IconButton/IconButton";
+import type { InputProps } from "../Input/Input";
+
+export type InputSearchProps = {
+  cancelButtonClassName?: string;
+  cancelButtonProps?: IconButtonProps;
+  cancelIcon?: ReactNode;
+  className?: string;
+  inputClassName?: string;
+  inputContainerClassName?: string;
+  inputProps?: InputProps;
+  resultClassName?: string;
+  resultsClassName?: string;
+  resultsContainerClassName?: string;
+  searchIcon?: ReactNode;
+  searchIconContainerClassName?: string;
+  withResultsClassName?: string;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+/**
+ * Rich search input component.
+ */
+function InputSearch({
+  cancelButtonClassName,
+  cancelButtonProps,
+  cancelIcon,
+  children,
+  className,
+  inputClassName,
+  inputContainerClassName,
+  inputProps,
+  searchIcon,
+  searchIconContainerClassName,
+  withResultsClassName,
+}: InputSearchProps) {
+  const { t } = useI18n();
+  const myRef = useRef<HTMLDivElement>();
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          "flex h-16 items-center gap-4 rounded-md bg-white p-4 pt-3.5 shadow",
+          className,
+          withResultsClassName,
+        )}
+        ref={myRef}
+      >
+        <div
+          className={twMerge(
+            "text-grey flex items-center",
+            searchIconContainerClassName,
+          )}
+        >
+          {searchIcon || <Search />}
+        </div>
+        <div
+          className={twMerge(
+            "@container/inputsearch flex grow items-center gap-2 border-b-2 border-solid",
+            inputContainerClassName,
+          )}
+        >
+          <Input
+            autoComplete="off"
+            className={twMerge(
+              "h-8 w-1 grow overflow-hidden text-ellipsis placeholder:text-zinc-400",
+              inputClassName,
+            )}
+            type="text"
+            {...(inputProps || {})}
+          />
+          {!!inputProps.value && (
+            <IconButton
+              className={twMerge(
+                "flex size-4 items-center rounded-none border-none bg-transparent p-0 shadow-none",
+                cancelButtonClassName,
+              )}
+              title={t("search_input_cancel")}
+              {...(cancelButtonProps || {})}
+            >
+              {cancelIcon || <Cancel />}
+            </IconButton>
+          )}
+        </div>
+      </div>
+      {children}
+    </>
+  );
+}
+
+export default memo(InputSearch);

package/src/ui/InputSearch/index.tsx

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

package/src/utils/centerOnVehicle.ts

@@ -8,6 +8,7 @@ const centerOnVehicle = async (
   vehicle: RealtimeTrajectory,
   map: Map,
   targetZoom = 0,
+  isOverlayOpen = true,
 ) => {
   if (!vehicle) {
     return Promise.reject(new Error("No vehicle provided"));
@@ -21,15 +22,21 @@ const centerOnVehicle = async (
   const zoom = targetZoom || view.getZoom();
   const resolution = zoom > 0 ? view.getResolutionForZoom(zoom) : undefined;
 
-  let center = coordinate;
+  let center = coordinate ? [...coordinate] : null;
   if (!center && geometry) {
     const { coord } = getVehiclePosition(Date.now(), vehicle, true);
-    center = coord as [number, number];
+    center = coord ? [...coord] : null;
   }
   if (!center) {
     return Promise.reject(new Error("No center found"));
   }
+  if (isOverlayOpen) {
+    // Adjust center to take in account the opened overlay.
+    center[0] -= (320 / 2) * resolution; // shift right by 400px
+    // console.log(center);
+  }
 
+  // Shift of 150px to the left and 50px to the top.
   view.cancelAnimations();
 
   const promise = new Promise((resolve) => {

package/src/utils/constants.ts

@@ -224,7 +224,7 @@ export const LNP_LINE_ID_PROP = "original_line_id";
 // LNP data source id in the style
 export const LNP_SOURCE_ID = "network_plans";
 
-// Metadata key in the lnp data source
+// LNP metadata key in the lnp data source
 export const LNP_MD_LINES = "geops.lnp.lines";
 export const LNP_MD_STOPS = "geops.lnp.stops";
 
@@ -233,3 +233,10 @@ export const LNP_GEOPS_FILTER_HIGHLIGHT = "highlightnetzplan";
 
 // LNP style layer id where the dynamic filtering will apply
 export const LNP_LAYER_ID_HIGHLIGHT = "netzplan_highlight_trip";
+
+// Layer props used by layer and/or layerConfig
+export const LAYER_TREE_HIDE_PROP = "layerTreeHidden";
+export const LAYER_TREE_TITLE_FUNC_PROP = "layerTreeTitleRenderFunc";
+
+/** FIT ON FEATURES */
+export const FIT_ON_FEATURES_MAX_ZOOM_POINT = 16;

package/src/utils/fullTrajectoryStyle.ts

@@ -1,5 +1,7 @@
 import { Circle, Fill, Stroke, Style } from "ol/style";
 
+import getBgColor from "./getBgColor";
+
 import type { FeatureLike } from "ol/Feature";
 
 const borderStyle = new Style({
@@ -16,11 +18,7 @@ const borderStyle = new Style({
   zIndex: 2,
 });
 
-const fullTrajectoryStyle = (
-  feature: FeatureLike,
-  resolution: number,
-  options: { getBgColor: (type: string, line: { name: string }) => string },
-): Style[] => {
+const fullTrajectoryStyle = (feature: FeatureLike): Style[] => {
   let lineColor = "#ffffff"; // white
 
   const type = feature.get("type");
@@ -29,8 +27,7 @@ const fullTrajectoryStyle = (
   if (stroke && stroke[0] !== "#") {
     stroke = `#${stroke}`;
   }
-  lineColor =
-    stroke || options?.getBgColor(type, { name: feature.get("line_name") });
+  lineColor = stroke || getBgColor(type, { name: feature.get("line_name") });
 
   // Don't allow white lines, use red instead.
   lineColor = /#ffffff/i.test(lineColor) ? "#ff0000" : lineColor;

package/src/utils/getBgColor.ts

@@ -2,7 +2,9 @@ import { realtimeConfig } from "mobility-toolbox-js/ol";
 
 import { LINE_COLOR_BY_NAME } from "./constants";
 
-const getBgColor = (type, line) => {
+import type { RealtimeLine, RealtimeMot } from "mobility-toolbox-js/types";
+
+const getBgColor = (type: RealtimeMot, line: Partial<RealtimeLine>) => {
   if (type === "bus") {
     return "#646363";
   }
@@ -12,7 +14,7 @@ const getBgColor = (type, line) => {
       return lineColor;
     }
   }
-  return realtimeConfig.getBgColor(type);
+  return realtimeConfig.getColorForType(type);
 };
 
 export default getBgColor;

package/src/utils/getDelayColorForVehicle.test.ts

@@ -2,8 +2,8 @@ import getDelayColorForVehicle from "./getDelayColorForVehicle";
 
 describe("getDelayColorForVehicle", () => {
   it("returns cancelled color", () => {
-    expect(getDelayColorForVehicle(0, true, true)).toBe("#dc2626");
-    expect(getDelayColorForVehicle(0, true, false)).toBe("#a0a0a0");
+    expect(getDelayColorForVehicle(null, null, 0, true, true)).toBe("#dc2626");
+    expect(getDelayColorForVehicle(null, null, 0, true, false)).toBe("#a0a0a0");
   });
 
   it("returns null delay (no realtime train) color", () => {
@@ -11,9 +11,13 @@ describe("getDelayColorForVehicle", () => {
   });
 
   it("returns transparent", () => {
-    expect(getDelayColorForVehicle(0)).toBe("transparent");
-    expect(getDelayColorForVehicle(1 * 60 * 1000)).toBe("transparent");
-    expect(getDelayColorForVehicle(0.4 * 60 * 1000)).toBe("transparent");
+    expect(getDelayColorForVehicle(null, null, 0)).toBe("transparent");
+    expect(getDelayColorForVehicle(null, null, 1 * 60 * 1000)).toBe(
+      "transparent",
+    );
+    expect(getDelayColorForVehicle(null, null, 0.4 * 60 * 1000)).toBe(
+      "transparent",
+    );
   });
   // it("returns green", () => {
   //   expect(getDelayColorForVehicle(0)).toBe("#16a34a");
@@ -24,14 +28,20 @@ describe("getDelayColorForVehicle", () => {
   //   expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
   // });
   it("returns orange", () => {
-    expect(getDelayColorForVehicle(3 * 60 * 1000)).toBe("#ea580c");
-    expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ea580c");
-    expect(getDelayColorForVehicle(5 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColorForVehicle(null, null, 3 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColorForVehicle(null, null, 4.49 * 60 * 1000 - 1)).toBe(
+      "#ea580c",
+    );
+    expect(getDelayColorForVehicle(null, null, 5 * 60 * 1000)).toBe("#ea580c");
   });
 
   it("returns red", () => {
-    expect(getDelayColorForVehicle(9.49 * 60 * 1000 - 1)).toBe("#dc2626");
-    expect(getDelayColorForVehicle(10 * 60 * 1000)).toBe("#dc2626");
-    expect(getDelayColorForVehicle(180 * 60 * 1000)).toBe("#dc2626");
+    expect(getDelayColorForVehicle(null, null, 9.49 * 60 * 1000 - 1)).toBe(
+      "#dc2626",
+    );
+    expect(getDelayColorForVehicle(null, null, 10 * 60 * 1000)).toBe("#dc2626");
+    expect(getDelayColorForVehicle(null, null, 180 * 60 * 1000)).toBe(
+      "#dc2626",
+    );
   });
 });

package/src/utils/getDelayColorForVehicle.ts

@@ -1,13 +1,15 @@
 import getDelayColor from "./getDelayColor";
 
+import type { ViewState } from "mobility-toolbox-js/types";
+
 /**
- * @private
- * @param {number} delayInMs Delay in milliseconds.
- * @param {boolean} cancelled true if the journey is cancelled.
- * @param {boolean} isDelayText true if the color is used for delay text of the symbol.
+ * Return the delay color depending on an object representing a vehicle or a line.
+ * This function is used to have the same color on the map and on other components.
  */
 const getDelayColorForVehicle = (
-  delayInMs: null | number,
+  object?: unknown,
+  viewState?: ViewState,
+  delayInMs?: number,
   cancelled?: boolean,
   isDelayText?: boolean,
 ): string => {

package/src/utils/getDelayTextForVehicle.test.ts

@@ -2,31 +2,31 @@ import getDelayTextForVehicle from "./getDelayTextForVehicle";
 
 describe("getDelayTextForVehicle", () => {
   it("returns cancelled character", () => {
-    expect(getDelayTextForVehicle(7200000, true)).toBe(
+    expect(getDelayTextForVehicle(null, null, 7200000, true)).toBe(
       String.fromCodePoint(0x00d7),
     );
   });
 
   it("returns hours (floor)", () => {
-    expect(getDelayTextForVehicle(7200000)).toBe("+2h");
-    expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
+    expect(getDelayTextForVehicle(null, null, 7200000)).toBe("+2h");
+    expect(getDelayTextForVehicle(null, null, 7255555)).toBe("+2h1m");
   });
 
   it("returns minutes (round)", () => {
-    expect(getDelayTextForVehicle(120000)).toBe("+2m");
-    expect(getDelayTextForVehicle(151000)).toBe("+3m");
+    expect(getDelayTextForVehicle(null, null, 120000)).toBe("+2m");
+    expect(getDelayTextForVehicle(null, null, 151000)).toBe("+3m");
   });
 
   it("doesn't display seconds", () => {
-    expect(getDelayTextForVehicle(1000)).toBe("");
-    expect(getDelayTextForVehicle(30000)).toBe("+1m");
-    expect(getDelayTextForVehicle(7255555)).toBe("+2h1m");
+    expect(getDelayTextForVehicle(null, null, 1000)).toBe("");
+    expect(getDelayTextForVehicle(null, null, 30000)).toBe("+1m");
+    expect(getDelayTextForVehicle(null, null, 7255555)).toBe("+2h1m");
   });
 
   it("returns empty value", () => {
-    expect(getDelayTextForVehicle(1000)).toBe("");
-    expect(getDelayTextForVehicle(null)).toBe("");
-    expect(getDelayTextForVehicle(undefined)).toBe("");
-    expect(getDelayTextForVehicle(0)).toBe("");
+    expect(getDelayTextForVehicle(null, null, 1000)).toBe("");
+    expect(getDelayTextForVehicle(null, null, null)).toBe("");
+    expect(getDelayTextForVehicle(null, null, undefined)).toBe("");
+    expect(getDelayTextForVehicle(null, null, 0)).toBe("");
   });
 });

package/src/utils/getDelayTextForVehicle.ts

@@ -1,11 +1,15 @@
 import getDelayString from "./getDelayString";
 
+import type { RealtimeTrajectory, ViewState } from "mobility-toolbox-js/types";
+
 /**
  * This function returns the text displays near the vehicle.
  * We use getDelayString inside it to make sure that RouteSchedule and
  * the map have the same values.
  */
 const getDelayTextForVehicle = (
+  trajectory: RealtimeTrajectory,
+  viewState: ViewState,
   delayInMs: number,
   cancelled = false,
 ): string => {