@geops/rvf-mobility-web-component 0.1.77 → 0.1.79

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.77",
+  "version": "0.1.79",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -11,8 +11,8 @@
     "graphql-request": "^7.1.2",
     "jspdf": "^3.0.3",
     "lodash.debounce": "^4.0.8",
-    "maplibre-gl": "^5.9.0",
-    "mobility-toolbox-js": "3.4.6-beta.6",
+    "maplibre-gl": "^5.10.0",
+    "mobility-toolbox-js": "3.4.7",
     "ol": "^10.6.1",
     "preact": "^10.27.2",
     "preact-custom-element": "^4.5.1",
@@ -25,9 +25,9 @@
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@geops/eslint-config-react": "^1.6.0-beta.1",
-    "@tailwindcss/cli": "^4.1.14",
+    "@tailwindcss/cli": "^4.1.16",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/preact": "^3.2.4",
     "@types/geojson": "^7946.0.16",
@@ -35,9 +35,9 @@
     "@types/lodash": "^4.17.20",
     "@types/preact-custom-element": "^4.0.4",
     "concurrently": "^9.2.1",
-    "esbuild": "^0.25.10",
+    "esbuild": "^0.25.11",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fixpack": "^4.0.0",
     "generact": "^0.4.0",
@@ -47,15 +47,15 @@
     "jest-environment-jsdom": "^30.2.0",
     "jest-preset-preact": "^4.1.1",
     "next": "15.5.5",
-    "preact-render-to-string": "^6.6.2",
+    "preact-render-to-string": "^6.6.3",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "standard-version": "^9.5.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.1.16",
     "ts-jest": "^29.4.5",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.1"
+    "typescript-eslint": "^8.46.2"
   },
   "scripts": {
     "build": "yarn build:css && yarn build:js && cp index*.js* doc/public/",

package/src/MapsetLayer/MapsetLayer.tsx

@@ -1,6 +1,5 @@
 import { MapsetLayer as MtbMapsetLayer } from "mobility-toolbox-js/ol";
 import { unByKey } from "ol/Observable";
-import { transformExtent } from "ol/proj";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
@@ -8,8 +7,8 @@ import { LAYER_NAME_MAPSET } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { MapsetLayerOptions } from "mobility-toolbox-js/ol";
-
-let moveEndTimeout: ReturnType<typeof setTimeout>;
+import type { Feature } from "ol";
+import type { EventTypes } from "ol/Observable";
 
 export const isFeatureOutsideZoomLimit = (feature, map) => {
   const zoom = map?.getView()?.getZoom();
@@ -23,7 +22,6 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
     apikey,
     baseLayer,
     map,
-    mapsetbbox,
     mapsetplanid,
     mapsettags,
     mapsettenants,
@@ -37,38 +35,8 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
       return null;
     }
 
-    let bbox = undefined;
-    if (mapsetbbox) {
-      bbox = mapsetbbox?.split(",").map((coord) => {
-        return Number(coord.trim());
-      });
-      if (
-        bbox.length === 4 &&
-        !bbox.some((coord) => {
-          return Number.isNaN(coord);
-        })
-      ) {
-        bbox = transformExtent(bbox, "EPSG:3857", "EPSG:4326");
-      }
-    } else {
-      // we have to wait that the map is well sized to get the extent
-      // It triggers an erro in FF without this
-      if (
-        map.getView()?.getCenter() &&
-        map.getSize()[0] > 0 &&
-        map.getSize()[1] > 0
-      ) {
-        bbox = transformExtent(
-          map.getView()?.calculateExtent(),
-          "EPSG:3857",
-          "EPSG:4326",
-        );
-      }
-    }
     return new MtbMapsetLayer({
       apiKey: apikey,
-      bbox,
-      mapseturl: mapseturl || undefined,
       name: LAYER_NAME_MAPSET,
       planId: mapsetplanid ?? undefined,
       tags: mapsettags?.split(",").map((t) => {
@@ -77,14 +45,13 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
       tenants: mapsettenants?.split(",").map((t) => {
         return t.trim();
       }),
-      timestamp: mapsettimestamp || new Date().toISOString(), // Load only standard plan
-      zoom: map.getView().getZoom(),
+      timestamp: mapsettimestamp, // Load only standard plan
+      url: mapseturl,
       ...(props || {}),
     });
   }, [
     baseLayer,
     map,
-    mapsetbbox,
     apikey,
     mapseturl,
     mapsetplanid,
@@ -109,49 +76,12 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
     };
   }, [map, layer]);
 
-  useEffect(() => {
-    const view = map?.getView();
-    if (!view || !layer) {
-      return;
-    }
-    const handleMoveEnd = () => {
-      if (mapsetplanid || !layer.get("visible")) {
-        return;
-      }
-      clearTimeout(moveEndTimeout);
-      moveEndTimeout = setTimeout(() => {
-        const currentBbox = transformExtent(
-          view.calculateExtent(map.getSize()),
-          "EPSG:3857",
-          "EPSG:4326",
-        );
-        layer.bbox = currentBbox;
-        layer.zoom = view.getZoom();
-      }, 100);
-    };
-
-    const listeners = [
-      layer.on("change:visible", () => {
-        if (layer.get("visible")) {
-          handleMoveEnd();
-        }
-      }),
-      view.on("change:center", handleMoveEnd),
-      view.on("change:resolution", handleMoveEnd),
-    ];
-
-    return () => {
-      clearTimeout(moveEndTimeout);
-      unByKey(listeners);
-    };
-  }, [map, layer, mapsetplanid]);
-
-  // Apply fetaure's minzoom and maxzoom to its style
+  // Apply feature's minzoom and maxzoom to its style
   // TODO should be done by the mapset layer itself
   useEffect(() => {
     let key = null;
     if (layer) {
-      key = layer.on("updatefeatures", () => {
+      key = layer.on("updatefeatures" as EventTypes, () => {
         const features = layer.getSource()?.getFeatures();
         if (!features?.length) {
           return;

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -40,7 +40,6 @@ export type MobilityMapAttributeName =
   | "mainlink"
   | "mainlinktitle"
   | "mapset"
-  | "mapsetbbox"
   | "mapsetplanid"
   | "mapsettags"
   | "mapsettenants"
@@ -191,12 +190,6 @@ where:
     public: true,
     type: "boolean",
   },
-  mapsetbbox: {
-    defaultValue: MAX_EXTENT.join(","),
-    description:
-      "The BBOX to constrain the boundary of the mapset layer in EPSG:3857 coordinates. Mandatory for mapset layer. <br/>Ex: 831634,5933959,940649,6173660 .",
-    public: false,
-  },
   mapsetplanid: {
     description:
       "The id of the mapset plan to display. Mostly for debugging purposes.",
@@ -216,7 +209,7 @@ where:
     public: false,
   },
   mapseturl: {
-    defaultValue: "https://editor.mapset.io/api/v1",
+    defaultValue: "https://editor.mapset.io/api/v1/",
     description: `The ${geopsMapsetApiLink} url to use.`,
     public: true,
   },

package/src/MobilityNotifications/MobilityNotifications.tsx

@@ -1,4 +1,5 @@
 import { MocoAPI } from "mobility-toolbox-js/ol";
+import { SeverityEnumeration } from "mobility-toolbox-js/types";
 import { memo, useEffect, useState } from "preact/compat";
 
 import SituationDetails from "../SituationDetails";
@@ -19,6 +20,17 @@ export type MobilityNotificationsProps = Record<
   null | string | undefined
 >;
 
+const severityOrder = {
+  [SeverityEnumeration.NoImpact]: 2,
+  [SeverityEnumeration.Normal]: 5,
+  [SeverityEnumeration.Severe]: 6,
+  [SeverityEnumeration.Slight]: 4,
+  [SeverityEnumeration.Undefined]: 1,
+  [SeverityEnumeration.Unknown]: 0,
+  [SeverityEnumeration.VerySevere]: 7,
+  [SeverityEnumeration.VerySlight]: 3,
+};
+
 function MobilityNotifications({
   apikey,
   lang,
@@ -59,20 +71,44 @@ function MobilityNotifications({
     <I18nContext.Provider value={i18n}>
       <style>{tailwind}</style>
       <div className="flex w-full flex-col gap-6">
-        {situations?.map((situation) => {
-          return (
-            <SituationDetails
-              canToggle={true}
-              headerClassName="text-rvf-h3 font-semibold"
-              iconClassName="w-8 h-8 text-red"
-              key={situation.id}
-              reasonClassName="hidden"
-              situation={situation}
-              timeIntervalClassName="pl-1 text-base py-3 font-semibold text-balance"
-              useShortMonth={false}
-            ></SituationDetails>
-          );
-        })}
+        {situations
+          ?.sort((a, b) => {
+            // sort by startDate
+            const startDateA = a.affectedTimeIntervalsStart;
+            const startDateB = b.affectedTimeIntervalsStart;
+            if (startDateA && startDateB) {
+              if (startDateA === startDateB) {
+                // Sort by severity;
+                const severityA =
+                  a.publications.find((pub) => {
+                    return !!pub.severity;
+                  })?.severity || 0;
+                const severityB =
+                  b.publications.find((pub) => {
+                    return !!pub.severity;
+                  })?.severity || 0;
+                return severityOrder[severityA] > severityOrder[severityB]
+                  ? -1
+                  : 1;
+              }
+              return startDateA < startDateB ? -1 : 1;
+            }
+          })
+          .map((situation) => {
+            console.log("Rendering situation", situation.id, situation.title);
+            return (
+              <SituationDetails
+                canToggle={true}
+                headerClassName="text-rvf-h3 font-semibold"
+                iconClassName="w-8 h-8 text-red"
+                key={situation.id}
+                reasonClassName="hidden"
+                situation={situation}
+                timeIntervalClassName="pl-1 text-base py-3 font-semibold text-balance"
+                useShortMonth={false}
+              ></SituationDetails>
+            );
+          })}
       </div>
     </I18nContext.Provider>
   );

package/src/icons/Warning/exported_features_20251029101203.kml

@@ -0,0 +1,17 @@
+
+- creation app/repo/deploy (lint) -> 4h
+- creation map with ArcGIS Maps SDK with SBB base layer(one or more?) -> 4h
+- add Betriebspunkte and Linien layers on the map -> 4h
+- using URL parameter "?betriebspunkte=BN":
+  - ask the ArcGIS FeatureServer the Betriebpunkte corresponding to URL paramter -> 4h
+  - zoom on it with a buffer if 5km   -> 2h 
+  - ask the ArcGIS FeatureServer the Gemeinde, the Kanton of the Betriebspunkte -> 4h
+  - ask the ArcGIS FeatureServer all Linien available in this 5km extent -> 3h
+  - show a dialog with Kanton, Gemiende and the list of selectable lines -> 4h
+  - define the default "KM von" and "KM bis" for each Linie using the 5km extent -> 4h
+  - display "KM von" and "KM bis" in the dialog as input text -> 2h
+
+- add a tool to select an area by bbox -> 1d
+- add a tool to select an area by "Frei Skizze" -> 1d
+- use the area drawn to recalculate the "KM von" and "KM bis" of all Linien -> 3h
+- 

package/src/NotificationsLayer/MocoLayer2.ts

@@ -1,91 +0,0 @@
-import {
-  getFeatureCollectionToRenderFromSituation,
-  MocoLayer,
-} from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-
-import type { GeoJSONSource } from "maplibre-gl";
-import type { MocoNotificationFeatureCollectionToRender } from "mobility-toolbox-js/ol";
-import type { Map } from "ol";
-
-export const MOCO_SOURCE_ID = "moco";
-export const MOCO_MD_LAYER_FILTER = "moco";
-class MocoLayer2 extends MocoLayer {
-  constructor(options) {
-    super(options);
-  }
-
-  attachToMap(map: Map): void {
-    super.attachToMap(map);
-    unByKey(this.olEventsKeys);
-  }
-
-  getDataByGraph(
-    data: MocoNotificationFeatureCollectionToRender,
-  ): MocoNotificationFeatureCollectionToRender {
-    // const zoom = this.getMapInternal()?.getView()?.getZoom();
-    // const graphs = (
-    //   this.maplibreLayer?.mapLibreMap?.getStyle() as MapsStyleSpecification
-    // ).metadata?.graphs;
-
-    // const graph = getGraphByZoom(zoom, graphs);
-    const newData: MocoNotificationFeatureCollectionToRender = {
-      features: (data?.features || []).filter((feature) => {
-        delete feature.properties?.publicationStops;
-        delete feature.properties?.publicationLines;
-        delete feature.properties?.publication;
-        delete feature.properties?.situation;
-        return (
-          feature.properties?.graph === "osm" ||
-          // feature.properties?.graph === "np_topo4" ||
-          // feature.properties?.graph === "np_topo5" ||
-          // feature.properties?.graph === "np_topo6" //||
-          feature.properties?.graph === "np_topo7" ||
-          feature.properties?.graph === "np_topo8" ||
-          feature.properties?.graph === "np_topo9" ||
-          feature.properties?.graph === "np_topo10" ||
-          feature.properties?.graph === "np_topo11" ||
-          feature.properties?.graph === "np_topo12" ||
-          feature.properties?.graph === "np_topo13" ||
-          feature.properties?.graph === "np_topo14" ||
-          feature.properties?.graph === "np_topo15"
-        );
-      }),
-      type: "FeatureCollection",
-    };
-    return newData;
-  }
-  /**
-   * This function updates the GeoJSON source data, with the current situations available in this.situations.
-   * @returns
-   */
-  async updateData(): Promise<boolean | undefined> {
-    if (this.loadAll) {
-      const situations = await this.loadData();
-      // We don't use the setter here to avoid infinite loop
-      this.set("situations", situations ?? []);
-    }
-    const source = this.maplibreLayer?.mapLibreMap?.getSource(MOCO_SOURCE_ID);
-    if (!source) {
-      // eslint-disable-next-line no-console
-      console.warn("MocoLayer: No source found for id : ", MOCO_SOURCE_ID);
-      return Promise.reject(new Error("No source found"));
-    }
-
-    const data = {
-      features: (this.situations ?? []).flatMap((situation) => {
-        return getFeatureCollectionToRenderFromSituation(situation).features;
-      }),
-      type: "FeatureCollection",
-    } as MocoNotificationFeatureCollectionToRender;
-    // this.#dataInternal = data;
-
-    // Apply new data to the source
-    console.log(this.getDataByGraph(data));
-    // console.log(JSON.stringify(this.getDataByGraph(data)));
-    (source as GeoJSONSource).setData(this.getDataByGraph(data));
-    return Promise.resolve(true);
-  }
-}
-
-export default MocoLayer2;

package/src/utils/addSourceAndLayers.ts

@@ -1,130 +0,0 @@
-import sbbConstructionBanner from "../icons/sbb_construction_banner.png";
-// import sbbAddStop from "../icons/sbb_add_stop.png";
-// import sbbAlternative from "../icons/sbb_alternative.png";
-// import sbbCancellation from "../icons/sbb_cancellation.png";
-import sbbConstruction from "../icons/sbb_construction.png";
-// import sbbDelay from "../icons/sbb_delay.png";
-import sbbDisruptionBanner from "../icons/sbb_disruption_banner.png";
-import sbbDisruption from "../icons/sbb_disruption.png";
-// import sbbInfo from "../icons/sbb_info.png";
-import sbbMissedConnectionBanner from "../icons/sbb_missed_connection_banner.png";
-import sbbMissedConnection from "../icons/sbb_missed_connection.png";
-import sbbReplacementBusBanner from "../icons/sbb_replacementbus_banner.png";
-// import sbbPlatformChange from "../icons/sbb_platform_change.png";
-import sbbReplacementBus from "../icons/sbb_replacementbus.png";
-// import sbbReRoute from "../icons/sbb_reroute.png";
-// import warningbanner from "../icons/warning-banner.png";
-// import warning from "../icons/warning.png";
-
-// export const AffectedLineStyleCategoryChoices = {
-//   Construction: "CONSTRUCTION",
-//   Disruption: "DISRUPTION",
-//   IndustrialAction: "INDUSTRIAL_ACTION",
-//   LiftFailure: "LIFT_FAILURE",
-//   Other: "OTHER",
-//   RailReplacement: "RAIL_REPLACEMENT",
-//   SpecialEvent: "SPECIAL_EVENT",
-//   VehicleFaulure: "VEHICLE_FAULURE",
-//   Warning: "WARNING",
-// } as const;
-const defaultIcon = sbbMissedConnection;
-const defaultIconBanner = sbbMissedConnectionBanner;
-export const icons = {
-  CONSTRUCTION: sbbConstruction,
-  CONSTRUCTION_BANNER: sbbConstructionBanner,
-  DISRUPTION: sbbDisruption,
-  DISRUPTION_BANNER: sbbDisruptionBanner,
-  INDUSTRIAL_ACTION: defaultIcon,
-  INDUSTRIAL_ACTION_BANNER: defaultIconBanner,
-  LIFT_FAILURE: defaultIcon,
-  LIFT_FAILURE_BANNER: defaultIconBanner,
-  OTHER: defaultIcon,
-  OTHER_BANNER: defaultIconBanner,
-  RAIL_REPLACEMENT: sbbReplacementBus,
-
-  RAIL_REPLACEMENT_BANNER: sbbReplacementBusBanner,
-  SPECIAL_EVENT: defaultIcon,
-  SPECIAL_EVENT_BANNER: defaultIconBanner,
-  VEHICLE_FAULURE: defaultIcon,
-  VEHICLE_FAULURE_BANNER: defaultIconBanner,
-  warning: defaultIcon,
-  WARNING: defaultIcon,
-  warningBanner: defaultIconBanner,
-};
-
-// Add a source and styleLayer using the id in parameter.
-const addSourceAndLayers = (
-  mapboxLayer,
-  sourceId,
-  sourceData,
-  styleLayer,
-  beforeLayerId,
-) => {
-  if (!mapboxLayer.loaded) {
-    mapboxLayer.once("load", () => {
-      addSourceAndLayers(
-        mapboxLayer,
-        sourceId,
-        sourceData,
-        styleLayer,
-        beforeLayerId,
-      );
-    });
-    return;
-  }
-  const { mbMap } = mapboxLayer;
-
-  Object.keys(icons).forEach((icon) => {
-    if (!mbMap.getImage(icon)) {
-      mbMap.loadImage(icons[icon]).then((image) => {
-        if (!mbMap.getImage(icon)) {
-          mbMap.addImage(icon, image.data);
-        }
-      });
-    }
-  });
-
-  // Update source
-  if (sourceId && sourceData) {
-    const source = mbMap.getSource(sourceId);
-    if (source) {
-      source.setData(sourceData);
-    } else {
-      mbMap.addSource(sourceId, {
-        data: sourceData,
-        generateId: true,
-        type: "geojson",
-      });
-    }
-  }
-
-  // Update layer
-  if (styleLayer) {
-    let layer = mbMap.getLayer(sourceId);
-    if (layer) {
-      mbMap.removeLayer(layer.id);
-    }
-
-    // styleLayer could be an array of styles to add.
-    let styleLayers = styleLayer;
-    if (!Array.isArray(styleLayer)) {
-      styleLayers = [styleLayer];
-    }
-    styleLayers.forEach((style) => {
-      if (mbMap.getSource(style.source)) {
-        layer = mbMap.getLayer(style.id);
-        if (layer) {
-          mbMap.removeLayer(layer.id);
-        }
-        mbMap.addLayer(style, beforeLayerId);
-      } else {
-        console.warn(
-          `The source ${style.source} doesn't exist. This layer can't be added`,
-          style,
-        );
-      }
-    });
-  }
-};
-
-export default addSourceAndLayers;