test(visual): add capture-time convention coverage and standardize header placement

- add pytest coverage for Capture Time header convention in CA, template, and updated visuals
- standardize Capture Time as a header-row pill next to the visual title (layout-only)
- format pnm_header.capture_time as human-readable UTC date/time (not raw epoch seconds)
- update Histogram visual to show Capture Time in header and remove measurement stats panel
- update Pre-Equalization, RxMER, and Constellation visuals to support optional Capture Time header display
- update visual template scaffold with reusable Capture Time header pattern and formatter helper - 2026-02-22 22:36:38

Author: mgarcia01752

CODING_AGENTS.md

@@ -42,6 +42,8 @@
 - Prefer a horizontal one-row table for common modem identity fields with display labels exactly:
 - `MacAddress`, `Model`, `Vendor`, `SW Version`, `HW Version`, `Boot ROM`
 - Use proper display casing/spacing for labels (for example `SW Version`, not `SW_REV`; `Boot ROM`, not `BOOTR`).
+- 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).
+- Format capture timestamps as a human-readable date/time string (not raw epoch seconds).
 - Keep channel metadata in a separate block below `Device Info` (for example `Channel`, center/subcarrier frequency).
 - Display frequencies in `MHz` for UI-facing labels; raw `Hz` may be shown secondarily in parentheses when useful.
 - 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).

docs/visual-previews/SingleCapture/Histogram/Histogram.html

@@ -15,103 +15,104 @@ Preview is best-effort. Some templates may rely on Postman-specific APIs that ar
 <summary>Visualizer HTML/script source</summary>
 
 ````html
-// Visualization Script
+// Remarks (CODING_AGENTS visual standard)
+// - Device Info uses a separate top block with standardized labels
+// - Histogram chart remains the primary visualization
+// - Missing sysDescr fields render as N/A
 const template = `
 <style>
     body {
         font-family: Arial, sans-serif;
-        padding: 20px;
-        background-color: #1e1e1e;
-        color: #e0e0e0;
+        padding: 16px;
+        background-color: #0b0b0b;
+        color: #e8e8e8;
     }
     .container {
-        max-width: 1200px;
+        max-width: 1280px;
         margin: 0 auto;
     }
     .header {
-        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
-        color: #e0e0e0;
-        padding: 20px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-    }
-    .header h1 {
-        margin: 0 0 10px 0;
-        font-size: 24px;
-        color: #e0e0e0;
-    }
-    .header p {
-        margin: 5px 0;
-        opacity: 0.9;
-        color: #b0b0b0;
-    }
-    .device-info {
-        background: #2d2d2d;
-        padding: 20px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-    }
-    .device-info h2 {
-        margin-top: 0;
-        color: #e0e0e0;
-        border-bottom: 2px solid #4a5568;
-        padding-bottom: 10px;
-    }
-    .info-grid {
+        margin-bottom: 12px;
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 15px;
-        margin-top: 15px;
+        grid-template-columns: 1fr auto 1fr;
+        align-items: center;
+        gap: 8px;
     }
-    .info-item {
-        padding: 10px;
-        background: #3d3d3d;
-        border-radius: 4px;
+    .header h1 {
+        margin: 0;
+        font-size: 22px;
+        color: #f2f2f2;
+        grid-column: 2;
+        text-align: center;
     }
-    .info-label {
-        font-weight: bold;
-        color: #7c9cbf;
+    .capture-time {
+        grid-column: 3;
+        justify-self: end;
         font-size: 12px;
-        text-transform: uppercase;
+        color: #d7deec;
+        background: rgba(255,255,255,0.03);
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 999px;
+        padding: 6px 10px;
+        white-space: nowrap;
     }
-    .info-value {
-        color: #e0e0e0;
-        font-size: 16px;
-        margin-top: 5px;
+    .panel {
+        background: #151515;
+        border: 1px solid #2a2a2a;
+        border-radius: 10px;
+        padding: 14px;
+        margin-bottom: 12px;
     }
-    .chart-container {
-        background: #2d2d2d;
-        padding: 20px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    .panel-title {
+        margin: 0 0 10px 0;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.7px;
+        color: #dbe3ff;
     }
-    .chart-container h2 {
-        margin-top: 0;
-        color: #e0e0e0;
-        border-bottom: 2px solid #4a5568;
-        padding-bottom: 10px;
+    .table-wrap {
+        overflow-x: auto;
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 10px;
     }
-    .stats-table {
+    .table {
         width: 100%;
+        min-width: 720px;
         border-collapse: collapse;
-        margin-top: 10px;
     }
-    .stats-table th {
-        background: #3d3d3d;
-        color: #e0e0e0;
-        padding: 10px;
+    .table th {
         text-align: left;
-        border-bottom: 2px solid #4a5568;
+        white-space: nowrap;
+        padding: 9px 12px;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.45px;
+        color: #dbe3ff;
+        background: rgba(255,255,255,0.03);
+    }
+    .table td {
+        padding: 10px 12px;
+        font-size: 12px;
+        color: #ffffff;
+        white-space: nowrap;
+        border-top: 1px solid rgba(255,255,255,0.08);
     }
-    .stats-table td {
-        padding: 8px 10px;
-        border-bottom: 1px solid #3d3d3d;
-        color: #b0b0b0;
+    .mono {
+        font-family: Consolas, "Liberation Mono", Menlo, monospace;
     }
-    .stats-table tr:hover {
-        background: #3d3d3d;
+    .meta-row {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        margin-top: 8px;
+        color: #cfd6e5;
+        font-size: 12px;
+    }
+    .meta-pill {
+        background: rgba(255,255,255,0.03);
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 999px;
+        padding: 6px 10px;
     }
     canvas {
         max-width: 100%;
@@ -121,59 +122,43 @@ const template = `
 
 <div class="container">
     <div class="header">
-        <h1>📊 Histogram Capture Analysis</h1>
-        <p><strong>MAC Address:</strong> {{mac_address}}</p>
-        <p><strong>Status:</strong> {{status_message}}</p>
+        <h1>Histogram Capture Analysis</h1>
+        <div class="capture-time">Capture Time: {{capture_time}}</div>
     </div>
 
-    {{#if device_details}}
-    <div class="device-info">
-        <h2>🖥️ Device Information</h2>
-        <div class="info-grid">
-            <div class="info-item">
-                <div class="info-label">Vendor</div>
-                <div class="info-value">{{device_details.VENDOR}}</div>
-            </div>
-            <div class="info-item">
-                <div class="info-label">Model</div>
-                <div class="info-value">{{device_details.MODEL}}</div>
-            </div>
-            <div class="info-item">
-                <div class="info-label">Hardware Rev</div>
-                <div class="info-value">{{device_details.HW_REV}}</div>
-            </div>
-            <div class="info-item">
-                <div class="info-label">Software Rev</div>
-                <div class="info-value">{{device_details.SW_REV}}</div>
-            </div>
+    <div class="panel">
+        <div class="panel-title">Device Info</div>
+        <div class="table-wrap">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>MacAddress</th>
+                        <th>Model</th>
+                        <th>Vendor</th>
+                        <th>SW Version</th>
+                        <th>HW Version</th>
+                        <th>Boot ROM</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="mono">{{device_info.macAddress}}</td>
+                        <td>{{device_info.MODEL}}</td>
+                        <td>{{device_info.VENDOR}}</td>
+                        <td class="mono">{{device_info.SW_REV}}</td>
+                        <td class="mono">{{device_info.HW_REV}}</td>
+                        <td class="mono">{{device_info.BOOTR}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="meta-row">
+            <div class="meta-pill">Bins: {{bin_count}}</div>
         </div>
     </div>
-    {{/if}}
-
-    {{#if measurement_stats}}
-    <div class="device-info">
-        <h2>📈 Measurement Statistics</h2>
-        <table class="stats-table">
-            <thead>
-                <tr>
-                    <th>Parameter</th>
-                    <th>Value</th>
-                </tr>
-            </thead>
-            <tbody>
-                {{#each measurement_stats}}
-                <tr>
-                    <td>{{this.label}}</td>
-                    <td>{{this.value}}</td>
-                </tr>
-                {{/each}}
-            </tbody>
-        </table>
-    </div>
-    {{/if}}
 
-    <div class="chart-container">
-        <h2>📊 Histogram Distribution</h2>
+    <div class="panel">
+        <div class="panel-title">Histogram Distribution</div>
         <canvas id="histogramChart"></canvas>
     </div>
 </div>
@@ -195,8 +180,8 @@ const template = `
                 datasets: [{
                     label: 'Hit Count',
                     data: data.chart_data,
-                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
-                    borderColor: 'rgba(75, 192, 192, 1)',
+                    backgroundColor: 'rgba(0, 194, 255, 0.45)',
+                    borderColor: 'rgba(0, 194, 255, 0.95)',
                     borderWidth: 1
                 }]
             },
@@ -210,7 +195,7 @@ const template = `
                             fontColor: '#e0e0e0'
                         },
                         gridLines: {
-                            color: '#3d3d3d'
+                            color: 'rgba(255,255,255,0.08)'
                         },
                         scaleLabel: {
                             display: true,
@@ -223,7 +208,7 @@ const template = `
                             fontColor: '#e0e0e0'
                         },
                         gridLines: {
-                            color: '#3d3d3d'
+                            color: 'rgba(255,255,255,0.06)'
                         },
                         scaleLabel: {
                             display: true,
@@ -245,39 +230,50 @@ const template = `
 
 function constructVisualizerPayload() {
     const response = pm.response.json();
+    const data = response.data || {};
+    const firstAnalysis = (data.analysis && data.analysis[0]) || {};
+    const pnmHeader = firstAnalysis.pnm_header || {};
+
+    function formatCaptureTime(raw) {
+        if (raw === undefined || raw === null || raw === '') return 'N/A';
+        if (typeof raw === 'number' && isFinite(raw)) {
+            const ms = raw > 1e12 ? raw : raw * 1000;
+            const d = new Date(ms);
+            if (isNaN(d.getTime())) return 'N/A';
+            return d.toISOString().slice(0, 19).replace('T', ' ') + ' UTC';
+        }
+        const n = Number(raw);
+        if (!isNaN(n) && isFinite(n)) {
+            return formatCaptureTime(n);
+        }
+        const d = new Date(raw);
+        if (isNaN(d.getTime())) return String(raw);
+        return d.toISOString().slice(0, 19).replace('T', ' ') + ' UTC';
+    }
 
     // Extract basic info
-    const macAddress = response.mac_address || 'N/A';
+    const macAddress = firstAnalysis.mac_address || response.mac_address || 'N/A';
     const status = response.status;
-    const statusMessage = status === 0 ? '✅ Success' : '❌ Failed';
+    const statusMessage = status === 0 ? 'Success' : 'Failed';
+    const captureTime = formatCaptureTime(pnmHeader.capture_time);
 
     // Extract device details
-    let deviceDetails = null;
-    if (response.data && response.data.analysis && response.data.analysis.length > 0) {
-        const analysis = response.data.analysis[0];
-        if (analysis.device_details && analysis.device_details.system_description) {
-            deviceDetails = analysis.device_details.system_description;
-        }
-    }
-    
-    // Extract measurement stats
-    let measurementStats = [];
-    if (response.data && response.data.measurement_stats && response.data.measurement_stats.length > 0) {
-        const stats = response.data.measurement_stats[0].entry;
-        measurementStats = [
-            { label: 'Histogram Enabled', value: stats.docsPnmCmDsHistEnable ? 'Yes' : 'No' },
-            { label: 'Timeout (seconds)', value: stats.docsPnmCmDsHistTimeOut },
-            { label: 'Measurement Status', value: stats.docsPnmCmDsHistMeasStatus },
-            { label: 'File Name', value: stats.docsPnmCmDsHistFileName }
-        ];
-    }
+    const sys = ((firstAnalysis.device_details || {}).system_description) || {};
+    const deviceInfo = {
+        macAddress: macAddress,
+        MODEL: (sys.MODEL && String(sys.MODEL).trim()) || 'N/A',
+        VENDOR: (sys.VENDOR && String(sys.VENDOR).trim()) || 'N/A',
+        SW_REV: (sys.SW_REV && String(sys.SW_REV).trim()) || 'N/A',
+        HW_REV: (sys.HW_REV && String(sys.HW_REV).trim()) || 'N/A',
+        BOOTR: (sys.BOOTR && String(sys.BOOTR).trim()) || 'N/A'
+    };
 
     // Extract histogram data for chart - MODIFIED TO REMOVE "Bin_" PREFIX
     let chartLabels = [];
     let chartData = [];
 
-    if (response.data && response.data.analysis && response.data.analysis.length > 0) {
-        const analysis = response.data.analysis[0];
+    if (data.analysis && data.analysis.length > 0) {
+        const analysis = data.analysis[0];
         if (analysis.hit_counts && Array.isArray(analysis.hit_counts)) {
             chartData = analysis.hit_counts;
             // Generate labels as just the numeric index (0, 1, 2, 3, ...)
@@ -288,10 +284,11 @@ function constructVisualizerPayload() {
     return {
         mac_address: macAddress,
         status_message: statusMessage,
-        device_details: deviceDetails,
-        measurement_stats: measurementStats,
+        capture_time: captureTime,
+        device_info: deviceInfo,
         chart_labels: chartLabels,
-        chart_data: chartData
+        chart_data: chartData,
+        bin_count: chartData.length
     };
 }