@geops/rvf-mobility-web-component 0.1.127-beta.0 → 0.1.127-beta.2

package/src/LinesNetworkPlanDetails/LinesNetworkPlanDetails.tsx

@@ -1,274 +0,0 @@
-import { useCallback, useMemo, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import RouteIcon from "../RouteIcon";
-import ShadowOverflow from "../ShadowOverflow";
-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 { RealtimeLine } from "mobility-toolbox-js/types";
-import type { Feature } from "ol";
-import type { PreactDOMAttributes } from "preact";
-
-import type { LnpLineInfo } from "../utils/hooks/useLnp";
-
-const RUNS_PROP = "runs";
-
-function LinesNetworkPlanDetails({
-  className,
-  features,
-  ...props
-}: { className?: string; features: Feature[] } & PreactDOMAttributes) {
-  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);
-
-  const isRunsDisplay = useMemo(() => {
-    return (
-      new URLSearchParams(window.location.search).get(RUNS_PROP) === "true"
-    );
-  }, []);
-
-  const getLink = useCallback(
-    (id: string) => {
-      const href = layerConfig?.link?.href;
-      if (href) {
-        return href.replace(`{{id}}`, id);
-      }
-      return null;
-    },
-    [layerConfig],
-  );
-
-  const lineInfosByOperator: Record<string, LnpLineInfo[]> = useMemo(() => {
-    const byOperators = {};
-
-    [
-      ...new Set([
-        ...(linesIds || []),
-        ...features.map((f) => {
-          return f.get(LNP_LINE_ID_PROP);
-        }),
-      ]),
-    ]
-      .filter((id) => {
-        return !!id && !!lineInfos?.[id];
-      })
-      .forEach((id) => {
-        const { operator_name: operatorName } = lineInfos[id];
-        if (!byOperators[operatorName]) {
-          byOperators[operatorName] = [];
-          byOperators[operatorName].runs = 0;
-        }
-        lineInfos[id].id = id;
-
-        const runs = features
-          ?.filter((f) => {
-            return f.get(LNP_LINE_ID_PROP) === id;
-          })
-          .reduce((acc, featuree) => {
-            return acc + featuree.get(RUNS_PROP);
-          }, 0);
-        lineInfos[id].id = id;
-        lineInfos[id].runs = runs;
-        byOperators[operatorName].runs += runs;
-        byOperators[operatorName].push(lineInfos[id]);
-      });
-
-    return byOperators;
-  }, [features, lineInfos, linesIds]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const stopInfoIdsByLineId: Record<string, string[]> = useMemo(() => {
-    const byLineId = {};
-    features.forEach((f) => {
-      const lineId = f.get(LNP_LINE_ID_PROP);
-      if (lineId && !byLineId[lineId] && f.get("stop_ids")) {
-        try {
-          byLineId[lineId] = JSON.parse(f.get("stop_ids"));
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn("Impossible to parse stop_ids", e);
-        }
-      }
-    });
-
-    return byLineId;
-  }, [features]);
-
-  if (!features?.length && !linesIds?.length) {
-    return null;
-  }
-
-  return (
-    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
-      <div className="space-y-4">
-        {Object.entries(lineInfosByOperator)
-          .sort(([operatorNameA], [operatorNameB]) => {
-            return lineInfosByOperator[operatorNameA][RUNS_PROP] <
-              lineInfosByOperator[operatorNameB][RUNS_PROP]
-              ? 1
-              : -1;
-          })
-          .map(([operatorName, linesInfos]) => {
-            return (
-              <div className={"flex flex-col gap-2"} key={operatorName}>
-                <div>{operatorName}</div>
-                <div className="flex flex-wrap gap-2">
-                  {linesInfos
-                    .sort((a, b) => {
-                      return a.runs < b.runs ? 1 : -1;
-                    })
-                    .map((lineInfo) => {
-                      const {
-                        color: backgroundColor,
-                        // color,
-                        // external_id,
-                        long_name,
-                        mot,
-                        runs,
-                        short_name: shortName,
-                        text_color: textColor,
-                      } = lineInfo;
-                      let longName = long_name || shortName;
-
-                      let stops = null;
-                      //stopInfoIdsByLineId?.[id] || null;
-                      if (!stops?.length) {
-                        stops = null;
-                      }
-
-                      if (!longName && stops) {
-                        const names = stops.map((stopId) => {
-                          return stopInfos[stopId].short_name;
-                        });
-
-                        longName = [
-                          ...new Set([names[0], names[names.length - 1]]),
-                        ].join(" - ");
-                      }
-
-                      // Build a line object
-                      const line: { type: string } & RealtimeLine = {
-                        color: null,
-                        id: null,
-                        name: shortName,
-                        stroke: null,
-                        text_color: null,
-                        type: mot,
-                      };
-
-                      if (textColor) {
-                        line.text_color = textColor.startsWith("#")
-                          ? textColor
-                          : `#${textColor}`;
-                      }
-
-                      if (backgroundColor) {
-                        line.color = backgroundColor.startsWith("#")
-                          ? backgroundColor
-                          : `#${backgroundColor}`;
-                      }
-
-                      return (
-                        <div
-                          className={longName ? "w-full" : ""}
-                          key={shortName}
-                        >
-                          <div
-                            className={
-                              "flex items-center justify-between gap-2"
-                            }
-                            // onClick={() => {
-                            //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
-                            // }}
-                          >
-                            <div>
-                              {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"}>
-                                {longName.split("-").map((name) => {
-                                  return <div key={name}>{name}</div>;
-                                })}
-                              </div>
-                            )}
-                            {isRunsDisplay && (
-                              <div className={"text-xs"}>{runs}</div>
-                            )}
-
-                            {/* We deactivate the list of stopsfor now */}
-                            {/* {!!stops && (
-                              <button className={"shrink-0"}>
-                                {stopInfosOpenId === id ? (
-                                  <ArrowUp />
-                                ) : (
-                                  <ArrowDown />
-                                )}
-                              </button>
-                            )} */}
-                          </div>
-                          {/* {!!stops && (
-                            <div
-                              className={`${stopInfosOpenId === id ? "" : "hidden"}`}
-                            >
-                              {stops?.map((stopId, index, arr) => {
-                                const stop = stopInfos[stopId];
-                                return (
-                                  <div
-                                    className={"flex items-center gap-2"}
-                                    key={stopId}
-                                  >
-                                    <RouteStopContext.Provider
-                                      value={{
-                                        index,
-                                        status: {
-                                          isFirst: !index,
-                                          isLast: index === arr.length - 1,
-                                          isLeft: false,
-                                          isPassed: false,
-                                          progress: !index ? 50 : 0,
-                                        },
-                                        stop,
-                                      }}
-                                    >
-                                      <RouteStopProgress
-                                        className="relative flex size-8 shrink-0 items-center justify-center"
-                                        lineColor={line.color}
-                                      />
-                                      <div>{stop.short_name}</div>
-                                    </RouteStopContext.Provider>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          )} */}
-                        </div>
-                      );
-                    })}
-                </div>
-              </div>
-            );
-          })}
-      </div>
-    </ShadowOverflow>
-  );
-}
-
-export default LinesNetworkPlanDetails;

package/src/LinesNetworkPlanDetails/index.tsx

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

package/src/LinesNetworkPlanLayer/LinesNetworkPlanLayer.tsx

@@ -1,51 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { LAYERS_NAMES } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
-
-function LinesNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
-  const { baseLayer, map, setLinesNetworkPlanLayer } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return (
-          metadata?.["rvf.filter"]?.startsWith("netzplan") &&
-          !metadata?.["rvf.filter"]?.startsWith("netzplan_call")
-        );
-      },
-      maplibreLayer: baseLayer,
-      name: LAYERS_NAMES.linesnetworkplan,
-      queryRenderedLayersFilter: ({ metadata }) => {
-        return metadata?.["rvf.filter"] === "netzplan_trips_info";
-      },
-      ...(props || {}),
-    });
-  }, [baseLayer, props]);
-
-  useEffect(() => {
-    setLinesNetworkPlanLayer?.(layer);
-  }, [layer, setLinesNetworkPlanLayer]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-
-    map.addLayer(layer);
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  return null; // <RegisterForSelectFeaturesOnClick />;
-}
-
-export default memo(LinesNetworkPlanLayer);

package/src/LinesNetworkPlanLayer/index.tsx

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

package/src/LinesNetworkPlanLayerHighlight/LinesNetworkPlanLayerHighlight.tsx

@@ -1,59 +0,0 @@
-import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import { LNP_GEOPS_FILTER_HIGHLIGHT } from "../utils/constants";
-import highlightLinesNetworkPlan from "../utils/highlightLinesNetworkPlan";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
-
-function LinesNetworkPlanLayerHighlight(props: MaplibreStyleLayerOptions) {
-  const { baseLayer, linesIds, map } = useMapContext();
-
-  const layer = useMemo(() => {
-    if (!baseLayer) {
-      return null;
-    }
-    return new MaplibreStyleLayer({
-      layersFilter: ({ metadata }) => {
-        return metadata?.["geops.filter"]?.startsWith(
-          LNP_GEOPS_FILTER_HIGHLIGHT,
-        );
-      },
-      maplibreLayer: baseLayer,
-      visible: false,
-      ...(props || {}),
-    });
-  }, [baseLayer, props]);
-
-  useEffect(() => {
-    if (!map || !layer) {
-      return;
-    }
-
-    map.addLayer(layer);
-    return () => {
-      map.removeLayer(layer);
-    };
-  }, [map, layer]);
-
-  useEffect(() => {
-    if (!layer || !baseLayer?.loaded) {
-      return;
-    }
-    if (linesIds?.length) {
-      highlightLinesNetworkPlan(linesIds, baseLayer);
-      layer.setVisible(true);
-    }
-    return () => {
-      layer?.setVisible(false);
-      // Reset the filter
-      highlightLinesNetworkPlan(undefined, baseLayer);
-    };
-  }, [baseLayer, baseLayer?.loaded, layer, linesIds]);
-
-  return null;
-}
-
-export default memo(LinesNetworkPlanLayerHighlight);

package/src/LinesNetworkPlanLayerHighlight/index.tsx

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

package/src/Map/Map.tsx

@@ -1,166 +0,0 @@
-import { Map as OlMap, View } from "ol";
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useEffect, useMemo, useRef } from "preact/hooks";
-
-import useInitialPermalink from "../utils/hooks/useInitialPermalink";
-import useMapContext from "../utils/hooks/useMapContext";
-
-// @ts-expect-error bad type definition
-import olStyle from "ol/ol.css";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
-
-export type RealtimeMapProps = JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function Map({ children, ...props }: RealtimeMapProps) {
-  const mapRef = useRef();
-  const { center, extent, map, maxextent, maxzoom, minzoom, setMap, zoom } =
-    useMapContext();
-
-  const propsFromPermalinkRef = useRef<null | Partial<MobilityMapProps>>(
-    useInitialPermalink(),
-  );
-
-  const view = useMemo(() => {
-    if (!maxextent) {
-      if (maxextent === "") {
-        return new View();
-      }
-      return;
-    }
-    const bbox = maxextent.split(",").map((c) => {
-      return parseFloat(c);
-    });
-    return new View({
-      constrainOnlyCenter: false, // allow to have the same value as extent and max extent
-      extent: bbox,
-      showFullExtent: true,
-    });
-  }, [maxextent]);
-
-  useEffect(() => {
-    if (!map || !view) {
-      return;
-    }
-    const key = map.on("change:view", (evt) => {
-      const oldView = evt.oldValue;
-      if (oldView) {
-        view.setMinZoom(oldView.getMinZoom());
-        view.setMaxZoom(oldView.getMaxZoom());
-        view.setCenter(oldView.getCenter());
-        view.setZoom(oldView.getZoom());
-      }
-    });
-    map.setView(view);
-
-    return () => {
-      unByKey(key);
-    };
-  }, [map, view]);
-
-  useEffect(() => {
-    let newMap: OlMap;
-    if (mapRef.current) {
-      newMap = new OlMap({
-        controls: [],
-        // pixelRatio: 3,
-        target: mapRef.current,
-      });
-      setMap(newMap);
-    }
-
-    return () => {
-      newMap?.setTarget(undefined);
-      setMap();
-    };
-  }, [setMap]);
-
-  useEffect(() => {
-    if (!map || !extent) {
-      return;
-    }
-    const bbox = extent.split(",").map((c) => {
-      return parseFloat(c);
-    });
-
-    if (bbox) {
-      map.getView().fit(bbox);
-    }
-  }, [map, extent]);
-
-  useEffect(() => {
-    if (!map || !center) {
-      return;
-    }
-    const [x, y] = center.split(",").map((c) => {
-      return parseFloat(c);
-    });
-    if (x && y) {
-      map.getView().setCenter([x, y]);
-    }
-  }, [map, center]);
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    const number = parseFloat(zoom);
-    if (number) {
-      map.getView().setZoom(number);
-    }
-  }, [map, zoom]);
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    const number = parseFloat(maxzoom);
-    if (number) {
-      map.getView().setMaxZoom(number);
-    }
-  }, [map, maxzoom]);
-
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    const number = parseFloat(minzoom);
-    if (number) {
-      map.getView().setMinZoom(number);
-    }
-  }, [map, minzoom]);
-
-  // Apply permalink parameters when the view is set after that the default attribute is set
-  // Order of useEffect is important here.
-  // This use effect should be called only when the view is set
-  useEffect(() => {
-    const curr = propsFromPermalinkRef.current;
-    const mapView = map?.getView();
-    if (mapView && curr.center) {
-      mapView.setCenter(
-        curr.center.split(",").map((c) => {
-          return parseFloat(c);
-        }),
-      );
-    }
-
-    if (mapView && curr.zoom) {
-      mapView.setZoom(parseFloat(curr.zoom));
-    }
-  }, [map]);
-
-  return (
-    <>
-      <style>{olStyle}</style>
-      <div ref={mapRef} {...props}>
-        {children}
-      </div>
-    </>
-  );
-}
-
-export default memo(Map);

package/src/Map/index.tsx

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

package/src/MapDispatchEvents/MapDispatchEvents.tsx

@@ -1,87 +0,0 @@
-import { GeoJSON } from "ol/format";
-import { memo } from "preact/compat";
-import { useEffect } from "preact/hooks";
-
-import useMapContext from "../utils/hooks/useMapContext";
-import MobilityEvent from "../utils/MobilityEvent";
-
-import type { MapBrowserEvent } from "ol";
-
-import type { MobilityMapProps } from "../MobilityMap/MobilityMap";
-import type { MobilityEventType } from "../utils/MobilityEvent";
-
-const dispatchEvent = (
-  node: HTMLElement | null,
-  eventType: MobilityEventType,
-  eventData: unknown,
-) => {
-  node?.dispatchEvent(
-    new MobilityEvent(eventType, eventData, { bubbles: true }),
-  );
-};
-
-const geojson = new GeoJSON();
-
-/**
- * This component is responsible to dispatch events listenable for the window outside the web component.
- *
- * @example
- * const wc = document.getElementById("my-web-component");
- * wc.addEventListener("mwc:singleclick", (event) => {
- *   console.log(event.data);
- * });
- *
- * @param param0 - Props for the component
- * @returns JSX.Element | null
- */
-
-function MapDispatchEvents({
-  node,
-  wcAttributes,
-}: {
-  node: HTMLDivElement | null;
-  wcAttributes: MobilityMapProps;
-}) {
-  const { map, permalinkUrlSearchParams, selectedFeature } = useMapContext();
-
-  // Send events when one of the web component attributes changes
-  useEffect(() => {
-    dispatchEvent(node, "mwc:attribute", wcAttributes);
-  }, [node, wcAttributes]);
-
-  // Send events when we click on the map
-  useEffect(() => {
-    map?.on("singleclick", (event: MapBrowserEvent) => {
-      dispatchEvent(node, "mwc:singleclick", {
-        coordinate: event.coordinate,
-        pixel: event.pixel,
-      });
-    });
-  }, [node, map]);
-
-  // Send events when the selected feature changes
-  useEffect(() => {
-    const json = selectedFeature
-      ? geojson.writeFeatureObject(selectedFeature)
-      : null;
-
-    // When the ol feature is a cluster
-    if (json?.properties?.clusterLeaves?.length > 0) {
-      json.properties.clusterLeaves = json.properties.clusterLeaves.map(
-        (feature) => {
-          return geojson.writeFeatureObject(feature);
-        },
-      );
-    }
-    dispatchEvent(node, "mwc:selectedfeature", json);
-  }, [node, selectedFeature]);
-
-  // Send current map state using URL Search parameters
-  useEffect(() => {
-    dispatchEvent(node, "mwc:permalink", permalinkUrlSearchParams?.toString());
-  }, [node, permalinkUrlSearchParams]);
-
-  return null;
-}
-
-export default memo(MapDispatchEvents);

package/src/MapDispatchEvents/index.tsx

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