🐛 Old stops still displayed on map once the stop search narrowed

- Replace leaflet with openlayers
- Add stop areas shape to map
- Display stop destinations sub-panel on click

backend/backend/idfm_interface/__init__.py

@@ -2,6 +2,7 @@ from .idfm_interface import IdfmInterface
 
 from .idfm_types import (
     Coordinate,
+    Destinations,
     FramedVehicleJourney,
     IdfmLineState,
     IdfmOperator,
@@ -35,6 +36,7 @@ from .idfm_types import (
 
 __all__ = [
     "Coordinate",
+    "Destinations",
     "FramedVehicleJourney",
     "IdfmInterface",
     "IdfmLineState",

backend/backend/idfm_interface/idfm_interface.py

@@ -1,6 +1,14 @@
+from collections import defaultdict
 from re import compile as re_compile
 from time import time
-from typing import AsyncIterator, ByteString, Callable, Iterable, List, Type
+from typing import (
+    AsyncIterator,
+    ByteString,
+    Callable,
+    Iterable,
+    List,
+    Type,
+)
 
 from aiofiles import open as async_open
 from aiohttp import ClientSession
@@ -8,10 +16,13 @@ from aiohttp import ClientSession
 from msgspec import ValidationError
 from msgspec.json import Decoder
 from rich import print
+from shapefile import Reader as ShapeFileReader, ShapeRecord
 
 from ..db import Database
-from ..models import Line, LinePicto, Stop, StopArea
+from ..models import ConnectionArea, Line, LinePicto, Stop, StopArea, StopShape
 from .idfm_types import (
+    ConnectionArea as IdfmConnectionArea,
+    Destinations as IdfmDestinations,
     IdfmLineState,
     IdfmResponse,
     Line as IdfmLine,
@@ -55,6 +66,7 @@ class IdfmInterface:
 
         self._json_stops_decoder = Decoder(type=List[IdfmStop])
         self._json_stop_areas_decoder = Decoder(type=List[IdfmStopArea])
+        self._json_connection_areas_decoder = Decoder(type=List[IdfmConnectionArea])
         self._json_lines_decoder = Decoder(type=List[IdfmLine])
         self._json_stops_lines_assos_decoder = Decoder(type=List[IdfmStopLineAsso])
         self._json_ratp_pictos_decoder = Decoder(type=List[RatpPicto])
@@ -66,7 +78,24 @@ class IdfmInterface:
 
     async def startup(self) -> None:
         BATCH_SIZE = 10000
-        STEPS: tuple[tuple[Type[Stop] | Type[StopArea], Callable, Callable], ...] = (
+        STEPS: tuple[
+            tuple[
+                Type[ConnectionArea] | Type[Stop] | Type[StopArea] | Type[StopShape],
+                Callable,
+                Callable,
+            ],
+            ...,
+        ] = (
+            (
+                StopShape,
+                self._request_stop_shapes,
+                IdfmInterface._format_idfm_stop_shapes,
+            ),
+            (
+                ConnectionArea,
+                self._request_idfm_connection_areas,
+                IdfmInterface._format_idfm_connection_areas,
+            ),
             (
                 StopArea,
                 self._request_idfm_stop_areas,
@@ -104,7 +133,7 @@ class IdfmInterface:
         print(f"Link Stops to Lines: {time() - begin_ts}s")
 
         begin_ts = time()
-        await self._load_stop_areas_stops_assos()
+        await self._load_stop_assos()
         print(f"Link Stops to StopAreas: {time() - begin_ts}s")
 
     async def _load_lines(self, batch_size: int = 5000) -> None:
@@ -167,25 +196,51 @@ class IdfmInterface:
 
         print(f"{total_found_nb} line <-> stop ({total_assos_nb = } found)")
 
-    async def _load_stop_areas_stops_assos(self, batch_size: int = 5000) -> None:
+    async def _load_stop_assos(self, batch_size: int = 5000) -> None:
-        total_assos_nb = total_found_nb = 0
+        total_assos_nb = area_stop_assos_nb = conn_stop_assos_nb = 0
-        assos = []
+        area_stop_assos = []
+        connection_stop_assos = []
+
         async for asso in self._request_idfm_stop_area_stop_associations():
             fields = asso.fields
 
-            assos.append((int(fields.zdaid), int(fields.arrid)))
+            stop_id = int(fields.arrid)
-            if len(assos) == batch_size:
+
+            area_stop_assos.append((int(fields.zdaid), stop_id))
+            connection_stop_assos.append((int(fields.zdcid), stop_id))
+
+            if len(area_stop_assos) == batch_size:
                 total_assos_nb += batch_size
-                if (found_nb := await StopArea.add_stops(assos)) is not None:
-                    total_found_nb += found_nb
-                assos.clear()
 
-        if assos:
+                if (found_nb := await StopArea.add_stops(area_stop_assos)) is not None:
-            total_assos_nb += len(assos)
+                    area_stop_assos_nb += found_nb
-            if (found_nb := await StopArea.add_stops(assos)) is not None:
+                area_stop_assos.clear()
-                total_found_nb += found_nb
 
-        print(f"{total_found_nb} stop area <-> stop ({total_assos_nb = } found)")
+                if (
+                    found_nb := await ConnectionArea.add_stops(connection_stop_assos)
+                ) is not None:
+                    conn_stop_assos_nb += found_nb
+                connection_stop_assos.clear()
+
+        if area_stop_assos:
+            total_assos_nb += len(area_stop_assos)
+            if (found_nb := await StopArea.add_stops(area_stop_assos)) is not None:
+                area_stop_assos_nb += found_nb
+            if (
+                found_nb := await ConnectionArea.add_stops(connection_stop_assos)
+            ) is not None:
+                conn_stop_assos_nb += found_nb
+
+        print(f"{area_stop_assos_nb} stop area <-> stop ({total_assos_nb = } found)")
+        print(f"{conn_stop_assos_nb} stop area <-> stop ({total_assos_nb = } found)")
+
+    # TODO: This method is synchronous due to the shapefile library.
+    # It's not a blocking issue but it could be nice to find an alternative.
+    async def _request_stop_shapes(self) -> AsyncIterator[ShapeRecord]:
+        # TODO: Use HTTP
+        with ShapeFileReader("./tests/datasets/REF_LDA.zip") as reader:
+            for record in reader.shapeRecords():
+                yield record
 
     async def _request_idfm_stops(self) -> AsyncIterator[IdfmStop]:
         # headers = {"Accept": "application/json", "apikey": self._api_key}
@@ -206,6 +261,13 @@ class IdfmInterface:
             for element in self._json_stop_areas_decoder.decode(await raw.read()):
                 yield element
 
+    async def _request_idfm_connection_areas(self) -> AsyncIterator[IdfmConnectionArea]:
+        async with async_open(
+            "./tests/datasets/zones-de-correspondance.json", "rb"
+        ) as raw:
+            for element in self._json_connection_areas_decoder.decode(await raw.read()):
+                yield element
+
     async def _request_idfm_lines(self) -> AsyncIterator[IdfmLine]:
         # TODO: Use HTTP
         async with async_open("./tests/datasets/lines_dataset.json", "rb") as raw:
@@ -378,6 +440,34 @@ class IdfmInterface:
                 changed_ts=int(fields.zdachanged.timestamp()),
             )
 
+    @staticmethod
+    def _format_idfm_connection_areas(
+        *connection_areas: IdfmConnectionArea,
+    ) -> Iterable[ConnectionArea]:
+        for connection_area in connection_areas:
+            yield ConnectionArea(
+                id=int(connection_area.zdcid),
+                name=connection_area.zdcname,
+                town_name=connection_area.zdctown,
+                postal_region=connection_area.zdcpostalregion,
+                xepsg2154=connection_area.zdcxepsg2154,
+                yepsg2154=connection_area.zdcyepsg2154,
+                transport_mode=StopAreaType(connection_area.zdctype.value),
+                version=connection_area.zdcversion,
+                created_ts=int(connection_area.zdccreated.timestamp()),
+                changed_ts=int(connection_area.zdcchanged.timestamp()),
+            )
+
+    @staticmethod
+    def _format_idfm_stop_shapes(*shape_records: ShapeRecord) -> Iterable[StopShape]:
+        for shape_record in shape_records:
+            yield StopShape(
+                id=shape_record.record[1],
+                type=shape_record.shape.shapeType,
+                bounding_box=list(shape_record.shape.bbox),
+                points=shape_record.shape.points,
+            )
+
     async def render_line_picto(self, line: Line) -> tuple[None | str, None | str]:
         begin_ts = time()
         line_picto_path = line_picto_format = None
@@ -432,20 +522,40 @@ class IdfmInterface:
 
         return ret
 
-    async def get_destinations(self, stop_point_id: str) -> Iterable[str]:
+    async def get_destinations(self, stop_id: int) -> IdfmDestinations | None:
-        # TODO: Store in database the destination for the given stop and line id.
         begin_ts = time()
-        destinations: dict[str, str] = {}
+
-        if (res := await self.get_next_passages(stop_point_id)) is not None:
+        destinations: IdfmDestinations = defaultdict(set)
+
+        if (stop := await Stop.get_by_id(stop_id)) is not None:
+            expected_stop_ids = {stop.id}
+
+        elif (stop_area := await StopArea.get_by_id(stop_id)) is not None:
+            expected_stop_ids = {stop.id for stop in stop_area.stops}
+
+        else:
+            return None
+
+        if (res := await self.get_next_passages(stop_id)) is not None:
+
             for delivery in res.Siri.ServiceDelivery.StopMonitoringDelivery:
                 if delivery.Status == IdfmState.true:
                     for stop_visit in delivery.MonitoredStopVisit:
+
+                        monitoring_ref = stop_visit.MonitoringRef.value
+                        try:
+                            monitored_stop_id = int(monitoring_ref.split(":")[-2])
+                        except (IndexError, ValueError):
+                            print(f"Unable to get stop id from {monitoring_ref}")
+                            continue
+
                         journey = stop_visit.MonitoredVehicleJourney
-                        if (destination_name := journey.DestinationName) and (
+                        if (
-                            line_ref := journey.LineRef
+                            dst_names := journey.DestinationName
-                        ):
+                        ) and monitored_stop_id in expected_stop_ids:
-                            line_id = line_ref.value.replace("STIF:Line::", "")[:-1]
+
-                            print(f"{line_id = }")
+                            line_id = journey.LineRef.value.split(":")[-2]
-                            destinations[line_id] = destination_name[0].value
+                            destinations[line_id].add(dst_names[0].value)
+
         print(f"get_next_passages: {time() - begin_ts}")
         return destinations

backend/backend/idfm_interface/idfm_types.py

@@ -116,6 +116,19 @@ class StopArea(Struct):
     record_timestamp: datetime
 
 
+class ConnectionArea(Struct):
+    zdcid: str
+    zdcversion: str
+    zdccreated: datetime
+    zdcchanged: datetime
+    zdcname: str
+    zdcxepsg2154: int
+    zdcyepsg2154: int
+    zdctown: str
+    zdcpostalregion: str
+    zdctype: StopAreaType
+
+
 class StopAreaStopAssociationFields(Struct, kw_only=True):
     arrid: str  # TODO: use int ?
     artid: str | None = None
@@ -184,6 +197,8 @@ class Line(Struct):
 
 Lines = dict[str, Line]
 
+Destinations = dict[str, set[str]]
+
 
 # TODO: Set structs frozen
 class StopLineAssoFields(Struct):

backend/backend/models/__init__.py

@@ -1,6 +1,14 @@
 from .line import Line, LinePicto
-from .stop import Stop, StopArea
+from .stop import ConnectionArea, Stop, StopArea, StopShape
 from .user import UserLastStopSearchResults
 
 
-__all__ = ["Line", "LinePicto", "Stop", "StopArea", "UserLastStopSearchResults"]
+__all__ = [
+    "ConnectionArea",
+    "Line",
+    "LinePicto",
+    "Stop",
+    "StopArea",
+    "StopShape",
+    "UserLastStopSearchResults",
+]

backend/backend/models/stop.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import Iterable, Self, Sequence, TYPE_CHECKING
+from typing import Iterable, Sequence, TYPE_CHECKING
 
 from sqlalchemy import (
     BigInteger,
@@ -8,6 +8,8 @@ from sqlalchemy import (
     Enum,
     Float,
     ForeignKey,
+    Integer,
+    JSON,
     select,
     String,
     Table,
@@ -48,19 +50,26 @@ class _Stop(Base):
     postal_region = mapped_column(String, nullable=False)
     xepsg2154 = mapped_column(BigInteger, nullable=False)
     yepsg2154 = mapped_column(BigInteger, nullable=False)
+
     version = mapped_column(String, nullable=False)
     created_ts = mapped_column(BigInteger)
     changed_ts = mapped_column(BigInteger, nullable=False)
+
     lines: Mapped[list[Line]] = relationship(
         "Line",
         secondary="line_stop_association_table",
         back_populates="stops",
-        # lazy="joined",
         lazy="selectin",
     )
     areas: Mapped[list["StopArea"]] = relationship(
         "StopArea", secondary=stop_area_stop_association_table, back_populates="stops"
     )
+    connection_area_id: Mapped[int] = mapped_column(
+        ForeignKey("connection_areas.id"), nullable=True
+    )
+    connection_area: Mapped["ConnectionArea"] = relationship(
+        back_populates="stops", lazy="selectin"
+    )
 
     __tablename__ = "_stops"
     __mapper_args__ = {"polymorphic_identity": "_stops", "polymorphic_on": kind}
@@ -108,6 +117,7 @@ class Stop(_Stop):
     accessibility = mapped_column(Enum(IdfmState), nullable=False)
     visual_signs_available = mapped_column(Enum(IdfmState), nullable=False)
     audible_signs_available = mapped_column(Enum(IdfmState), nullable=False)
+
     record_id = mapped_column(String, nullable=False)
     record_ts = mapped_column(BigInteger, nullable=False)
 
@@ -120,12 +130,12 @@ class StopArea(_Stop):
     id = mapped_column(BigInteger, ForeignKey("_stops.id"), primary_key=True)
 
     type = mapped_column(Enum(StopAreaType), nullable=False)
-    stops: Mapped[list["_Stop"]] = relationship(
+
-        "_Stop",
+    stops: Mapped[list["Stop"]] = relationship(
+        "Stop",
         secondary=stop_area_stop_association_table,
         back_populates="areas",
         lazy="selectin",
-        # lazy="joined",
     )
 
     __tablename__ = "stop_areas"
@@ -147,17 +157,17 @@ class StopArea(_Stop):
             stop_area_ids.add(stop_area_id)
             stop_ids.add(stop_id)
 
-        stop_areas_res = await session.execute(
+        stop_areas_res = await session.scalars(
             select(StopArea)
             .where(StopArea.id.in_(stop_area_ids))
             .options(selectinload(StopArea.stops))
         )
         stop_areas: dict[int, StopArea] = {
-            stop_area.id: stop_area for stop_area in stop_areas_res.scalars()
+            stop_area.id: stop_area for stop_area in stop_areas_res.all()
         }
 
-        stop_res = await session.execute(select(_Stop).where(_Stop.id.in_(stop_ids)))
+        stop_res = await session.execute(select(Stop).where(Stop.id.in_(stop_ids)))
-        stops: dict[int, _Stop] = {stop.id: stop for stop in stop_res.scalars()}
+        stops: dict[int, Stop] = {stop.id: stop for stop in stop_res.scalars()}
 
         found = 0
         for stop_area_id, stop_id in stop_area_to_stop_ids:
@@ -173,3 +183,78 @@ class StopArea(_Stop):
         await session.commit()
 
         return found
+
+
+class StopShape(Base):
+
+    db = db
+
+    id = mapped_column(BigInteger, primary_key=True)  # Same id than ConnectionArea
+    type = mapped_column(Integer, nullable=False)
+    bounding_box = mapped_column(JSON)
+    points = mapped_column(JSON)
+
+    __tablename__ = "stop_shapes"
+
+
+class ConnectionArea(Base):
+
+    db = db
+
+    id = mapped_column(BigInteger, primary_key=True)
+
+    name = mapped_column(String, nullable=False)
+    town_name = mapped_column(String, nullable=False)
+    postal_region = mapped_column(String, nullable=False)
+    xepsg2154 = mapped_column(BigInteger, nullable=False)
+    yepsg2154 = mapped_column(BigInteger, nullable=False)
+    transport_mode = mapped_column(Enum(StopAreaType), nullable=False)
+
+    version = mapped_column(String, nullable=False)
+    created_ts = mapped_column(BigInteger)
+    changed_ts = mapped_column(BigInteger, nullable=False)
+
+    stops: Mapped[list["_Stop"]] = relationship(back_populates="connection_area")
+
+    __tablename__ = "connection_areas"
+
+    # TODO: Merge with StopArea.add_stops
+    @classmethod
+    async def add_stops(
+        cls, conn_area_to_stop_ids: Iterable[tuple[int, int]]
+    ) -> int | None:
+        session = cls.db.session
+        if session is None:
+            return None
+
+        conn_area_ids, stop_ids = set(), set()
+        for conn_area_id, stop_id in conn_area_to_stop_ids:
+            conn_area_ids.add(conn_area_id)
+            stop_ids.add(stop_id)
+
+        conn_area_res = await session.execute(
+            select(ConnectionArea)
+            .where(ConnectionArea.id.in_(conn_area_ids))
+            .options(selectinload(ConnectionArea.stops))
+        )
+        conn_areas: dict[int, ConnectionArea] = {
+            conn.id: conn for conn in conn_area_res.scalars()
+        }
+
+        stop_res = await session.execute(select(_Stop).where(_Stop.id.in_(stop_ids)))
+        stops: dict[int, _Stop] = {stop.id: stop for stop in stop_res.scalars()}
+
+        found = 0
+        for conn_area_id, stop_id in conn_area_to_stop_ids:
+            if (conn_area := conn_areas.get(conn_area_id)) is not None:
+                if (stop := stops.get(stop_id)) is not None:
+                    conn_area.stops.append(stop)
+                    found += 1
+                else:
+                    print(f"No stop found for {stop_id} id")
+            else:
+                print(f"No connection area found for {conn_area_id}")
+
+        await session.commit()
+
+        return found

backend/backend/schemas/__init__.py

@@ -1,5 +1,14 @@
 from .line import Line, TransportMode
 from .next_passage import NextPassage, NextPassages
-from .stop import Stop, StopArea
+from .stop import Stop, StopArea, StopShape
 
-__all__ = ["Line", "NextPassage", "NextPassages", "Stop", "StopArea", "TransportMode"]
+
+__all__ = [
+    "Line",
+    "NextPassage",
+    "NextPassages",
+    "Stop",
+    "StopArea",
+    "StopShape",
+    "TransportMode",
+]

backend/backend/schemas/stop.py

@@ -23,3 +23,10 @@ class StopArea(BaseModel):
     type: StopAreaType
     lines: list[str]  # SNCF lines are linked to stop areas and not stops.
     stops: list[Stop]
+
+
+class StopShape(BaseModel):
+    id: int
+    type: int
+    bbox: list[float]
+    points: list[tuple[float, float]]

backend/main.py

@@ -9,8 +9,8 @@ from fastapi.staticfiles import StaticFiles
 from rich import print
 
 from backend.db import db
-from backend.idfm_interface import IdfmInterface
+from backend.idfm_interface import Destinations as IdfmDestinations, IdfmInterface
-from backend.models import Line, Stop, StopArea
+from backend.models import Line, Stop, StopArea, StopShape
 from backend.schemas import (
     Line as LineSchema,
     TransportMode,
@@ -18,6 +18,7 @@ from backend.schemas import (
     NextPassages as NextPassagesSchema,
     Stop as StopSchema,
     StopArea as StopAreaSchema,
+    StopShape as StopShapeSchema,
 )
 
 API_KEY = environ.get("API_KEY")
@@ -214,3 +215,43 @@ async def get_next_passages(stop_id: str) -> NextPassagesSchema | None:
         ts=service_delivery.ResponseTimestamp.timestamp(),
         passages=by_line_by_dst_passages,
     )
+
+
+@app.get("/stop/{stop_id}/destinations")
+async def get_stop_destinations(
+    stop_id: int,
+) -> IdfmDestinations | None:
+    destinations = await idfm_interface.get_destinations(stop_id)
+
+    return destinations
+
+
+# TODO: Rename endpoint -> /stop/{stop_id}/shape
+@app.get("/stop_shape/{stop_id}")
+async def get_stop_shape(stop_id: int) -> StopShapeSchema | None:
+    connection_area = None
+
+    if (stop := await Stop.get_by_id(stop_id)) is not None:
+        connection_area = stop.connection_area
+
+    elif (stop_area := await StopArea.get_by_id(stop_id)) is not None:
+        connection_areas = {stop.connection_area for stop in stop_area.stops}
+        connection_areas_len = len(connection_areas)
+        if connection_areas_len == 1:
+            connection_area = connection_areas.pop()
+
+        else:
+            prefix = "More than one" if connection_areas_len else "No"
+            msg = f"{prefix} connection area has been found for stop area #{stop_id}"
+            raise HTTPException(status_code=500, detail=msg)
+
+    if (
+        connection_area is not None
+        and (shape := await StopShape.get_by_id(connection_area.id)) is not None
+    ):
+        return StopShapeSchema(
+            id=shape.id, type=shape.type, bbox=shape.bounding_box, points=shape.points
+        )
+
+    msg = f"No shape found for stop {stop_id}"
+    raise HTTPException(status_code=404, detail=msg)

backend/pyproject.toml

@@ -16,6 +16,7 @@ fastapi = "^0.88.0"
 uvicorn = "^0.20.0"
 asyncpg = "^0.27.0"
 msgspec = "^0.12.0"
+pyshp = "^2.3.1"
 
 [build-system]
 requires = ["poetry-core"]

frontend/package.json

@@ -12,9 +12,11 @@
   "license": "MIT",
   "devDependencies": {
     "@types/leaflet": "^1.9.0",
+    "@types/proj4": "^2.5.2",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "eslint": "^8.32.0",
     "eslint-plugin-solid": "^0.9.3",
+    "sass": "^1.62.0",
     "typescript": "^4.9.4",
     "typescript-eslint-language-service": "^5.0.0",
     "vite": "^4.0.3",
@@ -24,10 +26,12 @@
     "@hope-ui/solid": "^0.6.7",
     "@motionone/solid": "^10.15.5",
     "@solid-primitives/date": "^2.0.5",
+    "@solid-primitives/scroll": "^2.0.10",
     "@stitches/core": "^1.2.8",
     "date-fns": "^2.29.3",
-    "leaflet": "^1.9.3",
     "matrix-widget-api": "^1.1.1",
+    "ol": "^7.3.0",
+    "proj4": "^2.9.0",
     "solid-js": "^1.6.6",
     "solid-transition-group": "^0.0.10"
   }

frontend/src/App.scss

@@ -10,12 +10,14 @@
 
 	display: flex;
 	text-align: center;
-}
 
-.panel {
+	.panel {
-	min-width: 100%;
+		min-width: 100%;
-	height: inherit;
+		height: inherit;
-	width: inherit;
+		width: inherit;
 
-	scroll-snap-align: center;
+		scroll-snap-align: center;
+
+		background-color: var(--idfm-black);
+	}
 }

frontend/src/App.tsx

@@ -3,11 +3,12 @@ import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWid
 import { HopeProvider } from "@hope-ui/solid";
 
 import { BusinessDataProvider } from './businessData';
-import { SearchProvider } from './search';
+import { AppContextProvider } from './appContext';
-import { PassagesDisplay } from './passagesDisplay';
-import { StopsManager } from './stopsManager';
 
-import styles from './App.module.css';
+import { PassagesDisplay } from './passagesDisplay';
+import { StopsSearchMenu } from './stopsSearchMenu';
+
+import "./App.scss";
 
 
 function parseFragment() {
@@ -44,18 +45,18 @@ const App: Component = () => {
 
 	return (
 		<BusinessDataProvider>
-			<SearchProvider>
+			<AppContextProvider>
 				<HopeProvider>
-					<div class={styles.App} data-panelsnap-id="1">
+					<div class="App">
-						<div class={styles.panel}>
+						<div class="panel">
-							<StopsManager />
+							<StopsSearchMenu />
 						</div>
-						<div class={styles.panel}>
+						<div class="panel">
 							<PassagesDisplay />
 						</div>
 					</div>
 				</HopeProvider>
-			</SearchProvider>
+			</AppContextProvider>
 		</BusinessDataProvider>
 	);
 };

frontend/src/_common.scss

@@ -1,5 +1,5 @@
 /* Idfm: 1860x1080px */
-.passagesDisplay {
+%widget {
 	aspect-ratio: 16/9;
 	--reverse-aspect-ratio: 9/16;
 	/* height is set according to the aspect-ratio, don´t touch it */
@@ -7,12 +7,10 @@
 
 	display: flex;
 	flex-direction: column;
-
-	background-color: var(--idfm-black);
 }
 
 /* Idfm: 1800x100px (margin: 17px 60px) */
-.header {
+%header {
 	width: calc(1800/1920*100%);
 	height: calc(100/1080*100%);
 	/*Percentage margin are computed relatively to the nearest block container's width, not height */
@@ -25,39 +23,19 @@
 	font-family: IDFVoyageur-bold;
 }
 
-.header .transportMode {
+.header {
-	aspect-ratio: 1/1;
+	@extend %header;
-	height: 100%;
-	margin: 0;
-	margin-right: calc(23/1920*100%);
 }
 
-.header .title {
+%title {
 	height: 50%;
 	width: 70%;
 
 	margin-right: auto;
 }
 
-.header .clock {
-	width: calc(175/1920*100%);
-	height: calc(80/100*100%);
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	
-	border:solid var(--idfm-white) 3px;
-	border-radius: calc(9/86*100%);
-}
-
-.header .clock svg {
-	aspect-ratio: 2.45;
-	height: calc(0.7*100%);
-}
-
 /* Idfm: 1860x892px (margin: 0px 30px) */
-.panelsContainer {
+%body {
 	width: calc(1860/1920*100%);
 	height: calc(892/1080*100%);
 	margin: 0 calc(30/1920*100%);
@@ -68,12 +46,13 @@
 	background-color: white;
 
 	border-collapse:separate;
-	border:solid var(--idfm-black) 1px;
+	// border:solid var(--idfm-black) 1px;
 	border-radius: calc(15/1920*100%);
 }
 
+
 /* Idfm: 1800x54px (margin: 0px 50px) */
-.footer {
+%footer {
 	width: calc(1820/1920*100%);
 	height: calc(54/1080*100%);
 	margin: 0 calc(50/1920*100%);
@@ -83,6 +62,10 @@
 	justify-content: right;
 }
 
+.footer {
+	@extend %footer;
+}
+
 .footer div {
 	aspect-ratio: 1;
 	height: 50%;

frontend/src/_utils.scss

@@ -0,0 +1,31 @@
+%transportMode {
+	aspect-ratio : 1 / 1;
+}
+
+%linePicto {
+	font-family: IDFVoyageur-bold;
+}
+
+%tramLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%trainLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%metroLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 1 / 1;
+}
+
+%busLinePicto {
+	@extend %linePicto;
+
+	aspect-ratio : 2.25;
+}

frontend/src/appContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, JSX } from 'solid-js';
+import { createStore } from "solid-js/store";
+
+import { Stop } from './types';
+
+export interface AppContextStore {
+	getDisplayedStops: () => Stop[];
+	setDisplayedStops: (stops: Stop[]) => void;
+};
+
+export const AppContextContext = createContext<AppContextStore>();
+
+export function AppContextProvider(props: { children: JSX.Element }) {
+
+	type Store = {
+		displayedStops: Stop[];
+	};
+
+	const [store, setStore] = createStore<Store>({
+		displayedStops: [],
+	});
+
+	const getDisplayedStops = (): Stop[] => {
+		return store.displayedStops;
+	}
+
+	const setDisplayedStops = (stops: Stop[]): void => {
+		console.log("setDisplayedStops=", stops);
+		// setStore((s: Store) => {
+		setStore('displayedStops', stops);
+		// 	return s;
+		// });
+	}
+
+	return (
+		<AppContextContext.Provider value={{
+			getDisplayedStops, setDisplayedStops,
+		}}>
+			{props.children}
+		</AppContextContext.Provider>
+	);
+
+};

frontend/src/businessData.tsx

@@ -1,20 +1,28 @@
-import { createContext, createSignal, JSX } from 'solid-js';
+import { batch, createContext, createSignal, JSX } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
-import { Line, Lines, Passage, Passages, Stop, Stops } from './types';
+import { Line, Lines, Passage, Passages, Stop, StopShape, StopShapes, Stops } from './types';
 
 
+export type StopDestinations = Record<string, string[]>;
+
 export interface BusinessDataStore {
 	getLine: (lineId: string) => Promise<Line>;
 	getLinePassages: (lineId: string) => Record<string, Passage[]>;
+	getLineDestinations: (lineId: string) => string[];
+	getDestinationPassages: (lineId: string, destination: string) => Passage[];
 
 	passages: () => Passages;
+	getPassagesLineIds: () => string[];
 	refreshPassages: (stopId: number) => Promise<void>;
 	addPassages: (passages: Passages) => void;
 	clearPassages: () => void;
 
 	getStop: (stopId: number) => Stop | undefined;
 	searchStopByName: (name: string) => Promise<Stops>;
+
+	getStopDestinations: (stopId: number) => Promise<StopDestinations>;
+	getStopShape: (stopId: number) => Promise<StopShape | undefined>;
 };
 
 export const BusinessDataContext = createContext<BusinessDataStore>();
@@ -27,9 +35,10 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
 		lines: Lines;
 		passages: Passages;
 		stops: Stops;
+		stopShapes: StopShapes;
 	};
 
-	const [store, setStore] = createStore<Store>({ lines: {}, passages: {}, stops: {} });
+	const [store, setStore] = createStore<Store>({ lines: {}, passages: {}, stops: {}, stopShapes: {} });
 
 	const getLine = async (lineId: string): Promise<Line> => {
 		let line = store.lines[lineId];
@@ -46,22 +55,90 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
 
 	const getLinePassages = (lineId: string): Record<string, Passage[]> => {
 		return store.passages[lineId];
-	};
+	}
+
+	const getLineDestinations = (lineId: string): string[] => {
+		return Object.keys(store.passages[lineId]);
+	}
+
+	// TODO: Remove this method: it's based on the next passages and return nothing until the refreshPassages is called.
+	const getDestinationPassages = (lineId: string, destination: string): Passage[] => {
+		return store.passages[lineId][destination];
+	}
 
 	const passages = (): Passages => {
 		return store.passages;
 	}
 
+	const getPassagesLineIds = (): string[] => {
+		return Object.keys(store.passages);
+	}
+
+	const _cleanupPassages = (passages: Passages): void => {
+		const deadline = Math.floor(Date.now() / 1000) - 60;
+		for (const linePassages of Object.values(passages)) {
+			for (const destination of Object.keys(linePassages)) {
+				const destinationPassages = linePassages[destination];
+				const cleaned = [];
+				for (const passage of destinationPassages) {
+					if (passage.expectedDepartTs > deadline) {
+						cleaned.push(passage);
+					}
+				}
+				linePassages[destination] = cleaned;
+			}
+		}
+	}
+
 	const refreshPassages = async (stopId: number): Promise<void> => {
 		const httpOptions = { headers: { "Content-Type": "application/json" } };
 		console.log(`Fetching data for ${stopId}`);
 		const data = await fetch(`${serverUrl()}/stop/nextPassages/${stopId}`, httpOptions);
 		const response = await data.json();
+		_cleanupPassages(response.passages);
 		addPassages(response.passages);
 	}
 
 	const addPassages = (passages: Passages): void => {
-		setStore('passages', passages);
+		batch(() => {
+			const storePassages = store.passages;
+			for (const lineId of Object.keys(passages)) {
+				const newLinePassages = passages[lineId];
+				const linePassages = storePassages[lineId];
+				if (linePassages === undefined) {
+					setStore('passages', lineId, newLinePassages);
+				}
+				else {
+					for (const destination of Object.keys(newLinePassages)) {
+						const newLinePassagesDestination = newLinePassages[destination];
+						const linePassagesDestination = linePassages[destination];
+						if (linePassagesDestination === undefined) {
+							setStore('passages', lineId, destination, newLinePassagesDestination);
+						}
+						else {
+							if (linePassagesDestination.length - newLinePassagesDestination.length != 0) {
+								console.log(`Server provides ${newLinePassagesDestination.length} passages, \
+${linePassagesDestination.length} here... refresh all them.`);
+								setStore('passages', lineId, destination, newLinePassagesDestination);
+							}
+							else {
+								linePassagesDestination.forEach((passage, index) => {
+									const newPassage = newLinePassagesDestination[index];
+									if (passage.expectedDepartTs != newPassage.expectedDepartTs) {
+										console.log(`Refresh expectedDepartTs (${passage.expectedDepartTs} -> ${newPassage.expectedDepartTs}`);
+										setStore('passages', lineId, destination, index, 'expectedDepartTs', newPassage.expectedDepartTs);
+									}
+									if (passage.expectedArrivalTs != newPassage.expectedArrivalTs) {
+										console.log(`Refresh expectedArrivalTs (${passage.expectedArrivalTs} -> ${newPassage.expectedArrivalTs}`);
+										setStore('passages', lineId, destination, index, 'expectedArrivalTs', newPassage.expectedArrivalTs);
+									}
+								});
+							}
+						}
+					}
+				}
+			}
+		});
 	}
 
 	const clearPassages = (): void => {
@@ -87,13 +164,39 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
 		for (const stop of stops) {
 			byIdStops[stop.id] = stop;
 			setStore('stops', stop.id, stop);
+			for (const innerStop of stop.stops) {
+				setStore('stops', innerStop.id, innerStop);
+			}
 		}
 		return byIdStops;
 	}
 
+	const getStopDestinations = async (stopId: number): Promise<StopDestinations> => {
+		const data = await fetch(`${serverUrl()}/stop/${stopId}/destinations`, {
+			headers: { 'Content-Type': 'application/json' }
+		});
+		const response = await data.json();
+		return response;
+	}
+
+	const getStopShape = async (stopId: number): Promise<StopShape | undefined> => {
+		let shape = store.stopShapes[stopId];
+		if (shape === undefined) {
+			console.log(`No shape found for ${stopId} stop... fetch it from backend.`);
+			const data = await fetch(`${serverUrl()}/stop_shape/${stopId}`, {
+				headers: { 'Content-Type': 'application/json' }
+			});
+			shape = await data.json();
+			setStore('stopShapes', stopId, shape);
+		}
+		return shape;
+	}
+
 	return (
 		<BusinessDataContext.Provider value={{
-			getLine, getLinePassages, passages, refreshPassages, addPassages, clearPassages, getStop, searchStopByName
+			getLine, getLinePassages, getLineDestinations, getDestinationPassages, passages, getPassagesLineIds,
+			refreshPassages, addPassages, clearPassages,
+			getStop, getStopDestinations, getStopShape, searchStopByName
 		}}>
 			{props.children}
 		</BusinessDataContext.Provider>

frontend/src/extra/iconHamburgerMenu.tsx

@@ -0,0 +1,19 @@
+import { createIcon } from "@hope-ui/solid";
+
+
+// From https://github.com/hope-ui/hope-ui/blob/main/apps/docs/src/icons/IconHamburgerMenu.tsx
+
+export const IconHamburgerMenu = createIcon({
+	viewBox: "0 0 15 15",
+	path: () => (
+		<path
+			d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386
+	13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5
+	8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761
+	13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+			/>
+	),
+});

frontend/src/index.tsx

@@ -1,7 +1,7 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';
 
-import './index.css';
+import './index.scss';
 import App from './App';
 
 render(() => (<App/>), document.getElementById('root') as HTMLElement);

frontend/src/passagesDisplay.scss

@@ -0,0 +1,60 @@
+@use "_common";
+@use "_utils";
+
+.passagesDisplay {
+	@extend %widget;
+
+	.header {
+		$header-element-height: calc(80/100*100%);
+		$component-border: solid var(--idfm-white) calc(0.25*1vh);
+		$component-border-radius: calc(9/86*100%);
+		.transportMode {
+			@extend %transportMode;
+
+			height: 100%;
+			margin: 0;
+			margin-right: calc(23/1920*100%);
+		}
+
+		.title {
+			@extend %title;
+		}
+
+		.menu {
+			height: $header-element-height;
+			aspect-ratio: 1;
+			margin-right: calc(30/1920*100%);
+			margin-left: auto;
+
+			button {
+				height: 100%;
+				aspect-ratio: 1;
+
+				background-color: var(--idfm-black);
+				border: $component-border;
+				border-radius: $component-border-radius;
+			}
+		}
+
+		.clock {
+			width: calc(175/1920*100%);
+			height: $header-element-height;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			border: $component-border;
+			border-radius: $component-border-radius;
+
+			svg {
+				aspect-ratio: 2.45;
+				height: calc(0.7*100%);
+			}
+		}
+	}
+
+	.body {
+		@extend %body
+	}
+}

frontend/src/passagesDisplay.tsx

@@ -1,53 +1,223 @@
-import { createEffect, createResource, createSignal, For, JSX, ParentComponent, Show, useContext, VoidComponent } from "solid-js";
+import { createContext, createEffect, createResource, createSignal, For, JSX, ParentComponent, Show, useContext, VoidComponent } from "solid-js";
 import { createStore } from "solid-js/store";
 import { createDateNow } from "@solid-primitives/date";
+import { IconButton, Menu, MenuTrigger, MenuContent, MenuItem } from "@hope-ui/solid";
 import { format } from "date-fns";
 
 import { BusinessDataContext, BusinessDataStore } from "./businessData";
-import { SearchContext, SearchStore } from "./search";
+import { AppContextContext, AppContextStore } from "./appContext";
 
-import { Passage, Passages } from "./types";
+import { getTransportModeSrc, PositionedPanel } from "./utils";
-import { getTransportModeSrc } from "./utils";
 import { PassagesPanel } from "./passagesPanel";
+import { IconHamburgerMenu } from './extra/iconHamburgerMenu';
+
+import "./passagesDisplay.scss";
 
 
-import styles from "./passagesDisplay.module.css";
+interface PassagesDisplayStore {
+	isPassagesRefreshEnabled: () => boolean;
+	enablePassagesRefresh: () => void;
+	disablePassagesRefresh: () => void;
+	togglePassagesRefresh: () => void;
 
+	getPanels: () => PositionedPanel[];
+	setPanels: (panels: PositionedPanel[]) => void;
 
-export const PassagesDisplay: ParentComponent = () => {
+	getDisplayedPanelId: () => number;
+	setDisplayedPanelId: (panelId: number) => void;
+};
 
-	const maxPassagePerPanel = 5;
+const PassagesDisplayContext = createContext<PassagesDisplayStore>();
-	const syncPeriodMsec = 20 * 1000;
+
-	const panelSwitchPeriodMsec = 4 * 1000;
+function PassagesDisplayProvider(props: { children: JSX.Element }) {
+
+	type Store = {
+		refreshEnabled: boolean;
+		panels: PositionedPanel[];
+		displayedPanelId: number;
+	};
+
+	const [store, setStore] = createStore<Store>({ refreshEnabled: true, panels: [], displayedPanelId: 0 });
+
+	const isPassagesRefreshEnabled = (): boolean => {
+		return store.refreshEnabled;
+	}
+
+	const enablePassagesRefresh = (): void => {
+		setStore('refreshEnabled', true);
+	}
+
+	const disablePassagesRefresh = (): void => {
+		setStore('refreshEnabled', false);
+	}
+
+	const togglePassagesRefresh = (): void => {
+		setStore('refreshEnabled', !store.refreshEnabled);
+	}
+
+	const getPanels = (): PositionedPanel[] => {
+		return store.panels;
+	}
+	const setPanels = (panels: PositionedPanel[]): void => {
+		setStore('panels', panels);
+	}
+
+	const getDisplayedPanelId = (): number => {
+		return store.displayedPanelId;
+	}
+	const setDisplayedPanelId = (panelId: number): void => {
+		setStore('displayedPanelId', panelId);
+	}
+
+	return (
+		<PassagesDisplayContext.Provider value={{
+			isPassagesRefreshEnabled, enablePassagesRefresh,
+			disablePassagesRefresh, togglePassagesRefresh,
+			getPanels, setPanels,
+			getDisplayedPanelId, setDisplayedPanelId
+		}}>
+			{props.children}
+		</PassagesDisplayContext.Provider>
+	);
+}
+
+// TODO: Sort transport modes by weight
+const Header: VoidComponent<{ title: string }> = (props) => {
 
 	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	// TODO: Use props instead
+	const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
-	const searchStore: SearchStore | undefined = useContext(SearchContext);
 
-	if (businessDataStore === undefined || searchStore === undefined)
+	if (businessDataStore === undefined || passagesDisplayStore === undefined)
 		return <div />;
 
-	const { passages, getLine, getLinePassages, refreshPassages, clearPassages } = businessDataStore;
+	const { getLine, passages } = businessDataStore;
-	const { getDisplayedStops } = searchStore;
+	const { isPassagesRefreshEnabled, togglePassagesRefresh } = passagesDisplayStore;
-
-	const [displayedPanelId, setDisplayedPanelId] = createSignal<number>(0);
-
-	type PositionnedPanel = {
-		position: number;
-		// TODO: Should be PassagesPanelComponent ?
-		panel: JSX.Element;
-	};
-	const [panels, setPanels] = createStore<PositionnedPanel[]>([]);
 
 	const [dateNow] = createDateNow(1000);
 
+	const computeTransportModes = async (lineIds: string[]): Promise<string[]> => {
+		const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId)));
+		const urls: Set<string> = new Set();
+		for (const line of lines) {
+			const src = getTransportModeSrc(line.transportMode, false);
+			if (src !== undefined) {
+				urls.add(src);
+			}
+		}
+		return Array.from(urls);
+	}
+	const [linesIds, setLinesIds] = createSignal<string[]>([]);
+	const [transportModeUrls] = createResource<string[], string[]>(linesIds, computeTransportModes);
+
+	createEffect(() => {
+		setLinesIds(Object.keys(passages()));
+	});
+
+	return (
+		<div class="header">
+			<Show when={transportModeUrls() !== undefined} >
+				<For each={transportModeUrls()}>
+					{(url) =>
+						<div class="transportMode">
+							<img src={url} />
+						</div>
+					}
+				</For>
+			</Show>
+			<div class="title">
+				<svg viewBox="0 0 1260 50">
+					<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
+						{props.title}
+					</text>
+				</svg>
+			</div>
+			<div class="menu">
+				<Menu>
+					<MenuTrigger
+						as={IconButton}
+						icon=<IconHamburgerMenu />
+					/>
+					<MenuContent>
+						<MenuItem onSelect={() => togglePassagesRefresh()}>{isPassagesRefreshEnabled() ? "Disable" : "Enable"}</MenuItem>
+					</MenuContent>
+				</Menu>
+			</div>
+			<div class="clock">
+				<svg viewBox="0 0 115 43">
+					<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
+						{format(dateNow(), "HH:mm")}
+					</text>
+				</svg>
+			</div>
+		</div >
+	);
+};
+
+const Footer: VoidComponent<{}> = () => {
+
+	const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
+
+	if (passagesDisplayStore === undefined)
+		return <div />;
+
+	const { getDisplayedPanelId, getPanels } = passagesDisplayStore;
+
+	return (
+		<div class="footer">
+			<For each={getPanels()}>
+				{(panel) => {
+					const position = panel.position;
+					return (
+						<div>
+							<svg viewBox="0 0 29 29">
+								<circle cx="50%" cy="50%" r="13" stroke="#ffffff" stroke-width="3"
+									style={{ fill: `var(--idfm-${position == getDisplayedPanelId() ? "white" : "black"})` }}
+								/>
+							</svg>
+						</div>
+					);
+				}}
+			</For>
+		</div>
+	);
+}
+
+const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: number, panelSwitchPeriodMsec: number }> = (props) => {
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
+	const passagesDisplayStore: PassagesDisplayStore | undefined = useContext(PassagesDisplayContext);
+
+	if (businessDataStore === undefined || appContextStore === undefined || passagesDisplayStore === undefined) {
+		return <div />;
+	}
+
+	const { getLineDestinations, passages, getPassagesLineIds, clearPassages, refreshPassages } = businessDataStore;
+	const { isPassagesRefreshEnabled, getDisplayedPanelId, setDisplayedPanelId, getPanels, setPanels } = passagesDisplayStore;
+	const { getDisplayedStops } = appContextStore;
+
 	setInterval(() => {
-		let nextPanelId = displayedPanelId() + 1;
+		let nextPanelId = getDisplayedPanelId() + 1;
-		if (nextPanelId >= panels.length) {
+		if (nextPanelId >= getPanels().length) {
 			nextPanelId = 0;
 		}
 		setDisplayedPanelId(nextPanelId);
-	}, panelSwitchPeriodMsec);
+	}, props.panelSwitchPeriodMsec);
+
+	setInterval(
+		async () => {
+			if (isPassagesRefreshEnabled()) {
+				const stops = getDisplayedStops();
+				if (stops.length > 0) {
+					refreshPassages(stops[0].id);
+				}
+			}
+			else {
+				console.log("Passages refresh disabled... skip it.");
+			}
+		},
+		props.syncPeriodMsec
+	);
 
 	createEffect(() => {
 		console.log("######### onStopIdUpdate #########");
@@ -64,139 +234,65 @@ export const PassagesDisplay: ParentComponent = () => {
 		}
 	});
 
-	setInterval(
+	return (
-		async () => {
+		<div class="body">
-			const stops = getDisplayedStops();
+			{() => {
-			if (stops.length > 0) {
+				setPanels([]);
-				refreshPassages(stops[0].id);
-			}
-		},
-		syncPeriodMsec
-	);
 
-	// TODO: Sort transport modes by weight
+				let newPanels = [];
-	const Header: VoidComponent<{ passages: Passages, title: string }> = (props) => {
+				let positioneds: PositionedPanel[] = [];
+				let index = 0;
 
-		const computeTransportModes = async (lineIds: string[]): Promise<string[]> => {
+				let lineIds: string[] = [];
-			const lines = await Promise.all(lineIds.map((lineId) => getLine(lineId)));
+				let destinationsNb = 0;
-			const urls: Set<string> = new Set();
+
-			for (const line of lines) {
+				for (const lineId of getPassagesLineIds()) {
-				const src = getTransportModeSrc(line.transportMode, false);
+					const lineDestinations = getLineDestinations(lineId);
-				if (src !== undefined) {
+
-					urls.add(src);
+					if (lineDestinations.length <= props.maxPassagesPerPanel - destinationsNb) {
+						lineIds.push(lineId);
+						destinationsNb += lineDestinations.length;
+					}
+					else {
+						const panelid = index++;
+						const panel = <PassagesPanel stopId={getDisplayedStops()[0].id} lineIds={lineIds} show={panelid == getDisplayedPanelId()} />;
+						newPanels.push(panel);
+						positioneds.push({ position: panelid, panel: panel });
+
+						lineIds = [lineId];
+						destinationsNb = lineDestinations.length;
+					}
+				}
+				if (destinationsNb) {
+					const panelId = index++;
+					const panel = <PassagesPanel stopId={getDisplayedStops()[0].id} lineIds={lineIds} show={panelId == getDisplayedPanelId()} />;
+					newPanels.push(panel);
+					positioneds.push({ position: panelId, panel: panel });
 				}
-			}
-			return Array.from(urls);
-		}
 
-		const [linesIds, setLinesIds] = createSignal<string[]>([]);
+				setPanels(positioneds);
-		const [transportModeUrls] = createResource<string[], string[]>(linesIds, computeTransportModes);
 
-		createEffect(() => {
+				return newPanels;
-			setLinesIds(Object.keys(props.passages));
+			}}
-		});
+		</div>
+	);
+}
 
-		return (
+export const PassagesDisplay: ParentComponent = () => {
-			<div class={styles.header}>
-				<Show when={transportModeUrls() !== undefined} >
-					<For each={transportModeUrls()}>
-						{(url) =>
-							<div class={styles.transportMode}>
-								<img src={url} />
-							</div>
-						}
-					</For>
-				</Show>
-				<div class={styles.title}>
-					<svg viewBox="0 0 1260 50">
-						<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
-							{props.title}
-						</text>
-					</svg>
-				</div>
-				<div class={styles.clock}>
-					<svg viewBox="0 0 115 43">
-						<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
-							{format(dateNow(), "HH:mm")}
-						</text>
-					</svg>
-				</div>
-			</div >
-		);
-	};
 
-	const Footer: VoidComponent<{ panels: PositionnedPanel[] }> = (props) => {
+	const MAX_PASSAGES_PER_PANEL = 5;
-		return (
+
-			<div class={styles.footer}>
+	// TODO: Use props.
-				<For each={props.panels}>
+	const syncPeriodMsec = 20 * 1000;
-					{(panel) => {
+	const panelSwitchPeriodMsec = 4 * 1000;
-						const position = panel.position;
-						return (
-							<div>
-								<svg viewBox="0 0 29 29">
-									<circle cx="50%" cy="50%" r="13" stroke="#ffffff" stroke-width="3"
-										style={{ fill: `var(--idfm-${position == displayedPanelId() ? "white" : "black"})` }}
-									/>
-								</svg>
-							</div>
-						);
-					}}
-				</For>
-			</div>
-		);
-	}
 
 	return (
-		<div class={styles.passagesDisplay}>
+		<div class="passagesDisplay">
-			<Header title="Prochains passages" passages={passages()} />
+			<PassagesDisplayProvider>
-			<div class={styles.panelsContainer}>
+				<Header title="Prochains passages" />
-				{() => {
+				<Body maxPassagesPerPanel={MAX_PASSAGES_PER_PANEL} syncPeriodMsec={syncPeriodMsec} panelSwitchPeriodMsec={panelSwitchPeriodMsec} />
-					setPanels([]);
+				<Footer />
-
+			</PassagesDisplayProvider>
-					let newPanels = [];
-					let positioneds: PositionnedPanel[] = [];
-					let index = 0;
-
-					let chunk: Record<string, Record<string, Passage[]>> = {};
-					let chunkSize = 0;
-
-					console.log("passages=", passages());
-					for (const lineId of Object.keys(passages())) {
-						console.log("lineId=", lineId);
-						const byLinePassages = getLinePassages(lineId);
-						console.log("byLinePassages=", byLinePassages);
-						const byLinePassagesKeys = Object.keys(byLinePassages);
-						console.log("byLinePassagesKeys=", byLinePassagesKeys);
-
-						if (byLinePassagesKeys.length <= maxPassagePerPanel - chunkSize) {
-							chunk[lineId] = byLinePassages;
-							chunkSize += byLinePassagesKeys.length;
-						}
-						else {
-							const [store] = createStore(chunk);
-							const panelid = index++;
-							const panel = <PassagesPanel show={panelid == displayedPanelId()} passages={store} />;
-							newPanels.push(panel);
-							positioneds.push({ position: panelid, panel: panel });
-
-							chunk = {};
-							chunk[lineId] = byLinePassages;
-							chunkSize = byLinePassagesKeys.length;
-						}
-					}
-					if (chunkSize) {
-						const panelId = index++;
-						const [store] = createStore(chunk);
-						const panel = <PassagesPanel show={panelId == displayedPanelId()} passages={store} />;
-						newPanels.push(panel);
-						positioneds.push({ position: panelId, panel: panel });
-					}
-
-					setPanels(positioneds);
-					return newPanels;
-				}}
-			</div>
-			<Footer panels={panels} />
 		</div>
 	);
 };

frontend/src/passagesPanel.module.css

@@ -1,135 +0,0 @@
-.passagesContainer {
-	height: 100%;
-	width: 100%;
-
-	display: none;
-
-	position: relative;
-}
-
-.displayed {
-	display: block;
-}
-
-/* TODO: Remove the bottom border only if there are 5 displayed lines. */
-.passagesContainer .line:last-child {
-	border-bottom: 0;
-	/* To make up for the bottom border deletion */
-	padding-bottom: calc(2px);
-}
-
-/* Idfm: 1880x176px (margin: 0px 20px) */
-.line {
-	width: calc(1880/1920*100%);
-	height: calc(100% / 5);
-	margin: 0 calc(20/1920*100%);
-
-	display: flex;
-	align-items: center;
-
-	/* TODO: compute the border weight according to the parent height */
-	/* TODO: Disable border-bottom for the last .line  */
-	border-bottom: solid calc(2px);
-}
-
-.line svg {
-	font-family: IDFVoyageur-bold;
-	max-width: 100%;
-	max-height: 100%;
-}
-
-/* Idfm: 100x100px (margin: 0px 15px) */
-.transportMode {
-	aspect-ratio : 1 / 1;
-	height: calc(100/176*100%);
-	margin: 0 calc(15/1920*100%);
-}
-
-.tramLinePicto {
-	aspect-ratio : 1 / 1;
-	height: calc(100/176*100%);
-	margin-right: calc(23/1920*100%);
-}
-
-.busLinePicto {
-	aspect-ratio : 2.25;
-	height: calc(70/176*100%);
-	margin-right: calc(23/1920*100%);
-}
-
-.metroLinePicto {
-	aspect-ratio : 1 / 1;
-	height: calc(100/176*100%);
-	margin-right: calc(23/1920*100%);
-}
-
-.destination {
-	height: calc(60/176*100%);
-	width: 50%;
-
-	font-family: IDFVoyageur-bold;
-	text-align: left;
-}
-
-
-.trafficStatus {
-	height: calc(50/176*100%);
-	aspect-ratio: 35/50;
-	margin-left: auto;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.trafficStatus svg {
-	width: 100%;
-}
-
-.firstPassage {
-	height: calc(100/176*100%);
-	aspect-ratio: 2.5;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	padding-right: calc(30/1920*100%);
-
-	/* TODO: compute the border weight according to the parent width */
-	border-right: solid calc(5px);
-}
-
-.unavailableFirstPassage {
-	height: calc(100/176*100%);
-	aspect-ratio: calc(230/100);
-	margin-right: calc(30/1920*100%);
-
-	/* TODO: compute the border weight according to the parent width */
-	border-right: solid calc(5px);
-}
-
-.firstPassage svg {
-	aspect-ratio: 215/50;
-	height: calc(1/2*100%);
-}
-
-.secondPassage {
-	height: calc(45/176*100%);
-	aspect-ratio: calc(230/45);
-	margin-right: calc(30/1920*100%);
-}
-
-.secondPassage svg {
-	font-family: IDFVoyageur-regular;
-}
-
-.unavailableSecondPassage {
-	height: calc(100/176*100%);
-	aspect-ratio: calc(230/100);
-	margin-right: calc(30/1920*100%);
-}
-
-.unavailableSecondPassage svg {
-	font-family: IDFVoyageur-regular;
-}

frontend/src/passagesPanel.scss

@@ -0,0 +1,208 @@
+@use "_utils.scss";
+
+.body {
+	.passagesContainer {
+		height: 100%;
+		width: 100%;
+
+		display: none;
+
+		position: relative;
+
+		/* TODO: Remove the bottom border only if there are 5 displayed lines. */
+		.line:last-child {
+			border-bottom: 0;
+			/* To make up for the bottom border deletion */
+			padding-bottom: calc(2px);
+		}
+
+		/* Idfm: 1880x176px (margin: 0px 20px) */
+		.line {
+			width: calc(1880/1920*100%);
+			height: calc(100% / 5);
+			margin: 0 calc(20/1920*100%);
+
+			display: flex;
+			align-items: center;
+
+			/* TODO: compute the border weight according to the parent height */
+			/* TODO: Disable border-bottom for the last .line  */
+			border-bottom: solid calc(2px);
+
+			svg {
+				font-family: IDFVoyageur-bold;
+				max-width: 100%;
+				max-height: 100%;
+			}
+
+		}
+
+		/* Idfm: 100x100px (margin: 0px 15px) */
+		.transportMode {
+			@extend %transportMode;
+
+			height: calc(100/176*100%);
+			margin: 0 calc(15/1920*100%);
+		}
+
+		.busLinePicto {
+			@extend %busLinePicto;
+
+			height: calc(70/176*100%);
+			margin-right: calc(23/1920*100%);
+		}
+
+		.metroLinePicto, .tramLinePicto, .trainLinePicto {
+			aspect-ratio : 1 / 1;
+			height: calc(100/176*100%);
+			margin-right: calc(23/1920*100%);
+		}
+
+		.destination {
+			height: calc(60/176*100%);
+			width: 50%;
+
+			font-family: IDFVoyageur-bold;
+			text-align: left;
+		}
+
+		.trafficStatus {
+			height: calc(50/176*100%);
+			aspect-ratio: 35/50;
+			margin-left: auto;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			svg {
+				width: 100%;
+			}
+		}
+
+		.firstPassage {
+			height: calc(100/176*100%);
+			aspect-ratio: 2.5;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			padding-right: calc(30/1920*100%);
+
+			/* TODO: compute the border weight according to the parent width */
+			border-right: solid calc(5px);
+
+			svg {
+				aspect-ratio: 215/50;
+				height: calc(50%);
+			}
+		}
+
+		.unavailableFirstPassage {
+			height: calc(100/176*100%);
+			aspect-ratio: calc(230/100);
+
+			/* TODO: compute the border weight according to the parent width */
+			border-right: solid calc(5px);
+		}
+
+		.secondPassage {
+			height: calc(45/176*100%);
+			aspect-ratio: calc(230/45);
+			margin-right: calc(30/1920*100%);
+
+			svg {
+				font-family: IDFVoyageur-regular;
+			}
+		}
+
+		.unavailableSecondPassage {
+			height: calc(100/176*100%);
+			aspect-ratio: calc(230/100);
+			margin-right: calc(30/1920*100%);
+
+			svg {
+				font-family: IDFVoyageur-regular;
+			}
+		}
+
+		%withPlatformPassage {
+			height: calc(120/176*100%);
+
+			display: flex;
+			flex-direction: column;
+		}
+
+		.withPlatformFirstPassage {
+			@extend %withPlatformPassage;
+
+			aspect-ratio: 250/120;
+
+			padding-right: calc(30/1920*100%);
+			/* TODO: compute the border weight according to the parent width */
+			border-right: solid calc(5px);
+
+			.passage {
+				aspect-ratio: 215/50;
+				height: calc(1/2*100%);
+
+				font-family: IDFVoyageur-bold;
+				margin-top: calc(5/176*100%);
+			}
+
+			.platform {
+				margin-top: auto;
+				margin-bottom: calc(5/176*100%);
+
+				rect {
+					background-color: var(--idfm-black);
+				}
+
+				text {
+					vertical-align: middle;
+					font-family: IDFVoyageur-bold;
+				}
+			}
+		}
+
+		.withPlatformSecondPassage {
+			@extend %withPlatformPassage;
+
+			aspect-ratio: 215/120;
+
+			align-items: end;
+			justify-content: center;
+
+			margin-right: calc(30/1920*100%);
+
+			.passage {
+				aspect-ratio: 215/45;
+				height: calc(45/120*100%);
+				/* 5px + (first passage font size - second passage font size/2) to align passages... */
+				/* There must exist a better way to align them. */
+				margin-top: calc(7.5/176*100%);
+			}
+
+			svg {
+				font-family: IDFVoyageur-regular;
+			}
+
+			.platform {
+				rect {
+					background-color: var(--idfm-black);
+				}
+
+				text {
+					vertical-align: middle;
+					font-family: IDFVoyageur-bold;
+				}
+			}
+		}
+
+	}
+
+	.displayed {
+		display: block;
+	}
+}

frontend/src/passagesPanel.tsx

@@ -1,41 +1,16 @@
-import { VoidComponent, createEffect, createResource, createSignal, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
+import { VoidComponent, createResource, onMount, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
 import { createDateNow, getTime } from '@solid-primitives/date';
 import { AnimationOptions } from '@motionone/types';
 import { Motion } from "@motionone/solid";
+import { format } from "date-fns";
 
-import { Line, Passage, Passages, TrafficStatus } from './types';
+import { Line, TrafficStatus } from './types';
-import { renderLineTransportMode, renderLinePicto } from './utils';
+import { renderLineTransportMode, renderLinePicto, ScrollingText } from './utils';
 import { BusinessDataContext, BusinessDataStore } from "./businessData";
 
-import styles from './passagesPanel.module.css';
+import "./passagesPanel.scss";
 
 
-const TtwPassage: VoidComponent<{ passage: Passage, style: string, fontSize: number }> = (props) => {
-
-	const [dateNow] = createDateNow(5000);
-
-	const refTs = props.passage.expectedDepartTs !== null ? props.passage.expectedDepartTs : props.passage.expectedArrivalTs;
-	const ttwSec = refTs - (getTime(dateNow()) / 1000);
-	const isApproaching = ttwSec <= 60;
-
-	const transition: AnimationOptions = { duration: 3, repeat: Infinity };
-	return (
-		<div class={props.style}>
-			<svg viewBox={`0 0 215 ${props.fontSize}`}>
-				<Motion.text
-					x="100%" y="55%"
-					dominant-baseline="middle" text-anchor="end"
-					font-size={props.fontSize} style={{ fill: "#000000" }}
-					initial={isApproaching ? undefined : false}
-					animate={{ opacity: [1, 0, 1] }}
-					transition={transition}>
-					{Math.floor(ttwSec / 60)} min
-				</Motion.text>
-			</svg>
-		</div>
-	);
-}
-
 const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
 	const textStyle = { fill: "#000000" };
 
@@ -50,8 +25,89 @@ const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
 	);
 }
 
+const Platform: VoidComponent<{ name: string }> = (props) => {
+
+	const platformTextPaddingPx: number = 20;
+	const viewBoxWidthPx: number = 215;
+
+	let rectRef: SVGSVGElement | undefined = undefined;
+	let textRef: SVGTextElement | undefined = undefined;
+
+	onMount(() => {
+		if (rectRef !== undefined && textRef !== undefined) {
+			const textWidth = textRef.getComputedTextLength();
+			const rectWidth = textWidth + platformTextPaddingPx * 2;
+			rectRef.setAttribute("width", `${rectWidth}px`);
+			rectRef.setAttribute("x", `${viewBoxWidthPx - rectWidth}px`);
+			textRef.setAttribute("x", `${viewBoxWidthPx - platformTextPaddingPx}px`);
+		}
+	});
+
+	return (
+		<svg class="platform" viewBox={`0 0 ${viewBoxWidthPx} 40`}>
+			<rect ref={rectRef} x="0" y="0" height="100%" rx="9" ry="9" />
+			<text ref={textRef} x="100%" y="55%" dominant-baseline="middle" text-anchor="end" font-size="25" style={{ fill: "#ffffff" }}>
+				QUAI {props.name}
+			</text>
+		</svg>
+	);
+}
+
+const TtwPassage: VoidComponent<{
+	line: Line, destination: string, index: number, style: string,
+	withPlatformStyle: string, fontSize: number, fallbackStyle: string
+}> = (props) => {
+
+	const businessDataContext: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	if (businessDataContext === undefined)
+		return <div />;
+
+	const { getDestinationPassages } = businessDataContext;
+
+	const [dateNow] = createDateNow(10000);
+
+	const transition: AnimationOptions = { duration: 3, repeat: Infinity };
+
+	return (() => {
+		const passage = getDestinationPassages(props.line.id, props.destination)[props.index];
+
+		const refTs = passage !== undefined ? (passage.expectedDepartTs !== null ? passage.expectedDepartTs : passage.expectedArrivalTs) : 0;
+		const ttwSec = refTs - (getTime(dateNow()) / 1000);
+		const ttwRepr = ttwSec < 3600 ? `${Math.floor(ttwSec / 60).toString().padStart(2, "0")} min` : format(refTs * 1000, "HH:mm");
+		const isApproaching = ttwSec <= 60;
+
+		const text = <svg class="passage" viewBox={`0 0 215 ${props.fontSize}`}>
+			<Motion.text
+				x="100%" y="55%"
+				dominant-baseline="middle" text-anchor="end"
+				font-size={props.fontSize} style={{ fill: "#000000" }}
+				initial={isApproaching ? undefined : false}
+				animate={{ opacity: [1, 0, 1] }}
+				transition={transition}>
+				{ttwRepr}
+			</Motion.text>
+		</svg>;
+
+		return (
+			<Show when={passage !== undefined} fallback=<UnavailablePassage style={props.fallbackStyle} />>
+				<Show
+					when={passage.arrivalPlatformName !== null}
+					fallback={
+						<div class={props.style}>
+							{text}
+						</div>}>
+					<div class={props.withPlatformStyle}>
+						{text}
+						<Platform name={passage.arrivalPlatformName} />
+					</div>
+				</Show >
+			</Show >
+		);
+	});
+}
+
 /* TODO: Manage end of service */
-const DestinationPassages: VoidComponent<{ passages: Passage[], line: Line, destination: string }> = (props) => {
+const DestinationPassages: VoidComponent<{ line: Line, destination: string }> = (props) => {
 
 	/* TODO: Find where to get data to compute traffic status. */
 	const trafficStatusColor = new Map<TrafficStatus, string>([
@@ -62,43 +118,35 @@ const DestinationPassages: VoidComponent<{ passages: Passage[], line: Line, dest
 		[TrafficStatus.BYPASSED, "#ffffff"]
 	]);
 
-	const passagesLength = props.passages.length;
-	const firstPassage = passagesLength > 0 ? props.passages[0] : undefined;
-	const secondPassage = passagesLength > 1 ? props.passages[1] : undefined;
-
 	// TODO: Manage traffic status
 	// const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) };
 	const trafficStatusStyle = { fill: trafficStatusColor.get(TrafficStatus.UNKNOWN) };
 
 	return (
-		<div class={styles.line}>
+		<div class="line">
-			<div class={styles.transportMode}>
+			<div class="transportMode">
 				{renderLineTransportMode(props.line)}
 			</div>
-			{renderLinePicto(props.line, styles)}
+			{renderLinePicto(props.line)}
-			<div class={styles.destination}>
+			<div class="destination">
-				<svg viewBox="0 0 600 40">
+				<ScrollingText height={40} width={600} content={props.destination} />
-					<text x="0" y="50%" dominant-baseline="middle" font-size="40" style={{ fill: "#000000" }}>
-						{props.destination}
-					</text>
-				</svg>
 			</div>
-			<div class={styles.trafficStatus}>
+			<div class="trafficStatus">
 				<svg viewBox="0 0 51 51">
 					<circle cx="50%" cy="50%" r="24" stroke="#231f20" stroke-width="3" style={trafficStatusStyle} />
 				</svg>
 			</div>
-			<Show when={firstPassage !== undefined} fallback=<UnavailablePassage style={styles.unavailableFirstPassage} />>
+			<TtwPassage line={props.line} destination={props.destination} index={0}
-				<TtwPassage style={styles.firstPassage} passage={firstPassage} fontSize={50} />
+				style="firstPassage" withPlatformStyle="withPlatformFirstPassage"
-			</Show>
+				fontSize={50} fallbackStyle="unavailableFirstPassage" />
-			<Show when={secondPassage !== undefined} fallback=<UnavailablePassage style={styles.unavailableSecondPassage} />>
+			<TtwPassage line={props.line} destination={props.destination} index={1}
-				<TtwPassage style={styles.secondPassage} passage={secondPassage} fontSize={45} />
+				style="secondPassage" withPlatformStyle="withPlatformSecondPassage"
-			</Show>
+				fontSize={45} fallbackStyle="unavailableSecondPassage" />
 		</div >
 	);
 }
 
-export type PassagesPanelComponentProps = ParentProps & { passages: Passages, show: boolean };
+export type PassagesPanelComponentProps = ParentProps & { stopId: number, lineIds: string[], show: boolean };
 export type PassagesPanelComponent = ParentComponent<PassagesPanelComponentProps>;
 export const PassagesPanel: PassagesPanelComponent = (props) => {
 
@@ -106,35 +154,26 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
 	if (businessDataContext === undefined)
 		return <div />;
 
-	const { getLine } = businessDataContext;
+	const { getLine, getLineDestinations } = businessDataContext;
 
 	const getLines = async (lineIds: string[]): Promise<Line[]> => {
 		const lines = await Promise.all<Promise<Line>[]>(lineIds.map((lineId) => getLine(lineId)));
 		return lines;
 	}
-
+	const [lines] = createResource<Line[], string[]>(props.lineIds, getLines);
-	const [lineIds, setLinesIds] = createSignal<string[]>([]);
-	const [lines] = createResource<Line[], string[]>(lineIds, getLines);
-
-	createEffect(async () => {
-		setLinesIds(Object.keys(props.passages));
-	});
 
 	return (
-		<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
+		<div classList={{ ["passagesContainer"]: true, ["displayed"]: props.show }} >
 			<Show when={lines() !== undefined} >
-				{() => {
+				<For each={lines()}>
-					const ret = [];
+					{(line) =>
-					for (const line of lines()) {
+						<Show when={getLineDestinations(line.id) !== undefined}>
-						const byLinePassages = props.passages[line.id];
+							<For each={getLineDestinations(line.id)}>
-						if (byLinePassages !== undefined) {
+								{(destination) => <DestinationPassages line={line} destination={destination} />}
-							for (const destination of Object.keys(byLinePassages)) {
+							</For>
-								ret.push(<DestinationPassages passages={byLinePassages[destination]} line={line} destination={destination} />);
+						</Show>
-							}
-						}
 					}
-					return ret;
+				</For>
-				}}
 			</Show>
 		</div >
 	);

frontend/src/search.tsx

@@ -1,13 +1,16 @@
-import { createContext, JSX } from 'solid-js';
+import { batch, createContext, JSX } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { Marker as LeafletMarker } from 'leaflet';
 
-import { Stop } from './types';
+import { Stop, Stops } from './types';
 
 
 export type ByStopIdMarkers = Record<number, LeafletMarker[] | undefined>;
 
 export interface SearchStore {
+	getFoundStops: () => Stop[];
+	setFoundStops: (stops: Stop[]) => void;
+
 	getDisplayedStops: () => Stop[];
 	setDisplayedStops: (stops: Stop[]) => void;
 
@@ -19,12 +22,20 @@ export const SearchContext = createContext<SearchStore>();
 export function SearchProvider(props: { children: JSX.Element }) {
 
 	type Store = {
-		stops: Record<number, Stop | undefined>;
+		foundStops: Stop[];
 		markers: ByStopIdMarkers;
 		displayedStops: Stop[];
 	};
 
-	const [store, setStore] = createStore<Store>({ stops: {}, markers: {}, displayedStops: [] });
+	const [store, setStore] = createStore<Store>({ foundStops: [], markers: {}, displayedStops: [] });
+
+	const getFoundStops = (): Stop[] => {
+		return store.foundStops;
+	}
+
+	const setFoundStops = (stops: Stop[]): void => {
+		setStore('foundStops', stops);
+	}
 
 	const getDisplayedStops = (): Stop[] => {
 		return store.displayedStops;
@@ -42,7 +53,7 @@ export function SearchProvider(props: { children: JSX.Element }) {
 	}
 
 	return (
-		<SearchContext.Provider value={{ getDisplayedStops, setDisplayedStops, addMarkers }}>
+		<SearchContext.Provider value={{ getFoundStops, setFoundStops, getDisplayedStops, setDisplayedStops, addMarkers }}>
 			{props.children}
 		</SearchContext.Provider>
 	);

frontend/src/stopManager.module.css

@@ -1,33 +0,0 @@
-svg {
-	font-family: IDFVoyageur-bold;
-}
-
-.transportMode {
-	aspect-ratio : 1 / 1;
-	height: 70%;
-	margin-left: 1%;
-}
-
-.tramLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.trainLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.metroLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 1 / 1;
-}
-
-.busLinePicto {
-	height: 70%;
-	margin-left: 1%;
-	aspect-ratio : 2.25;
-}

frontend/src/stopsManager.tsx

@@ -1,228 +0,0 @@
-import { createEffect, createResource, createSignal, For, JSX, onMount, Show, useContext, VoidComponent } from 'solid-js';
-
-import { Box, Button, Input, InputLeftAddon, InputGroup, HStack, List, ListItem, Progress, ProgressIndicator, VStack } from "@hope-ui/solid";
-import 'leaflet/dist/leaflet.css';
-
-import {
-	featureGroup as leafletFeatureGroup, LatLngLiteral as LeafletLatLngLiteral, Map as LeafletMap,
-	Marker as LeafletMarker, tileLayer as leafletTileLayer
-} from 'leaflet';
-
-import { BusinessDataContext, BusinessDataStore } from "./businessData";
-import { SearchContext, SearchStore } from './search';
-
-import { Stop } from './types';
-import { renderLineTransportMode, renderLinePicto, TransportModeWeights } from './utils';
-
-import styles from './stopManager.module.css';
-
-
-const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
-
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	if (businessDataStore === undefined)
-		return <div />;
-
-	const { getLine } = businessDataStore;
-
-	const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
-		const reprs = [];
-		for (const lineId of lineIds) {
-			const line = await getLine(lineId);
-			if (line !== undefined) {
-				reprs.push(<div class={styles.transportMode}>{renderLineTransportMode(line)}</div>);
-				reprs.push(renderLinePicto(line, styles));
-			}
-		}
-		return reprs;
-	}
-
-	const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
-
-	return (
-		<HStack height="100%">
-			{props.stop.name}
-			<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
-		</HStack>
-	);
-}
-
-const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
-
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	if (businessDataStore === undefined)
-		return <div />;
-
-	const { getLine } = businessDataStore;
-
-	type ByTransportModeReprs = {
-		mode: JSX.Element | undefined;
-		[key: string]: JSX.Element | JSX.Element[] | undefined;
-	};
-
-	const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element[]> => {
-		const lineIds = new Set(stop.lines);
-		const stops = stop.stops;
-		for (const stop of stops) {
-			stop.lines.forEach(lineIds.add, lineIds);
-		}
-
-		const byModeReprs: Record<string, ByTransportModeReprs> = {};
-		for (const lineId of lineIds) {
-			const line = await getLine(lineId);
-			if (line !== undefined) {
-				if (!(line.transportMode in byModeReprs)) {
-					byModeReprs[line.transportMode] = {
-						mode: <div class={styles.transportMode}>{renderLineTransportMode(line)}</div>
-					};
-				}
-				byModeReprs[line.transportMode][line.shortName] = renderLinePicto(line, styles);
-			}
-		}
-
-		const reprs = [];
-		const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] < TransportModeWeights[y] ? 1 : -1);
-		for (const transportMode of sortedTransportModes) {
-			const lines = byModeReprs[transportMode];
-			const repr = [lines.mode];
-			delete lines.mode;
-			for (const lineId of Object.keys(lines).sort((x, y) => x.localeCompare(y))) {
-				repr.push(lines[lineId]);
-			}
-			reprs.push(repr);
-		}
-		return reprs;
-	}
-
-	const [lineReprs] = createResource(props.stop, fetchLinesRepr);
-
-	return (
-		<HStack height="100%">
-			{props.stop.name}
-			<For each={lineReprs()}>{(line) => line}</For>
-		</HStack>
-	);
-}
-
-
-const Map: VoidComponent<{ stops: Stop[] }> = (props) => {
-
-	const mapCenter: LeafletLatLngLiteral = { lat: 48.853, lng: 2.35 };
-
-	const searchStore: SearchStore | undefined = useContext(SearchContext);
-	if (searchStore === undefined)
-		return <div />;
-
-	const { addMarkers } = searchStore;
-
-
-	let mapDiv: any;
-	let map: LeafletMap | undefined = undefined;
-	const stopsLayerGroup = leafletFeatureGroup();
-
-	const buildMap = (div: HTMLDivElement) => {
-		map = new LeafletMap(div).setView(mapCenter, 11);
-		leafletTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-		}).addTo(map);
-		stopsLayerGroup.addTo(map);
-	}
-
-	const setMarker = (stop: Stop): L.Marker[] => {
-		const markers = [];
-		if (stop.lat !== undefined && stop.lon !== undefined) {
-			/* TODO: Add stop lines representation to popup. */
-			markers.push(new LeafletMarker([stop.lat, stop.lon]).bindPopup(`${stop.name}`).openPopup());
-		}
-		else {
-			for (const _stop of stop.stops) {
-				markers.push(...setMarker(_stop));
-			}
-		}
-		return markers;
-	}
-
-	onMount(() => buildMap(mapDiv));
-
-	createEffect(() => {
-		/* TODO: Avoid to clear all layers... */
-		stopsLayerGroup.clearLayers();
-
-		for (const stop of props.stops) {
-			const markers = setMarker(stop);
-			addMarkers(stop.id, markers);
-			for (const marker of markers) {
-				stopsLayerGroup.addLayer(marker);
-			}
-		}
-
-		const stopsBound = stopsLayerGroup.getBounds();
-		if (map !== undefined && Object.keys(stopsBound).length) {
-			map.fitBounds(stopsBound);
-		}
-	});
-
-	return <div ref={mapDiv} id='main-map' style={{ width: "100%", height: "100%" }} />;
-}
-
-export const StopsManager: VoidComponent = () => {
-
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	const searchStore: SearchStore | undefined = useContext(SearchContext);
-
-	if (businessDataStore === undefined || searchStore === undefined)
-		return <div />;
-
-	const { searchStopByName } = businessDataStore;
-	const { setDisplayedStops } = searchStore;
-
-	// TODO: Use props instead
-	const [minCharactersNb] = createSignal<number>(4);
-
-	const [inProgress, setInProgress] = createSignal<boolean>(false);
-	const [foundStops, setFoundStops] = createSignal<Stop[]>([]);
-
-	const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
-		/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
-		const stopName = event.currentTarget.value;
-		if (stopName.length >= minCharactersNb()) {
-			console.log(`Fetching data for ${stopName}`);
-			setInProgress(true);
-			const stopsById = await searchStopByName(stopName);
-			setFoundStops(Object.values(stopsById));
-			setInProgress(false);
-		}
-	}
-
-	return (
-		<VStack h="100%">
-			<InputGroup w="50%" h="5%">
-				<InputLeftAddon>🚉 🚏</InputLeftAddon>
-				<Input onInput={onStopNameInput} readOnly={inProgress()} placeholder="Stop name..." />
-			</InputGroup>
-			<Progress size="xs" w="50%" indeterminate={inProgress()}>
-				<ProgressIndicator striped animated />
-			</Progress>
-			<Box w="100%" h="40%" borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" overflow="scroll" marginBottom="2px">
-				<List width="100%" height="100%">
-					<For each={foundStops().sort((x, y) => x.name.localeCompare(y.name))}>
-						{(stop) =>
-							<ListItem borderWidth="1px" mb="0px" color="var(--idfm-black)" borderRadius="$lg">
-								<Button fullWidth="true" color="var(--idfm-black)" bg="white" onClick={() => setDisplayedStops([stop])}>
-									<Box w="100%" h="100%">
-										<Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
-											<StopAreaRepr stop={stop} />
-										</Show>
-									</Box>
-								</Button>
-							</ListItem>
-						}
-					</For>
-				</List>
-			</Box>
-			<Box borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" h="55%" w="100%" overflow="scroll">
-				<Map stops={foundStops()} />
-			</Box>
-		</VStack>
-	);
-};

frontend/src/stopsSearchMenu.scss

@@ -0,0 +1,222 @@
+@use "_common";
+@use "_utils";
+
+.stopSearchMenu {
+	@extend %widget;
+
+	.inputGroup {
+		width: 50%;
+		// height: 5%;
+
+		// TODO: Setup hop-ui to avoid to have to overrride rules.
+		input {
+			color: var(--idfm-white);
+			font-family: IDFVoyageur-regular;
+		}
+	}
+
+	.title {
+		@extend %title;
+
+		display: flex;
+		justify-content: center;
+	}
+
+	.body {
+		@extend %body;
+
+		flex-direction: row;
+
+		.stopsPanels {
+			width: 50%;
+			height: 100%;
+
+			scroll-snap-type: y mandatory;
+			overflow-y: scroll;
+
+			.stopPanel {
+				scroll-snap-align: center;
+
+				.stop {
+					width: calc(1880/1920*100%);
+					height: calc(100% / 5);
+					// margin: 0 calc(20/1920*100%);
+					margin: 0 calc(10/1920*100%);
+
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+
+					/* TODO: compute the border weight according to the parent height */
+					/* TODO: Disable border-bottom for the last .line  */
+					border-bottom: solid calc(2px);
+
+					cursor: default;
+
+					.name {
+						margin-left: calc(40/1920*100%);
+						width: 60%;
+						aspect-ratio: 2.5;
+
+						display: flex;
+						align-items: center;
+
+						font-family: IDFVoyageur-bold;
+					}
+
+					.lineRepr {
+						width: 40%;
+						aspect-ratio: 2.5;
+
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						align-items: center;
+
+						.transportMode {
+							@extend %transportMode;
+
+							height: 50%;
+						}
+
+						.linesRepresentationMatrix {
+							@extend %busLinePicto; // Use the larger picto aspect-ratio
+							width: 75%;
+							aspect-ratio: 3;
+
+							display: flex;
+							flex-flow: row;
+							flex-wrap: wrap;
+
+ 							%picto {
+								margin-left: 1%;
+								align-self: center;
+								justify-self: center;
+							}
+
+							%singleLinePicto {
+								@extend %picto;
+
+								height: 80%;
+							}
+
+							.transportMode {
+								@extend %transportMode;
+								@extend %picto;
+							}
+
+							.tramLinePicto {
+								@extendnd %tramLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.trainLinePicto {
+								@extend %trainLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.metroLinePicto {
+								@extend %metroLinePicto;
+								@extend %singleLinePicto;
+							}
+
+							.busLinePicto {
+								@extend %busLinePicto;
+								@extend %picto;
+
+								height: 40%;
+							}
+						}
+					}
+				}
+			}
+			.displayed {
+				display: block;
+			}
+		}
+
+		.map {
+			position: relative;
+
+			height: 100%;
+			width: 50%;
+
+			.ol-viewport {
+				@extend %body;
+				position: absolute;
+				margin: 0;
+			}
+
+			.popup {
+				@extend %body;
+				margin: 0;
+
+				position: absolute;
+				width: 100%;
+				height: 35%;
+
+				border: solid var(--idfm-white) calc(0.2*1vh);
+
+				background-color: var(--idfm-black);
+
+				z-index: 1;
+				visibility: hidden;
+
+				.header {
+					@extend %header;
+
+					color: var(--idfm-white);
+				}
+
+				.body {
+					@extend %body;
+
+					scroll-snap-type: y mandatory;
+					overflow-y: scroll;
+
+					.line {
+						scroll-snap-align: center;
+
+						height: calc(100% / 3);
+						margin: 0 calc(10/1920*100%);
+
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+
+						font-family: IDFVoyageur-bold;
+
+						.busLinePicto {
+							@extend %busLinePicto;
+
+							height: 80%;
+							width: 30%;
+						}
+
+						.name {
+							width: 100%;
+							height: 60%;
+						}
+
+						div {
+							height: 100%;
+
+							svg {
+								max-width: 100%;
+								max-height: 100%;
+							}
+						}
+					}
+				}
+
+				.footer {
+					@extend %footer;
+				}
+			}
+
+			.displayed {
+				visibility: visible;
+			}
+		}
+	}
+}

frontend/src/stopsSearchMenu.tsx

@@ -0,0 +1,770 @@
+import { createContext, createEffect, createResource, createSignal, For, JSX, onMount, ParentComponent, Show, useContext, VoidComponent } from 'solid-js';
+import { createStore } from "solid-js/store";
+import { createScrollPosition } from "@solid-primitives/scroll";
+
+import { Input, InputLeftAddon, InputGroup } from "@hope-ui/solid";
+
+import OlFeature from 'ol/Feature';
+import OlMap from 'ol/Map';
+import OlView from 'ol/View';
+import { isEmpty as isEmptyExtend } from 'ol/extent';
+import { FeatureLike as OlFeatureLike } from 'ol/Feature';
+import OlOSM from 'ol/source/OSM';
+import OlOverlay from 'ol/Overlay';
+import OlPoint from 'ol/geom/Point';
+import OlPolygon from 'ol/geom/Polygon';
+import OlVectorSource from 'ol/source/Vector';
+import { fromLonLat, toLonLat } from 'ol/proj';
+import { Tile as OlTileLayer, Vector as OlVectorLayer } from 'ol/layer';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { easeOut } from 'ol/easing';
+import { getVectorContext } from 'ol/render';
+import { unByKey } from 'ol/Observable';
+
+import { register } from 'ol/proj/proj4';
+
+import proj4 from 'proj4';
+
+import { Stop, StopShape } from './types';
+import { PositionedPanel, renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from './utils';
+
+import { AppContextContext, AppContextStore } from "./appContext";
+import { BusinessDataContext, BusinessDataStore } from "./businessData";
+
+import "./stopsSearchMenu.scss";
+
+
+proj4.defs("EPSG:2154", "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
+register(proj4);
+
+type ByStopIdMapFeatures = Record<number, OlFeature>;
+
+interface SearchStore {
+
+	getSearchText: () => string;
+	setSearchText: (text: string, businessDataStore: BusinessDataStore) => Promise<void>;
+	isSearchInProgress: () => boolean;
+
+	getFoundStops: () => Stop[];
+	setFoundStops: (stops: Stop[]) => void;
+
+	getDisplayedPanelId: () => number;
+	setDisplayedPanelId: (panelId: number) => void;
+
+	getPanels: () => PositionedPanel[];
+	setPanels: (panels: PositionedPanel[]) => void;
+
+	getHighlightedStop: () => Stop | undefined;
+	setHighlightedStop: (stop: Stop) => void;
+	resetHighlightedStop: () => void;
+
+	getMapFeature: (stopId: number) => OlFeature | undefined;
+	getAllMapFeatures: () => ByStopIdMapFeatures;
+	setMapFeature: (stopId: number, feature: OlFeature) => void;
+};
+
+const SearchContext = createContext<SearchStore>();
+
+function SearchProvider(props: { children: JSX.Element }) {
+
+	type Store = {
+		searchText: string;
+		searchInProgress: boolean;
+		foundStops: Stop[];
+		displayedPanelId: number;
+		panels: PositionedPanel[];
+		highlightedStop: Stop | undefined;
+		mapFeatures: ByStopIdMapFeatures;
+	};
+
+	const [store, setStore] = createStore<Store>({
+		searchText: "",
+		searchInProgress: false,
+		foundStops: [],
+		displayedPanelId: 0,
+		panels: [],
+		highlightedStop: undefined,
+		mapFeatures: {},
+	});
+
+	const getSearchText = (): string => {
+		return store.searchText;
+	}
+
+	const setSearchText = async (text: string, businessDataStore: BusinessDataStore): Promise<void> => {
+		setStore('searchInProgress', true);
+
+		setStore('searchText', text);
+
+		const { searchStopByName } = businessDataStore;
+		console.log("store.searchText=", store.searchText);
+		const stopsById = await searchStopByName(store.searchText);
+		console.log("stopsById=", stopsById);
+		setFoundStops(Object.values(stopsById));
+
+		setStore('searchInProgress', false);
+	}
+
+	const isSearchInProgress = (): boolean => {
+		return store.searchInProgress;
+	}
+
+	const getFoundStops = (): Stop[] => {
+		return store.foundStops;
+	}
+
+	const setFoundStops = (stops: Stop[]): void => {
+		setStore('foundStops', stops);
+	}
+
+	const getDisplayedPanelId = (): number => {
+		return store.displayedPanelId;
+	}
+
+	const setDisplayedPanelId = (panelId: number): void => {
+		setStore('displayedPanelId', panelId);
+	}
+
+	const getPanels = (): PositionedPanel[] => {
+		return store.panels;
+	}
+
+	const setPanels = (panels: PositionedPanel[]): void => {
+		setStore('panels', panels);
+	}
+
+	const getHighlightedStop = (): Stop | undefined => {
+		return store.highlightedStop;
+	}
+
+	const setHighlightedStop = (stop: Stop): void => {
+		setStore('highlightedStop', stop);
+	}
+
+	const resetHighlightedStop = (): void => {
+		setStore('highlightedStop', undefined);
+	}
+
+
+	const getAllMapFeatures = (): ByStopIdMapFeatures => {
+		return store.mapFeatures;
+	}
+
+	const getMapFeature = (stopId: number): OlFeature | undefined => {
+		return store.mapFeatures[stopId];
+	}
+
+	const setMapFeature = (stopId: number, feature: OlFeature): void => {
+		setStore('mapFeatures', stopId, feature);
+	};
+
+
+	return (
+		<SearchContext.Provider value={{
+			getSearchText, setSearchText, isSearchInProgress,
+			getFoundStops, setFoundStops,
+			getDisplayedPanelId, setDisplayedPanelId,
+			getPanels, setPanels,
+			getHighlightedStop, setHighlightedStop, resetHighlightedStop,
+			getMapFeature, getAllMapFeatures, setMapFeature,
+		}}>
+			{props.children}
+		</SearchContext.Provider>
+	);
+}
+
+
+const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) => {
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (businessDataStore === undefined || searchStore === undefined)
+		return <div />;
+
+	const { isSearchInProgress, setSearchText } = searchStore;
+
+	const onStopNameInput: JSX.EventHandler<HTMLInputElement, InputEvent> = async (event): Promise<void> => {
+		/* TODO: Add a tempo before fetching stop for giving time to user to finish his request */
+		const stopName = event.currentTarget.value;
+		if (stopName.length >= props.minCharsNb) {
+			console.log(`Fetching data for "${stopName}" stop name`);
+			await setSearchText(stopName, businessDataStore);
+		}
+	}
+
+	return (
+		<div class="header">
+			<div class="title">
+				<svg viewBox="0 0 1260 50">
+					<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
+						{props.title}
+					</text>
+				</svg>
+			</div>
+			<div class="inputGroup">
+				<InputGroup >
+					<InputLeftAddon>🚉 🚏</InputLeftAddon>
+					<Input onInput={onStopNameInput} readOnly={isSearchInProgress()} placeholder="Stop name..." />
+				</InputGroup>
+			</div>
+		</div >
+	);
+};
+
+
+const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
+	const fontSize: number = 40;
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	if (businessDataStore === undefined)
+		return <div />;
+
+	const { getLine } = businessDataStore;
+
+	const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
+		const reprs = [];
+		for (const lineId of lineIds) {
+			const line = await getLine(lineId);
+			if (line !== undefined) {
+				reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
+				reprs.push(renderLinePicto(line));
+			}
+		}
+		return reprs;
+	}
+
+	const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
+
+	return (
+		<div class="stop">
+			<svg class="name" viewBox={`0 0 215 ${fontSize}`}>
+				<text
+					x="100%" y="55%"
+					dominant-baseline="middle" text-anchor="end"
+					font-size={fontSize}>
+					{props.stop.name}
+				</text>
+			</svg>
+			<For each={lineReprs()}>{(line: JSX.Element) => line}</For>
+		</div>
+	);
+}
+
+
+type ByTransportModeReprs = {
+	mode: JSX.Element | undefined;
+	lines: Record<string, JSX.Element | JSX.Element[] | undefined>;
+}
+
+const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
+	const fontSize: number = 10;
+
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (businessDataStore === undefined || appContextStore === undefined || searchStore === undefined)
+		return <div />;
+
+	const { getLine } = businessDataStore;
+	const { setDisplayedStops } = appContextStore;
+	const { setHighlightedStop, resetHighlightedStop } = searchStore;
+
+
+	const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element> => {
+		const lineIds = new Set(stop.lines);
+		const stops = stop.stops;
+		for (const stop of stops) {
+			stop.lines.forEach(lineIds.add, lineIds);
+		}
+
+		const byModeReprs: Record<string, ByTransportModeReprs> = {};
+		for (const lineId of lineIds) {
+			const line = await getLine(lineId);
+			if (line !== undefined) {
+				if (!(line.transportMode in byModeReprs)) {
+					byModeReprs[line.transportMode] = {
+						mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
+						lines: {}
+					};
+				}
+				byModeReprs[line.transportMode].lines[line.shortName] = renderLinePicto(line);
+			}
+		}
+
+		const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] <
+			TransportModeWeights[y] ? 1 : -1);
+
+		return (
+			<div class="lineRepr">
+				<For each={sortedTransportModes}>{(transportMode) => {
+					const reprs = byModeReprs[transportMode];
+					const lineNames = Object.keys(reprs.lines).sort((x, y) => x.localeCompare(y));
+					return <>
+						{reprs.mode}
+						<div class="linesRepresentationMatrix">
+							<For each={lineNames}>{(lineName) => reprs.lines[lineName]}</For>
+						</div>
+					</>
+				}}
+				</For>
+			</div >
+		);
+	}
+	const [lineReprs] = createResource(props.stop, fetchLinesRepr);
+
+	return (
+		<div
+			class="stop"
+			onClick={() => setDisplayedStops([props.stop])}
+			onMouseEnter={() => setHighlightedStop(props.stop)}
+			onMouseLeave={resetHighlightedStop}
+		>
+			<div class="name" >
+				<ScrollingText height={fontSize} width={100} content={props.stop.name} />
+			</div>
+			{lineReprs()}
+		</div>
+	);
+}
+
+const StopsPanel: ParentComponent<{ stops: Stop[], show: boolean }> = (props) => {
+
+	return (
+		<div classList={{ "stopPanel": true, "displayed": props.show }}>
+			<For each={props.stops.sort((x, y) => x.name.localeCompare(y.name))}>
+				{(stop) => {
+					return <Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
+						<StopAreaRepr stop={stop} />
+					</Show>;
+				}}
+			</For>
+		</div>
+	);
+}
+
+const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (searchStore === undefined) {
+		return <div />;
+	}
+
+	const { getDisplayedPanelId, getFoundStops, getPanels, setDisplayedPanelId, setPanels } = searchStore;
+
+	let stopsPanelsRef: HTMLDivElement | undefined = undefined
+	const stopsPanelsScroll = createScrollPosition(() => stopsPanelsRef);
+	const yStopsPanelsScroll = () => stopsPanelsScroll.y;
+
+	createEffect(() => {
+		yStopsPanelsScroll();
+
+		for (const panel of getPanels()) {
+			const panelDiv = panel.panel();
+			const panelDivClientRect = panelDiv.getBoundingClientRect();
+			if (panelDivClientRect.y > 0) {
+				setDisplayedPanelId(panel.position);
+				break;
+			}
+		}
+	});
+
+	return (
+		<div ref={stopsPanelsRef} class="stopsPanels">
+			{() => {
+				setPanels([]);
+
+				let newPanels = [];
+				let positioneds: PositionedPanel[] = [];
+
+				let stops: Stop[] = [];
+
+				for (const stop of getFoundStops()) {
+					if (stops.length < props.maxStopsPerPanel) {
+						stops.push(stop);
+					}
+					else {
+						const panelId = newPanels.length;
+						const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
+						newPanels.push(panel);
+						positioneds.push({ position: panelId, panel: panel });
+						stops = [stop];
+					}
+				}
+				if (stops.length) {
+					const panelId = newPanels.length;
+					const panel = <StopsPanel stops={stops} show={panelId == getDisplayedPanelId()} />;
+					newPanels.push(panel);
+					positioneds.push({ position: panelId, panel: panel });
+				}
+
+				setPanels(positioneds);
+
+				return newPanels;
+			}}
+		</div>
+	);
+}
+
+
+const StopPopup: ParentComponent<{ stop: Stop, show: boolean }> = (props) => {
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	if (businessDataStore === undefined)
+		return <div />;
+
+	const { getLine, getStopDestinations } = businessDataStore;
+
+	let popupDiv: HTMLDivElement | undefined = undefined;
+
+	const getDestinations = async (stop: Stop): Promise<{ lineId: string, destinations: string[] }[]> => {
+		let ret = [];
+
+		if (stop !== undefined) {
+			const result = await getStopDestinations(stop.id);
+			for (const [lineId, destinations] of Object.entries(result)) {
+				const line = await getLine(lineId);
+				const linePicto = renderLinePicto(line);
+				ret.push({ lineId: linePicto, destinations: destinations });
+			}
+		}
+
+		return ret;
+	}
+	const [destinations] = createResource(() => props.stop, getDestinations);
+
+	return (
+		<div ref={popupDiv} classList={{ "popup": true, "displayed": props.show }}>
+			<div class="header">{props.stop?.name}</div>
+			<div class="body">
+				<For each={destinations()}>
+					{(dst) => {
+						return <div class='line'>
+							{dst.lineId}
+							<div class="name">
+								<ScrollingText height={10} width={130} content={dst.destinations.join('/')} />
+							</div>
+						</div>;
+					}}
+				</For>
+			</div>
+		</div >
+	);
+}
+
+
+// TODO: Use boolean to set MapStop selected
+const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (props) => {
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+	if (businessDataStore === undefined || searchStore === undefined)
+		return <div />;
+
+	const { getStopShape } = businessDataStore;
+	const { setMapFeature } = searchStore;
+
+	const stopStyle = new Style({
+		image: new Circle({
+			fill: undefined,
+			stroke: new Stroke({ color: '#3399CC', width: 1.5 }),
+			radius: 10,
+		}),
+	});
+
+	const selectedStopStyle = new Style({
+		image: new Circle({
+			fill: undefined,
+			stroke: new Stroke({ color: 'purple', width: 2 }),
+			radius: 10,
+		}),
+	});
+
+	const stopAreaStyle = new Style({
+		stroke: new Stroke({ color: 'red' }),
+		fill: new Fill({ color: 'rgba(255,255,255,0.2)' }),
+	});
+
+	const getShape = async (stopId: number): Promise<StopShape | undefined> => {
+		return await getStopShape(stopId);
+	};
+	const [shape] = createResource<StopShape | undefined, number>(props.stop.id, getShape);
+
+	createEffect(() => {
+		const shape_ = shape();
+
+		if (shape_ === undefined) {
+			return;
+		}
+
+		let feature = undefined;
+
+		if (props.stop.lat !== undefined && props.stop.lon !== undefined) {
+			const selectStopStyle = () => {
+				return (props.selected?.id === props.stop.id ? selectedStopStyle : stopStyle);
+			}
+
+			feature = new OlFeature({
+				geometry: new OlPoint(fromLonLat([props.stop.lon, props.stop.lat])),
+			});
+
+			feature.setStyle(selectStopStyle);
+		}
+
+		else {
+			let geometry = undefined;
+			const areaShape = shape();
+			if (areaShape !== undefined) {
+				const transformed = areaShape.points.map(point => fromLonLat(toLonLat(point, 'EPSG:2154')));
+				geometry = new OlPolygon([transformed.slice(0, -1)]);
+			}
+			else {
+				geometry = new OlPoint(fromLonLat([props.stop.lon, props.stop.lat]));
+			}
+			feature = new OlFeature({ geometry: geometry });
+			feature.setStyle(stopAreaStyle);
+		}
+		feature.setId(props.stop.id);
+
+		setMapFeature(props.stop.id, feature);
+	});
+
+	return <For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For>;
+}
+
+
+const Map: ParentComponent<{}> = () => {
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+	if (businessDataStore === undefined || searchStore === undefined)
+		return <div />;
+
+	const { getStop } = businessDataStore;
+	const { getAllMapFeatures, getFoundStops, getHighlightedStop } = searchStore;
+
+	const [selectedMapStop, setSelectedMapStop] = createSignal<Stop | undefined>(undefined);
+	const [isPopupDisplayed, setPopupDisplayed] = createSignal<boolean>(false);
+
+	const mapCenter = [260769.80336542107, 6250587.867330259]; // EPSG:3857
+	const fitDurationMs = 1500;
+	const flashDurationMs = 2000;
+	// TODO: Set padding according to the marker design.
+	const fitPointsPadding = [50, 50, 50, 50];
+
+	let mapDiv: HTMLDivElement | undefined = undefined;
+	let popup: StopPopup | undefined = undefined;
+
+	const stopVectorSource = new OlVectorSource({ features: [] });
+	const stopVectorLayer = new OlVectorLayer({ source: stopVectorSource });
+
+	let overlay: OlOverlay | undefined = undefined;
+	let map: OlMap | undefined = undefined;
+
+	const displayedFeatures: Record<number, OlFeature> = {};
+
+	const buildMap = (div: HTMLDivElement): void => {
+		overlay = new OlOverlay({
+			element: popup,
+			autoPan: {
+				animation: {
+					duration: 250,
+				},
+			},
+		});
+		map = new OlMap({
+			target: div,
+			controls: [], // remove controls
+			view: new OlView({
+				center: mapCenter,
+				zoom: 10,
+			}),
+			layers: [
+				new OlTileLayer({
+					source: new OlOSM(),
+				}),
+				stopVectorLayer,
+			],
+			overlays: [overlay],
+		});
+		map.on('singleclick', onClickedMap);
+	}
+
+	const onClickedMap = async (event): Promise<void> => {
+		const features = await stopVectorLayer.getFeatures(event.pixel);
+		// Handle only the first feature
+		if (features.length > 0) {
+			await onClickedFeature(features[0]);
+		}
+		else {
+			setPopupDisplayed(false);
+			setSelectedMapStop(undefined);
+		}
+	}
+
+	const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => {
+		const stopId: number = feature.getId();
+		const stop = getStop(stopId);
+		// TODO: Handle StopArea (use center given by the backend)
+		if (stop?.lat !== undefined && stop?.lon !== undefined) {
+			setSelectedMapStop(stop);
+			map?.getView().animate(
+				{
+					center: fromLonLat([stop.lon, stop.lat]),
+					duration: 1000
+				},
+				// Display the popup once the animation finished
+				() => setPopupDisplayed(true)
+			);
+		}
+	}
+
+	onMount(() => buildMap(mapDiv));
+
+	// Filling the map with stops shape
+	createEffect(() => {
+		const stops = getFoundStops();
+		const foundStopIds = new Set();
+		for (const foundStop of stops) {
+			foundStopIds.add(foundStop.id);
+			foundStop.stops.forEach(s => foundStopIds.add(s.id));
+		}
+
+		for (const [stopIdStr, feature] of Object.entries(displayedFeatures)) {
+			const stopId = parseInt(stopIdStr);
+			if (!foundStopIds.has(stopId)) {
+				console.log(`Remove feature for ${stopId}`);
+				stopVectorSource.removeFeature(feature);
+				delete displayedFeatures[stopId];
+			}
+		}
+
+		const features = getAllMapFeatures();
+		for (const [stopIdStr, feature] of Object.entries(features)) {
+			const stopId = parseInt(stopIdStr);
+			if (foundStopIds.has(stopId) && !(stopId in displayedFeatures)) {
+				console.log(`Add feature for ${stopId}`);
+				stopVectorSource.addFeature(feature);
+				displayedFeatures[stopId] = feature;
+			}
+		}
+
+		const extend = stopVectorSource.getExtent();
+		if (map !== undefined && !isEmptyExtend(extend)) {
+			map.getView().fit(extend, { duration: fitDurationMs, padding: fitPointsPadding });
+		}
+	});
+
+	// Flashing effect
+	createEffect(() => {
+		const highlightedStopId = getHighlightedStop()?.id;
+		if (highlightedStopId !== undefined) {
+			const stop = getStop(highlightedStopId);
+			if (stop !== undefined) {
+				const stops = stop.stops ? stop.stops : [stop];
+				stops.forEach((s) => {
+					const feature = displayedFeatures[s.id];
+					if (feature !== undefined) {
+						flash(feature);
+					}
+				});
+			}
+		}
+	});
+
+	const flash = (feature: OlFeature) => {
+		const start = Date.now();
+		const flashGeom = feature.getGeometry()?.clone();
+		const listenerKey = stopVectorLayer.on('postrender', animate);
+
+		// Force postrender raising.
+		feature.changed();
+
+		function animate(event) {
+			const frameState = event.frameState;
+			const elapsed = frameState.time - start;
+			const vectorContext = getVectorContext(event);
+
+			if (elapsed >= flashDurationMs) {
+				unByKey(listenerKey);
+				return;
+			}
+
+			if (flashGeom !== undefined && map !== undefined) {
+				const elapsedRatio = elapsed / flashDurationMs;
+				// radius will be 5 at start and 30 at end.
+				const radius = easeOut(elapsedRatio) * 25 + 5;
+				const opacity = easeOut(1 - elapsedRatio);
+
+				const style = new Style({
+					image: new Circle({
+						radius: radius,
+						stroke: new Stroke({
+							color: `rgba(255, 0, 0, ${opacity})`,
+							width: 0.25 + opacity,
+						}),
+					}),
+				});
+
+				vectorContext.setStyle(style);
+				vectorContext.drawGeometry(flashGeom);
+
+				// tell OpenLayers to continue postrender animation
+				map.render();
+			}
+		}
+	}
+
+	return <>
+		<div ref={mapDiv} class="map">
+			<StopPopup ref={popup} stop={selectedMapStop()} show={isPopupDisplayed()} />
+		</div>
+		<For each={getFoundStops()}>{(stop) => <MapStop stop={stop} selected={selectedMapStop()} />}</For>
+	</>;
+}
+
+const Footer: VoidComponent<{}> = () => {
+
+	const searchStore: SearchStore | undefined = useContext(SearchContext);
+
+	if (searchStore === undefined) {
+		return <div />;
+	}
+
+	const { getDisplayedPanelId, getPanels } = searchStore;
+
+	return (
+		<div class="footer">
+			<For each={getPanels()}>
+				{(panel) => {
+					const position = panel.position;
+					return (
+						<div>
+							<svg viewBox="0 0 29 29">
+								<circle cx="50%" cy="50%" r="13" stroke="#ffffff" stroke-width="3"
+									style={{ fill: `var(--idfm-${position == getDisplayedPanelId() ? "white" : "black"})` }}
+								/>
+							</svg>
+						</div>
+					);
+				}}
+			</For>
+		</div>
+	);
+}
+
+export const StopsSearchMenu: VoidComponent = () => {
+
+	const maxStopsPerPanel = 5;
+
+	return (
+		<div class="stopSearchMenu">
+			<SearchProvider>
+				<Header title="Recherche de l'arrêt..." minCharsNb={4} />
+				<div class="body">
+					<StopsPanels maxStopsPerPanel={maxStopsPerPanel} />
+					<Map />
+				</div>
+				<Footer />
+			</SearchProvider>
+		</div>
+	);
+};

frontend/src/types.tsx

@@ -63,6 +63,24 @@ export class Stop {
 
 export type Stops = Record<number, Stop>;
 
+export type Points = [number, number][];
+
+export class StopShape {
+	stop_id: number;
+	type_: number;
+	bounding_box: number[];
+	points: Points;
+
+	constructor(stop_id: number, type_: number, bounding_box: number[], points: Points) {
+		this.stop_id = stop_id;
+		this.type_ = type_;
+		this.bounding_box = bounding_box;
+		this.points = points;
+	}
+};
+
+export type StopShapes = Record<number, StopShape>;
+
 export class Line {
 	id: string;
 	shortName: string;

frontend/src/utils.tsx

@@ -1,7 +1,15 @@
-import { JSX } from 'solid-js';
+import { JSX, onMount, VoidComponent } from 'solid-js';
+import { timeline } from '@motionone/dom';
 
 import { Line } from './types';
 
+// Thanks to https://dev.to/ycmjason/how-to-create-range-in-javascript-539i
+export function* range(start: number, end: number): Generator<number> {
+	for (let i = start; i <= end; i++) {
+		yield i;
+	}
+}
+
 const validTransportModes = ["bus", "tram", "metro", "rer", "transilien", "funicular", "ter", "unknown"];
 
 export const TransportModeWeights: Record<string, number> = {
@@ -18,7 +26,7 @@ export const TransportModeWeights: Record<string, number> = {
 export function getTransportModeSrc(mode: string, color: boolean = true): string | undefined {
 	let ret = undefined;
 	if (validTransportModes.includes(mode)) {
-		ret = `/public/symbole_${mode}_${color ? "" : "support_fonce_"}RVB.svg`;
+		return `/carrramba-encore-rate/public/symbole_${mode}_${color ? "" : "support_fonce_"}RVB.svg`;
 	}
 	return ret;
 }
@@ -27,9 +35,9 @@ export function renderLineTransportMode(line: Line): JSX.Element {
 	return <img src={getTransportModeSrc(line.transportMode)} />
 }
 
-function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderBusLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.busLinePicto}>
+		<div class="busLinePicto">
 			<svg viewBox="0 0 31.5 14">
 				<rect x="0" y="0" width="31.5" height="14" rx="1.5" ry="1.5" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -45,10 +53,10 @@ function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
 	);
 }
 
-function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderTramLinePicto(line: Line): JSX.Element {
 	const lineStyle = { fill: `#${line.backColorHexa}` };
 	return (
-		<div class={styles.tramLinePicto}>
+		<div class="tramLinePicto">
 			<svg viewBox="0 0 20 20">
 				<rect x="0" y="0" width="20" height="3" rx="1" ry="1" style={lineStyle} />
 				<rect x="0" y="17" width="20" height="3" rx="1" ry="1" style={lineStyle} />
@@ -65,9 +73,9 @@ function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }
 
-function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderMetroLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.metroLinePicto}>
+		<div class="metroLinePicto">
 			<svg viewBox="0 0 20 20">
 				<circle cx="10" cy="10" r="10" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -82,9 +90,9 @@ function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }
 
-function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+function renderTrainLinePicto(line: Line): JSX.Element {
 	return (
-		<div class={styles.trainLinePicto}>
+		<div class="trainLinePicto">
 			<svg viewBox="0 0 20 20">
 				<rect x="0" y="0" width="20" height="20" rx="4.5" ry="4.5" style={{ fill: `#${line.backColorHexa}` }} />
 				<text x="50%"
@@ -100,19 +108,59 @@ function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
 	);
 }
 
-export function renderLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
+export function renderLinePicto(line: Line): JSX.Element {
 	switch (line.transportMode) {
 		case "bus":
 		case "funicular":
-			return renderBusLinePicto(line, styles);
+			return renderBusLinePicto(line);
 		case "tram":
-			return renderTramLinePicto(line, styles);
+			return renderTramLinePicto(line);
 		/* case "val": */
 		case "metro":
-			return renderMetroLinePicto(line, styles);
+			return renderMetroLinePicto(line);
 		case "transilien":
 		case "rer":
 		case "ter":
-			return renderTrainLinePicto(line, styles);
+			return renderTrainLinePicto(line);
 	}
 }
+
+export type PositionedPanel = {
+	position: number;
+	// TODO: Should be PassagesPanelComponent ?
+	panel: JSX.Element;
+};
+
+
+export const ScrollingText: VoidComponent<{ height: number, width: number, content: string }> = (props) => {
+
+	let viewBoxRef: SVGSVGElement | undefined = undefined;
+	let textRef: SVGTextElement | undefined = undefined;
+
+	onMount(() => {
+		if (viewBoxRef !== undefined && textRef !== undefined) {
+			const overlap = textRef.getComputedTextLength() - viewBoxRef.viewBox.baseVal.width;
+			if (overlap > 0) {
+				timeline(
+					[
+						[textRef, { x: [-overlap] }, { duration: 5 }],
+						[textRef, { x: [0] }, { duration: 2 }],
+					],
+					{ repeat: Infinity },
+				);
+			}
+		}
+	});
+
+	return (
+		<svg ref={viewBoxRef} viewBox={`0 0 ${props.width} ${props.height}`}>
+			<text
+				ref={textRef}
+				x="0%" y="55%"
+				dominant-baseline="middle"
+				font-size={`${props.height}px`}>
+				{props.content}
+			</text>
+		</svg >
+	);
+}