feat: add Relations tab with force-directed resource dependency graph (#96)

Add a new "Relations" tab after "Images" that visualizes resource dependencies within a Helm release as an interactive force-directed graph. Detects relationships via ownerReferences, *Ref fields, volumes, env refs, service selectors, ingress backends, and RBAC bindings. External resources appear as dashed oval ghost nodes. Color-coded by resource category. Closes #96 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 06:18:04 +00:00 · 2026-03-17 17:58:00 +00:00
parent 443207191d
commit cfc28cf3a0
10 changed files with 7717 additions and 0 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,8 +9,12 @@
      "version": "1.1.0",
      "license": "Apache-2.0",
      "dependencies": {
+        "@dagrejs/dagre": "^2.0.4",
        "@tanstack/react-query": "^5.90.21",
+        "@types/d3-force": "^3.0.10",
+        "@xyflow/react": "^12.10.1",
        "compare-versions": "^6.1.1",
+        "d3-force": "^3.0.0",
        "diff2html": "^3.4.52",
        "flowbite-react": "^0.12.17",
        "highlight.js": "^11.11.1",
@@ -463,6 +467,21 @@
        "ms": "^2.1.1"
      }
    },
+    "node_modules/@dagrejs/dagre": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-2.0.4.tgz",
+      "integrity": "sha512-J6vCWTNpicHF4zFlZG1cS5DkGzMr9941gddYkakjrg3ZNev4bbqEgLHFTWiFrcJm7UCRu7olO3K6IRDd9gSGhA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dagrejs/graphlib": "3.0.4"
+      }
+    },
+    "node_modules/@dagrejs/graphlib": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-3.0.4.tgz",
+      "integrity": "sha512-HxZ7fCvAwTLCWCO0WjDkzAFQze8LdC6iOpKbetDKHIuDfIgMlIzYzqZ4nxwLlclQX+3ZVeZ1K2OuaOE2WWcyOg==",
+      "license": "MIT"
+    },
    "node_modules/@emnapi/core": {
      "version": "1.8.1",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -3401,6 +3420,61 @@
        "assertion-error": "^2.0.1"
      }
    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
    "node_modules/@types/deep-eql": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -4185,6 +4259,38 @@
        "url": "https://opencollective.com/vitest"
      }
    },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
    "node_modules/abbrev": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -5124,6 +5230,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
    "node_modules/classnames": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -5552,6 +5664,134 @@
        "node": "^20.1.0 || ^22.0.0 || >=24.0.0"
      }
    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/dashdash": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -13449,6 +13689,34 @@
      "peerDependencies": {
        "zod": "^3.25.0 || ^4.0.0"
      }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
    }
  }
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,8 +24,12 @@
    "cypress:component:open": "cypress open --component"
  },
  "dependencies": {
+    "@dagrejs/dagre": "^2.0.4",
    "@tanstack/react-query": "^5.90.21",
+    "@types/d3-force": "^3.0.10",
+    "@xyflow/react": "^12.10.1",
    "compare-versions": "^6.1.1",
+    "d3-force": "^3.0.0",
    "diff2html": "^3.4.52",
    "flowbite-react": "^0.12.17",
    "highlight.js": "^11.11.1",
--- a/frontend/src/API/releases.ts
+++ b/frontend/src/API/releases.ts
@@ -96,6 +96,35 @@ export function useGetImages(ns: string, name: string) {
  });
 }

+export interface RelationNode {
+  id: string;
+  kind: string;
+  name: string;
+  inRelease: boolean;
+}
+
+export interface RelationEdge {
+  source: string;
+  target: string;
+  type: string;
+}
+
+export interface RelationGraph {
+  nodes: RelationNode[];
+  edges: RelationEdge[];
+}
+
+export function useGetRelations(ns: string, name: string) {
+  return useQuery<RelationGraph>({
+    queryKey: ["relations", ns, name],
+    queryFn: () =>
+      apiService.fetchWithSafeDefaults<RelationGraph>({
+        url: `/api/helm/releases/${ns}/${name}/relations`,
+        fallback: { nodes: [], edges: [] },
+      }),
+  });
+}
+
 // List of installed k8s resources for this release
 export function useGetResources(ns: string, name: string, enabled?: boolean) {
  return useQuery<StructuredResources[]>({
--- a/frontend/src/components/revision/RevisionDetails.tsx
+++ b/frontend/src/components/revision/RevisionDetails.tsx
@@ -31,6 +31,7 @@ import Spinner from "../Spinner";
 import Tabs from "../Tabs";
 import RevisionDiff from "./RevisionDiff";
 import RevisionImages from "./RevisionImages";
+import RevisionRelations from "./RevisionRelations";
 import RevisionResource from "./RevisionResource";

 type RevisionTagProps = {
@@ -84,6 +85,11 @@ const RevisionDetails = ({
      label: "Images",
      content: <RevisionImages />,
    },
+    {
+      value: "relations",
+      label: "Relations",
+      content: <RevisionRelations />,
+    },
  ];
  const { context, namespace, chart } = useParams();
  const tab = searchParams.get("tab");
--- a/frontend/src/components/revision/RevisionRelations.tsx
+++ b/frontend/src/components/revision/RevisionRelations.tsx
@@ -0,0 +1,270 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useParams } from "react-router";
+import {
+  ReactFlow,
+  type Node,
+  type Edge,
+  type OnNodesChange,
+  Background,
+  Controls,
+  MiniMap,
+  MarkerType,
+  applyNodeChanges,
+} from "@xyflow/react";
+import {
+  forceSimulation,
+  forceLink,
+  forceManyBody,
+  forceCenter,
+  forceCollide,
+  type SimulationNodeDatum,
+  type SimulationLinkDatum,
+} from "d3-force";
+import "@xyflow/react/dist/style.css";
+
+import { useGetRelations } from "../../API/releases";
+import Spinner from "../Spinner";
+
+const NODE_WIDTH = 180;
+const NODE_HEIGHT = 50;
+
+const KIND_COLORS: Record<string, { bg: string; border: string }> = {
+  Deployment: { bg: "#dbeafe", border: "#2563eb" },
+  StatefulSet: { bg: "#dbeafe", border: "#2563eb" },
+  DaemonSet: { bg: "#dbeafe", border: "#2563eb" },
+  ReplicaSet: { bg: "#dbeafe", border: "#2563eb" },
+  Job: { bg: "#dbeafe", border: "#2563eb" },
+  CronJob: { bg: "#dbeafe", border: "#2563eb" },
+  Pod: { bg: "#dbeafe", border: "#2563eb" },
+  Service: { bg: "#ede9fe", border: "#7c3aed" },
+  Ingress: { bg: "#ede9fe", border: "#7c3aed" },
+  NetworkPolicy: { bg: "#ede9fe", border: "#7c3aed" },
+  ConfigMap: { bg: "#fef3c7", border: "#d97706" },
+  Secret: { bg: "#fef3c7", border: "#d97706" },
+  ServiceAccount: { bg: "#d1fae5", border: "#059669" },
+  Role: { bg: "#d1fae5", border: "#059669" },
+  ClusterRole: { bg: "#d1fae5", border: "#059669" },
+  RoleBinding: { bg: "#d1fae5", border: "#059669" },
+  ClusterRoleBinding: { bg: "#d1fae5", border: "#059669" },
+  PersistentVolumeClaim: { bg: "#fce7f3", border: "#db2777" },
+  PersistentVolume: { bg: "#fce7f3", border: "#db2777" },
+  StorageClass: { bg: "#fce7f3", border: "#db2777" },
+};
+
+const DEFAULT_COLOR = { bg: "#eff6ff", border: "#1347ff" };
+const GHOST_COLOR = { bg: "#f3f4f6", border: "#9ca3af" };
+
+interface SimNode extends SimulationNodeDatum {
+  id: string;
+}
+
+interface ForceLayoutResult {
+  nodes: Node[];
+  pinNode: (id: string, x: number, y: number) => void;
+  unpinNode: (id: string) => void;
+  setNodes: React.Dispatch<React.SetStateAction<Node[]>>;
+}
+
+function useForceLayout(
+  sourceNodes: Node[],
+  sourceEdges: Edge[]
+): ForceLayoutResult {
+  const [nodes, setNodes] = useState<Node[]>([]);
+  const simRef = useRef<ReturnType<typeof forceSimulation<SimNode>> | null>(
+    null
+  );
+  const sourceNodesRef = useRef(sourceNodes);
+  useEffect(() => {
+    sourceNodesRef.current = sourceNodes;
+  }, [sourceNodes]);
+
+  useEffect(() => {
+    if (!sourceNodes.length) {
+      return;
+    }
+
+    const radius = Math.max(300, sourceNodes.length * 30);
+    const simNodes: SimNode[] = sourceNodes.map((n, i) => {
+      const angle = (2 * Math.PI * i) / sourceNodes.length - Math.PI / 2;
+      return {
+        id: n.id,
+        x: radius * Math.cos(angle),
+        y: radius * Math.sin(angle),
+      };
+    });
+
+    const nodeById = new Map(simNodes.map((n) => [n.id, n]));
+
+    const simLinks: SimulationLinkDatum<SimNode>[] = sourceEdges
+      .filter((e) => nodeById.has(e.source) && nodeById.has(e.target))
+      .map((e) => ({
+        source: nodeById.get(e.source) as SimNode,
+        target: nodeById.get(e.target) as SimNode,
+      }));
+
+    simRef.current?.stop();
+
+    const sim = forceSimulation<SimNode>(simNodes)
+      .force(
+        "link",
+        forceLink<SimNode, SimulationLinkDatum<SimNode>>(simLinks)
+          .id((d: SimNode) => d.id)
+          .distance(200)
+      )
+      .force("charge", forceManyBody().strength(-800))
+      .force("center", forceCenter(0, 0))
+      .force("collide", forceCollide(NODE_WIDTH * 0.7))
+      .alphaDecay(0.02)
+      .on("tick", () => {
+        const current = sourceNodesRef.current;
+        setNodes(
+          current.map((n, i) => ({
+            ...n,
+            position: {
+              x: (simNodes[i].x ?? 0) - NODE_WIDTH / 2,
+              y: (simNodes[i].y ?? 0) - NODE_HEIGHT / 2,
+            },
+          }))
+        );
+      });
+
+    simRef.current = sim;
+
+    return () => {
+      sim.stop();
+    };
+  }, [sourceNodes, sourceEdges]);
+
+  const pinNode = useCallback((nodeId: string, x: number, y: number) => {
+    const sim = simRef.current;
+    if (!sim) return;
+    const simNode = sim.nodes().find((n: SimNode) => n.id === nodeId);
+    if (simNode) {
+      simNode.fx = x + NODE_WIDTH / 2;
+      simNode.fy = y + NODE_HEIGHT / 2;
+      sim.alpha(0.3).restart();
+    }
+  }, []);
+
+  const unpinNode = useCallback((nodeId: string) => {
+    const sim = simRef.current;
+    if (!sim) return;
+    const simNode = sim.nodes().find((n: SimNode) => n.id === nodeId);
+    if (simNode) {
+      simNode.fx = null;
+      simNode.fy = null;
+      sim.alpha(0.3).restart();
+    }
+  }, []);
+
+  return { nodes, setNodes, pinNode, unpinNode };
+}
+
+export default function RevisionRelations() {
+  const { namespace = "", chart = "" } = useParams();
+  const { data, isLoading } = useGetRelations(namespace, chart);
+
+  const { rfNodes, rfEdges } = useMemo(() => {
+    if (!data?.nodes?.length) {
+      return { rfNodes: [] as Node[], rfEdges: [] as Edge[] };
+    }
+
+    const builtNodes: Node[] = data.nodes.map((n) => {
+      const color = n.inRelease
+        ? (KIND_COLORS[n.kind] ?? DEFAULT_COLOR)
+        : GHOST_COLOR;
+      return {
+        id: n.id,
+        data: { label: `${n.kind}\n${n.name}` },
+        position: { x: 0, y: 0 },
+        draggable: true,
+        style: {
+          background: color.bg,
+          border: `2px ${n.inRelease ? "solid" : "dashed"} ${color.border}`,
+          borderRadius: n.inRelease ? "6px" : "50%",
+          padding: n.inRelease ? "8px 12px" : "12px 20px",
+          fontSize: "12px",
+          fontWeight: 500,
+          whiteSpace: "pre-line" as const,
+          width: NODE_WIDTH,
+          textAlign: "center" as const,
+          ...(n.inRelease ? {} : { color: "#6b7280" }),
+        },
+      };
+    });
+
+    const builtEdges: Edge[] = data.edges.map((e, i) => ({
+      id: `e-${i}`,
+      source: e.source,
+      target: e.target,
+      label: e.type,
+      type: "default",
+      style: { stroke: "#9ca3af" },
+      labelStyle: { fontSize: 10, fill: "#6b7280" },
+      markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12 },
+    }));
+
+    return { rfNodes: builtNodes, rfEdges: builtEdges };
+  }, [data]);
+
+  const { nodes, setNodes, pinNode, unpinNode } = useForceLayout(
+    rfNodes,
+    rfEdges
+  );
+
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    [setNodes]
+  );
+
+  const onNodeDrag = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      pinNode(node.id, node.position.x, node.position.y);
+    },
+    [pinNode]
+  );
+
+  const onNodeDragStop = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      unpinNode(node.id);
+    },
+    [unpinNode]
+  );
+
+  if (isLoading) return <Spinner />;
+
+  if (!nodes.length) {
+    return (
+      <div className="mt-3 rounded-sm bg-white p-4 text-sm shadow-sm">
+        No resource relations found in this release.
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-3 h-[600px] rounded-sm bg-white shadow-sm">
+      <ReactFlow
+        nodes={nodes}
+        edges={rfEdges}
+        onNodesChange={onNodesChange}
+        onNodeDrag={onNodeDrag}
+        onNodeDragStop={onNodeDragStop}
+        fitView
+        minZoom={0.2}
+        maxZoom={2}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+        <MiniMap
+          nodeStrokeWidth={2}
+          nodeColor={(n: Node) => {
+            const found = nodes.find((nd) => nd.id === n.id);
+            const borderStr = String(found?.style?.border ?? "");
+            return borderStr.includes("dashed") ? "#e5e7eb" : "#dbeafe";
+          }}
+        />
+      </ReactFlow>
+    </div>
+  );
+}
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock