memo + removing as string

Author: Hubert-Szczepanski-SAP

src/components/Graphs/Graph.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo, useState } from 'react';
-import { ReactFlow, Background, Controls, MarkerType } from '@xyflow/react';
+import React, { useState, useCallback, useMemo } from 'react';
+import { ReactFlow, Background, Controls, MarkerType, Node } from '@xyflow/react';
 import type { NodeProps } from '@xyflow/react';
 import { RadioButton, FlexBox, FlexBoxAlignItems } from '@ui5/webcomponents-react';
 import styles from './Graph.module.css';
 import '@xyflow/react/dist/style.css';
-import { ManagedResourceItem } from './types';
+import { ManagedResourceItem, NodeData } from './types';
 import CustomNode from './CustomNode';
 import { Legend, LegendItem } from './Legend';
 import { YamlViewDialog } from '../Yaml/YamlViewDialog';
@@ -14,34 +14,35 @@ import { removeManagedFieldsProperty } from '../../utils/removeManagedFieldsProp
 import { useTranslation } from 'react-i18next';
 import { useGraph } from './useGraph';
 
+const nodeTypes = {
+  custom: (props: NodeProps<Node<NodeData, 'custom'>>) => (
+    <CustomNode
+      label={props.data.label}
+      type={props.data.type}
+      status={props.data.status}
+      onYamlClick={() => props.data.onYamlClick(props.data.item)}
+    />
+  ),
+};
+
 const Graph: React.FC = () => {
   const { t } = useTranslation();
   const [colorBy, setColorBy] = useState<'provider' | 'source'>('provider');
-  const { nodes, edges, colorMap, treeData, loading, error } = useGraph(colorBy);
-
   const [yamlDialogOpen, setYamlDialogOpen] = useState(false);
   const [yamlResource, setYamlResource] = useState<ManagedResourceItem | null>(null);
 
-  const handleYamlClick = (item: ManagedResourceItem) => {
+  const handleYamlClick = useCallback((item: ManagedResourceItem) => {
     setYamlResource(item);
     setYamlDialogOpen(true);
-  };
+  }, []);
 
-  const nodeTypes = {
-    custom: (props: NodeProps) => (
-      <CustomNode
-        label={props.data.label as string}
-        type={props.data.type as string}
-        status={props.data.status as string}
-        onYamlClick={() => handleYamlClick(props.data.item as ManagedResourceItem)}
-      />
-    ),
-  };
+  const { nodes, edges, colorMap, treeData, loading, error } = useGraph(colorBy, handleYamlClick);
 
   const yamlString = useMemo(
     () => (yamlResource ? stringify(removeManagedFieldsProperty(yamlResource)) : ''),
     [yamlResource],
   );
+
   const yamlFilename = useMemo(() => {
     if (!yamlResource) return '';
     const { kind, metadata } = yamlResource;

src/components/Graphs/types.ts

@@ -61,4 +61,5 @@ export interface NodeData {
   parentId?: string;
   extraRefs: string[];
   item: ManagedResourceItem;
+  onYamlClick: (item: ManagedResourceItem) => void;
 }

src/components/Graphs/useGraph.ts

@@ -76,7 +76,7 @@ function buildGraph(
   return { nodes: Object.values(nodeMap), edges: edgeList };
 }
 
-export function useGraph(colorBy: 'provider' | 'source') {
+export function useGraph(colorBy: 'provider' | 'source', onYamlClick: (item: ManagedResourceItem) => void) {
   const {
     data: managedResources,
     isLoading: managedResourcesLoading,
@@ -154,12 +154,13 @@ export function useGraph(colorBy: 'provider' | 'source') {
             parentId,
             extraRefs,
             item,
+            onYamlClick,
           });
         }
       });
     });
     return Array.from(allNodesMap.values());
-  }, [managedResources, providerConfigsList]);
+  }, [managedResources, providerConfigsList, onYamlClick]);
 
   const colorMap = useMemo(() => generateColorMap(treeData, colorBy), [treeData, colorBy]);