carverauto/serviceradar

Fork 0

2371 analytics stats cards should abbreviate numbers #2997

Closed

mfreeman451 wants to merge 2 commits from refs/pull/2997/head into staging

mfreeman451 commented

2026-03-01 03:46:12 +00:00

(Migrated from github.com)

Owner

Imported from GitHub pull request.

Original GitHub pull request: #2959
Original author: @mfreeman451
Original URL: https://github.com/carverauto/serviceradar/pull/2959
Original created: 2026-03-01T03:46:12Z
Original updated: 2026-03-01T03:50:43Z
Original head: carverauto/serviceradar:2371-analytics-stats-cards-should-abbreviate-numbers
Original base: staging

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

Description

Comprehensive implementation of a god-view network topology visualization system with deck.gl and D3
New packet flow particle animation layer with custom WebGL shaders for animated network edge visualization
Multiple netflow chart components (stacked area, stacked 100%, grid, line series, Sankey diagram) with abbreviated number formatting
Graph layout algorithms including Mercator projection, force-directed layout, and clustering transformations
Node and edge rendering with interactive tooltips, selection, and state-based styling
Arrow binary format decoding for efficient graph data streaming with WASM acceleration
Comprehensive test coverage for all major rendering, layout, and lifecycle components
ESLint configuration enforcing god-view code patterns and dependency injection contracts
Theme-aware Mapbox GL integration and JDM editor hook with Phoenix LiveView synchronization
Utility functions for number formatting (bytes, bits, rates) with K/M/G/T abbreviations

Diagram Walkthrough

flowchart LR
  A["Graph Data<br/>Arrow IPC"] -->|"Decode"| B["Graph State<br/>Nodes/Edges"]
  B -->|"Layout"| C["Positioned<br/>Topology"]
  C -->|"Render"| D["Deck.gl Layers<br/>Nodes/Edges/Particles"]
  E["Netflow Data"] -->|"Format"| F["Chart Components<br/>Area/Grid/Sankey"]
  G["User Input<br/>Pan/Zoom/Select"] -->|"Handle"| H["View State<br/>Camera/Selection"]
  H -->|"Update"| D
  I["WASM Engine"] -->|"Accelerate"| B
  I -->|"Interpolate"| C

File Walkthrough

Relevant files

Enhancement

43 files

NetflowSankeyChart.js `D3 Sankey chart hook for netflow visualization` elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js New D3-based Sankey diagram visualization for netflow data with 3-column layout (source, middle, destination) Implements interactive tooltips, edge/node highlighting, and graceful degradation for circular link detection Supports dynamic resizing via ResizeObserver and formats byte values with `formatBytes` helper Handles both 3-hop and 2-hop (degraded) graph layouts with color-coded groups	+380/-0
rendering_graph_layer_transport_methods.js `Deck.gl transport layer rendering methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js Builds deck.gl transport visualization layers (mantle, crust, atmosphere, security) with zoom-aware scaling Implements packet flow particle rendering with fallback ScatterplotLayer for shader-disabled browsers Calculates dynamic particle density, speed, and color based on edge utilization and zoom level Supports geo-grid base layer with animated sweep wave effect	+260/-0
MapboxFlowMap.js `Mapbox GL flow map visualization hook` elixir/web-ng/assets/js/hooks/MapboxFlowMap.js Mapbox GL integration hook with theme-aware style switching (light/dark modes) Manages markers, popup labels, and animated flow lines between source/destination pairs Implements theme detection via computed color-scheme, data-theme attribute, and OS preference fallback Handles map initialization, token validation, and responsive resizing with error recovery	+309/-0
rendering_selection_methods.js `Node selection and detail rendering methods` elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js Renders node detail panels with device info, type icons, IP links, and causal relationships Implements node type hero icon mapping based on normalized type strings and type IDs Provides HTML escaping, node reference actions, and focus-by-index navigation with optional local zoom Handles edge/node selection toggling and pick event routing for interactive graph selection	+191/-0
util.js `Netflow chart utilities and formatters` elixir/web-ng/assets/js/netflow_charts/util.js Utility functions for netflow chart rendering: SVG/overlay/tooltip management, time series normalization Implements `fmtNumber` and `fmtPct` formatters for abbreviated number display (G/M/K suffixes) Provides chart dimension calculation, color scale generation, and interactive legend building Includes time-based tooltip attachment with bisect-based data lookup and HTML escaping	+224/-0
rendering_style_edge_particle_methods.js `Packet flow particle rendering and styling` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.js Builds packet flow particle instances for edge visualization with directional flow support Calculates particle density, speed, color, and jitter based on edge utilization and zoom level Implements cyan-to-magenta color mixing based on utilization and bidirectional lane offset Caches particle data with stamp-based invalidation to avoid redundant recalculation	+146/-0
layout_cluster_methods.js `Graph clustering and layout transformation methods` elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.js Implements zoom tier resolution and graph reshaping for local/regional/global views Provides state-based clustering (by node state) and grid-based clustering (by spatial cell) Aggregates cluster edges with directional flow field preservation and topology class counting Generates cluster details from sample nodes with scope-aware labeling	+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 and tooltips Supports overlay lines (previous/revision comparisons) with distinct stroke styles and labels Implements series visibility toggling via legend clicks and responsive chart dimensions Uses `nfFormatRateValue` for unit-aware value formatting in tooltips	+195/-0
lifecycle_bootstrap_state_defaults_methods.js `God-view lifecycle state initialization defaults` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_state_defaults_methods.js Initializes comprehensive state object for god-view lifecycle with 40+ properties Sets up visualization layers (mantle, crust, atmosphere, security), topology filters, and animation state Configures channel reconnection parameters, reduced motion detection, and visual color palette Establishes default view state with zoom bounds and target position	+71/-0
PacketFlowLayer.js `Custom deck.gl layer for animated packet flow visualization` elixir/web-ng/assets/js/lib/deckgl/PacketFlowLayer.js New deck.gl custom layer implementation for rendering animated packet flow particles on network edges Implements vertex and fragment shaders for particle animation with time-based progression and fade effects Provides attribute management for particle properties (position, speed, size, color, jitter, lane offset) Includes bounds calculation and model lifecycle management	+194/-0
NetflowStacked100Chart.js `Stacked 100% area chart with composition overlays` elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js New stacked 100% area chart component for normalized time-series data visualization Supports composition overlays with dashed boundary lines for previous/reverse states Implements interactive legend with visibility toggling and responsive sizing Includes time-based tooltip with percentage formatting	+207/-0
lifecycle_dom_setup_methods.js `DOM setup and deck.gl initialization for god view` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js Initializes DOM structure for god view visualization with canvas and HUD panels Creates summary, details, and atmosphere overlay elements with styled containers Implements deck.gl instance creation with orthographic view and error handling Manages canvas resizing and event listener setup for pan/zoom interactions	+174/-0
renderer_deps.js `Dependency injection framework for god view architecture` elixir/web-ng/assets/js/lib/god_view/renderer_deps.js Defines dependency injection structure for god view rendering, layout, and lifecycle APIs Exports builder functions that wire dependencies between rendering, layout, and lifecycle contexts Provides JSDoc type definitions for all API contracts and dependency keys Enables modular composition of god view functionality	+154/-0
lifecycle_dom_interaction_methods.js `User interaction and animation loop management` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.js Implements animation loop with reduced motion preference detection and scaling Handles pan/drag interactions with threshold-based activation and pointer capture Manages wheel zoom with clamping and zoom tier resolution Syncs system and document-level theme preferences via media queries	+163/-0
JdmEditorHook.js `JDM editor integration with theme synchronization` elixir/web-ng/assets/js/hooks/JdmEditorHook.js React-based hook for JDM (Jdm Editor) integration with theme support Detects and syncs Phoenix theme changes (light/dark) with JDM editor Handles definition updates via LiveView events and re-renders on theme changes Manages React root lifecycle and cleanup on component destruction	+180/-0
NetflowGridChart.js `Multi-panel grid chart for time-series visualization` elixir/web-ng/assets/js/hooks/charts/NetflowGridChart.js Grid-based multi-panel chart for displaying multiple time-series simultaneously Dynamically calculates grid layout based on series count with responsive sizing Renders individual line charts in panels with shared legend and tooltip Supports series visibility toggling and rate value formatting	+141/-0
rendering_graph_layer_node_methods.js `Node and label layer construction for god view` 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 Supports conditional label rendering based on zoom shape (local/regional/global) Includes edge label rendering with coordinate system and billboard text	+130/-0
lifecycle_stream_snapshot_methods.js `Snapshot message parsing and graph update handling` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.js Handles binary snapshot message parsing with magic number validation Decodes Arrow-encoded graph data and manages topology transitions Extracts bitmap metadata for node state classification Publishes performance metrics and error telemetry via push events	+116/-0
NetflowLineSeriesChart.js `Multi-series line chart with overlay support` elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js Line chart for multiple time-series with support for overlay variants Handles previous/reverse series with custom dash patterns and opacity Implements interactive legend with series visibility toggling Includes time-based tooltip with rate value formatting	+130/-0
rendering_style_node_reason_methods.js `Node state reasoning and causal explanation generation` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.js Maps node state codes to display names and default reason messages Implements causal reason humanization with node reference resolution Builds neighbor-based affected node explanations Supports multiple causal reason types with hop distance and root tracking	+128/-0
rendering_graph_data_methods.js `Graph data preparation and visibility filtering` 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 computed metrics, labels, and state reasons Manages edge/node selection state and visibility tracking	+103/-0
god_view_exec_runtime.js `WebAssembly runtime engine for god view computations` elixir/web-ng/assets/js/wasm/god_view_exec_runtime.js WebAssembly engine wrapper for god view computation (state masks, traversal, interpolation) Implements memory allocation/deallocation for WASM data structures Provides streaming and fallback instantiation for WASM module loading Handles multiple WASM asset candidate paths for flexible deployment	+143/-0
SRQLTimeCookie.js `SRQL time token persistence and restoration` elixir/web-ng/assets/js/hooks/SRQLTimeCookie.js Manages SRQL time token persistence via cookies with debounced updates Extracts and upserts time tokens in query strings while preserving other parameters Restores time context from cookies on page load unless deep-linked 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 Provides force-directed graph layout algorithm using D3 simulation Generates geographic grid data for visualization overlay Handles fallback positioning for nodes without geo coordinates	+94/-0
lifecycle_stream_decode_methods.js `Arrow format decoding for graph stream data` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.js Decodes Apache Arrow binary format for graph data Parses node and edge information from IPC table format Handles optional float parsing with NaN fallback Extracts telemetry metrics (pps, flow, capacity) from encoded data	+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 Computes visibility masks based on filter state Implements three-hop traversal mask computation with fallback Provides WASM-accelerated or JavaScript fallback implementations	+127/-0
rendering_style_edge_telemetry_methods.js `Edge telemetry formatting and styling` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.js Formats packets-per-second with K/M unit abbreviation Formats capacity in compact G/M notation Computes edge colors based on utilization and packet flow Calculates edge width pixels from capacity and flow metrics Normalizes connection labels from edge metadata	+67/-0
TimeseriesCombinedChart.js `Multi-series timeseries chart with tooltips` elixir/web-ng/assets/js/hooks/charts/TimeseriesCombinedChart.js Implements interactive tooltip for multi-series timeseries charts Formats values by unit type (bytes, Hz, count per second) Tracks mouse position and displays hover line Handles cleanup on component destruction	+115/-0
rendering_tooltip_methods.js `Node and edge tooltip rendering` elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.js Generates node tooltips with IP, type, state, and geo information Formats edge telemetry in tooltips (pps, capacity) Handles hover state for nodes and edges with cursor updates Provides styled tooltip HTML with backdrop blur effects	+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 Formats values by unit type (bytes, Hz, count per second) Displays hover line and tooltip on mouse movement Manages event listener cleanup on destruction	+98/-0
layout_topology_state_methods.js `Topology state and layout preparation` elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.js Prepares graph layout with topology change detection Reuses previous node positions by ID across updates Determines layout mode (geo vs force-directed) based on coverage Computes topology stamp for efficient change tracking	+79/-0
SpatialSurveyMap.js `Spatial survey map visualization` elixir/web-ng/assets/js/hooks/SpatialSurveyMap.js Initializes deck.gl with hexagon and point cloud layers Aggregates RF coverage data using hexagon layer Renders LiDAR/Wi-Fi geometry with RSSI-based coloring Manages deck lifecycle with cleanup on destruction	+84/-0
window_events.js `Global window event handlers and utilities` elixir/web-ng/assets/js/utils/window_events.js Registers clipboard event handler with fallback copy implementation Implements YAML file download functionality Provides live reload development helpers for editor integration Enables server log streaming and click-to-edit features	+86/-0
layout_animation_methods.js `Layout animation and interpolation` elixir/web-ng/assets/js/lib/god_view/layout_animation_methods.js Animates node position transitions over 220ms duration Interpolates node coordinates with WASM acceleration or fallback Manages animation frame lifecycle and cancellation Buffers node positions for efficient interpolation	+78/-0
lifecycle_bootstrap_channel_event_methods.js `Channel event lifecycle management` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.js Registers snapshot channel event handlers Manages channel join with reconnection on failure Implements exponential backoff reconnection scheduling Handles channel down events with error reporting	+67/-0
formatters.js `Number formatting utilities` elixir/web-ng/assets/js/utils/formatters.js Exports `nfFormatBytes` for byte value abbreviation (TB/GB/MB/KB) Exports `nfFormatBits` for bit value abbreviation Exports `nfFormatCountPerSec` for rate formatting Exports `nfFormatRateValue` for unit-aware rate formatting	+39/-0
rendering_graph_view_methods.js `Graph viewport auto-fit methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_view_methods.js Auto-fits viewport to graph bounds with padding Calculates zoom level from node positions Updates deck.gl view state with centered target Integrates with zoom tier system	+46/-0
app.js `Application entry point and initialization` elixir/web-ng/assets/js/app.js Initializes Phoenix LiveSocket with CSRF token Registers custom hook modules Configures topbar progress indicator Registers global window events and live reload helpers	+51/-0
lifecycle_bootstrap_runtime_methods.js `Lifecycle runtime bootstrap methods` 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 event listeners Initializes WASM engine with error handling	+65/-0
rendering_style_node_visual_methods.js `Node visual styling methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_visual_methods.js Formats node metric text (cluster count or pps) Maps node state to visual colors Provides operational status icons and colors Normalizes display labels with fallback handling	+37/-0
GodViewRenderer.js `GodViewRenderer main orchestrator` elixir/web-ng/assets/js/lib/GodViewRenderer.js Initializes layout, rendering, and lifecycle engines Builds dependency maps for each engine Composes context API from engine APIs Delegates mount/update/destroy to lifecycle controller	+46/-0
rendering_style_edge_topology_methods.js `Edge topology classification and filtering` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.js Validates and normalizes edge topology class values Determines edge visibility based on topology layer filters Supports both class count maps and explicit class filtering	+28/-0
index.js `Custom hooks module exports` elixir/web-ng/assets/js/hooks/index.js Exports all custom hook modules for LiveView integration Includes chart hooks (timeseries, combined, netflow variants) Includes god_view and spatial survey hooks	+33/-0

Tests

25 files

lifecycle_stream_decode_methods.test.js `Tests for Arrow graph stream decoding methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.test.js Comprehensive test suite for Arrow IPC graph decoding with mocked `tableFromIPC` Tests explicit edge topology metadata, directional flow fields, optional column handling, and null geo coordinates Validates preservation of backend edge multiplicity and unstable directional links without reshaping Covers canonical edge field defaults and telemetry eligibility flags	+286/-0
rendering_graph_data_methods.test.js `Tests for graph data rendering methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.test.js Test suite for visible graph data building with node/edge filtering and label normalization Validates traversal mask application, cluster shape handling, and telemetry eligibility preservation Tests edge multiplicity preservation for identical endpoints and directional flow field mapping Covers stale edge key cleanup and selected node resolution	+191/-0
layout_cluster_methods.test.js `Tests for graph layout clustering methods` elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.test.js Test suite for zoom tier resolution, state-based and grid-based clustering transformations Validates cluster aggregation of node metrics (pps, operUp, state histogram) and edge consolidation Tests directional telemetry preservation with canonical cluster orientation and topology class counting Covers reshape routing to tier-specific transformations based on zoom mode	+157/-0
rendering_style_edge_particle_methods.test.js `Tests for packet flow particle generation and rendering` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.test.js Comprehensive test suite for packet flow particle generation with visibility floor enforcement Tests particle count bounding for large edge sets and telemetry eligibility filtering Validates directional lane rendering and density biasing based on flow ratios Tests zoom tier scaling effects on particle density	+176/-0
renderer_deps.test.js `Tests for dependency injection builders` elixir/web-ng/assets/js/lib/god_view/renderer_deps.test.js Tests for dependency builder functions ensuring correct forwarding between contexts Validates that all required dependency keys are present in built objects Mocks context namespaces to verify proper delegation patterns Confirms layout, rendering, and lifecycle dependencies are correctly wired	+87/-0
rendering_selection_methods.test.js `Tests for node selection and detail rendering` elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.test.js Tests for node detail card rendering with IP, metadata, and state information Validates fallback values for missing node detail fields Tests node selection toggling and detail panel visibility management Verifies HTML rewriting optimization to avoid redundant DOM updates	+144/-0
lifecycle_bootstrap_event_methods.test.js `Tests for lifecycle event bootstrap and registration` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_event_methods.test.js Tests for event registration wiring (filter, zoom, layer, reset view) Validates filter updates trigger graph re-rendering Tests zoom mode transitions and view state updates Verifies reset view clears camera lock and triggers auto-fit	+123/-0
lifecycle_dom_interaction_methods.test.js `Tests for DOM interaction and animation loop` 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 prevents accidental drags on clicks Tests media query subscription for reduced motion preference changes Verifies pointer capture and cursor state management during interactions	+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 and tooltip/hover/click routing Validates details panel click handling for device navigation Tests node focus actions via data attributes Verifies tooltip panel link navigation	+119/-0
rendering_graph_bitmap_methods.test.js `Bitmap and mask computation tests` elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.test.js Tests bitmap metadata fallback derivation from node states Validates metadata preservation when provided Tests three-hop traversal mask computation Verifies visibility mask respects filter state	+97/-0
rendering_graph_layer_transport_methods.test.js `Transport layer and effect 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 particles Validates additive blend settings for particle effects Tests layer toggle behavior for atmosphere particles	+73/-0
layout_topology_state_methods.test.js `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 Validates position reuse across graph updates Tests geographic layout eligibility based on coverage Verifies layout mode selection and revision tracking	+97/-0
layout_topology_algorithm_methods.test.js `Layout algorithm tests` elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.test.js Tests geographic projection with deterministic fallback positions Validates force-directed layout bounds and node positioning Tests small graph passthrough behavior Verifies geographic grid data generation	+96/-0
rendering_tooltip_methods.test.js `Tooltip rendering tests` elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.test.js Tests node tooltip rendering with device details Validates fallback display for missing node information Tests hover cursor state updates for nodes and edges	+87/-0
lifecycle_stream_snapshot_methods.test.js `Snapshot stream parsing tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.test.js Tests binary snapshot frame parsing with header validation Validates bitmap metadata extraction from frames Tests base64-encoded snapshot message parsing Verifies magic number validation for frame integrity	+62/-0
lifecycle_bootstrap_channel_event_methods.test.js `Channel event lifecycle tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.test.js Tests snapshot channel join success and error handling Validates reconnection scheduling on join failure Tests channel reconnection with cleanup	+79/-0
GodViewRenderer.test.js `GodViewRenderer integration tests` elixir/web-ng/assets/js/lib/god_view/GodViewRenderer.test.js Tests context API registration from engine APIs Validates update delegation to state.updated Tests mount and 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 are declared in dependency maps Ensures no unused dependency declarations exist Scans rendering and lifecycle method files for contract violations	+70/-0
rendering_style_edge_telemetry_methods.test.js `Edge telemetry formatting tests` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.test.js Tests pps formatting with K/M unit abbreviation Tests capacity formatting with compact G/M notation Validates edge width increases with utilization Tests color channel bounds and RGBA tuple format Tests connection label normalization	+43/-0
rendering_style_edge_topology_methods.test.js `Edge topology styling tests` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.test.js Tests edge topology class validation and normalization Tests topology layer filtering with class counts Tests fallback to explicit class when counts absent	+41/-0
rendering_style_node_reason_methods.test.js `Node state reason tests` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.test.js Tests state reason generation for root-cause nodes Tests affected node dependency reason derivation Tests causal reason humanization with hop distance	+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 methods use explicit `this.state` and `this.deps` namespaces Prevents flat runtime references like `this.someProperty` Scans rendering and lifecycle method files for violations	+47/-0
GodViewRenderer_contracts.test.js `GodViewRenderer contract tests` elixir/web-ng/assets/js/lib/god_view/GodViewRenderer_contracts.test.js Tests engine context APIs have no method name collisions Validates required runtime methods are provided by engines	+48/-0
rendering_graph_layer_node_methods.test.js `Node layer rendering tests` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_node_methods.test.js Tests node and label layer building Validates node labels are pickable for interaction	+31/-0
GodViewLifecycleController_api_contract.test.js `Lifecycle controller API contract tests` elixir/web-ng/assets/js/lib/god_view/GodViewLifecycleController_api_contract.test.js Tests lifecycle controller exposes all lifecycle methods Validates mount/destroy delegation to composed handlers	+34/-0

Configuration changes

1 files

eslint.config.js

ESLint configuration with god view code patterns

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

ESLint configuration with module and browser globals support
Enforces this.state and this.deps usage patterns in god view methods
Restricts deprecated runtime_refs imports and direct property access
Defines comprehensive list of state properties with helpful error
messages

+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: #2959 Original author: @mfreeman451 Original URL: https://github.com/carverauto/serviceradar/pull/2959 Original created: 2026-03-01T03:46:12Z Original updated: 2026-03-01T03:50:43Z Original head: carverauto/serviceradar:2371-analytics-stats-cards-should-abbreviate-numbers Original base: staging --- ### **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 ___ ### **Description** - Comprehensive implementation of a god-view network topology visualization system with deck.gl and D3 - New packet flow particle animation layer with custom WebGL shaders for animated network edge visualization - Multiple netflow chart components (stacked area, stacked 100%, grid, line series, Sankey diagram) with abbreviated number formatting - Graph layout algorithms including Mercator projection, force-directed layout, and clustering transformations - Node and edge rendering with interactive tooltips, selection, and state-based styling - Arrow binary format decoding for efficient graph data streaming with WASM acceleration - Comprehensive test coverage for all major rendering, layout, and lifecycle components - ESLint configuration enforcing god-view code patterns and dependency injection contracts - Theme-aware Mapbox GL integration and JDM editor hook with Phoenix LiveView synchronization - Utility functions for number formatting (bytes, bits, rates) with K/M/G/T abbreviations ___ ### Diagram Walkthrough ```mermaid flowchart LR A["Graph Data Arrow IPC"] -->|"Decode"| B["Graph State Nodes/Edges"] B -->|"Layout"| C["Positioned Topology"] C -->|"Render"| D["Deck.gl Layers Nodes/Edges/Particles"] E["Netflow Data"] -->|"Format"| F["Chart Components Area/Grid/Sankey"] G["User Input Pan/Zoom/Select"] -->|"Handle"| H["View State Camera/Selection"] H -->|"Update"| D I["WASM Engine"] -->|"Accelerate"| B I -->|"Interpolate"| C ``` <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>43 files</summary><table> <tr> <td> <details> <summary>NetflowSankeyChart.js<dd><code>D3 Sankey chart hook for netflow visualization</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js <ul><li>New D3-based Sankey diagram visualization for netflow data with 3-column layout (source, middle, destination) <li> Implements interactive tooltips, edge/node highlighting, and graceful degradation for circular link detection <li> Supports dynamic resizing via ResizeObserver and formats byte values with <code>formatBytes</code> helper <li> Handles both 3-hop and 2-hop (degraded) graph layouts with color-coded groups</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 methods</code>                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js <ul><li>Builds deck.gl transport visualization layers (mantle, crust, atmosphere, security) with zoom-aware scaling <li> Implements packet flow particle rendering with fallback ScatterplotLayer for shader-disabled browsers <li> Calculates dynamic particle density, speed, and color based on edge utilization and zoom level <li> Supports geo-grid base layer with animated sweep wave effect</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-f08b4f5d106f54747fbb0635896e73090396a5734363ddaaf7a93bb3ce608ce9">+260/-0</a>  </td> </tr> <tr> <td> <details> <summary>MapboxFlowMap.js<dd><code>Mapbox GL flow map visualization hook</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, popup labels, and animated flow lines between source/destination pairs <li> Implements theme detection via computed color-scheme, data-theme attribute, and OS preference fallback <li> Handles map initialization, token validation, and responsive resizing with error recovery</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1">+309/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_selection_methods.js<dd><code>Node selection and detail rendering methods</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js <ul><li>Renders node detail panels with device info, type icons, IP links, and causal relationships <li> Implements node type hero icon mapping based on normalized type strings and type IDs <li> Provides HTML escaping, node reference actions, and focus-by-index navigation with optional local zoom <li> Handles edge/node selection toggling and pick event routing for interactive graph selection</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-0da723c3f5b16409d7b5a10013bec415a4d9326e4d752e931bb2bba6792024d3">+191/-0</a>  </td> </tr> <tr> <td> <details> <summary>util.js<dd><code>Netflow chart utilities and formatters</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/netflow_charts/util.js <ul><li>Utility functions for netflow chart rendering: SVG/overlay/tooltip management, time series normalization <li> Implements <code>fmtNumber</code> and <code>fmtPct</code> formatters for abbreviated number display (G/M/K suffixes) <li> Provides chart dimension calculation, color scale generation, and interactive legend building <li> Includes time-based tooltip attachment with bisect-based data lookup and HTML escaping</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-dcfc73a9dbe3d9f021a10cada76e3b72894375ebcee019ad00a111c3e429ef24">+224/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_particle_methods.js<dd><code>Packet flow particle rendering and styling</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.js <ul><li>Builds packet flow particle instances for edge visualization with directional flow support <li> Calculates particle density, speed, color, and jitter based on edge utilization and zoom level <li> Implements cyan-to-magenta color mixing based on utilization and bidirectional lane offset <li> Caches particle data with stamp-based invalidation to avoid redundant recalculation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-600ea8206fafee5e8351fe463190a1dce3d3feb010dbda969a551d8afc6a8845">+146/-0</a>  </td> </tr> <tr> <td> <details> <summary>layout_cluster_methods.js<dd><code>Graph clustering and layout transformation methods</code>              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.js <ul><li>Implements zoom tier resolution and graph reshaping for local/regional/global views <li> Provides state-based clustering (by node state) and grid-based clustering (by spatial cell) <li> Aggregates cluster edges with directional flow field preservation and topology class counting <li> Generates cluster details from sample nodes with scope-aware labeling</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 and tooltips <li> Supports overlay lines (previous/revision comparisons) with distinct stroke styles and labels <li> Implements series visibility toggling via legend clicks and responsive chart dimensions <li> Uses <code>nfFormatRateValue</code> for unit-aware value formatting in tooltips</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9fa93b4c4ca0213f2295f2cb318766449b02b7fc59efda96a02273f5f12b76b3">+195/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_state_defaults_methods.js<dd><code>God-view lifecycle state initialization 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 for god-view lifecycle with 40+ properties <li> Sets up visualization layers (mantle, crust, atmosphere, security), topology filters, and animation state <li> Configures channel reconnection parameters, reduced motion detection, and visual color palette <li> Establishes default view state with zoom bounds and target position</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-49498b418277e7f81c0ab90fdf023ebf09b0c5e4cbf3228fe4533582cc4fa793">+71/-0</a>    </td> </tr> <tr> <td> <details> <summary>PacketFlowLayer.js<dd><code>Custom deck.gl layer for animated packet flow visualization</code></dd></summary> <hr> elixir/web-ng/assets/js/lib/deckgl/PacketFlowLayer.js <ul><li>New deck.gl custom layer implementation for rendering animated packet flow particles on network edges <li> Implements vertex and fragment shaders for particle animation with time-based progression and fade effects <li> Provides attribute management for particle properties (position, speed, size, color, jitter, lane offset) <li> Includes bounds calculation and model lifecycle management</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-15defec05e50ed91f6f77defa8c5e44678c121ab3404c457041fafce4c4010dd">+194/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowStacked100Chart.js<dd><code>Stacked 100% area chart with composition overlays</code>                </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js <ul><li>New stacked 100% area chart component for normalized time-series data visualization <li> Supports composition overlays with dashed boundary lines for previous/reverse states <li> Implements interactive legend with visibility toggling and responsive sizing <li> Includes time-based tooltip with percentage formatting</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-67815c89effaf41060f95649ad3b755855bfa0ed7a9b77a9f1a9e72ebb73cd53">+207/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_setup_methods.js<dd><code>DOM setup and deck.gl initialization for god view</code>                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js <ul><li>Initializes DOM structure for god view visualization with canvas and HUD panels <li> Creates summary, details, and atmosphere overlay elements with styled containers <li> Implements deck.gl instance creation with orthographic view and error handling <li> Manages canvas resizing and event listener setup for pan/zoom interactions</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-7b88fcb183a776c3df89b3352962b5cc6164d2302a74d211fb3fe4df9776cdd7">+174/-0</a>  </td> </tr> <tr> <td> <details> <summary>renderer_deps.js<dd><code>Dependency injection framework for god view architecture</code>  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/renderer_deps.js <ul><li>Defines dependency injection structure for god view rendering, layout, and lifecycle APIs <li> Exports builder functions that wire dependencies between rendering, layout, and lifecycle contexts <li> Provides JSDoc type definitions for all API contracts and dependency keys <li> Enables modular composition of god view functionality</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-82c008c8660a2f54dc96f367cd873d87617e03d2c5d73fe47e272e8118965f96">+154/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_interaction_methods.js<dd><code>User interaction and animation loop management</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 and scaling <li> Handles pan/drag interactions with threshold-based activation and pointer capture <li> Manages wheel zoom with clamping and zoom tier resolution <li> Syncs system and document-level theme preferences via media queries</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-5c0eff9cfe6721820096aafcdebaf44618c7f7395aeb7d0d85d30411153b226b">+163/-0</a>  </td> </tr> <tr> <td> <details> <summary>JdmEditorHook.js<dd><code>JDM editor integration with theme synchronization</code>                </dd></summary> <hr> elixir/web-ng/assets/js/hooks/JdmEditorHook.js <ul><li>React-based hook for JDM (Jdm Editor) integration with theme support <li> Detects and syncs Phoenix theme changes (light/dark) with JDM editor <li> Handles definition updates via LiveView events and re-renders on theme changes <li> Manages React root lifecycle and cleanup on component destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-e82967d2468cd02bd7524d51bcd9e22d9432b4d0afd882442515c7a814ae18f8">+180/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowGridChart.js<dd><code>Multi-panel grid chart for time-series visualization</code>          </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowGridChart.js <ul><li>Grid-based multi-panel chart for displaying multiple time-series simultaneously <li> Dynamically calculates grid layout based on series count with responsive sizing <li> Renders individual line charts in panels with shared legend and tooltip <li> Supports series visibility toggling and rate value formatting</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a3d26de99ec52c9222b58e879c553dd3014874ff3131341444e2d41f81846978">+141/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_node_methods.js<dd><code>Node and label layer construction for god view</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> Supports conditional label rendering based on zoom shape (local/regional/global) <li> Includes edge label rendering with coordinate system and billboard text</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-02e76c3e46ce4ed59adf0eee36f164f7ac893c57c449ae51c6216da9effeb669">+130/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_snapshot_methods.js<dd><code>Snapshot message parsing and graph update handling</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-encoded graph data and manages topology transitions <li> Extracts bitmap metadata for node state classification <li> Publishes performance metrics and error telemetry via push events</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9a21f74b0dc5f6b40f4709f68aeb71c163304418c64730971113b5dda883c3e8">+116/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowLineSeriesChart.js<dd><code>Multi-series line chart with overlay support</code>                          </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js <ul><li>Line chart for multiple time-series with support for overlay variants <li> Handles previous/reverse series with custom dash patterns and opacity <li> Implements interactive legend with series visibility toggling <li> Includes time-based tooltip with rate value formatting</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-b078a99dbb234d0c9b13ca8d36e57696e70a4bbb9213f31a2de2c17935ad8074">+130/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_node_reason_methods.js<dd><code>Node state reasoning and causal explanation generation</code>      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.js <ul><li>Maps node state codes to display names and default reason messages <li> Implements causal reason humanization with node reference resolution <li> Builds neighbor-based affected node explanations <li> Supports multiple causal reason types with hop distance and root tracking</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a101faf6c2ab405b3e8e5ee716d3e0f3c1a45d30b06431dc5c80e38fc6219e24">+128/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_data_methods.js<dd><code>Graph data preparation and visibility filtering</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 computed metrics, labels, and state reasons <li> Manages edge/node selection state and visibility tracking</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-e3a1a5957e905a23e88ec6df58ab4e412d9fde18a7e1f2bdcc4eba762169c81d">+103/-0</a>  </td> </tr> <tr> <td> <details> <summary>god_view_exec_runtime.js<dd><code>WebAssembly runtime engine for god view computations</code>          </dd></summary> <hr> elixir/web-ng/assets/js/wasm/god_view_exec_runtime.js <ul><li>WebAssembly engine wrapper for god view computation (state masks, traversal, interpolation) <li> Implements memory allocation/deallocation for WASM data structures <li> Provides streaming and fallback instantiation for WASM module loading <li> Handles multiple WASM asset candidate paths for flexible deployment</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-260fc3e54b302b1db5eb289839debd050cc277ee10ae5ea5be1d4606085916a2">+143/-0</a>  </td> </tr> <tr> <td> <details> <summary>SRQLTimeCookie.js<dd><code>SRQL time token persistence and restoration</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/hooks/SRQLTimeCookie.js <ul><li>Manages SRQL time token persistence via cookies with debounced updates <li> Extracts and upserts time tokens in query strings while preserving other parameters <li> Restores time context from cookies on page load unless deep-linked <li> Syncs input value on LiveView updates when not focused</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 <li> Provides force-directed graph layout algorithm using D3 simulation <li> Generates geographic grid data for visualization overlay <li> Handles fallback positioning for nodes without geo coordinates</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-4aab4890dac906881177d8cf9fb9f17b45c822c49e151c1f5a19ed727d17a5f5">+94/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_decode_methods.js<dd><code>Arrow format decoding for graph stream data</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.js <ul><li>Decodes Apache Arrow binary format for graph data <li> Parses node and edge information from IPC table format <li> Handles optional float parsing with NaN fallback <li> Extracts telemetry metrics (pps, flow, capacity) from encoded data</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 <li> Computes visibility masks based on filter state <li> Implements three-hop traversal mask computation with fallback <li> Provides WASM-accelerated or JavaScript fallback implementations</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9d624021610bf96661bcc1f75a59bb1644e7d2623d6087fffbfcbdb35a54a231">+127/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_telemetry_methods.js<dd><code>Edge telemetry formatting and styling</code>                                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.js <ul><li>Formats packets-per-second with K/M unit abbreviation <li> Formats capacity in compact G/M notation <li> Computes edge colors based on utilization and packet flow <li> Calculates edge width pixels from capacity and flow metrics <li> Normalizes connection labels from edge metadata</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-85211e2b105986f6daf8fffe131ccf5d1bba214c9a442f93c594abd4d97d3362">+67/-0</a>    </td> </tr> <tr> <td> <details> <summary>TimeseriesCombinedChart.js<dd><code>Multi-series timeseries chart with tooltips</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/TimeseriesCombinedChart.js <ul><li>Implements interactive tooltip for multi-series timeseries charts <li> Formats values by unit type (bytes, Hz, count per second) <li> Tracks mouse position and displays hover line <li> Handles cleanup on component destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-09abac7a6d77b7fc8de16307bb50f8f8d6c06e1fb5a427a906a78cacc3f69023">+115/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_tooltip_methods.js<dd><code>Node and edge tooltip rendering</code>                                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.js <ul><li>Generates node tooltips with IP, type, state, and geo information <li> Formats edge telemetry in tooltips (pps, capacity) <li> Handles hover state for nodes and edges with cursor updates <li> Provides styled tooltip HTML with backdrop blur effects</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 <li> Formats values by unit type (bytes, Hz, count per second) <li> Displays hover line and tooltip on mouse movement <li> Manages event listener cleanup on destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-779cd674fb614c68004da9b1df18c42171d0b89adf5b10610b151c48fa00220a">+98/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_state_methods.js<dd><code>Topology state and layout preparation</code>                                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.js <ul><li>Prepares graph layout with topology change detection <li> Reuses previous node positions by ID across updates <li> Determines layout mode (geo vs force-directed) based on coverage <li> Computes topology stamp for efficient change tracking</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-00e8d04a83ab66301ae0097cd9066a3ac8e4a5648f29da584fb31712cb95ce5c">+79/-0</a>    </td> </tr> <tr> <td> <details> <summary>SpatialSurveyMap.js<dd><code>Spatial survey map visualization</code>                                                  </dd></summary> <hr> elixir/web-ng/assets/js/hooks/SpatialSurveyMap.js <ul><li>Initializes deck.gl with hexagon and point cloud layers <li> Aggregates RF coverage data using hexagon layer <li> Renders LiDAR/Wi-Fi geometry with RSSI-based coloring <li> Manages deck lifecycle with cleanup on destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 clipboard event handler with fallback copy implementation <li> Implements YAML file download functionality <li> Provides live reload development helpers for editor integration <li> Enables server log streaming and click-to-edit features</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-35dea0eeb869197487529f2afe536078d3a5e747a2ffc25b060c06e6609fae13">+86/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_animation_methods.js<dd><code>Layout animation and interpolation</code>                                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_animation_methods.js <ul><li>Animates node position transitions over 220ms duration <li> Interpolates node coordinates with WASM acceleration or fallback <li> Manages animation frame lifecycle and cancellation <li> Buffers node positions for efficient interpolation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-13096ca0c3eae3051dccae12e824a064672a39e89bbf36e214280653364e3c84">+78/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_channel_event_methods.js<dd><code>Channel event lifecycle management</code>                                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.js <ul><li>Registers snapshot channel event handlers <li> Manages channel join with reconnection on failure <li> Implements exponential backoff reconnection scheduling <li> Handles channel down events with error reporting</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-17663bc2be665cee79b451031bdde511352490e5d3cb80a452f2b2c26ebc01fe">+67/-0</a>    </td> </tr> <tr> <td> <details> <summary>formatters.js<dd><code>Number formatting utilities</code>                                                            </dd></summary> <hr> elixir/web-ng/assets/js/utils/formatters.js <ul><li>Exports <code>nfFormatBytes</code> for byte value abbreviation (TB/GB/MB/KB) <li> Exports <code>nfFormatBits</code> for bit value abbreviation <li> Exports <code>nfFormatCountPerSec</code> for rate formatting <li> Exports <code>nfFormatRateValue</code> for unit-aware rate formatting</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-751d34dd16d665a0b5c99657621fab90a6b5ce22ba36ace171b0b38dddfda8c4">+39/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_view_methods.js<dd><code>Graph viewport auto-fit methods</code>                                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_view_methods.js <ul><li>Auto-fits viewport to graph bounds with padding <li> Calculates zoom level from node positions <li> Updates deck.gl view state with centered target <li> Integrates with zoom tier system</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-689b6926213e710431fc733ceab6101dd79c7c6d1bdeaa28b1c81c8e5ae65853">+46/-0</a>    </td> </tr> <tr> <td> <details> <summary>app.js<dd><code>Application entry point and initialization</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/app.js <ul><li>Initializes Phoenix LiveSocket with CSRF token <li> Registers custom hook modules <li> Configures topbar progress indicator <li> Registers global window events and live reload helpers</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-cb037e30725231d82e904a1dccdbcb4a7a5c3c58f410627748c353dec4d40d3d">+51/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_runtime_methods.js<dd><code>Lifecycle runtime bootstrap methods</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 event listeners <li> Initializes WASM engine with error handling</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-3e673dd32f1bf9f77ba8197070cdc6b0755870128d17367437f6eb10e9ba483c">+65/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_node_visual_methods.js<dd><code>Node visual styling methods</code>                                                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_visual_methods.js <ul><li>Formats node metric text (cluster count or pps) <li> Maps node state to visual colors <li> Provides operational status icons and colors <li> Normalizes display labels with fallback handling</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-3c6dfa538e53340167239c9075402bf66cc7424e5cee1616af25187bca03a787">+37/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewRenderer.js<dd><code>GodViewRenderer main orchestrator</code>                                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/GodViewRenderer.js <ul><li>Initializes layout, rendering, and lifecycle engines <li> Builds dependency maps for each engine <li> Composes context API from engine APIs <li> Delegates mount/update/destroy to lifecycle controller</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-be58eb4282b96e8d60a9faf38d2cdadeeb9f9979a7ea0fc14b2b332e4d8d0b07">+46/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_topology_methods.js<dd><code>Edge topology classification and filtering</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.js <ul><li>Validates and normalizes edge topology class values <li> Determines edge visibility based on topology layer filters <li> Supports both class count maps and explicit class filtering</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-bdfd91b4b7fc1c49d634f3ace2770efc47c70afdd10de0c569ae6576681959c8">+28/-0</a>    </td> </tr> <tr> <td> <details> <summary>index.js<dd><code>Custom hooks module exports</code>                                                            </dd></summary> <hr> elixir/web-ng/assets/js/hooks/index.js <ul><li>Exports all custom hook modules for LiveView integration <li> Includes chart hooks (timeseries, combined, netflow variants) <li> Includes god_view and spatial survey hooks</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2f139acfcae15dd7a53594d532e4c1fd679218dcfd91915486376dfe3d3a559a">+33/-0</a>    </td> </tr> </table></details></td></tr><tr><td>Tests</td><td><details><summary>25 files</summary><table> <tr> <td> <details> <summary>lifecycle_stream_decode_methods.test.js<dd><code>Tests for Arrow graph stream decoding methods</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>tableFromIPC</code> <li> Tests explicit edge topology metadata, directional flow fields, optional column handling, and null geo coordinates <li> Validates preservation of backend edge multiplicity and unstable directional links without reshaping <li> Covers canonical edge field defaults and telemetry eligibility flags</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 methods</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.test.js <ul><li>Test suite for visible graph data building with node/edge filtering and label normalization <li> Validates traversal mask application, cluster shape handling, and telemetry eligibility preservation <li> Tests edge multiplicity preservation for identical endpoints and directional flow field mapping <li> Covers stale edge key cleanup and selected node resolution</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-246ee40e8a48d994500950f4d4cb5ced465878a9c5d08d195d86e10b780f5829">+191/-0</a>  </td> </tr> <tr> <td> <details> <summary>layout_cluster_methods.test.js<dd><code>Tests for graph layout clustering methods</code>                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.test.js <ul><li>Test suite for zoom tier resolution, state-based and grid-based clustering transformations <li> Validates cluster aggregation of node metrics (pps, operUp, state histogram) and edge consolidation <li> Tests directional telemetry preservation with canonical cluster orientation and topology class counting <li> Covers reshape routing to tier-specific transformations based on zoom mode</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-1e48ef35b41d1efac555cd8fa55854ac35f408ce9f5b49f9d2999932527cfe3d">+157/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_particle_methods.test.js<dd><code>Tests for packet flow particle generation and rendering</code>    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.test.js <ul><li>Comprehensive test suite for packet flow particle generation with visibility floor enforcement <li> Tests particle count bounding for large edge sets and telemetry eligibility filtering <li> Validates directional lane rendering and density biasing based on flow ratios <li> Tests zoom tier scaling effects on particle density</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-202c29e2f939676af0dfc5965c94eac84b9bd64fe1602d507ed5b452105552d7">+176/-0</a>  </td> </tr> <tr> <td> <details> <summary>renderer_deps.test.js<dd><code>Tests for dependency injection builders</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/renderer_deps.test.js <ul><li>Tests for dependency builder functions ensuring correct forwarding between contexts <li> Validates that all required dependency keys are present in built objects <li> Mocks context namespaces to verify proper delegation patterns <li> Confirms layout, rendering, and lifecycle dependencies are correctly wired</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9a2a5297d0d34eb0c73eaecdb46382579b81616cc170ad2c77c294a893bddc0e">+87/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_selection_methods.test.js<dd><code>Tests for node selection and detail rendering</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.test.js <ul><li>Tests for node detail card rendering with IP, metadata, and state information <li> Validates fallback values for missing node detail fields <li> Tests node selection toggling and detail panel visibility management <li> Verifies HTML rewriting optimization to avoid redundant DOM updates</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-f2b9a06780f26ecf38943edb80833f7eaf265fb17703456481e56bb85270b14e">+144/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_event_methods.test.js<dd><code>Tests for lifecycle event bootstrap and registration</code>          </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_event_methods.test.js <ul><li>Tests for event registration wiring (filter, zoom, layer, reset view) <li> Validates filter updates trigger graph re-rendering <li> Tests zoom mode transitions and view state updates <li> Verifies reset view clears camera lock and triggers auto-fit</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-7f28d4f46c4d0ddddab54637b8331ca1a32ac2e23c13a583da4679435c3f89c5">+123/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_interaction_methods.test.js<dd><code>Tests for DOM interaction and animation loop</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 prevents accidental drags on clicks <li> Tests media query subscription for reduced motion preference changes <li> Verifies pointer capture and cursor state management during interactions</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 and tooltip/hover/click routing <li> Validates details panel click handling for device navigation <li> Tests node focus actions via data attributes <li> Verifies tooltip panel link navigation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-8168f28155850402d3efe1dddae856dfed72f5659a9ae373980f216daba3ddca">+119/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_bitmap_methods.test.js<dd><code>Bitmap and mask computation 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 states <li> Validates metadata preservation when provided <li> Tests three-hop traversal mask computation <li> Verifies visibility mask respects filter state</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-c562d2a82d2192cf149046f4215aedddf22411d3ce733ef7ae5e94260424026a">+97/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_transport_methods.test.js<dd><code>Transport layer and effect 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 particles <li> Validates additive blend settings for particle effects <li> Tests layer toggle behavior for atmosphere particles</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2e0d605d92e46a0432f7aeba75c8e514a745271465daa1ccb5eced7293f7f92e">+73/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_state_methods.test.js<dd><code>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 <li> Validates position reuse across graph updates <li> Tests geographic layout eligibility based on coverage <li> Verifies layout mode selection and revision tracking</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-d4b6a4864a14fde003cf98c3da46578c9fd7523b0d92deb905c9fc9d32dbdb53">+97/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_algorithm_methods.test.js<dd><code>Layout algorithm tests</code>                                                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.test.js <ul><li>Tests geographic projection with deterministic fallback positions <li> Validates force-directed layout bounds and node positioning <li> Tests small graph passthrough behavior <li> Verifies geographic grid data generation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-7f87b206728c13d1467c94cb289b0a2b12f28a0fbc462affa085b7a9ffa752fe">+96/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_tooltip_methods.test.js<dd><code>Tooltip rendering tests</code>                                                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.test.js <ul><li>Tests node tooltip rendering with device details <li> Validates fallback display for missing node information <li> Tests hover cursor state updates for nodes and edges</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-d0f8f6e1d8c43986a937fab97b507f6323611d6bf4fe70701b22e02ec50ea546">+87/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_snapshot_methods.test.js<dd><code>Snapshot stream parsing 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 <li> Validates bitmap metadata extraction from frames <li> Tests base64-encoded snapshot message parsing <li> Verifies magic number validation for frame integrity</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-981af57f660dd63edc6665257e2a63f331fb07fca2536f1ba2445ed21e0a9b85">+62/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_channel_event_methods.test.js<dd><code>Channel event lifecycle 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 and error handling <li> Validates reconnection scheduling on join failure <li> Tests channel reconnection with cleanup</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 context API registration from engine APIs <li> Validates update delegation to state.updated <li> Tests mount and destroy delegation to lifecycle controller</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 are declared in dependency maps <li> Ensures no unused dependency declarations exist <li> Scans rendering and lifecycle method files for contract violations</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2370dff32696048ffd13368ec06377d6e20ac6cb824ce5638615ed0b1ee582fe">+70/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_telemetry_methods.test.js<dd><code>Edge telemetry formatting tests</code>                                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.test.js <ul><li>Tests pps formatting with K/M unit abbreviation <li> Tests capacity formatting with compact G/M notation <li> Validates edge width increases with utilization <li> Tests color channel bounds and RGBA tuple format <li> Tests connection label normalization</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9a6094620b99db61b9165065c1abd52cded7ca7c2dc585d2fe21255220289035">+43/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_topology_methods.test.js<dd><code>Edge topology styling 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 and normalization <li> Tests topology layer filtering with class counts <li> Tests fallback to explicit class when counts absent</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-fa5f95fc6639415187cf8fafe41d3fcd31f5f4de1fb6e79482b88215dd9d5c58">+41/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_node_reason_methods.test.js<dd><code>Node state reason 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 nodes <li> Tests affected node dependency reason derivation <li> Tests causal reason humanization with hop distance</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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 methods use explicit <code>this.state</code> and <code>this.deps</code> namespaces <li> Prevents flat runtime references like <code>this.someProperty</code> <li> Scans rendering and lifecycle method files for violations</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-8926390b8e2c3ce7966c887820e7d6147a874ab41d0f93f30799225fba1e87c4">+47/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewRenderer_contracts.test.js<dd><code>GodViewRenderer contract tests</code>                                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/GodViewRenderer_contracts.test.js <ul><li>Tests engine context APIs have no method name collisions <li> Validates required runtime methods are provided by engines</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a7f656a7995427920fc180c0490684b460e8c091bec797cb963c9d4896e85c42">+48/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_node_methods.test.js<dd><code>Node layer rendering tests</code>                                                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_node_methods.test.js <ul><li>Tests node and label layer building <li> Validates node labels are pickable for interaction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-b0f9c9968dc909a1727f78985b213a35e10d123f83cadba3a11ad7571600d86a">+31/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewLifecycleController_api_contract.test.js<dd><code>Lifecycle controller API contract tests</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/GodViewLifecycleController_api_contract.test.js <ul><li>Tests lifecycle controller exposes all lifecycle methods <li> Validates mount/destroy delegation to composed handlers</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-cb3fdaff95179aef448551f0fff059268d25f5fb7c6fb7f22937e1a766472591">+34/-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 god view code patterns</code>                  </dd></summary> <hr> elixir/web-ng/assets/eslint.config.js <ul><li>ESLint configuration with module and browser globals support <li> Enforces <code>this.state</code> and <code>this.deps</code> usage patterns in god view methods <li> Restricts deprecated <code>runtime_refs</code> imports and direct property access <li> Defines comprehensive list of state properties with helpful error messages</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/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/2959/files#diff-a5641cd37d6ad98b32cdfce1980836cc68312277bc6a7052f55da02ada5bc6cf">+2/-0</a>      </td> </tr> <tr> <td>.bazelrc</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-544556920c45b42cbfe40159b082ce8af6bd929e492d076769226265f215832f">+3/-1</a>      </td> </tr> <tr> <td>.bazelversion</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-c3633fb973fb6f3cf898f53da86fa77e9310338a7c2933143709d5e226f05f75">+1/-1</a>      </td> </tr> <tr> <td>.dockerignore</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2f754321d62f08ba8392b9b168b83e24ea2852bb5d815d63e767f6c3d23c6ac5">+5/-6</a>      </td> </tr> <tr> <td>.env.example</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a3046da0d15a27e89f2afe639b25748a7ad4d9290af3e7b1b6c1a5533c8f0a8c">+4/-0</a>      </td> </tr> <tr> <td>pre-commit</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-87320095d7c4f39eed5d8f3866b512eb910e4eec8e7926faaeef6a53ab786fcb">+13/-0</a>    </td> </tr> <tr> <td>golangci-lint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-d9a956120ac84289d2650137f64bd8f0893331de05e44cc41899dd984c9e0d48">+18/-3</a>    </td> </tr> <tr> <td>release.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-87db21a973eed4fef5f32b267aa60fcee5cbdf03c67fafdc2a9b553bb0b15f34">+2/-2</a>      </td> </tr> <tr> <td>sbom-images.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-306f4aa8e8e286f727246a7517eecd45f3535fd99a644f60d635b9fa39875f54">+2/-4</a>      </td> </tr> <tr> <td>swiftlint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-1b49f173a7ae3bc0f6d6bcb2d6a376ddc07b3de248b8b93ecf292c917440aa1d">+31/-0</a>    </td> </tr> <tr> <td>tests-golang.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-07d64b93f6e82cf63364ba9ed8e6b02148c6b817eca20ac588da5516a3f38523">+2/-2</a>      </td> </tr> <tr> <td>tests-rust.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-fe45c58ef3e0ce2e65eb15e70842d134358ff957e727155bcfd21cc09ad38940">+10/-11</a>  </td> </tr> <tr> <td>web-ng-lint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-c19923a96bdb26e507a82c63f3feb4c34f35f8d9445d90cb737c7c98441b0293">+25/-3</a>    </td> </tr> <tr> <td>.gitmodules</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-fe7afb5c9c916e521401d3fcfb4277d5071798c3baf83baf11d6071742823584">+3/-0</a>      </td> </tr> <tr> <td>.swiftlint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-7109ad4ca9c6e705a8da290e7cb2898a679b0f8f1f4712d082dee256230d6a1f">+29/-0</a>    </td> </tr> <tr> <td>AGENTS.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a54ff182c7e8acf56acfd6e4b9c3ff41e2c41a31c9b211b2deb9df75d9a478f9">+10/-9</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-7fc57714ef13c3325ce2a1130202edced92fcccc0c6db34a72f7b57f60d552a3">+13/-1</a>    </td> </tr> <tr> <td>Bazel.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-6be72dda32c0a6480648cd95071f2266ed166694052974f8137c7f7f650599d0">+7/-14</a>    </td> </tr> <tr> <td>CHANGELOG</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-ecec88c33adb7591ee6aa88e29b62ad52ef443611cba5e0f0ecac9b5725afdba">+136/-0</a>  </td> </tr> <tr> <td>Cargo.toml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2e9d962a08321605940b5a657135052fbcef87b5e360662bb527c96d9a615542">+8/-5</a>      </td> </tr> <tr> <td>DOCKER_QUICKSTART.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-d39bb63b06e41b96069fe4f289e4d28a4f205f8e953c141e6f4d9c715bbb75b3">+5/-3</a>      </td> </tr> <tr> <td>INSTALL.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-09b140a43ebfdd8dbec31ce72cafffd15164d2860fd390692a030bcb932b54a0">+14/-46</a>  </td> </tr> <tr> <td>MODULE.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-6136fc12446089c3db7360e923203dd114b6a1466252e71667c6791c20fe6bdc">+254/-160</a></td> </tr> <tr> <td>Makefile</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-76ed074a9305c04054cdebb9e9aad2d818052b07091de1f20cad0bbac34ffb52">+83/-48</a>  </td> </tr> <tr> <td>README-Docker.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9fd61d24482efe68c22d8d41e2a1dcc440f39195aa56e7a050f2abe598179efd">+16/-2</a>    </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5">+37/-15</a>  </td> </tr> <tr> <td>RELEASE.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2b1b69303b927a484e02c7fad9fc87d0d3ff0dc22ae1da0ecd0dc935d922a23c">+7/-7</a>      </td> </tr> <tr> <td>SBOM.spdx</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-18998650ca9549e4a238b258c160071e656fe7ac85a21f9042b646edee5b82e1">+0/-1</a>      </td> </tr> <tr> <td>VERSION</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-7b60b8e351cbb80c47459ffe2c79f1a26404871f49294780fe47ad0e58c09350">+1/-1</a>      </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-884fa9353a5226345e44fbabea3300efc7a87dfbcde0b6a42521ca51823f1b68">+0/-176</a>  </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-484fd90d15537312547e4f244a6e8bcd9722ddf587664b37fede641e27c2e767">+0/-47</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-13652ffce40d2e7430a19e82ae9041f74594be2464a466b2d69b62a783a356f9">+0/-56</a>    </td> </tr> <tr> <td>release_pipeline.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-08d9d15c1ded8af19dd4d4dcbb2d32ce9eb70118e69a60936a3f2d2f57b93ecf">+1/-1</a>      </td> </tr> <tr> <td>mix_release.bzl</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-86ec281f99363b6b6eb1f49e21d83b7eeca93a35b552b9f305fffc6855e38ccd">+291/-4</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-65e272d2f04baca4ae19560ed8ef1d56c766adf56df00db2e958f128a5b0c73b">[link]</a>    </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-3d4b8a94d5eaa4dbcf29a80857a24a28c20c1e185435589d21194fd289908ff2">+222/-0</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-24488b811b3eb528cb132a5444bf53530313d6693f4eee3aae88589d1ba601e0">+13/-0</a>    </td> </tr> <tr> <td>agent-gateway.env</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-35f665aec4ecb8acfb57df1200ce5e2613b5d8206b0af62aa640eaeae95c3dee">+17/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-8242b89d38eae7e1b77617b2c41b6608fb749b22865f5e845f487c69c6bffe5e">+14/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-5228e32dff24c892393f16526796db39b90aec808b9789342c9d8da87f28299e">+4/-0</a>      </td> </tr> <tr> <td>serviceradar-agent-gateway.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-72f4aec7440d8b14c650b3fa0b0ddf16d17e28e06127164ab2dfdb5f133944d0">+18/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-c08735b9f8d787fe0b3703d20d0f62034b61c9ff84eaa3bcfb0cfa93629cfffe">+9/-0</a>      </td> </tr> <tr> <td>agent-windows.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-806d4701cb80965683ae4a53e77ec173b85e34dc11c31750afa05e0688715705">[link]</a>    </td> </tr> <tr> <td>agent.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-f649e65b0370811ba1b5dbaa92211dc8659485484066caebf196bf9abe023245">+1/-0</a>      </td> </tr> <tr> <td>sweep.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-4989191245e5e0c7d1512f58e262b2bb2dd131d1ef4eb24087c922415af8ad4b">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-59b8f3a99f1e535d12a2d323de3b283cf3bff6038d9e0d8d957b7e14115dac7f">[link]</a>    </td> </tr> <tr> <td>com.serviceradar.agent.plist</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-07225c29b7dfd102638dd97164c39c6210f1023a44f9a942f8878732b2d457df">[link]</a>    </td> </tr> <tr> <td>postinstall</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-12436aafe92e19f55e0fc687708997742e4a823934612ae21e71510582366bb8">[link]</a>    </td> </tr> <tr> <td>preinstall</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-982b04648b2bd391b824b1ae1750f03ab2204137e129b3226f9daa7c4761db96">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-69c03cc0d681772844b9d9b3780460f2fd156888eeedf763d64ed08325e7b1e5">+133/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-3a98f109dfa3226a977bc6951d6631a1a3aa00cf825916b36a66b2fb7dd97433">+58/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-c8ffc9d45829a591735dcbc3579e324374927da20e0b1119f5bddf9e04f8fdfa">[link]</a>    </td> </tr> <tr> <td>serviceradar-agent.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-6f512d71062e57d9e7fd0d3a365c05d1647a6cb6d322d3a273086df21d07f044">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-5eef6248133fed3bdc07087a978968b4ecbb9a015da151786cb346ae8a182fba">+9/-0</a>      </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-78abcc95294cadf2793bde4b458e983b2be3d637a5083f6eacac334518299e1c">+27/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2d9fc2b6ac58933068ee3e89e77541301343c0fd20d0dba597661d9c953b4fda">+8/-0</a>      </td> </tr> <tr> <td>serviceradar-bmp-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9f7bb48335466cb4c5aa82961010b40dca8101369c7c27ed91f3970c24465f47">+21/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-cba39039e2365e6c8bbb1664687a9913e2c77032fa619290c0c94ee0d108fa2d">+9/-0</a>      </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-d48c91094161218610f314563637b6f10e33936bf938ae94f28bcda34ac09e61">+99/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-558fdec9b28a58adc0cee8b4ab194f666b5443836d78b425a426fbfdf4e0f2cf">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-1eae48416a3f2743a5c4891f749edae6d7b35fdf18180225a0668df62f8c9864">[link]</a>    </td> </tr> <tr> <td>components.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-0eb1b1b3d2b2eb6070da2458fc269b087febe86c82dfa7b947dce78f687d8c6c">+677/-0</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-f6e7d6a3406ba37ad0d7d84cbfddab05ed473611d79b98deb3f59f433541ca75">+13/-0</a>    </td> </tr> <tr> <td>core-elx.env</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-ebbdc6529654fbcc3c89917ac5566367727d92dee3922f2142c2f475fd541775">+25/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-b4e6dc2a170653320f2298bab501d9fde5e7232980fe79b0a33a77a77eab5a32">+14/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-e2fd5c501d81ee86f73a7095e11581a503fb7fc0c674212d0b3e817ef1bae766">+4/-0</a>      </td> </tr> <tr> <td>serviceradar-core-elx.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-090d91356b949264630141d1c81d8848fe08503f5ffd9f8891aa8885d53301ac">+18/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-1bf92554d04fdc1b2474384c80459ed2adc18642c081cf0adc9cdd336555e9a5">+9/-0</a>      </td> </tr> <tr> <td>datasvc.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-8c05ef42b1a03a86b80203a474c609bd85e8e220e48c9233baa5d9da1e0e2560">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a6f34e0e13405fe1c462b17c019d940f3f64ee7625131960fc9f49dc3cba4be1">+121/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-e193a05d913d045643f68961731a5cf8c13a18dbcaf6449657be0871420342be">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-248b029a3b863c860badd5bf2942af4b7e74025199f2d4b106baf251524d7b5c">[link]</a>    </td> </tr> <tr> <td>serviceradar-datasvc.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-051366b65b32176c4228cd5a538f106c7b6b901a5d3d379f079cc2ead5f36581">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-bd51e5988945ebae0126f0c26bdbe47093db97914ba50c753f62a4190900d67b">+9/-0</a>      </td> </tr> <tr> <td>db-event-writer.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-1d7a5a0d1bf7a4799ad9192d2a458fd3a874e90e3e0f984adacff13ab3c30db0">+4/-0</a>      </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-3f5cb54ec5a3b8cf1f1442b981f32084f6da136e1e8b51ffc6d6616d1b0555d3">+121/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-999843f8c957305a2a72b7291161755418349d8fe008ed241c200eb80c387383">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-9b10459dd3ab299a5e2795d87480aeef117ed2b0a440a9e463508c36011fa459">[link]</a>    </td> </tr> <tr> <td>serviceradar-event-writer.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-09035233c3aea0dd35c69ee3546a824314ebedf15391519c331f59f7718e31b3">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-4702b0851fc56ef125b21219260d660f25e58a8d3d69c833c9121b0b32ec65e4">+9/-0</a>      </td> </tr> <tr> <td>faker.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-1b2810c87baf9e608088f4ac1fabc27f7f4d875b446c4cb69a86b11c14b8b64d">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-d574f1856216dfe83e583c825087808e5e7eea18318626f936fb0b1c5abc4af3">+93/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-3500af66b819187f620813740507f3143b2c3092d3b7c19d4341dee214af9cc0">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-d279c1417fa1a9b70f2403f18d4650bebd2ba7c4fa04932a705f4adfc964de54">[link]</a>    </td> </tr> <tr> <td>serviceradar-faker.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-797614d898799e2807e680411a8cae841d5365fcfe86ac53621a3194d801d22f">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-26e6a9ead561f65593942caebdb25323ef6b194cd4caec6da294a3dbad6127d9">+9/-0</a>      </td> </tr> <tr> <td>flow-collector.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a480dceb64927f584993aadb30aeff14c9babacaef41cc1402b75ac7452636d6">+29/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-16e6354bb3ec3f90a6830d2d71b62c3fe6d095bfd6d961f8747383a065223356">+65/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-8f3305098b96d8258211e103b43d60959a7e3b7900312aa01745e762f0ffb939">+24/-0</a>    </td> </tr> <tr> <td>serviceradar-flow-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-5648ce1f784b5117a90a00956e5330ca3e34058a9d623ccd2123211c22220496">+21/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-6e9a0b740b9ed11921105cd2326a433fdac9dd11d54e1045a119ff350b3af084">+9/-0</a>      </td> </tr> <tr> <td>log-collector.toml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-a7d46724586a71ba3de275cddc15ffcd4d6de9b6315e34dc53ce88e10828fd47">+13/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-cf7184670a4aeb2929a07fdb4b323e0dc9d00c593e7c764f8b7105d8ea226a92">+63/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-e159c05de1dc7182c002ddba3e020f380be35abc8a17727d3e2de7765c2e12fd">+31/-0</a>    </td> </tr> <tr> <td>serviceradar-log-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-f4c27ab1fab752b304c8895d8db6a3fdae82fe6d0ece835657348c7c12120fbf">+29/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-0d02d96f6ee9963fe917b9b9e5cb2af705ab32ba96e08c89c0204f684ae658ca">+9/-0</a>      </td> </tr> <tr> <td>nats-cloud.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-3261539de7f9c008c53f093e16530e50120b1e890ad552dce01080daa9ea5d73">[link]</a>    </td> </tr> <tr> <td>nats-leaf.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-af78ed28cd08e6b01c866c177b5eecc892d988c983e98dd3da228dbcac4cc746">[link]</a>    </td> </tr> <tr> <td>nats-server.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-fb07e2ecd09252719ae6f5ca36aac14d58bd911f7cdcfc26a698160584af512a">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-ade55813f95250a33958d2cce2e5bb7dc15400296e67cd736726e3e1e3d18ba1">[link]</a>    </td> </tr> <tr> <td>Additional files not shown</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2959/files#diff-2f328e4cd8dbe3ad193e49d92bcf045f47a6b72b1e9487d366f6b8288589b4ca"></a></td> </tr> </table></details></td></tr></tbody></table> </details> ___

github-advanced-security[bot] commented

2026-03-01 03:47:23 +00:00

(Migrated from github.com)

Author

Owner

Imported GitHub PR review comment.

Original author: @github-advanced-security[bot]
Original URL: https://github.com/carverauto/serviceradar/pull/2959#discussion_r2868346521
Original created: 2026-03-01T03:47:23Z
Original path: elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js
Original line: 7

DOM text reinterpreted as HTML

DOM text is reinterpreted as HTML without escaping meta-characters.

Show more details

Imported GitHub PR review comment. Original author: @github-advanced-security[bot] Original URL: https://github.com/carverauto/serviceradar/pull/2959#discussion_r2868346521 Original created: 2026-03-01T03:47:23Z Original path: elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js Original line: 7 --- ## DOM text reinterpreted as HTML [DOM text](1) is reinterpreted as HTML without escaping meta-characters. [Show more details](https://github.com/carverauto/serviceradar/security/code-scanning/98)

qodo-code-review[bot] commented

2026-03-01 03:49:10 +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/2959#issuecomment-3979008741
Original created: 2026-03-01T03:49:10Z

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance

🔴

DOM XSS risk

Description: Tooltip rendering assigns unescaped, data-derived strings into tooltip.innerHTML (e.g.,
src, dst, mid_value), enabling DOM XSS if el.dataset.edges contains attacker-controlled
HTML/JS payloads. NetflowSankeyChart.js [72-283]

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`
}

const hideTooltip = () => {
  tooltip.classList.add("hidden")
}



 ... (clipped 191 lines)

Ticket Compliance

🟡

🎫 #2371

🔴	Analytics stats cards should abbreviate large numbers (e.g., show `50k devices` instead of `50,000 devices`).

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 try { ... } catch (_e) {} blocks silently swallow errors (e.g., during
resize/remove/style updates), preventing actionable context and making production
debugging difficult.

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

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 error detail: The chart renders String(e?.message || e || "unknown error") into the UI on
failure, which can expose internal implementation details to end users.

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 innerHTML: Tooltip content is built from edges fields and assigned via tooltip.innerHTML without
escaping, allowing untrusted data to inject HTML/script into the page.

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`
}

Learn more about managing compliance generic rules or creating your own custom rules

⚪

Generic: Comprehensive Audit Trails

Objective: To create a detailed and reliable record of critical system actions for security analysis
and compliance.

Status:
Audit scope unclear: The visible diff is primarily client-side rendering code and does not show whether any
critical backend actions introduced in unprocessed files are logged with user/time/outcome
context.

Referred Code

import mapboxgl from "mapbox-gl"

export default {
  mounted() {
    this._initOrUpdate()
    this._themeObserver = new MutationObserver(() => this._applyThemeStyle())
    // daisyUI typically drives theme via `data-theme` on <html>, but be resilient:
    // some pages/toggles may update `class`, inline styles, or set theme on <body>.
    this._themeObserver.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-theme", "class", "style"],
    })
    this._themeObserver.observe(document.body, {
      attributes: true,
      attributeFilter: ["data-theme", "class", "style"],
    })

    this._colorSchemeMql = window.matchMedia?.("(prefers-color-scheme: dark)") || null
    this._onColorSchemeChange = () => this._applyThemeStyle()
    if (this._colorSchemeMql?.addEventListener) {
      this._colorSchemeMql.addEventListener("change", this._onColorSchemeChange)



 ... (clipped 99 lines)

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Secure Logging Practices

Objective: To ensure logs are useful for debugging and auditing without exposing sensitive
information like PII, PHI, or cardholder data.

Status:
Unstructured console logging: The code uses console.warn for map errors, and it is not clear from the diff whether
production logging is structured/scrubbed or if sensitive data could be logged elsewhere
in unprocessed changes.

Referred Code

this._map.on("error", (e) => {
  const msg = e?.error?.message || e?.message || "Unknown map error"
  console.warn("[MapboxFlowMap] map error:", msg)
  if (msg.includes("access token") || msg.includes("401") || msg.includes("403")) {
    this._showFallback("Invalid Mapbox access token")
  }
})

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/2959#issuecomment-3979008741 Original created: 2026-03-01T03:49:10Z --- ## 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 rendering assigns unescaped, data-derived strings into <code>tooltip.innerHTML</code> (e.g., <code>src</code>, <code>dst</code>, <code>mid_value</code>), enabling DOM XSS if <code>el.dataset.edges</code> contains attacker-controlled HTML/JS payloads. <a href='https://github.com/carverauto/serviceradar/pull/2959/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R283'>NetflowSankeyChart.js [72-283]</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` } const hideTooltip = () => { tooltip.classList.add("hidden") } ... (clipped 191 lines) ``` </details></details></td></tr> <tr><td colspan='2'>Ticket Compliance</td></tr> <tr><td>🟡</td> <td> <details> <summary>🎫 <a href=https://github.com/carverauto/serviceradar/issues/2371>#2371</a></summary> <table width='100%'><tbody> <tr><td rowspan=1>🔴</td> <td>Analytics stats cards should abbreviate large numbers (e.g., show <code>50k devices</code> instead of <code>50,000 devices</code>). </td></tr> </tbody></table> </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/2959/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R28-R47'>Swallowed exceptions</a>: Multiple <code>try { ... } catch (_e) {}</code> blocks silently swallow errors (e.g., during resize/remove/style updates), preventing actionable context and making production debugging difficult. <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 ``` </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/2959/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R375-R377'>User-facing error detail</a>: The chart renders <code>String(e?.message || e || "unknown error")</code> into the UI on failure, which can expose internal implementation details to end users. <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/2959/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R88'>XSS via innerHTML</a>: Tooltip content is built from <code>edges</code> fields and assigned via <code>tooltip.innerHTML</code> without escaping, allowing untrusted data to inject HTML/script into the page. <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> > 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> <td><details> <summary>Generic: Comprehensive Audit Trails</summary> **Objective:** To create a detailed and reliable record of critical system actions for security analysis and compliance. **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2959/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R1-R120'>Audit scope unclear</a>: The visible diff is primarily client-side rendering code and does not show whether any critical backend actions introduced in unprocessed files are logged with user/time/outcome context. <details open><summary>Referred Code</summary> ```javascript import mapboxgl from "mapbox-gl" export default { mounted() { this._initOrUpdate() this._themeObserver = new MutationObserver(() => this._applyThemeStyle()) // daisyUI typically drives theme via `data-theme` on <html>, but be resilient: // some pages/toggles may update `class`, inline styles, or set theme on <body>. this._themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class", "style"], }) this._themeObserver.observe(document.body, { attributes: true, attributeFilter: ["data-theme", "class", "style"], }) this._colorSchemeMql = window.matchMedia?.("(prefers-color-scheme: dark)") || null this._onColorSchemeChange = () => this._applyThemeStyle() if (this._colorSchemeMql?.addEventListener) { this._colorSchemeMql.addEventListener("change", this._onColorSchemeChange) ... (clipped 99 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 Logging Practices</summary> **Objective:** To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2959/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R99-R105'>Unstructured console logging</a>: The code uses <code>console.warn</code> for map errors, and it is not clear from the diff whether production logging is structured/scrubbed or if sensitive data could be logged elsewhere in unprocessed changes. <details open><summary>Referred Code</summary> ```javascript this._map.on("error", (e) => { const msg = e?.error?.message || e?.message || "Unknown map error" console.warn("[MapboxFlowMap] map error:", msg) if (msg.includes("access token") || msg.includes("401") || msg.includes("403")) { this._showFallback("Invalid Mapbox access token") } }) ``` </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 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:50:42 +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/2959#issuecomment-3979011871
Original created: 2026-03-01T03:50:42Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Security	Prevent XSS by avoiding innerHTML To prevent a potential Cross-Site Scripting (XSS) vulnerability, replace the use of `innerHTML` in the `showTooltip` function. Instead, use `replaceChildren` to safely set the tooltip content with DOM nodes. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [72-81] `- 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 + tooltip.replaceChildren(...content) tooltip.classList.remove("hidden") const pad = 8 ...` `[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` and proposes a secure alternative (`replaceChildren`), which is a critical security improvement.	Medium
Possible issue	Use correct method for metadata Use `this._map.setMetadata()` instead of modifying the object from `this._map.getStyle()` to correctly persist style metadata. The current implementation fails to save the metadata, breaking theme-switching logic. elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [168-173] `_stampStyleUrl(url) { try { - const style = this._map.getStyle() - style.metadata = {...(style.metadata \|\| {}), sr_style_url: url} + this._map.setMetadata({...((this._map.getStyle().metadata) \|\| {}), sr_style_url: url}) } catch (_e) {} },` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that modifying the object returned by `getStyle()` is ineffective, as it's a copy. This is a critical bug fix, as the logic for theme switching in `_applyThemeStyle` depends on this metadata being correctly set and retrieved. The proposed fix using `setMetadata()` is the correct approach according to the Mapbox GL JS API.	Medium
	Cleanup global DOM listeners Add cleanup logic in the `destroyed` lifecycle hook to remove global event listeners that were attached in `ensureDOM`, preventing memory leaks. elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js [25-32] destroyed() { try { this._resizeObserver?.disconnect() } catch (_e) {} try { this._tooltipCleanup?.() } catch (_e) {} + // Clean up global DOM listeners added in ensureDOM + window.removeEventListener("pointermove", this.handlePanMove) + window.removeEventListener("pointerup", this.handlePanEnd) + window.removeEventListener("pointercancel", this.handlePanEnd) + this.state.canvas?.removeEventListener("wheel", this.handleWheelZoom, { passive: false }) + this.state.canvas?.removeEventListener("pointerdown", this.handlePanStart) + this.state.el?.removeEventListener("click", this.handleTooltipPanelClick) }, `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a memory leak due to unremoved event listeners and provides the correct fix, which is critical for the stability of a long-lived component.	Medium
	Fix animation bug with modulo Fix the `wave` calculation to handle negative results from the modulo operator, which can break the sweep animation. Ensure `wave` is always positive by using `((sweepTime - dist) % 400.0 + 400.0) % 400.0`. elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js [230-237] const sweepTime = this.state.animationPhase * 80.0 const baseLayers = baseGeoLines.length > 0 ? [ new LineLayer({ id: "god-view-geo-grid", data: baseGeoLines, coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, getSourcePosition: (d) => d.sourcePosition, getTargetPosition: (d) => d.targetPosition, getColor: (d) => { const dx = Number(d.sourcePosition?.[0] \|\| 0) - 320 const dy = Number(d.sourcePosition?.[1] \|\| 0) - 160 const dist = Math.sqrt((dx * dx) + (dy * dy)) - const wave = (sweepTime - dist) % 400.0 + const wave = ((sweepTime - dist) % 400.0 + 400.0) % 400.0 const alpha = wave > 0 && wave < 60 ? 110 - (wave * 1.5) : 15 return [32, 62, 88, Math.max(12, alpha)] }, ... `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a subtle bug where the JavaScript modulo operator can return a negative value, which would break the intended "sweep wave" animation. The proposed fix is correct and ensures the animation works as intended.	Low
General	Update component props instead of replacing Refactor the `jdm_editor_update` event handler to update the component via props instead of re-rendering a new component, improving efficiency and adhering to React best practices. elixir/web-ng/assets/js/hooks/JdmEditorHook.js [128-172] 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) + // Re-render with new definition by passing a new prop + this.reactRoot.render(React.createElement(EditorWithHandlers, { + initialTheme: getPhoenixTheme(), + definition: definition, + })); + }); - 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}) - }, []) -... - } - this.reactRoot.render(React.createElement(UpdatedEditor, {initialTheme: getPhoenixTheme()})) - }) - `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies an inefficient and unconventional React pattern, proposing a refactor to a standard props-based data flow which improves performance and maintainability.	Medium
	Enable browser caching for WASM assets Change the cache policy for fetching the WebAssembly module from `no-store` to `default` to allow browser caching and improve load times on subsequent visits. elixir/web-ng/assets/js/wasm/god_view_exec_runtime.js [129-143] async function fetchWasmAsset() { const errors = [] for (const candidate of wasmCandidates()) { try { - const response = await fetch(candidate, {cache: "no-store"}) + const response = await fetch(candidate, {cache: "default"}) if (response.ok) return response errors.push(`${candidate}:${response.status}`) } catch (error) { errors.push(`${candidate}:${error}`) } } throw new Error(`god_view_exec.wasm unavailable (${errors.join(", ")})`) } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 6 __ Why: The suggestion correctly points out that using `cache: "no-store"` for a static WASM asset is inefficient and proposes changing it to `default` to leverage browser caching, which is a valid performance improvement.	Low
	Reuse single tooltip instance To improve performance, initialize the tooltip element once in the `mounted` hook and store it as `this._tooltip`. Reuse this instance in the `_draw` function instead of calling `nfEnsureTooltip` on every render. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [69-70] `-const tooltip = nfEnsureTooltip(el) +const tooltip = this._tooltip tooltip.classList.add("hidden")` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 5 __ Why: This suggestion improves performance and resource management by creating the tooltip element only once in `mounted` and reusing it, which is more efficient than recreating it on every `_draw` call.	Low
	Strip trailing zeros in abbreviations Improve number formatting in `fmtNumber` by trimming unnecessary trailing zeros and decimal points from abbreviated outputs like "1.00G". elixir/web-ng/assets/js/netflow_charts/util.js [165-172] export function fmtNumber(v) { const n = Number(v \|\| 0) if (!Number.isFinite(n)) return "0" - if (Math.abs(n) >= 1e9) return `${(n / 1e9).toFixed(2)}G` - if (Math.abs(n) >= 1e6) return `${(n / 1e6).toFixed(2)}M` - if (Math.abs(n) >= 1e3) return `${(n / 1e3).toFixed(2)}K` + const fmt = (num) => { + // two decimals then strip trailing zeros + return num.toFixed(2).replace(/\.?0+$/, "") + } + if (Math.abs(n) >= 1e9) return `${fmt(n / 1e9)}G` + if (Math.abs(n) >= 1e6) return `${fmt(n / 1e6)}M` + if (Math.abs(n) >= 1e3) return `${fmt(n / 1e3)}K` return `${n.toFixed(0)}` } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 5 __ Why: The suggestion improves the number formatting by removing unnecessary trailing zeros, which enhances readability (e.g., "1G" instead of "1.00G"). This is a good aesthetic and usability improvement.	Low
	Optimize redraw by clearing SVG conditionally To improve rendering efficiency and reduce flickering, conditionally clear the SVG content. Move the clearing logic to after the check for empty `edges`, so the SVG is only cleared when there is new data to draw. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [109-114] `- // Clear - while (svg.firstChild) svg.removeChild(svg.firstChild) - if (!Array.isArray(edges) \|\| edges.length === 0) { renderMessage("No Sankey edges in this window.", "Try widening the time range or switching dimensions.") return } + // Clear + while (svg.firstChild) svg.removeChild(svg.firstChild) +` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 4 __ Why: The suggestion offers a minor performance optimization by reordering operations to avoid clearing the SVG unnecessarily, which can help reduce flickering on redraws.	Low
	Use regex replace for compatibility Replace `replaceAll` with `replace` using a global regex flag in the `escapeHtml` function to ensure broader browser compatibility. elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js [101-109] `escapeHtml(value) { const text = String(value == null ? "" : value) return text - .replaceAll("&", "&") - .replaceAll("<", "<") - .replaceAll(">", ">") - .replaceAll('"', """) - .replaceAll("'", "'") + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, """) + .replace(/'/g, "'") }` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 4 __ Why: The suggestion correctly points out that `replaceAll` has limited support in older browsers and proposes using `replace` with a global flag for better compatibility. This is a valid improvement for ensuring the code runs reliably across more environments.	Low
	Log JSON parse errors To improve debugging, add a `console.warn` statement within the `catch` block for `JSON.parse`. This will log any errors that occur while parsing the Sankey edges data, making it easier to identify invalid data issues. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [95-99] `try { edges = JSON.parse(el.dataset.edges \|\| "[]") -} catch (_e) { +} catch (err) { + console.warn("Failed to parse Sankey edges:", err) edges = [] }` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 3 __ Why: The suggestion improves debuggability by logging an error when JSON parsing fails, which is helpful for diagnosing data-related issues, though it only offers a minor improvement to the code's robustness.	Low
More

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/2959#issuecomment-3979011871 Original created: 2026-03-01T03:50:42Z --- ## 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>Security</td> <td> <details><summary>Prevent XSS by avoiding innerHTML</summary> ___ **To prevent a potential Cross-Site Scripting (XSS) vulnerability, replace the use of <code>innerHTML</code> in the <code>showTooltip</code> function. Instead, use <code>replaceChildren</code> to safely set the tooltip content with DOM nodes.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [72-81]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R81) ```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 + tooltip.replaceChildren(...content) tooltip.classList.remove("hidden") const pad = 8 ... ``` `[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` and proposes a secure alternative (`replaceChildren`), which is a critical security improvement. </details></details></td><td align=center>Medium </td></tr><tr><td rowspan=3>Possible issue</td> <td> <details><summary>Use correct method for metadata</summary> ___ **Use <code>this._map.setMetadata()</code> instead of modifying the object from <code>this._map.getStyle()</code> to correctly persist style metadata. The current implementation fails to save the metadata, breaking theme-switching logic.** [elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [168-173]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R168-R173) ```diff _stampStyleUrl(url) { try { - const style = this._map.getStyle() - style.metadata = {...(style.metadata || {}), sr_style_url: url} + this._map.setMetadata({...((this._map.getStyle().metadata) || {}), sr_style_url: url}) } catch (_e) {} }, ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies that modifying the object returned by `getStyle()` is ineffective, as it's a copy. This is a critical bug fix, as the logic for theme switching in `_applyThemeStyle` depends on this metadata being correctly set and retrieved. The proposed fix using `setMetadata()` is the correct approach according to the Mapbox GL JS API. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Cleanup global DOM listeners</summary> ___ **Add cleanup logic in the <code>destroyed</code> lifecycle hook to remove global event listeners that were attached in <code>ensureDOM</code>, preventing memory leaks.** [elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js [25-32]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-7b88fcb183a776c3df89b3352962b5cc6164d2302a74d211fb3fe4df9776cdd7R25-R32) ```diff destroyed() { try { this._resizeObserver?.disconnect() } catch (_e) {} try { this._tooltipCleanup?.() } catch (_e) {} + // Clean up global DOM listeners added in ensureDOM + window.removeEventListener("pointermove", this.handlePanMove) + window.removeEventListener("pointerup", this.handlePanEnd) + window.removeEventListener("pointercancel", this.handlePanEnd) + this.state.canvas?.removeEventListener("wheel", this.handleWheelZoom, { passive: false }) + this.state.canvas?.removeEventListener("pointerdown", this.handlePanStart) + this.state.el?.removeEventListener("click", this.handleTooltipPanelClick) }, ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies a memory leak due to unremoved event listeners and provides the correct fix, which is critical for the stability of a long-lived component. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Fix animation bug with modulo</summary> ___ **Fix the <code>wave</code> calculation to handle negative results from the modulo operator, which can break the sweep animation. Ensure <code>wave</code> is always positive by using <code>((sweepTime - dist) % 400.0 + 400.0) % 400.0</code>.** [elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js [230-237]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-f08b4f5d106f54747fbb0635896e73090396a5734363ddaaf7a93bb3ce608ce9R230-R237) ```diff const sweepTime = this.state.animationPhase * 80.0 const baseLayers = baseGeoLines.length > 0 ? [ new LineLayer({ id: "god-view-geo-grid", data: baseGeoLines, coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, getSourcePosition: (d) => d.sourcePosition, getTargetPosition: (d) => d.targetPosition, getColor: (d) => { const dx = Number(d.sourcePosition?.[0] || 0) - 320 const dy = Number(d.sourcePosition?.[1] || 0) - 160 const dist = Math.sqrt((dx * dx) + (dy * dy)) - const wave = (sweepTime - dist) % 400.0 + const wave = ((sweepTime - dist) % 400.0 + 400.0) % 400.0 const alpha = wave > 0 && wave < 60 ? 110 - (wave * 1.5) : 15 return [32, 62, 88, Math.max(12, alpha)] }, ... ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly identifies a subtle bug where the JavaScript modulo operator can return a negative value, which would break the intended "sweep wave" animation. The proposed fix is correct and ensures the animation works as intended. </details></details></td><td align=center>Low </td></tr><tr><td rowspan=7>General</td> <td> <details><summary>Update component props instead of replacing</summary> ___ **Refactor the <code>jdm_editor_update</code> event handler to update the component via props instead of re-rendering a new component, improving efficiency and adhering to React best practices.** [elixir/web-ng/assets/js/hooks/JdmEditorHook.js [128-172]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-e82967d2468cd02bd7524d51bcd9e22d9432b4d0afd882442515c7a814ae18f8R128-R172) ```diff 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) + // Re-render with new definition by passing a new prop + this.reactRoot.render(React.createElement(EditorWithHandlers, { + initialTheme: getPhoenixTheme(), + definition: definition, + })); + }); - 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}) - }, []) -... - } - this.reactRoot.render(React.createElement(UpdatedEditor, {initialTheme: getPhoenixTheme()})) - }) - ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies an inefficient and unconventional React pattern, proposing a refactor to a standard props-based data flow which improves performance and maintainability. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Enable browser caching for WASM assets</summary> ___ **Change the cache policy for fetching the WebAssembly module from <code>no-store</code> to <code>default</code> to allow browser caching and improve load times on subsequent visits.** [elixir/web-ng/assets/js/wasm/god_view_exec_runtime.js [129-143]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-260fc3e54b302b1db5eb289839debd050cc277ee10ae5ea5be1d4606085916a2R129-R143) ```diff async function fetchWasmAsset() { const errors = [] for (const candidate of wasmCandidates()) { try { - const response = await fetch(candidate, {cache: "no-store"}) + const response = await fetch(candidate, {cache: "default"}) if (response.ok) return response errors.push(`${candidate}:${response.status}`) } catch (error) { errors.push(`${candidate}:${error}`) } } throw new Error(`god_view_exec.wasm unavailable (${errors.join(", ")})`) } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly points out that using `cache: "no-store"` for a static WASM asset is inefficient and proposes changing it to `default` to leverage browser caching, which is a valid performance improvement. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Reuse single tooltip instance</summary> ___ **To improve performance, initialize the tooltip element once in the <code>mounted</code> hook and store it as <code>this._tooltip</code>. Reuse this instance in the <code>_draw</code> function instead of calling <code>nfEnsureTooltip</code> on every render.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [69-70]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R69-R70) ```diff -const tooltip = nfEnsureTooltip(el) +const tooltip = this._tooltip tooltip.classList.add("hidden") ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 5</summary> __ Why: This suggestion improves performance and resource management by creating the tooltip element only once in `mounted` and reusing it, which is more efficient than recreating it on every `_draw` call. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Strip trailing zeros in abbreviations</summary> ___ **Improve number formatting in <code>fmtNumber</code> by trimming unnecessary trailing zeros and decimal points from abbreviated outputs like "1.00G".** [elixir/web-ng/assets/js/netflow_charts/util.js [165-172]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-dcfc73a9dbe3d9f021a10cada76e3b72894375ebcee019ad00a111c3e429ef24R165-R172) ```diff export function fmtNumber(v) { const n = Number(v || 0) if (!Number.isFinite(n)) return "0" - if (Math.abs(n) >= 1e9) return `${(n / 1e9).toFixed(2)}G` - if (Math.abs(n) >= 1e6) return `${(n / 1e6).toFixed(2)}M` - if (Math.abs(n) >= 1e3) return `${(n / 1e3).toFixed(2)}K` + const fmt = (num) => { + // two decimals then strip trailing zeros + return num.toFixed(2).replace(/\.?0+$/, "") + } + if (Math.abs(n) >= 1e9) return `${fmt(n / 1e9)}G` + if (Math.abs(n) >= 1e6) return `${fmt(n / 1e6)}M` + if (Math.abs(n) >= 1e3) return `${fmt(n / 1e3)}K` return `${n.toFixed(0)}` } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 5</summary> __ Why: The suggestion improves the number formatting by removing unnecessary trailing zeros, which enhances readability (e.g., "1G" instead of "1.00G"). This is a good aesthetic and usability improvement. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Optimize redraw by clearing SVG conditionally</summary> ___ **To improve rendering efficiency and reduce flickering, conditionally clear the SVG content. Move the clearing logic to after the check for empty <code>edges</code>, so the SVG is only cleared when there is new data to draw.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [109-114]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R109-R114) ```diff - // Clear - while (svg.firstChild) svg.removeChild(svg.firstChild) - if (!Array.isArray(edges) || edges.length === 0) { renderMessage("No Sankey edges in this window.", "Try widening the time range or switching dimensions.") return } + // Clear + while (svg.firstChild) svg.removeChild(svg.firstChild) + ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 4</summary> __ Why: The suggestion offers a minor performance optimization by reordering operations to avoid clearing the SVG unnecessarily, which can help reduce flickering on redraws. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Use regex replace for compatibility</summary> ___ **Replace <code>replaceAll</code> with <code>replace</code> using a global regex flag in the <code>escapeHtml</code> function to ensure broader browser compatibility.** [elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js [101-109]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-0da723c3f5b16409d7b5a10013bec415a4d9326e4d752e931bb2bba6792024d3R101-R109) ```diff escapeHtml(value) { const text = String(value == null ? "" : value) return text - .replaceAll("&", "&") - .replaceAll("<", "<") - .replaceAll(">", ">") - .replaceAll('"', """) - .replaceAll("'", "'") + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, """) + .replace(/'/g, "'") } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 4</summary> __ Why: The suggestion correctly points out that `replaceAll` has limited support in older browsers and proposes using `replace` with a global flag for better compatibility. This is a valid improvement for ensuring the code runs reliably across more environments. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Log JSON parse errors</summary> ___ **To improve debugging, add a <code>console.warn</code> statement within the <code>catch</code> block for <code>JSON.parse</code>. This will log any errors that occur while parsing the Sankey edges data, making it easier to identify invalid data issues.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [95-99]](https://github.com/carverauto/serviceradar/pull/2959/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R95-R99) ```diff try { edges = JSON.parse(el.dataset.edges || "[]") -} catch (_e) { +} catch (err) { + console.warn("Failed to parse Sankey edges:", err) edges = [] } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 3</summary> __ Why: The suggestion improves debuggability by logging an error when JSON parsing fails, which is helpful for diagnosing data-related issues, though it only offers a minor improvement to the code's robustness. </details></details></td><td align=center>Low </td></tr> <tr><td align="center" colspan="2"> - [ ] More  </td><td></td></tr></tbody></table>