Feat/adding graph to mcp

package.json

@@ -11,6 +11,7 @@
     "start": "node server.js",
     "build": "tsc && vite build",
     "lint": "eslint ./src --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint ./src --fix",
     "preview": "vite preview",
     "test:vi": "vitest",
     "test:cy": "cypress run --component --browser chrome",
@@ -39,6 +40,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 +57,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 +67,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",

public/locales/en.json

@@ -175,7 +175,8 @@
     "componentsTitle": "Components",
     "crossplaneTitle": "Crossplane",
     "gitOpsTitle": "GitOps",
-    "landscapersTitle": "Landscapers"
+    "landscapersTitle": "Landscapers",
+    "graphTitle": "Graph"
   },
   "ToastContext": {
     "errorMessage": "useToast must be used within a ToastProvider"

src/components/Graphs/CustomNode.module.css

@@ -0,0 +1,47 @@
+.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: 180px;
+}
+
+.nodeType {
+  font-size: 12px;
+  color: #888;
+  margin-top: 2px;
+}
+
+.yamlButtonWrapper {
+  margin-left: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.statusIcon {
+  margin-right: 6px;
+}

src/components/Graphs/CustomNode.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Handle, Position } from 'reactflow';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { Button, Icon } from '@ui5/webcomponents-react';
+import StatusIcon from './StatusIcon';
+import { CustomNodeProps, ManagedResourceItem } from './types';
+import styles from './CustomNode.module.css';
+
+const CustomNode: React.FC<CustomNodeProps & { onYamlClick: (item: ManagedResourceItem) => void }> = ({
+  data,
+  onYamlClick,
+}) => (
+  <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}>
+      <div className={styles.statusIcon}>
+        <StatusIcon status={data.status} />
+      </div>
+      <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}>
+      <Button
+        className={styles.smallerIconButton}
+        design="Transparent"
+        aria-label="YAML"
+        title="YAML"
+        onClick={() => onYamlClick(data.item)}
+      >
+        <Icon name="document" style={{ color: 'rgb(0, 100, 217)' }} />
+      </Button>
+    </div>
+  </div>
+);
+
+export default CustomNode;

src/components/Graphs/Graph.module.css

@@ -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;
+}