From 5843b3dcc5b47500adb049924275dd7f3ed788a6 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Wed, 21 Jan 2026 22:13:53 +0000
Subject: [PATCH] Replace legacy WiFi visualizations with v2 components

- Replace Network Radar canvas with v2 Proximity Radar component
- Replace verbose channel bar wrappers with v2 Channel Analysis panel
- Add filter buttons (All/Hidden/Open) and zone summary to radar
- Add band tabs (2.4/5 GHz) to channel chart
- Hide legacy elements for backwards compatibility

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 templates/index.html | 188 ++++++++-----------------------------------
 1 file changed, 34 insertions(+), 154 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 1266ae4..4e7b223 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -492,10 +492,31 @@
                                     or client to view details</div>
                             </div>
                         </div>
-                        <!-- Row 1: Network Radar + Security Overview -->
+                        <!-- Row 1: Proximity Radar (v2) + Security Overview -->
                         <div class="wifi-visual-panel">
-                            <h5>Network Radar</h5>
-                            <div class="radar-container">
+                            <h5>Proximity Radar</h5>
+                            <div id="wifiProximityRadar" style="display: flex; justify-content: center; padding: 8px 0;"></div>
+                            <div id="wifiRadarControls" style="display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap;">
+                                <button data-filter="all" class="wifi-radar-filter-btn active" style="padding: 4px 10px; font-size: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: #888; cursor: pointer;">All</button>
+                                <button data-filter="hidden" class="wifi-radar-filter-btn" style="padding: 4px 10px; font-size: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: #888; cursor: pointer;">Hidden</button>
+                                <button data-filter="open" class="wifi-radar-filter-btn" style="padding: 4px 10px; font-size: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: #888; cursor: pointer;">Open</button>
+                            </div>
+                            <div id="wifiZoneSummary" style="display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-size: 10px;">
+                                <div style="text-align: center;">
+                                    <span id="wifiZoneImmediate" style="font-size: 16px; font-weight: 600; color: #22c55e;">0</span>
+                                    <div style="color: #666;">Near</div>
+                                </div>
+                                <div style="text-align: center;">
+                                    <span id="wifiZoneNear" style="font-size: 16px; font-weight: 600; color: #eab308;">0</span>
+                                    <div style="color: #666;">Mid</div>
+                                </div>
+                                <div style="text-align: center;">
+                                    <span id="wifiZoneFar" style="font-size: 16px; font-weight: 600; color: #ef4444;">0</span>
+                                    <div style="color: #666;">Far</div>
+                                </div>
+                            </div>
+                            <!-- Legacy radar canvas (hidden, for backwards compat) -->
+                            <div style="display: none;">
                                 <canvas id="radarCanvas" width="150" height="150"></canvas>
                             </div>
                         </div>
@@ -521,124 +542,17 @@
                                 </div>
                             </div>
                         </div>
-                        <!-- Row 2: Channel Utilization (2.4 GHz + 5 GHz side by side) -->
-                        <div class="wifi-visual-panel">
-                            <h5>Channel Utilization (2.4 GHz)</h5>
-                            <div class="channel-graph" id="channelGraph">
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">1</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">2</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">3</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">4</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">5</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">6</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">7</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">8</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">9</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">10</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">11</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">12</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">13</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="wifi-visual-panel">
-                            <h5>Channel Utilization (5 GHz)</h5>
-                            <div class="channel-graph" id="channelGraph5g" style="font-size: 7px;">
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">36</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">40</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">44</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">48</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">52</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">56</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">60</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">64</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">100</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">149</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">153</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">157</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">161</span>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar" style="height: 2px;"></div><span
-                                        class="channel-label">165</span>
-                                </div>
+                        <!-- Row 2: Channel Analysis (v2) -->
+                        <div class="wifi-visual-panel" style="grid-column: span 2;">
+                            <h5>Channel Analysis</h5>
+                            <div id="wifiChannelBandTabs" style="display: flex; gap: 4px; margin-bottom: 8px;">
+                                <button data-band="2.4" class="channel-band-tab active" style="padding: 4px 12px; font-size: 10px; background: var(--accent-cyan); color: #000; border: none; border-radius: 4px; cursor: pointer;">2.4 GHz</button>
+                                <button data-band="5" class="channel-band-tab" style="padding: 4px 12px; font-size: 10px; background: var(--bg-tertiary); color: #888; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer;">5 GHz</button>
                             </div>
+                            <div id="wifiChannelChart"></div>
+                            <!-- Legacy channel graphs (hidden, for backwards compat) -->
+                            <div id="channelGraph" style="display: none;"></div>
+                            <div id="channelGraph5g" style="display: none;"></div>
                         </div>
                         <!-- Row 3: Channel Recommendation -->
                         <div class="wifi-visual-panel channel-recommendation" id="channelRecommendation">
@@ -684,40 +598,6 @@
                         <div class="wifi-visual-panel" style="grid-column: span 2;">
                             <div id="wifiTimelineContainer"></div>
                         </div>
-                        <!-- v2 Proximity Radar -->
-                        <div class="wifi-visual-panel wifi-v2-radar-panel">
-                            <h5>Proximity Radar</h5>
-                            <div id="wifiProximityRadar" style="display: flex; justify-content: center; padding: 8px 0;"></div>
-                            <div id="wifiRadarControls" style="display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap;">
-                                <button data-filter="all" class="wifi-radar-filter-btn active" style="padding: 4px 10px; font-size: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: #888; cursor: pointer;">All</button>
-                                <button data-filter="hidden" class="wifi-radar-filter-btn" style="padding: 4px 10px; font-size: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: #888; cursor: pointer;">Hidden</button>
-                                <button data-filter="open" class="wifi-radar-filter-btn" style="padding: 4px 10px; font-size: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: #888; cursor: pointer;">Open</button>
-                                <button data-filter="strong" class="wifi-radar-filter-btn" style="padding: 4px 10px; font-size: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: #888; cursor: pointer;">Strong</button>
-                            </div>
-                            <div id="wifiZoneSummary" style="display: flex; justify-content: center; gap: 24px; margin-top: 12px; font-size: 11px;">
-                                <div style="text-align: center;">
-                                    <span id="wifiZoneImmediate" style="font-size: 20px; font-weight: 600; color: #22c55e;">0</span>
-                                    <div style="color: #666;">Immediate</div>
-                                </div>
-                                <div style="text-align: center;">
-                                    <span id="wifiZoneNear" style="font-size: 20px; font-weight: 600; color: #eab308;">0</span>
-                                    <div style="color: #666;">Near</div>
-                                </div>
-                                <div style="text-align: center;">
-                                    <span id="wifiZoneFar" style="font-size: 20px; font-weight: 600; color: #ef4444;">0</span>
-                                    <div style="color: #666;">Far</div>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- v2 Channel Analysis -->
-                        <div class="wifi-visual-panel wifi-v2-channel-panel">
-                            <h5>Channel Analysis (v2)</h5>
-                            <div id="wifiChannelBandTabs" style="display: flex; gap: 4px; margin-bottom: 8px;">
-                                <button data-band="2.4" class="channel-band-tab active" style="padding: 4px 12px; font-size: 10px; background: var(--accent-cyan); color: #000; border: none; border-radius: 4px; cursor: pointer;">2.4 GHz</button>
-                                <button data-band="5" class="channel-band-tab" style="padding: 4px 12px; font-size: 10px; background: var(--bg-tertiary); color: #888; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer;">5 GHz</button>
-                            </div>
-                            <div id="wifiChannelChart"></div>
-                        </div>
                     </div>
                     <!-- Right: WiFi Device Cards -->
                     <div class="wifi-device-list" id="wifiDeviceList">