feat: network graph polish and filter fixes#165
Conversation
Network diagram:
- Circular nodes (56px) with device-type icon and label floating below
- Handles at node centre so edges connect from the middle of the circle
- Uniform 1.5px edge stroke width (remove traffic-volume thickness)
- Direction arrow drawn as SVG polygon at edge midpoint
- Protocol label at 30% from source node
- Parallel edge spacing increased to 20px
Filters:
- Medium severity colour changed to yellow (#f0c040) to distinguish from
high (orange); severity badge text colour now from Bootstrap defaults
(removed inline color/fontWeight/cursor overrides)
- Add filter-pill class to severity shortcut badges for consistent hover
and inactive styling
- Deduplicate L7 protocol list case-insensitively and strip leading "THE "
prefix (fixes "Netherlands" / "The Netherlands" appearing as two badges)
- Country filter deduplicates by country_code using GROUP BY + MIN(country)
so variants stored in the geo cache ("Netherlands" vs "The Netherlands")
collapse to one badge
- L7 protocol filter query normalises both the stored value and the
incoming parameter before comparing, so existing data matches correctly
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request migrates the network graph implementation from reagraph to @xyflow/react and elkjs, introducing support for parallel edges and fullscreen mode. It also implements case-insensitive L7 protocol filtering on the backend with specific normalization rules. Review feedback highlights a performance concern regarding non-SARGable database queries caused by applying functions to columns in the WHERE clause. Additionally, the reviewer identified several instances of duplicated logic for protocol normalization and string capitalization that should be extracted into shared utility functions to improve maintainability.
backend/src/main/java/com/tracepcap/analysis/repository/ConversationRepository.java
Outdated
Show resolved
Hide resolved
backend/src/main/java/com/tracepcap/analysis/service/AnalysisService.java
Outdated
Show resolved
Hide resolved
NotYuSheng
force-pushed
the
feature/network-diagram-react-flow-elk
branch
from
08212a6 to
3898924
Compare
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces protocol name normalization (case-insensitivity and stripping the "THE " prefix) in both the backend filtering logic and analysis summaries. It also updates the network graph visualization, transitioning from rectangular to circular nodes with labels positioned below and replacing standard edge markers with custom SVG arrows. Additionally, the "medium" severity color scheme was updated for better accessibility. Review feedback highlights a potential performance bottleneck caused by using functional expressions in database queries and identifies a missing CSS definition for the newly introduced filter-pill class.
backend/src/main/java/com/tracepcap/analysis/repository/ConversationRepository.java
Outdated
Show resolved
Hide resolved
frontend/src/components/conversation/ConversationFilterPanel/ConversationFilterPanel.tsx
Show resolved
Hide resolved
… query - Extract normalizeL7Protocol() as a package-visible static helper in TsharkEnrichmentService (uppercase + strip leading "THE ") and call it at storage time in selectBestProtocol so the DB always holds clean values - AnalysisService.getAnalysisSummary now delegates to the shared helper instead of inlining the same two-step normalisation, eliminating duplication - ConversationRepository reverts to a plain IN predicate (fully SARGable); backward-compat with pre-normalisation stored values is handled by expanding each filter value to its common case variants on the Java side (no DB-side UPPER/SUBSTRING on the column) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 participant
Summary
filter-pillclass for consistent hover/inactive styling; removed inline style overridescountry_codeso geo-cache variants ("Netherlands" vs "The Netherlands") collapse to one badgeTest plan
demo_all_rules.pcap— country filter shows one NL badge, not two🤖 Generated with Claude Code