Issue #174: Nidus Reveal Customer UI — Mockup #175

Merged

eliribble merged 1 commit from issue-174-reveal-ui-mockup into main

2026-07-26 15:15:09 +00:00

ned commented

2026-07-26 00:27:45 +00:00

Member

Per Eli's request (comment #1607), this PR creates a UI mockup for the Nidus Reveal customer-facing pool detection interface.

What this is: A functional Vue mockup with mock data demonstrating the three-panel workbench layout. No backend APIs — purely HTML/CSS/Typescript for UI agreement.

Layout (matching design spec):

Left panel: Address search, status filter (All/Unmaintained/Dry), pool list with checkboxes, Select All/None
Center panel: MapLibre map with status-colored markers, dashboard stats (default state), selection stats (multi-select), detection timeline (single-pool select)
Right panel: Export format selection (CSV/PDF/KML/Shapefile/FileGDB), export button with mock processing flow

Pool History Timeline: Horizontal track with detection dots colored by status + export markers. Click any detection dot to select it, then click "Load Imagery" to simulate loading satellite tile imagery.

Mock Data: 8 pools in Fresno, CA area with varied statuses and detection histories. All data is inline — no backend required.

Built with existing infrastructure:

Uses ThreeColumn layout from Comm Workbench
Uses MapLibre Map component with marker system
Route at /_/reveal, sidebar navigation link

Pre-existing CI note: The build fails on unrelated type errors in MglTerradrawSource.vue and UI.vue (missing @watergis/maplibre-gl-terradraw type declarations). Our new code has zero type errors when checked with vue-tsc. These pre-existing errors are documented in our MEMORY.md as a known CI infrastructure issue.

Closes #174

Per Eli's request (comment #1607), this PR creates a UI mockup for the Nidus Reveal customer-facing pool detection interface. **What this is:** A functional Vue mockup with mock data demonstrating the three-panel workbench layout. No backend APIs — purely HTML/CSS/Typescript for UI agreement. **Layout (matching design spec):** - **Left panel:** Address search, status filter (All/Unmaintained/Dry), pool list with checkboxes, Select All/None - **Center panel:** MapLibre map with status-colored markers, dashboard stats (default state), selection stats (multi-select), detection timeline (single-pool select) - **Right panel:** Export format selection (CSV/PDF/KML/Shapefile/FileGDB), export button with mock processing flow **Pool History Timeline:** Horizontal track with detection dots colored by status + export markers. Click any detection dot to select it, then click "Load Imagery" to simulate loading satellite tile imagery. **Mock Data:** 8 pools in Fresno, CA area with varied statuses and detection histories. All data is inline — no backend required. **Built with existing infrastructure:** - Uses ThreeColumn layout from Comm Workbench - Uses MapLibre Map component with marker system - Route at /_/reveal, sidebar navigation link **Pre-existing CI note:** The build fails on unrelated type errors in MglTerradrawSource.vue and UI.vue (missing @watergis/maplibre-gl-terradraw type declarations). Our new code has zero type errors when checked with vue-tsc. These pre-existing errors are documented in our MEMORY.md as a known CI infrastructure issue. Closes #174

ned added 1 commit

2026-07-26 00:27:45 +00:00

Create Nidus Reveal UI mockup

/ golint (push) Successful in 19s

Details

/ pnpm-build (push) Successful in 1m0s

Details

eb2b7b2b3a

Eli indicated the pool and geometry schema already exist in feature_pool
(db/migrations/00089_feature.sql), and export tracking is deferred to
follow-on work. This mockup focuses purely on UI to get agreement on
layout and interactions before building the data model and APIs.

- New Reveal.vue view with mock pool data (8 pools in the Fresno area)
- Three-column workbench layout matching the design spec:
  - Left: RevealColumnList — address search, status filter (all/unmaintained/dry),
    pool list with checkboxes, Select All/None
  - Center: RevealColumnDetail — MapLibre map with status-colored markers,
    dashboard stats (default), selection stats (multi-select), pool timeline
  - Right: RevealColumnExport — format checkboxes (CSV/PDF/KML/Shapefile/FileGDB),
    export flow with mock processing and success confirmation
- RevealTimeline: horizontal timeline with detection dots (clickable, loads
  satellite imagery placeholder), export markers, legend
- Route registered at /_/reveal with sidebar navigation link (radar icon)

ned referenced this pull request

2026-07-26 00:27:57 +00:00

Nidus Reveal Customer UI — Design Doc for Review #174