♻️ Replace onMount hook by the use of a signal to set the Map target

Cf. https://bugzilla.mozilla.org/show_bug.cgi?id=1368063

.gitattributes

@@ -0,0 +1,2 @@
+medias/presentation.png filter=lfs diff=lfs merge=lfs -text
+medias/presentation.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,124 @@
+# 🚧 Carrramba! Encore raté! 🚧
+
+Resident of the Ile-de-France,
+
+- Tired of missing your bus/train/metro ?
+- Tired of having to walk to know where your bus/train/metro will stop ?
+- Are you looking to display its next passages in the same way as Ile De France Mobilité ?
+
+**Visit [carrramba.adrien.run](https://carrramba.adrien.run/)**
+
+[![Presentation](medias/presentation.png)](medias/presentation.mp4)
+
+# Technical stack
+
+The following figure list the building blocks (docker images) and their interactions to provide the service:
+
+```plantuml
+@startuml
+!include <C4/C4_Container>
+
+!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.4.0
+!includeurl ICONURL/common.puml
+
+!includeurl ICONURL/font-awesome-5/users.puml
+!includeurl ICONURL/devicons2/redis.puml
+!includeurl ICONURL/devicons2/sqlalchemy.puml
+!includeurl ICONURL/devicons2/postgresql.puml
+
+title Carrramba-encore-rate - Back-end
+
+LAYOUT_WITH_LEGEND()
+
+Person(user, "User", "The service user", $sprite="users")
+
+System_Boundary(cb1, "carrramba-encore-rate") {
+  Container(app, "SPA", "SolidJS", "The graphical interface used by users to consume services provided")
+  Container(api, "carrramba-encore-rate-api", "FastAPI / Pydantic 2 / SQLAlchemy 2", "Provides the functionalities serving API endpoints", $sprite="sqlalchemy")
+  ContainerDb(db, "Postgres", "PostgreSQL database", "Stores stops/stop areas/lines/shapes and associations information.", $sprite="postgresql")
+  ContainerDb(cache, "In-Memory cache", "Redis", "Store previously computed results (stop, line, destination, next passages, shapes).", $sprite="redis")
+
+  Container(db_updater, "db-updater", "Sync the service static data with the IDFM ones")
+}
+
+System_Boundary(idfm, "IDFM") {
+  Container_Ext(static_, "Static data")
+  Container_Ext(dynamic_, "Dynamic data")
+}
+
+Rel(user, app, "Uses")
+
+Rel(app, api, "Uses", "JSON/HTTPS")
+
+Rel_R(api, db, "Reads from", "sync, PSQL")
+Rel_L(api, cache, "Reads from and writes to", "sync, REdis Serialization Protocol")
+Rel(api, dynamic_, "Get next passages", "JSON/HTTPS")
+
+Rel_L(db_updater, db, "Writes to", "sync, PSQL")
+Rel(db_updater, static_, "Get stops, lines andshapes")
+@enduml
+```
+
+## Back-end
+
+Conventional but efficient:
+
+- [FastAPI](https://fastapi.tiangolo.com/): _FastAPI is a modern, fast (high-performance), web framework for building
+   APIs with Python 3.8+ based on standard Python type hints._
+- [Pydantic 2](https://docs.pydantic.dev/latest/): _Pydantic is the most widely used data validation library for
+   Python._
+- [Sqlalchemy 2](https://www.sqlalchemy.org/): _SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that
+   gives application developers the full power and flexibility of SQL._
+
+The [Msgspec](https://github.com/jcrist/msgspec) library is used to serialize JSON objects collected from IDFM API
+endpoints, this library being faster than Pydantic.
+
+## Front-end
+
+The component is developed using the [SolidJS](https://www.solidjs.com/) library. It brings the following interesting specificities:
+
+- Share with React the same programmatic structures and support for component.
+- Fine-grained reactivity architecture: no virtual DOM used to update the components, the browser DOM is directly
+  updated by SolidJS.
+
+The front-end tries to be as close as possible to the design defined by the IDFM for the displays deployed by the
+transport operators in Ile-de-France. These specifications are public and available here:
+[PRIM-IDFM](https://prim.iledefrance-mobilites.fr/en/chartes-et-prescriptions).
+
+
+# TODO
+
+## Features
+
+- [ ] Integration with [Matrix.org](https://matrix.org/ecosystem/integrations/) ecosystem: make the app able to send message to a room when a bus/train/metro will
+      arriving in X minutes.
+- [ ] Add the capability for the users to pin his/her favorite stops.
+- [ ] Add the address to the stop location.
+
+## Docs
+
+- [ ] Describe how to build the front-end and back-end docker images.
+- [ ] Describe how to deploy them using `docker compose`.
+- [ ] Add back-end API description ([openAPI](https://www.openapis.org/)) + generate documentation
+      ([mkdoc](https://www.mkdocs.org/), [Redoc](https://github.com/Redocly/redoc)). The best would be to build and
+      deploy it (as docker images) using CI/CD... need to test [Agola](https://agola.io/), [Jaypore
+      CI](https://www.jayporeci.in/) (pipelines configured in Python),
+      [Woodpecker](https://woodpecker-ci.org/docs/intro) or [Drone](https://www.drone.io/) before.
+
+## Front-end
+
+- [ ] Add unit tests.
+- [ ] Make the StopNameInput component liquid.
+- [ ] Liquid to responsive Design.
+
+## Back-end
+
+- [ ] Add unit tests.
+- [ ] Use [alembic](https://alembic.sqlalchemy.org/en/latest/) to manage the future updates of the database schemas.
+- [ ] Add the capability to reload the application configuration on configuration file update (e.g.: credential update by the vault).
+- [ ] Rework how the database is updated with the IDFM data: For now the database is cleaned before refilling. It could
+      be useful to avoid to empty the database and only apply deltas (update/add/remove rows).
+- [ ] Could be nice to compare FastAPI with [Litestar](https://litestar.dev/).
+
+<!--  LocalWords:  specificities
+ -->

backend/README.md

@@ -0,0 +1,9 @@
+
+
+# Architecture
+
+
+
+The following schema shows the components used to satisfy the `api` service:
+
+![API](./docs/medias/hubble-ui_api.png)

backend/api/db/db.py

@@ -1,10 +1,7 @@
 from asyncio import sleep
 from logging import getLogger
-from typing import Annotated, AsyncIterator
 
-from fastapi import Depends
 from opentelemetry.instrumentation.sqlalchemy import SQLAlchemyInstrumentor
-from sqlalchemy import text
 from sqlalchemy.exc import OperationalError, SQLAlchemyError
 from sqlalchemy.ext.asyncio import (
     async_sessionmaker,
@@ -16,6 +13,7 @@ from sqlalchemy.ext.asyncio import (
 from .base_class import Base
 from ..settings import DatabaseSettings
 
+
 logger = getLogger(__name__)
 
 
@@ -30,8 +28,7 @@ class Database:
 
         except (SQLAlchemyError, AttributeError) as e:
             logger.exception(e)
-
+            raise
-        return None
 
     # TODO: Preserve UserLastStopSearchResults table from drop.
     async def connect(

backend/api/idfm_interface/idfm_types.py

@@ -141,6 +141,8 @@ class StopAreaStopAssociationFields(Struct, kw_only=True):
     artid: str | None = None
     arrversion: str
     zdcid: str
+    pdeid: str | None = None
+    pdeversion: int | None = None
     version: int
     zdaid: str
     zdaversion: str
@@ -205,7 +207,7 @@ class Line(Struct):
 
 Lines = dict[str, Line]
 
-Destinations = dict[str, set[str]]
+Destinations = dict[int, set[str]]
 
 
 # TODO: Set structs frozen

backend/config.local.yaml

@@ -2,7 +2,7 @@ app_name: carrramba-encore-rate
 clear_static_data: false
 
 http:
-  host: 0.0.0.0
+  host: 127.0.0.1
   port: 8080
   cert: ./config/cert.pem
 

backend/pyproject.toml

@@ -60,7 +60,7 @@ types-aiofiles = "^22.1.0.2"
 wrapt = "^1.14.1"
 pydocstyle = "^6.2.2"
 dill = "^0.3.6"
-python-lsp-ruff = "^1.0.5"
+python-lsp-ruff = "^2.1.0"
 python-lsp-server = "^1.7.1"
 autopep8 = "^2.0.1"
 pyflakes = "^3.0.1"

frontend/package.json

@@ -30,8 +30,9 @@
 		"@stitches/core": "^1.2.8",
 		"date-fns": "^2.29.3",
 		"matrix-widget-api": "^1.1.1",
-		"ol": "^7.3.0",
+		"ol": "^8.2.0",
 		"solid-js": "^1.6.6",
-		"solid-transition-group": "^0.0.10"
+		"solid-transition-group": "^0.0.10",
+		"solidjs-lazily": "^0.1.2"
 	}
 }

frontend/src/App.tsx

@@ -1,15 +1,12 @@
-import { Component, createSignal } from 'solid-js';
+import { Component, createSignal, onCleanup, onMount } from 'solid-js';
-import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWidgetAction } from 'matrix-widget-api';
+// import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWidgetAction } from 'matrix-widget-api';
-import { HopeProvider } from "@hope-ui/solid";
 
 import { BusinessDataProvider } from './businessData';
 import { AppContextProvider } from './appContext';
-
 import { PassagesDisplay } from './passagesDisplay';
 import { StopsSearchMenu } from './stopsSearchMenu/stopsSearchMenu';
 
 import "./App.scss";
-import { onCleanup, onMount } from 'solid-js';
 
 
 function parseFragment() {
@@ -28,21 +25,21 @@ const App: Component = () => {
     console.log("App: widgetId:" + widgetId);
     console.log("App: userId:" + userId);
 
-	const api = new WidgetApi(widgetId != null ? widgetId : undefined);
+    // const api = new WidgetApi(widgetId != null ? widgetId : undefined);
-	api.requestCapability(MatrixCapabilities.AlwaysOnScreen);
+    // api.requestCapability(MatrixCapabilities.AlwaysOnScreen);
-	api.start();
+    // api.start();
-	api.on("ready", function() {
+    // api.on("ready", function() {
-		console.log("App: widget API is READY !!!!");
+    //     console.log("App: widget API is READY !!!!");
-	});
+    // });
 
     // Seems to don´t be used...
-	api.on(`action:${WidgetApiToWidgetAction.UpdateVisibility}`, (ev: CustomEvent<IVisibilityActionRequest>) => {
+    // api.on(`action:${WidgetApiToWidgetAction.UpdateVisibility}`, (ev: CustomEvent<IVisibilityActionRequest>) => {
-		console.log("App: Visibility change");
+    //      console.log("App: Visibility change");
-		ev.preventDefault(); // we're handling it, so stop the widget API from doing something.
+    //      ev.preventDefault(); // we're handling it, so stop the widget API from doing something.
-		console.log("App: ", ev.detail); // custom handling here
+    //      console.log("App: ", ev.detail); // custom handling here
-		/* api.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); */
+    //      /* api.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{}); */
-		api.transport.reply(ev.detail, {});
+    //      api.transport.reply(ev.detail, {});
-	});
+    // });
 
     createSignal({
         height: window.innerHeight,
@@ -71,10 +68,8 @@ const App: Component = () => {
         window.removeEventListener('resize', onResize);
     })
 
-	return (
+    return <BusinessDataProvider>
-		<BusinessDataProvider>
         <AppContextProvider>
-				<HopeProvider>
             <div class="App">
                 <div class="panel">
                     <StopsSearchMenu />
@@ -83,10 +78,8 @@ const App: Component = () => {
                     <PassagesDisplay />
                 </div>
             </div>
-				</HopeProvider>
         </AppContextProvider>
-		</BusinessDataProvider>
+    </BusinessDataProvider>;
-	);
 };
 
 export default App;

frontend/src/appContext.tsx

@@ -6,7 +6,7 @@ import { Stop } from './types';
 export interface AppContextStore {
     getDisplayedStops: () => Stop[];
     setDisplayedStops: (stops: Stop[]) => void;
-};
+}
 
 export const AppContextContext = createContext<AppContextStore>();
 
@@ -26,10 +26,7 @@ export function AppContextProvider(props: { children: JSX.Element }) {
 
     const setDisplayedStops = (stops: Stop[]): void => {
         console.log("setDisplayedStops=", stops);
-		// setStore((s: Store) => {
         setStore('displayedStops', stops);
-		// 	return s;
-		// });
     }
 
     return (
@@ -39,5 +36,4 @@ export function AppContextProvider(props: { children: JSX.Element }) {
             {props.children}
         </AppContextContext.Provider>
     );
-
+}
-};

frontend/src/businessData.tsx

@@ -6,6 +6,7 @@ import { Line, Lines, Passage, Passages, Stop, StopShape, StopShapes, Stops } fr
 
 export type StopDestinations = Record<string, string[]>;
 
+
 export interface BusinessDataStore {
     getLine: (lineId: string) => Promise<Line>;
     getLinePassages: (lineId: string) => Record<string, Passage[]>;
@@ -23,7 +24,7 @@ export interface BusinessDataStore {
 
     getStopDestinations: (stopId: number) => Promise<StopDestinations | undefined>;
     getStopShape: (stopId: number) => Promise<StopShape | undefined>;
-};
+}
 
 export const BusinessDataContext = createContext<BusinessDataStore>();
 
@@ -120,7 +121,7 @@ export function BusinessDataProvider(props: { children: JSX.Element }) {
             for (const lineId of Object.keys(passages)) {
                 const newLinePassages = passages[lineId];
                 const linePassages = storePassages[lineId];
-				if (linePassages === undefined) {
+                if (linePassages === undefined || Object.keys(linePassages).length == 0) {
                     setStore('passages', lineId, newLinePassages);
                 }
                 else {
@@ -159,7 +160,7 @@ ${linePassagesDestination.length} here... refresh all them.`);
     const clearPassages = (): void => {
         setStore((s: Store): Store => {
             for (const lineId of Object.keys(s.passages)) {
-				setStore('passages', lineId, undefined);
+                setStore('passages', lineId, {});
             }
             return s;
         });
@@ -231,21 +232,9 @@ ${linePassagesDestination.length} here... refresh all them.`);
             getLine, getLinePassages, getLineDestinations, getDestinationPassages, passages, getPassagesLineIds,
             refreshPassages, addPassages, clearPassages,
             getStop, getStopDestinations, getStopShape, searchStopByName
+
         }}>
             {props.children}
         </BusinessDataContext.Provider>
     );
 }
-
-export interface BusinessDataStore {
-	getLine: (lineId: string) => Promise<Line>;
-	getLinePassages: (lineId: string) => Record<string, Passage[]>;
-
-	passages: () => Passages;
-	refreshPassages: (stopId: number) => Promise<void>;
-	addPassages: (passages: Passages) => void;
-	clearPassages: () => void;
-
-	getStop: (stopId: number) => Stop | undefined;
-	searchStopByName: (name: string) => Promise<Stops>;
-};

frontend/src/extra/iconHamburgerMenu.tsx

@@ -4,10 +4,11 @@ import { VoidComponent } from "solid-js";
 export const IconHamburgerMenu: VoidComponent<{}> = () => {
     return (
         <svg class="iconHamburgerMenu" viewBox="0 0 15 15">
-			<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
+            <path
-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
+                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
-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 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
-13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+            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.scss

@@ -14,6 +14,7 @@
 }
 
 html, body {
+    height: 100vh;
     aspect-ratio: 16/9;
 
     margin: 0;

frontend/src/passagesDisplay.tsx

@@ -1,7 +1,6 @@
 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";
@@ -9,7 +8,6 @@ import { AppContextContext, AppContextStore } from "./appContext";
 
 import { getTransportModeSrc, PositionedPanel } from "./utils";
 import { PassagesPanel } from "./passagesPanel";
-import { IconHamburgerMenu } from './extra/iconHamburgerMenu';
 
 import "./passagesDisplay.scss";
 
@@ -25,7 +23,7 @@ interface PassagesDisplayStore {
 
     getDisplayedPanelId: () => number;
     setDisplayedPanelId: (panelId: number) => void;
-};
+}
 
 const PassagesDisplayContext = createContext<PassagesDisplayStore>();
 
@@ -91,7 +89,6 @@ const Header: VoidComponent<{ title: string }> = (props) => {
         return <div />;
 
     const { getLine, passages } = businessDataStore;
-	const { isPassagesRefreshEnabled, togglePassagesRefresh } = passagesDisplayStore;
 
     const [dateNow] = createDateNow(1000);
 
@@ -113,16 +110,14 @@ const Header: VoidComponent<{ title: string }> = (props) => {
         setLinesIds(Object.keys(passages()));
     });
 
-	return (
+    return <div class="header">
-		<div class="header">
         <Show when={transportModeUrls() !== undefined} >
             <For each={transportModeUrls()}>
                 {(url) =>
                     <div class="transportMode">
                         <img src={url} />
                     </div>
-					}
+                }</For>
-				</For>
         </Show>
         <div class="title">
             <svg viewBox="0 0 1260 50">
@@ -132,15 +127,6 @@ const Header: VoidComponent<{ title: string }> = (props) => {
             </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">
@@ -149,8 +135,7 @@ const Header: VoidComponent<{ title: string }> = (props) => {
                 </text>
             </svg>
         </div>
-		</div >
+    </div>;
-	);
 };
 
 const Footer: VoidComponent<{}> = () => {
@@ -176,8 +161,7 @@ const Footer: VoidComponent<{}> = () => {
                             </svg>
                         </div>
                     );
-				}}
+                }}</For>
-			</For>
         </div>
     );
 }
@@ -286,13 +270,11 @@ export const PassagesDisplay: ParentComponent = () => {
     const syncPeriodMsec = 20 * 1000;
     const panelSwitchPeriodMsec = 4 * 1000;
 
-	return (
+    return <div class="passagesDisplay">
-		<div class="passagesDisplay">
         <PassagesDisplayProvider>
             <Header title="Prochains passages" />
             <Body maxPassagesPerPanel={MAX_PASSAGES_PER_PANEL} syncPeriodMsec={syncPeriodMsec} panelSwitchPeriodMsec={panelSwitchPeriodMsec} />
             <Footer />
         </PassagesDisplayProvider>
-		</div>
+    </div>;
-	);
 };

frontend/src/passagesPanel.tsx

@@ -14,15 +14,13 @@ import "./passagesPanel.scss";
 const UnavailablePassage: VoidComponent<{ style: string }> = (props) => {
     const textStyle = { fill: "#000000" };
 
-	return (
+    return <div class={props.style}>
-		<div class={props.style}>
         <svg viewBox="0 0 230 110">
             <text x="100%" y="26" font-size="25" text-anchor="end" style={textStyle}>Information</text>
             <text x="100%" y="63" font-size="25" text-anchor="end" style={textStyle}>non</text>
             <text x="100%" y="100" font-size="25" text-anchor="end" style={textStyle}>disponible</text>
         </svg>
-		</div>
+    </div>;
-	);
 }
 
 const Platform: VoidComponent<{ name: string }> = (props) => {
@@ -43,14 +41,12 @@ const Platform: VoidComponent<{ name: string }> = (props) => {
         }
     });
 
-	return (
+    return <svg class="platform" viewBox={`0 0 ${viewBoxWidthPx} 40`}>
-		<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>
+    </svg>;
-	);
 }
 
 const TtwPassage: VoidComponent<{
@@ -88,8 +84,7 @@ const TtwPassage: VoidComponent<{
             </Motion.text>
         </svg>;
 
-		return (
+        return <Show when={passage !== undefined} fallback={<UnavailablePassage style={props.fallbackStyle} />}>
-			<Show when={passage !== undefined} fallback=<UnavailablePassage style={props.fallbackStyle} />>
             <Show
                 when={passage.arrivalPlatformName !== null}
                 fallback={
@@ -100,9 +95,8 @@ const TtwPassage: VoidComponent<{
                     {text}
                     <Platform name={passage.arrivalPlatformName} />
                 </div>
-				</Show >
+            </Show>
-			</Show >
+        </Show>;
-		);
     });
 }
 
@@ -122,8 +116,7 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
     // const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) };
     const trafficStatusStyle = { fill: trafficStatusColor.get(TrafficStatus.UNKNOWN) };
 
-	return (
+    return <div class="line">
-		<div class="line">
         <div class="transportMode">
             {renderLineTransportMode(props.line)}
         </div>
@@ -142,8 +135,7 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
         <TtwPassage line={props.line} destination={props.destination} index={1}
             style="secondPassage" withPlatformStyle="withPlatformSecondPassage"
             fontSize={45} fallbackStyle="unavailableSecondPassage" />
-		</div >
+    </div>;
-	);
 }
 
 export type PassagesPanelComponentProps = ParentProps & { stopId: number, lineIds: string[], show: boolean };
@@ -162,19 +154,16 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
     }
     const [lines] = createResource<Line[], string[]>(props.lineIds, getLines);
 
-	return (
+    return <div classList={{ "passagesContainer": true, "displayed": props.show }} >
-		<div classList={{ ["passagesContainer"]: true, ["displayed"]: props.show }} >
         <Show when={lines() !== undefined} >
             <For each={lines()}>
                 {(line) =>
                     <Show when={getLineDestinations(line.id) !== undefined}>
-							<For each={getLineDestinations(line.id)}>
+                        <For each={getLineDestinations(line.id)}>{
-								{(destination) => <DestinationPassages line={line} destination={destination} />}
+                            (destination) => <DestinationPassages line={line} destination={destination} />
-							</For>
+                        }</For>
                     </Show>
-					}
+                }</For>
-				</For>
         </Show>
-		</div >
+    </div>;
-	);
 }

frontend/src/search.tsx

@@ -1,8 +1,8 @@
-import { batch, createContext, JSX } from 'solid-js';
+import { createContext, JSX } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { Marker as LeafletMarker } from 'leaflet';
 
-import { Stop, Stops } from './types';
+import { Stop } from './types';
 
 
 export type ByStopIdMarkers = Record<number, LeafletMarker[] | undefined>;
@@ -52,9 +52,7 @@ export function SearchProvider(props: { children: JSX.Element }) {
         setStore('markers', stopId, markers);
     }
 
-	return (
+    return <SearchContext.Provider value={{ getFoundStops, setFoundStops, getDisplayedStops, setDisplayedStops, addMarkers }}>
-		<SearchContext.Provider value={{ getFoundStops, setFoundStops, getDisplayedStops, setDisplayedStops, addMarkers }}>
         {props.children}
-		</SearchContext.Provider>
+    </SearchContext.Provider>;
-	);
 }

frontend/src/stopsSearchMenu/map.tsx

@@ -41,56 +41,13 @@ export const Map: ParentComponent<{}> = () => {
     // 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 [mapRef, setMapRef] = createSignal<HTMLDivElement>();
+
     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);
@@ -108,7 +65,48 @@ export const Map: ParentComponent<{}> = () => {
         }
     }
 
-	onMount(() => buildMap(mapDiv));
+    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 displayedFeatures: Record<number, OlFeature> = {};
+
+    const overlay = new OlOverlay({
+        element: popup,
+        autoPan: {
+            animation: {
+                duration: 250,
+            },
+        },
+    });
+    const map = new OlMap({
+        target: "map",
+        controls: [], // remove controls
+        view: new OlView({
+            center: mapCenter,
+            zoom: 10,
+        }),
+        layers: [
+            new OlTileLayer({
+                source: new OlOSM(),
+            }),
+            stopVectorLayer,
+        ],
+        overlays: [overlay],
+    });
+    map.on('singleclick', onClickedMap);
+
+    createEffect(() => {
+        map.setTarget(mapRef());
+    });
 
     // Filling the map with stops shape
     createEffect(() => {
@@ -207,8 +205,8 @@ export const Map: ParentComponent<{}> = () => {
     }
 
     return <>
-		<div ref={mapDiv} class="map">
+        <div ref={setMapRef!} class="map">
-			<StopPopup ref={popup} stop={selectedMapStop()} show={isPopupDisplayed()} />
+            <StopPopup ref={popup!} stop={selectedMapStop()} show={isPopupDisplayed()} />
         </div>
         <For each={getFoundStops()}>{(stop) => <MapStop stop={stop} selected={selectedMapStop()} />}</For>
     </>;

frontend/src/stopsSearchMenu/searchStore.tsx

@@ -149,8 +149,7 @@ export function SearchProvider(props: { children: JSX.Element }) {
         setStore('mapFeatures', stopId, feature);
     };
 
-	return (
+    return <SearchContext.Provider value={{
-		<SearchContext.Provider value={{
         getSearchText, setSearchText,
         getFoundStops, setFoundStops,
         getDisplayedPanelId, setDisplayedPanelId,
@@ -160,6 +159,5 @@ export function SearchProvider(props: { children: JSX.Element }) {
         getMapFeature, getAllMapFeatures, setMapFeature,
     }}>
         {props.children}
-		</SearchContext.Provider>
+    </SearchContext.Provider>;
-	);
 }

frontend/src/stopsSearchMenu/stopPanel.tsx

@@ -33,8 +33,7 @@ const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
 
     const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);
 
-	return (
+    return <div class="stop">
-		<div class="stop">
         <svg class="name" viewBox={`0 0 215 ${fontSize}`}>
             <text
                 x="100%" y="55%"
@@ -44,8 +43,7 @@ const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
             </text>
         </svg>
         <For each={lineReprs()}>{(line: JSX.Element) => line}</For>
-		</div>
+    </div>;
-	);
 }
 
 
@@ -83,7 +81,7 @@ const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
             if (line !== undefined) {
                 if (!(line.transportMode in byModeReprs)) {
                     byModeReprs[line.transportMode] = {
-						mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
+                        mode: <div class="transportMode"> {renderLineTransportMode(line)}</div>,
                         lines: {}
                     };
                 }
@@ -91,12 +89,11 @@ const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
             }
         }
 
-		const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] <
+        const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] < TransportModeWeights[y] ? 1 : -1);
-			TransportModeWeights[y] ? 1 : -1);
 
-		return (
+        return <div class="lineRepr">
-			<div class="lineRepr">
+            <For each={sortedTransportModes}>
-				<For each={sortedTransportModes}>{(transportMode) => {
+                {(transportMode) => {
                     const reprs = byModeReprs[transportMode];
                     const lineNames = Object.keys(reprs.lines).sort((x, y) => x.localeCompare(y));
                     return <>
@@ -104,40 +101,34 @@ const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
                         <div class="linesRepresentationMatrix">
                             <For each={lineNames}>{(lineName) => reprs.lines[lineName]}</For>
                         </div>
-					</>
+                    </>;
-				}}
+                }}</For>
-				</For>
+        </div>;
-			</div >
-		);
     }
+
     const [lineReprs] = createResource(props.stop, fetchLinesRepr);
 
-	return (
+    return <div
-		<div
         class="stop"
         onClick={() => setDisplayedStops([props.stop])}
         onMouseEnter={() => setHighlightedStop(props.stop)}
         onMouseLeave={resetHighlightedStop}
     >
-			<div class="name" >
+        <div class="name">
             <ScrollingText height={fontSize} width={100} content={props.stop.name} />
         </div>
         {lineReprs()}
-		</div>
+    </div>;
-	);
 }
 
 export const StopsPanel: ParentComponent<{ stops: Stop[], show: boolean }> = (props) => {
 
-	return (
+    return <div classList={{ "stopPanel": true, "displayed": props.show }}>
-		<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>
-			</For>
+    </div>;
-		</div>
-	);
 }

frontend/src/stopsSearchMenu/stopPopup.tsx

@@ -29,21 +29,19 @@ export const StopPopup: ParentComponent<{ stop: Stop, show: boolean }> = (props)
     }
     const [destinations] = createResource(() => props.stop, getDestinations);
 
-	return (
+
-		<div ref={popupDiv} classList={{ "popup": true, "displayed": props.show }}>
+    return <div ref={popupDiv} classList={{ "popup": true, "displayed": props.show }}>
         <div class="header">{props.stop?.name}</div>
-			<div class="body">
+        <div class="body" >
             <For each={destinations()}>
                 {(dst) => {
-						return <div class='line'>
+                    return <div class='line' >
                         {dst.lineId}
-							<div class="name">
+                        < div class="name" >
                             <ScrollingText height={10} width={130} content={dst.destinations.join('/')} />
                         </div>
                     </div>;
-					}}
+                }}</For>
-				</For>
         </div>
-		</div >
+    </div>;
-	);
 }

frontend/src/stopsSearchMenu/stopsSearchMenu.scss

@@ -33,6 +33,7 @@
 
     background-color: transparent;
 
+
     .leftAddon {
         width: 17%;
 

frontend/src/stopsSearchMenu/stopsSearchMenu.tsx

@@ -1,4 +1,4 @@
-import { createEffect, For, JSX, lazy, ParentComponent, useContext, Show, VoidComponent } from 'solid-js';
+import { createEffect, For, JSX, ParentComponent, useContext, Show, VoidComponent } from 'solid-js';
 import { lazily } from 'solidjs-lazily';
 import { createScrollPosition } from "@solid-primitives/scroll";
 
@@ -16,11 +16,10 @@ import "./stopsSearchMenu.scss";
 
 
 const StopNameInput: VoidComponent<{ onInput: JSX.EventHandler<HTMLInputElement, InputEvent>, leftAddon: string, placeholder: string }> = (props) => {
-	return (
+    return <div class="stopNameInput">
-		<div class="stopNameInput">
         <div class="leftAddon">{props.leftAddon}</div>
         <input type="text" oninput={props.onInput} placeholder={props.placeholder} />
-		</div>);
+    </div>;
 };
 
 
@@ -40,8 +39,7 @@ const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) =>
         }
     }
 
-	return (
+    return <div class="header">
-		<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">
@@ -50,8 +48,7 @@ const Header: VoidComponent<{ title: string, minCharsNb: number }> = (props) =>
             </svg>
         </div>
         <StopNameInput onInput={onStopNameInput} leftAddon="🚉 🚏" placeholder="Stop name..." />
-		</div >
+    </div>;
-	);
 };
 
 
@@ -71,13 +68,15 @@ const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
         yStopsPanelsScroll();
 
         for (const panel of getPanels()) {
-			const panelDiv = panel.panel();
+            const panelDiv = panel.panel;
+            if (panelDiv != null) {
                 const panelDivClientRect = panelDiv.getBoundingClientRect();
                 if (panelDivClientRect.y > 0) {
                     setDisplayedPanelId(panel.position);
                     break;
                 }
             }
+        }
     });
 
     return (
@@ -133,7 +132,8 @@ const MapPlaceholder: VoidComponent<{}> = () => {
     }
 
     return <div
-		class="mapPlaceholder" ondblclick={() => onDoubleClick()}>
+        class="mapPlaceholder"
+        ondblclick={() => onDoubleClick()}>
         Double-clic pour activer la carte
     </div>;
 };
@@ -166,35 +166,31 @@ const Footer: VoidComponent<{}> = () => {
 
     const { getDisplayedPanelId, getPanels } = searchStore;
 
-	return (
+    return <div class="footer">
-		<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"
+                            <circle
+                                cx="50%" cy="50%" r="13" stroke="#ffffff" stroke-width="3"
                                 style={{ fill: `var(--idfm-${position == getDisplayedPanelId() ? "white" : "black"})` }}
                             />
                         </svg>
                     </div>
                 );
-				}}
+            }}</For>
-			</For>
+    </div>;
-		</div>
-	);
 };
 
 
 export const StopsSearchMenu: VoidComponent = () => {
-	return (
+    return <div class="stopSearchMenu">
-		<div class="stopSearchMenu">
         <SearchProvider>
             <Header title="Recherche de l'arrêt..." minCharsNb={4} />
             <Body />
             <Footer />
         </SearchProvider>
-		</div>
+    </div>;
-	);
 };

frontend/src/types.tsx

@@ -34,7 +34,7 @@ export class Passage {
         this.arrivalStatus = arrivalStatus;
         this.departStatus = departStatus;
     }
-};
+}
 
 export type Passages = Record<string, Record<string, Passage[]>>;
 
@@ -59,7 +59,7 @@ export class Stop {
             this.lines.push(...stop.lines);
         }
     }
-};
+}
 
 export type Stops = Record<number, Stop>;
 
@@ -77,7 +77,7 @@ export class StopShape {
         this.epsg3857_bbox = epsg3857_bbox;
         this.epsg3857_points = epsg3857_points;
     }
-};
+}
 
 export type StopShapes = Record<number, StopShape>;
 
@@ -111,6 +111,6 @@ export class Line {
         this.audibleSignsAvailable = audibleSignsAvailable;
         this.stopIds = stopIds;
     }
-};
+}
 
 export type Lines = Record<string, Line>;

frontend/src/utils.tsx

@@ -36,11 +36,11 @@ export function renderLineTransportMode(line: Line): JSX.Element {
 }
 
 function renderBusLinePicto(line: Line): JSX.Element {
-	return (
+    return <div class="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%"
+            <text
+                x="50%"
                 y="55%"
                 dominant-baseline="middle"
                 text-anchor="middle"
@@ -49,18 +49,17 @@ function renderBusLinePicto(line: Line): JSX.Element {
                 {line.shortName}
             </text>
         </svg>
-		</div>
+    </div>;
-	);
 }
 
 function renderTramLinePicto(line: Line): JSX.Element {
     const lineStyle = { fill: `#${line.backColorHexa}` };
-	return (
+    return <div class="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} />
-				<text x="50%"
+            <text
+                x="50%"
                 y="55%"
                 dominant-baseline="middle"
                 text-anchor="middle"
@@ -69,16 +68,15 @@ function renderTramLinePicto(line: Line): JSX.Element {
                 {line.shortName}
             </text>
         </svg>
-		</div>
+    </div>;
-	);
 }
 
 function renderMetroLinePicto(line: Line): JSX.Element {
-	return (
+    return <div class="metroLinePicto">
-		<div class="metroLinePicto">
         <svg viewBox="0 0 20 20">
             <circle cx="10" cy="10" r="10" style={{ fill: `#${line.backColorHexa}` }} />
-				<text x="50%"
+            <text
+                x="50%"
                 y="55%"
                 dominant-baseline="middle"
                 text-anchor="middle"
@@ -86,16 +84,15 @@ function renderMetroLinePicto(line: Line): JSX.Element {
                 {line.shortName}
             </text>
         </svg>
-		</div>
+    </div>;
-	);
 }
 
 function renderTrainLinePicto(line: Line): JSX.Element {
-	return (
+    return <div class="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%"
+            <text
+                x="50%"
                 y="55%"
                 dominant-baseline="middle"
                 text-anchor="middle"
@@ -104,8 +101,7 @@ function renderTrainLinePicto(line: Line): JSX.Element {
                 {line.shortName}
             </text>
         </svg>
-		</div>
+    </div>;
-	);
 }
 
 export function renderLinePicto(line: Line): JSX.Element {
@@ -152,8 +148,7 @@ export const ScrollingText: VoidComponent<{ height: number, width: number, conte
         }
     });
 
-	return (
+    return <svg ref={viewBoxRef} viewBox={`0 0 ${props.width} ${props.height}`}>
-		<svg ref={viewBoxRef} viewBox={`0 0 ${props.width} ${props.height}`}>
         <text
             ref={textRef}
             x="0%" y="55%"
@@ -161,6 +156,5 @@ export const ScrollingText: VoidComponent<{ height: number, width: number, conte
             font-size={`${props.height}px`}>
             {props.content}
         </text>
-		</svg >
+    </svg>;
-	);
 }

frontend/tsconfig.json

@@ -4,6 +4,7 @@
     "jsxImportSource": "solid-js",
     "noImplicitAny": true,
     "target": "ES6",
+    "module": "esnext",
     "moduleResolution": "node",
     "allowJs": true,
     "outDir": "build",