carverauto/serviceradar

Fork 0

sync staging to tftp pr #2999

Closed

mfreeman451 wants to merge 94 commits from refs/pull/2999/head into 192-feat-tftp-server

mfreeman451 commented

2026-03-01 08:02:06 +00:00

(Migrated from github.com)

Owner

Imported from GitHub pull request.

Original GitHub pull request: #2969
Original author: @mfreeman451
Original URL: https://github.com/carverauto/serviceradar/pull/2969
Original created: 2026-03-01T08:02:06Z
Original updated: 2026-03-01T08:06:20Z
Original head: carverauto/serviceradar:staging
Original base: 192-feat-tftp-server

User description

IMPORTANT: Please sign the Developer Certificate of Origin

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

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

Describe your changes

Issue ticket number and link

Code checklist before requesting a review

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

PR Type

Enhancement, Tests

Description

Major feature: Comprehensive god view network topology visualization system with deck.gl-based 3D rendering, including node/edge layers, packet flow particle animation, and interactive selection
Graph processing: Arrow IPC decoding, graph clustering by state/spatial grid, force-directed and geographic layout algorithms with smooth transitions
Visualization components: D3-based charts (Sankey, stacked area, stacked 100%, line series, grid layout), Mapbox GL flow maps with theme support, and 3D spatial RF coverage survey maps
Interactive features: Node selection with detail panels, edge/node tooltips, pan/drag/zoom interactions, filter/layer toggles, and causal relationship navigation
Rendering pipeline: Bitmap metadata and traversal mask computation, edge telemetry styling with directional flow support, node visual styling with state-based coloring
Infrastructure: WebAssembly runtime engine for state masks and interpolation, dependency injection system with contract validation, ESLint configuration with strict god view rules
Utilities: Number formatting (bytes, bits, rates), global window event handlers, SRQL time token cookie persistence, JDM editor React integration
Comprehensive test coverage: 30+ test suites covering lifecycle, rendering, layout, data transformation, and contract validation
Removed: Legacy Go/Rust services (faker, agent, consumers, trapd, profiler, otel, flowgger, netflow-collector) and associated Docker/Helm/K8s configurations

Diagram Walkthrough

flowchart LR
  A["Arrow IPC<br/>Graph Data"] -->|"decode"| B["Graph Nodes<br/>& Edges"]
  B -->|"cluster & layout"| C["Positioned<br/>Graph"]
  C -->|"render layers"| D["deck.gl<br/>Visualization"]
  D -->|"particle flow"| E["Animated<br/>Packet Flow"]
  C -->|"data transform"| F["Visible Graph<br/>Data"]
  F -->|"style & format"| G["Styled Nodes<br/>& Edges"]
  G -->|"build layers"| D
  H["User Input<br/>Pan/Zoom/Select"] -->|"update state"| I["Lifecycle<br/>Controller"]
  I -->|"re-render"| D
  J["D3 Charts<br/>Sankey/Area/Line"] -->|"display"| K["Timeseries &<br/>Flow Visualization"]
  L["Mapbox GL<br/>Flow Map"] -->|"display"| K
  M["3D RF Survey<br/>Map"] -->|"display"| K

File Walkthrough

Relevant files

Enhancement

41 files

NetflowSankeyChart.js `D3 Sankey chart for network flow visualization` elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js New D3-based Sankey diagram component for visualizing network flow data with three-column layout (source, middle, destination) Handles circular link detection and gracefully degrades to two-column view when cycles are detected Implements interactive tooltips, node/edge highlighting, and responsive resizing with ResizeObserver Supports hiding node groups and emits events for edge selection	+380/-0
rendering_graph_layer_transport_methods.js `Deck.gl transport layer rendering for network visualization` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js Builds deck.gl visualization layers for network graph rendering (mantle, crust, atmosphere, security) Implements packet flow particle system with zoom-dependent density and directional animation Supports fallback ScatterplotLayer when shader-based PacketFlowLayer is unavailable Includes geo-grid base layer with animated sweep effect and focus-based alpha multipliers	+260/-0
MapboxFlowMap.js `Mapbox GL flow map visualization with theme support` elixir/web-ng/assets/js/hooks/MapboxFlowMap.js Mapbox GL integration hook for rendering flow maps with source/destination markers and connecting lines Implements theme detection (dark/light mode) with computed color-scheme, data-theme attributes, and OS preference fallback Manages marker lifecycle, bounds fitting, and style switching with diff-based updates Handles access token validation and provides fallback messaging for disabled/misconfigured maps	+309/-0
rendering_selection_methods.js `Node selection and details rendering methods` elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js Implements node selection details rendering with HTML generation for device information display Provides node type icon mapping via HeroIcon names based on type labels and type IDs Handles edge/node picking, selection toggling, and programmatic node focus with view state updates Includes HTML escaping, device href generation, and node reference action buttons for causal relationships	+191/-0
rendering_style_edge_particle_methods.js `Packet flow particle generation for edge animation` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.js Builds packet flow particle instances for animated edge visualization with directional flow support Implements zoom-dependent density scaling, utilization-based color mixing (cyan/magenta), and lane offset calculations Caches particle data using edge telemetry stamp to avoid redundant computation Supports bidirectional flow with separate particle streams and adaptive speed/jitter based on edge metrics	+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 graph clustering by state (global view) and spatial grid (regional view) with aggregation logic Preserves directional telemetry fields (flowPpsAb/flowPpsBa) when aggregating edges across clusters Provides zoom tier resolution and graph reshaping based on zoom mode (auto/local/global/regional) Generates cluster metadata with sample node details and topology class distribution tracking	+187/-0
NetflowStackedAreaChart.js `D3 stacked area chart for network flow time series` elixir/web-ng/assets/js/hooks/charts/NetflowStackedAreaChart.js D3-based stacked area chart for time-series network flow data with legend and interactive series toggling Supports overlay lines (previous/revision comparisons) with distinct stroke styles and labels Implements responsive sizing, time-based x-axis, and formatted value tooltips via utility functions Handles empty data gracefully and sorts series by total magnitude for proper visual layering	+195/-0
PacketFlowLayer.js `Custom deck.gl shader layer for packet flow particles` elixir/web-ng/assets/js/lib/deckgl/PacketFlowLayer.js Custom deck.gl Layer for GPU-accelerated particle flow animation using WebGL 2.0 shaders Implements instanced rendering with per-particle attributes (seed, speed, size, jitter, lane offset, color) Provides smooth fade-in/fade-out at endpoints and circular particle rendering with core/glow effects Includes bounds calculation and proper model lifecycle management (initialization, updates, finalization)	+194/-0
rendering_tooltip_methods.js `Tooltip rendering and hover interaction methods` elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.js Generates styled tooltips for nodes and edges with device details, IP, type, state, and geo information Implements hover state tracking with cursor style updates and edge focus detection Provides node reference action buttons for causal root/parent navigation Includes dark-themed tooltip styling with backdrop blur and responsive max-width	+84/-0
NetflowStacked100Chart.js `Stacked 100% area chart visualization component` elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js New D3-based stacked 100% area chart component for time-series data visualization Implements responsive design with ResizeObserver and legend with visibility toggling Supports composition overlays with configurable dash patterns and opacity Includes tooltip attachment and proper cleanup on component destruction	+207/-0
lifecycle_dom_setup_methods.js `Lifecycle DOM setup and deck initialization` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js DOM initialization and canvas setup for deck.gl rendering engine Creates HUD elements (summary, details panels) with styled overlays Implements event handlers for panel clicks and device navigation Manages Deck instance creation with WebGPU/WebGL fallback and error handling	+174/-0
renderer_deps.js `Dependency injection and API context builders` elixir/web-ng/assets/js/lib/god_view/renderer_deps.js Dependency injection configuration with JSDoc type definitions for god view APIs Exports builder functions for layout, rendering, and lifecycle dependencies Defines constant arrays of required dependency keys for validation Provides context-aware forwarding between rendering, layout, and lifecycle namespaces	+154/-0
lifecycle_dom_interaction_methods.js `DOM interaction and animation lifecycle methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.js Animation loop management with reduced motion preference detection Pan/drag interaction handling with pointer capture and threshold-based activation Wheel zoom with clamping and zoom tier resolution Media query listener for accessibility preference changes	+163/-0
JdmEditorHook.js `JDM editor React component hook integration` elixir/web-ng/assets/js/hooks/JdmEditorHook.js Phoenix LiveView hook for JDM (GoRules) decision graph editor integration Lazy-loads React and JDM editor with theme synchronization (light/dark) Handles definition changes and LiveView event communication Monitors system and DOM theme changes with proper cleanup	+180/-0
NetflowGridChart.js `Grid layout multi-series chart component` elixir/web-ng/assets/js/hooks/charts/NetflowGridChart.js D3-based grid layout chart for multi-series time-series visualization Responsive grid with dynamic column/row calculation and padding Includes legend with visibility toggling and shared tooltip Supports custom formatting via `nfFormatRateValue` utility	+141/-0
rendering_graph_layer_node_methods.js `Node rendering layers for deck.gl visualization` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_node_methods.js Builds deck.gl layers for node visualization (tethers, halo, ring, core nodes) Implements animated breathing effect on node rings using animation phase Conditionally adds text layers for node labels and edge labels based on zoom shape Manages color, opacity, and interaction properties per layer	+130/-0
lifecycle_stream_snapshot_methods.js `Snapshot stream decoding and processing` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.js Handles binary snapshot message parsing with magic number validation Decodes Arrow IPC format and extracts bitmap metadata and graph data Manages topology comparison and transition animation triggering Publishes performance metrics and error events to LiveView	+116/-0
NetflowLineSeriesChart.js `Line series time-series chart component` elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js D3-based line chart for time-series visualization with multiple series support Implements legend with visibility toggling and custom stroke styling Supports overlay series with dashed lines (prev/rev prefixes) Includes responsive axes and shared tooltip attachment	+130/-0
rendering_style_node_reason_methods.js `Node state reason and causal explanation methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.js Maps node states to categories and display names with default reasons Humanizes causal reason strings with node references and hop distances Builds node index lookup map for cross-referencing in explanations Handles edge traversal for affected node dependency explanation	+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 masking Constructs node and edge data structures with computed properties Handles shape-specific formatting (local vs regional/global) Manages edge label selection and interaction key generation	+103/-0
god_view_exec_runtime.js `WebAssembly runtime engine initialization` elixir/web-ng/assets/js/wasm/god_view_exec_runtime.js WebAssembly engine wrapper for god view computation (state masks, interpolation) Handles WASM module instantiation with streaming and fallback loading Manages memory allocation/deallocation for WASM operations Implements multiple WASM asset fetch candidates with error handling	+143/-0
layout_topology_algorithm_methods.js `Topology layout algorithms (geo and force-directed)` elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.js Implements Mercator projection for geographic layout with fallback spiral placement Force-directed layout using d3-force with configurable parameters Generates geographic grid data for visualization background Normalizes node positions to canvas bounds after simulation	+94/-0
lifecycle_stream_decode_methods.js `Arrow IPC graph decoding methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.js Decodes Apache Arrow IPC format into graph nodes and edges Parses optional float values with null/NaN handling Extracts node details JSON and geographic coordinates Builds edge source/target index arrays for efficient traversal	+104/-0
lifecycle_bootstrap_runtime_methods.js `Lifecycle bootstrap and runtime initialization` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_runtime_methods.js Binds lifecycle methods to context for proper `this` reference Attaches DOM elements and initializes resize listeners Asynchronously initializes WebAssembly engine with error handling Defines list of methods requiring binding for god view lifecycle	+65/-0
rendering_graph_bitmap_methods.js `Graph bitmap and traversal mask computation methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.js New module exporting bitmap metadata and traversal mask computation methods `ensureBitmapMetadata` normalizes and validates bitmap metadata with fallback generation `visibilityMask` computes state visibility filtering with optional WASM acceleration `computeTraversalMask` implements 3-hop graph traversal with WASM fallback	+127/-0
rendering_style_edge_telemetry_methods.js `Edge telemetry styling and formatting utilities` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.js New module for edge telemetry styling and formatting Provides unit formatters for packets-per-second, capacity, and connection types Computes edge colors and widths based on flow utilization and packet rates Includes color interpolation for vivid vs. standard visualization modes	+67/-0
TimeseriesCombinedChart.js `Multi-series timeseries chart with tooltip interaction` elixir/web-ng/assets/js/hooks/charts/TimeseriesCombinedChart.js New Phoenix hook for multi-series timeseries chart with interactive tooltips Supports multiple data series with custom colors and unit formatting Implements hover line and tooltip positioning with mouse tracking Formats values in bytes, Hz, and counts-per-second units	+115/-0
SRQLTimeCookie.js `SRQL time token cookie persistence hook` elixir/web-ng/assets/js/hooks/SRQLTimeCookie.js New Phoenix hook for persisting SRQL time token in browser cookies Extracts and updates time tokens in query strings with debounced persistence Restores time token from cookie on page load unless URL has explicit `q` parameter Syncs input value when LiveView updates occur outside of user focus	+107/-0
TimeseriesChart.js `Single-series timeseries chart with tooltip interaction` elixir/web-ng/assets/js/hooks/charts/TimeseriesChart.js New Phoenix hook for single-series timeseries chart with interactive tooltips Supports unit-aware value formatting (bytes, Hz, percent, counts-per-second) Implements hover line and tooltip positioning with mouse tracking Includes cleanup on component destruction	+98/-0
layout_topology_state_methods.js `Topology layout state management methods` elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.js New module for topology layout state management `prepareGraphLayout` selects layout algorithm and manages revision tracking `graphTopologyStamp` generates hash-based topology fingerprints `reusePreviousPositions` preserves node positions across layout updates `shouldUseGeoLayout` determines layout mode based on geographic coordinate coverage	+79/-0
lifecycle_bootstrap_state_defaults_methods.js `Lifecycle state initialization with default values` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_state_defaults_methods.js New module initializing all lifecycle state properties with defaults Sets up canvas, deck, channel, and animation state Initializes filter, layer, and topology layer toggles Configures visual color palette and view state parameters	+71/-0
SpatialSurveyMap.js `3D spatial RF coverage survey map visualization` elixir/web-ng/assets/js/hooks/SpatialSurveyMap.js New Phoenix hook for 3D spatial RF coverage visualization using deck.gl Implements hexagon layer for RF coverage aggregation with RSSI-based coloring Implements point cloud layer for LiDAR/Wi-Fi vector visualization Includes orbit view controller and cleanup on destruction	+84/-0
window_events.js `Global window event handlers and utilities` elixir/web-ng/assets/js/utils/window_events.js New utility module for global window event handlers `registerGlobalWindowEvents` handles clipboard copy and YAML download events `registerLiveReloadHelpers` enables development features (server logs, editor integration) Supports both modern clipboard API and fallback textarea method	+86/-0
layout_animation_methods.js `Graph layout animation and interpolation methods` elixir/web-ng/assets/js/lib/god_view/layout_animation_methods.js New module for smooth graph layout transitions `animateTransition` interpolates node positions over 220ms duration `interpolateNodes` performs linear interpolation with optional WASM acceleration Manages animation frame lifecycle and cancellation	+78/-0
lifecycle_bootstrap_channel_event_methods.js `Snapshot channel event handling and reconnection` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.js New module for snapshot channel lifecycle and event handling `registerSnapshotChannelEvents` sets up handlers for snapshot, metadata, and error events `joinSnapshotChannel` manages join success/error with reconnection scheduling `scheduleChannelReconnect` implements exponential backoff reconnection logic	+67/-0
formatters.js `Number formatting utility functions` elixir/web-ng/assets/js/utils/formatters.js New utility module for number formatting `nfFormatBytes` formats byte values with TB/GB/MB/KB/B units `nfFormatBits` formats bit values with Tb/Gb/Mb/Kb/b units `nfFormatCountPerSec` and `nfFormatRateValue` provide rate formatting	+39/-0
rendering_graph_view_methods.js `Graph viewport auto-fitting and camera methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_view_methods.js New module for viewport auto-fitting and camera control `autoFitViewState` computes zoom and target to frame all visible nodes Respects user camera lock and auto-fit state Updates zoom tier based on layout mode	+46/-0
app.js `Phoenix LiveView application initialization` elixir/web-ng/assets/js/app.js Main application entry point for Phoenix LiveView setup Initializes LiveSocket with CSRF token and custom hooks Registers global window event handlers and live reload helpers Configures topbar progress indicator	+51/-0
rendering_style_node_visual_methods.js `Node visual styling and display methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_visual_methods.js New module for node visual styling and display Provides node color selection based on state (root cause, affected, healthy, unknown) Generates status icons and colors based on operational state Normalizes display labels with fallback handling	+37/-0
GodViewRenderer.js `Main GodViewRenderer orchestration class` elixir/web-ng/assets/js/lib/GodViewRenderer.js Main renderer class orchestrating layout, rendering, and lifecycle engines Constructs context with state, layout API, rendering API, and lifecycle API Builds dependency maps for each engine Delegates mount/update/destroy to lifecycle controller	+46/-0
rendering_style_edge_topology_methods.js `Edge topology classification and filtering methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.js New module for edge topology classification and filtering `edgeTopologyClass` normalizes explicit topology class values `edgeEnabledByTopologyLayer` filters edges based on topology layer toggles Supports both class count maps and explicit class fallback	+28/-0

Tests

23 files

lifecycle_stream_decode_methods.test.js `Tests for Arrow graph decoding lifecycle methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.test.js Comprehensive test suite for Arrow IPC graph decoding with 5 test cases covering node/edge extraction Tests explicit topology metadata, directional flow fields, optional column handling, and null geo coordinates Validates preservation of backend edge multiplicity and directional telemetry fields Uses mocked Apache Arrow table structures for isolated unit testing	+286/-0
rendering_graph_data_methods.test.js `Tests for graph data rendering transformation methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.test.js Test suite for graph data transformation with 5 test cases covering visibility masking and edge aggregation Validates node/edge filtering, traversal masks, clustered vs. local shapes, and telemetry eligibility preservation Tests edge multiplicity handling and directional flow field (flowPpsAb/flowPpsBa) preservation Uses mocked helper functions for isolated testing of data transformation logic	+191/-0
layout_cluster_methods.test.js `Tests for graph clustering and layout methods` elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.test.js Test suite for clustering and layout methods with 6 test cases covering state/grid clustering and edge aggregation Validates zoom tier resolution, node selection clearing on tier change, and directional flow preservation Tests cluster edge aggregation with canonical orientation and topology class counting Verifies graph reshaping routing to appropriate tier-specific transformations	+157/-0
rendering_style_edge_particle_methods.test.js `Edge particle rendering method test suite` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.test.js Comprehensive test suite for `buildPacketFlowInstances` method with 6 test cases Tests visibility floors, particle count bounds, telemetry eligibility filtering Validates directional flow rendering and density scaling by zoom tier Uses vitest framework with detailed assertions on particle properties	+176/-0
rendering_selection_methods.test.js `Node selection and detail rendering tests` elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.test.js Tests for node selection and detail panel rendering with mock DOM elements Validates IP address button generation, metadata display, and fallback values Tests selection toggle behavior and HTML rewrite optimization Uses custom mock classList implementation for testing	+144/-0
lifecycle_bootstrap_event_methods.test.js `Lifecycle bootstrap event handler tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_event_methods.test.js Tests for event registration and handler wiring (filters, zoom, layers, reset view) Validates state updates and re-rendering on filter/zoom/layer changes Tests reset view functionality and camera lock clearing Uses helper functions for context creation and API binding	+123/-0
lifecycle_dom_interaction_methods.test.js `DOM interaction lifecycle method tests` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.test.js Tests animation loop scheduling with reduced motion preference Validates pan/drag threshold detection and pointer capture Tests media query listener setup and preference change handling Mocks window APIs and uses vitest for assertions	+128/-0
lifecycle_dom_setup_methods.test.js `Test suite for DOM lifecycle setup methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.test.js New test file for DOM setup lifecycle methods with 4 test cases Tests `createDeckInstance` routing of tooltip/hover/click events through dependencies Tests `handleDetailsPanelClick` for device link navigation and node focus actions Tests `handleTooltipPanelClick` for tooltip link navigation	+119/-0
rendering_graph_bitmap_methods.test.js `Tests for graph bitmap and traversal methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.test.js Test suite for bitmap metadata and traversal mask computation Tests fallback metadata generation from node state counts Tests preservation of provided non-empty metadata Tests 3-hop traversal mask computation and visibility filtering	+97/-0
rendering_graph_layer_transport_methods.test.js `Tests for transport and effect layer building` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.test.js Test suite for transport and effect layer building Tests atmosphere particle layer inclusion with additive blend settings Tests layer omission when toggle is disabled Verifies layer configuration and parameter settings	+73/-0
layout_topology_state_methods.test.js `Tests for topology layout state methods` elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.test.js Test suite for topology layout state management Tests topology stamp generation and change detection Tests position reuse from previous graph layouts Tests geo layout eligibility based on coordinate coverage	+97/-0
layout_topology_algorithm_methods.test.js `Tests for topology layout algorithms` elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.test.js Test suite for graph layout algorithms (geo and force-directed) Tests geo projection with deterministic fallback positioning Tests force-directed layout bounds enforcement Tests geo grid data generation based on layout mode	+96/-0
rendering_tooltip_methods.test.js `Tests for tooltip rendering methods` elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.test.js Test suite for node and edge tooltip rendering Tests tooltip content generation with IP, type, geo, and ASN details Tests fallback display for missing node details Tests cursor state updates on hover over nodes	+87/-0
lifecycle_stream_snapshot_methods.test.js `Tests for snapshot stream parsing methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.test.js Test suite for binary snapshot frame parsing Tests header decoding and payload extraction from binary frames Tests base64-encoded message parsing Tests validation of magic bytes in binary format	+62/-0
lifecycle_bootstrap_channel_event_methods.test.js `Tests for channel event and reconnection methods` elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.test.js Test suite for channel event handling and reconnection logic Tests successful channel join without polling Tests error handling and reconnection scheduling Tests channel cleanup and re-setup on reconnection	+79/-0
GodViewRenderer.test.js `Tests for GodViewRenderer orchestration` elixir/web-ng/assets/js/lib/god_view/GodViewRenderer.test.js Test suite for main renderer orchestration Tests context API registration from engine modules Tests update delegation to lifecycle state Tests mount/destroy delegation to lifecycle controller	+81/-0
deps_injection_contract.test.js `Dependency injection contract validation tests` elixir/web-ng/assets/js/lib/god_view/deps_injection_contract.test.js Test suite validating dependency injection contracts Verifies all `this.deps` usages are declared in renderer deps maps Verifies no unused dependency declarations exist Scans rendering and lifecycle method files for contract violations	+70/-0
rendering_style_edge_telemetry_methods.test.js `Tests for edge telemetry styling methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.test.js Test suite for edge telemetry formatting and styling Tests unit formatting for packets-per-second and capacity Tests edge width computation based on utilization and packet rates Tests color generation and connection kind normalization	+43/-0
rendering_style_edge_topology_methods.test.js `Tests for edge topology styling methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.test.js Test suite for edge topology classification and filtering Tests explicit topology class handling Tests topology layer filtering with class count maps Tests fallback filtering based on explicit class	+41/-0
rendering_style_node_reason_methods.test.js `Tests for node state reason methods` elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.test.js Test suite for node state reason generation Tests root-cause and affected state reason derivation Tests causal reason humanization with hop distance and parent information Tests node index lookup and formatting	+48/-0
runtime_access_contract.test.js `Runtime access pattern contract validation` elixir/web-ng/assets/js/lib/god_view/runtime_access_contract.test.js Test suite validating runtime data access patterns Verifies methods use explicit `this.state` and `this.deps` namespaces Prevents flat runtime references like `this.methodName` Scans rendering and lifecycle method files	+47/-0
GodViewRenderer_contracts.test.js `Engine API composition contract tests` elixir/web-ng/assets/js/lib/god_view/GodViewRenderer_contracts.test.js Test suite for engine API composition contracts Verifies no method name collisions between layout, rendering, and lifecycle APIs Verifies required runtime methods are provided by composed engines	+48/-0
rendering_graph_layer_node_methods.test.js `Tests for node and label layer methods` elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_node_methods.test.js Test suite for node and label layer building Tests node label layer creation with pickable property Verifies layer configuration and visual properties	+31/-0

Configuration changes

1 files

eslint.config.js

ESLint configuration with strict god view rules

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

ESLint configuration with flat config format for JavaScript files
Defines global browser/Node.js APIs and strict linting rules
Enforces this.state and this.deps usage patterns in god view methods
Prevents deprecated runtime_refs imports and direct property access

+112/-0

Miscellaneous

1 files

mod.rs

Rust NIF traits module placeholder

elixir/web-ng/native/god_view_nif/src/traits/mod.rs

Placeholder module for future trait abstractions in Rust NIF code

+1/-0

Additional files

101 files

.bazelrc	+1/-0
.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	+8/-8
BUILD.bazel	+13/-1
Bazel.md	+7/-14
CHANGELOG	+39/-0
Cargo.toml	+8/-6
MODULE.bazel	+228/-152
Makefile	+75/-48
README-Docker.md	+12/-0
README.md	+18/-10
RELEASE.md	+7/-7
SBOM.spdx	+0/-1
VERSION	+1/-1
BUILD.bazel	+0/-155
README.md	+0/-47
BUILD.bazel	+0/-56
release_pipeline.sh	+1/-1
mix_release.bzl	+28/-4
BUILD.bazel	[link]
README.md	+222/-0
BUILD.bazel	+13/-0
agent-gateway.env	[link]
postinstall.sh	[link]
preremove.sh	[link]
serviceradar-agent-gateway.service	[link]
BUILD.bazel	+9/-0
agent-windows.json	[link]
agent.json	[link]
sweep.json	[link]
BUILD.bazel	[link]
com.serviceradar.agent.plist	[link]
postinstall	[link]
preinstall	[link]
package.sh	+133/-0
postinstall.sh	[link]
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	[link]
postinstall.sh	[link]
preremove.sh	[link]
serviceradar-core-elx.service	[link]
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	[link]
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]
postinstall.sh	[link]
preremove.sh	[link]
serviceradar-nats.service	[link]
Additional files not shown

Imported from GitHub pull request. Original GitHub pull request: #2969 Original author: @mfreeman451 Original URL: https://github.com/carverauto/serviceradar/pull/2969 Original created: 2026-03-01T08:02:06Z Original updated: 2026-03-01T08:06:20Z Original head: carverauto/serviceradar:staging Original base: 192-feat-tftp-server --- ### **User description** ## IMPORTANT: Please sign the Developer Certificate of Origin Thank you for your contribution to ServiceRadar. Please note, when contributing, the developer must include a [DCO sign-off statement]( https://developercertificate.org/) indicating the DCO acceptance in one commit message. Here is an example DCO Signed-off-by line in a commit message: ``` Signed-off-by: J. Doe <j.doe@domain.com> ``` ## Describe your changes ## Issue ticket number and link ## Code checklist before requesting a review - [ ] I have signed the DCO? - [ ] The build completes without errors? - [ ] All tests are passing when running make test? ___ ### **PR Type** Enhancement, Tests ___ ### **Description** - **Major feature**: Comprehensive god view network topology visualization system with deck.gl-based 3D rendering, including node/edge layers, packet flow particle animation, and interactive selection - **Graph processing**: Arrow IPC decoding, graph clustering by state/spatial grid, force-directed and geographic layout algorithms with smooth transitions - **Visualization components**: D3-based charts (Sankey, stacked area, stacked 100%, line series, grid layout), Mapbox GL flow maps with theme support, and 3D spatial RF coverage survey maps - **Interactive features**: Node selection with detail panels, edge/node tooltips, pan/drag/zoom interactions, filter/layer toggles, and causal relationship navigation - **Rendering pipeline**: Bitmap metadata and traversal mask computation, edge telemetry styling with directional flow support, node visual styling with state-based coloring - **Infrastructure**: WebAssembly runtime engine for state masks and interpolation, dependency injection system with contract validation, ESLint configuration with strict god view rules - **Utilities**: Number formatting (bytes, bits, rates), global window event handlers, SRQL time token cookie persistence, JDM editor React integration - **Comprehensive test coverage**: 30+ test suites covering lifecycle, rendering, layout, data transformation, and contract validation - **Removed**: Legacy Go/Rust services (faker, agent, consumers, trapd, profiler, otel, flowgger, netflow-collector) and associated Docker/Helm/K8s configurations ___ ### Diagram Walkthrough ```mermaid flowchart LR A["Arrow IPC Graph Data"] -->|"decode"| B["Graph Nodes & Edges"] B -->|"cluster & layout"| C["Positioned Graph"] C -->|"render layers"| D["deck.gl Visualization"] D -->|"particle flow"| E["Animated Packet Flow"] C -->|"data transform"| F["Visible Graph Data"] F -->|"style & format"| G["Styled Nodes & Edges"] G -->|"build layers"| D H["User Input Pan/Zoom/Select"] -->|"update state"| I["Lifecycle Controller"] I -->|"re-render"| D J["D3 Charts Sankey/Area/Line"] -->|"display"| K["Timeseries & Flow Visualization"] L["Mapbox GL Flow Map"] -->|"display"| K M["3D RF Survey Map"] -->|"display"| K ``` <details><summary><h3>File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td>Enhancement</td><td><details><summary>41 files</summary><table> <tr> <td> <details> <summary>NetflowSankeyChart.js<dd><code>D3 Sankey chart for network flow visualization</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js <ul><li>New D3-based Sankey diagram component for visualizing network flow data with three-column layout (source, middle, destination) <li> Handles circular link detection and gracefully degrades to two-column view when cycles are detected <li> Implements interactive tooltips, node/edge highlighting, and responsive resizing with ResizeObserver <li> Supports hiding node groups and emits events for edge selection</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692">+380/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_transport_methods.js<dd><code>Deck.gl transport layer rendering for network visualization</code></dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.js <ul><li>Builds deck.gl visualization layers for network graph rendering (mantle, crust, atmosphere, security) <li> Implements packet flow particle system with zoom-dependent density and directional animation <li> Supports fallback ScatterplotLayer when shader-based PacketFlowLayer is unavailable <li> Includes geo-grid base layer with animated sweep effect and focus-based alpha multipliers</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-f08b4f5d106f54747fbb0635896e73090396a5734363ddaaf7a93bb3ce608ce9">+260/-0</a>  </td> </tr> <tr> <td> <details> <summary>MapboxFlowMap.js<dd><code>Mapbox GL flow map visualization with theme support</code>            </dd></summary> <hr> elixir/web-ng/assets/js/hooks/MapboxFlowMap.js <ul><li>Mapbox GL integration hook for rendering flow maps with source/destination markers and connecting lines <li> Implements theme detection (dark/light mode) with computed color-scheme, data-theme attributes, and OS preference fallback <li> Manages marker lifecycle, bounds fitting, and style switching with diff-based updates <li> Handles access token validation and provides fallback messaging for disabled/misconfigured maps</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1">+309/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_selection_methods.js<dd><code>Node selection and details rendering methods</code>                          </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js <ul><li>Implements node selection details rendering with HTML generation for device information display <li> Provides node type icon mapping via HeroIcon names based on type labels and type IDs <li> Handles edge/node picking, selection toggling, and programmatic node focus with view state updates <li> Includes HTML escaping, device href generation, and node reference action buttons for causal relationships</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-0da723c3f5b16409d7b5a10013bec415a4d9326e4d752e931bb2bba6792024d3">+191/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_particle_methods.js<dd><code>Packet flow particle generation for edge animation</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 animated edge visualization with directional flow support <li> Implements zoom-dependent density scaling, utilization-based color mixing (cyan/magenta), and lane offset calculations <li> Caches particle data using edge telemetry stamp to avoid redundant computation <li> Supports bidirectional flow with separate particle streams and adaptive speed/jitter based on edge metrics</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/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 graph clustering by state (global view) and spatial grid (regional view) with aggregation logic <li> Preserves directional telemetry fields (flowPpsAb/flowPpsBa) when aggregating edges across clusters <li> Provides zoom tier resolution and graph reshaping based on zoom mode (auto/local/global/regional) <li> Generates cluster metadata with sample node details and topology class distribution tracking</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-95e8ad8c87724b0bf17e003997b7b13c6fbeb1848b03b05d51bf9c80826beee5">+187/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowStackedAreaChart.js<dd><code>D3 stacked area chart for network flow 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 network flow data with legend and interactive series toggling <li> Supports overlay lines (previous/revision comparisons) with distinct stroke styles and labels <li> Implements responsive sizing, time-based x-axis, and formatted value tooltips via utility functions <li> Handles empty data gracefully and sorts series by total magnitude for proper visual layering</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-9fa93b4c4ca0213f2295f2cb318766449b02b7fc59efda96a02273f5f12b76b3">+195/-0</a>  </td> </tr> <tr> <td> <details> <summary>PacketFlowLayer.js<dd><code>Custom deck.gl shader layer for packet flow particles</code>        </dd></summary> <hr> elixir/web-ng/assets/js/lib/deckgl/PacketFlowLayer.js <ul><li>Custom deck.gl Layer for GPU-accelerated particle flow animation using WebGL 2.0 shaders <li> Implements instanced rendering with per-particle attributes (seed, speed, size, jitter, lane offset, color) <li> Provides smooth fade-in/fade-out at endpoints and circular particle rendering with core/glow effects <li> Includes bounds calculation and proper model lifecycle management (initialization, updates, finalization)</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-15defec05e50ed91f6f77defa8c5e44678c121ab3404c457041fafce4c4010dd">+194/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_tooltip_methods.js<dd><code>Tooltip rendering and hover interaction methods</code>                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.js <ul><li>Generates styled tooltips for nodes and edges with device details, IP, type, state, and geo information <li> Implements hover state tracking with cursor style updates and edge focus detection <li> Provides node reference action buttons for causal root/parent navigation <li> Includes dark-themed tooltip styling with backdrop blur and responsive max-width</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-b1bb8790f097597d140b2a2ec4cafd9f7d1c2e3f71af20b41b4501b693b40672">+84/-0</a>    </td> </tr> <tr> <td> <details> <summary>NetflowStacked100Chart.js<dd><code>Stacked 100% area chart visualization component</code>                    </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js <ul><li>New D3-based stacked 100% area chart component for time-series data visualization <li> Implements responsive design with ResizeObserver and legend with visibility toggling <li> Supports composition overlays with configurable dash patterns and opacity <li> Includes tooltip attachment and proper cleanup on component destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-67815c89effaf41060f95649ad3b755855bfa0ed7a9b77a9f1a9e72ebb73cd53">+207/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_setup_methods.js<dd><code>Lifecycle DOM setup and deck initialization</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js <ul><li>DOM initialization and canvas setup for deck.gl rendering engine <li> Creates HUD elements (summary, details panels) with styled overlays <li> Implements event handlers for panel clicks and device navigation <li> Manages Deck instance creation with WebGPU/WebGL fallback and error handling</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-7b88fcb183a776c3df89b3352962b5cc6164d2302a74d211fb3fe4df9776cdd7">+174/-0</a>  </td> </tr> <tr> <td> <details> <summary>renderer_deps.js<dd><code>Dependency injection and API context builders</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/renderer_deps.js <ul><li>Dependency injection configuration with JSDoc type definitions for god view APIs <li> Exports builder functions for layout, rendering, and lifecycle dependencies <li> Defines constant arrays of required dependency keys for validation <li> Provides context-aware forwarding between rendering, layout, and lifecycle namespaces</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-82c008c8660a2f54dc96f367cd873d87617e03d2c5d73fe47e272e8118965f96">+154/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_interaction_methods.js<dd><code>DOM interaction and animation lifecycle methods</code>                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.js <ul><li>Animation loop management with reduced motion preference detection <li> Pan/drag interaction handling with pointer capture and threshold-based activation <li> Wheel zoom with clamping and zoom tier resolution <li> Media query listener for accessibility preference changes</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-5c0eff9cfe6721820096aafcdebaf44618c7f7395aeb7d0d85d30411153b226b">+163/-0</a>  </td> </tr> <tr> <td> <details> <summary>JdmEditorHook.js<dd><code>JDM editor React component hook integration</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/hooks/JdmEditorHook.js <ul><li>Phoenix LiveView hook for JDM (GoRules) decision graph editor integration <li> Lazy-loads React and JDM editor with theme synchronization (light/dark) <li> Handles definition changes and LiveView event communication <li> Monitors system and DOM theme changes with proper cleanup</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-e82967d2468cd02bd7524d51bcd9e22d9432b4d0afd882442515c7a814ae18f8">+180/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowGridChart.js<dd><code>Grid layout multi-series chart component</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowGridChart.js <ul><li>D3-based grid layout chart for multi-series time-series visualization <li> Responsive grid with dynamic column/row calculation and padding <li> Includes legend with visibility toggling and shared tooltip <li> Supports custom formatting via <code>nfFormatRateValue</code> utility</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-a3d26de99ec52c9222b58e879c553dd3014874ff3131341444e2d41f81846978">+141/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_node_methods.js<dd><code>Node rendering layers for deck.gl visualization</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 (tethers, halo, ring, core nodes) <li> Implements animated breathing effect on node rings using animation phase <li> Conditionally adds text layers for node labels and edge labels based on zoom shape <li> Manages color, opacity, and interaction properties per layer</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-02e76c3e46ce4ed59adf0eee36f164f7ac893c57c449ae51c6216da9effeb669">+130/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_snapshot_methods.js<dd><code>Snapshot stream decoding and processing</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 IPC format and extracts bitmap metadata and graph data <li> Manages topology comparison and transition animation triggering <li> Publishes performance metrics and error events to LiveView</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-9a21f74b0dc5f6b40f4709f68aeb71c163304418c64730971113b5dda883c3e8">+116/-0</a>  </td> </tr> <tr> <td> <details> <summary>NetflowLineSeriesChart.js<dd><code>Line series time-series chart component</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js <ul><li>D3-based line chart for time-series visualization with multiple series support <li> Implements legend with visibility toggling and custom stroke styling <li> Supports overlay series with dashed lines (prev/rev prefixes) <li> Includes responsive axes and shared tooltip attachment</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-b078a99dbb234d0c9b13ca8d36e57696e70a4bbb9213f31a2de2c17935ad8074">+130/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_node_reason_methods.js<dd><code>Node state reason and causal explanation methods</code>                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.js <ul><li>Maps node states to categories and display names with default reasons <li> Humanizes causal reason strings with node references and hop distances <li> Builds node index lookup map for cross-referencing in explanations <li> Handles edge traversal for affected node dependency explanation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/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 masking <li> Constructs node and edge data structures with computed properties <li> Handles shape-specific formatting (local vs regional/global) <li> Manages edge label selection and interaction key generation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-e3a1a5957e905a23e88ec6df58ab4e412d9fde18a7e1f2bdcc4eba762169c81d">+103/-0</a>  </td> </tr> <tr> <td> <details> <summary>god_view_exec_runtime.js<dd><code>WebAssembly runtime engine initialization</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, interpolation) <li> Handles WASM module instantiation with streaming and fallback loading <li> Manages memory allocation/deallocation for WASM operations <li> Implements multiple WASM asset fetch candidates with error handling</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-260fc3e54b302b1db5eb289839debd050cc277ee10ae5ea5be1d4606085916a2">+143/-0</a>  </td> </tr> <tr> <td> <details> <summary>layout_topology_algorithm_methods.js<dd><code>Topology layout algorithms (geo and force-directed)</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 with fallback spiral placement <li> Force-directed layout using d3-force with configurable parameters <li> Generates geographic grid data for visualization background <li> Normalizes node positions to canvas bounds after simulation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-4aab4890dac906881177d8cf9fb9f17b45c822c49e151c1f5a19ed727d17a5f5">+94/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_decode_methods.js<dd><code>Arrow IPC graph decoding methods</code>                                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_decode_methods.js <ul><li>Decodes Apache Arrow IPC format into graph nodes and edges <li> Parses optional float values with null/NaN handling <li> Extracts node details JSON and geographic coordinates <li> Builds edge source/target index arrays for efficient traversal</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-f1b8ead14866a2f946832f2a8215db8abf862a5c9ea3b9fcadef607b835869b8">+104/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_runtime_methods.js<dd><code>Lifecycle bootstrap and runtime initialization</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_runtime_methods.js <ul><li>Binds lifecycle methods to context for proper <code>this</code> reference <li> Attaches DOM elements and initializes resize listeners <li> Asynchronously initializes WebAssembly engine with error handling <li> Defines list of methods requiring binding for god view lifecycle</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-3e673dd32f1bf9f77ba8197070cdc6b0755870128d17367437f6eb10e9ba483c">+65/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_bitmap_methods.js<dd><code>Graph bitmap and traversal mask computation methods</code>            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.js <ul><li>New module exporting bitmap metadata and traversal mask computation methods <li> <code>ensureBitmapMetadata</code> normalizes and validates bitmap metadata with fallback generation <li> <code>visibilityMask</code> computes state visibility filtering with optional WASM acceleration <li> <code>computeTraversalMask</code> implements 3-hop graph traversal with WASM fallback</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-9d624021610bf96661bcc1f75a59bb1644e7d2623d6087fffbfcbdb35a54a231">+127/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_telemetry_methods.js<dd><code>Edge telemetry styling and formatting utilities</code>                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.js <ul><li>New module for edge telemetry styling and formatting <li> Provides unit formatters for packets-per-second, capacity, and connection types <li> Computes edge colors and widths based on flow utilization and packet rates <li> Includes color interpolation for vivid vs. standard visualization modes</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-85211e2b105986f6daf8fffe131ccf5d1bba214c9a442f93c594abd4d97d3362">+67/-0</a>    </td> </tr> <tr> <td> <details> <summary>TimeseriesCombinedChart.js<dd><code>Multi-series timeseries chart with tooltip interaction</code>      </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/TimeseriesCombinedChart.js <ul><li>New Phoenix hook for multi-series timeseries chart with interactive tooltips <li> Supports multiple data series with custom colors and unit formatting <li> Implements hover line and tooltip positioning with mouse tracking <li> Formats values in bytes, Hz, and counts-per-second units</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-09abac7a6d77b7fc8de16307bb50f8f8d6c06e1fb5a427a906a78cacc3f69023">+115/-0</a>  </td> </tr> <tr> <td> <details> <summary>SRQLTimeCookie.js<dd><code>SRQL time token cookie persistence hook</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/hooks/SRQLTimeCookie.js <ul><li>New Phoenix hook for persisting SRQL time token in browser cookies <li> Extracts and updates time tokens in query strings with debounced persistence <li> Restores time token from cookie on page load unless URL has explicit <code>q</code> parameter <li> Syncs input value when LiveView updates occur outside of user focus</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-ec59b200a56527a6d6fdad23b9a560dd9903e42e7a7f59c402ef3459aa694b25">+107/-0</a>  </td> </tr> <tr> <td> <details> <summary>TimeseriesChart.js<dd><code>Single-series timeseries chart with tooltip interaction</code>    </dd></summary> <hr> elixir/web-ng/assets/js/hooks/charts/TimeseriesChart.js <ul><li>New Phoenix hook for single-series timeseries chart with interactive tooltips <li> Supports unit-aware value formatting (bytes, Hz, percent, counts-per-second) <li> Implements hover line and tooltip positioning with mouse tracking <li> Includes cleanup on component destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-779cd674fb614c68004da9b1df18c42171d0b89adf5b10610b151c48fa00220a">+98/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_state_methods.js<dd><code>Topology layout state management methods</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.js <ul><li>New module for topology layout state management <li> <code>prepareGraphLayout</code> selects layout algorithm and manages revision tracking <li> <code>graphTopologyStamp</code> generates hash-based topology fingerprints <li> <code>reusePreviousPositions</code> preserves node positions across layout updates <li> <code>shouldUseGeoLayout</code> determines layout mode based on geographic coordinate coverage</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-00e8d04a83ab66301ae0097cd9066a3ac8e4a5648f29da584fb31712cb95ce5c">+79/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_state_defaults_methods.js<dd><code>Lifecycle state initialization with default values</code>              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_state_defaults_methods.js <ul><li>New module initializing all lifecycle state properties with defaults <li> Sets up canvas, deck, channel, and animation state <li> Initializes filter, layer, and topology layer toggles <li> Configures visual color palette and view state parameters</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-49498b418277e7f81c0ab90fdf023ebf09b0c5e4cbf3228fe4533582cc4fa793">+71/-0</a>    </td> </tr> <tr> <td> <details> <summary>SpatialSurveyMap.js<dd><code>3D spatial RF coverage survey map visualization</code>                    </dd></summary> <hr> elixir/web-ng/assets/js/hooks/SpatialSurveyMap.js <ul><li>New Phoenix hook for 3D spatial RF coverage visualization using deck.gl <li> Implements hexagon layer for RF coverage aggregation with RSSI-based coloring <li> Implements point cloud layer for LiDAR/Wi-Fi vector visualization <li> Includes orbit view controller and cleanup on destruction</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/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>New utility module for global window event handlers <li> <code>registerGlobalWindowEvents</code> handles clipboard copy and YAML download events <li> <code>registerLiveReloadHelpers</code> enables development features (server logs, editor integration) <li> Supports both modern clipboard API and fallback textarea method</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-35dea0eeb869197487529f2afe536078d3a5e747a2ffc25b060c06e6609fae13">+86/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_animation_methods.js<dd><code>Graph layout animation and interpolation methods</code>                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_animation_methods.js <ul><li>New module for smooth graph layout transitions <li> <code>animateTransition</code> interpolates node positions over 220ms duration <li> <code>interpolateNodes</code> performs linear interpolation with optional WASM acceleration <li> Manages animation frame lifecycle and cancellation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-13096ca0c3eae3051dccae12e824a064672a39e89bbf36e214280653364e3c84">+78/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_channel_event_methods.js<dd><code>Snapshot channel event handling and reconnection</code>                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.js <ul><li>New module for snapshot channel lifecycle and event handling <li> <code>registerSnapshotChannelEvents</code> sets up handlers for snapshot, metadata, and error events <li> <code>joinSnapshotChannel</code> manages join success/error with reconnection scheduling <li> <code>scheduleChannelReconnect</code> implements exponential backoff reconnection logic</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-17663bc2be665cee79b451031bdde511352490e5d3cb80a452f2b2c26ebc01fe">+67/-0</a>    </td> </tr> <tr> <td> <details> <summary>formatters.js<dd><code>Number formatting utility functions</code>                                            </dd></summary> <hr> elixir/web-ng/assets/js/utils/formatters.js <ul><li>New utility module for number formatting <li> <code>nfFormatBytes</code> formats byte values with TB/GB/MB/KB/B units <li> <code>nfFormatBits</code> formats bit values with Tb/Gb/Mb/Kb/b units <li> <code>nfFormatCountPerSec</code> and <code>nfFormatRateValue</code> provide rate formatting</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-751d34dd16d665a0b5c99657621fab90a6b5ce22ba36ace171b0b38dddfda8c4">+39/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_view_methods.js<dd><code>Graph viewport auto-fitting and camera methods</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_view_methods.js <ul><li>New module for viewport auto-fitting and camera control <li> <code>autoFitViewState</code> computes zoom and target to frame all visible nodes <li> Respects user camera lock and auto-fit state <li> Updates zoom tier based on layout mode</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-689b6926213e710431fc733ceab6101dd79c7c6d1bdeaa28b1c81c8e5ae65853">+46/-0</a>    </td> </tr> <tr> <td> <details> <summary>app.js<dd><code>Phoenix LiveView application initialization</code>                            </dd></summary> <hr> elixir/web-ng/assets/js/app.js <ul><li>Main application entry point for Phoenix LiveView setup <li> Initializes LiveSocket with CSRF token and custom hooks <li> Registers global window event handlers and live reload helpers <li> Configures topbar progress indicator</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-cb037e30725231d82e904a1dccdbcb4a7a5c3c58f410627748c353dec4d40d3d">+51/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_node_visual_methods.js<dd><code>Node visual styling and display methods</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_visual_methods.js <ul><li>New module for node visual styling and display <li> Provides node color selection based on state (root cause, affected, healthy, unknown) <li> Generates status icons and colors based on operational state <li> Normalizes display labels with fallback handling</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-3c6dfa538e53340167239c9075402bf66cc7424e5cee1616af25187bca03a787">+37/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewRenderer.js<dd><code>Main GodViewRenderer orchestration class</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/GodViewRenderer.js <ul><li>Main renderer class orchestrating layout, rendering, and lifecycle engines <li> Constructs context with state, layout API, rendering API, and lifecycle API <li> Builds dependency maps for each engine <li> Delegates mount/update/destroy to lifecycle controller</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/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 methods</code>              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.js <ul><li>New module for edge topology classification and filtering <li> <code>edgeTopologyClass</code> normalizes explicit topology class values <li> <code>edgeEnabledByTopologyLayer</code> filters edges based on topology layer toggles <li> Supports both class count maps and explicit class fallback</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-bdfd91b4b7fc1c49d634f3ace2770efc47c70afdd10de0c569ae6576681959c8">+28/-0</a>    </td> </tr> </table></details></td></tr><tr><td>Tests</td><td><details><summary>23 files</summary><table> <tr> <td> <details> <summary>lifecycle_stream_decode_methods.test.js<dd><code>Tests for Arrow graph decoding lifecycle 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 5 test cases covering node/edge extraction <li> Tests explicit topology metadata, directional flow fields, optional column handling, and null geo coordinates <li> Validates preservation of backend edge multiplicity and directional telemetry fields <li> Uses mocked Apache Arrow table structures for isolated unit testing</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/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 transformation methods</code>        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_data_methods.test.js <ul><li>Test suite for graph data transformation with 5 test cases covering visibility masking and edge aggregation <li> Validates node/edge filtering, traversal masks, clustered vs. local shapes, and telemetry eligibility preservation <li> Tests edge multiplicity handling and directional flow field (flowPpsAb/flowPpsBa) preservation <li> Uses mocked helper functions for isolated testing of data transformation logic</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-246ee40e8a48d994500950f4d4cb5ced465878a9c5d08d195d86e10b780f5829">+191/-0</a>  </td> </tr> <tr> <td> <details> <summary>layout_cluster_methods.test.js<dd><code>Tests for graph clustering and layout methods</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_cluster_methods.test.js <ul><li>Test suite for clustering and layout methods with 6 test cases covering state/grid clustering and edge aggregation <li> Validates zoom tier resolution, node selection clearing on tier change, and directional flow preservation <li> Tests cluster edge aggregation with canonical orientation and topology class counting <li> Verifies graph reshaping routing to appropriate tier-specific transformations</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-1e48ef35b41d1efac555cd8fa55854ac35f408ce9f5b49f9d2999932527cfe3d">+157/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_particle_methods.test.js<dd><code>Edge particle rendering method test suite</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 <code>buildPacketFlowInstances</code> method with 6 test cases <li> Tests visibility floors, particle count bounds, telemetry eligibility filtering <li> Validates directional flow rendering and density scaling by zoom tier <li> Uses vitest framework with detailed assertions on particle properties</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-202c29e2f939676af0dfc5965c94eac84b9bd64fe1602d507ed5b452105552d7">+176/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_selection_methods.test.js<dd><code>Node selection and detail rendering tests</code>                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.test.js <ul><li>Tests for node selection and detail panel rendering with mock DOM elements <li> Validates IP address button generation, metadata display, and fallback values <li> Tests selection toggle behavior and HTML rewrite optimization <li> Uses custom mock classList implementation for testing</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-f2b9a06780f26ecf38943edb80833f7eaf265fb17703456481e56bb85270b14e">+144/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_event_methods.test.js<dd><code>Lifecycle bootstrap event handler tests</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_event_methods.test.js <ul><li>Tests for event registration and handler wiring (filters, zoom, layers, reset view) <li> Validates state updates and re-rendering on filter/zoom/layer changes <li> Tests reset view functionality and camera lock clearing <li> Uses helper functions for context creation and API binding</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-7f28d4f46c4d0ddddab54637b8331ca1a32ac2e23c13a583da4679435c3f89c5">+123/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_interaction_methods.test.js<dd><code>DOM interaction lifecycle method tests</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_interaction_methods.test.js <ul><li>Tests animation loop scheduling with reduced motion preference <li> Validates pan/drag threshold detection and pointer capture <li> Tests media query listener setup and preference change handling <li> Mocks window APIs and uses vitest for assertions</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-b7b55f82fc0feb12d87aebe47301f840013d5d794160455e5f4614c319e8de20">+128/-0</a>  </td> </tr> <tr> <td> <details> <summary>lifecycle_dom_setup_methods.test.js<dd><code>Test suite for DOM lifecycle setup methods</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.test.js <ul><li>New test file for DOM setup lifecycle methods with 4 test cases <li> Tests <code>createDeckInstance</code> routing of tooltip/hover/click events through dependencies <li> Tests <code>handleDetailsPanelClick</code> for device link navigation and node focus actions <li> Tests <code>handleTooltipPanelClick</code> for tooltip link navigation</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-8168f28155850402d3efe1dddae856dfed72f5659a9ae373980f216daba3ddca">+119/-0</a>  </td> </tr> <tr> <td> <details> <summary>rendering_graph_bitmap_methods.test.js<dd><code>Tests for graph bitmap and traversal methods</code>                          </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_bitmap_methods.test.js <ul><li>Test suite for bitmap metadata and traversal mask computation <li> Tests fallback metadata generation from node state counts <li> Tests preservation of provided non-empty metadata <li> Tests 3-hop traversal mask computation and visibility filtering</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-c562d2a82d2192cf149046f4215aedddf22411d3ce733ef7ae5e94260424026a">+97/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_transport_methods.test.js<dd><code>Tests for transport and effect layer building</code>                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_transport_methods.test.js <ul><li>Test suite for transport and effect layer building <li> Tests atmosphere particle layer inclusion with additive blend settings <li> Tests layer omission when toggle is disabled <li> Verifies layer configuration and parameter settings</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-2e0d605d92e46a0432f7aeba75c8e514a745271465daa1ccb5eced7293f7f92e">+73/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_state_methods.test.js<dd><code>Tests for topology layout state methods</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_state_methods.test.js <ul><li>Test suite for topology layout state management <li> Tests topology stamp generation and change detection <li> Tests position reuse from previous graph layouts <li> Tests geo layout eligibility based on coordinate coverage</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-d4b6a4864a14fde003cf98c3da46578c9fd7523b0d92deb905c9fc9d32dbdb53">+97/-0</a>    </td> </tr> <tr> <td> <details> <summary>layout_topology_algorithm_methods.test.js<dd><code>Tests for topology layout algorithms</code>                                          </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/layout_topology_algorithm_methods.test.js <ul><li>Test suite for graph layout algorithms (geo and force-directed) <li> Tests geo projection with deterministic fallback positioning <li> Tests force-directed layout bounds enforcement <li> Tests geo grid data generation based on layout mode</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-7f87b206728c13d1467c94cb289b0a2b12f28a0fbc462affa085b7a9ffa752fe">+96/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_tooltip_methods.test.js<dd><code>Tests for tooltip rendering methods</code>                                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_tooltip_methods.test.js <ul><li>Test suite for node and edge tooltip rendering <li> Tests tooltip content generation with IP, type, geo, and ASN details <li> Tests fallback display for missing node details <li> Tests cursor state updates on hover over nodes</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-d0f8f6e1d8c43986a937fab97b507f6323611d6bf4fe70701b22e02ec50ea546">+87/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_stream_snapshot_methods.test.js<dd><code>Tests for snapshot stream parsing methods</code>                                </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_stream_snapshot_methods.test.js <ul><li>Test suite for binary snapshot frame parsing <li> Tests header decoding and payload extraction from binary frames <li> Tests base64-encoded message parsing <li> Tests validation of magic bytes in binary format</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-981af57f660dd63edc6665257e2a63f331fb07fca2536f1ba2445ed21e0a9b85">+62/-0</a>    </td> </tr> <tr> <td> <details> <summary>lifecycle_bootstrap_channel_event_methods.test.js<dd><code>Tests for channel event and reconnection methods</code>                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/lifecycle_bootstrap_channel_event_methods.test.js <ul><li>Test suite for channel event handling and reconnection logic <li> Tests successful channel join without polling <li> Tests error handling and reconnection scheduling <li> Tests channel cleanup and re-setup on reconnection</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-44c4a5a7e92005539eb4ba2dcf59af42afd247d1262e658421ceac84bf0a8943">+79/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewRenderer.test.js<dd><code>Tests for GodViewRenderer orchestration</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/GodViewRenderer.test.js <ul><li>Test suite for main renderer orchestration <li> Tests context API registration from engine modules <li> Tests update delegation to lifecycle state <li> Tests mount/destroy delegation to lifecycle controller</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-71afdf3142f4c39c7d2062e0b7520e4cf1ec67ce37fa03bded5e7cbfaeff2f2d">+81/-0</a>    </td> </tr> <tr> <td> <details> <summary>deps_injection_contract.test.js<dd><code>Dependency injection contract validation tests</code>                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/deps_injection_contract.test.js <ul><li>Test suite validating dependency injection contracts <li> Verifies all <code>this.deps</code> usages are declared in renderer deps maps <li> Verifies 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/2969/files#diff-2370dff32696048ffd13368ec06377d6e20ac6cb824ce5638615ed0b1ee582fe">+70/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_telemetry_methods.test.js<dd><code>Tests for edge telemetry styling methods</code>                                  </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_telemetry_methods.test.js <ul><li>Test suite for edge telemetry formatting and styling <li> Tests unit formatting for packets-per-second and capacity <li> Tests edge width computation based on utilization and packet rates <li> Tests color generation and connection kind normalization</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-9a6094620b99db61b9165065c1abd52cded7ca7c2dc585d2fe21255220289035">+43/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_edge_topology_methods.test.js<dd><code>Tests for edge topology styling methods</code>                                    </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_topology_methods.test.js <ul><li>Test suite for edge topology classification and filtering <li> Tests explicit topology class handling <li> Tests topology layer filtering with class count maps <li> Tests fallback filtering based on explicit class</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-fa5f95fc6639415187cf8fafe41d3fcd31f5f4de1fb6e79482b88215dd9d5c58">+41/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_style_node_reason_methods.test.js<dd><code>Tests for node state reason methods</code>                                            </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_style_node_reason_methods.test.js <ul><li>Test suite for node state reason generation <li> Tests root-cause and affected state reason derivation <li> Tests causal reason humanization with hop distance and parent information <li> Tests node index lookup and formatting</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-22ab1c0499c71fd01afdd0cb1c96da2d45eeab573c47441a6e66e1eed904527e">+48/-0</a>    </td> </tr> <tr> <td> <details> <summary>runtime_access_contract.test.js<dd><code>Runtime access pattern contract validation</code>                              </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/runtime_access_contract.test.js <ul><li>Test suite validating runtime data access patterns <li> Verifies methods use explicit <code>this.state</code> and <code>this.deps</code> namespaces <li> Prevents flat runtime references like <code>this.methodName</code> <li> Scans rendering and lifecycle method files</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-8926390b8e2c3ce7966c887820e7d6147a874ab41d0f93f30799225fba1e87c4">+47/-0</a>    </td> </tr> <tr> <td> <details> <summary>GodViewRenderer_contracts.test.js<dd><code>Engine API composition contract tests</code>                                        </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/GodViewRenderer_contracts.test.js <ul><li>Test suite for engine API composition contracts <li> Verifies no method name collisions between layout, rendering, and lifecycle APIs <li> Verifies required runtime methods are provided by composed engines</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-a7f656a7995427920fc180c0490684b460e8c091bec797cb963c9d4896e85c42">+48/-0</a>    </td> </tr> <tr> <td> <details> <summary>rendering_graph_layer_node_methods.test.js<dd><code>Tests for node and label layer methods</code>                                      </dd></summary> <hr> elixir/web-ng/assets/js/lib/god_view/rendering_graph_layer_node_methods.test.js <ul><li>Test suite for node and label layer building <li> Tests node label layer creation with pickable property <li> Verifies layer configuration and visual properties</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-b0f9c9968dc909a1727f78985b213a35e10d123f83cadba3a11ad7571600d86a">+31/-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 strict god view rules</code>                    </dd></summary> <hr> elixir/web-ng/assets/eslint.config.js <ul><li>ESLint configuration with flat config format for JavaScript files <li> Defines global browser/Node.js APIs and strict linting rules <li> Enforces <code>this.state</code> and <code>this.deps</code> usage patterns in god view methods <li> Prevents deprecated <code>runtime_refs</code> imports and direct property access</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-c9b9b5b07da3e3f61be59a0a0e108f48b8c1df928a88276a06cf5aa809e80d3a">+112/-0</a>  </td> </tr> </table></details></td></tr><tr><td>Miscellaneous</td><td><details><summary>1 files</summary><table> <tr> <td> <details> <summary>mod.rs<dd><code>Rust NIF traits module placeholder</code>                                              </dd></summary> <hr> elixir/web-ng/native/god_view_nif/src/traits/mod.rs - Placeholder module for future trait abstractions in Rust NIF code </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-25237574017fafc4ebbd0b2d5e6e1d7a1901b415ffa990c6726580491d6396f0">+1/-0</a>      </td> </tr> </table></details></td></tr><tr><td>Additional files</td><td><details><summary>101 files</summary><table> <tr> <td>.bazelrc</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-544556920c45b42cbfe40159b082ce8af6bd929e492d076769226265f215832f">+1/-0</a>      </td> </tr> <tr> <td>.bazelversion</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-c3633fb973fb6f3cf898f53da86fa77e9310338a7c2933143709d5e226f05f75">+1/-1</a>      </td> </tr> <tr> <td>.dockerignore</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-2f754321d62f08ba8392b9b168b83e24ea2852bb5d815d63e767f6c3d23c6ac5">+5/-6</a>      </td> </tr> <tr> <td>.env.example</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-a3046da0d15a27e89f2afe639b25748a7ad4d9290af3e7b1b6c1a5533c8f0a8c">+4/-0</a>      </td> </tr> <tr> <td>pre-commit</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-87320095d7c4f39eed5d8f3866b512eb910e4eec8e7926faaeef6a53ab786fcb">+13/-0</a>    </td> </tr> <tr> <td>golangci-lint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-d9a956120ac84289d2650137f64bd8f0893331de05e44cc41899dd984c9e0d48">+18/-3</a>    </td> </tr> <tr> <td>release.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-87db21a973eed4fef5f32b267aa60fcee5cbdf03c67fafdc2a9b553bb0b15f34">+2/-2</a>      </td> </tr> <tr> <td>sbom-images.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-306f4aa8e8e286f727246a7517eecd45f3535fd99a644f60d635b9fa39875f54">+2/-4</a>      </td> </tr> <tr> <td>swiftlint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-1b49f173a7ae3bc0f6d6bcb2d6a376ddc07b3de248b8b93ecf292c917440aa1d">+31/-0</a>    </td> </tr> <tr> <td>tests-golang.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-07d64b93f6e82cf63364ba9ed8e6b02148c6b817eca20ac588da5516a3f38523">+2/-2</a>      </td> </tr> <tr> <td>tests-rust.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-fe45c58ef3e0ce2e65eb15e70842d134358ff957e727155bcfd21cc09ad38940">+10/-11</a>  </td> </tr> <tr> <td>web-ng-lint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-c19923a96bdb26e507a82c63f3feb4c34f35f8d9445d90cb737c7c98441b0293">+25/-3</a>    </td> </tr> <tr> <td>.gitmodules</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-fe7afb5c9c916e521401d3fcfb4277d5071798c3baf83baf11d6071742823584">+3/-0</a>      </td> </tr> <tr> <td>.swiftlint.yml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-7109ad4ca9c6e705a8da290e7cb2898a679b0f8f1f4712d082dee256230d6a1f">+29/-0</a>    </td> </tr> <tr> <td>AGENTS.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-a54ff182c7e8acf56acfd6e4b9c3ff41e2c41a31c9b211b2deb9df75d9a478f9">+8/-8</a>      </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-7fc57714ef13c3325ce2a1130202edced92fcccc0c6db34a72f7b57f60d552a3">+13/-1</a>    </td> </tr> <tr> <td>Bazel.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-6be72dda32c0a6480648cd95071f2266ed166694052974f8137c7f7f650599d0">+7/-14</a>    </td> </tr> <tr> <td>CHANGELOG</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-ecec88c33adb7591ee6aa88e29b62ad52ef443611cba5e0f0ecac9b5725afdba">+39/-0</a>    </td> </tr> <tr> <td>Cargo.toml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-2e9d962a08321605940b5a657135052fbcef87b5e360662bb527c96d9a615542">+8/-6</a>      </td> </tr> <tr> <td>MODULE.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-6136fc12446089c3db7360e923203dd114b6a1466252e71667c6791c20fe6bdc">+228/-152</a></td> </tr> <tr> <td>Makefile</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-76ed074a9305c04054cdebb9e9aad2d818052b07091de1f20cad0bbac34ffb52">+75/-48</a>  </td> </tr> <tr> <td>README-Docker.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-9fd61d24482efe68c22d8d41e2a1dcc440f39195aa56e7a050f2abe598179efd">+12/-0</a>    </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5">+18/-10</a>  </td> </tr> <tr> <td>RELEASE.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-2b1b69303b927a484e02c7fad9fc87d0d3ff0dc22ae1da0ecd0dc935d922a23c">+7/-7</a>      </td> </tr> <tr> <td>SBOM.spdx</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-18998650ca9549e4a238b258c160071e656fe7ac85a21f9042b646edee5b82e1">+0/-1</a>      </td> </tr> <tr> <td>VERSION</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-7b60b8e351cbb80c47459ffe2c79f1a26404871f49294780fe47ad0e58c09350">+1/-1</a>      </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-884fa9353a5226345e44fbabea3300efc7a87dfbcde0b6a42521ca51823f1b68">+0/-155</a>  </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-484fd90d15537312547e4f244a6e8bcd9722ddf587664b37fede641e27c2e767">+0/-47</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-13652ffce40d2e7430a19e82ae9041f74594be2464a466b2d69b62a783a356f9">+0/-56</a>    </td> </tr> <tr> <td>release_pipeline.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-08d9d15c1ded8af19dd4d4dcbb2d32ce9eb70118e69a60936a3f2d2f57b93ecf">+1/-1</a>      </td> </tr> <tr> <td>mix_release.bzl</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-86ec281f99363b6b6eb1f49e21d83b7eeca93a35b552b9f305fffc6855e38ccd">+28/-4</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-65e272d2f04baca4ae19560ed8ef1d56c766adf56df00db2e958f128a5b0c73b">[link]</a>    </td> </tr> <tr> <td>README.md</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-3d4b8a94d5eaa4dbcf29a80857a24a28c20c1e185435589d21194fd289908ff2">+222/-0</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-24488b811b3eb528cb132a5444bf53530313d6693f4eee3aae88589d1ba601e0">+13/-0</a>    </td> </tr> <tr> <td>agent-gateway.env</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-35f665aec4ecb8acfb57df1200ce5e2613b5d8206b0af62aa640eaeae95c3dee">[link]</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-8242b89d38eae7e1b77617b2c41b6608fb749b22865f5e845f487c69c6bffe5e">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-5228e32dff24c892393f16526796db39b90aec808b9789342c9d8da87f28299e">[link]</a>    </td> </tr> <tr> <td>serviceradar-agent-gateway.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-72f4aec7440d8b14c650b3fa0b0ddf16d17e28e06127164ab2dfdb5f133944d0">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-c08735b9f8d787fe0b3703d20d0f62034b61c9ff84eaa3bcfb0cfa93629cfffe">+9/-0</a>      </td> </tr> <tr> <td>agent-windows.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-806d4701cb80965683ae4a53e77ec173b85e34dc11c31750afa05e0688715705">[link]</a>    </td> </tr> <tr> <td>agent.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-f649e65b0370811ba1b5dbaa92211dc8659485484066caebf196bf9abe023245">[link]</a>    </td> </tr> <tr> <td>sweep.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-4989191245e5e0c7d1512f58e262b2bb2dd131d1ef4eb24087c922415af8ad4b">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-59b8f3a99f1e535d12a2d323de3b283cf3bff6038d9e0d8d957b7e14115dac7f">[link]</a>    </td> </tr> <tr> <td>com.serviceradar.agent.plist</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-07225c29b7dfd102638dd97164c39c6210f1023a44f9a942f8878732b2d457df">[link]</a>    </td> </tr> <tr> <td>postinstall</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-12436aafe92e19f55e0fc687708997742e4a823934612ae21e71510582366bb8">[link]</a>    </td> </tr> <tr> <td>preinstall</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-982b04648b2bd391b824b1ae1750f03ab2204137e129b3226f9daa7c4761db96">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-69c03cc0d681772844b9d9b3780460f2fd156888eeedf763d64ed08325e7b1e5">+133/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-3a98f109dfa3226a977bc6951d6631a1a3aa00cf825916b36a66b2fb7dd97433">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-c8ffc9d45829a591735dcbc3579e324374927da20e0b1119f5bddf9e04f8fdfa">[link]</a>    </td> </tr> <tr> <td>serviceradar-agent.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-6f512d71062e57d9e7fd0d3a365c05d1647a6cb6d322d3a273086df21d07f044">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-5eef6248133fed3bdc07087a978968b4ecbb9a015da151786cb346ae8a182fba">+9/-0</a>      </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-78abcc95294cadf2793bde4b458e983b2be3d637a5083f6eacac334518299e1c">+27/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-2d9fc2b6ac58933068ee3e89e77541301343c0fd20d0dba597661d9c953b4fda">+8/-0</a>      </td> </tr> <tr> <td>serviceradar-bmp-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-9f7bb48335466cb4c5aa82961010b40dca8101369c7c27ed91f3970c24465f47">+21/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-cba39039e2365e6c8bbb1664687a9913e2c77032fa619290c0c94ee0d108fa2d">+9/-0</a>      </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-d48c91094161218610f314563637b6f10e33936bf938ae94f28bcda34ac09e61">+99/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-558fdec9b28a58adc0cee8b4ab194f666b5443836d78b425a426fbfdf4e0f2cf">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-1eae48416a3f2743a5c4891f749edae6d7b35fdf18180225a0668df62f8c9864">[link]</a>    </td> </tr> <tr> <td>components.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-0eb1b1b3d2b2eb6070da2458fc269b087febe86c82dfa7b947dce78f687d8c6c">+677/-0</a>  </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-f6e7d6a3406ba37ad0d7d84cbfddab05ed473611d79b98deb3f59f433541ca75">+13/-0</a>    </td> </tr> <tr> <td>core-elx.env</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-ebbdc6529654fbcc3c89917ac5566367727d92dee3922f2142c2f475fd541775">[link]</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-b4e6dc2a170653320f2298bab501d9fde5e7232980fe79b0a33a77a77eab5a32">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-e2fd5c501d81ee86f73a7095e11581a503fb7fc0c674212d0b3e817ef1bae766">[link]</a>    </td> </tr> <tr> <td>serviceradar-core-elx.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-090d91356b949264630141d1c81d8848fe08503f5ffd9f8891aa8885d53301ac">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-1bf92554d04fdc1b2474384c80459ed2adc18642c081cf0adc9cdd336555e9a5">+9/-0</a>      </td> </tr> <tr> <td>datasvc.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-8c05ef42b1a03a86b80203a474c609bd85e8e220e48c9233baa5d9da1e0e2560">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-a6f34e0e13405fe1c462b17c019d940f3f64ee7625131960fc9f49dc3cba4be1">+121/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-e193a05d913d045643f68961731a5cf8c13a18dbcaf6449657be0871420342be">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-248b029a3b863c860badd5bf2942af4b7e74025199f2d4b106baf251524d7b5c">[link]</a>    </td> </tr> <tr> <td>serviceradar-datasvc.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-051366b65b32176c4228cd5a538f106c7b6b901a5d3d379f079cc2ead5f36581">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-bd51e5988945ebae0126f0c26bdbe47093db97914ba50c753f62a4190900d67b">+9/-0</a>      </td> </tr> <tr> <td>db-event-writer.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-1d7a5a0d1bf7a4799ad9192d2a458fd3a874e90e3e0f984adacff13ab3c30db0">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-3f5cb54ec5a3b8cf1f1442b981f32084f6da136e1e8b51ffc6d6616d1b0555d3">+121/-0</a>  </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-999843f8c957305a2a72b7291161755418349d8fe008ed241c200eb80c387383">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-9b10459dd3ab299a5e2795d87480aeef117ed2b0a440a9e463508c36011fa459">[link]</a>    </td> </tr> <tr> <td>serviceradar-event-writer.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-09035233c3aea0dd35c69ee3546a824314ebedf15391519c331f59f7718e31b3">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-4702b0851fc56ef125b21219260d660f25e58a8d3d69c833c9121b0b32ec65e4">+9/-0</a>      </td> </tr> <tr> <td>faker.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-1b2810c87baf9e608088f4ac1fabc27f7f4d875b446c4cb69a86b11c14b8b64d">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-d574f1856216dfe83e583c825087808e5e7eea18318626f936fb0b1c5abc4af3">+93/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-3500af66b819187f620813740507f3143b2c3092d3b7c19d4341dee214af9cc0">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-d279c1417fa1a9b70f2403f18d4650bebd2ba7c4fa04932a705f4adfc964de54">[link]</a>    </td> </tr> <tr> <td>serviceradar-faker.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-797614d898799e2807e680411a8cae841d5365fcfe86ac53621a3194d801d22f">[link]</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-26e6a9ead561f65593942caebdb25323ef6b194cd4caec6da294a3dbad6127d9">+9/-0</a>      </td> </tr> <tr> <td>flow-collector.json</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-a480dceb64927f584993aadb30aeff14c9babacaef41cc1402b75ac7452636d6">+29/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-16e6354bb3ec3f90a6830d2d71b62c3fe6d095bfd6d961f8747383a065223356">+65/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-8f3305098b96d8258211e103b43d60959a7e3b7900312aa01745e762f0ffb939">+24/-0</a>    </td> </tr> <tr> <td>serviceradar-flow-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-5648ce1f784b5117a90a00956e5330ca3e34058a9d623ccd2123211c22220496">+21/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-6e9a0b740b9ed11921105cd2326a433fdac9dd11d54e1045a119ff350b3af084">+9/-0</a>      </td> </tr> <tr> <td>log-collector.toml</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-a7d46724586a71ba3de275cddc15ffcd4d6de9b6315e34dc53ce88e10828fd47">+13/-0</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-cf7184670a4aeb2929a07fdb4b323e0dc9d00c593e7c764f8b7105d8ea226a92">+63/-0</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-e159c05de1dc7182c002ddba3e020f380be35abc8a17727d3e2de7765c2e12fd">+31/-0</a>    </td> </tr> <tr> <td>serviceradar-log-collector.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-f4c27ab1fab752b304c8895d8db6a3fdae82fe6d0ece835657348c7c12120fbf">+29/-0</a>    </td> </tr> <tr> <td>BUILD.bazel</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-0d02d96f6ee9963fe917b9b9e5cb2af705ab32ba96e08c89c0204f684ae658ca">+9/-0</a>      </td> </tr> <tr> <td>nats-cloud.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-3261539de7f9c008c53f093e16530e50120b1e890ad552dce01080daa9ea5d73">[link]</a>    </td> </tr> <tr> <td>nats-leaf.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-af78ed28cd08e6b01c866c177b5eecc892d988c983e98dd3da228dbcac4cc746">[link]</a>    </td> </tr> <tr> <td>nats-server.conf</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-fb07e2ecd09252719ae6f5ca36aac14d58bd911f7cdcfc26a698160584af512a">[link]</a>    </td> </tr> <tr> <td>package.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-ade55813f95250a33958d2cce2e5bb7dc15400296e67cd736726e3e1e3d18ba1">[link]</a>    </td> </tr> <tr> <td>postinstall.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-c7031345b8d93c6c76ae89819fc9d06a05e48af7536c8e7e059f918ec2c66856">[link]</a>    </td> </tr> <tr> <td>preremove.sh</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-41d6efbbb35ecb95b059bc39a1afabfdc33fcd7a21c8505fb9e962b06b0151e7">[link]</a>    </td> </tr> <tr> <td>serviceradar-nats.service</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-e07b747234f34b4dc4fb766d550fc369aa67725682773e5250d2fac35c275843">[link]</a>    </td> </tr> <tr> <td>Additional files not shown</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-2f328e4cd8dbe3ad193e49d92bcf045f47a6b72b1e9487d366f6b8288589b4ca"></a></td> </tr> </table></details></td></tr></tbody></table> </details> ___

qodo-code-review[bot] commented

2026-03-01 08:04:48 +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/2969#issuecomment-3979455279
Original created: 2026-03-01T08:04:48Z

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	DOM XSS Description: Tooltip content is written via `tooltip.innerHTML = html` where `html` interpolates `src`, `dst`, `mid_value`, and `port` derived from `el.dataset.edges` (backend-controlled data), enabling DOM XSS if any of those values contain HTML/JS payloads (e.g., a label like `<img src=x` `onerror=alert(1)>`). NetflowSankeyChart.js [72-88] Referred Code const showTooltip = (evt, html) => { if (!html) return const rect = el.getBoundingClientRect() const x = evt.clientX - rect.left const y = evt.clientY - rect.top tooltip.innerHTML = html tooltip.classList.remove("hidden") const pad = 8 const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width \|\| 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` }
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Swallowed exceptions: Multiple `catch` blocks silently ignore errors (e.g., observer disconnect and tooltip cleanup), which can hide rendering/cleanup failures and complicate debugging. Referred Code `destroyed() { try { this._resizeObserver?.disconnect() } catch (_e) {} try { this._tooltipCleanup?.() } catch (_e) {} },` 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: Leaky error detail: The UI renders `e.message` directly into the SVG fallback text, 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 untrusted `edges` fields and assigned via `tooltip.innerHTML` without escaping, enabling HTML injection/XSS if the dataset contains malicious strings. 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
⚪

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/2969#issuecomment-3979455279 Original created: 2026-03-01T08:04:48Z --- ## 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 </summary> Description: Tooltip content is written via <code>tooltip.innerHTML = html</code> where <code>html</code> interpolates <code>src</code>, <code>dst</code>, <code>mid_value</code>, and <code>port</code> derived from <code>el.dataset.edges</code> (backend-controlled data), enabling DOM XSS if any of those values contain HTML/JS payloads (e.g., a label like <code><img src=x </code> <code>onerror=alert(1)></code>). <a href='https://github.com/carverauto/serviceradar/pull/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R88'>NetflowSankeyChart.js [72-88]</a> <details open><summary>Referred Code</summary> ```javascript const showTooltip = (evt, html) => { if (!html) return const rect = el.getBoundingClientRect() const x = evt.clientX - rect.left const y = evt.clientY - rect.top tooltip.innerHTML = html tooltip.classList.remove("hidden") const pad = 8 const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width || 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` } ``` </details></details></td></tr> <tr><td colspan='2'>Ticket Compliance</td></tr> <tr><td>⚪</td><td><details><summary>🎫 No ticket provided </summary> - [ ] Create ticket/issue  </details></td></tr> <tr><td colspan='2'>Codebase Duplication Compliance</td></tr> <tr><td>⚪</td><td><details><summary>Codebase context is not defined </summary> Follow the <a href='https://qodo-merge-docs.qodo.ai/core-abilities/rag_context_enrichment/'>guide</a> to enable codebase context checks. </details></td></tr> <tr><td colspan='2'>Custom Compliance</td></tr> <tr><td rowspan=1>🟢</td><td> <details><summary>Generic: Meaningful Naming and Self-Documenting Code</summary> **Objective:** Ensure all identifiers clearly express their purpose and intent, making code self-documenting **Status:** Passed > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td rowspan=3>🔴</td> <td><details> <summary>Generic: Robust Error Handling and Edge Case Management</summary> **Objective:** Ensure comprehensive error handling that provides meaningful context and graceful degradation **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R17-R24'>Swallowed exceptions</a>: Multiple <code>catch</code> blocks silently ignore errors (e.g., observer disconnect and tooltip cleanup), which can hide rendering/cleanup failures and complicate debugging. <details open><summary>Referred Code</summary> ```javascript destroyed() { try { this._resizeObserver?.disconnect() } catch (_e) {} try { this._tooltipCleanup?.() } catch (_e) {} }, ``` </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/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R375-R377'>Leaky error detail</a>: The UI renders <code>e.message</code> directly into the SVG fallback text, 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/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R88'>XSS via innerHTML</a>: Tooltip content is built from untrusted <code>edges</code> fields and assigned via <code>tooltip.innerHTML</code> without escaping, enabling HTML injection/XSS if the dataset contains malicious strings. <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> <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 08:06:20 +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/2969#issuecomment-3979457268
Original created: 2026-03-01T08:06:20Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Do not commit build artifacts The PR adds a large, auto-generated JavaScript bundle. This file should be removed from version control and added to `.gitignore`, with generation handled by the build process. Examples: elixir/web-ng/priv/react/server.js [1-424670] // @bun var __create = Object.create; var __getProtoOf = Object.getPrototypeOf; var __defProp = Object.defineProperty; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __toESM = (mod, isNodeMode, target) => { target = mod != null ? __create(__getProtoOf(mod)) : {}; const to = isNodeMode \|\| !mod \|\| !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target; for (let key of __getOwnPropNames(mod)) ... (clipped 424659 lines) Solution Walkthrough: Before: `# Project structure includes the build artifact elixir/web-ng/priv/react/server.js # Large, auto-generated file is committed # .gitignore does not list the build artifact # ...` After: `# Project structure after removing the build artifact from git # elixir/web-ng/priv/react/server.js is no longer tracked # .gitignore is updated to exclude the build artifact # ... /elixir/web-ng/priv/react/server.js` Suggestion importance[1-10]: 10 __ Why: The suggestion correctly identifies a critical anti-pattern of committing a large, auto-generated build artifact (`server.js`), which bloats the repository and makes code reviews and merges extremely difficult.	High
Possible issue	Preserve edge data in degraded mode Preserve original edge data during aggregation in the degraded (2-column) Sankey chart view. This ensures that click events on links will function correctly in this mode. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [205-216] const byPair = new Map() for (const e2 of edges) { const src2 = e2?.src const dst2 = e2?.dst const bytes2 = Number(e2?.bytes \|\| 0) if (!src2 \|\| !dst2 \|\| !Number.isFinite(bytes2) \|\| bytes2 <= 0) continue add2(src2, "src") add2(dst2, "dst") const key = `${nodeKey("src", src2)}\|${nodeKey("dst", dst2)}` - const cur = byPair.get(key) \|\| 0 - byPair.set(key, cur + bytes2) + const cur = byPair.get(key) \|\| {value: 0, edge: e2} + cur.value += bytes2 + byPair.set(key, cur) } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: This suggestion correctly identifies a bug where click events in the degraded chart view would fail and provides a valid fix to preserve necessary data, improving functional correctness.	Medium
	add tooltip cleanup on destroy Add a call to `this._tooltipCleanup?.()` within the `destroyed` lifecycle hook to prevent potential memory leaks from tooltip event listeners. elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js [26-30] `destroyed() { try { this._resizeObserver?.disconnect() } catch (_e) {} + try { + this._tooltipCleanup?.() + } catch (_e) {} },` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a missing cleanup call in the `destroyed` lifecycle hook, which could lead to a memory leak. Adding the `_tooltipCleanup` call is a critical fix for resource management.	Medium
	Use map's 'idle' event for synchronization Replace the `load` event with the `idle` event for map synchronization operations to prevent potential race conditions. elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [92-97] `this._map.addControl(new mapboxgl.NavigationControl({showCompass: true}), "top-right") + +this._map.on("idle", () => { + if (this._map.isStyleLoaded()) { + this._syncMarkers() + this._fitToMarkers() + this._stampStyleUrl(style) + } +}) this._map.on("load", () => { this._map.resize() - this._syncMarkers() - this._fitToMarkers() - this._stampStyleUrl(style) })` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a potential race condition and proposes a more robust solution using the `idle` event, which is a best practice for Mapbox GL JS to ensure map stability.	Medium
	Avoid redefining React component on update Refactor the `jdm_editor_update` handler to avoid redefining the `UpdatedEditor` component on every update. Instead, pass the new `definition` as a prop to the existing `EditorWithHandlers` component. elixir/web-ng/assets/js/hooks/JdmEditorHook.js [128-173] +const EditorWithHandlers = ({initialDefinition, initialTheme}) => { + const [definition, setDefinition] = React.useState(initialDefinition) + const [theme, setTheme] = React.useState(initialTheme) + + React.useEffect(() => { + setDefinition(initialDefinition) + }, [initialDefinition]) + + // Listen for theme changes + React.useEffect(() => { + const observer = new MutationObserver(() => { + const newTheme = getPhoenixTheme() + if (newTheme !== theme) { + setTheme(newTheme) + } + }) + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ["data-theme"], + }) + + // Also listen for system theme changes + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + const handleMediaChange = () => setTheme(getPhoenixTheme()) + mediaQuery.addEventListener("change", handleMediaChange) + + return () => { + observer.disconnect() + mediaQuery.removeEventListener("change", handleMediaChange) + } + }, [theme]) + + const handleChange = React.useCallback((newDef) => { + setDefinition(newDef) + // Push change event to LiveView + hook.pushEvent("jdm_editor_change", {definition: newDef}) + }, []) + + // Wrap in a full-height container - ReactFlow needs explicit height + // Pass theme config with mode for JDM editor dark mode support + const themeConfig = {mode: theme} + + return React.createElement( + "div", + { + style: {height: "100%", width: "100%"}, + className: theme === "dark" ? "grl-dark" : "grl-light", + "data-theme": theme, + }, + React.createElement( + JdmConfigProvider, + {theme: themeConfig}, + React.createElement(DecisionGraph, { + value: definition, + onChange: handleChange, + disabled: props.readOnly, + }), + ), + ) +} + +// Clear container and render fresh (SSR may not work with complex React deps) +container.innerHTML = "" +this.reactRoot = createRoot(container) +this.reactRoot.render(React.createElement(EditorWithHandlers, {initialDefinition: props.definition, initialTheme: currentTheme})) + +// Handle updates from LiveView this.handleEvent("jdm_editor_update", ({definition}) => { - // Re-render with new definition - const UpdatedEditor = ({initialTheme}) => { - const [def, setDef] = React.useState(definition) - const [theme, setTheme] = React.useState(initialTheme) - - React.useEffect(() => { - const observer = new MutationObserver(() => { - setTheme(getPhoenixTheme()) - }) - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ["data-theme"], - }) - return () => observer.disconnect() - }, []) - - const handleChange = React.useCallback((newDef) => { - setDef(newDef) - hook.pushEvent("jdm_editor_change", {definition: newDef}) - }, []) - - // Wrap in a full-height container - ReactFlow needs explicit height - const themeConfig = {mode: theme} - - return React.createElement( - "div", - { - style: {height: "100%", width: "100%"}, - className: theme === "dark" ? "grl-dark" : "grl-light", - "data-theme": theme, - }, - React.createElement( - JdmConfigProvider, - {theme: themeConfig}, - React.createElement(DecisionGraph, { - value: def, - onChange: handleChange, - disabled: props.readOnly, - }), - ), - ) - } - this.reactRoot.render(React.createElement(UpdatedEditor, {initialTheme: getPhoenixTheme()})) + // Re-render with new definition by passing a new prop + this.reactRoot.render(React.createElement(EditorWithHandlers, {initialDefinition: definition, initialTheme: getPhoenixTheme()})) }) `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies an anti-pattern in React where a component is redefined on every render, and proposes a valid, more idiomatic solution that improves performance and state management.	Medium
	Fix incorrect error handling logic Remove the `atmosphereSuppressUntil` assignment from the generic deck.gl error handler to prevent incorrectly disabling the atmosphere effect for unrelated errors. elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js [150-155] if (this.state.summary) this.state.summary.textContent = `render error: ${String(error)}` if (this.state.lastGraph) { - const now = typeof performance !== "undefined" ? performance.now() : Date.now() - this.state.atmosphereSuppressUntil = now + 1200 this.deps.renderGraph(this.state.lastGraph) } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a bug where any rendering error would incorrectly suppress the atmosphere effect, and the proposed fix is accurate.	Low
	Fix tooltip positioning race condition Fix a potential race condition in tooltip positioning. The tooltip's dimensions are read before its content is fully rendered, which can lead to incorrect placement. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [72-88] 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") + // Now that the tooltip is visible and has content, get its dimensions. + const ttRect = tooltip.getBoundingClientRect() const pad = 8 - const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width \|\| 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 2 __ Why: The suggestion correctly identifies a potential browser rendering race condition, but the `improved_code` is identical to the `existing_code` and offers no actual fix.	Low
General	Debounce resize renders Debounce the `_render` call within the `ResizeObserver` callback to prevent performance issues from rapid resize events. elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [9] `-this._resizeObserver = new ResizeObserver(() => this._render()) +let resizeTimeout +this._resizeObserver = new ResizeObserver(() => { + clearTimeout(resizeTimeout) + resizeTimeout = setTimeout(() => this._render(), 100) +})` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 6 __ Why: This is a valid performance improvement that debounces resize events, preventing excessive re-renders and potential UI lag, which is a good practice for `ResizeObserver`.	Low
	Use anchor tag for navigation Replace the	Low
	Batch stamp pieces then join Optimize string concatenation in `packetFlowStamp` by building an array of parts and using `join()` for better performance with large datasets. elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.js [1-13] function packetFlowStamp(edgeData) { if (!Array.isArray(edgeData) \|\| edgeData.length === 0) return "empty" const sampleCount = Math.min(edgeData.length, 96) - let acc = `${edgeData.length}` + const parts = [String(edgeData.length)] const step = Math.max(1, Math.floor(edgeData.length / sampleCount)) for (let i = 0; i < edgeData.length; i += step) { const edge = edgeData[i] \|\| {} const key = edge.interactionKey \|\| `${edge.sourceId \|\| "s"}:${edge.targetId \|\| "t"}:${i}` - const telemetryEligible = edge.telemetryEligible === false \|\| edge.telemetry_eligible === false ? 0 : 1 - acc += `\|${key}:${Number(edge.flowPps \|\| 0)}:${Number(edge.flowBps \|\| 0)}:${Number(edge.flowPpsAb \|\| 0)}:${Number(edge.flowPpsBa \|\| 0)}:${Number(edge.flowBpsAb \|\| 0)}:${Number(edge.flowBpsBa \|\| 0)}:${Number(edge.capacityBps \|\| 0)}:${telemetryEligible}` + const eligible = edge.telemetryEligible === false \|\| edge.telemetry_eligible === false ? 0 : 1 + parts.push(`${key}:${+edge.flowPps \|\| 0}:${+edge.flowBps \|\| 0}:${+edge.flowPpsAb \|\| 0}:${+edge.flowPpsBa \|\| 0}:${+edge.flowBpsAb \|\| 0}:${+edge.flowBpsBa \|\| 0}:${+edge.capacityBps \|\| 0}:${eligible}`) } - return acc + return parts.join("\|") } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 5 __ Why: The suggestion offers a valid performance micro-optimization for string building that is more efficient for large datasets, improving code quality.	Low
	Remove duplicated data normalization logic Refactor the code by using the `normalizeToPct` helper function for the main data processing to eliminate duplicated normalization logic. elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js [60-133] -const data = raw - .map((d) => { - const t = new Date(d.t) - const out = {t} - let sum = 0 - for (const k of visibleKeys) { - const v = Number(d[k] \|\| 0) - out[k] = v - sum += v - } - out.__sum = sum - return out - }) - .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) - .sort((a, b) => a.t - b.t) - .map((d) => { - const denom = d.__sum \|\| 1 - const out = {t: d.t} - for (const k of visibleKeys) out[k] = Number(d[k] \|\| 0) / denom - return out - }) - -if (data.length === 0) return - -const stack = d3.stack().keys(visibleKeys) -const series = stack(data) -... const normalizeToPct = (points) => { const normalized = points .map((d) => { const t = new Date(d.t) const out = {t} let sum = 0 for (const k of visibleKeys) { const v = Number(d[k] \|\| 0) out[k] = v sum += v } out.__sum = sum return out }) .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) .sort((a, b) => a.t - b.t) .map((d) => { const denom = d.__sum \|\| 1 const out = {t: d.t} for (const k of visibleKeys) out[k] = Number(d[k] \|\| 0) / denom return out }) return normalized } +const data = normalizeToPct(raw) + +if (data.length === 0) return + +const stack = d3.stack().keys(visibleKeys) +const series = stack(data) +... + `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies duplicated code and proposes a valid refactoring to improve maintainability by adhering to the DRY principle.	Low
	Remove unused fallback element Remove the fallback element from the DOM in `_clearFallback` instead of just hiding it with `style.display = "none"`. elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [304-308] `_clearFallback() { if (!this.el) return const fb = this.el.querySelector("[data-map-fallback]") - if (fb) fb.style.display = "none" + if (fb) fb.remove() }` `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 4 __ Why: The suggestion improves DOM hygiene by removing a temporary element instead of just hiding it, which is a good practice for preventing DOM clutter, although the impact is minor.	Low
More

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/2969#issuecomment-3979457268 Original created: 2026-03-01T08:06:20Z --- ## PR Code Suggestions ✨  Explore these optional code suggestions: <table><thead><tr><td>Category</td><td align=left>Suggestion                                                                                                                                    </td><td align=center>Impact</td></tr><tbody><tr><td rowspan=1>High-level</td> <td> <details><summary>Do not commit build artifacts</summary> ___ **The PR adds a large, auto-generated JavaScript bundle. This file should be removed from version control and added to <code>.gitignore</code>, with generation handled by the build process.** ### Examples: <details> <summary> <a href="https://github.com/carverauto/serviceradar/pull/2969/files#diff-cd4023c03f4619a4796b379912c6915564323f0565611fe065191872fad38f06R1-R424670">elixir/web-ng/priv/react/server.js [1-424670]</a> </summary> ```javascript // @bun var __create = Object.create; var __getProtoOf = Object.getPrototypeOf; var __defProp = Object.defineProperty; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __toESM = (mod, isNodeMode, target) => { target = mod != null ? __create(__getProtoOf(mod)) : {}; const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target; for (let key of __getOwnPropNames(mod)) ... (clipped 424659 lines) ``` </details> ### Solution Walkthrough: #### Before: ```javascript # Project structure includes the build artifact elixir/web-ng/priv/react/server.js # Large, auto-generated file is committed # .gitignore does not list the build artifact # ... ``` #### After: ```javascript # Project structure after removing the build artifact from git # elixir/web-ng/priv/react/server.js is no longer tracked # .gitignore is updated to exclude the build artifact # ... /elixir/web-ng/priv/react/server.js ``` <details><summary>Suggestion importance[1-10]: 10</summary> __ Why: The suggestion correctly identifies a critical anti-pattern of committing a large, auto-generated build artifact (`server.js`), which bloats the repository and makes code reviews and merges extremely difficult. </details></details></td><td align=center>High </td></tr><tr><td rowspan=6>Possible issue</td> <td> <details><summary>Preserve edge data in degraded mode</summary> ___ **Preserve original edge data during aggregation in the degraded (2-column) Sankey chart view. This ensures that click events on links will function correctly in this mode.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [205-216]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R205-R216) ```diff const byPair = new Map() for (const e2 of edges) { const src2 = e2?.src const dst2 = e2?.dst const bytes2 = Number(e2?.bytes || 0) if (!src2 || !dst2 || !Number.isFinite(bytes2) || bytes2 <= 0) continue add2(src2, "src") add2(dst2, "dst") const key = `${nodeKey("src", src2)}|${nodeKey("dst", dst2)}` - const cur = byPair.get(key) || 0 - byPair.set(key, cur + bytes2) + const cur = byPair.get(key) || {value: 0, edge: e2} + cur.value += bytes2 + byPair.set(key, cur) } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: This suggestion correctly identifies a bug where click events in the degraded chart view would fail and provides a valid fix to preserve necessary data, improving functional correctness. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>add tooltip cleanup on destroy</summary> ___ **Add a call to <code>this._tooltipCleanup?.()</code> within the <code>destroyed</code> lifecycle hook to prevent potential memory leaks from tooltip event listeners.** [elixir/web-ng/assets/js/hooks/charts/NetflowLineSeriesChart.js [26-30]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-b078a99dbb234d0c9b13ca8d36e57696e70a4bbb9213f31a2de2c17935ad8074R26-R30) ```diff destroyed() { try { this._resizeObserver?.disconnect() } catch (_e) {} + try { + this._tooltipCleanup?.() + } catch (_e) {} }, ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies a missing cleanup call in the `destroyed` lifecycle hook, which could lead to a memory leak. Adding the `_tooltipCleanup` call is a critical fix for resource management. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Use map's 'idle' event for synchronization</summary> ___ **Replace the <code>load</code> event with the <code>idle</code> event for map synchronization operations to prevent potential race conditions.** [elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [92-97]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R92-R97) ```diff this._map.addControl(new mapboxgl.NavigationControl({showCompass: true}), "top-right") + +this._map.on("idle", () => { + if (this._map.isStyleLoaded()) { + this._syncMarkers() + this._fitToMarkers() + this._stampStyleUrl(style) + } +}) this._map.on("load", () => { this._map.resize() - this._syncMarkers() - this._fitToMarkers() - this._stampStyleUrl(style) }) ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies a potential race condition and proposes a more robust solution using the `idle` event, which is a best practice for Mapbox GL JS to ensure map stability. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Avoid redefining React component on update</summary> ___ **Refactor the <code>jdm_editor_update</code> handler to avoid redefining the <code>UpdatedEditor</code> component on every update. Instead, pass the new <code>definition</code> as a prop to the existing <code>EditorWithHandlers</code> component.** [elixir/web-ng/assets/js/hooks/JdmEditorHook.js [128-173]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-e82967d2468cd02bd7524d51bcd9e22d9432b4d0afd882442515c7a814ae18f8R128-R173) ```diff +const EditorWithHandlers = ({initialDefinition, initialTheme}) => { + const [definition, setDefinition] = React.useState(initialDefinition) + const [theme, setTheme] = React.useState(initialTheme) + + React.useEffect(() => { + setDefinition(initialDefinition) + }, [initialDefinition]) + + // Listen for theme changes + React.useEffect(() => { + const observer = new MutationObserver(() => { + const newTheme = getPhoenixTheme() + if (newTheme !== theme) { + setTheme(newTheme) + } + }) + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ["data-theme"], + }) + + // Also listen for system theme changes + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + const handleMediaChange = () => setTheme(getPhoenixTheme()) + mediaQuery.addEventListener("change", handleMediaChange) + + return () => { + observer.disconnect() + mediaQuery.removeEventListener("change", handleMediaChange) + } + }, [theme]) + + const handleChange = React.useCallback((newDef) => { + setDefinition(newDef) + // Push change event to LiveView + hook.pushEvent("jdm_editor_change", {definition: newDef}) + }, []) + + // Wrap in a full-height container - ReactFlow needs explicit height + // Pass theme config with mode for JDM editor dark mode support + const themeConfig = {mode: theme} + + return React.createElement( + "div", + { + style: {height: "100%", width: "100%"}, + className: theme === "dark" ? "grl-dark" : "grl-light", + "data-theme": theme, + }, + React.createElement( + JdmConfigProvider, + {theme: themeConfig}, + React.createElement(DecisionGraph, { + value: definition, + onChange: handleChange, + disabled: props.readOnly, + }), + ), + ) +} + +// Clear container and render fresh (SSR may not work with complex React deps) +container.innerHTML = "" +this.reactRoot = createRoot(container) +this.reactRoot.render(React.createElement(EditorWithHandlers, {initialDefinition: props.definition, initialTheme: currentTheme})) + +// Handle updates from LiveView this.handleEvent("jdm_editor_update", ({definition}) => { - // Re-render with new definition - const UpdatedEditor = ({initialTheme}) => { - const [def, setDef] = React.useState(definition) - const [theme, setTheme] = React.useState(initialTheme) - - React.useEffect(() => { - const observer = new MutationObserver(() => { - setTheme(getPhoenixTheme()) - }) - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ["data-theme"], - }) - return () => observer.disconnect() - }, []) - - const handleChange = React.useCallback((newDef) => { - setDef(newDef) - hook.pushEvent("jdm_editor_change", {definition: newDef}) - }, []) - - // Wrap in a full-height container - ReactFlow needs explicit height - const themeConfig = {mode: theme} - - return React.createElement( - "div", - { - style: {height: "100%", width: "100%"}, - className: theme === "dark" ? "grl-dark" : "grl-light", - "data-theme": theme, - }, - React.createElement( - JdmConfigProvider, - {theme: themeConfig}, - React.createElement(DecisionGraph, { - value: def, - onChange: handleChange, - disabled: props.readOnly, - }), - ), - ) - } - this.reactRoot.render(React.createElement(UpdatedEditor, {initialTheme: getPhoenixTheme()})) + // Re-render with new definition by passing a new prop + this.reactRoot.render(React.createElement(EditorWithHandlers, {initialDefinition: definition, initialTheme: getPhoenixTheme()})) }) ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies an anti-pattern in React where a component is redefined on every render, and proposes a valid, more idiomatic solution that improves performance and state management. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Fix incorrect error handling logic</summary> ___ **Remove the <code>atmosphereSuppressUntil</code> assignment from the generic deck.gl error handler to prevent incorrectly disabling the atmosphere effect for unrelated errors.** [elixir/web-ng/assets/js/lib/god_view/lifecycle_dom_setup_methods.js [150-155]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-7b88fcb183a776c3df89b3352962b5cc6164d2302a74d211fb3fe4df9776cdd7R150-R155) ```diff if (this.state.summary) this.state.summary.textContent = `render error: ${String(error)}` if (this.state.lastGraph) { - const now = typeof performance !== "undefined" ? performance.now() : Date.now() - this.state.atmosphereSuppressUntil = now + 1200 this.deps.renderGraph(this.state.lastGraph) } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly identifies a bug where any rendering error would incorrectly suppress the atmosphere effect, and the proposed fix is accurate. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Fix tooltip positioning race condition</summary> ___ **Fix a potential race condition in tooltip positioning. The tooltip's dimensions are read before its content is fully rendered, which can lead to incorrect placement.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [72-88]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R72-R88) ```diff 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") + // Now that the tooltip is visible and has content, get its dimensions. + const ttRect = tooltip.getBoundingClientRect() const pad = 8 - const ttRect = tooltip.getBoundingClientRect() const maxLeft = rect.width - (ttRect.width || 180) - pad const left = Math.max(pad, Math.min(maxLeft, x + 12)) const top = Math.max(pad, Math.min(rect.height - 48, y - 12)) tooltip.style.left = `${left}px` tooltip.style.top = `${top}px` } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 2</summary> __ Why: The suggestion correctly identifies a potential browser rendering race condition, but the `improved_code` is identical to the `existing_code` and offers no actual fix. </details></details></td><td align=center>Low </td></tr><tr><td rowspan=5>General</td> <td> <details><summary>Debounce resize renders</summary> ___ **Debounce the <code>_render</code> call within the <code>ResizeObserver</code> callback to prevent performance issues from rapid resize events.** [elixir/web-ng/assets/js/hooks/charts/NetflowSankeyChart.js [9]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-b22f1da647d47fed924dc9bf69d0c722bf6cba6f2d2390643ac8d354606da692R9-R9) ```diff -this._resizeObserver = new ResizeObserver(() => this._render()) +let resizeTimeout +this._resizeObserver = new ResizeObserver(() => { + clearTimeout(resizeTimeout) + resizeTimeout = setTimeout(() => this._render(), 100) +}) ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: This is a valid performance improvement that debounces resize events, preventing excessive re-renders and potential UI lag, which is a good practice for `ResizeObserver`. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Use anchor tag for navigation</summary> ___ **Replace the <code><button></code> element with an <code><a></code> tag for the IP address link to ensure semantic correctness and improve accessibility.** [elixir/web-ng/assets/js/lib/god_view/rendering_selection_methods.js [25-27]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-0da723c3f5b16409d7b5a10013bec415a4d9326e4d752e931bb2bba6792024d3R25-R27) ```diff const ipLine = ipHref - ? `<div>IP: <button type="button" class="link link-primary" data-device-href="${this.escapeHtml(ipHref)}">${ipText}</button></div>` + ? `<div>IP: <a href="${this.escapeHtml(ipHref)}" class="link link-primary" data-device-href="${this.escapeHtml(ipHref)}">${ipText}</a></div>` : `<div>IP: ${ipText}</div>` ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly identifies the semantic misuse of a `<button>` for navigation and proposes using an `<a>` tag, which improves accessibility and adheres to web standards. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Batch stamp pieces then join</summary> ___ **Optimize string concatenation in <code>packetFlowStamp</code> by building an array of parts and using <code>join()</code> for better performance with large datasets.** [elixir/web-ng/assets/js/lib/god_view/rendering_style_edge_particle_methods.js [1-13]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-600ea8206fafee5e8351fe463190a1dce3d3feb010dbda969a551d8afc6a8845R1-R13) ```diff function packetFlowStamp(edgeData) { if (!Array.isArray(edgeData) || edgeData.length === 0) return "empty" const sampleCount = Math.min(edgeData.length, 96) - let acc = `${edgeData.length}` + const parts = [String(edgeData.length)] const step = Math.max(1, Math.floor(edgeData.length / sampleCount)) for (let i = 0; i < edgeData.length; i += step) { const edge = edgeData[i] || {} const key = edge.interactionKey || `${edge.sourceId || "s"}:${edge.targetId || "t"}:${i}` - const telemetryEligible = edge.telemetryEligible === false || edge.telemetry_eligible === false ? 0 : 1 - acc += `|${key}:${Number(edge.flowPps || 0)}:${Number(edge.flowBps || 0)}:${Number(edge.flowPpsAb || 0)}:${Number(edge.flowPpsBa || 0)}:${Number(edge.flowBpsAb || 0)}:${Number(edge.flowBpsBa || 0)}:${Number(edge.capacityBps || 0)}:${telemetryEligible}` + const eligible = edge.telemetryEligible === false || edge.telemetry_eligible === false ? 0 : 1 + parts.push(`${key}:${+edge.flowPps || 0}:${+edge.flowBps || 0}:${+edge.flowPpsAb || 0}:${+edge.flowPpsBa || 0}:${+edge.flowBpsAb || 0}:${+edge.flowBpsBa || 0}:${+edge.capacityBps || 0}:${eligible}`) } - return acc + return parts.join("|") } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 5</summary> __ Why: The suggestion offers a valid performance micro-optimization for string building that is more efficient for large datasets, improving code quality. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Remove duplicated data normalization logic</summary> ___ **Refactor the code by using the <code>normalizeToPct</code> helper function for the main data processing to eliminate duplicated normalization logic.** [elixir/web-ng/assets/js/hooks/charts/NetflowStacked100Chart.js [60-133]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-67815c89effaf41060f95649ad3b755855bfa0ed7a9b77a9f1a9e72ebb73cd53R60-R133) ```diff -const data = raw - .map((d) => { - const t = new Date(d.t) - const out = {t} - let sum = 0 - for (const k of visibleKeys) { - const v = Number(d[k] || 0) - out[k] = v - sum += v - } - out.__sum = sum - return out - }) - .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) - .sort((a, b) => a.t - b.t) - .map((d) => { - const denom = d.__sum || 1 - const out = {t: d.t} - for (const k of visibleKeys) out[k] = Number(d[k] || 0) / denom - return out - }) - -if (data.length === 0) return - -const stack = d3.stack().keys(visibleKeys) -const series = stack(data) -... const normalizeToPct = (points) => { const normalized = points .map((d) => { const t = new Date(d.t) const out = {t} let sum = 0 for (const k of visibleKeys) { const v = Number(d[k] || 0) out[k] = v sum += v } out.__sum = sum return out }) .filter((d) => d.t instanceof Date && !Number.isNaN(d.t.getTime())) .sort((a, b) => a.t - b.t) .map((d) => { const denom = d.__sum || 1 const out = {t: d.t} for (const k of visibleKeys) out[k] = Number(d[k] || 0) / denom return out }) return normalized } +const data = normalizeToPct(raw) + +if (data.length === 0) return + +const stack = d3.stack().keys(visibleKeys) +const series = stack(data) +... + ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 5</summary> __ Why: The suggestion correctly identifies duplicated code and proposes a valid refactoring to improve maintainability by adhering to the DRY principle. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Remove unused fallback element</summary> ___ **Remove the fallback element from the DOM in <code>_clearFallback</code> instead of just hiding it with <code>style.display = "none"</code>.** [elixir/web-ng/assets/js/hooks/MapboxFlowMap.js [304-308]](https://github.com/carverauto/serviceradar/pull/2969/files#diff-2d8dd0175678c4b8eecca8eca366991da9b7863e640badf7adf4d87813305ab1R304-R308) ```diff _clearFallback() { if (!this.el) return const fb = this.el.querySelector("[data-map-fallback]") - if (fb) fb.style.display = "none" + if (fb) fb.remove() } ``` `[To ensure code accuracy, apply this suggestion manually]` <details><summary>Suggestion importance[1-10]: 4</summary> __ Why: The suggestion improves DOM hygiene by removing a temporary element instead of just hiding it, which is a good practice for preventing DOM clutter, although the impact is minor. </details></details></td><td align=center>Low </td></tr> <tr><td align="center" colspan="2"> - [ ] More  </td><td></td></tr></tbody></table>