Add GSM signal strength and network coverage maps - #4
Merged
Conversation
Adds a Signal map page showing two H3 hex-bin maps for the selected device/day: one coloured by average GSM signal strength (dBm), one by the dominant mobile network in use, both aggregated from the gsm.* fields already captured in each event's `other` JSON blob.
With the tab bar and menu grid both growing, Signal map now only appears in the main menu, and Live tracking map — the primary action — gets its own larger button above the rest of the menu tiles.
Jbithell
marked this pull request as ready for review
August 1, 2026 08:36
There was a problem hiding this comment.
Pull request overview
Adds a new “Signal map” date route that visualizes GSM metrics as hex-binned Leaflet maps, and wires it into the date UI/navigation alongside existing live/analysis/timings views.
Changes:
- Adds
/:password/:date/signalroute that aggregates per-h3IndexGSM signal strength (avg dBm) and dominant network (MCC/MNC) from theevents.data.otherJSON. - Introduces reusable
SignalMap(client-only Leaflet) plus signal gradient + categorical network color utilities. - Adds UK carrier name lookup (MCC/MNC → friendly name) and hooks the new page into routing and menus.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| website/app/routes/date/signal.tsx | New Signal page loader + UI for signal strength + network coverage hex maps |
| website/app/routes/date/protectedLayout.tsx | Adds active-tab detection for /signal |
| website/app/routes/date/index.tsx | Adds “Signal map” tile and adjusts menu layout (primary live tile) |
| website/app/routes.ts | Registers the new signal route |
| website/app/constants/mccMncCarriers.ts | Adds UK MCC/MNC → carrier name mapping utilities |
| website/app/components/SignalMap/SignalMap.tsx | Client-only wrapper for Leaflet signal map |
| website/app/components/SignalMap/SignalMap.client.tsx | Leaflet hex polygon rendering using H3 boundaries |
| website/app/components/SignalMap/signalColor.ts | Gradient color mapping + legend tick builder for dBm values |
| website/app/components/SignalMap/networkColor.ts | Deterministic palette assignment for network categories |
| website/app/components/mapPerformance.ts | Adds signal map performance configuration |
| website/app/components/DatePageNav.tsx | Extends DatePage union to include signal (but tab list needs update) |
| website/app/components/DateIndexTable.module.css | Adds primaryItem styling and refactors some multi-line colors |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
8
to
16
| export type DatePage = | ||
| | "menu" | ||
| | "live" | ||
| | "logbook" | ||
| | "timings" | ||
| | "analysis" | ||
| | "signal" | ||
| | "historic" | ||
| | "none"; |
Comment on lines
+205
to
+208
| <Text c="dimmed" size="sm"> | ||
| Each cell shows the average GSM signal strength for the day: red | ||
| is weak, green is strong. | ||
| </Text> |
Comment on lines
+276
to
+279
| <Text size="sm"> | ||
| {getCarrierName(entry.mcc, entry.mnc)} ({entry.total}) | ||
| </Text> | ||
| </Group> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Signal mappage (/:password/:date/signal) with two H3 hex-bin maps for the selected device/day, using the same "value → colour" technique the Analysis page already uses for speed-coloured route segments.gsm.signal.dbmreading in that cell (red = weak, green = strong).gsm.mcc/gsm.mncnetwork seen there, with friendly carrier names for common UK networks (O2, Vodafone, Three, EE, etc.) via a small lookup table, falling back to the rawMCC-MNCcode for anything unmapped.otherJSON blob already present on events (populated automatically by the Flespi ingest path) viajson_extract, grouped by each event's existingh3Index.protectedLayout's active-tab detection.Test plan
npm run types:check— passes (two pre-existing, unrelated errors intimingPoints.tsx/timingPointsHistoricComparison.tsxremain, confirmed present on the base branch too).npm run build— client and server bundles build cleanly, including the newsignalroute andh3-jsbrowser bundle.gsm.*fields and reviewed the query/aggregation and rendering logic; could not visually verify in a running dev server —npm run devrequires an authenticated Cloudflare remote-proxy session (for theBROWSERbinding, markedremote: trueinwrangler.jsonc) that isn't available in this sandboxed environment. This is a pre-existing environment constraint unrelated to this change.wrangler dev --remotelocally) to confirm the hex cells render as expected.Generated by Claude Code