feat(map): add polar grid overlay to Map Analysis and Unified maps (#3971)

Extend the polar grid overlay (range rings + azimuth sectors centered on the
own-node position, #2307) from NodesTab to two more map surfaces, reusing the
existing `PolarGridOverlay` component and `getPolarGridRings()` utility.

Map Analysis:
- New `PolarGridLayer` draws a theme-colored grid centered on each active
  source's own-node position (resolved per `sourceId`).
- Toggle added to the toolbar, disabled when no active source has a known
  own-node position.

Unified / Dashboard map:
- Renders one grid per source that has an own-node position, each colored to
  match that source's per-source color (via `resolveSourceColor`), with a
  legend so overlapping grids stay distinguishable.
- Toggle reuses the existing `MapContext.showPolarGrid` (unified across map
  surfaces), disabled when no source has a position.

Own-node positions are resolved from each source's local `nodeNum` (surfaced by
`GET /api/sources/:id/status`) paired with that node's position in the shared
node list — see new `getOwnNodePositions` util and `useOwnNodePositions` hook.
MeshCore sources (no meshtastic nodeNum) naturally yield no grid.

`PolarGridOverlay` gains an optional `color` prop; when set it recolors the whole
grid at reduced opacity (theme palette otherwise, unchanged for NodesTab).

Tests: new ownNodePositions unit tests, PolarGridOverlay color-override test,
and a Map Analysis toolbar disabled-state test. Full suite green (0 failures).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015AFBA76hsjqhsXe1BdnYub

Author: Yeraze

src/components/Dashboard/DashboardMap.test.tsx

@@ -43,9 +43,21 @@ vi.mock('../../contexts/MapContext', () => ({
     setShowNeighborInfo: vi.fn(),
     showWaypoints: false,
     setShowWaypoints: vi.fn(),
+    showPolarGrid: false,
+    setShowPolarGrid: vi.fn(),
   }),
 }));
 
+// Polar grid (#3971) pulls the source list + per-source status to resolve each
+// source's own-node position. Mock the data hooks so the bare component renders
+// without a QueryClient/AuthProvider; empty data ⇒ no grid, existing assertions
+// (marker/polyline counts) are unaffected.
+vi.mock('../../hooks/useDashboardData', () => ({
+  useDashboardSources: () => ({ data: [] }),
+  useSourceStatuses: () => new Map(),
+  UNIFIED_SOURCE_ID: '__unified__',
+}));
+
 // CSRF + api are provided by the app shell in production; mock them so the bare
 // component renders and the GeoJSON layer fetch is inert in tests.
 vi.mock('../../hooks/useCsrfFetch', () => ({

src/components/Dashboard/DashboardMap.tsx

@@ -24,11 +24,20 @@ import DashboardWaypoints from './DashboardWaypoints';
 import DashboardNodePopup, { type NodeSourceRef } from './DashboardNodePopup';
 import DashboardNeighborPopup from './DashboardNeighborPopup';
 import GeoJsonOverlay from '../GeoJsonOverlay';
+import PolarGridOverlay from '../PolarGridOverlay';
 import { TilesetSelector } from '../TilesetSelector';
 import MapLegend from '../MapLegend';
 import type { GeoJsonLayer } from '../../server/services/geojsonService.js';
 import { useMapContext } from '../../contexts/MapContext';
 import { useSettings } from '../../contexts/SettingsContext';
+import {
+  useDashboardSources,
+  useSourceStatuses,
+  UNIFIED_SOURCE_ID,
+  type DashboardSource,
+} from '../../hooks/useDashboardData';
+import { getSourceColor, resolveSourceColor } from '../../utils/sourceColors';
+import { getOwnNodePositions } from '../../utils/ownNodePositions';
 import { nodePassesTransportFilter } from '../../utils/nodeTransport';
 import { isNullIsland } from '../../utils/nullIsland';
 import { effectiveMapMaxAgeHours } from '../../utils/mapAge';
@@ -161,6 +170,21 @@ export default function DashboardMap({
   const tileset = getTilesetById(tilesetId, customTilesets);
   const { mapPinStyle, setMapTileset } = useSettings();
 
+  // Polar grid (#3971): draw a grid centered on each source's own-node position.
+  // On the Unified map (sourceId === UNIFIED_SOURCE_ID) that's every source, each
+  // in its own color with a legend; on a single-source map it's just that source.
+  const { data: allSources = [] } = useDashboardSources();
+  const allSourceIds = allSources.map((s: DashboardSource) => s.id);
+  // Stable, sorted id list drives per-source color assignment so a source keeps
+  // the same color here as on the other Unified views.
+  const colorSourceIds = [...allSourceIds].sort();
+  const sourceNameById = new Map<string, string>(
+    allSources.map((s: DashboardSource) => [s.id, s.name] as [string, string]),
+  );
+  const isUnified = sourceId === UNIFIED_SOURCE_ID;
+  const polarSourceIds = isUnified ? allSourceIds : sourceId ? [sourceId] : [];
+  const sourceStatuses = useSourceStatuses(polarSourceIds);
+
   // Spiderfier: fan out co-located markers so each node (incl. estimated-position
   // nodes that collapse onto the same anchor) is individually selectable (#3612).
   // Reuses the SAME shared SpiderfierController + tuning as the per-source NodesTab
@@ -259,6 +283,8 @@ export default function DashboardMap({
     setShowNeighborInfo,
     showWaypoints,
     setShowWaypoints,
+    showPolarGrid,
+    setShowPolarGrid,
     mapMaxAgeHours,
     setMapMaxAgeHours,
   } = useMapContext();
@@ -317,6 +343,16 @@ export default function DashboardMap({
 
   const nodePositions: [number, number][] = nodesWithPosition.map((e) => [e.pos.lat, e.pos.lng]);
 
+  // Own-node position per source for the polar grid. Resolved from the raw
+  // `nodes` prop (not the age/transport-filtered marker list) so the grid center
+  // survives even when the local node is stale or filtered off the map.
+  const localNodeNumBySource = new Map<string, number | null | undefined>();
+  for (const id of polarSourceIds) {
+    localNodeNumBySource.set(id, sourceStatuses.get(id)?.nodeNum ?? null);
+  }
+  const ownNodePositions = getOwnNodePositions(nodes, localNodeNumBySource);
+  const hasOwnNode = ownNodePositions.length > 0;
+
   // Genuine removals (a node aged out / filtered away) are reconciled here
   // rather than from the ref `null` bounce (see getMarkerRef): drop any tracked
   // marker whose key is no longer rendered, and unregister it from the
@@ -471,6 +507,16 @@ export default function DashboardMap({
 
         {geoJsonLayers.length > 0 && <GeoJsonOverlay layers={geoJsonLayers} />}
 
+        {/* Polar grid — one per source with a known own-node position, each in
+            that source's color so overlapping grids stay distinguishable (#3971). */}
+        {showPolarGrid && ownNodePositions.map((op) => (
+          <PolarGridOverlay
+            key={`polar-${op.sourceId}`}
+            center={{ lat: op.lat, lng: op.lng }}
+            color={resolveSourceColor(op.sourceId, colorSourceIds)}
+          />
+        ))}
+
         {showWaypoints && <DashboardWaypoints sourceId={sourceId} />}
 
         {nodesWithPosition.map(({ node, pos }) => {
@@ -653,6 +699,25 @@ export default function DashboardMap({
         />
       )}
 
+      {/* Polar grid legend — names each source whose grid is drawn, with its
+          color swatch, so overlapping grids on the Unified map aren't confused. */}
+      {showPolarGrid && ownNodePositions.length > 0 && (
+        <div className="dashboard-polar-grid-legend" role="note" aria-label="Polar grid sources">
+          <div className="dashboard-polar-grid-legend__title">Polar Grid</div>
+          {ownNodePositions.map((op) => (
+            <div key={`legend-${op.sourceId}`} className="dashboard-polar-grid-legend__row">
+              <span
+                className="dashboard-polar-grid-legend__swatch"
+                style={{ background: getSourceColor(op.sourceId, colorSourceIds) }}
+              />
+              <span className="dashboard-polar-grid-legend__name">
+                {sourceNameById.get(op.sourceId) ?? op.sourceId}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
       {/* Map Features control panel — mirrors NodesTab's "Features" panel but
           trimmed to the toggles meaningful on a cross-source map. */}
       <div className={`map-controls dashboard-map-controls ${isMapControlsCollapsed ? 'collapsed' : ''}`}>
@@ -770,6 +835,17 @@ export default function DashboardMap({
             />
             <span>Show Waypoints</span>
           </label>
+          <label className="map-control-item">
+            <input
+              type="checkbox"
+              checked={showPolarGrid && hasOwnNode}
+              disabled={!hasOwnNode}
+              onChange={(e) => setShowPolarGrid(e.target.checked)}
+            />
+            <span title={!hasOwnNode ? 'No source has a known own-node position' : undefined}>
+              Show Polar Grid
+            </span>
+          </label>
           <label className="map-control-item">
             <input
               type="checkbox"

src/components/MapAnalysis/LayerToggleButton.tsx

@@ -9,6 +9,10 @@ export interface LayerToggleButtonProps {
   onLookbackChange?: (h: number | null) => void;
   loading?: boolean;
   errored?: boolean;
+  /** When true the toggle can't be clicked (e.g. no own-node position, #3971). */
+  disabled?: boolean;
+  /** Tooltip shown on the button — useful to explain a disabled state. */
+  title?: string;
 }
 
 export default function LayerToggleButton({
@@ -20,6 +24,8 @@ export default function LayerToggleButton({
   onLookbackChange,
   loading,
   errored,
+  disabled,
+  title,
 }: LayerToggleButtonProps) {
   const [popOpen, setPopOpen] = useState(false);
   const showChevron = !!lookbackOptions && !!onLookbackChange;
@@ -29,6 +35,8 @@ export default function LayerToggleButton({
       <button
         type="button"
         onClick={() => onToggle(!enabled)}
+        disabled={disabled}
+        title={title}
         className={`map-analysis-layer-btn ${enabled ? 'active' : ''}`}
       >
         {label}

src/components/MapAnalysis/MapAnalysisCanvas.tsx

@@ -12,6 +12,7 @@ import PositionTrailsLayer from './layers/PositionTrailsLayer';
 import CoverageHeatmapLayer from './layers/CoverageHeatmapLayer';
 import SnrOverlayLayer from './layers/SnrOverlayLayer';
 import WaypointsLayer from './layers/WaypointsLayer';
+import PolarGridLayer from './layers/PolarGridLayer';
 import TimeSliderControl from './TimeSliderControl';
 import MapLegend from './MapLegend';
 
@@ -67,6 +68,11 @@ export default function MapAnalysisCanvas() {
         <Pane name="heatmap" style={{ zIndex: 350 }}>
           {config.layers.heatmap.enabled && <CoverageHeatmapLayer />}
         </Pane>
+        {/* Polar grid sits just below the node markers (z600) so its labels don't
+            paint over them, but above the data layers so the range rings read. */}
+        <Pane name="polarGrid" style={{ zIndex: 550 }}>
+          {config.layers.polarGrid.enabled && <PolarGridLayer />}
+        </Pane>
       </MapContainer>
       <TilesetSelector selectedTilesetId={mapTileset} onTilesetChange={setMapTileset} />
       <TimeSliderControl />

src/components/MapAnalysis/MapAnalysisToolbar.test.tsx

@@ -10,6 +10,9 @@ import { MapAnalysisProvider } from './MapAnalysisContext';
 
 vi.mock('../../hooks/useDashboardData', () => ({
   useDashboardSources: () => ({ data: [{ id: 'a', name: 'A' }, { id: 'b', name: 'B' }] }),
+  // The Polar Grid toggle resolves own-node positions via these hooks (#3971).
+  useDashboardUnifiedData: () => ({ nodes: [] }),
+  useSourceStatuses: () => new Map(),
 }));
 
 const wrapper = ({ children }: { children: React.ReactNode }) => {
@@ -33,6 +36,13 @@ describe('MapAnalysisToolbar', () => {
     }
   });
 
+  it('renders the Polar Grid toggle disabled when no source has an own-node position (#3971)', () => {
+    render(<MapAnalysisToolbar />, { wrapper });
+    const btn = screen.getByRole('button', { name: /polar grid/i });
+    expect(btn).toBeInTheDocument();
+    expect(btn).toBeDisabled();
+  });
+
   it('toggles a layer and persists to localStorage', () => {
     render(<MapAnalysisToolbar />, { wrapper });
     fireEvent.click(screen.getByRole('button', { name: /traceroutes/i }));

src/components/MapAnalysis/MapAnalysisToolbar.tsx

@@ -6,6 +6,7 @@ import NodeTypeFilterControl from './NodeTypeFilterControl';
 import NodeSearchControl from './NodeSearchControl';
 import TracerouteControls from './TracerouteControls';
 import { useMapAnalysisCtx } from './MapAnalysisContext';
+import { useOwnNodePositions } from '../../hooks/useOwnNodePositions';
 import { LayerKey } from '../../hooks/useMapAnalysisConfig';
 import {
   usePositions,
@@ -35,6 +36,11 @@ export default function MapAnalysisToolbar() {
   const { config, setLayerEnabled, setLayerLookback, setSources, setTimeSlider, reset } = useMapAnalysisCtx();
   const { data: sources = [] } = useDashboardSources();
 
+  // Polar grid (#3971): centered on each active source's own-node position.
+  // Disable the toggle when no active source has a resolvable own node.
+  const ownNodePositions = useOwnNodePositions(config.sources);
+  const hasOwnNode = ownNodePositions.length > 0;
+
   const sourceIds = config.sources.length === 0
     ? sources.map((s: { id: string }) => s.id)
     : config.sources;
@@ -120,6 +126,13 @@ export default function MapAnalysisToolbar() {
           onToggle={(next) => setLayerEnabled(key, next)}
         />
       ))}
+      <LayerToggleButton
+        label="Polar Grid"
+        enabled={config.layers.polarGrid.enabled && hasOwnNode}
+        onToggle={(next) => setLayerEnabled('polarGrid', next)}
+        disabled={!hasOwnNode}
+        title={hasOwnNode ? undefined : 'No source has a known own-node position'}
+      />
       {TIMED_LAYERS.map(({ key, label, options }) => (
         <LayerToggleButton
           key={key}

src/components/MapAnalysis/layers/PolarGridLayer.tsx

@@ -0,0 +1,28 @@
+/**
+ * PolarGridLayer — renders the polar grid overlay (range rings + azimuth
+ * sectors, #2307) on the Map Analysis canvas (#3971).
+ *
+ * Map Analysis is scoped per source, so one grid is drawn per active source
+ * that has a resolvable own-node position, centered on that node. The theme-
+ * aware `overlayColors.polarGrid` palette is used (matching NodesTab); the
+ * per-source coloring is reserved for the Unified/Dashboard map where several
+ * grids routinely overlap.
+ */
+import { useMapAnalysisCtx } from '../MapAnalysisContext';
+import { useOwnNodePositions } from '../../../hooks/useOwnNodePositions';
+import PolarGridOverlay from '../../PolarGridOverlay';
+
+export default function PolarGridLayer() {
+  const { config } = useMapAnalysisCtx();
+  // config.sources empty = "all sources" (unified semantics), matching the
+  // marker/source filters elsewhere in Map Analysis.
+  const ownPositions = useOwnNodePositions(config.sources);
+
+  return (
+    <>
+      {ownPositions.map((op) => (
+        <PolarGridOverlay key={op.sourceId} center={{ lat: op.lat, lng: op.lng }} />
+      ))}
+    </>
+  );
+}

src/components/PolarGridOverlay.test.tsx

@@ -7,8 +7,15 @@ import React from 'react';
 import { PolarGridOverlay } from './PolarGridOverlay';
 
 vi.mock('react-leaflet', () => ({
-  Circle: ({ center, radius }: any) => (
-    <div data-testid="circle" data-radius={radius} data-lat={center[0]} data-lng={center[1]} />
+  Circle: ({ center, radius, pathOptions }: any) => (
+    <div
+      data-testid="circle"
+      data-radius={radius}
+      data-lat={center[0]}
+      data-lng={center[1]}
+      data-color={pathOptions?.color}
+      data-opacity={pathOptions?.opacity}
+    />
   ),
   Polyline: ({ positions }: any) => <div data-testid="polyline" />,
   Marker: ({ position }: any) => (
@@ -95,4 +102,23 @@ describe('PolarGridOverlay', () => {
       expect(radii[i]).toBeGreaterThan(radii[i - 1]);
     }
   });
+
+  it('uses the theme ring color at full opacity by default', () => {
+    render(<PolarGridOverlay center={CENTER} />);
+    const circle = screen.getAllByTestId('circle')[0];
+    expect(circle.getAttribute('data-color')).toBe('rgba(0,200,255,0.3)');
+    // No explicit opacity override (undefined) — the rgba alpha carries the
+    // transparency, so the attribute is absent.
+    expect(circle.getAttribute('data-opacity')).toBeNull();
+  });
+
+  it('overrides every ring with the per-source color at reduced opacity (#3971)', () => {
+    render(<PolarGridOverlay center={CENTER} color="#89b4fa" />);
+    const circles = screen.getAllByTestId('circle');
+    circles.forEach((circle) => {
+      expect(circle.getAttribute('data-color')).toBe('#89b4fa');
+      expect(Number(circle.getAttribute('data-opacity'))).toBeLessThan(1);
+      expect(Number(circle.getAttribute('data-opacity'))).toBeGreaterThan(0);
+    });
+  });
 });

src/components/PolarGridOverlay.tsx

@@ -6,13 +6,23 @@ import { getPolarGridRings, getSectorEndpoint } from '../utils/polarGrid.js';
 
 interface PolarGridOverlayProps {
   center: { lat: number; lng: number };
+  /**
+   * Optional literal (hex/rgb) color override for the whole grid. When set,
+   * rings/sectors/labels all render in this color at reduced opacity — used on
+   * the Unified/Dashboard map (#3971) to draw one grid per source in that
+   * source's color so overlapping grids stay distinguishable. When omitted the
+   * grid uses the theme-aware `overlayColors.polarGrid` palette (NodesTab / Map
+   * Analysis). Must be a resolved literal, not a `var(--…)` — Leaflet paints SVG
+   * strokes via the presentation attribute, which does not evaluate CSS vars.
+   */
+  color?: string;
 }
 
 const SECTOR_BEARINGS = Array.from({ length: 12 }, (_, i) => i * 30);
 const CARDINAL_BEARINGS = new Set([0, 90, 180, 270]);
 const DEGREE_LABELS = ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'];
 
-export const PolarGridOverlay: React.FC<PolarGridOverlayProps> = ({ center }) => {
+export const PolarGridOverlay: React.FC<PolarGridOverlayProps> = ({ center, color }) => {
   const map = useMap();
   const { distanceUnit, overlayColors } = useSettings();
   const [zoom, setZoom] = useState(map.getZoom());
@@ -23,7 +33,16 @@ export const PolarGridOverlay: React.FC<PolarGridOverlayProps> = ({ center }) =>
     return () => { map.off('zoomend', onZoomEnd); };
   }, [map]);
 
-  const colors = overlayColors;
+  // When a per-source color override is provided, use it for every grid element
+  // (the theme palette bakes opacity into rgba() values; a solid override gets
+  // opacity via pathOptions instead). Otherwise fall back to the theme palette.
+  const gridColors = color
+    ? { rings: color, sectors: color, cardinalSectors: color, labels: color }
+    : overlayColors.polarGrid;
+  const ringOpacity = color ? 0.5 : undefined;
+  const cardinalOpacity = color ? 0.55 : undefined;
+  const sectorOpacity = color ? 0.35 : undefined;
+  const colors = { polarGrid: gridColors };
   const centerLatLng: [number, number] = [center.lat, center.lng];
 
   const rings = useMemo(
@@ -76,6 +95,7 @@ export const PolarGridOverlay: React.FC<PolarGridOverlayProps> = ({ center }) =>
           pathOptions={{
             color: colors.polarGrid.rings,
             weight: 2,
+            opacity: ringOpacity,
             fill: false,
             interactive: false,
           }}
@@ -91,6 +111,7 @@ export const PolarGridOverlay: React.FC<PolarGridOverlayProps> = ({ center }) =>
               ? colors.polarGrid.cardinalSectors
               : colors.polarGrid.sectors,
             weight: 2,
+            opacity: sector.isCardinal ? cardinalOpacity : sectorOpacity,
             dashArray: sector.isCardinal ? undefined : '6 6',
             interactive: false,
           }}