TMR · Selected work
Making a transport system visible
I was the Lead Frontend Engineer on Central Facility, the interface TMR operators used to monitor infrastructure health, inspect live C-ITS messages, configure stations, and simulate transport events.
The backend moved messages through a cooperative transport system. My job was to make their state, location, and operational consequences understandable to the people responsible for it.
- Role
- Lead Frontend Engineer
- Started
- March 2023
- Focus
- Operational frontend architecture and geospatial UX
01
The system, in plain English
Central Facility is the operational interface for a cooperative intelligent transport station. It helps teams monitor roadside and central infrastructure, inspect the messages being produced, manage station configuration, and test how the system responds to an event.
I joined when the original JavaScript interface had reached the limits of the pilot it was built for. I led the frontend rebuild as a TypeScript application that could support more operational domains, wider jurisdictional use, and libraries that were still actively maintained.
- 01
Health
Summarise roadside and central station health, then move from a fleet-level signal into the affected station and diagnostic path.
- 02
Events
Show active C-ITS messages, intersections, road geometry, and simulated events together on an interactive map.
- 03
Configuration
Edit system parameters and station metadata with validation, pending-change tracking, and role-aware actions.
- 04
Operations
Manage roadside and vehicle stations, certificates, transmitted messages, software versions, and feedback from one application shell.
02
The map became an operational workspace
The Events page was not a map added to a dashboard. It was the place operators used to understand what the transport system was saying now. An initial GraphQL query loaded current messages; an AppSync subscription added, updated, or removed them as the system changed.
I kept search, filters, visibility, selection, and the details panel on the same entity model. Selecting an event, intersection, road segment, simulated event, or quadtree tile changed both the map and the information beneath the search bar. Filters and map themes persisted between sessions so an operator could return to a familiar working view.
Rendering diagram…
03
Simulation followed the real path
Operators also needed to rehearse behaviour without waiting for a real road event. I integrated simulated-event creation into the same map: choose a location, describe the event in a validated form, then manage it beside live messages.
- 01Place it on the map
- 02Configure the message
- 03Inspect the result
The useful detail was what happened next. The backend normalised the simulated event and sent it through the ordinary C-ITS message workflow. The resulting message returned to the map through the same live update path, so the test exercised more than a visual mock.
04
Health had to lead to diagnosis
A red count is useful only if the operator can find the failure behind it. I built health views that started with normal, degraded, and failed totals across selected organisations, then connected those summaries to station tables, a map view, and station-level diagnostics.
On the Events map, intersection markers also carried the health of their associated roadside stations. A degraded or failed station changed the intersection treatment; selecting it opened the associated stations and provided a path into detailed metrics and the affected communication flow.
- 01See the fleet signal
- 02Find the station
- 03Trace the failure
05
Configuration needed consequences
Central Facility also changed the system it monitored. Its settings covered central-station behaviour, data sources, C-ITS use cases, and whole-of-system parameters. Some values affected message generation or every station in a deployment.
I built metadata-driven forms around that risk. The interface tracked original and pending values, validated changes before submission, kept unsaved work visible while navigating between parameter groups, and described who could change a value and what the change would affect.
The same approach supported roadside and vehicle station workflows: typed forms, partial updates, role-aware actions, and one consistent route from a list into creation, editing, and diagnostics.
06
The code followed the work
I structured the application as lazy-loaded operational routes inside an authenticated shell. Health, settings, stations, and the Events workspace each received their own providers and domain state instead of sharing one undifferentiated store.
- 01
Keep the map state together
MapRootStore grouped view, settings, and search with separate entity and simulation stores. That kept live events, intersections, filters, and form state coordinated without making them global application concerns.
- 02
Use each data path for its job
Apollo Client and AppSync handled initial messages and real-time subscriptions. REST services supplied operational data such as intersections, station inventory, configuration, and simulated events.
- 03
Replace the dependency that stopped moving
When the marker package could not support React 19 and React Leaflet 5, I replaced it with typed Marker and MarkerLayer components covering placement, z-index, hover elevation, positioning, and zoom animation.
- 04
Make extension a documented path
A registry connected event types to display names, categories, persisted filters, colours, and simulation metadata. I documented the sequence for adding a use case so each layer stayed aligned.
07
What I left behind
Central Facility became a production operational interface for health monitoring, live event inspection, station management, configuration, diagnostics, and testing. The TypeScript rebuild gave those domains explicit routes, stores, types, and reusable interface patterns.
I also wrote and maintained the operator manual, the detailed UI design, developer guidance, and Storybook examples, then backed the implementation with Vitest and Playwright coverage. Another engineer could follow both how the system worked and why the frontend was shaped that way.
The map work also changed how I thought about later platforms. Central Facility proved that geography could be the primary interaction surface for real transport operations. Map Core and Map Kit turned lessons from that product into reusable packages.
Looking back
The work was not about putting transport data on a map. It was about connecting a system signal to the next useful operator action.
A health summary led to a station. A station led to its diagnostic path. A simulated event returned through the live message flow. The frontend made those relationships visible.
08
Technologies
Frontend
React, TypeScript, Vite, React Router
Mapping
Leaflet, React Leaflet, GeoJSON, Turf.js, Supercluster
State and data
MobX, GraphQL, Apollo Client, AWS AppSync, TanStack React Query
UI and forms
Material UI, MUI X Data Grid Pro, Toolpad Core, React Hook Form, Zod, Recharts
Testing and documentation
Vitest, Testing Library, Playwright, Storybook
Platform
AWS Amplify, AWS Cognito, AWS CodePipeline