[Cloud Security] [Graph Vis] Implement UI enhancements (elastic#222830)

## Summary

Closes:
- elastic#222367

Enhance graph visualization UI with latest Figma update.

### Screenshots

<details><summary>Popover</summary>
<img width="370" alt="Screenshot 2025-06-12 at 10 21 50"
src="https://github.com/user-attachments/assets/8060860e-5b93-4d71-b330-1920afb75c6a"
/>
</details> 

<details><summary>Controls</summary>
<img width="63" alt="Screenshot 2025-06-11 at 17 36 27"
src="https://github.com/user-attachments/assets/78b93528-1821-4d77-9536-eb88fd68e3dc"
/>
</details>

<details><summary>Edges - new color, default to solid stroke, no start
marker</summary>
<img width="1078" alt="Screenshot 2025-06-12 at 17 22 25"
src="https://github.com/user-attachments/assets/53b46adb-2b79-4c65-ba48-9c74826f2fb0"
/>
</details>

### Videos

#### Snap nodes to 10px grid


https://github.com/user-attachments/assets/fc732784-1e3b-4277-9bf3-d7a6c9b43f88

#### Zoom / Fit to view transition


https://github.com/user-attachments/assets/8a7627c0-7c00-4321-a05c-ea9fa1910002

### Definition of done

- [x] Update popover container
- [x] Update popover action icons
- [x] Update popover action texts
- [x] Update fit-to-view icons
- [x] Update relationship arrow colors
- [x] Check if we can increase the current nodes limit - increased to
300
- [x] Snap to Grid: Enable nodes to snap by 10px
- [x] Implement smooth zoom and fit-to-view transitions (200ms duration)
- [x] Remove edge's start marker
- [x] Remove failure representation according to `event.outcome`

### How to test - In Kibana

1. Add this line to your `kibana.dev.yml`:

    ```yml
    uiSettings.overrides.securitySolution:enableGraphVisualization: true
    ```

2. Then, run these 2 commands while running Kibana with `yarn start
--no-base-path`. This is for setting up the local env with data.

    ```bash
node scripts/es_archiver load
x-pack/solutions/security/test/cloud_security_posture_functional/es_archives/logs_gcp_audit
--es-url http://elastic:changeme@localhost:9200 --kibana-url
http://elastic:changeme@localhost:5601
    ```

    ```bash
node scripts/es_archiver load
x-pack/solutions/security/test/cloud_security_posture_functional/es_archives/security_alerts
--es-url http://elastic:changeme@localhost:9200 --kibana-url
http://elastic:changeme@localhost:5601
    ```

3. Finally in Kibana, go to Alerts and update the date-picker to include
data from a year ago. Then check one of the alerts details opening the
right-side flyout and find the "Graph preview" section in it.

### How to test - In Storybook

1. Run in terminal:

    ```bash
    yarn storybook cloud_security_posture_graph
    ```

2. Open [http://localhost:9001/](http://localhost:9001/).

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [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
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

No risk, feature is gated under the
`securitySolution:enableGraphVisualization` UI setting.

---------

Co-authored-by: Kfir Peled <[email protected]>
Co-authored-by: Kfir Peled <[email protected]>

Author: 2 people

x-pack/platform/packages/shared/kbn-cloud-security-posture/common/schema/graph/v1.ts

@@ -42,12 +42,19 @@ export const graphResponseSchema = () =>
     ),
   });
 
-export const colorSchema = schema.oneOf([
+export const nodeColorSchema = schema.oneOf([
   schema.literal('primary'),
   schema.literal('danger'),
   schema.literal('warning'),
 ]);
 
+export const edgeColorSchema = schema.oneOf([
+  schema.literal('primary'),
+  schema.literal('danger'),
+  schema.literal('warning'),
+  schema.literal('subdued'),
+]);
+
 export const nodeShapeSchema = schema.oneOf([
   schema.literal('hexagon'),
   schema.literal('pentagon'),
@@ -67,7 +74,7 @@ export const nodeBaseDataSchema = schema.object({
 export const entityNodeDataSchema = schema.allOf([
   nodeBaseDataSchema,
   schema.object({
-    color: colorSchema,
+    color: nodeColorSchema,
     shape: schema.oneOf([
       schema.literal('hexagon'),
       schema.literal('pentagon'),
@@ -90,14 +97,14 @@ export const labelNodeDataSchema = schema.allOf([
   schema.object({
     shape: schema.literal('label'),
     parentId: schema.maybe(schema.string()),
-    color: colorSchema,
+    color: nodeColorSchema,
   }),
 ]);
 
 export const edgeDataSchema = schema.object({
   id: schema.string(),
   source: schema.string(),
   target: schema.string(),
-  color: colorSchema,
+  color: edgeColorSchema,
   type: schema.maybe(schema.oneOf([schema.literal('solid'), schema.literal('dashed')])),
 });

x-pack/platform/packages/shared/kbn-cloud-security-posture/common/types/graph/v1.ts

@@ -8,13 +8,14 @@
 import type { TypeOf } from '@kbn/config-schema';
 import type { BoolQuery } from '@kbn/es-query';
 import {
-  colorSchema,
+  edgeColorSchema,
   edgeDataSchema,
   entityNodeDataSchema,
   graphRequestSchema,
   graphResponseSchema,
   groupNodeDataSchema,
   labelNodeDataSchema,
+  nodeColorSchema,
   nodeShapeSchema,
 } from '../../schema/graph/v1';
 
@@ -25,7 +26,8 @@ export type GraphResponse = Omit<TypeOf<typeof graphResponseSchema>, 'messages'>
   messages?: ApiMessageCode[];
 };
 
-export type Color = typeof colorSchema.type;
+export type EdgeColor = typeof edgeColorSchema.type;
+export type NodeColor = typeof nodeColorSchema.type;
 
 export type NodeShape = TypeOf<typeof nodeShapeSchema>;
 

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -7489,14 +7489,6 @@
     "securitySolutionPackages.csp.graph.controls.toggleSearchBar.tour.title": "Affinez votre vue avec la recherche",
     "securitySolutionPackages.csp.graph.controls.zoomIn": "Zoom avant",
     "securitySolutionPackages.csp.graph.controls.zoomOut": "Zoom arrière",
-    "securitySolutionPackages.csp.graph.graphLabelExpandPopover.hideEventsWithThisAction": "Masquer les événements avec cette action",
-    "securitySolutionPackages.csp.graph.graphLabelExpandPopover.showEventsWithThisAction": "Afficher les événements avec cette action",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideActionsByEntity": "Masquer les actions par cette entité",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideActionsOnEntity": "Masquer les actions sur cette entité",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideRelatedEntities": "Masquer les entités liées",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showActionsByEntity": "Afficher les actions par cette entité",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showActionsOnEntity": "Afficher les actions sur cette entité",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showRelatedEntities": "Afficher les entités liées",
     "securitySolutionPackages.csp.graph.investigation.errorBuildingQuery": "Impossible d'extraire les résultats de recherche",
     "securitySolutionPackages.csp.graph.investigation.warningNegatedFilterContent": "Un ou plusieurs filtres sont annulés et ne renverront donc peut-être pas les résultats attendus.",
     "securitySolutionPackages.csp.graph.investigation.warningNegatedFilterTitle": "Filtres annulés",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -7489,14 +7489,6 @@
     "securitySolutionPackages.csp.graph.controls.toggleSearchBar.tour.title": "検索でビューを絞り込む",
     "securitySolutionPackages.csp.graph.controls.zoomIn": "ズームイン",
     "securitySolutionPackages.csp.graph.controls.zoomOut": "ズームアウト",
-    "securitySolutionPackages.csp.graph.graphLabelExpandPopover.hideEventsWithThisAction": "このアクションのイベントを非表示",
-    "securitySolutionPackages.csp.graph.graphLabelExpandPopover.showEventsWithThisAction": "このアクションのイベントを表示",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideActionsByEntity": "このエンティティによるアクションを非表示",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideActionsOnEntity": "このエンティティに対するアクションを非表示",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideRelatedEntities": "関連するエンティティを非表示",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showActionsByEntity": "このエンティティによるアクションを表示",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showActionsOnEntity": "このエンティティに対するアクションを表示",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showRelatedEntities": "関連するエンティティを表示",
     "securitySolutionPackages.csp.graph.investigation.errorBuildingQuery": "検索結果を取得できません",
     "securitySolutionPackages.csp.graph.investigation.warningNegatedFilterContent": "1つ以上のフィルターが否定され、意図した結果が返されない場合があります。",
     "securitySolutionPackages.csp.graph.investigation.warningNegatedFilterTitle": "フィルターが否定されました",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -7484,14 +7484,6 @@
     "securitySolutionPackages.csp.graph.controls.toggleSearchBar.tour.title": "通过搜索优化您的视图",
     "securitySolutionPackages.csp.graph.controls.zoomIn": "放大",
     "securitySolutionPackages.csp.graph.controls.zoomOut": "缩小",
-    "securitySolutionPackages.csp.graph.graphLabelExpandPopover.hideEventsWithThisAction": "通过此操作隐藏事件",
-    "securitySolutionPackages.csp.graph.graphLabelExpandPopover.showEventsWithThisAction": "通过此操作显示事件",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideActionsByEntity": "隐藏此实体执行的操作",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideActionsOnEntity": "隐藏对此实体执行的操作",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.hideRelatedEntities": "隐藏相关实体",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showActionsByEntity": "显示此实体执行的操作",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showActionsOnEntity": "显示对此实体执行的操作",
-    "securitySolutionPackages.csp.graph.graphNodeExpandPopover.showRelatedEntities": "显示相关实体",
     "securitySolutionPackages.csp.graph.investigation.errorBuildingQuery": "无法检索搜索结果",
     "securitySolutionPackages.csp.graph.investigation.warningNegatedFilterContent": "一个或多个筛选已作废，可能无法返回预期结果。",
     "securitySolutionPackages.csp.graph.investigation.warningNegatedFilterTitle": "筛选已作废",

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/assets/icons/fit_to_view.svg

@@ -18,4 +18,4 @@ export const SHOW_SEARCH_BAR_BUTTON_TOUR_STORAGE_KEY =
 export const TOGGLE_SEARCH_BAR_STORAGE_KEY =
   'securitySolution.graphInvestigation:toggleSearchBarState' as const;
 
-export const GRAPH_NODES_LIMIT = 100;
+export const GRAPH_NODES_LIMIT = 300;

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

@@ -133,7 +133,7 @@ export const Actions = ({
       : undefined;
 
   return (
-    <EuiFlexGroup direction="column" gutterSize={'none'} {...props}>
+    <EuiFlexGroup direction="column" gutterSize="none" {...props}>
       {showToggleSearch && (
         <EuiFlexItem grow={false}>
           <EuiTourStep
@@ -154,6 +154,7 @@ export const Actions = ({
                 css={[
                   css`
                     position: relative;
+                    overflow: visible;
                     width: 40px;
                   `,
                   !searchToggled
@@ -163,6 +164,11 @@ export const Actions = ({
                       `
                     : undefined,
                 ]}
+                contentProps={{
+                  css: css`
+                    position: initial;
+                  `,
+                }}
                 minWidth={false}
                 size="m"
                 aria-label={toggleSearchBarTooltip}
@@ -209,7 +215,11 @@ export const Actions = ({
           </EuiTourStep>
         </EuiFlexItem>
       )}
-      {showToggleSearch && showInvestigateInTimeline && <EuiHorizontalRule margin="xs" />}
+      {showToggleSearch && showInvestigateInTimeline && (
+        <EuiFlexItem grow={false}>
+          <EuiHorizontalRule margin="xs" />
+        </EuiFlexItem>
+      )}
       {showInvestigateInTimeline && (
         <EuiFlexItem grow={false}>
           <EuiToolTip content={investigateInTimelineTooltip} position="left">

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

@@ -10,7 +10,8 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSpacer,
+  EuiHorizontalRule,
+  EuiIcon,
   useEuiTheme,
   type CommonProps,
 } from '@elastic/eui';
@@ -23,6 +24,7 @@ import {
   GRAPH_CONTROLS_ZOOM_IN_ID,
   GRAPH_CONTROLS_ZOOM_OUT_ID,
 } from '../test_ids';
+import fitToViewIcon from '../../assets/icons/fit_to_view.svg';
 
 const selector = (s: ReactFlowState) => ({
   minZoomReached: s.transform[2] <= s.minZoom,
@@ -57,6 +59,8 @@ const CenterLabel = i18n.translate('securitySolutionPackages.csp.graph.controls.
   defaultMessage: 'Center',
 });
 
+const fitToViewIconFn = () => <EuiIcon type={fitToViewIcon} size="m" color="text" />;
+
 export const Controls = ({
   showZoom = true,
   showFitView = true,
@@ -73,12 +77,12 @@ export const Controls = ({
   const { maxZoomReached, minZoomReached } = useStore(selector);
 
   const onZoomInHandler = () => {
-    zoomIn();
+    zoomIn({ duration: fitViewOptions?.duration });
     onZoomIn?.();
   };
 
   const onZoomOutHandler = () => {
-    zoomOut();
+    zoomOut({ duration: fitViewOptions?.duration });
     onZoomOut?.();
   };
 
@@ -88,57 +92,68 @@ export const Controls = ({
   };
 
   const btnCss = css`
+    border-radius: 0;
+  `;
+
+  const groupCss = css`
     border: ${euiTheme.border.thin};
     border-radius: ${euiTheme.border.radius.medium};
     background-color: ${euiTheme.colors.backgroundBasePlain};
-    box-sizing: content-box;
   `;
 
   if (!showZoom && !showCenter && !showFitView) {
     return <></>;
   }
 
   return (
-    <EuiFlexGroup direction="column" gutterSize={'none'} {...props}>
+    <EuiFlexGroup direction="column" gutterSize="none" css={groupCss} {...props}>
       {showZoom && (
-        <EuiFlexItem grow={false} css={btnCss}>
-          <EuiButtonIcon
-            iconType="plusInCircle"
-            aria-label={ZoomInLabel}
-            size="m"
-            color="text"
-            data-test-subj={GRAPH_CONTROLS_ZOOM_IN_ID}
-            disabled={maxZoomReached}
-            onClick={onZoomInHandler}
-          />
+        <>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              iconType="plusInCircle"
+              aria-label={ZoomInLabel}
+              size="m"
+              color="text"
+              data-test-subj={GRAPH_CONTROLS_ZOOM_IN_ID}
+              disabled={maxZoomReached}
+              css={btnCss}
+              onClick={onZoomInHandler}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              iconType="minusInCircle"
+              aria-label={ZoomOutLabel}
+              size="m"
+              color="text"
+              data-test-subj={GRAPH_CONTROLS_ZOOM_OUT_ID}
+              disabled={minZoomReached}
+              css={btnCss}
+              onClick={onZoomOutHandler}
+            />
+          </EuiFlexItem>
+        </>
+      )}
+      {showCenter && (
+        <EuiFlexItem grow={false}>
+          {showZoom ? <EuiHorizontalRule size="full" margin="none" /> : null}
           <EuiButtonIcon
-            iconType="minusInCircle"
-            aria-label={ZoomOutLabel}
+            iconType="bullseye"
+            aria-label={CenterLabel}
             size="m"
             color="text"
-            data-test-subj={GRAPH_CONTROLS_ZOOM_OUT_ID}
-            disabled={minZoomReached}
-            onClick={onZoomOutHandler}
+            data-test-subj={GRAPH_CONTROLS_CENTER_ID}
+            css={btnCss}
+            onClick={() => onCenter?.()}
           />
         </EuiFlexItem>
       )}
-      {showZoom && showCenter && <EuiSpacer size="xs" />}
-      {showCenter && (
-        <EuiButtonIcon
-          iconType="bullseye"
-          aria-label={CenterLabel}
-          size="m"
-          color="text"
-          data-test-subj={GRAPH_CONTROLS_CENTER_ID}
-          css={btnCss}
-          onClick={() => onCenter?.()}
-        />
-      )}
-      {(showZoom || showCenter) && showFitView && <EuiSpacer size="xs" />}
       {showFitView && (
         <EuiFlexItem grow={false}>
+          {showZoom || showCenter ? <EuiHorizontalRule size="full" margin="none" /> : null}
           <EuiButtonIcon
-            iconType="continuityWithin"
+            iconType={fitToViewIconFn}
             aria-label={FitViewLabel}
             size="m"
             color="text"

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

@@ -64,6 +64,7 @@ const edgeTypes = {
 const Template = (args: EdgeViewModel) => {
   const isArrayOfObjectsEqual = (x: object[], y: object[]) =>
     size(x) === size(y) && isEmpty(xorWith(x, y, isEqual));
+  const edgeData = pick(args, ['id', 'label', 'interactive', 'source', 'target', 'color', 'type']);
 
   const nodes = useMemo(
     () => [
@@ -86,11 +87,14 @@ const Template = (args: EdgeViewModel) => {
       {
         id: args.id,
         type: 'label',
-        data: pick(args, ['id', 'label', 'interactive', 'source', 'target', 'color', 'type']),
+        data: {
+          ...edgeData,
+          color: edgeData.color === 'subdued' ? 'primary' : edgeData.color,
+        },
         position: { x: 230, y: 6 },
       },
     ],
-    [args]
+    [args, edgeData]
   );
 
   const edges = useMemo(
@@ -172,7 +176,7 @@ export default {
   render: Template,
   argTypes: {
     color: {
-      options: ['primary', 'danger', 'warning'],
+      options: ['primary', 'danger', 'warning', 'subdued'],
       control: { type: 'radio' },
     },
     type: {