[Cloud Security] Improve graph component performance (elastic#204983)

## Summary

Apply some graph optimizations and added the first graph benchmark
storybook.

You can read the detailed investigation process
[here](elastic#204982 (comment)).

I kept the dashed lines until a new design will be introduced.

Before:


https://github.com/user-attachments/assets/145a82c0-dbd0-410f-a451-eaa8adcc931b


After:


https://github.com/user-attachments/assets/3c13cae5-85d2-481b-8fc6-cec08ecee0d9


**How to test this PR**

To test this PR you can run

```
yarn storybook cloud_security_posture_packages
```

Or open the storybook link attached to the build message

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 import { BaseEdge, getSmoothStepPath } from '@xyflow/react';
 import { useEuiTheme } from '@elastic/eui';
 import type { EdgeProps, EdgeViewModel } from '../types';
@@ -14,55 +14,71 @@ import { getMarkerStart, getMarkerEnd } from './markers';
 
 type EdgeColor = EdgeViewModel['color'];
 
-export function DefaultEdge({
-  id,
-  label,
-  sourceX,
-  sourceY,
-  sourcePosition,
-  targetX,
-  targetY,
-  targetPosition,
-  data,
-}: EdgeProps) {
-  const { euiTheme } = useEuiTheme();
-  const color: EdgeColor = data?.color ?? 'primary';
+const dashedStyle = {
+  strokeDasharray: '2 2',
+};
 
-  const [edgePath] = getSmoothStepPath({
-    // sourceX and targetX are adjusted to account for the shape handle position
-    sourceX: sourceX - getShapeHandlePosition(data?.sourceShape),
+const NODES_WITHOUT_MARKER = ['label', 'group'];
+
+export const DefaultEdge = memo(
+  ({
+    id,
+    label,
+    sourceX,
     sourceY,
     sourcePosition,
-    targetX: targetX + getShapeHandlePosition(data?.targetShape),
+    targetX,
     targetY,
     targetPosition,
-    borderRadius: 15,
-    offset: 0,
-  });
+    data,
+  }: EdgeProps) => {
+    const { euiTheme } = useEuiTheme();
+    const color: EdgeColor = data?.color || 'primary';
+    const sourceMargin = getShapeHandlePosition(data?.sourceShape);
+    const targetMargin = getShapeHandlePosition(data?.targetShape);
+    const markerStart =
+      !data?.sourceShape || !NODES_WITHOUT_MARKER.includes(data?.sourceShape)
+        ? getMarkerStart(color)
+        : undefined;
+    const markerEnd =
+      !data?.targetShape || !NODES_WITHOUT_MARKER.includes(data?.targetShape)
+        ? getMarkerEnd(color)
+        : undefined;
+
+    const sX = Math.round(sourceX - sourceMargin);
+    const sY = Math.round(sourceY);
+    const tX = Math.round(targetX + targetMargin);
+    const tY = Math.round(targetY);
+
+    const [edgePath] = getSmoothStepPath({
+      // sourceX and targetX are adjusted to account for the shape handle position
+      sourceX: sX,
+      sourceY: sY,
+      sourcePosition,
+      targetX: tX,
+      targetY: tY,
+      targetPosition,
+      borderRadius: 15,
+      offset: 0,
+    });
+
+    return (
+      <>
+        <BaseEdge
+          id={id}
+          path={edgePath}
+          interactionWidth={0}
+          style={{
+            stroke: euiTheme.colors[color],
+            // Defaults to dashed when type is not available
+            ...(!data?.type || data?.type === 'dashed' ? dashedStyle : {}),
+          }}
+          markerStart={markerStart}
+          markerEnd={markerEnd}
+        />
+      </>
+    );
+  }
+);
 
-  return (
-    <>
-      <BaseEdge
-        path={edgePath}
-        style={{
-          stroke: euiTheme.colors[color],
-        }}
-        css={
-          (!data?.type || data?.type === 'dashed') && {
-            strokeDasharray: '2,2',
-          }
-        }
-        markerStart={
-          data?.sourceShape !== 'label' && data?.sourceShape !== 'group'
-            ? getMarkerStart(color)
-            : undefined
-        }
-        markerEnd={
-          data?.targetShape !== 'label' && data?.targetShape !== 'group'
-            ? getMarkerEnd(color)
-            : undefined
-        }
-      />
-    </>
-  );
-}
+DefaultEdge.displayName = 'DefaultEdge';

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph/constants.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/**
+ * Whether or not to instruct the graph component to only render nodes and edges that would be visible in the viewport.
+ */
+export const ONLY_RENDER_VISIBLE_ELEMENTS = true as const;

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph/fps_trendline.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { CommonProps } from '@elastic/eui';
+
+export const FpsTrendline: React.FC<CommonProps> = (props: CommonProps) => {
+  const [fpsSamples, setFpsSamples] = useState<number[]>([]);
+  const frameCount = useRef(0);
+  const lastTimestamp = useRef(performance.now());
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const calculateFPS = (timestamp: number) => {
+      frameCount.current += 1;
+      const delta = timestamp - lastTimestamp.current;
+
+      if (delta >= 1000) {
+        const fps = (frameCount.current * 1000) / delta;
+        setFpsSamples((prevSamples) => {
+          const updatedSamples = [...prevSamples, fps];
+          return updatedSamples.slice(-20);
+        });
+        frameCount.current = 0;
+        lastTimestamp.current = timestamp;
+      }
+
+      animationFrameId = requestAnimationFrame(calculateFPS);
+    };
+
+    animationFrameId = requestAnimationFrame(calculateFPS);
+
+    return () => cancelAnimationFrame(animationFrameId);
+  }, []);
+
+  const getBarColor = (fps: number): string => {
+    if (fps >= 50) return '#4caf50'; // Green
+    if (fps >= 30) return '#ffeb3b'; // Yellow
+    return '#f44336'; // Red
+  };
+
+  return (
+    <div {...props}>
+      <strong>{'FPS:'}</strong> {Math.round(fpsSamples[fpsSamples.length - 1])} <br />
+      <div
+        css={{
+          display: 'flex',
+          alignItems: 'flex-end',
+          height: '30px',
+          padding: '5px',
+        }}
+      >
+        {fpsSamples.map((fps, index) => (
+          <div
+            key={index}
+            css={{
+              height: `${Math.min(fps, 60) * (100 / 60)}%`,
+              width: '5%',
+              backgroundColor: getBarColor(fps),
+              marginRight: '2px',
+            }}
+            title={`${fps.toFixed(2)} FPS`}
+          >
+            <div
+              css={{
+                fontSize: '8px',
+                padding: '2px',
+                left: `${index * 5 + 5}%`,
+              }}
+            >
+              {fps.toFixed(0)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph/graph.test.tsx

@@ -10,6 +10,11 @@ import React from 'react';
 import { Graph, type GraphProps } from './graph';
 import { TestProviders } from '../mock/test_providers';
 
+// Turn off the optimization that hides elements that are not visible in the viewport
+jest.mock('./constants', () => ({
+  ONLY_RENDER_VISIBLE_ELEMENTS: false,
+}));
+
 const renderGraphPreview = (props: GraphProps) =>
   render(
     <TestProviders>