Repository navigation
Add a TRMNL-friendly flood risk display page - #2
Merged
Merged
Conversation
Adds a minimal, high-contrast /trmnl/ page rendering a 5-day bar chart of max daily flood risk, sized for an 800x480 e-ink display. Uses plain server-rendered HTML/CSS with no JS or color gradients, so it works well as a periodic screenshot on a TRMNL device. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016NVMretUFqu4jZQxyamJK6
Runs the same client-side weather -> hydrology -> emulator pipeline as site/js/app.js, with no backend, to render a 5-day max-daily-risk bar chart matching the look of the Django-backed /trmnl/ page. Risk per day is the max share of non-channel grid cells wet at the median forecast flow, since the Django backend's risk formula divides by constants that don't match this grid (see docs/UPSTREAM_ISSUES.md) and isn't reusable as-is. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016NVMretUFqu4jZQxyamJK6
There was a problem hiding this comment.
🟡 Changes recommended
The newly added Django test will fail (bar count includes CSS), and the TRMNL client page has confirmed robustness/consistency issues (missing-time handling and mixed UTC/local timestamps).
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds a TRMNL-friendly (800×480, high-contrast) flood-risk “next 5 days” display, implemented both as a static client-rendered page under site/ and as a Django-rendered endpoint under /trmnl/.
Changes:
- Added a static TRMNL page (
site/trmnl.html) backed by a new client-side renderer (site/js/trmnl.js). - Added a Django endpoint (
/trmnl/) with a dedicated template and helper to compute max daily risk over 6-hourly readings. - Added a Django test asserting the TRMNL endpoint returns 5 bars.
File summaries
| File | Description |
|---|---|
| site/trmnl.html | Adds a static TRMNL-sized HTML page that loads the TRMNL JS renderer. |
| site/js/trmnl.js | Implements the client-side 5-day max-risk bar chart rendering pipeline. |
| manyfews/webapp/views.py | Adds max-daily-risk helper and Django view for /trmnl/. |
| manyfews/webapp/urls.py | Routes /trmnl/ to the new Django view. |
| manyfews/webapp/tests.py | Adds a test for the /trmnl/ endpoint output. |
| manyfews/webapp/templates/webapp/trmnl_display.html | Adds a server-rendered, high-contrast TRMNL display template. |
Review details
Suppressed comments (1)
site/js/trmnl.js:96
- The day labels use UTC (getUTCDay/getUTCDate), but the "Updated" timestamp uses local time (getDay/getHours). Depending on server/device timezone, the weekday/date can disagree between the bars and the updated line. Use UTC consistently (or local consistently) to avoid inconsistent display.
function formatTimestamp(date) {
const hh = String(date.getHours()).padStart(2, '0');
const mm = String(date.getMinutes()).padStart(2, '0');
return `Updated ${DAY_NAMES[date.getDay()]} ${date.getDate()} ${MONTH_NAMES[date.getMonth()]}, ${hh}:${mm}`;
}
- Files reviewed: 6/6 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+55
to
+58
| def test_trmnl_display_returns_5_day_bars(self): | ||
| response = self.client.get(reverse("trmnl_display")) | ||
| self.assertEqual(response.status_code, 200) | ||
| self.assertEqual(response.content.decode().count("bar-column"), 5) |
Comment on lines
+73
to
+75
| function dayLabel(date) { | ||
| return `${DAY_NAMES[date.getUTCDay()]}<br>${date.getUTCDate()} ${MONTH_NAMES[date.getUTCMonth()]}`; | ||
| } |
Comment on lines
+74
to
+76
| <div class="chart" id="chart"></div> | ||
| </div> | ||
| <script type="module" src="js/trmnl.js"></script> |
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.
Adds a minimal, high-contrast /trmnl/ page rendering a 5-day bar
chart of max daily flood risk, sized for an 800x480 e-ink display.
Uses plain server-rendered HTML/CSS with no JS or color gradients,
so it works well as a periodic screenshot on a TRMNL device.
Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_016NVMretUFqu4jZQxyamJK6