Fixes elastic#59513 by hiding one of the symmetric edges rather than …

…omiting it (elastic#59514) (elastic#59722)

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>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -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

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

@@ -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,