applied popovers

elastic · Dec 23, 2024 · 41543eb · 41543eb
1 parent 672d75b
commit 41543eb
Showing 1 changed file with 27 additions and 11 deletions.
diff --git a/...ackages/kbn-cloud-security-posture/graph/src/components/graph/graph_benchmark.stories.tsx b/...ackages/kbn-cloud-security-posture/graph/src/components/graph/graph_benchmark.stories.tsx
@@ -9,7 +9,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import { css, ThemeProvider } from '@emotion/react';
 import { Story } from '@storybook/react';
 import { EuiListGroup, EuiHorizontalRule } from '@elastic/eui';
-import type { NodeProps } from '..';
+import type { NodeProps, NodeViewModel } from '..';
 import { Graph } from '..';
 import { GraphPopover } from './graph_popover';
 import { ExpandButtonClickCallback } from '../types';
@@ -163,22 +163,39 @@ const Template: Story = () => {
   const popovers = [expandNodePopover, nodePopover];
   const isPopoverOpen = popovers.some((popover) => popover.state.isOpen);
 
-  const popoverOpenWrapper = (cb: Function, ...args: unknown[]) => {
+  const popoverOpenWrapper = useCallback((cb: Function, ...args: unknown[]) => {
     [expandNodePopover.actions.closePopover, nodePopover.actions.closePopover].forEach(
       (closePopover) => {
         closePopover();
       }
     );
     cb(...args);
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  const expandButtonClickHandler = (...args: unknown[]) =>
-    popoverOpenWrapper(expandNodePopover.onNodeExpandButtonClick, ...args);
-  const nodeClickHandler = (...args: unknown[]) =>
-    popoverOpenWrapper(nodePopover.onNodeClick, ...args);
+  const expandButtonClickHandler = useCallback(
+    (...args: unknown[]) => popoverOpenWrapper(expandNodePopover.onNodeExpandButtonClick, ...args),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const nodeClickHandler = useCallback(
+    (...args: unknown[]) => popoverOpenWrapper(nodePopover.onNodeClick, ...args),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
-  // eslint-disable-next-line no-console
-  console.log(`nodes counter ${largeGraph.nodes.length} edges counter ${largeGraph.edges.length}`);
+  const nodes = useMemo(() => {
+    return largeGraph.nodes.map((node) => {
+      // @ts-expect-error
+      const nodeViewModel: NodeViewModel = { ...node };
+      if (nodeViewModel.shape !== 'group') {
+        nodeViewModel.nodeClick = nodeClickHandler;
+        nodeViewModel.expandButtonClick = expandButtonClickHandler;
+      }
+
+      return nodeViewModel;
+    });
+  }, [expandButtonClickHandler, nodeClickHandler]);
 
   return (
     <ThemeProvider theme={{ darkMode: false }}>
@@ -188,8 +205,7 @@ const Template: Story = () => {
           height: 100%;
           width: 100%;
         `}
-        // @ts-expect-error
-        nodes={largeGraph.nodes}
+        nodes={nodes}
         // @ts-expect-error
         edges={largeGraph.edges}
         interactive={true}