Radial cluster connections #3394
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
generated by cursor using claude-4.5-sonnet
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for radial cluster graph visualization to the connections view, introducing a third field for hierarchical display and a graph type selector to switch between force-directed and radial cluster layouts.
Key Changes
- Added optional third field input for hierarchical connections visualization
- Implemented graph type selector to toggle between force-directed and radial cluster visualizations
- Enhanced backend API to support three-level hierarchical data processing
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| Connections.vue | Added third field input, graph type selector, and radial cluster visualization implementation |
| apiConnections.js | Modified backend processing to support optional third field and three-level hierarchical data structures |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| .text(d => d.data.nodeData.id + this.calculateNodeLabelSuffix(d.data.nodeData)); | ||
| }, | ||
| convertToHierarchy: function (graphNodes, graphLinks) { | ||
| const hasThirdLevel = graphNodes.some(n => n.level === 3); |
There was a problem hiding this comment.
Using some() to check for level 3 nodes could be inefficient for large datasets. Consider tracking this state during data processing instead of iterating through all nodes.
Comment on lines
+1804
to
+1827
| // Build hierarchy based on parent relationships | ||
| graphNodes.forEach(n => { | ||
| const hierarchyNode = nodeMap.get(n.pos); | ||
| if (n.level === 1) { | ||
| // Level 1 nodes go directly under root | ||
| rootChildren.push(hierarchyNode); | ||
| } else if (n.level === 2 && n.parent !== undefined) { | ||
| // Level 2 nodes go under their level 1 parent | ||
| const parentNode = graphNodes.find(p => p.pos === graphLinks.find(l => l.target === n.pos)?.source); | ||
| if (parentNode) { | ||
| const parentHierarchyNode = nodeMap.get(parentNode.pos); | ||
| if (parentHierarchyNode) { | ||
| parentHierarchyNode.children.push(hierarchyNode); | ||
| } | ||
| } | ||
| } else if (n.level === 3 && n.parent !== undefined) { | ||
| // Level 3 nodes go under their level 2 parent | ||
| const parentNode = graphNodes.find(p => p.pos === graphLinks.find(l => l.target === n.pos)?.source); | ||
| if (parentNode) { | ||
| const parentHierarchyNode = nodeMap.get(parentNode.pos); | ||
| if (parentHierarchyNode) { | ||
| parentHierarchyNode.children.push(hierarchyNode); | ||
| } | ||
| } |
There was a problem hiding this comment.
Nested find() operations within a loop create O(n³) complexity. Consider building a lookup map for parent relationships to improve performance.
Suggested change
| // Build hierarchy based on parent relationships | |
| graphNodes.forEach(n => { | |
| const hierarchyNode = nodeMap.get(n.pos); | |
| if (n.level === 1) { | |
| // Level 1 nodes go directly under root | |
| rootChildren.push(hierarchyNode); | |
| } else if (n.level === 2 && n.parent !== undefined) { | |
| // Level 2 nodes go under their level 1 parent | |
| const parentNode = graphNodes.find(p => p.pos === graphLinks.find(l => l.target === n.pos)?.source); | |
| if (parentNode) { | |
| const parentHierarchyNode = nodeMap.get(parentNode.pos); | |
| if (parentHierarchyNode) { | |
| parentHierarchyNode.children.push(hierarchyNode); | |
| } | |
| } | |
| } else if (n.level === 3 && n.parent !== undefined) { | |
| // Level 3 nodes go under their level 2 parent | |
| const parentNode = graphNodes.find(p => p.pos === graphLinks.find(l => l.target === n.pos)?.source); | |
| if (parentNode) { | |
| const parentHierarchyNode = nodeMap.get(parentNode.pos); | |
| if (parentHierarchyNode) { | |
| parentHierarchyNode.children.push(hierarchyNode); | |
| } | |
| } | |
| // Build lookup map from target pos to source pos for fast parent lookup | |
| const linkParentMap = new Map(); | |
| graphLinks.forEach(l => { | |
| linkParentMap.set(l.target, l.source); | |
| }); | |
| // Build hierarchy based on parent relationships | |
| graphNodes.forEach(n => { | |
| const hierarchyNode = nodeMap.get(n.pos); | |
| if (n.level === 1) { | |
| // Level 1 nodes go directly under root | |
| rootChildren.push(hierarchyNode); | |
| } else if ((n.level === 2 || n.level === 3) && n.parent !== undefined) { | |
| // Level 2 and 3 nodes go under their parent | |
| const parentPos = linkParentMap.get(n.pos); | |
| if (parentPos !== undefined) { | |
| const parentHierarchyNode = nodeMap.get(parentPos); | |
| if (parentHierarchyNode) { | |
| parentHierarchyNode.children.push(hierarchyNode); | |
| } | |
| } |
| } | ||
| } else if (n.level === 3 && n.parent !== undefined) { | ||
| // Level 3 nodes go under their level 2 parent | ||
| const parentNode = graphNodes.find(p => p.pos === graphLinks.find(l => l.target === n.pos)?.source); |
There was a problem hiding this comment.
Duplicate nested find() operations for level 3 nodes. This should use the same optimization as suggested for level 2 nodes.
| function doProcess (vsrc, vdst, f, fields, resultId) { | ||
| function doProcess (vsrc, vdst, vthird, f, fields, resultId) { | ||
| if (ArkimeUtil.isPP(vsrc) || ArkimeUtil.isPP(vdst)) { return; } | ||
| if (vthird && ArkimeUtil.isPP(vthird)) { return; } |
There was a problem hiding this comment.
The validation for vthird should be consistent with vsrc and vdst checks. Consider extracting this into a helper function to avoid code duplication.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
License
I confirm that this contribution is made under an Apache 2.0 license and that I have the authority necessary to make this contribution on behalf of its copyright owner.