|
31 | 31 | ## Visual Development Rules (Required) |
32 | 32 |
|
33 | 33 | - `visual/` is the source of truth for visual HTML (`*.html`) and sample JSON (`*.json`) in this repo version. |
| 34 | +- Start new visual work from `visual/templates/Postman-Visualizer-SectionTemplate.md` and build the page section-by-section from that scaffold. |
34 | 35 | - Do not manually edit generated visual docs (`docs/visual/`, `docs/visual-previews/`); regenerate from `visual/`. |
35 | 36 | - No comments in visual code/templates unless explicitly requested. |
36 | 37 | - At the top of each visual HTML file, maintain the visual rules/constraints and indicate that `CODING_AGENTS.md` defines the canonical rules so they are not forgotten. |
37 | 38 | - Visuals should support dark/light mode behavior and check system settings when rendering theme-sensitive output. |
38 | 39 | - If `sysDescr` / `system_description` is present in the JSON response, show it prominently at the top of the visual. |
| 40 | +- Standardize `sysDescr` / `system_description` presentation as a dedicated `Device Info` block separate from channel/capture graph blocks. |
| 41 | +- `Device Info` should render before channel-specific charts/content. |
| 42 | +- Prefer a horizontal one-row table for common modem identity fields with display labels exactly: |
| 43 | +- `MacAddress`, `Model`, `Vendor`, `SW Version`, `HW Version`, `Boot ROM` |
| 44 | +- Use proper display casing/spacing for labels (for example `SW Version`, not `SW_REV`; `Boot ROM`, not `BOOTR`). |
| 45 | +- When a capture timestamp is available (for example `pnm_header.capture_time`), place `Capture Time` next to the visual title/header as a layout-only element (not inside chart/graph sections). |
| 46 | +- Format capture timestamps as a human-readable date/time string (not raw epoch seconds). |
| 47 | +- Keep channel metadata in a separate block below `Device Info` (for example `Channel`, center/subcarrier frequency). |
| 48 | +- Display frequencies in `MHz` for UI-facing labels; raw `Hz` may be shown secondarily in parentheses when useful. |
| 49 | +- Default UI frequency labels/ticks to whole-number `MHz` (no decimal floats) unless precision is required for the specific visual. |
| 50 | +- Include units in graph titles/axis labels for measured values (for example `Magnitude (dB)` instead of `Magnitude`). |
| 51 | +- Center graph/panel titles for scanability and consistent visual layout. |
| 52 | +- When a visual can plot both raw values and moving-average/smoothed values, prefer a per-graph `Actual / Moving Avg` radio toggle instead of showing both at once by default (reduces clutter). |
| 53 | +- For `Moving Avg` overlays, use the same base color as `Actual` with a dashed line style. |
| 54 | +- Avoid redundant repetition of values already shown in `Device Info` (for example, do not repeat `MacAddress` in the channel header if it is already in the device table). |
| 55 | +- If `system_description` is missing/partial, render `N/A` for missing fields instead of vendor-specific fallback values. |
39 | 56 | - JSON responses may contain multiple upstream/downstream channels; each channel must render as its own graph for the selected graph type. |
40 | 57 | - Multi-channel views should also include a combined graph at the bottom with all channels lined up by frequency in a single graph. |
41 | 58 |
|
|
49 | 66 | - Warning = yellow |
50 | 67 | - OK = green |
51 | 68 | - NOK = red |
| 69 | +- Regression / trend / fitted reference lines must use a high-contrast color distinct from waveform traces (prefer dashed). |
| 70 | +- Default regression/reference line color: white. |
| 71 | +- If white reduces readability against the chart/waveform palette, use a dark red contrast line (for example `#c62828`) or another clearly contrasting color and document the choice in the visual remarks. |
0 commit comments