carverauto/serviceradar

Fork 0

sync #2996

Merged

mfreeman451 merged 220 commits from refs/pull/2996/head into 2371-analytics-stats-cards-should-abbreviate-numbers

2026-03-01 03:37:19 +00:00

mfreeman451 commented

2026-03-01 03:36:57 +00:00

(Migrated from github.com)

Owner

Imported from GitHub pull request.

Original GitHub pull request: #2958
Original author: @mfreeman451
Original URL: https://github.com/carverauto/serviceradar/pull/2958
Original created: 2026-03-01T03:36:57Z
Original updated: 2026-03-01T03:41:32Z
Original head: carverauto/serviceradar:staging
Original base: 2371-analytics-stats-cards-should-abbreviate-numbers
Original merged: 2026-03-01T03:37:19Z by @mfreeman451

User description

IMPORTANT: Please sign the Developer Certificate of Origin

Thank you for your contribution to ServiceRadar. Please note, when contributing, the developer must include
a DCO sign-off statement indicating the DCO acceptance in one commit message. Here
is an example DCO Signed-off-by line in a commit message:

Signed-off-by: J. Doe <j.doe@domain.com>

Describe your changes

Issue ticket number and link

Code checklist before requesting a review

I have signed the DCO?
The build completes without errors?
All tests are passing when running make test?

PR Type

Enhancement, Tests

Description

Comprehensive implementation of "God View" network topology visualization system with interactive 3D rendering using deck.gl and D3
Core visualization engine with node/edge rendering, particle flow animation, and zoom-tier-based graph clustering (local → regional → global)
Graph layout algorithms including Mercator projection for geographic positioning and force-directed layout with D3 simulation
Binary stream decoding for Apache Arrow IPC format with telemetry data extraction and topology change detection
Interactive features: node/edge selection, tooltips, pan/drag/zoom controls, theme-aware styling (light/dark modes)
Netflow chart components (Sankey, stacked area, line series, grid, 100% stacked) with D3-based visualization and interactive legends
Custom deck.gl packet flow layer with GLSL shaders for animated particle effects and directional flow visualization
Comprehensive test suite covering graph algorithms, rendering logic, DOM interactions, and dependency injection contracts
Utility libraries for number formatting, D3 helpers, and WebAssembly runtime wrapper for graph algorithms
ESLint configuration enforcing state/dependency access patterns and preventing deprecated imports
Removal of legacy Dusk profile system and obsolete command-line tools (agent, CLI, profiler, trapd, flowgger, etc.)

Diagram Walkthrough

flowchart LR
  A["Binary Stream<br/>Arrow IPC"] -->|"lifecycle_stream_decode"| B["Graph Nodes<br/>& Edges"]
  B -->|"rendering_graph_data"| C["Visibility Masks<br/>& Filtering"]
  C -->|"layout_cluster"| D["Zoom-Tier<br/>Clustering"]
  D -->|"layout_topology"| E["Node Positions<br/>Geo/Force-Directed"]
  E -->|"layout_animation"| F["Animated<br/>Transitions"]
  F -->|"rendering_graph_layer"| G["deck.gl Layers<br/>Nodes/Edges/Particles"]
  G -->|"rendering_style"| H["Visual Styling<br/>Colors/Widths/Effects"]
  H -->|"DOM Rendering"| I["Interactive<br/>3D Canvas"]
  I -->|"lifecycle_dom_interaction"| J["Pan/Zoom/<br/>Selection"]
  J -->|"rendering_selection"| K["Detail Panels<br/>& Tooltips"]
  L["Netflow Data"] -->|"NetflowCharts"| M["D3 Visualizations<br/>Sankey/Area/Line"]
  M -->|"Interactive Legend"| N["Filtered Charts"]

File Walkthrough

Relevant files

Enhancement

41 files

NetflowSankeyChart.js `D3 Sankey chart visualization for netflow data` elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js New D3-based Sankey diagram component for visualizing three-column network flow data (source → middle → destination) Implements interactive tooltips, node/edge highlighting, and graceful degradation to 2-column layout on circular dependency detection Supports dynamic resizing via ResizeObserver and handles edge metadata (port, protocol, topology class) Includes fallback rendering for empty datasets and error states	+380/-0
rendering_graph_layer_transport_methods.js `Deck.gl transport layer rendering for god view` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js Builds deck.gl layer stack for network visualization (mantle, crust, atmosphere, security layers) Implements particle flow animation with zoom-dependent scaling, directional flow rendering, and focus-based alpha multipliers Supports fallback ScatterplotLayer for environments without shader support Includes geo-grid background with animated sweep effect	+260/-0
MapboxFlowMap.js `Mapbox GL map visualization with theme support` elixir/web-ng/assets/js/hooks/MapboxFlowMap.js Mapbox GL integration hook with theme-aware style switching (light/dark modes) Manages markers, flow lines, and automatic bounds fitting based on source/destination coordinates Monitors DOM theme changes via MutationObserver and OS color-scheme preferences Includes fallback messaging for disabled maps or missing access tokens	+309/-0
rendering_selection_methods.js `Node/edge selection and detail rendering methods` elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js Implements node selection detail rendering with HTML escaping and device reference links Maps node type IDs to HeroIcon classes for visual representation Handles edge selection via interaction keys and node focus navigation with view state updates Provides causal root/parent node reference buttons and comprehensive node metadata display	+191/-0
util.js `Netflow chart utilities and D3 helpers` elixir/web-ng/assets/js/netflow_charts/util.js Utility library for netflow chart rendering with D3 helpers and DOM overlay management Provides tooltip attachment, SVG clearing, chart dimension calculation, and time-series normalization Implements legend building, number/percentage formatting, and HTML escaping Includes color scale generation and time-based tooltip with bisector-based data lookup	+224/-0
rendering_style_edge_particle_methods.js `Packet flow particle generation and styling` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.js Generates packet flow particle instances for animated edge visualization with directional flow support Calculates particle density, speed, and color based on edge utilization, capacity, and zoom level Implements bidirectional lane separation and jitter-based spread for visual clarity Includes caching mechanism via `packetFlowCacheStamp` to avoid redundant particle generation	+146/-0
layout_cluster_methods.js `Graph clustering and zoom-tier layout methods` elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.js Implements zoom-tier-based graph reshaping (local → regional → global clustering) Clusters nodes by state (global) or grid cell (regional) with aggregated metrics and topology class counts Preserves directional flow telemetry (flowPpsAb/Ba, flowBpsAb/Ba) across cluster boundaries Generates cluster metadata with sample node details and state histograms	+187/-0
NetflowStackedAreaChart.js `D3 stacked area chart for netflow time series` elixir/web-ng/assets/js/hooks/charts/NetflowStackedAreaChart.js D3-based stacked area chart for time-series netflow data with interactive legend Supports overlay lines (previous/revised comparisons) with distinct stroke patterns Implements time-based tooltip with bisector lookup and series click events Includes ResizeObserver for responsive rendering and hidden series filtering	+195/-0
PacketFlowLayer.js `Custom deck.gl packet flow visualization layer` elixir/web-ng/assets/js/lib/deckgl/PacketFlowLayer.js Implements custom deck.gl layer for animated packet flow visualization with GLSL shaders Defines vertex and fragment shaders for particle rendering with fade effects and glow Provides attribute management for flow direction, speed, size, jitter, and color Includes bounds calculation and model lifecycle management	+194/-0
NetflowStacked100Chart.js `Stacked 100% area chart with overlays` elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js Creates stacked 100% area chart for normalized time-series data visualization Implements legend with visibility toggling and composition overlay support Adds time-based tooltip with percentage formatting Handles responsive resizing via ResizeObserver	+207/-0
lifecycle_dom_setup_methods.js `God view DOM initialization and deck setup` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js Initializes DOM elements for canvas, HUD panels, and event listeners Creates deck.gl instance with orthographic view and error handling fallbacks Manages canvas resizing and WebGPU/WebGL renderer mode selection Implements click handlers for device links and node selection in detail panels	+174/-0
renderer_deps.js `Dependency injection framework for god view` elixir/web-ng/assets/js/lib/god_view/renderer_deps.js Defines dependency injection architecture with JSDoc type definitions Exports builder functions for layout, rendering, and lifecycle dependencies Maintains lists of required dependency keys for validation Provides forwarding functions to compose context namespaces	+154/-0
lifecycle_dom_interaction_methods.js `DOM interaction and animation lifecycle methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.js Implements animation loop with reduced motion preference detection Handles pan/drag interactions with pointer capture and threshold detection Manages wheel zoom with view state updates and zoom tier resolution Syncs system and document-level theme preferences via MediaQuery	+163/-0
JdmEditorHook.js `JDM editor hook with theme synchronization` elixir/web-ng/assets/js/hooks/JdmEditorHook.js Integrates JDM decision graph editor with React and theme support Implements theme detection from Phoenix data-theme attribute and system preferences Handles editor updates via LiveView events and definition change callbacks Manages React root lifecycle with proper cleanup on destruction	+180/-0
NetflowGridChart.js `Grid layout multi-series chart component` elixir/web-ng/assets/js/hooks/charts/NetflowGridChart.js Creates grid layout of mini line charts for multi-series time-series visualization Implements legend with visibility toggling and responsive grid sizing Adds shared time-based tooltip across all series Handles ResizeObserver for responsive chart updates	+141/-0
rendering_graph_layer_node_methods.js `Node layer rendering with animation effects` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_node_methods.js Builds deck.gl layers for node visualization including tethers, halos, rings, and labels Implements animated breathing effect on node rings using animation phase Adds conditional edge label rendering based on zoom shape (local/regional/global) Manages node color, size, and selection state rendering	+130/-0
lifecycle_stream_snapshot_methods.js `Snapshot stream parsing and graph lifecycle` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.js Handles binary snapshot message parsing with magic number validation Decodes Arrow graph format and manages topology change detection Implements performance metrics collection for network, decode, and render times Provides base64 to ArrayBuffer conversion for snapshot payloads	+116/-0
NetflowLineSeriesChart.js `Multi-series line chart with composition overlays` elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js Creates multi-series line chart with support for previous and reverse composition overlays Implements dashed stroke patterns for overlay types (prev/rev) Adds legend with visibility toggling and time-based tooltip Handles responsive resizing via ResizeObserver	+130/-0
rendering_style_node_reason_methods.js `Node state reason and causal analysis methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.js Maps node states to categories and display names with default reasons Implements causal reason humanization with hop distance and node references Builds node index lookup for efficient state reason generation Handles edge dependency analysis for affected node classification	+128/-0
rendering_graph_data_methods.js `Graph data visibility and filtering methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.js Builds visible graph data with state and traversal visibility masks Constructs edge data with flow metrics, telemetry eligibility, and interaction keys Generates node data with position, state, and metric information Manages edge and node selection state with visibility tracking	+103/-0
god_view_exec_runtime.js `WebAssembly runtime wrapper for graph algorithms` elixir/web-ng/assets/js/wasm/god_view_exec_runtime.js Wraps WebAssembly module for state mask and traversal computation Implements memory allocation and byte writing for WASM interop Provides interpolation and three-hop mask computation functions Handles WASM asset fetching with fallback URL candidates	+143/-0
SRQLTimeCookie.js `SRQL time token persistence hook` elixir/web-ng/assets/js/hooks/SRQLTimeCookie.js Persists SRQL time token to cookie with debounced input handling Restores time token from cookie on page load unless URL has query param Implements time token extraction and upsert in query string Syncs input value on LiveView updates when not focused	+107/-0
layout_topology_algorithm_methods.js `Graph layout algorithms for topology visualization` elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.js Implements Mercator projection for geographic layout positioning with latitude/longitude clamping Provides force-directed graph layout using D3 simulation with configurable forces (charge, link, collide, center) Generates geographic grid data for visualization overlay in geo mode Includes layout bounds normalization and fallback positioning for nodes without geo coordinates	+94/-0
lifecycle_stream_decode_methods.js `Binary stream decoding for graph topology data` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.js Decodes Apache Arrow IPC binary format into graph nodes and edges with telemetry data Parses optional float values with NaN handling for geographic coordinates Extracts node properties (state, label, PPS, operational status) and edge metrics (flow, capacity, telemetry eligibility) Returns typed arrays (`Uint32Array`) for edge source/target indices for efficient graph traversal	+104/-0
rendering_graph_bitmap_methods.js `Graph bitmap and mask computation methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.js Manages bitmap metadata for node state categorization (root_cause, affected, healthy, unknown) Computes visibility masks based on filter state with optional WASM acceleration fallback Implements three-hop traversal mask computation for selected node neighborhoods Provides fallback implementations using typed arrays when WASM engine unavailable	+127/-0
rendering_style_edge_telemetry_methods.js `Edge telemetry styling and formatting` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.js Formats packet rate (pps) and capacity values with appropriate unit scaling (K/M/G) Computes edge colors based on utilization and packet rate with vivid/muted variants Calculates edge width pixels using capacity-based base width plus flow-based boost Normalizes connection labels from edge metadata with fallback to "LINK"	+67/-0
TimeseriesCombinedChart.js `Multi-series timeseries chart with interactive tooltips` elixir/web-ng/assets/js/hooks/charts/TimeseriesCombinedChart.js Implements interactive tooltip display for multi-series timeseries charts on mousemove Formats values according to unit type (percent, bytes, Hz, count per second) Positions tooltip and hover line relative to SVG container with boundary clamping Manages event listener lifecycle with cleanup on component destruction	+115/-0
rendering_tooltip_methods.js `Tooltip generation and hover state management` elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.js Generates styled HTML tooltips for nodes with IP, type, state, and geo information Provides edge telemetry tooltips showing connection type, packet rate, and capacity Implements hover state tracking for edges and nodes with cursor feedback Determines edge focus state based on hover/selection keys	+84/-0
TimeseriesChart.js `Single-series timeseries chart with tooltips` elixir/web-ng/assets/js/hooks/charts/TimeseriesChart.js Implements single-series timeseries chart with interactive tooltip on mousemove Formats values based on configurable unit type (percent, bytes, Hz, count per second) Positions tooltip and hover line with boundary-aware clamping Manages event listener cleanup on component destruction	+98/-0
layout_topology_state_methods.js `Layout topology state management` elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.js Manages graph layout mode selection (geo vs force-directed) based on coordinate coverage Implements topology change detection via hash-based stamping of node/edge structure Reuses previous node positions by ID to maintain visual continuity Tracks layout revision and mode in state for change detection	+79/-0
lifecycle_bootstrap_state_defaults_methods.js `Lifecycle state initialization with defaults` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_state_defaults_methods.js Initializes comprehensive state object with default values for rendering, animation, and UI Sets up filter toggles, layer visibility, zoom bounds, and visual color palette Configures channel reconnection parameters and animation loop state Establishes initial view state with target position and zoom level	+71/-0
SpatialSurveyMap.js `Spatial survey RF coverage visualization` elixir/web-ng/assets/js/hooks/SpatialSurveyMap.js Initializes deck.gl visualization with hexagon and point cloud layers for RF coverage data Aggregates RSSI signal strength into hexagon color and elevation Maps point cloud colors to RSSI heatmap gradient Implements orbit view controller with dark theme background	+84/-0
window_events.js `Global window event handlers and utilities` elixir/web-ng/assets/js/utils/window_events.js Registers global window event listeners for clipboard operations with fallback copy implementation Handles YAML file downloads via blob creation and anchor element Provides live reload development helpers for server log streaming and editor integration Supports keyboard shortcuts (c/d) for opening clicked elements in code editor	+86/-0
layout_animation_methods.js `Layout transition animation methods` elixir/web-ng/assets/js/lib/god_view/layout_animation_methods.js Animates node position transitions over 220ms using requestAnimationFrame Interpolates node coordinates between previous and next layouts with optional WASM acceleration Manages pending animation frame cancellation and cleanup Provides fallback JavaScript interpolation when WASM unavailable	+78/-0
lifecycle_bootstrap_channel_event_methods.js `Channel event registration and reconnection` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.js Registers channel event handlers for snapshot metadata, snapshots, and errors Implements channel join with success/error callbacks and status updates Schedules exponential backoff reconnection on channel failures Provides channel cleanup and reconnection orchestration	+67/-0
formatters.js `Number formatting utility functions` elixir/web-ng/assets/js/utils/formatters.js Provides byte formatting with TB/GB/MB/KB units Implements bit rate formatting with Tb/Gb/Mb/Kb units Formats count per second with G/M/K unit scaling Unified rate value formatter supporting multiple unit types (bps, Bps, pps)	+39/-0
rendering_graph_view_methods.js `Graph view auto-fit and camera control` elixir/web-ng/assets/js/lib/god_view/rendering_graph_view_methods.js Implements auto-fit view state calculation based on node bounds Computes zoom level to fit all nodes with padding Updates deck.gl view state with calculated target and zoom Respects user camera lock and auto-fit completion flags	+46/-0
app.js `Main application entry point initialization` elixir/web-ng/assets/js/app.js Initializes Phoenix LiveSocket with CSRF token and custom hooks Registers global window event handlers and live reload helpers Configures topbar progress indicator for page navigation Exposes liveSocket for debugging and latency simulation	+51/-0
lifecycle_bootstrap_runtime_methods.js `Lifecycle runtime bootstrap and initialization` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_runtime_methods.js Binds lifecycle methods to context for proper `this` reference Attaches DOM elements and initializes canvas with resize listener Initializes WASM engine asynchronously with error handling Manages animation loop startup and reduced motion preference sync	+65/-0
rendering_style_node_visual_methods.js `Node visual styling and display methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_visual_methods.js Provides node metric text based on shape (cluster count vs packet rate) Maps node state to visual colors (root, affected, healthy, unknown) Determines neutral and status colors based on operational status Normalizes display labels with fallback handling for nil/null values	+37/-0
GodViewRenderer.js `Main GodViewRenderer orchestration class` elixir/web-ng/assets/js/lib/GodViewRenderer.js Orchestrates three rendering engines (layout, rendering, lifecycle) composition Initializes context with state, dependencies, and engine APIs Provides mount/update/destroy lifecycle hooks delegating to lifecycle controller Builds dependency maps for each engine subsystem	+46/-0

Tests

22 files

lifecycle_stream_decode_methods.test.js `Tests for Arrow graph stream decoding logic` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.test.js Comprehensive test suite for Arrow IPC graph decoding with mocked `apache-arrow` module Tests cover explicit edge topology metadata, directional flow preservation, optional column handling, and null geo coordinate handling Validates node/edge count, field mapping (flowPpsAb/Ba, flowBpsAb/Ba), and telemetry eligibility flags Includes complex multi-node, multi-edge scenarios with bidirectional traffic	+286/-0
rendering_graph_data_methods.test.js `Tests for graph data rendering and filtering` elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.test.js Test suite for graph data visibility and transformation logic Validates node/edge filtering via visibility masks, traversal masks, and topology layer filtering Tests edge label selection, directional flow field preservation (flowPpsAb/Ba), and multi-edge handling for identical endpoints Covers clustered vs. local graph shapes and telemetry eligibility propagation	+191/-0
layout_cluster_methods.test.js `Tests for graph clustering and layout methods` elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.test.js Test suite for graph clustering and zoom-tier transformations Validates state-based and grid-based clustering with node aggregation and edge consolidation Tests directional flow preservation in canonical cluster orientation and topology class counting Covers zoom tier resolution and tier-specific reshape routing	+157/-0
rendering_tooltip_methods.test.js `Tests for tooltip rendering and hover handling` elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.test.js Test suite for node/edge tooltip rendering and hover state management Validates tooltip HTML generation with IP, type, geo, and ASN fields Tests fallback "unknown" values for missing node details and cursor state updates Covers node and edge layer hover detection	+87/-0
rendering_style_edge_particle_methods.test.js `Packet flow particle rendering test suite` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.test.js Tests packet flow instance generation with visibility floors and particle density bounds Validates directional flow biasing and zoom tier scaling behavior Ensures telemetry-ineligible edges are skipped and reverse lanes render conditionally Verifies particle count remains bounded for large edge datasets	+176/-0
renderer_deps.test.js `Dependency injection builder unit tests` elixir/web-ng/assets/js/lib/god_view/renderer_deps.test.js Tests dependency builder functions forward calls to correct namespaces Validates layout, rendering, and lifecycle dependency keys match exports Uses mocked context to verify argument passing through dependency chains Ensures all required dependencies are present in built objects	+87/-0
rendering_selection_methods.test.js `Node selection and detail rendering tests` elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.test.js Tests node detail card rendering with IP, metadata, and fallback values Validates node selection toggling and edge case handling Verifies HTML rewrite optimization to avoid redundant DOM updates Tests device link navigation and node index selection	+144/-0
lifecycle_bootstrap_event_methods.test.js `Lifecycle event bootstrap integration tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_event_methods.test.js Tests event registration for filters, zoom mode, layers, and view reset Validates filter updates trigger graph re-rendering Verifies zoom mode changes update view state and tier Tests reset view clears camera lock and triggers autoFit	+123/-0
lifecycle_dom_interaction_methods.test.js `DOM interaction lifecycle unit tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.test.js Tests animation loop scheduling with reduced motion preference handling Validates pan/drag threshold detection and pointer capture behavior Tests media query subscription for reduced motion preference changes Verifies wheel zoom with view state and zoom tier updates	+128/-0
lifecycle_dom_setup_methods.test.js `DOM setup and event handling tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.test.js Tests deck.gl instance creation with tooltip/hover/click event routing through dependency bridge Validates details panel click handling for device navigation and node focus actions Verifies tooltip panel link navigation with proper event prevention Mocks deck.gl core classes for isolated unit testing	+119/-0
rendering_graph_bitmap_methods.test.js `Bitmap and mask computation unit tests` elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.test.js Tests bitmap metadata fallback derivation from node state distribution Validates metadata preservation when provided non-empty Verifies three-hop traversal mask computation with linear graph chains Tests visibility mask filtering based on state categories	+97/-0
rendering_graph_layer_transport_methods.test.js `Transport layer rendering tests` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.test.js Tests transport and effect layer building with atmosphere particle configuration Validates additive blend settings and depth test parameters for particle effects Verifies layer omission when toggle disabled Uses mocked dependency functions for isolated testing	+73/-0
layout_topology_state_methods.test.js `Layout topology state management tests` elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.test.js Tests topology stamp generation for change detection across graph updates Validates position reuse by node ID across topology changes Verifies geo layout selection based on coordinate coverage threshold (25%) Tests layout mode selection and revision tracking in graph preparation	+97/-0
layout_topology_algorithm_methods.test.js `Layout algorithm unit tests` elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.test.js Tests Mercator projection with geo coordinates and deterministic fallback positioning Validates force-directed layout bounds normalization for small and large graphs Verifies geo grid data generation only in geo layout mode Ensures all node positions remain within layout bounds	+96/-0
lifecycle_stream_snapshot_methods.test.js `Snapshot stream parsing unit tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.test.js Tests binary snapshot frame parsing with header validation and payload extraction Validates bitmap metadata decoding from binary format Tests base64-encoded message parsing Verifies magic number validation for frame integrity	+62/-0
lifecycle_bootstrap_channel_event_methods.test.js `Channel event handling unit tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.test.js Tests snapshot channel join success with reconnect timer clearing Validates error handling with reconnect scheduling Tests channel reconnection with leave and re-setup Mocks channel join/receive chain for isolated testing	+79/-0
GodViewRenderer.test.js `GodViewRenderer integration tests` elixir/web-ng/assets/js/lib/god_view/GodViewRenderer.test.js Tests GodViewRenderer context initialization with engine APIs Validates method registration from layout, rendering, and lifecycle engines Tests update delegation to context state Verifies mount/destroy delegation to lifecycle controller	+81/-0
deps_injection_contract.test.js `Dependency injection contract validation` elixir/web-ng/assets/js/lib/god_view/deps_injection_contract.test.js Validates all `this.deps` usages in rendering/lifecycle methods are declared in dependency maps Ensures no unused dependency declarations exist in renderer deps configuration Uses file system scanning and regex matching for contract verification Provides clear error messages for missing or unused dependencies	+70/-0
rendering_style_edge_telemetry_methods.test.js `Edge telemetry styling unit tests` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.test.js Tests packet rate formatting with K/M unit scaling Validates capacity formatting with compact G/M units Verifies edge width increases with utilization and packet rate Tests color channel bounds and connection label normalization	+43/-0
rendering_style_edge_topology_methods.test.js `Edge topology styling unit tests` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.test.js Tests edge topology class validation with explicit class priority Validates topology layer filtering using class count maps Tests fallback to explicit class when count maps absent Verifies layer toggle state affects edge visibility	+41/-0
rendering_style_node_reason_methods.test.js `Node state reason generation tests` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.test.js Tests state reason generation for root-cause and affected nodes Validates dependency-based reason derivation from edge relationships Tests causal reason humanization with hop distance and node references Uses node index lookup for label resolution	+48/-0
runtime_access_contract.test.js `Runtime access contract validation` elixir/web-ng/assets/js/lib/god_view/runtime_access_contract.test.js Validates rendering/lifecycle methods use explicit `this.state` and `this.deps` namespaces Prevents flat runtime references like `this.someMethod` in method files Scans method files for contract violations using regex matching Ensures clean separation between state, dependencies, and method calls	+47/-0

Configuration changes

1 files

eslint.config.js

ESLint configuration with state access enforcement

elixir/web-ng/assets/eslint.config.js

Configures ESLint with modern JavaScript rules and browser globals
Enforces this.state and this.deps access patterns via restricted
properties
Prevents deprecated runtime_refs imports in god view method files
Defines unused variable patterns to ignore underscore-prefixed names

+112/-0

Additional files

101 files

.bazelignore	+2/-0
.bazelrc	+3/-1
.bazelversion	+1/-1
.dockerignore	+5/-6
.env.example	+4/-0
pre-commit	+13/-0
golangci-lint.yml	+18/-3
release.yml	+2/-2
sbom-images.yml	+2/-4
swiftlint.yml	+31/-0
tests-golang.yml	+2/-2
tests-rust.yml	+10/-11
web-ng-lint.yml	+25/-3
.gitmodules	+3/-0
.swiftlint.yml	+29/-0
AGENTS.md	+10/-9
BUILD.bazel	+13/-1
Bazel.md	+7/-14
CHANGELOG	+136/-0
Cargo.toml	+8/-5
DOCKER_QUICKSTART.md	+5/-3
INSTALL.md	+14/-46
MODULE.bazel	+254/-160
Makefile	+83/-48
README-Docker.md	+16/-2
README.md	+37/-15
RELEASE.md	+7/-7
SBOM.spdx	+0/-1
VERSION	+1/-1
BUILD.bazel	+0/-176
README.md	+0/-47
BUILD.bazel	+0/-56
release_pipeline.sh	+1/-1
mix_release.bzl	+291/-4
BUILD.bazel	[link]
README.md	+222/-0
BUILD.bazel	+13/-0
agent-gateway.env	+17/-0
postinstall.sh	+14/-0
preremove.sh	+4/-0
serviceradar-agent-gateway.service	+18/-0
BUILD.bazel	+9/-0
agent-windows.json	[link]
agent.json	+1/-0
sweep.json	[link]
BUILD.bazel	[link]
com.serviceradar.agent.plist	[link]
postinstall	[link]
preinstall	[link]
package.sh	+133/-0
postinstall.sh	+58/-0
preremove.sh	[link]
serviceradar-agent.service	[link]
BUILD.bazel	+9/-0
postinstall.sh	+27/-0
preremove.sh	+8/-0
serviceradar-bmp-collector.service	+21/-0
BUILD.bazel	+9/-0
package.sh	+99/-0
postinstall.sh	[link]
preremove.sh	[link]
components.json	+677/-0
BUILD.bazel	+13/-0
core-elx.env	+25/-0
postinstall.sh	+14/-0
preremove.sh	+4/-0
serviceradar-core-elx.service	+18/-0
BUILD.bazel	+9/-0
datasvc.json	[link]
package.sh	+121/-0
postinstall.sh	[link]
preremove.sh	[link]
serviceradar-datasvc.service	[link]
BUILD.bazel	+9/-0
db-event-writer.json	+4/-0
package.sh	+121/-0
postinstall.sh	[link]
preremove.sh	[link]
serviceradar-event-writer.service	[link]
BUILD.bazel	+9/-0
faker.json	[link]
package.sh	+93/-0
postinstall.sh	[link]
preremove.sh	[link]
serviceradar-faker.service	[link]
BUILD.bazel	+9/-0
flow-collector.json	+29/-0
postinstall.sh	+65/-0
preremove.sh	+24/-0
serviceradar-flow-collector.service	+21/-0
BUILD.bazel	+9/-0
log-collector.toml	+13/-0
postinstall.sh	+63/-0
preremove.sh	+31/-0
serviceradar-log-collector.service	+29/-0
BUILD.bazel	+9/-0
nats-cloud.conf	[link]
nats-leaf.conf	[link]
nats-server.conf	[link]
package.sh	[link]
Additional files not shown

Imported from GitHub pull request. Original GitHub pull request: #2958 Original author: @mfreeman451 Original URL: https://github.com/carverauto/serviceradar/pull/2958 Original created: 2026-03-01T03:36:57Z Original updated: 2026-03-01T03:41:32Z Original head: carverauto/serviceradar:staging Original base: 2371-analytics-stats-cards-should-abbreviate-numbers Original merged: 2026-03-01T03:37:19Z by @mfreeman451 --- ### **User description** ## IMPORTANT: Please sign the Developer Certificate of Origin Thank you for your contribution to ServiceRadar. Please note, when contributing, the developer must include a [DCO sign-off statement]( https://developercertificate.org/) indicating the DCO acceptance in one commit message. Here is an example DCO Signed-off-by line in a commit message: ``` Signed-off-by: J. Doe <j.doe@domain.com> ``` ## Describe your changes ## Issue ticket number and link ## Code checklist before requesting a review - [ ] I have signed the DCO? - [ ] The build completes without errors? - [ ] All tests are passing when running make test? ___ ### **PR Type** Enhancement, Tests ___ ### **Description** - Comprehensive implementation of "God View" network topology visualization system with interactive 3D rendering using deck.gl and D3 - Core visualization engine with node/edge rendering, particle flow animation, and zoom-tier-based graph clustering (local → regional → global) - Graph layout algorithms including Mercator projection for geographic positioning and force-directed layout with D3 simulation - Binary stream decoding for Apache Arrow IPC format with telemetry data extraction and topology change detection - Interactive features: node/edge selection, tooltips, pan/drag/zoom controls, theme-aware styling (light/dark modes) - Netflow chart components (Sankey, stacked area, line series, grid, 100% stacked) with D3-based visualization and interactive legends - Custom deck.gl packet flow layer with GLSL shaders for animated particle effects and directional flow visualization - Comprehensive test suite covering graph algorithms, rendering logic, DOM interactions, and dependency injection contracts - Utility libraries for number formatting, D3 helpers, and WebAssembly runtime wrapper for graph algorithms - ESLint configuration enforcing state/dependency access patterns and preventing deprecated imports - Removal of legacy Dusk profile system and obsolete command-line tools (agent, CLI, profiler, trapd, flowgger, etc.) ___ ### Diagram Walkthrough ```mermaid flowchart LR A["Binary Stream Arrow IPC"] -->|"lifecycle_stream_decode"| B["Graph Nodes & Edges"] B -->|"rendering_graph_data"| C["Visibility Masks & Filtering"] C -->|"layout_cluster"| D["Zoom-Tier Clustering"] D -->|"layout_topology"| E["Node Positions Geo/Force-Directed"] E -->|"layout_animation"| F["Animated Transitions"] F -->|"rendering_graph_layer"| G["deck.gl Layers Nodes/Edges/Particles"] G -->|"rendering_style"| H["Visual Styling Colors/Widths/Effects"] H -->|"DOM Rendering"| I["Interactive 3D Canvas"] I -->|"lifecycle_dom_interaction"| J["Pan/Zoom/ Selection"] J -->|"rendering_selection"| K["Detail Panels & Tooltips"] L["Netflow Data"] -->|"NetflowCharts"| M["D3 Visualizations Sankey/Area/Line"] M -->|"Interactive Legend"| N["Filtered Charts"] ``` <details><summary><h3>File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td>Enhancement</td><td><details><summary>41 files</summary><table> <tr> <td> <details> <summary>NetflowSankeyChart.js<dd><code>D3 Sankey chart visualization for netflow data</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js <ul><li>New D3-based Sankey diagram component for visualizing three-column network flow data (source → middle → destination) <li> Implements interactive tooltips, node/edge highlighting, and graceful degradation to 2-column layout on circular dependency detection <li> Supports dynamic resizing via ResizeObserver and handles edge metadata (port, protocol, topology class) <li> Includes fallback rendering for empty datasets and error states</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692">+380/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_transport_methods.js<dd><code>Deck.gl transport layer rendering for god view</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js <ul><li>Builds deck.gl layer stack for network visualization (mantle, crust, atmosphere, security layers) <li> Implements particle flow animation with zoom-dependent scaling, directional flow rendering, and focus-based alpha multipliers <li> Supports fallback ScatterplotLayer for environments without shader support <li> Includes geo-grid background with animated sweep effect</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-f08b4f5d106f54747fbb0635896e73090396a5734363ddaaf7a93bb3ce608ce9">+260/-0</a>  </td> </tr> <tr> <td> <details> <summary>MapboxFlowMap.js<dd><code>Mapbox GL map visualization with theme support</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/hooks/MapboxFlowMap.js <ul><li>Mapbox GL integration hook with theme-aware style switching (light/dark modes) <li> Manages markers, flow lines, and automatic bounds fitting based on source/destination coordinates <li> Monitors DOM theme changes via MutationObserver and OS color-scheme preferences <li> Includes fallback messaging for disabled maps or missing access tokens</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1">+309/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_selection_methods.js<dd><code>Node/edge selection and detail rendering methods</code>                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js <ul><li>Implements node selection detail rendering with HTML escaping and device reference links <li> Maps node type IDs to HeroIcon classes for visual representation <li> Handles edge selection via interaction keys and node focus navigation with view state updates <li> Provides causal root/parent node reference buttons and comprehensive node metadata display</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-0da723c3f5b16409d7b5a10013bec415a4d9326e4d752e931bb2bba6792024d3">+191/-0</a>  </td> </tr> <tr> <td> <details> <summary>util.js<dd><code>Netflow chart utilities and D3 helpers</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/netflow_charts/util.js <ul><li>Utility library for netflow chart rendering with D3 helpers and DOM overlay management <li> Provides tooltip attachment, SVG clearing, chart dimension calculation, and time-series normalization <li> Implements legend building, number/percentage formatting, and HTML escaping <li> Includes color scale generation and time-based tooltip with bisector-based data lookup</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-dcfc73a9dbe3d9f021a10cada76e3b72894375ebcee019ad00a111c3e429ef24">+224/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_particle_methods.js<dd><code>Packet flow particle generation and styling</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.js <ul><li>Generates packet flow particle instances for animated edge visualization with directional flow support <li> Calculates particle density, speed, and color based on edge utilization, capacity, and zoom level <li> Implements bidirectional lane separation and jitter-based spread for visual clarity <li> Includes caching mechanism via <code>packetFlowCacheStamp</code> to avoid redundant particle generation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-600ea8206fafee5e8351fe463190a1dce3d3feb010dbda969a551d8afc6a8845">+146/-0</a>  </td> </tr> <tr> <td> <details> <summary>layout_cluster_methods.js<dd><code>Graph clustering and zoom-tier layout methods</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.js <ul><li>Implements zoom-tier-based graph reshaping (local → regional → global clustering) <li> Clusters nodes by state (global) or grid cell (regional) with aggregated metrics and topology class counts <li> Preserves directional flow telemetry (flowPpsAb/Ba, flowBpsAb/Ba) across cluster boundaries <li> Generates cluster metadata with sample node details and state histograms</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-95e8ad8c87724b0bf17e003997b7b13c6fbeb1848b03b05d51bf9c80826beee5">+187/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowStackedAreaChart.js<dd><code>D3 stacked area chart for netflow time series</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowStackedAreaChart.js <ul><li>D3-based stacked area chart for time-series netflow data with interactive legend <li> Supports overlay lines (previous/revised comparisons) with distinct stroke patterns <li> Implements time-based tooltip with bisector lookup and series click events <li> Includes ResizeObserver for responsive rendering and hidden series filtering</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9fa93b4c4ca0213f2295f2cb318766449b02b7fc59efda96a02273f5f12b76b3">+195/-0</a>  </td> </tr> <tr> <td> <details> <summary>PacketFlowLayer.js<dd><code>Custom deck.gl packet flow visualization layer</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/deckgl/PacketFlowLayer.js <ul><li>Implements custom deck.gl layer for animated packet flow visualization with GLSL shaders <li> Defines vertex and fragment shaders for particle rendering with fade effects and glow <li> Provides attribute management for flow direction, speed, size, jitter, and color <li> Includes bounds calculation and model lifecycle management</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-15defec05e50ed91f6f77defa8c5e44678c121ab3404c457041fafce4c4010dd">+194/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowStacked100Chart.js<dd><code>Stacked 100% area chart with overlays</code>                                        </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js <ul><li>Creates stacked 100% area chart for normalized time-series data visualization <li> Implements legend with visibility toggling and composition overlay support <li> Adds time-based tooltip with percentage formatting <li> Handles responsive resizing via ResizeObserver</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-67815c89effaf41060f95649ad3b755855bfa0ed7a9b77a9f1a9e72ebb73cd53">+207/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_setup_methods.js<dd><code>God view DOM initialization and deck setup</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js <ul><li>Initializes DOM elements for canvas, HUD panels, and event listeners <li> Creates deck.gl instance with orthographic view and error handling fallbacks <li> Manages canvas resizing and WebGPU/WebGL renderer mode selection <li> Implements click handlers for device links and node selection in detail panels</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-7b88fcb183a776c3df89b3352962b5cc6164d2302a74d211fb3fe4df9776cdd7">+174/-0</a>  </td> </tr> <tr> <td> <details> <summary>renderer_deps.js<dd><code>Dependency injection framework for god view</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/renderer_deps.js <ul><li>Defines dependency injection architecture with JSDoc type definitions <li> Exports builder functions for layout, rendering, and lifecycle dependencies <li> Maintains lists of required dependency keys for validation <li> Provides forwarding functions to compose context namespaces</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-82c008c8660a2f54dc96f367cd873d87617e03d2c5d73fe47e272e8118965f96">+154/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_interaction_methods.js<dd><code>DOM interaction and animation lifecycle methods</code>                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.js <ul><li>Implements animation loop with reduced motion preference detection <li> Handles pan/drag interactions with pointer capture and threshold detection <li> Manages wheel zoom with view state updates and zoom tier resolution <li> Syncs system and document-level theme preferences via MediaQuery</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-5c0eff9cfe6721820096aafcdebaf44618c7f7395aeb7d0d85d30411153b226b">+163/-0</a>  </td> </tr> <tr> <td> <details> <summary>JdmEditorHook.js<dd><code>JDM editor hook with theme synchronization</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/hooks/JdmEditorHook.js <ul><li>Integrates JDM decision graph editor with React and theme support <li> Implements theme detection from Phoenix data-theme attribute and system preferences <li> Handles editor updates via LiveView events and definition change callbacks <li> Manages React root lifecycle with proper cleanup on destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-e82967d2468cd02bd7524d51bcd9e22d9432b4d0afd882442515c7a814ae18f8">+180/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowGridChart.js<dd><code>Grid layout multi-series chart component</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowGridChart.js <ul><li>Creates grid layout of mini line charts for multi-series time-series visualization <li> Implements legend with visibility toggling and responsive grid sizing <li> Adds shared time-based tooltip across all series <li> Handles ResizeObserver for responsive chart updates</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a3d26de99ec52c9222b58e879c553dd3014874ff3131341444e2d41f81846978">+141/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_node_methods.js<dd><code>Node layer rendering with animation effects</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_node_methods.js <ul><li>Builds deck.gl layers for node visualization including tethers, halos, rings, and labels <li> Implements animated breathing effect on node rings using animation phase <li> Adds conditional edge label rendering based on zoom shape (local/regional/global) <li> Manages node color, size, and selection state rendering</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-02e76c3e46ce4ed59adf0eee36f164f7ac893c57c449ae51c6216da9effeb669">+130/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_snapshot_methods.js<dd><code>Snapshot stream parsing and graph lifecycle</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.js <ul><li>Handles binary snapshot message parsing with magic number validation <li> Decodes Arrow graph format and manages topology change detection <li> Implements performance metrics collection for network, decode, and render times <li> Provides base64 to ArrayBuffer conversion for snapshot payloads</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9a21f74b0dc5f6b40f4709f68aeb71c163304418c64730971113b5dda883c3e8">+116/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowLineSeriesChart.js<dd><code>Multi-series line chart with composition overlays</code>                </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js <ul><li>Creates multi-series line chart with support for previous and reverse composition overlays <li> Implements dashed stroke patterns for overlay types (prev/rev) <li> Adds legend with visibility toggling and time-based tooltip <li> Handles responsive resizing via ResizeObserver</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-b078a99dbb234d0c9b13ca8d36e57696e70a4bbb9213f31a2de2c17935ad8074">+130/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_node_reason_methods.js<dd><code>Node state reason and causal analysis methods</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.js <ul><li>Maps node states to categories and display names with default reasons <li> Implements causal reason humanization with hop distance and node references <li> Builds node index lookup for efficient state reason generation <li> Handles edge dependency analysis for affected node classification</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a101faf6c2ab405b3e8e5ee716d3e0f3c1a45d30b06431dc5c80e38fc6219e24">+128/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_data_methods.js<dd><code>Graph data visibility and filtering methods</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.js <ul><li>Builds visible graph data with state and traversal visibility masks <li> Constructs edge data with flow metrics, telemetry eligibility, and interaction keys <li> Generates node data with position, state, and metric information <li> Manages edge and node selection state with visibility tracking</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-e3a1a5957e905a23e88ec6df58ab4e412d9fde18a7e1f2bdcc4eba762169c81d">+103/-0</a>  </td> </tr> <tr> <td> <details> <summary>god_view_exec_runtime.js<dd><code>WebAssembly runtime wrapper for graph algorithms</code>                  </dd></summary> <hr> elixir/web-ng/assets/js/wasm/god_view_exec_runtime.js <ul><li>Wraps WebAssembly module for state mask and traversal computation <li> Implements memory allocation and byte writing for WASM interop <li> Provides interpolation and three-hop mask computation functions <li> Handles WASM asset fetching with fallback URL candidates</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-260fc3e54b302b1db5eb289839debd050cc277ee10ae5ea5be1d4606085916a2">+143/-0</a>  </td> </tr> <tr> <td> <details> <summary>SRQLTimeCookie.js<dd><code>SRQL time token persistence hook</code>                                                  </dd></summary> <hr> elixir/web-ng/assets/js/hooks/SRQLTimeCookie.js <ul><li>Persists SRQL time token to cookie with debounced input handling <li> Restores time token from cookie on page load unless URL has query param <li> Implements time token extraction and upsert in query string <li> Syncs input value on LiveView updates when not focused</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-ec59b200a56527a6d6fdad23b9a560dd9903e42e7a7f59c402ef3459aa694b25">+107/-0</a>  </td> </tr> <tr> <td> <details> <summary>layout_topology_algorithm_methods.js<dd><code>Graph layout algorithms for topology visualization</code>              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.js <ul><li>Implements Mercator projection for geographic layout positioning with latitude/longitude clamping <li> Provides force-directed graph layout using D3 simulation with configurable forces (charge, link, collide, center) <li> Generates geographic grid data for visualization overlay in geo mode <li> Includes layout bounds normalization and fallback positioning for nodes without geo coordinates</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-4aab4890dac906881177d8cf9fb9f17b45c822c49e151c1f5a19ed727d17a5f5">+94/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_decode_methods.js<dd><code>Binary stream decoding for graph topology data</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.js <ul><li>Decodes Apache Arrow IPC binary format into graph nodes and edges with telemetry data <li> Parses optional float values with NaN handling for geographic coordinates <li> Extracts node properties (state, label, PPS, operational status) and edge metrics (flow, capacity, telemetry eligibility) <li> Returns typed arrays (<code>Uint32Array</code>) for edge source/target indices for efficient graph traversal</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-f1b8ead14866a2f946832f2a8215db8abf862a5c9ea3b9fcadef607b835869b8">+104/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_bitmap_methods.js<dd><code>Graph bitmap and mask computation methods</code>                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.js <ul><li>Manages bitmap metadata for node state categorization (root_cause, affected, healthy, unknown) <li> Computes visibility masks based on filter state with optional WASM acceleration fallback <li> Implements three-hop traversal mask computation for selected node neighborhoods <li> Provides fallback implementations using typed arrays when WASM engine unavailable</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9d624021610bf96661bcc1f75a59bb1644e7d2623d6087fffbfcbdb35a54a231">+127/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_telemetry_methods.js<dd><code>Edge telemetry styling and formatting</code>                                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.js <ul><li>Formats packet rate (pps) and capacity values with appropriate unit scaling (K/M/G) <li> Computes edge colors based on utilization and packet rate with vivid/muted variants <li> Calculates edge width pixels using capacity-based base width plus flow-based boost <li> Normalizes connection labels from edge metadata with fallback to "LINK"</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-85211e2b105986f6daf8fffe131ccf5d1bba214c9a442f93c594abd4d97d3362">+67/-0</a>    </td> </tr> <tr> <td> <details> <summary>TimeseriesCombinedChart.js<dd><code>Multi-series timeseries chart with interactive tooltips</code>    </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/TimeseriesCombinedChart.js <ul><li>Implements interactive tooltip display for multi-series timeseries charts on mousemove <li> Formats values according to unit type (percent, bytes, Hz, count per second) <li> Positions tooltip and hover line relative to SVG container with boundary clamping <li> Manages event listener lifecycle with cleanup on component destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-09abac7a6d77b7fc8de16307bb50f8f8d6c06e1fb5a427a906a78cacc3f69023">+115/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_tooltip_methods.js<dd><code>Tooltip generation and hover state management</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.js <ul><li>Generates styled HTML tooltips for nodes with IP, type, state, and geo information <li> Provides edge telemetry tooltips showing connection type, packet rate, and capacity <li> Implements hover state tracking for edges and nodes with cursor feedback <li> Determines edge focus state based on hover/selection keys</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-b1bb8790f097597d140b2a2ec4cafd9f7d1c2e3f71af20b41b4501b693b40672">+84/-0</a>    </td> </tr> <tr> <td> <details> <summary>TimeseriesChart.js<dd><code>Single-series timeseries chart with tooltips</code>                          </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/TimeseriesChart.js <ul><li>Implements single-series timeseries chart with interactive tooltip on mousemove <li> Formats values based on configurable unit type (percent, bytes, Hz, count per second) <li> Positions tooltip and hover line with boundary-aware clamping <li> Manages event listener cleanup on component destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-779cd674fb614c68004da9b1df18c42171d0b89adf5b10610b151c48fa00220a">+98/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_state_methods.js<dd><code>Layout topology state management</code>                                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.js <ul><li>Manages graph layout mode selection (geo vs force-directed) based on coordinate coverage <li> Implements topology change detection via hash-based stamping of node/edge structure <li> Reuses previous node positions by ID to maintain visual continuity <li> Tracks layout revision and mode in state for change detection</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-00e8d04a83ab66301ae0097cd9066a3ac8e4a5648f29da584fb31712cb95ce5c">+79/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_state_defaults_methods.js<dd><code>Lifecycle state initialization with defaults</code>                          </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_state_defaults_methods.js <ul><li>Initializes comprehensive state object with default values for rendering, animation, and UI <li> Sets up filter toggles, layer visibility, zoom bounds, and visual color palette <li> Configures channel reconnection parameters and animation loop state <li> Establishes initial view state with target position and zoom level</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-49498b418277e7f81c0ab90fdf023ebf09b0c5e4cbf3228fe4533582cc4fa793">+71/-0</a>    </td> </tr> <tr> <td> <details> <summary>SpatialSurveyMap.js<dd><code>Spatial survey RF coverage visualization</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/hooks/SpatialSurveyMap.js <ul><li>Initializes deck.gl visualization with hexagon and point cloud layers for RF coverage data <li> Aggregates RSSI signal strength into hexagon color and elevation <li> Maps point cloud colors to RSSI heatmap gradient <li> Implements orbit view controller with dark theme background</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3b7493d84d5a1b9ab8fc86ce48f183d0a905eb560b2281a8c910aab9872f0af5">+84/-0</a>    </td> </tr> <tr> <td> <details> <summary>window_events.js<dd><code>Global window event handlers and utilities</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/utils/window_events.js <ul><li>Registers global window event listeners for clipboard operations with fallback copy implementation <li> Handles YAML file downloads via blob creation and anchor element <li> Provides live reload development helpers for server log streaming and editor integration <li> Supports keyboard shortcuts (c/d) for opening clicked elements in code editor</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-35dea0eeb869197487529f2afe536078d3a5e747a2ffc25b060c06e6609fae13">+86/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_animation_methods.js<dd><code>Layout transition animation methods</code>                                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_animation_methods.js <ul><li>Animates node position transitions over 220ms using requestAnimationFrame <li> Interpolates node coordinates between previous and next layouts with optional WASM acceleration <li> Manages pending animation frame cancellation and cleanup <li> Provides fallback JavaScript interpolation when WASM unavailable</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-13096ca0c3eae3051dccae12e824a064672a39e89bbf36e214280653364e3c84">+78/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_channel_event_methods.js<dd><code>Channel event registration and reconnection</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.js <ul><li>Registers channel event handlers for snapshot metadata, snapshots, and errors <li> Implements channel join with success/error callbacks and status updates <li> Schedules exponential backoff reconnection on channel failures <li> Provides channel cleanup and reconnection orchestration</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-17663bc2be665cee79b451031bdde511352490e5d3cb80a452f2b2c26ebc01fe">+67/-0</a>    </td> </tr> <tr> <td> <details> <summary>formatters.js<dd><code>Number formatting utility functions</code>                                            </dd></summary> <hr> elixir/web-ng/assets/js/utils/formatters.js <ul><li>Provides byte formatting with TB/GB/MB/KB units <li> Implements bit rate formatting with Tb/Gb/Mb/Kb units <li> Formats count per second with G/M/K unit scaling <li> Unified rate value formatter supporting multiple unit types (bps, Bps, pps)</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-751d34dd16d665a0b5c99657621fab90a6b5ce22ba36ace171b0b38dddfda8c4">+39/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_view_methods.js<dd><code>Graph view auto-fit and camera control</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_view_methods.js <ul><li>Implements auto-fit view state calculation based on node bounds <li> Computes zoom level to fit all nodes with padding <li> Updates deck.gl view state with calculated target and zoom <li> Respects user camera lock and auto-fit completion flags</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-689b6926213e710431fc733ceab6101dd79c7c6d1bdeaa28b1c81c8e5ae65853">+46/-0</a>    </td> </tr> <tr> <td> <details> <summary>app.js<dd><code>Main application entry point initialization</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/app.js <ul><li>Initializes Phoenix LiveSocket with CSRF token and custom hooks <li> Registers global window event handlers and live reload helpers <li> Configures topbar progress indicator for page navigation <li> Exposes liveSocket for debugging and latency simulation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-cb037e30725231d82e904a1dccdbcb4a7a5c3c58f410627748c353dec4d40d3d">+51/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_runtime_methods.js<dd><code>Lifecycle runtime bootstrap and initialization</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_runtime_methods.js <ul><li>Binds lifecycle methods to context for proper <code>this</code> reference <li> Attaches DOM elements and initializes canvas with resize listener <li> Initializes WASM engine asynchronously with error handling <li> Manages animation loop startup and reduced motion preference sync</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3e673dd32f1bf9f77ba8197070cdc6b0755870128d17367437f6eb10e9ba483c">+65/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_node_visual_methods.js<dd><code>Node visual styling and display methods</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_visual_methods.js <ul><li>Provides node metric text based on shape (cluster count vs packet rate) <li> Maps node state to visual colors (root, affected, healthy, unknown) <li> Determines neutral and status colors based on operational status <li> Normalizes display labels with fallback handling for nil/null values</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3c6dfa538e53340167239c9075402bf66cc7424e5cee1616af25187bca03a787">+37/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewRenderer.js<dd><code>Main GodViewRenderer orchestration class</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/GodViewRenderer.js <ul><li>Orchestrates three rendering engines (layout, rendering, lifecycle) composition <li> Initializes context with state, dependencies, and engine APIs <li> Provides mount/update/destroy lifecycle hooks delegating to lifecycle controller <li> Builds dependency maps for each engine subsystem</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-be58eb4282b96e8d60a9faf38d2cdadeeb9f9979a7ea0fc14b2b332e4d8d0b07">+46/-0</a>    </td> </tr> </table></details></td></tr><tr><td>Tests</td><td><details><summary>22 files</summary><table> <tr> <td> <details> <summary>lifecycle_stream_decode_methods.test.js<dd><code>Tests for Arrow graph stream decoding logic</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.test.js <ul><li>Comprehensive test suite for Arrow IPC graph decoding with mocked <code>apache-arrow</code> module <li> Tests cover explicit edge topology metadata, directional flow preservation, optional column handling, and null geo coordinate handling <li> Validates node/edge count, field mapping (flowPpsAb/Ba, flowBpsAb/Ba), and telemetry eligibility flags <li> Includes complex multi-node, multi-edge scenarios with bidirectional traffic</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-56912aa58065fddeee078d221287efa877d809159dcec2d17992c561349c8127">+286/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_data_methods.test.js<dd><code>Tests for graph data rendering and filtering</code>                          </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.test.js <ul><li>Test suite for graph data visibility and transformation logic <li> Validates node/edge filtering via visibility masks, traversal masks, and topology layer filtering <li> Tests edge label selection, directional flow field preservation (flowPpsAb/Ba), and multi-edge handling for identical endpoints <li> Covers clustered vs. local graph shapes and telemetry eligibility propagation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-246ee40e8a48d994500950f4d4cb5ced465878a9c5d08d195d86e10b780f5829">+191/-0</a>  </td> </tr> <tr> <td> <details> <summary>layout_cluster_methods.test.js<dd><code>Tests for graph clustering and layout methods</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.test.js <ul><li>Test suite for graph clustering and zoom-tier transformations <li> Validates state-based and grid-based clustering with node aggregation and edge consolidation <li> Tests directional flow preservation in canonical cluster orientation and topology class counting <li> Covers zoom tier resolution and tier-specific reshape routing</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-1e48ef35b41d1efac555cd8fa55854ac35f408ce9f5b49f9d2999932527cfe3d">+157/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_tooltip_methods.test.js<dd><code>Tests for tooltip rendering and hover handling</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.test.js <ul><li>Test suite for node/edge tooltip rendering and hover state management <li> Validates tooltip HTML generation with IP, type, geo, and ASN fields <li> Tests fallback "unknown" values for missing node details and cursor state updates <li> Covers node and edge layer hover detection</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-d0f8f6e1d8c43986a937fab97b507f6323611d6bf4fe70701b22e02ec50ea546">+87/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_particle_methods.test.js<dd><code>Packet flow particle rendering test suite</code>                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.test.js <ul><li>Tests packet flow instance generation with visibility floors and particle density bounds <li> Validates directional flow biasing and zoom tier scaling behavior <li> Ensures telemetry-ineligible edges are skipped and reverse lanes render conditionally <li> Verifies particle count remains bounded for large edge datasets</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-202c29e2f939676af0dfc5965c94eac84b9bd64fe1602d507ed5b452105552d7">+176/-0</a>  </td> </tr> <tr> <td> <details> <summary>renderer_deps.test.js<dd><code>Dependency injection builder unit tests</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/renderer_deps.test.js <ul><li>Tests dependency builder functions forward calls to correct namespaces <li> Validates layout, rendering, and lifecycle dependency keys match exports <li> Uses mocked context to verify argument passing through dependency chains <li> Ensures all required dependencies are present in built objects</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9a2a5297d0d34eb0c73eaecdb46382579b81616cc170ad2c77c294a893bddc0e">+87/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_selection_methods.test.js<dd><code>Node selection and detail rendering tests</code>                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.test.js <ul><li>Tests node detail card rendering with IP, metadata, and fallback values <li> Validates node selection toggling and edge case handling <li> Verifies HTML rewrite optimization to avoid redundant DOM updates <li> Tests device link navigation and node index selection</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-f2b9a06780f26ecf38943edb80833f7eaf265fb17703456481e56bb85270b14e">+144/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_event_methods.test.js<dd><code>Lifecycle event bootstrap integration tests</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_event_methods.test.js <ul><li>Tests event registration for filters, zoom mode, layers, and view reset <li> Validates filter updates trigger graph re-rendering <li> Verifies zoom mode changes update view state and tier <li> Tests reset view clears camera lock and triggers autoFit</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-7f28d4f46c4d0ddddab54637b8331ca1a32ac2e23c13a583da4679435c3f89c5">+123/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_interaction_methods.test.js<dd><code>DOM interaction lifecycle unit tests</code>                                          </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.test.js <ul><li>Tests animation loop scheduling with reduced motion preference handling <li> Validates pan/drag threshold detection and pointer capture behavior <li> Tests media query subscription for reduced motion preference changes <li> Verifies wheel zoom with view state and zoom tier updates</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-b7b55f82fc0feb12d87aebe47301f840013d5d794160455e5f4614c319e8de20">+128/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_setup_methods.test.js<dd><code>DOM setup and event handling tests</code>                                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.test.js <ul><li>Tests deck.gl instance creation with tooltip/hover/click event routing through dependency bridge <li> Validates details panel click handling for device navigation and node focus actions <li> Verifies tooltip panel link navigation with proper event prevention <li> Mocks deck.gl core classes for isolated unit testing</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-8168f28155850402d3efe1dddae856dfed72f5659a9ae373980f216daba3ddca">+119/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_bitmap_methods.test.js<dd><code>Bitmap and mask computation unit tests</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.test.js <ul><li>Tests bitmap metadata fallback derivation from node state distribution <li> Validates metadata preservation when provided non-empty <li> Verifies three-hop traversal mask computation with linear graph chains <li> Tests visibility mask filtering based on state categories</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-c562d2a82d2192cf149046f4215aedddf22411d3ce733ef7ae5e94260424026a">+97/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_transport_methods.test.js<dd><code>Transport layer rendering tests</code>                                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.test.js <ul><li>Tests transport and effect layer building with atmosphere particle configuration <li> Validates additive blend settings and depth test parameters for particle effects <li> Verifies layer omission when toggle disabled <li> Uses mocked dependency functions for isolated testing</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2e0d605d92e46a0432f7aeba75c8e514a745271465daa1ccb5eced7293f7f92e">+73/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_state_methods.test.js<dd><code>Layout topology state management tests</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.test.js <ul><li>Tests topology stamp generation for change detection across graph updates <li> Validates position reuse by node ID across topology changes <li> Verifies geo layout selection based on coordinate coverage threshold (25%) <li> Tests layout mode selection and revision tracking in graph preparation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-d4b6a4864a14fde003cf98c3da46578c9fd7523b0d92deb905c9fc9d32dbdb53">+97/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_algorithm_methods.test.js<dd><code>Layout algorithm unit tests</code>                                                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.test.js <ul><li>Tests Mercator projection with geo coordinates and deterministic fallback positioning <li> Validates force-directed layout bounds normalization for small and large graphs <li> Verifies geo grid data generation only in geo layout mode <li> Ensures all node positions remain within layout bounds</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-7f87b206728c13d1467c94cb289b0a2b12f28a0fbc462affa085b7a9ffa752fe">+96/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_snapshot_methods.test.js<dd><code>Snapshot stream parsing unit tests</code>                                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.test.js <ul><li>Tests binary snapshot frame parsing with header validation and payload extraction <li> Validates bitmap metadata decoding from binary format <li> Tests base64-encoded message parsing <li> Verifies magic number validation for frame integrity</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-981af57f660dd63edc6665257e2a63f331fb07fca2536f1ba2445ed21e0a9b85">+62/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_channel_event_methods.test.js<dd><code>Channel event handling unit tests</code>                                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.test.js <ul><li>Tests snapshot channel join success with reconnect timer clearing <li> Validates error handling with reconnect scheduling <li> Tests channel reconnection with leave and re-setup <li> Mocks channel join/receive chain for isolated testing</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-44c4a5a7e92005539eb4ba2dcf59af42afd247d1262e658421ceac84bf0a8943">+79/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewRenderer.test.js<dd><code>GodViewRenderer integration tests</code>                                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/GodViewRenderer.test.js <ul><li>Tests GodViewRenderer context initialization with engine APIs <li> Validates method registration from layout, rendering, and lifecycle engines <li> Tests update delegation to context state <li> Verifies mount/destroy delegation to lifecycle controller</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-71afdf3142f4c39c7d2062e0b7520e4cf1ec67ce37fa03bded5e7cbfaeff2f2d">+81/-0</a>    </td> </tr> <tr> <td> <details> <summary>deps_injection_contract.test.js<dd><code>Dependency injection contract validation</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/deps_injection_contract.test.js <ul><li>Validates all <code>this.deps</code> usages in rendering/lifecycle methods are declared in dependency maps <li> Ensures no unused dependency declarations exist in renderer deps configuration <li> Uses file system scanning and regex matching for contract verification <li> Provides clear error messages for missing or unused dependencies</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2370dff32696048ffd13368ec06377d6e20ac6cb824ce5638615ed0b1ee582fe">+70/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_telemetry_methods.test.js<dd><code>Edge telemetry styling unit tests</code>                                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.test.js <ul><li>Tests packet rate formatting with K/M unit scaling <li> Validates capacity formatting with compact G/M units <li> Verifies edge width increases with utilization and packet rate <li> Tests color channel bounds and connection label normalization</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9a6094620b99db61b9165065c1abd52cded7ca7c2dc585d2fe21255220289035">+43/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_topology_methods.test.js<dd><code>Edge topology styling unit tests</code>                                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.test.js <ul><li>Tests edge topology class validation with explicit class priority <li> Validates topology layer filtering using class count maps <li> Tests fallback to explicit class when count maps absent <li> Verifies layer toggle state affects edge visibility</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-fa5f95fc6639415187cf8fafe41d3fcd31f5f4de1fb6e79482b88215dd9d5c58">+41/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_node_reason_methods.test.js<dd><code>Node state reason generation tests</code>                                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.test.js <ul><li>Tests state reason generation for root-cause and affected nodes <li> Validates dependency-based reason derivation from edge relationships <li> Tests causal reason humanization with hop distance and node references <li> Uses node index lookup for label resolution</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-22ab1c0499c71fd01afdd0cb1c96da2d45eeab573c47441a6e66e1eed904527e">+48/-0</a>    </td> </tr> <tr> <td> <details> <summary>runtime_access_contract.test.js<dd><code>Runtime access contract validation</code>                                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/runtime_access_contract.test.js <ul><li>Validates rendering/lifecycle methods use explicit <code>this.state</code> and <code>this.deps</code> namespaces <li> Prevents flat runtime references like <code>this.someMethod</code> in method files <li> Scans method files for contract violations using regex matching <li> Ensures clean separation between state, dependencies, and method calls</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-8926390b8e2c3ce7966c887820e7d6147a874ab41d0f93f30799225fba1e87c4">+47/-0</a>    </td> </tr> </table></details></td></tr><tr><td>Configuration changes</td><td><details><summary>1 files</summary><table> <tr> <td> <details> <summary>eslint.config.js<dd><code>ESLint configuration with state access enforcement</code>              </dd></summary> <hr> elixir/web-ng/assets/eslint.config.js <ul><li>Configures ESLint with modern JavaScript rules and browser globals <li> Enforces <code>this.state</code> and <code>this.deps</code> access patterns via restricted properties <li> Prevents deprecated <code>runtime_refs</code> imports in god view method files <li> Defines unused variable patterns to ignore underscore-prefixed names</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-c9b9b5b07da3e3f61be59a0a0e108f48b8c1df928a88276a06cf5aa809e80d3a">+112/-0</a>  </td> </tr> </table></details></td></tr><tr><td>Additional files</td><td><details><summary>101 files</summary><table> <tr> <td>.bazelignore</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a5641cd37d6ad98b32cdfce1980836cc68312277bc6a7052f55da02ada5bc6cf">+2/-0</a>      </td> </tr> <tr> <td>.bazelrc</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-544556920c45b42cbfe40159b082ce8af6bd929e492d076769226265f215832f">+3/-1</a>      </td> </tr> <tr> <td>.bazelversion</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-c3633fb973fb6f3cf898f53da86fa77e9310338a7c2933143709d5e226f05f75">+1/-1</a>      </td> </tr> <tr> <td>.dockerignore</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2f754321d62f08ba8392b9b168b83e24ea2852bb5d815d63e767f6c3d23c6ac5">+5/-6</a>      </td> </tr> <tr> <td>.env.example</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a3046da0d15a27e89f2afe639b25748a7ad4d9290af3e7b1b6c1a5533c8f0a8c">+4/-0</a>      </td> </tr> <tr> <td>pre-commit</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-87320095d7c4f39eed5d8f3866b512eb910e4eec8e7926faaeef6a53ab786fcb">+13/-0</a>    </td> </tr> <tr> <td>golangci-lint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-d9a956120ac84289d2650137f64bd8f0893331de05e44cc41899dd984c9e0d48">+18/-3</a>    </td> </tr> <tr> <td>release.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-87db21a973eed4fef5f32b267aa60fcee5cbdf03c67fafdc2a9b553bb0b15f34">+2/-2</a>      </td> </tr> <tr> <td>sbom-images.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-306f4aa8e8e286f727246a7517eecd45f3535fd99a644f60d635b9fa39875f54">+2/-4</a>      </td> </tr> <tr> <td>swiftlint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-1b49f173a7ae3bc0f6d6bcb2d6a376ddc07b3de248b8b93ecf292c917440aa1d">+31/-0</a>    </td> </tr> <tr> <td>tests-golang.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-07d64b93f6e82cf63364ba9ed8e6b02148c6b817eca20ac588da5516a3f38523">+2/-2</a>      </td> </tr> <tr> <td>tests-rust.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-fe45c58ef3e0ce2e65eb15e70842d134358ff957e727155bcfd21cc09ad38940">+10/-11</a>  </td> </tr> <tr> <td>web-ng-lint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-c19923a96bdb26e507a82c63f3feb4c34f35f8d9445d90cb737c7c98441b0293">+25/-3</a>    </td> </tr> <tr> <td>.gitmodules</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-fe7afb5c9c916e521401d3fcfb4277d5071798c3baf83baf11d6071742823584">+3/-0</a>      </td> </tr> <tr> <td>.swiftlint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-7109ad4ca9c6e705a8da290e7cb2898a679b0f8f1f4712d082dee256230d6a1f">+29/-0</a>    </td> </tr> <tr> <td>AGENTS.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a54ff182c7e8acf56acfd6e4b9c3ff41e2c41a31c9b211b2deb9df75d9a478f9">+10/-9</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-7fc57714ef13c3325ce2a1130202edced92fcccc0c6db34a72f7b57f60d552a3">+13/-1</a>    </td> </tr> <tr> <td>Bazel.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-6be72dda32c0a6480648cd95071f2266ed166694052974f8137c7f7f650599d0">+7/-14</a>    </td> </tr> <tr> <td>CHANGELOG</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-ecec88c33adb7591ee6aa88e29b62ad52ef443611cba5e0f0ecac9b5725afdba">+136/-0</a>  </td> </tr> <tr> <td>Cargo.toml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2e9d962a08321605940b5a657135052fbcef87b5e360662bb527c96d9a615542">+8/-5</a>      </td> </tr> <tr> <td>DOCKER_QUICKSTART.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-d39bb63b06e41b96069fe4f289e4d28a4f205f8e953c141e6f4d9c715bbb75b3">+5/-3</a>      </td> </tr> <tr> <td>INSTALL.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-09b140a43ebfdd8dbec31ce72cafffd15164d2860fd390692a030bcb932b54a0">+14/-46</a>  </td> </tr> <tr> <td>MODULE.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-6136fc12446089c3db7360e923203dd114b6a1466252e71667c6791c20fe6bdc">+254/-160</a></td> </tr> <tr> <td>Makefile</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-76ed074a9305c04054cdebb9e9aad2d818052b07091de1f20cad0bbac34ffb52">+83/-48</a>  </td> </tr> <tr> <td>README-Docker.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9fd61d24482efe68c22d8d41e2a1dcc440f39195aa56e7a050f2abe598179efd">+16/-2</a>    </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5">+37/-15</a>  </td> </tr> <tr> <td>RELEASE.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2b1b69303b927a484e02c7fad9fc87d0d3ff0dc22ae1da0ecd0dc935d922a23c">+7/-7</a>      </td> </tr> <tr> <td>SBOM.spdx</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-18998650ca9549e4a238b258c160071e656fe7ac85a21f9042b646edee5b82e1">+0/-1</a>      </td> </tr> <tr> <td>VERSION</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-7b60b8e351cbb80c47459ffe2c79f1a26404871f49294780fe47ad0e58c09350">+1/-1</a>      </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-884fa9353a5226345e44fbabea3300efc7a87dfbcde0b6a42521ca51823f1b68">+0/-176</a>  </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-484fd90d15537312547e4f244a6e8bcd9722ddf587664b37fede641e27c2e767">+0/-47</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-13652ffce40d2e7430a19e82ae9041f74594be2464a466b2d69b62a783a356f9">+0/-56</a>    </td> </tr> <tr> <td>release_pipeline.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-08d9d15c1ded8af19dd4d4dcbb2d32ce9eb70118e69a60936a3f2d2f57b93ecf">+1/-1</a>      </td> </tr> <tr> <td>mix_release.bzl</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-86ec281f99363b6b6eb1f49e21d83b7eeca93a35b552b9f305fffc6855e38ccd">+291/-4</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-65e272d2f04baca4ae19560ed8ef1d56c766adf56df00db2e958f128a5b0c73b">[link]</a>    </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3d4b8a94d5eaa4dbcf29a80857a24a28c20c1e185435589d21194fd289908ff2">+222/-0</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-24488b811b3eb528cb132a5444bf53530313d6693f4eee3aae88589d1ba601e0">+13/-0</a>    </td> </tr> <tr> <td>agent-gateway.env</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-35f665aec4ecb8acfb57df1200ce5e2613b5d8206b0af62aa640eaeae95c3dee">+17/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-8242b89d38eae7e1b77617b2c41b6608fb749b22865f5e845f487c69c6bffe5e">+14/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-5228e32dff24c892393f16526796db39b90aec808b9789342c9d8da87f28299e">+4/-0</a>      </td> </tr> <tr> <td>serviceradar-agent-gateway.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-72f4aec7440d8b14c650b3fa0b0ddf16d17e28e06127164ab2dfdb5f133944d0">+18/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-c08735b9f8d787fe0b3703d20d0f62034b61c9ff84eaa3bcfb0cfa93629cfffe">+9/-0</a>      </td> </tr> <tr> <td>agent-windows.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-806d4701cb80965683ae4a53e77ec173b85e34dc11c31750afa05e0688715705">[link]</a>    </td> </tr> <tr> <td>agent.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-f649e65b0370811ba1b5dbaa92211dc8659485484066caebf196bf9abe023245">+1/-0</a>      </td> </tr> <tr> <td>sweep.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-4989191245e5e0c7d1512f58e262b2bb2dd131d1ef4eb24087c922415af8ad4b">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-59b8f3a99f1e535d12a2d323de3b283cf3bff6038d9e0d8d957b7e14115dac7f">[link]</a>    </td> </tr> <tr> <td>com.serviceradar.agent.plist</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-07225c29b7dfd102638dd97164c39c6210f1023a44f9a942f8878732b2d457df">[link]</a>    </td> </tr> <tr> <td>postinstall</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-12436aafe92e19f55e0fc687708997742e4a823934612ae21e71510582366bb8">[link]</a>    </td> </tr> <tr> <td>preinstall</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-982b04648b2bd391b824b1ae1750f03ab2204137e129b3226f9daa7c4761db96">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-69c03cc0d681772844b9d9b3780460f2fd156888eeedf763d64ed08325e7b1e5">+133/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3a98f109dfa3226a977bc6951d6631a1a3aa00cf825916b36a66b2fb7dd97433">+58/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-c8ffc9d45829a591735dcbc3579e324374927da20e0b1119f5bddf9e04f8fdfa">[link]</a>    </td> </tr> <tr> <td>serviceradar-agent.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-6f512d71062e57d9e7fd0d3a365c05d1647a6cb6d322d3a273086df21d07f044">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-5eef6248133fed3bdc07087a978968b4ecbb9a015da151786cb346ae8a182fba">+9/-0</a>      </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-78abcc95294cadf2793bde4b458e983b2be3d637a5083f6eacac334518299e1c">+27/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2d9fc2b6ac58933068ee3e89e77541301343c0fd20d0dba597661d9c953b4fda">+8/-0</a>      </td> </tr> <tr> <td>serviceradar-bmp-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9f7bb48335466cb4c5aa82961010b40dca8101369c7c27ed91f3970c24465f47">+21/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-cba39039e2365e6c8bbb1664687a9913e2c77032fa619290c0c94ee0d108fa2d">+9/-0</a>      </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-d48c91094161218610f314563637b6f10e33936bf938ae94f28bcda34ac09e61">+99/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-558fdec9b28a58adc0cee8b4ab194f666b5443836d78b425a426fbfdf4e0f2cf">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-1eae48416a3f2743a5c4891f749edae6d7b35fdf18180225a0668df62f8c9864">[link]</a>    </td> </tr> <tr> <td>components.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-0eb1b1b3d2b2eb6070da2458fc269b087febe86c82dfa7b947dce78f687d8c6c">+677/-0</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-f6e7d6a3406ba37ad0d7d84cbfddab05ed473611d79b98deb3f59f433541ca75">+13/-0</a>    </td> </tr> <tr> <td>core-elx.env</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-ebbdc6529654fbcc3c89917ac5566367727d92dee3922f2142c2f475fd541775">+25/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-b4e6dc2a170653320f2298bab501d9fde5e7232980fe79b0a33a77a77eab5a32">+14/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-e2fd5c501d81ee86f73a7095e11581a503fb7fc0c674212d0b3e817ef1bae766">+4/-0</a>      </td> </tr> <tr> <td>serviceradar-core-elx.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-090d91356b949264630141d1c81d8848fe08503f5ffd9f8891aa8885d53301ac">+18/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-1bf92554d04fdc1b2474384c80459ed2adc18642c081cf0adc9cdd336555e9a5">+9/-0</a>      </td> </tr> <tr> <td>datasvc.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-8c05ef42b1a03a86b80203a474c609bd85e8e220e48c9233baa5d9da1e0e2560">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a6f34e0e13405fe1c462b17c019d940f3f64ee7625131960fc9f49dc3cba4be1">+121/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-e193a05d913d045643f68961731a5cf8c13a18dbcaf6449657be0871420342be">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-248b029a3b863c860badd5bf2942af4b7e74025199f2d4b106baf251524d7b5c">[link]</a>    </td> </tr> <tr> <td>serviceradar-datasvc.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-051366b65b32176c4228cd5a538f106c7b6b901a5d3d379f079cc2ead5f36581">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-bd51e5988945ebae0126f0c26bdbe47093db97914ba50c753f62a4190900d67b">+9/-0</a>      </td> </tr> <tr> <td>db-event-writer.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-1d7a5a0d1bf7a4799ad9192d2a458fd3a874e90e3e0f984adacff13ab3c30db0">+4/-0</a>      </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3f5cb54ec5a3b8cf1f1442b981f32084f6da136e1e8b51ffc6d6616d1b0555d3">+121/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-999843f8c957305a2a72b7291161755418349d8fe008ed241c200eb80c387383">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-9b10459dd3ab299a5e2795d87480aeef117ed2b0a440a9e463508c36011fa459">[link]</a>    </td> </tr> <tr> <td>serviceradar-event-writer.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-09035233c3aea0dd35c69ee3546a824314ebedf15391519c331f59f7718e31b3">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-4702b0851fc56ef125b21219260d660f25e58a8d3d69c833c9121b0b32ec65e4">+9/-0</a>      </td> </tr> <tr> <td>faker.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-1b2810c87baf9e608088f4ac1fabc27f7f4d875b446c4cb69a86b11c14b8b64d">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-d574f1856216dfe83e583c825087808e5e7eea18318626f936fb0b1c5abc4af3">+93/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3500af66b819187f620813740507f3143b2c3092d3b7c19d4341dee214af9cc0">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-d279c1417fa1a9b70f2403f18d4650bebd2ba7c4fa04932a705f4adfc964de54">[link]</a>    </td> </tr> <tr> <td>serviceradar-faker.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-797614d898799e2807e680411a8cae841d5365fcfe86ac53621a3194d801d22f">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-26e6a9ead561f65593942caebdb25323ef6b194cd4caec6da294a3dbad6127d9">+9/-0</a>      </td> </tr> <tr> <td>flow-collector.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a480dceb64927f584993aadb30aeff14c9babacaef41cc1402b75ac7452636d6">+29/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-16e6354bb3ec3f90a6830d2d71b62c3fe6d095bfd6d961f8747383a065223356">+65/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-8f3305098b96d8258211e103b43d60959a7e3b7900312aa01745e762f0ffb939">+24/-0</a>    </td> </tr> <tr> <td>serviceradar-flow-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-5648ce1f784b5117a90a00956e5330ca3e34058a9d623ccd2123211c22220496">+21/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-6e9a0b740b9ed11921105cd2326a433fdac9dd11d54e1045a119ff350b3af084">+9/-0</a>      </td> </tr> <tr> <td>log-collector.toml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-a7d46724586a71ba3de275cddc15ffcd4d6de9b6315e34dc53ce88e10828fd47">+13/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-cf7184670a4aeb2929a07fdb4b323e0dc9d00c593e7c764f8b7105d8ea226a92">+63/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-e159c05de1dc7182c002ddba3e020f380be35abc8a17727d3e2de7765c2e12fd">+31/-0</a>    </td> </tr> <tr> <td>serviceradar-log-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-f4c27ab1fab752b304c8895d8db6a3fdae82fe6d0ece835657348c7c12120fbf">+29/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-0d02d96f6ee9963fe917b9b9e5cb2af705ab32ba96e08c89c0204f684ae658ca">+9/-0</a>      </td> </tr> <tr> <td>nats-cloud.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-3261539de7f9c008c53f093e16530e50120b1e890ad552dce01080daa9ea5d73">[link]</a>    </td> </tr> <tr> <td>nats-leaf.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-af78ed28cd08e6b01c866c177b5eecc892d988c983e98dd3da228dbcac4cc746">[link]</a>    </td> </tr> <tr> <td>nats-server.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-fb07e2ecd09252719ae6f5ca36aac14d58bd911f7cdcfc26a698160584af512a">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-ade55813f95250a33958d2cce2e5bb7dc15400296e67cd736726e3e1e3d18ba1">[link]</a>    </td> </tr> <tr> <td>Additional files not shown</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-2f328e4cd8dbe3ad193e49d92bcf045f47a6b72b1e9487d366f6b8288589b4ca"></a></td> </tr> </table></details></td></tr></tbody></table> </details> ___

qodo-code-review[bot] commented

2026-03-01 03:40:02 +00:00

(Migrated from github.com)

Author

Owner

Imported GitHub PR comment.

Original author: @qodo-code-review[bot]
Original URL: https://github.com/carverauto/serviceradar/pull/2958#issuecomment-3978994253
Original created: 2026-03-01T03:40:02Z

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	DOM XSS risk Description: Tooltip content is assigned via `tooltip.innerHTML = html` where `html` is built from unescaped edge/node fields (e.g., `src`, `dst`, `mid_value`, `label`), enabling DOM XSS if any of those values can contain attacker-controlled HTML/JS (for example, a value like `<img src=x` `onerror=alert(1)>` in `mid_value`). NetflowSankeyChart.js [72-88] Referred Code const showTooltip = (evt, html) => { if (!html) return const rect = el.getBoundingClientRect() const x = evt.clientX - rect.left const y = evt.clientY - rect.top tooltip.innerHTML = html tooltip.classList.remove("hidden") const pad = 8 const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width \|\| 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` }
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Swallowed exceptions: Multiple new `try { ... } catch (_e) {}` blocks silently ignore failures (e.g., map resize/remove, theme observer disconnect, source/layer updates), which can hide runtime errors and prevent actionable diagnostics. Referred Code this._initOrUpdate() try { this._map?.resize() } catch (_e) {} }, destroyed() { try { this._themeObserver?.disconnect() } catch (_e) {} try { if (this._colorSchemeMql?.removeEventListener && this._onColorSchemeChange) { this._colorSchemeMql.removeEventListener("change", this._onColorSchemeChange) } else if (this._colorSchemeMql?.removeListener && this._onColorSchemeChange) { this._colorSchemeMql.removeListener(this._onColorSchemeChange) } } catch (_e) {} try { this._map?.remove() } catch (_e) {} this._map = null this._markers = [] ... (clipped 225 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: User-facing internals: Rendering failure details are displayed directly to the user via `renderMessage(...,` `String(e?.message \|\| e ...))`, which may expose internal implementation or library error information. Referred Code `} catch (e) { renderMessage("Sankey failed to render.", String(e?.message \|\| e \|\| "unknown error")) return` Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: XSS via tooltip: Tooltip HTML is built with unescaped values from `el.dataset.edges` (e.g., `src`, `dst`, `mid_value`) and assigned to `tooltip.innerHTML`, enabling potential HTML/script injection if upstream data contains malicious strings. Referred Code const html = ` <div class="text-[11px]"><span class="opacity-70">${groupLabel.src}:</span> <span class="font-mono">${String(s)}</span></div> <div class="mt-0.5 text-[11px] opacity-70">${midLabel}</div> <div class="mt-0.5 text-[11px]"><span class="opacity-70">${groupLabel.dst}:</span> <span class="font-mono">${String(t)}</span></div> <div class="mt-0.5 text-[11px] font-mono">${formatBytes(d?.value \|\| 0)}</div> ` showTooltip(evt, html) }) Learn more about managing compliance generic rules or creating your own custom rules
⚪

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/2958#issuecomment-3978994253 Original created: 2026-03-01T03:40:02Z --- ## PR Compliance Guide 🔍  Below is a summary of compliance checks for this PR: <table><tbody><tr><td colspan='2'>Security Compliance</td></tr> <tr><td rowspan=1>⚪</td> <td><details><summary>DOM XSS risk </summary> Description: Tooltip content is assigned via <code>tooltip.innerHTML = html</code> where <code>html</code> is built from unescaped edge/node fields (e.g., <code>src</code>, <code>dst</code>, <code>mid_value</code>, <code>label</code>), enabling DOM XSS if any of those values can contain attacker-controlled HTML/JS (for example, a value like <code><img src=x </code> <code>onerror=alert(1)></code> in <code>mid_value</code>). <a href='https://github.com/carverauto/serviceradar/pull/2958/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R88'>NetflowSankeyChart.js [72-88]</a> <details open><summary>Referred Code</summary> ```javascript const showTooltip = (evt, html) => { if (!html) return const rect = el.getBoundingClientRect() const x = evt.clientX - rect.left const y = evt.clientY - rect.top tooltip.innerHTML = html tooltip.classList.remove("hidden") const pad = 8 const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width || 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` } ``` </details></details></td></tr> <tr><td colspan='2'>Ticket Compliance</td></tr> <tr><td>⚪</td><td><details><summary>🎫 No ticket provided </summary> - [ ] Create ticket/issue  </details></td></tr> <tr><td colspan='2'>Codebase Duplication Compliance</td></tr> <tr><td>⚪</td><td><details><summary>Codebase context is not defined </summary> Follow the <a href='https://qodo-merge-docs.qodo.ai/core-abilities/rag_context_enrichment/'>guide</a> to enable codebase context checks. </details></td></tr> <tr><td colspan='2'>Custom Compliance</td></tr> <tr><td rowspan=1>🟢</td><td> <details><summary>Generic: Meaningful Naming and Self-Documenting Code</summary> **Objective:** Ensure all identifiers clearly express their purpose and intent, making code self-documenting **Status:** Passed > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td rowspan=3>🔴</td> <td><details> <summary>Generic: Robust Error Handling and Edge Case Management</summary> **Objective:** Ensure comprehensive error handling that provides meaningful context and graceful degradation **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2958/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R28-R273'>Swallowed exceptions</a>: Multiple new <code>try { ... } catch (_e) {}</code> blocks silently ignore failures (e.g., map resize/remove, theme observer disconnect, source/layer updates), which can hide runtime errors and prevent actionable diagnostics. <details open><summary>Referred Code</summary> ```javascript this._initOrUpdate() try { this._map?.resize() } catch (_e) {} }, destroyed() { try { this._themeObserver?.disconnect() } catch (_e) {} try { if (this._colorSchemeMql?.removeEventListener && this._onColorSchemeChange) { this._colorSchemeMql.removeEventListener("change", this._onColorSchemeChange) } else if (this._colorSchemeMql?.removeListener && this._onColorSchemeChange) { this._colorSchemeMql.removeListener(this._onColorSchemeChange) } } catch (_e) {} try { this._map?.remove() } catch (_e) {} this._map = null this._markers = [] ... (clipped 225 lines) ``` </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td><details> <summary>Generic: Secure Error Handling</summary> **Objective:** To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2958/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R375-R377'>User-facing internals</a>: Rendering failure details are displayed directly to the user via <code>renderMessage(..., </code> <code>String(e?.message || e ...))</code>, which may expose internal implementation or library error information. <details open><summary>Referred Code</summary> ```javascript } catch (e) { renderMessage("Sankey failed to render.", String(e?.message || e || "unknown error")) return ``` </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td><details> <summary>Generic: Security-First Input Validation and Data Handling</summary> **Objective:** Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2958/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R275-R282'>XSS via tooltip</a>: Tooltip HTML is built with unescaped values from <code>el.dataset.edges</code> (e.g., <code>src</code>, <code>dst</code>, <code>mid_value</code>) and assigned to <code>tooltip.innerHTML</code>, enabling potential HTML/script injection if upstream data contains malicious strings. <details open><summary>Referred Code</summary> ```javascript const html = ` <div class="text-[11px]">${groupLabel.src}: ${String(s)}</div> <div class="mt-0.5 text-[11px] opacity-70">${midLabel}</div> <div class="mt-0.5 text-[11px]">${groupLabel.dst}: ${String(t)}</div> <div class="mt-0.5 text-[11px] font-mono">${formatBytes(d?.value || 0)}</div> ` showTooltip(evt, html) }) ``` </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td rowspan=2>⚪</td> <tr><td align="center" colspan="2">   </td></tr></tbody></table> <details><summary>Compliance status legend</summary> 🟢 - Fully Compliant 🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label </details>

qodo-code-review[bot] commented

2026-03-01 03:41:32 +00:00

(Migrated from github.com)

Author

Owner

Imported GitHub PR comment.

Original author: @qodo-code-review[bot]
Original URL: https://github.com/carverauto/serviceradar/pull/2958#issuecomment-3978996287
Original created: 2026-03-01T03:41:32Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Avoid committing large build artifacts The PR adds a large, auto-generated JavaScript bundle (`server.js`) to the repository. This file is a build artifact and should be excluded from version control, for instance by adding it to `.gitignore`. Examples: elixir/web-ng/priv/react/server.js [1-424670] // @bun var __create = Object.create; var __getProtoOf = Object.getPrototypeOf; var __defProp = Object.defineProperty; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __toESM = (mod, isNodeMode, target) => { target = mod != null ? __create(__getProtoOf(mod)) : {}; const to = isNodeMode \|\| !mod \|\| !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target; for (let key of __getOwnPropNames(mod)) ... (clipped 424659 lines) Solution Walkthrough: Before: `# .gitignore # (does not contain 'elixir/web-ng/priv/react/server.js') # Git commit includes the following files: # ADD elixir/web-ng/priv/react/server.js (424,670 lines of bundled code) # ADD elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js # ... other source files` After: # .gitignore elixir/web-ng/priv/react/server.js # Git commit no longer includes the bundled file: # (elixir/web-ng/priv/react/server.js is ignored) # ADD elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js # ... other source files # Build process (e.g., in CI/CD or pre-deployment) # A command like `bun build` generates the server.js file, # but it is not tracked by Git. Suggestion importance[1-10]: 10 __ Why: The suggestion correctly identifies a massive 400k+ line build artifact (`server.js`) that should not be in version control, as it severely impacts repository health and reviewability.	High
Security	Prevent XSS by avoiding innerHTML To prevent potential XSS vulnerabilities, replace the use of `tooltip.innerHTML` with safe DOM manipulation methods like `document.createElement` and `textContent` for setting the tooltip's content. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [72-88] -const showTooltip = (evt, html) => { - if (!html) return +const showTooltip = (evt, content) => { + if (!content) return const rect = el.getBoundingClientRect() const x = evt.clientX - rect.left const y = evt.clientY - rect.top - tooltip.innerHTML = html + // Clear previous content and build new content safely + tooltip.textContent = "" + if (typeof content === "string") { + tooltip.innerHTML = content // Assumes safe, static HTML + } else { + content.forEach(item => { + const div = document.createElement("div") + div.className = item.className + if (item.children) { + item.children.forEach(child => { + const span = document.createElement("span") + span.className = child.className + span.textContent = child.text + div.appendChild(span) + }) + } else { + div.textContent = item.text + } + tooltip.appendChild(div) + }) + } tooltip.classList.remove("hidden") const pad = 8 const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width \|\| 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential XSS vulnerability from using `innerHTML` with data that could originate from user-controlled fields. While the proposed `improved_code` is not a drop-in replacement and changes the function's API, the core security advice is valid and critical for hardening the application.	Medium
Possible issue	Ensure modulo operation yields positive results Correct the modulo calculation for the `wave` variable to ensure it always produces a positive result, fixing a potential bug in the animation logic. elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js [234] `-const wave = (sweepTime - dist) % 400.0 +const wave = ((sweepTime - dist) % 400.0 + 400.0) % 400.0` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a subtle bug where the JavaScript modulo operator can return negative values, which would break the animation logic, and provides a correct fix.	Medium
	Fix incorrect state update bug Remove the incorrect update to `atmosphereSuppressUntil` from the generic `onError` handler to prevent unintended side effects. elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js [150-155] if (this.state.summary) this.state.summary.textContent = `render error: ${String(error)}` if (this.state.lastGraph) { - const now = typeof performance !== "undefined" ? performance.now() : Date.now() - this.state.atmosphereSuppressUntil = now + 1200 this.deps.renderGraph(this.state.lastGraph) } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: This suggestion identifies and fixes a bug where a generic error handler was incorrectly modifying state specific to another error case, preventing unintended side effects.	Medium
	Fix inconsistent theme handling bug Refactor the duplicated React component logic into a single, shared component to fix an inconsistent theme handling bug and improve maintainability. elixir/web-ng/assets/js/hooks/JdmEditorHook.js [128-172] + const EditorComponent = ({initialDefinition, initialTheme, onDefinitionChange, readOnly}) => { + const [definition, setDefinition] = React.useState(initialDefinition) + const [theme, setTheme] = React.useState(initialTheme) + + React.useEffect(() => { + setDefinition(initialDefinition) + }, [initialDefinition]) + + React.useEffect(() => { + const observer = new MutationObserver(() => setTheme(getPhoenixTheme())) + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ["data-theme"], + }) + + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + const handleMediaChange = () => setTheme(getPhoenixTheme()) + mediaQuery.addEventListener("change", handleMediaChange) + + return () => { + observer.disconnect() + mediaQuery.removeEventListener("change", handleMediaChange) + } + }, []) + + const handleChange = React.useCallback( + (newDef) => { + setDefinition(newDef) + onDefinitionChange(newDef) + }, + [onDefinitionChange], + ) + + const themeConfig = {mode: theme} + + return React.createElement( + "div", + { + style: {height: "100%", width: "100%"}, + className: theme === "dark" ? "grl-dark" : "grl-light", + "data-theme": theme, + }, + React.createElement( + JdmConfigProvider, + {theme: themeConfig}, + React.createElement(DecisionGraph, { + value: definition, + onChange: handleChange, + disabled: readOnly, + }), + ), + ) + } + + const renderEditor = (definition) => { + this.reactRoot.render( + React.createElement(EditorComponent, { + initialDefinition: definition, + initialTheme: getPhoenixTheme(), + onDefinitionChange: (newDef) => hook.pushEvent("jdm_editor_change", {definition: newDef}), + readOnly: props.readOnly, + }), + ) + } + + // Clear container and render fresh + container.innerHTML = "" + this.reactRoot = createRoot(container) + renderEditor(props.definition) + // Handle updates from LiveView this.handleEvent("jdm_editor_update", ({definition}) => { - // Re-render with new definition - const UpdatedEditor = ({initialTheme}) => { - const [def, setDef] = React.useState(definition) - const [theme, setTheme] = React.useState(initialTheme) - - React.useEffect(() => { - const observer = new MutationObserver(() => { - setTheme(getPhoenixTheme()) - }) - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ["data-theme"], - }) - return () => observer.disconnect() - }, []) - - const handleChange = React.useCallback((newDef) => { - setDef(newDef) - hook.pushEvent("jdm_editor_change", {definition: newDef}) - }, []) -... - return React.createElement( - "div", -... - React.createElement(DecisionGraph, { - value: def, - onChange: handleChange, - disabled: props.readOnly, - }), -... - } - this.reactRoot.render(React.createElement(UpdatedEditor, {initialTheme: getPhoenixTheme()})) + renderEditor(definition) }) `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies both a code duplication issue and a related bug where system theme changes were not handled in the update path, leading to inconsistent UI behavior.	Medium
	Deep copy data to prevent mutation Perform a deep copy of the `nodes` and `links` data before passing it to the `d3Sankey` layout generator to prevent unintended mutations of the original data structures. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [166-180] `const buildSankey = (nodeList, linkList) => { const sankey = d3Sankey() .nodeId((d) => d.id) .nodeWidth(12) .nodePadding(10) .extent([ [12, 10], [width - 12, height - 10], ]) return sankey({ - nodes: nodeList.map((d) => ({...d})), - links: linkList.map((d) => ({...d})), + nodes: JSON.parse(JSON.stringify(nodeList)), + links: JSON.parse(JSON.stringify(linkList)), }) }` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 6 __ Why: The suggestion correctly notes that `d3-sankey` mutates its input data and that the current shallow copy is insufficient for nested objects. The `links` array contains a nested `edge` object, which could be mutated. Using `JSON.parse(JSON.stringify(...))` for a deep copy is a valid and effective solution to prevent such side effects.	Low
General	Use anchor tag for navigation links Replace the	Medium
	Refactor duplicated data normalization logic Refactor the duplicated data normalization logic into a single, reusable function to improve code maintainability and consistency. elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js [60-155] - const data = raw - .map((d) => { - const t = new Date(d.t) - const out = {t} - let sum = 0 - for (const k of visibleKeys) { - const v = Number(d[k] \|\| 0) - out[k] = v - sum += v - } - out.__sum = sum - return out - }) - .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) - .sort((a, b) => a.t - b.t) - .map((d) => { - const denom = d.__sum \|\| 1 - const out = {t: d.t} - for (const k of visibleKeys) out[k] = Number(d[k] \|\| 0) / denom - return out - }) - - if (data.length === 0) return - - const stack = d3.stack().keys(visibleKeys) - const series = stack(data) - ... - const normalizeToPct = (points) => { - const normalized = points + const normalizeToPct = (points, keys) => { + if (!Array.isArray(points)) return [] + return points .map((d) => { const t = new Date(d.t) const out = {t} let sum = 0 - for (const k of visibleKeys) { + for (const k of keys) { const v = Number(d[k] \|\| 0) out[k] = v sum += v } out.__sum = sum return out }) .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) .sort((a, b) => a.t - b.t) .map((d) => { const denom = d.__sum \|\| 1 const out = {t: d.t} - for (const k of visibleKeys) out[k] = Number(d[k] \|\| 0) / denom + for (const k of keys) out[k] = Number(d[k] \|\| 0) / denom return out }) - - return normalized } + const visibleKeys = keys.filter((k) => !this._hidden.has(k)) + if (visibleKeys.length === 0) return + + const data = normalizeToPct(raw, visibleKeys) + + if (data.length === 0) return + + const stack = d3.stack().keys(visibleKeys) + const series = stack(data) + ... // Composition overlays: dashed boundary lines (y1) per series layer. // We keep the same keys so the overlay reads as "previous composition" / "reverse composition". if (Array.isArray(overlays) && overlays.length > 0) { const overlaysByType = overlays.filter((o) => o && typeof o.type === "string" && Array.isArray(o.points)) ... for (const ov of overlaysByType) { - const od = normalizeToPct(ov.points \|\| []) + const od = normalizeToPct(ov.points \|\| [], visibleKeys) if (!Array.isArray(od) \|\| od.length === 0) continue `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies duplicated code and proposes a valid refactoring that improves maintainability by adhering to the DRY principle.	Low
	Use responsive padding for map bounds Replace the fixed padding value in the `fitBounds` call with a dynamic one that adapts to the map's container size to improve responsiveness. elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [290] `-this._map.fitBounds(bounds, {padding: 28, duration: 250, maxZoom: 6}) +const mapEl = this._map.getCanvas().parentElement; +const padding = Math.max(20, Math.min(mapEl.clientWidth, mapEl.clientHeight) * 0.1); +this._map.fitBounds(bounds, {padding, duration: 250, maxZoom: 6})` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies that a fixed padding is not responsive and proposes a dynamic calculation, which improves the user experience on different screen sizes.	Low
More

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/2958#issuecomment-3978996287 Original created: 2026-03-01T03:41:32Z --- ## PR Code Suggestions ✨  Explore these optional code suggestions: <table><thead><tr><td>Category</td><td align=left>Suggestion                                                                                                                                    </td><td align=center>Impact</td></tr><tbody><tr><td rowspan=1>High-level</td> <td> <details><summary>Avoid committing large build artifacts</summary> ___ **The PR adds a large, auto-generated JavaScript bundle (<code>server.js</code>) to the repository. This file is a build artifact and should be excluded from version control, for instance by adding it to <code>.gitignore</code>.** ### Examples: <details> <summary> <a href="https://github.com/carverauto/serviceradar/pull/2958/files#diff-cd4023c03f4619a4796b379912c6915564323f0565611fe065191872fad38f06R1-R424670">elixir/web-ng/priv/react/server.js [1-424670]</a> </summary> ```javascript // @bun var __create = Object.create; var __getProtoOf = Object.getPrototypeOf; var __defProp = Object.defineProperty; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __toESM = (mod, isNodeMode, target) => { target = mod != null ? __create(__getProtoOf(mod)) : {}; const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target; for (let key of __getOwnPropNames(mod)) ... (clipped 424659 lines) ``` </details> ### Solution Walkthrough: #### Before: ```javascript # .gitignore # (does not contain 'elixir/web-ng/priv/react/server.js') # Git commit includes the following files: # ADD elixir/web-ng/priv/react/server.js (424,670 lines of bundled code) # ADD elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js # ... other source files ``` #### After: ```javascript # .gitignore elixir/web-ng/priv/react/server.js # Git commit no longer includes the bundled file: # (elixir/web-ng/priv/react/server.js is ignored) # ADD elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js # ... other source files # Build process (e.g., in CI/CD or pre-deployment) # A command like `bun build` generates the server.js file, # but it is not tracked by Git. ``` <details><summary>Suggestion importance[1-10]: 10</summary> __ Why: The suggestion correctly identifies a massive 400k+ line build artifact (`server.js`) that should not be in version control, as it severely impacts repository health and reviewability. </details></details></td><td align=center>High </td></tr><tr><td rowspan=1>Security</td> <td> <details><summary>Prevent XSS by avoiding innerHTML</summary> ___ **To prevent potential XSS vulnerabilities, replace the use of <code>tooltip.innerHTML</code> with safe DOM manipulation methods like <code>document.createElement</code> and <code>textContent</code> for setting the tooltip's content.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [72-88]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R88) ```diff -const showTooltip = (evt, html) => { - if (!html) return +const showTooltip = (evt, content) => { + if (!content) return const rect = el.getBoundingClientRect() const x = evt.clientX - rect.left const y = evt.clientY - rect.top - tooltip.innerHTML = html + // Clear previous content and build new content safely + tooltip.textContent = "" + if (typeof content === "string") { + tooltip.innerHTML = content // Assumes safe, static HTML + } else { + content.forEach(item => { + const div = document.createElement("div") + div.className = item.className + if (item.children) { + item.children.forEach(child => { + const span = document.createElement("span") + span.className = child.className + span.textContent = child.text + div.appendChild(span) + }) + } else { + div.textContent = item.text + } + tooltip.appendChild(div) + }) + } tooltip.classList.remove("hidden") const pad = 8 const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width || 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies a potential XSS vulnerability from using `innerHTML` with data that could originate from user-controlled fields. While the proposed `improved_code` is not a drop-in replacement and changes the function's API, the core security advice is valid and critical for hardening the application. </details></details></td><td align=center>Medium </td></tr><tr><td rowspan=4>Possible issue</td> <td> <details><summary>Ensure modulo operation yields positive results</summary> ___ **Correct the modulo calculation for the <code>wave</code> variable to ensure it always produces a positive result, fixing a potential bug in the animation logic.** [elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js [234]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-f08b4f5d106f54747fbb0635896e73090396a5734363ddaaf7a93bb3ce608ce9R234-R234) ```diff -const wave = (sweepTime - dist) % 400.0 +const wave = ((sweepTime - dist) % 400.0 + 400.0) % 400.0 ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies a subtle bug where the JavaScript modulo operator can return negative values, which would break the animation logic, and provides a correct fix. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Fix incorrect state update bug</summary> ___ **Remove the incorrect update to <code>atmosphereSuppressUntil</code> from the generic <code>onError</code> handler to prevent unintended side effects.** [elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js [150-155]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-7b88fcb183a776c3df89b3352962b5cc6164d2302a74d211fb3fe4df9776cdd7R150-R155) ```diff if (this.state.summary) this.state.summary.textContent = `render error: ${String(error)}` if (this.state.lastGraph) { - const now = typeof performance !== "undefined" ? performance.now() : Date.now() - this.state.atmosphereSuppressUntil = now + 1200 this.deps.renderGraph(this.state.lastGraph) } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: This suggestion identifies and fixes a bug where a generic error handler was incorrectly modifying state specific to another error case, preventing unintended side effects. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Fix inconsistent theme handling bug</summary> ___ **Refactor the duplicated React component logic into a single, shared component to fix an inconsistent theme handling bug and improve maintainability.** [elixir/web-ng/assets/js/hooks/JdmEditorHook.js [128-172]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-e82967d2468cd02bd7524d51bcd9e22d9432b4d0afd882442515c7a814ae18f8R128-R172) ```diff + const EditorComponent = ({initialDefinition, initialTheme, onDefinitionChange, readOnly}) => { + const [definition, setDefinition] = React.useState(initialDefinition) + const [theme, setTheme] = React.useState(initialTheme) + + React.useEffect(() => { + setDefinition(initialDefinition) + }, [initialDefinition]) + + React.useEffect(() => { + const observer = new MutationObserver(() => setTheme(getPhoenixTheme())) + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ["data-theme"], + }) + + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + const handleMediaChange = () => setTheme(getPhoenixTheme()) + mediaQuery.addEventListener("change", handleMediaChange) + + return () => { + observer.disconnect() + mediaQuery.removeEventListener("change", handleMediaChange) + } + }, []) + + const handleChange = React.useCallback( + (newDef) => { + setDefinition(newDef) + onDefinitionChange(newDef) + }, + [onDefinitionChange], + ) + + const themeConfig = {mode: theme} + + return React.createElement( + "div", + { + style: {height: "100%", width: "100%"}, + className: theme === "dark" ? "grl-dark" : "grl-light", + "data-theme": theme, + }, + React.createElement( + JdmConfigProvider, + {theme: themeConfig}, + React.createElement(DecisionGraph, { + value: definition, + onChange: handleChange, + disabled: readOnly, + }), + ), + ) + } + + const renderEditor = (definition) => { + this.reactRoot.render( + React.createElement(EditorComponent, { + initialDefinition: definition, + initialTheme: getPhoenixTheme(), + onDefinitionChange: (newDef) => hook.pushEvent("jdm_editor_change", {definition: newDef}), + readOnly: props.readOnly, + }), + ) + } + + // Clear container and render fresh + container.innerHTML = "" + this.reactRoot = createRoot(container) + renderEditor(props.definition) + // Handle updates from LiveView this.handleEvent("jdm_editor_update", ({definition}) => { - // Re-render with new definition - const UpdatedEditor = ({initialTheme}) => { - const [def, setDef] = React.useState(definition) - const [theme, setTheme] = React.useState(initialTheme) - - React.useEffect(() => { - const observer = new MutationObserver(() => { - setTheme(getPhoenixTheme()) - }) - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ["data-theme"], - }) - return () => observer.disconnect() - }, []) - - const handleChange = React.useCallback((newDef) => { - setDef(newDef) - hook.pushEvent("jdm_editor_change", {definition: newDef}) - }, []) -... - return React.createElement( - "div", -... - React.createElement(DecisionGraph, { - value: def, - onChange: handleChange, - disabled: props.readOnly, - }), -... - } - this.reactRoot.render(React.createElement(UpdatedEditor, {initialTheme: getPhoenixTheme()})) + renderEditor(definition) }) ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies both a code duplication issue and a related bug where system theme changes were not handled in the update path, leading to inconsistent UI behavior. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Deep copy data to prevent mutation</summary> ___ **Perform a deep copy of the <code>nodes</code> and <code>links</code> data before passing it to the <code>d3Sankey</code> layout generator to prevent unintended mutations of the original data structures.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [166-180]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R166-R180) ```diff const buildSankey = (nodeList, linkList) => { const sankey = d3Sankey() .nodeId((d) => d.id) .nodeWidth(12) .nodePadding(10) .extent([ [12, 10], [width - 12, height - 10], ]) return sankey({ - nodes: nodeList.map((d) => ({...d})), - links: linkList.map((d) => ({...d})), + nodes: JSON.parse(JSON.stringify(nodeList)), + links: JSON.parse(JSON.stringify(linkList)), }) } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly notes that `d3-sankey` mutates its input data and that the current shallow copy is insufficient for nested objects. The `links` array contains a nested `edge` object, which could be mutated. Using `JSON.parse(JSON.stringify(...))` for a deep copy is a valid and effective solution to prevent such side effects. </details></details></td><td align=center>Low </td></tr><tr><td rowspan=3>General</td> <td> <details><summary>Use anchor tag for navigation links</summary> ___ **Replace the <code><button></code> element used for the IP address link with a semantically correct <code><a></code> tag to improve accessibility and adhere to web standards.** [elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js [25-27]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-0da723c3f5b16409d7b5a10013bec415a4d9326e4d752e931bb2bba6792024d3R25-R27) ```diff const ipLine = ipHref - ? `<div>IP: <button type="button" class="link link-primary" data-device-href="${this.escapeHtml(ipHref)}">${ipText}</button></div>` + ? `<div>IP: <a href="${this.escapeHtml(ipHref)}" class="link link-primary" data-device-href="${this.escapeHtml(ipHref)}">${ipText}</a></div>` : `<div>IP: ${ipText}</div>` ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies a semantic and accessibility issue, and the proposed change to use an `<a>` tag for a link is a standard and important best practice. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Refactor duplicated data normalization logic</summary> ___ **Refactor the duplicated data normalization logic into a single, reusable function to improve code maintainability and consistency.** [elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js [60-155]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-67815c89effaf41060f95649ad3b755855bfa0ed7a9b77a9f1a9e72ebb73cd53R60-R155) ```diff - const data = raw - .map((d) => { - const t = new Date(d.t) - const out = {t} - let sum = 0 - for (const k of visibleKeys) { - const v = Number(d[k] || 0) - out[k] = v - sum += v - } - out.__sum = sum - return out - }) - .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) - .sort((a, b) => a.t - b.t) - .map((d) => { - const denom = d.__sum || 1 - const out = {t: d.t} - for (const k of visibleKeys) out[k] = Number(d[k] || 0) / denom - return out - }) - - if (data.length === 0) return - - const stack = d3.stack().keys(visibleKeys) - const series = stack(data) - ... - const normalizeToPct = (points) => { - const normalized = points + const normalizeToPct = (points, keys) => { + if (!Array.isArray(points)) return [] + return points .map((d) => { const t = new Date(d.t) const out = {t} let sum = 0 - for (const k of visibleKeys) { + for (const k of keys) { const v = Number(d[k] || 0) out[k] = v sum += v } out.__sum = sum return out }) .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) .sort((a, b) => a.t - b.t) .map((d) => { const denom = d.__sum || 1 const out = {t: d.t} - for (const k of visibleKeys) out[k] = Number(d[k] || 0) / denom + for (const k of keys) out[k] = Number(d[k] || 0) / denom return out }) - - return normalized } + const visibleKeys = keys.filter((k) => !this._hidden.has(k)) + if (visibleKeys.length === 0) return + + const data = normalizeToPct(raw, visibleKeys) + + if (data.length === 0) return + + const stack = d3.stack().keys(visibleKeys) + const series = stack(data) + ... // Composition overlays: dashed boundary lines (y1) per series layer. // We keep the same keys so the overlay reads as "previous composition" / "reverse composition". if (Array.isArray(overlays) && overlays.length > 0) { const overlaysByType = overlays.filter((o) => o && typeof o.type === "string" && Array.isArray(o.points)) ... for (const ov of overlaysByType) { - const od = normalizeToPct(ov.points || []) + const od = normalizeToPct(ov.points || [], visibleKeys) if (!Array.isArray(od) || od.length === 0) continue ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly identifies duplicated code and proposes a valid refactoring that improves maintainability by adhering to the DRY principle. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Use responsive padding for map bounds</summary> ___ **Replace the fixed padding value in the <code>fitBounds</code> call with a dynamic one that adapts to the map's container size to improve responsiveness.** [elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [290]](https://github.com/carverauto/serviceradar/pull/2958/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R290-R290) ```diff -this._map.fitBounds(bounds, {padding: 28, duration: 250, maxZoom: 6}) +const mapEl = this._map.getCanvas().parentElement; +const padding = Math.max(20, Math.min(mapEl.clientWidth, mapEl.clientHeight) * 0.1); +this._map.fitBounds(bounds, {padding, duration: 250, maxZoom: 6}) ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 5</summary> __ Why: The suggestion correctly identifies that a fixed padding is not responsive and proposes a dynamic calculation, which improves the user experience on different screen sizes. </details></details></td><td align=center>Low </td></tr> <tr><td align="center" colspan="2"> - [ ] More  </td><td></td></tr></tbody></table>