working graph

Author: Hubert-Szczepanski-SAP

package-lock.json

@@ -39,6 +39,7 @@
     "@ui5/webcomponents-icons": "^2.7.2",
     "@ui5/webcomponents-react": "^2.7.2",
     "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
     "dotenv": "^17.0.0",
     "fastify": "^5.3.3",
     "fastify-plugin": "^5.0.1",
@@ -55,6 +56,7 @@
     "react-router-dom": "^7.2.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-time-ago": "^7.3.3",
+    "reactflow": "^11.11.4",
     "swr": "^2.3.0",
     "yaml": "^2.7.1",
     "zod": "^4.0.0"
@@ -64,6 +66,7 @@
     "@eslint/js": "^9.22.0",
     "@graphql-codegen/cli": "^5.0.5",
     "@graphql-codegen/client-preset": "^4.8.0",
+    "@types/dagre": "^0.7.53",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.13.5",
     "@types/react": "^19.0.10",

package.json

@@ -0,0 +1,31 @@
+.nodeContainer {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  justify-content: space-between;
+  position: relative;
+  font-family: var(--sapFontFamily);
+  pointer-events: auto;
+}
+
+.nodeContent {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.nodeTextContainer {
+  overflow: hidden;
+}
+
+.nodeLabel {
+  font-weight: 600;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}

src/components/Graphs/CustomNode.module.css

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Handle, Position } from 'reactflow';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { YamlViewButton } from '../Yaml/YamlViewButton';
+import StatusIcon from './StatusIcon';
+import { CustomNodeProps } from './types';
+import styles from './CustomNode.module.css';
+
+const CustomNode: React.FC<CustomNodeProps> = ({ data }) => (
+  <div
+    className={styles.nodeContainer}
+    style={{ fontFamily: ThemingParameters.sapFontFamily }}
+  >
+    <Handle
+      type="target"
+      position={Position.Top}
+      style={{ visibility: 'hidden' }}
+    />
+    <Handle
+      type="source"
+      position={Position.Bottom}
+      style={{ visibility: 'hidden' }}
+    />
+    <div className={styles.nodeContent}>
+      <StatusIcon status={data.status} />
+      <div className={styles.nodeTextContainer}>
+        <div className={styles.nodeLabel} title={data.label}>
+          {data.label}
+        </div>
+        {data.type && <div className={styles.nodeType}>{data.type}</div>}
+      </div>
+    </div>
+    <div className={styles.yamlButtonWrapper}>
+      <YamlViewButton resourceObject={data.item} />
+    </div>
+  </div>
+);
+
+export default CustomNode;

src/components/Graphs/CustomNode.tsx

@@ -0,0 +1,35 @@
+.graphContainer {
+  display: flex;
+  height: 600px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #fafafa;
+  font-family: var(--sapFontFamily);
+}
+
+.graphColumn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.graphToolbar {
+  padding: 0.5rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.centeredMessage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  font-size: 18px;
+  color: #888;
+}
+
+.errorMessage {
+  color: #c00;
+}