@truedat/core 8.4.7 → 8.4.8

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@truedat/core",
-  "version": "8.4.7",
+  "version": "8.4.8",
   "description": "Truedat Web Core",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
   "module": "src/index.js",
   "files": [
     "src",
@@ -51,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.4.7",
+    "@truedat/test": "8.4.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -97,5 +100,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "71fcf487f24eb0b3e5a6962547e0e946c59033ce"
+  "gitHead": "7829e377f78c3cfc66e449f5dc31a8b03c0f5f00"
 }

package/src/components/Graph.js

@@ -1,69 +1,561 @@
-import _ from "lodash/fp";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
+import { Modal, Popup } from "semantic-ui-react";
 import {
   ReactFlow,
   ReactFlowProvider,
   useNodesState,
   useEdgesState,
   useReactFlow,
+  getNodesBounds,
+  getViewportForBounds,
   Position,
   MarkerType,
+  Controls,
+  ControlButton,
+  Background,
+  BackgroundVariant,
 } from "@xyflow/react";
 import ELK from "elkjs/lib/elk.bundled.js";
+import ConceptNode from "./graph/ConceptNode";
+import ColoredEdge from "./graph/ColoredEdge";
+import { getTargetSlotOffset } from "./graph/edgeLayout";
 import "@xyflow/react/dist/style.css";
 
+const nodeTypes = { concept: ConceptNode };
+const edgeTypes = { colored: ColoredEdge };
+
 const elk = new ELK();
+const DEFAULT_NODE_WIDTH = 130;
+const DEFAULT_NODE_HEIGHT = 44;
+const TRANSLATE_EXTENT_PADDING = 400;
+const DEFAULT_GRAPH_HEIGHT = "640px";
+const EXPANDED_GRAPH_HEIGHT = "82vh";
+const DEFAULT_MIN_ZOOM = 0.1;
+const DEFAULT_MAX_ZOOM = 2;
+const FIT_VIEW_PADDING = 0.08;
+const DEFAULT_TRANSLATE_EXTENT = [
+  [-800, -600],
+  [800, 600],
+];
+const CONTROL_TOOLTIP_DELAY = 120;
+const DEFAULT_EDGE_STROKE = "var(--td-graph-edge-stroke, #b0b8c8)";
+const MIN_NODE_VERTICAL_GAP = 12;
 
-const LayoutFlow = ({ initialNodes, initialEdges, onNodeClick }) => {
-  const { getNodes, setNodes, getEdges, fitView } = useReactFlow();
-  const parsedNodes = initialNodes.map((node) => ({
-    ...node,
-    position: { x: 0, y: 0 },
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left,
-  }));
-  const parsedEdges = initialEdges.map((edge) => ({
-    ...edge,
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-      width: 15,
-      height: 15,
-    },
-    style: {
-      strokeWidth: 2,
+const getIncomingEdgeGroupKey = (edge, stroke) =>
+  `${edge.target}::${stroke || DEFAULT_EDGE_STROKE}`;
+
+const getNodeRelationGroupKey = (edge) =>
+  edge?.data?.primaryType || edge?.style?.stroke || DEFAULT_EDGE_STROKE;
+
+const buildSignedNodeLevels = (nodes = [], edges = [], rootNodeId) => {
+  const nodeIds = new Set(nodes.map((node) => node.id));
+
+  if (!rootNodeId || !nodeIds.has(rootNodeId)) return new Map();
+
+  const adjacency = new Map();
+
+  edges.forEach((edge) => {
+    if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target)) return;
+
+    const sourceNeighbours = adjacency.get(edge.source) || [];
+    const targetNeighbours = adjacency.get(edge.target) || [];
+
+    sourceNeighbours.push({ id: edge.target, delta: 1 });
+    targetNeighbours.push({ id: edge.source, delta: -1 });
+
+    adjacency.set(edge.source, sourceNeighbours);
+    adjacency.set(edge.target, targetNeighbours);
+  });
+
+  const levels = new Map([[rootNodeId, 0]]);
+  const queue = [rootNodeId];
+
+  while (queue.length) {
+    const nodeId = queue.shift();
+    const currentLevel = levels.get(nodeId) || 0;
+
+    (adjacency.get(nodeId) || []).forEach(({ id, delta }) => {
+      const nextLevel = currentLevel + delta;
+      const previousLevel = levels.get(id);
+
+      if (
+        previousLevel === undefined ||
+        Math.abs(nextLevel) < Math.abs(previousLevel)
+      ) {
+        levels.set(id, nextLevel);
+        queue.push(id);
+      }
+    });
+  }
+
+  return levels;
+};
+
+const getNodeOrderingMeta = (node, levels, edges) => {
+  const rank = levels.get(node.id) || 0;
+  const connectedEdges = edges.filter(
+    (edge) => edge.source === node.id || edge.target === node.id
+  );
+
+  const preferredEdges = connectedEdges.filter((edge) => {
+    if (rank < 0 && edge.source === node.id) {
+      const neighbourRank = levels.get(edge.target);
+      return neighbourRank !== undefined && Math.abs(neighbourRank) < Math.abs(rank);
+    }
+
+    if (rank > 0 && edge.target === node.id) {
+      const neighbourRank = levels.get(edge.source);
+      return neighbourRank !== undefined && Math.abs(neighbourRank) < Math.abs(rank);
+    }
+
+    return false;
+  });
+
+  const orderingEdges = preferredEdges.length ? preferredEdges : connectedEdges;
+  const anchorIds = orderingEdges
+    .map((edge) => (edge.source === node.id ? edge.target : edge.source))
+    .sort();
+  const relationGroups = orderingEdges
+    .map((edge) => getNodeRelationGroupKey(edge))
+    .sort();
+
+  return {
+    rank,
+    anchorId: anchorIds[0] || "",
+    relationGroup: relationGroups[0] || "",
+    label: node?.data?.label || "",
+  };
+};
+
+const orderNodesByRelationGroup = (nodes = [], edges = [], rootNodeId) => {
+  if (!rootNodeId) return nodes;
+
+  const levels = buildSignedNodeLevels(nodes, edges, rootNodeId);
+
+  if (!levels.size) return nodes;
+
+  return [...nodes].sort((nodeA, nodeB) => {
+    const metaA = getNodeOrderingMeta(nodeA, levels, edges);
+    const metaB = getNodeOrderingMeta(nodeB, levels, edges);
+
+    if (metaA.rank !== metaB.rank) return metaA.rank - metaB.rank;
+    if (metaA.anchorId !== metaB.anchorId) {
+      return metaA.anchorId.localeCompare(metaB.anchorId);
+    }
+    if (metaA.relationGroup !== metaB.relationGroup) {
+      return metaA.relationGroup.localeCompare(metaB.relationGroup);
+    }
+    if (metaA.label !== metaB.label) return metaA.label.localeCompare(metaB.label);
+
+    return nodeA.id.localeCompare(nodeB.id);
+  });
+};
+
+const getNodeHeight = (node) =>
+  node.height ?? node.measured?.height ?? DEFAULT_NODE_HEIGHT;
+
+const getNodeCenterY = (node) => (node.y ?? node.position?.y ?? 0) + getNodeHeight(node) / 2;
+
+const alignNodesToConnectionPoints = (nodes = [], edges = [], rootNodeId) => {
+  if (!rootNodeId) return nodes;
+
+  const levels = buildSignedNodeLevels(nodes, edges, rootNodeId);
+
+  if (!levels.size) return nodes;
+
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const desiredCentersById = new Map();
+
+  nodes.forEach((node) => {
+    const rank = levels.get(node.id) || 0;
+
+    if (rank === 0) return;
+
+    const preferredEdges = edges.filter((edge) => {
+      if (rank < 0 && edge.source === node.id) {
+        const neighbourRank = levels.get(edge.target);
+        return neighbourRank !== undefined && Math.abs(neighbourRank) < Math.abs(rank);
+      }
+
+      if (rank > 0 && edge.target === node.id) {
+        const neighbourRank = levels.get(edge.source);
+        return neighbourRank !== undefined && Math.abs(neighbourRank) < Math.abs(rank);
+      }
+
+      return false;
+    });
+
+    if (preferredEdges.length !== 1) return;
+
+    const edge = preferredEdges[0];
+    const slotOffset = getTargetSlotOffset(
+      edge.data?.targetSlotIndex,
+      edge.data?.targetSlotCount
+    );
+
+    if (rank < 0) {
+      const targetNode = nodeById.get(edge.target);
+
+      if (!targetNode) return;
+
+      desiredCentersById.set(node.id, getNodeCenterY(targetNode) + slotOffset);
+      return;
+    }
+
+    const sourceNode = nodeById.get(edge.source);
+
+    if (!sourceNode) return;
+
+    desiredCentersById.set(node.id, getNodeCenterY(sourceNode) - slotOffset);
+  });
+
+  const nodesByRank = new Map();
+
+  nodes.forEach((node) => {
+    const rank = levels.get(node.id) || 0;
+    const bucket = nodesByRank.get(rank) || [];
+
+    bucket.push(node);
+    nodesByRank.set(rank, bucket);
+  });
+
+  const alignedNodes = new Map();
+
+  nodesByRank.forEach((rankNodes) => {
+    const orderedNodes = [...rankNodes].sort((nodeA, nodeB) => {
+      const desiredA = desiredCentersById.get(nodeA.id) ?? getNodeCenterY(nodeA);
+      const desiredB = desiredCentersById.get(nodeB.id) ?? getNodeCenterY(nodeB);
+
+      if (desiredA !== desiredB) return desiredA - desiredB;
+
+      return (nodeA.y ?? nodeA.position?.y ?? 0) - (nodeB.y ?? nodeB.position?.y ?? 0);
+    });
+
+    let previousBottom = Number.NEGATIVE_INFINITY;
+
+    orderedNodes.forEach((node) => {
+      const height = getNodeHeight(node);
+      const desiredCenter = desiredCentersById.get(node.id) ?? getNodeCenterY(node);
+      const desiredTop = desiredCenter - height / 2;
+      const nextTop = Math.max(desiredTop, previousBottom + MIN_NODE_VERTICAL_GAP);
+
+      previousBottom = nextTop + height;
+      alignedNodes.set(node.id, {
+        ...node,
+        y: nextTop,
+        position: { ...(node.position || {}), x: node.x, y: nextTop },
+      });
+    });
+  });
+
+  return nodes.map((node) => alignedNodes.get(node.id) || node);
+};
+
+export const getMinZoomForDiagram = (
+  nodes = [],
+  viewportWidth,
+  viewportHeight,
+  padding = FIT_VIEW_PADDING
+) => {
+  if (!nodes.length || !viewportWidth || !viewportHeight) return DEFAULT_MIN_ZOOM;
+
+  const bounds = getNodesBounds(nodes);
+
+  if (!bounds.width || !bounds.height) return DEFAULT_MIN_ZOOM;
+
+  return Math.max(
+    getViewportForBounds(
+      bounds,
+      viewportWidth,
+      viewportHeight,
+      DEFAULT_MIN_ZOOM,
+      DEFAULT_MAX_ZOOM,
+      padding
+    ).zoom,
+    DEFAULT_MIN_ZOOM
+  );
+};
+
+const GraphControlTooltip = ({ content, children }) => (
+  <Popup
+    content={content}
+    position="left center"
+    mouseEnterDelay={CONTROL_TOOLTIP_DELAY}
+    mouseLeaveDelay={0}
+    trigger={<span>{children}</span>}
+  />
+);
+
+GraphControlTooltip.propTypes = {
+  content: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+const getTranslateExtent = (nodes = []) => {
+  if (!nodes.length) return DEFAULT_TRANSLATE_EXTENT;
+
+  const bounds = nodes.reduce(
+    (acc, node) => {
+      const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+      const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
+      const x = node.position?.x ?? node.x ?? 0;
+      const y = node.position?.y ?? node.y ?? 0;
+
+      return {
+        minX: Math.min(acc.minX, x),
+        minY: Math.min(acc.minY, y),
+        maxX: Math.max(acc.maxX, x + width),
+        maxY: Math.max(acc.maxY, y + height),
+      };
     },
-  }));
-  const [nodes, , onNodesChange] = useNodesState(parsedNodes);
-  const [edges, , onEdgesChange] = useEdgesState(parsedEdges);
-
-  const getLayoutedElements = useCallback(() => {
-    const layoutOptions = {
-      "elk.algorithm": "layered",
-      "elk.direction": "RIGHT",
-      "elk.algorithm": "layered",
-      "elk.layered.spacing.nodeNodeBetweenLayers": 100,
-      "elk.spacing.nodeNode": 80,
-    };
-    const graph = {
-      id: "root",
-      layoutOptions: layoutOptions,
-      children: getNodes().map((node) => ({
+    {
+      minX: Number.POSITIVE_INFINITY,
+      minY: Number.POSITIVE_INFINITY,
+      maxX: Number.NEGATIVE_INFINITY,
+      maxY: Number.NEGATIVE_INFINITY,
+    }
+  );
+
+  return [
+    [
+      bounds.minX - TRANSLATE_EXTENT_PADDING,
+      bounds.minY - TRANSLATE_EXTENT_PADDING,
+    ],
+    [
+      bounds.maxX + TRANSLATE_EXTENT_PADDING,
+      bounds.maxY + TRANSLATE_EXTENT_PADDING,
+    ],
+  ];
+};
+
+const LayoutFlow = ({
+  initialNodes,
+  initialEdges,
+  onNodeClick,
+  onOpenExpanded,
+  containerRef,
+  rootNodeId,
+}) => {
+  const { fitView, zoomIn, zoomOut, getNodes } = useReactFlow();
+  const { formatMessage } = useIntl();
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [minZoom, setMinZoom] = useState(DEFAULT_MIN_ZOOM);
+  const layoutRunId = useRef(0);
+  const fitViewFrameId = useRef();
+  const lastFitSignature = useRef("");
+  const parsedNodes = useMemo(
+    () =>
+      initialNodes.map((node) => ({
         ...node,
-        width: node.measured?.width,
-        height: node.measured?.height,
+        position: { x: 0, y: 0 },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
       })),
-      edges: getEdges(),
-    };
+    [initialNodes]
+  );
+  const parsedEdges = useMemo(
+    () => {
+      const edgesWithStroke = initialEdges.map((edge) => {
+        const stroke =
+          edge.style?.stroke || DEFAULT_EDGE_STROKE;
+        return {
+          ...edge,
+          style: {
+            strokeWidth: 1.5,
+            ...edge.style,
+            stroke,
+          },
+          data: {
+            ...edge.data,
+            edgeStroke: stroke,
+          },
+        };
+      });
+
+      const groupsByTarget = new Map();
+
+      edgesWithStroke.forEach((edge) => {
+        const stroke = edge.style?.stroke || DEFAULT_EDGE_STROKE;
+        const groupKey = getIncomingEdgeGroupKey(edge, stroke);
+        const targetGroups = groupsByTarget.get(edge.target) || new Map();
+        const group = targetGroups.get(groupKey) || [];
+
+        group.push(edge.id);
+        targetGroups.set(groupKey, group);
+        groupsByTarget.set(edge.target, targetGroups);
+      });
+
+      const groupMetaByEdgeId = new Map();
+
+      groupsByTarget.forEach((targetGroups) => {
+        const orderedGroups = Array.from(targetGroups.entries())
+          .sort(([groupKeyA], [groupKeyB]) => groupKeyA.localeCompare(groupKeyB));
+
+        orderedGroups.forEach(([groupKey, edgeIds], groupIndex) => {
+          edgeIds.forEach((edgeId, edgeIndex) => {
+            groupMetaByEdgeId.set(edgeId, {
+              targetSlotCount: orderedGroups.length,
+              targetSlotIndex: groupIndex,
+              showTargetArrow: edgeIndex === edgeIds.length - 1,
+              incomingGroupKey: groupKey,
+            });
+          });
+        });
+      });
+
+      return edgesWithStroke.map((edge) => ({
+        ...edge,
+        markerEnd: edge.markerEnd || {
+          type: MarkerType.ArrowClosed,
+          width: 12,
+          height: 12,
+          color: edge.style?.stroke || DEFAULT_EDGE_STROKE,
+        },
+        data: {
+          ...edge.data,
+          ...groupMetaByEdgeId.get(edge.id),
+        },
+      }));
+    },
+    [initialEdges]
+  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(parsedNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(parsedEdges);
+  const translateExtent = useMemo(() => getTranslateExtent(nodes), [nodes]);
+  const layoutInput = useMemo(() => {
+    const safeNodes = orderNodesByRelationGroup(
+      parsedNodes.filter((node) => node && node.id),
+      parsedEdges,
+      rootNodeId
+    );
+    const safeNodeIds = new Set(safeNodes.map((node) => node.id));
+    const safeEdges = parsedEdges.filter(
+      (edge) =>
+        edge &&
+        edge.id &&
+        edge.source &&
+        edge.target &&
+        safeNodeIds.has(edge.source) &&
+        safeNodeIds.has(edge.target)
+    );
+
+    return { nodes: safeNodes, edges: safeEdges };
+  }, [parsedNodes, parsedEdges, rootNodeId]);
 
-    elk.layout(graph).then(({ children }) => {
-      children.forEach((node) => {
-        node.position = { x: node.x, y: node.y };
+  const getLayoutedElements = useCallback(
+    ({ nodes: nodesToLayout, edges: edgesToLayout }) => {
+      const scheduleFitView = (nodesForFit, edgesForFit) => {
+        const signature = `${nodesForFit
+          .map((node) => node.id)
+          .join("|")}::${edgesForFit.map((edge) => edge.id).join("|")}`;
+        const changed = signature !== lastFitSignature.current;
+        lastFitSignature.current = signature;
+
+        if (fitViewFrameId.current) {
+          cancelAnimationFrame(fitViewFrameId.current);
+        }
+
+        fitViewFrameId.current = requestAnimationFrame(() => {
+          const measuredNodes = getNodes();
+          const nextMinZoom = getMinZoomForDiagram(
+            measuredNodes.length ? measuredNodes : nodesForFit,
+            containerRef.current?.clientWidth,
+            containerRef.current?.clientHeight
+          );
+
+          setMinZoom(nextMinZoom);
+          fitView({
+            padding: FIT_VIEW_PADDING,
+            duration: changed ? 300 : 0,
+            minZoom: nextMinZoom,
+          });
+        });
+      };
+
+      if (!nodesToLayout.length) {
+        setNodes([]);
+        setEdges([]);
+        return;
+      }
+
+      const currentLayoutRunId = layoutRunId.current + 1;
+      layoutRunId.current = currentLayoutRunId;
+      const layoutOptions = {
+        "elk.algorithm": "layered",
+        "elk.direction": "RIGHT",
+        "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+        "elk.layered.crossingMinimization.forceNodeModelOrder": true,
+        "elk.layered.spacing.nodeNodeBetweenLayers": 60,
+        "elk.spacing.nodeNode": 40,
+      };
+      const graph = {
+        id: "root",
+        layoutOptions: layoutOptions,
+        children: nodesToLayout.map((node) => ({
+          ...node,
+          width: node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH,
+          height: node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT,
+        })),
+        edges: edgesToLayout,
+      };
+
+      elk.layout(graph).then(({ children = [] }) => {
+        if (currentLayoutRunId !== layoutRunId.current) return;
+        children.forEach((node) => {
+          node.position = { x: node.x, y: node.y };
+        });
+
+        const alignedChildren = alignNodesToConnectionPoints(
+          children,
+          edgesToLayout,
+          rootNodeId
+        );
+
+        setNodes(alignedChildren);
+        scheduleFitView(alignedChildren, edgesToLayout);
+      }).catch(() => {
+        if (currentLayoutRunId !== layoutRunId.current) return;
+
+        setNodes(nodesToLayout);
+        setEdges(edgesToLayout);
+        scheduleFitView(nodesToLayout, edgesToLayout);
       });
+    },
+    [containerRef, fitView, getNodes, rootNodeId, setEdges, setNodes]
+  );
+
+  const onInit = useCallback(() => {
+    setIsInitialized(true);
+    setNodes(layoutInput.nodes);
+    setEdges(layoutInput.edges);
+    getLayoutedElements(layoutInput);
+  }, [getLayoutedElements, layoutInput, setEdges, setNodes]);
+
+  useEffect(() => {
+    if (!isInitialized) return;
 
-      setNodes(children);
-      fitView();
+    setNodes(layoutInput.nodes);
+    setEdges(layoutInput.edges);
+    const animationFrameId = requestAnimationFrame(() => {
+      getLayoutedElements(layoutInput);
     });
+
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [
+    isInitialized,
+    layoutInput,
+    setNodes,
+    setEdges,
+    getLayoutedElements,
+  ]);
+
+  useEffect(() => () => {
+    if (fitViewFrameId.current) {
+      cancelAnimationFrame(fitViewFrameId.current);
+    }
+    layoutRunId.current += 1;
   }, []);
 
   return (
@@ -72,30 +564,174 @@ const LayoutFlow = ({ initialNodes, initialEdges, onNodeClick }) => {
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onInit={getLayoutedElements}
-      fitView
+      onInit={onInit}
       onNodeClick={onNodeClick}
       nodesConnectable={false}
-    ></ReactFlow>
+      translateExtent={translateExtent}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      attributionPosition="bottom-left"
+      minZoom={minZoom}
+    >
+      <Background
+        variant={BackgroundVariant.Dots}
+        gap={20}
+        size={1}
+        color="var(--td-graph-node-border, #d0d5e0)"
+      />
+      <Controls
+        position="top-right"
+        orientation="horizontal"
+        showZoom={false}
+        showFitView={false}
+        showInteractive={false}
+      >
+        <GraphControlTooltip content={formatMessage({ id: "graph.controls.zoom_in" })}>
+          <ControlButton onClick={() => zoomIn({ duration: 200 })} aria-label={formatMessage({ id: "graph.controls.zoom_in" })}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+          </ControlButton>
+        </GraphControlTooltip>
+        <GraphControlTooltip content={formatMessage({ id: "graph.controls.zoom_out" })}>
+          <ControlButton onClick={() => zoomOut({ duration: 200 })} aria-label={formatMessage({ id: "graph.controls.zoom_out" })}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+          </ControlButton>
+        </GraphControlTooltip>
+        <GraphControlTooltip content={formatMessage({ id: "graph.controls.fit_view" })}>
+          <ControlButton
+            onClick={() =>
+              fitView({ padding: FIT_VIEW_PADDING, duration: 300, minZoom })
+            }
+            aria-label={formatMessage({ id: "graph.controls.fit_view" })}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+              <path d="M3 16v3a2 2 0 0 0 2 2h3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+            </svg>
+          </ControlButton>
+        </GraphControlTooltip>
+        {onOpenExpanded ? (
+          <GraphControlTooltip content={formatMessage({ id: "graph.controls.open_expanded" })}>
+            <ControlButton
+              onClick={onOpenExpanded}
+              aria-label={formatMessage({ id: "graph.controls.open_expanded" })}
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M15 3h6v6" />
+                <path d="M9 21H3v-6" />
+                <path d="M21 3l-7 7" />
+                <path d="M3 21l7-7" />
+              </svg>
+            </ControlButton>
+          </GraphControlTooltip>
+        ) : null}
+      </Controls>
+    </ReactFlow>
   );
 };
 
-export const Graph = ({ nodes, edges, onNodeClick }) => (
-  <div style={{ height: "640px" }}>
-    <ReactFlowProvider>
-      <LayoutFlow
-        initialNodes={nodes}
-        initialEdges={edges}
+LayoutFlow.propTypes = {
+  initialNodes: PropTypes.array,
+  initialEdges: PropTypes.array,
+  onNodeClick: PropTypes.func,
+  onOpenExpanded: PropTypes.func,
+  containerRef: PropTypes.object,
+  rootNodeId: PropTypes.string,
+};
+
+const GraphCanvas = ({
+  nodes,
+  edges,
+  onNodeClick,
+  height,
+  onOpenExpanded,
+  rootNodeId,
+}) => {
+  const containerRef = useRef(null);
+
+  return (
+    <div className="td-graph-container" style={{ "--td-graph-container-height": height }} ref={containerRef}>
+      <ReactFlowProvider>
+        <LayoutFlow
+          initialNodes={nodes}
+          initialEdges={edges}
+          onNodeClick={onNodeClick}
+          onOpenExpanded={onOpenExpanded}
+          containerRef={containerRef}
+          rootNodeId={rootNodeId}
+        />
+      </ReactFlowProvider>
+    </div>
+  );
+};
+
+GraphCanvas.propTypes = {
+  nodes: PropTypes.array,
+  edges: PropTypes.array,
+  onNodeClick: PropTypes.func,
+  height: PropTypes.string,
+  onOpenExpanded: PropTypes.func,
+  rootNodeId: PropTypes.string,
+};
+
+export const Graph = ({
+  nodes,
+  edges,
+  onNodeClick,
+  allowExpandedView = true,
+  rootNodeId,
+}) => {
+  const { formatMessage } = useIntl();
+  const [expandedOpen, setExpandedOpen] = useState(false);
+
+  const openExpanded = useCallback(() => setExpandedOpen(true), []);
+  const closeExpanded = useCallback(() => setExpandedOpen(false), []);
+
+  return (
+    <>
+      <GraphCanvas
+        nodes={nodes}
+        edges={edges}
         onNodeClick={onNodeClick}
+        height={DEFAULT_GRAPH_HEIGHT}
+        onOpenExpanded={allowExpandedView ? openExpanded : undefined}
+        rootNodeId={rootNodeId}
       />
-    </ReactFlowProvider>
-  </div>
-);
+      {allowExpandedView ? (
+        <Modal
+          open={expandedOpen}
+          onClose={closeExpanded}
+          closeIcon
+          size="fullscreen"
+          closeOnDimmerClick
+          closeOnEscape
+          className="td-graph-modal"
+        >
+          <Modal.Header>{formatMessage({ id: "graph.expanded.header" })}</Modal.Header>
+          <Modal.Content>
+            <GraphCanvas
+              nodes={nodes}
+              edges={edges}
+              onNodeClick={onNodeClick}
+              height={EXPANDED_GRAPH_HEIGHT}
+              rootNodeId={rootNodeId}
+            />
+          </Modal.Content>
+        </Modal>
+      ) : null}
+    </>
+  );
+};
 
 Graph.propTypes = {
   nodes: PropTypes.array,
   edges: PropTypes.array,
-  onNodeClick: PropTypes.function,
+  onNodeClick: PropTypes.func,
+  allowExpandedView: PropTypes.bool,
+  rootNodeId: PropTypes.string,
 };
 
 export default Graph;

package/src/components/__tests__/Graph.spec.js

@@ -0,0 +1,87 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { Graph, getMinZoomForDiagram } from "../Graph";
+
+const mockGetNodesBounds = jest.fn();
+const mockGetViewportForBounds = jest.fn();
+
+jest.mock("elkjs/lib/elk.bundled.js", () =>
+  jest.fn().mockImplementation(() => ({
+    layout: jest.fn(() => Promise.resolve({ children: [] })),
+  }))
+);
+
+jest.mock("@xyflow/react", () => ({
+  ReactFlow: ({ children }) => <div data-testid="react-flow">{children}</div>,
+  ReactFlowProvider: ({ children }) => <>{children}</>,
+  useNodesState: (initialNodes) => [initialNodes, jest.fn(), jest.fn()],
+  useEdgesState: (initialEdges) => [initialEdges, jest.fn(), jest.fn()],
+  useReactFlow: () => ({
+    fitView: jest.fn(),
+    zoomIn: jest.fn(),
+    zoomOut: jest.fn(),
+    getNodes: jest.fn().mockReturnValue([]),
+  }),
+  Position: {
+    Right: "right",
+    Left: "left",
+  },
+  getNodesBounds: (...args) => mockGetNodesBounds(...args),
+  getViewportForBounds: (...args) => mockGetViewportForBounds(...args),
+  MarkerType: {
+    ArrowClosed: "arrowclosed",
+  },
+  Controls: ({ children }) => <div>{children}</div>,
+  ControlButton: ({ children, ...props }) => (
+    <button type="button" {...props}>
+      {children}
+    </button>
+  ),
+  Background: () => null,
+  BackgroundVariant: {
+    Dots: "dots",
+  },
+}));
+
+describe("<Graph />", () => {
+  const props = {
+    nodes: [{ id: "business_concept:1", data: { label: "Root" }, position: { x: 0, y: 0 } }],
+    edges: [],
+  };
+
+  beforeEach(() => {
+    mockGetNodesBounds.mockReturnValue({ x: 0, y: 0, width: 100, height: 50 });
+    mockGetViewportForBounds.mockReturnValue({ x: 0, y: 0, zoom: 0.75 });
+  });
+
+  afterEach(() => {
+    mockGetNodesBounds.mockReset();
+    mockGetViewportForBounds.mockReset();
+  });
+
+  it("uses the fit view zoom as the minimum zoom level", () => {
+    expect(getMinZoomForDiagram(props.nodes, 600, 300)).toBe(0.75);
+    expect(mockGetViewportForBounds).toHaveBeenCalledWith(
+      { x: 0, y: 0, width: 100, height: 50 },
+      600,
+      300,
+      0.1,
+      2,
+      0.08
+    );
+  });
+
+  it("opens an expanded modal from the controls bar", async () => {
+    render(<Graph {...props} />);
+
+    expect(screen.queryByText("graph.expanded.header")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText("graph.controls.open_expanded"));
+
+    await waitFor(() => {
+      expect(screen.getByText("graph.expanded.header")).toBeInTheDocument();
+      expect(screen.getAllByTestId("react-flow")).toHaveLength(2);
+      expect(screen.getAllByLabelText("graph.controls.open_expanded")).toHaveLength(1);
+    });
+  });
+});

package/src/components/graph/ColoredEdge.js

@@ -0,0 +1,166 @@
+import { memo, useState } from "react";
+import { BaseEdge, EdgeLabelRenderer } from "@xyflow/react";
+import { getTargetSlotOffset } from "./edgeLayout";
+
+const MIN_CURVE_OFFSET = 14;
+const MAX_CURVE_OFFSET = 38;
+const EDGE_ARROW_LENGTH = 10;
+const EDGE_ARROW_WIDTH = 8;
+const EDGE_START_DOT_RADIUS = 3.5;
+
+const getCurveOffset = ({ sourceX, sourceY, targetX, targetY }) => {
+  const horizontalDistance = Math.abs(targetX - sourceX);
+  const verticalDistance = Math.abs(targetY - sourceY);
+
+  return Math.max(
+    MIN_CURVE_OFFSET,
+    Math.min(MAX_CURVE_OFFSET, horizontalDistance * 0.28 + verticalDistance * 0.04)
+  );
+};
+
+const getControlPoint = (x, y, position, offset) => {
+  switch (position) {
+    case "left":
+      return { x: x - offset, y };
+    case "right":
+      return { x: x + offset, y };
+    case "top":
+      return { x, y: y - offset };
+    case "bottom":
+      return { x, y: y + offset };
+    default:
+      return { x, y };
+  }
+};
+
+const getBezierPoint = (t, p0, p1, p2, p3) => {
+  const mt = 1 - t;
+  const mt2 = mt * mt;
+  const t2 = t * t;
+
+  return (
+    mt2 * mt * p0 +
+    3 * mt2 * t * p1 +
+    3 * mt * t2 * p2 +
+    t2 * t * p3
+  );
+};
+
+const getBezierDerivative = (t, p0, p1, p2, p3) => {
+  const mt = 1 - t;
+
+  return (
+    3 * mt * mt * (p1 - p0) +
+    6 * mt * t * (p2 - p1) +
+    3 * t * t * (p3 - p2)
+  );
+};
+
+const normalizeVector = (x, y) => {
+  const length = Math.hypot(x, y) || 1;
+
+  return { x: x / length, y: y / length };
+};
+
+const ColoredEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  data = {},
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const targetSlotOffset = getTargetSlotOffset(
+    data.targetSlotIndex,
+    data.targetSlotCount
+  );
+  const adjustedTargetY = targetY + targetSlotOffset;
+  const curveOffset = getCurveOffset({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY: adjustedTargetY,
+  });
+  const stroke = style.stroke || "var(--td-graph-edge-stroke, #b0b8c8)";
+  const sourceControl = getControlPoint(
+    sourceX,
+    sourceY,
+    sourcePosition,
+    curveOffset
+  );
+  const targetControl = getControlPoint(
+    targetX,
+    adjustedTargetY,
+    targetPosition,
+    curveOffset
+  );
+  const targetTangent = normalizeVector(
+    getBezierDerivative(1, sourceX, sourceControl.x, targetControl.x, targetX),
+    getBezierDerivative(
+      1,
+      sourceY,
+      sourceControl.y,
+      targetControl.y,
+      adjustedTargetY
+    )
+  );
+  const lineTargetX = targetX - targetTangent.x * EDGE_ARROW_LENGTH;
+  const lineTargetY = adjustedTargetY - targetTangent.y * EDGE_ARROW_LENGTH;
+  const edgePath = `M ${sourceX},${sourceY} C ${sourceControl.x},${sourceControl.y} ${targetControl.x},${targetControl.y} ${lineTargetX},${lineTargetY}`;
+  const labelX = getBezierPoint(0.5, sourceX, sourceControl.x, targetControl.x, lineTargetX);
+  const labelY = getBezierPoint(0.5, sourceY, sourceControl.y, targetControl.y, lineTargetY);
+  const arrowNormalX = -targetTangent.y;
+  const arrowNormalY = targetTangent.x;
+  const arrowLeftX = lineTargetX + arrowNormalX * (EDGE_ARROW_WIDTH / 2);
+  const arrowLeftY = lineTargetY + arrowNormalY * (EDGE_ARROW_WIDTH / 2);
+  const arrowRightX = lineTargetX - arrowNormalX * (EDGE_ARROW_WIDTH / 2);
+  const arrowRightY = lineTargetY - arrowNormalY * (EDGE_ARROW_WIDTH / 2);
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        style={style}
+      />
+      <circle
+        cx={sourceX}
+        cy={sourceY}
+        r={EDGE_START_DOT_RADIUS}
+        fill={stroke}
+        pointerEvents="none"
+      />
+      {data.showTargetArrow !== false ? (
+        <polygon
+          points={`${targetX},${adjustedTargetY} ${arrowLeftX},${arrowLeftY} ${arrowRightX},${arrowRightY}`}
+          fill={stroke}
+          pointerEvents="none"
+        />
+      ) : null}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="transparent"
+        strokeWidth={16}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      />
+      {hovered && data.label && (
+        <EdgeLabelRenderer>
+          <div
+            className="td-graph-edge-label nodrag nopan"
+            style={{ transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)` }}
+          >
+            {data.label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+};
+
+export default memo(ColoredEdge);

package/src/components/graph/ConceptNode.js

@@ -0,0 +1,19 @@
+import { memo } from "react";
+import { Handle, Position } from "@xyflow/react";
+import "./ConceptNode.less";
+
+const ConceptNode = ({ data }) => {
+  const { label, isActive } = data;
+
+  return (
+    <div
+      className={`td-concept-node${isActive ? " td-concept-node--active" : ""}`}
+    >
+      <Handle type="target" position={Position.Left} />
+      <span className="td-concept-node__label">{label}</span>
+      <Handle type="source" position={Position.Right} />
+    </div>
+  );
+};
+
+export default memo(ConceptNode);

package/src/components/graph/ConceptNode.less

@@ -0,0 +1,64 @@
+.td-concept-node {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 130px;
+  min-height: 44px;
+  padding: 8px 10px;
+  border: 1.5px solid var(--td-graph-node-border, #d0d5e0);
+  border-radius: var(--td-graph-border-radius, 8px);
+  background-color: var(--td-graph-node-bg, #ffffff);
+  box-shadow: var(--td-graph-node-shadow, 0 2px 6px rgba(21, 26, 36, 0.08));
+  color: var(--td-graph-node-text, #151a24);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.4;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: break-word;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease,
+    color 150ms ease;
+
+  &:hover {
+    border-color: var(--td-graph-node-hover-border, #2f3443);
+    box-shadow: var(--td-graph-node-hover-shadow, 0 6px 18px rgba(21, 26, 36, 0.14));
+  }
+
+  &--active {
+    background-color: var(--td-graph-node-active-bg, #ed5c17);
+    color: var(--td-graph-node-active-text, #ffffff);
+    font-weight: 600;
+    border-color: var(--td-graph-node-active-bg, #ed5c17);
+    box-shadow: var(--td-graph-node-active-shadow, 0 4px 14px rgba(237, 92, 23, 0.35));
+    cursor: default;
+
+    .react-flow__handle {
+      background-color: rgba(255, 255, 255, 0.6);
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+  }
+
+  .react-flow__handle {
+    width: 8px;
+    height: 8px;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    background-color: transparent;
+    opacity: 0;
+    pointer-events: none;
+    transition: background-color 150ms ease;
+  }
+}
+
+.td-concept-node__label {
+  display: block;
+  width: 100%;
+  text-align: center;
+}

package/src/components/graph/edgeLayout.js

@@ -0,0 +1,11 @@
+const TARGET_SLOT_STEP = 10;
+const MAX_TARGET_SLOT_SPAN = 22;
+
+export const getTargetSlotOffset = (slotIndex = 0, slotCount = 1) => {
+  if (!slotCount || slotCount <= 1) return 0;
+
+  const totalSpan = Math.min((slotCount - 1) * TARGET_SLOT_STEP, MAX_TARGET_SLOT_SPAN);
+  const step = totalSpan / (slotCount - 1);
+
+  return -totalSpan / 2 + slotIndex * step;
+};

package/src/styles/graph.less

@@ -0,0 +1,30 @@
+.td-graph-container {
+  height: var(--td-graph-container-height, 640px);
+
+  .react-flow {
+    background: var(--td-graph-bg, #f7f8fa);
+  }
+
+  .react-flow__controls {
+    margin: 8px;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+}
+
+.ui.modal.td-graph-modal > .content {
+  padding: 0;
+}
+
+.td-graph-edge-label {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 1000;
+}

package/src/styles/graphTokens.less

@@ -0,0 +1,26 @@
+:root {
+  --td-graph-theme-primary: #ed5c17;
+
+  /* Graph palette – Relations Graph (React Flow) */
+  --td-graph-bg: #f7f8fa;
+  --td-graph-node-bg: #ffffff;
+  --td-graph-node-border: #d0d5e0;
+  --td-graph-node-text: #151a24;
+  --td-graph-node-hover-border: #2f3443;
+  --td-graph-node-shadow: 0 2px 6px rgba(21, 26, 36, 0.08);
+  --td-graph-node-hover-shadow: 0 6px 18px rgba(21, 26, 36, 0.14);
+  --td-graph-node-active-bg: var(--td-graph-theme-primary);
+  --td-graph-node-active-text: #ffffff;
+  --td-graph-node-active-shadow: 0 4px 14px rgba(237, 92, 23, 0.35);
+  --td-graph-edge-stroke: #a2a9b8;
+  --td-graph-edge-label-text: #3a4150;
+  --td-graph-edge-label-bg: #f7f8fa;
+  --td-graph-handle-bg: #b0b8c8;
+  --td-graph-handle-border: #ffffff;
+  --td-graph-accent: var(--td-graph-theme-primary);
+  --td-graph-depth-disabled: #bdbdbd;
+  --td-graph-depth-inactive: #c9c9c9;
+  --td-graph-border: #d4d4d5;
+  --td-graph-border-radius: 10px;
+
+}

package/src/styles/lineageTokens.less

@@ -0,0 +1,12 @@
+:root {
+  --td-lineage-accent: #ed5c17;
+  --td-lineage-accent-light: #f49360;
+  --td-lineage-group-fill: #ccc;
+  --td-lineage-group-border: #888;
+  --td-lineage-group-fill-opacity: 0.2;
+  --td-lineage-resource-fill: #ffffff;
+  --td-lineage-resource-border: #333;
+  --td-lineage-process-fill: #90cde7;
+  --td-lineage-link-inactive: #ccc;
+  --td-lineage-metadata-inactive: rgb(238, 210, 210);
+}