2.3 KiB
2.3 KiB
| id | title | status | assignee | created_date | labels | dependencies | references | priority | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| TASK-103 | rFlows: Green flows, funnel coloring, full-page canvas, analytics popout | Done | 2026-03-04 05:06 |
|
|
medium |
Description
Overhaul the rFlows detail view UX:
- All flow edges → green shades — Source inflow (#10b981), spending (#34d399), overflow (#6ee7b7). Ignores alloc.color for consistent visual language.
- Funnel 3-state coloring — Critical (red, below min), Sustained (amber, between thresholds), Overflow (green, above max). Replaces previous 4-way sufficient/abundant/seeking/critical logic. Glow matches state color.
- Full-page canvas — Removed tab system (Diagram/River/Table/Transactions). Canvas fills 100vh. Nav overlay (back link + title) floats inside canvas container.
- Analytics popout — Left-side slide-in panel with Overview + Transactions sub-tabs. Toggled via toolbar button or Escape key. Reuses existing table/transaction renderers.
- Removed river tab — Deleted renderRiverTab() and mountRiver(). folk-flow-river.ts kept on disk.
- Updated legend — Edge colors as squares, funnel states as circles (Critical/Sustained/Thriving).
Acceptance Criteria
- #1 Canvas fills entire viewport (no tab bar, no max-width constraint)
- #2 All flow edges are shades of green
- #3 Funnels: red when critical, amber when sustained, green when overflow
- #4 Analytics button in toolbar opens left-side panel with overview + transactions
- #5 Back button in nav overlay returns to landing page
- #6 Simulation and wiring still work
- #7 Editor panel (right side) still opens for node editing
- #8 Escape closes analytics panel
Final Summary
Committed 676aaa7 on dev, merged to main. Two files changed: folk-flows-app.ts (199 line diff — removed tab system, added analytics panel, updated edge/funnel color logic) and flows.css (68 line diff — fullpage layout, nav overlay, analytics panel styles). TypeScript compiles clean.