github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fixes #59513 by hiding one of the symmetric edges rather than omiting it (#59514)

Browse source 
in cytoscape graph. Also selects root nodes with no incoming edges
rather than just unconnected nodes.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Oliver Gupte 2020-03-09 23:55:44 -07:00 • committed by GitHub
parent a663f65bcc
commit 35bcb36ee6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx
View file

@ -78,11 +78,11 @@ function getLayoutOptions(
};
}
function selectRoots(elements: cytoscape.ElementDefinition[]): string[] {
const nodes = cytoscape({ elements }).nodes();
const unconnectedNodes = nodes.roots().intersection(nodes.leaves());
function selectRoots(cy: cytoscape.Core): string[] {
const nodes = cy.nodes();
const roots = nodes.roots();
const rumNodes = nodes.filter(node => isRumAgentName(node.data('agentName')));
return rumNodes.union(unconnectedNodes).map(node => node.id());
return rumNodes.union(roots).map(node => node.id());
}
export function Cytoscape({
@ -118,7 +118,7 @@ export function Cytoscape({
}
if (event.cy.elements().length > 0) {
const selectedRoots = selectRoots(elements);
const selectedRoots = selectRoots(event.cy);
const layout = cy.layout(
getLayoutOptions(selectedRoots, height, width)
);
@ -130,7 +130,7 @@ export function Cytoscape({
}
}
},
[cy, serviceName, elements, height, width]
[cy, serviceName, height, width]
);
// Trigger a custom "data" event when data changes

11
x-pack/legacy/plugins/apm/public/components/app/ServiceMap/get_cytoscape_elements.ts
View file

@ -136,12 +136,15 @@ export function getCytoscapeElements(
// instead of adding connections in two directions,
// we add a `bidirectional` flag to use in styling
// and hide the inverse edge when rendering
const dedupedConnections = (sortBy(
Object.values(connectionsById),
// make sure that order is stable
'id'
) as ConnectionWithId[]).reduce<
Array<ConnectionWithId & { bidirectional?: boolean }>
Array<
ConnectionWithId & { bidirectional?: boolean; isInverseEdge?: boolean }
>
>((prev, connection) => {
const reversedConnection = prev.find(
c =>
@ -151,7 +154,10 @@ export function getCytoscapeElements(
if (reversedConnection) {
reversedConnection.bidirectional = true;
return prev;
return prev.concat({
...connection,
isInverseEdge: true
});
}
return prev.concat(connection);
@ -160,6 +166,7 @@ export function getCytoscapeElements(
const cyEdges = dedupedConnections.map(connection => {
return {
group: 'edges' as const,
classes: connection.isInverseEdge ? 'invisible' : undefined,
data: {
id: connection.id,
source: connection.source.id,