[8.x] [Cloud Security] Update graph appearance (#204610) (#204974)

# Backport This will backport the following commits from `main` to `8.x`: - [[Cloud Security] Update graph appearance (#204610)](#204610)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kfir Peled <[email protected]>
elastic · Dec 19, 2024 · d3a325a · d3a325a
1 parent 78fc144
commit d3a325a
Show file tree

Hide file tree

Showing 19 changed files with 337 additions and 195 deletions.
diff --git a/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/schema/graph/v1.ts b/x-pack/platform/packages/shared/kbn-cloud-security-posture/common/schema/graph/v1.ts
@@ -99,4 +99,5 @@ export const edgeDataSchema = schema.object({
   source: schema.string(),
   target: schema.string(),
   color: colorSchema,
+  type: schema.maybe(schema.oneOf([schema.literal('solid'), schema.literal('dashed')])),
 });
diff --git a/...ty/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx b/...ty/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import {
   ReactFlow,
@@ -17,14 +17,18 @@ import {
   useEdgesState,
   type BuiltInNode,
   type NodeProps,
+  type Node as xyNode,
+  type Edge as xyEdge,
 } from '@xyflow/react';
+import { isEmpty, isEqual, pick, size, xorWith } from 'lodash';
 import { Story } from '@storybook/react';
-import { SvgDefsMarker } from './styles';
 import { DefaultEdge } from '.';
+import { LabelNode } from '../node';
+import type { EdgeViewModel } from '../types';
+import { SvgDefsMarker } from './markers';
 
 import '@xyflow/react/dist/style.css';
-import { LabelNode } from '../node';
-import type { NodeViewModel } from '../types';
+import { HandleStyleOverride } from '../node/styles';
 
 export default {
   title: 'Components/Graph Components/Default Edge',
@@ -34,22 +38,32 @@ export default {
       options: ['primary', 'danger', 'warning'],
       control: { type: 'radio' },
     },
+    type: {
+      options: ['solid', 'dashed'],
+      control: { type: 'radio' },
+    },
   },
 };
 
 const nodeTypes = {
-  default: ((props: NodeProps<BuiltInNode>) => {
-    const handleStyle = {
-      width: 0,
-      height: 0,
-      'min-width': 0,
-      'min-height': 0,
-      border: 'none',
-    };
+  // eslint-disable-next-line react/display-name
+  default: React.memo((props: NodeProps<BuiltInNode>) => {
     return (
       <div>
-        <Handle type="source" position={Position.Right} style={handleStyle} />
-        <Handle type="target" position={Position.Left} style={handleStyle} />
+        <Handle
+          type="target"
+          isConnectable={false}
+          position={Position.Left}
+          id="in"
+          style={HandleStyleOverride}
+        />
+        <Handle
+          type="source"
+          isConnectable={false}
+          position={Position.Right}
+          id="out"
+          style={HandleStyleOverride}
+        />
         {props.data.label}
       </div>
     );
@@ -61,79 +75,101 @@ const edgeTypes = {
   default: DefaultEdge,
 };
 
-const Template: Story<NodeViewModel> = (args: NodeViewModel) => {
-  const initialNodes = [
-    {
-      id: 'source',
-      type: 'default',
-      data: { label: 'source' },
-      position: { x: 0, y: 0 },
-      draggable: true,
-    },
-    {
-      id: 'target',
-      type: 'default',
-      data: { label: 'target' },
-      position: { x: 320, y: 100 },
-      draggable: true,
-    },
-    {
-      id: args.id,
-      type: 'label',
-      data: args,
-      position: { x: 160, y: 50 },
-      draggable: true,
-    },
-  ];
+const Template: Story<EdgeViewModel> = (args: EdgeViewModel) => {
+  const nodes = useMemo(
+    () => [
+      {
+        id: 'source',
+        type: 'default',
+        data: {
+          label: 'source',
+        },
+        position: { x: 0, y: 0 },
+      },
+      {
+        id: 'target',
+        type: 'default',
+        data: {
+          label: 'target',
+        },
+        position: { x: 420, y: 0 },
+      },
+      {
+        id: args.id,
+        type: 'label',
+        data: pick(args, ['id', 'label', 'interactive', 'source', 'target', 'color', 'type']),
+        position: { x: 230, y: 6 },
+      },
+    ],
+    [args]
+  );
 
-  const initialEdges = [
-    {
-      id: `source-${args.id}`,
-      source: 'source',
-      target: args.id,
-      data: {
+  const edges = useMemo(
+    () => [
+      {
         id: `source-${args.id}`,
         source: 'source',
-        sourceShape: 'rectangle',
         target: args.id,
-        targetShape: 'label',
-        color: args.color,
-        interactive: true,
+        data: {
+          id: `source-${args.id}`,
+          source: 'source',
+          sourceShape: 'custom',
+          target: args.id,
+          targetShape: 'label',
+          color: args.color,
+          type: args.type,
+        },
+        type: 'default',
       },
-      type: 'default',
-    },
-    {
-      id: `${args.id}-target`,
-      source: args.id,
-      target: 'target',
-      data: {
+      {
         id: `${args.id}-target`,
         source: args.id,
-        sourceShape: 'label',
         target: 'target',
-        targetShape: 'rectangle',
-        color: args.color,
-        interactive: true,
+        data: {
+          id: `${args.id}-target`,
+          source: args.id,
+          sourceShape: 'label',
+          target: 'target',
+          targetShape: 'custom',
+          color: args.color,
+          type: args.type,
+        },
+        type: 'default',
       },
-      type: 'default',
-    },
-  ];
+    ],
+    [args]
+  );
 
-  const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, _setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [nodesState, setNodes, onNodesChange] = useNodesState<xyNode>(nodes);
+  const [edgesState, setEdges, onEdgesChange] = useEdgesState<xyEdge<EdgeViewModel>>(edges);
+  const currNodesRef = useRef(nodes);
+  const currEdgesRef = useRef(edges);
+
+  useEffect(() => {
+    if (
+      !isArrayOfObjectsEqual(nodes, currNodesRef.current) ||
+      !isArrayOfObjectsEqual(edges, currEdgesRef.current)
+    ) {
+      setNodes(nodes);
+      setEdges(edges);
+      currNodesRef.current = nodes;
+      currEdgesRef.current = edges;
+    }
+  }, [setNodes, setEdges, nodes, edges]);
 
   return (
     <ThemeProvider theme={{ darkMode: false }}>
       <SvgDefsMarker />
       <ReactFlow
         fitView
         attributionPosition={undefined}
+        nodesDraggable={true}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
-        nodes={nodes}
-        edges={edges}
+        nodes={nodesState}
+        edges={edgesState}
       >
         <Controls />
         <Background />
@@ -148,6 +184,9 @@ Edge.args = {
   id: 'siem-windows',
   label: 'User login to OKTA',
   color: 'primary',
-  icon: 'okta',
   interactive: true,
+  type: 'solid',
 };
+
+const isArrayOfObjectsEqual = (x: object[], y: object[]) =>
+  size(x) === size(y) && isEmpty(xorWith(x, y, isEqual));
diff --git a/...s/security/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx b/...s/security/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
@@ -6,12 +6,13 @@
  */
 
 import React from 'react';
-import { BaseEdge, getBezierPath } from '@xyflow/react';
+import { BaseEdge, getSmoothStepPath } from '@xyflow/react';
 import { useEuiTheme } from '@elastic/eui';
-import type { Color } from '@kbn/cloud-security-posture-common/types/graph/latest';
-import type { EdgeProps } from '../types';
-import { getMarker } from './styles';
+import type { EdgeProps, EdgeViewModel } from '../types';
 import { getShapeHandlePosition } from './utils';
+import { getMarkerStart, getMarkerEnd } from './markers';
+
+type EdgeColor = EdgeViewModel['color'];
 
 export function DefaultEdge({
   id,
@@ -25,22 +26,18 @@ export function DefaultEdge({
   data,
 }: EdgeProps) {
   const { euiTheme } = useEuiTheme();
-  const color: Color = data?.color ?? 'primary';
+  const color: EdgeColor = data?.color ?? 'primary';
 
-  const [edgePath] = getBezierPath({
+  const [edgePath] = getSmoothStepPath({
     // sourceX and targetX are adjusted to account for the shape handle position
     sourceX: sourceX - getShapeHandlePosition(data?.sourceShape),
     sourceY,
     sourcePosition,
     targetX: targetX + getShapeHandlePosition(data?.targetShape),
     targetY,
     targetPosition,
-    curvature:
-      0.1 *
-      (data?.sourceShape === 'group' ||
-      (data?.sourceShape === 'label' && data?.targetShape === 'group')
-        ? -1 // We flip direction when the edge is between parent node to child nodes (groups always contain children in our graph)
-        : 1),
+    borderRadius: 15,
+    offset: 0,
   });
 
   return (
@@ -50,12 +47,19 @@ export function DefaultEdge({
         style={{
           stroke: euiTheme.colors[color],
         }}
-        css={{
-          strokeDasharray: '2,2',
-        }}
+        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'
-            ? getMarker(color)
+            ? getMarkerEnd(color)
             : undefined
         }
       />