@truedat/core 8.11.6 → 8.11.7

package/src/components/Graph.js

@@ -1,14 +1,14 @@
 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 { Icon, Modal, Popup } from "semantic-ui-react";
 import {
   ReactFlow,
   ReactFlowProvider,
   useNodesState,
   useEdgesState,
   useReactFlow,
-  getNodesBounds,
+  getNodesBounds as getStaticNodesBounds,
   getViewportForBounds,
   Position,
   MarkerType,
@@ -16,29 +16,118 @@ import {
   ControlButton,
   Background,
   BackgroundVariant,
+  MiniMap,
 } from "@xyflow/react";
+import {
+  Expand,
+  Minimize2,
+  ZoomIn,
+  ZoomOut,
+  Maximize,
+  Focus,
+} from "lucide-react";
 import ELK from "elkjs/lib/elk.bundled.js";
 import ConceptNode from "./graph/ConceptNode";
 import ColoredEdge from "./graph/ColoredEdge";
+import LineageGroupNode from "./graph/LineageGroupNode";
+import { getTargetSlotOffset } from "./graph/edgeLayout";
 
-import "@xyflow/react/dist/style.css";
-
-const nodeTypes = { concept: ConceptNode };
+const baseNodeTypes = { concept: ConceptNode, group: LineageGroupNode };
 const edgeTypes = { colored: ColoredEdge };
 
 const elk = new ELK();
 const DEFAULT_NODE_WIDTH = 130;
 const DEFAULT_NODE_HEIGHT = 44;
-const DEFAULT_GRAPH_HEIGHT = "70vh";
+const TRANSLATE_EXTENT_MIN_PADDING = 8000;
+const TRANSLATE_EXTENT_SIZE_MULTIPLIER = 4;
+const DEFAULT_GRAPH_HEIGHT = "640px";
 const EXPANDED_GRAPH_HEIGHT = "82vh";
-const DEFAULT_MIN_ZOOM = 0.01;
-const DEFAULT_MAX_ZOOM = 0.8;
-const FIT_VIEW_PADDING = 0.2;
+const DEFAULT_MIN_ZOOM = 0.03;
+const DEFAULT_MAX_ZOOM = 2;
+const FIT_VIEW_PADDING = 0.15;
+const FOCUS_VIEW_PADDING = 0.28;
+const FOCUS_MAX_ZOOM = 1.1;
+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_GAP = 12;
+const SPACE_KEY = " ";
+const SPACE_CODE = "Space";
+const SPACEBAR_KEY = "Spacebar";
+const WHEEL_DELTA_LINE_HEIGHT = 16;
+const MAX_WHEEL_DELTA_PER_FRAME = 80;
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+const isSpaceKeyEvent = (event) =>
+  event?.key === SPACE_KEY ||
+  event?.key === SPACE_CODE ||
+  event?.code === SPACE_CODE ||
+  event?.key === SPACEBAR_KEY;
+
+const isEditableTarget = (target) => {
+  if (!target || typeof target.closest !== "function") return false;
+
+  return Boolean(
+    target.closest(
+      'input, textarea, select, button, [contenteditable="true"], [role="textbox"]',
+    ),
+  );
+};
+
+export const normalizeWheelDelta = (
+  deltaY,
+  deltaMode = 0,
+  pageHeight = 800,
+) => {
+  if (!Number.isFinite(deltaY)) return 0;
+
+  if (deltaMode === 1) return deltaY * WHEEL_DELTA_LINE_HEIGHT;
+  if (deltaMode === 2) return deltaY * pageHeight;
+
+  return deltaY;
+};
+
+export const viewportForWheelZoom = ({
+  viewport,
+  pointer,
+  delta,
+  sensitivity,
+  minZoom,
+  maxZoom,
+}) => {
+  const currentZoom = viewport?.zoom || 1;
+  const clampedDelta = clamp(
+    delta,
+    -MAX_WHEEL_DELTA_PER_FRAME,
+    MAX_WHEEL_DELTA_PER_FRAME,
+  );
+  const nextZoom = clamp(
+    currentZoom * Math.exp(-clampedDelta * sensitivity),
+    minZoom,
+    maxZoom,
+  );
+
+  if (nextZoom === currentZoom) return viewport;
+
+  const flowX = (pointer.x - viewport.x) / currentZoom;
+  const flowY = (pointer.y - viewport.y) / currentZoom;
+
+  return {
+    x: pointer.x - flowX * nextZoom,
+    y: pointer.y - flowY * nextZoom,
+    zoom: nextZoom,
+  };
+};
+
 const getIncomingEdgeGroupKey = (edge, stroke) =>
   `${edge.target}::${stroke || DEFAULT_EDGE_STROKE}`;
 
+const getOutgoingEdgeGroupKey = (edge, stroke) =>
+  `${edge.source}::${stroke || DEFAULT_EDGE_STROKE}`;
+
 const getNodeRelationGroupKey = (edge) =>
   edge?.data?.primaryType || edge?.style?.stroke || DEFAULT_EDGE_STROKE;
 
@@ -151,30 +240,335 @@ const orderNodesByRelationGroup = (nodes = [], edges = [], rootNodeId) => {
   });
 };
 
+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)
+      );
+    });
+
+    orderedNodes.reduce((prevBottom, node) => {
+      const height = getNodeHeight(node);
+      const desiredCenter =
+        desiredCentersById.get(node.id) ?? getNodeCenterY(node);
+      const desiredTop = desiredCenter - height / 2;
+      const nextTop = Math.max(desiredTop, prevBottom + MIN_NODE_GAP);
+
+      alignedNodes.set(node.id, {
+        ...node,
+        y: nextTop,
+        position: { ...(node.position || {}), x: node.x, y: nextTop },
+      });
+
+      return nextTop + height;
+    }, Number.NEGATIVE_INFINITY);
+  });
+
+  return nodes.map((node) => alignedNodes.get(node.id) || node);
+};
+
 export const getMinZoomForDiagram = (
   nodes = [],
   viewportWidth,
   viewportHeight,
   padding = FIT_VIEW_PADDING,
+  minZoom = DEFAULT_MIN_ZOOM,
+  maxZoom = DEFAULT_MAX_ZOOM,
+  getDiagramBounds = getStaticNodesBounds,
 ) => {
-  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,
+  if (!nodes.length || !viewportWidth || !viewportHeight) return minZoom;
+
+  const bounds = getDiagramBounds(nodes);
+
+  if (!bounds.width || !bounds.height) return minZoom;
+
+  const fitZoom = getViewportForBounds(
+    bounds,
+    viewportWidth,
+    viewportHeight,
+    minZoom,
+    maxZoom,
+    padding,
+  ).zoom;
+
+  return Math.min(fitZoom, minZoom);
+};
+
+const nodeBoundsForViewport = (node = {}) => {
+  const geometry = node.data?.absoluteGeometry;
+  const x = geometry?.x ?? node.position?.x ?? node.x ?? 0;
+  const y = geometry?.y ?? node.position?.y ?? node.y ?? 0;
+  const width =
+    geometry?.w ?? node.width ?? node.measured?.width ?? DEFAULT_NODE_WIDTH;
+  const height =
+    geometry?.h ?? node.height ?? node.measured?.height ?? DEFAULT_NODE_HEIGHT;
+
+  return { x, y, width, height };
+};
+
+const nodeCenterForViewport = (node) => {
+  const bounds = nodeBoundsForViewport(node);
+
+  return {
+    x: bounds.x + bounds.width / 2,
+    y: bounds.y + bounds.height / 2,
+  };
+};
+
+const finiteNumber = (value) => {
+  const parsed = Number(value);
+
+  return Number.isFinite(parsed) ? parsed : undefined;
+};
+
+const firstFiniteNumber = (values = [], fallback = 0) =>
+  values.map(finiteNumber).find((value) => value !== undefined) ?? fallback;
+
+const nodePositionForOverlap = (node = {}) => ({
+  x: firstFiniteNumber([node.position?.x, node.x], 0),
+  y: firstFiniteNumber([node.position?.y, node.y], 0),
+});
+
+const nodeSizeForOverlap = (node = {}) => ({
+  width: firstFiniteNumber(
+    [node.width, node.measured?.width, node.data?.absoluteGeometry?.w],
+    DEFAULT_NODE_WIDTH,
+  ),
+  height: firstFiniteNumber(
+    [node.height, node.measured?.height, node.data?.absoluteGeometry?.h],
+    DEFAULT_NODE_HEIGHT,
+  ),
+});
+
+const nodeBoundsForOverlap = (node = {}) => ({
+  ...nodePositionForOverlap(node),
+  ...nodeSizeForOverlap(node),
+});
+
+const boundsOverlap = (boundsA, boundsB, gap = 0) =>
+  boundsA.x < boundsB.x + boundsB.width + gap &&
+  boundsA.x + boundsA.width + gap > boundsB.x &&
+  boundsA.y < boundsB.y + boundsB.height + gap &&
+  boundsA.y + boundsA.height + gap > boundsB.y;
+
+const siblingDragPosition = (draggedNode, siblingNodes = [], parentNode) => {
+  const position = nodePositionForOverlap(draggedNode);
+  const size = nodeSizeForOverlap(draggedNode);
+  const parentSize = parentNode ? nodeSizeForOverlap(parentNode) : null;
+  const maxX = parentSize
+    ? Math.max(0, parentSize.width - size.width)
+    : position.x;
+  const maxY = parentSize
+    ? Math.max(0, parentSize.height - size.height)
+    : position.y;
+  const x = parentSize ? clamp(position.x, 0, maxX) : position.x;
+  const candidateYs = new Set([
+    parentSize ? clamp(position.y, 0, maxY) : position.y,
+  ]);
+
+  siblingNodes.forEach((siblingNode) => {
+    const siblingBounds = nodeBoundsForOverlap(siblingNode);
+
+    candidateYs.add(siblingBounds.y + siblingBounds.height + MIN_NODE_GAP);
+    candidateYs.add(siblingBounds.y - size.height - MIN_NODE_GAP);
+  });
+
+  if (parentSize) {
+    candidateYs.add(0);
+    candidateYs.add(maxY);
+  }
+
+  const sortedCandidates = [...candidateYs]
+    .map((y) => (parentSize ? clamp(y, 0, maxY) : y))
+    .sort((yA, yB) => Math.abs(yA - position.y) - Math.abs(yB - position.y));
+  const nextY =
+    sortedCandidates.find((y) => {
+      const candidateBounds = { x, y, ...size };
+
+      return siblingNodes.every(
+        (siblingNode) =>
+          !boundsOverlap(
+            candidateBounds,
+            nodeBoundsForOverlap(siblingNode),
+            MIN_NODE_GAP,
+          ),
+      );
+    }) ?? (parentSize ? clamp(position.y, 0, maxY) : position.y);
+
+  return { x, y: nextY };
+};
+
+const nodeWithUpdatedFixedPosition = (node, position, nodesById) => {
+  const size = nodeSizeForOverlap(node);
+  const parentGeometry = node.parentId
+    ? nodesById.get(node.parentId)?.data?.absoluteGeometry
+    : undefined;
+  const absoluteGeometry = node.data?.absoluteGeometry
+    ? {
+        ...node.data.absoluteGeometry,
+        x: (parentGeometry?.x ?? 0) + position.x,
+        y: (parentGeometry?.y ?? 0) + position.y,
+        w: size.width,
+        h: size.height,
+      }
+    : undefined;
+
+  return {
+    ...node,
+    position,
+    x: position.x,
+    y: position.y,
+    data: absoluteGeometry
+      ? {
+          ...node.data,
+          absoluteGeometry,
+        }
+      : node.data,
+  };
+};
+
+export const resolveFixedNodeSiblingOverlap = (nodes = [], draggedNodeId) => {
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
+  const draggedNode = nodesById.get(draggedNodeId);
+
+  if (!draggedNode || draggedNode.draggable === false) return nodes;
+
+  const parentNode = draggedNode.parentId
+    ? nodesById.get(draggedNode.parentId)
+    : undefined;
+  const siblingNodes = nodes.filter(
+    (node) =>
+      node.id !== draggedNode.id && node.parentId === draggedNode.parentId,
+  );
+  const nextPosition = siblingDragPosition(
+    draggedNode,
+    siblingNodes,
+    parentNode,
   );
+  const currentPosition = nodePositionForOverlap(draggedNode);
+
+  if (
+    nextPosition.x === currentPosition.x &&
+    nextPosition.y === currentPosition.y
+  ) {
+    return nodes;
+  }
+
+  return nodes.map((node) =>
+    node.id === draggedNode.id
+      ? nodeWithUpdatedFixedPosition(node, nextPosition, nodesById)
+      : node,
+  );
+};
+
+const getFocusZoomForNode = (
+  node,
+  viewportWidth,
+  viewportHeight,
+  minZoom,
+  currentZoom,
+) => {
+  if (!viewportWidth || !viewportHeight) return currentZoom;
+
+  const bounds = nodeBoundsForViewport(node);
+
+  if (!bounds.width || !bounds.height) return currentZoom;
+
+  const focusZoom = getViewportForBounds(
+    bounds,
+    viewportWidth,
+    viewportHeight,
+    DEFAULT_MIN_ZOOM,
+    DEFAULT_MAX_ZOOM,
+    FOCUS_VIEW_PADDING,
+  ).zoom;
+
+  return Math.max(minZoom, Math.min(FOCUS_MAX_ZOOM, focusZoom));
 };
 
 const GraphControlTooltip = ({ content, children }) => (
@@ -192,30 +586,182 @@ GraphControlTooltip.propTypes = {
   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),
+      };
+    },
+    {
+      minX: Number.POSITIVE_INFINITY,
+      minY: Number.POSITIVE_INFINITY,
+      maxX: Number.NEGATIVE_INFINITY,
+      maxY: Number.NEGATIVE_INFINITY,
+    },
+  );
+
+  const diagramWidth = bounds.maxX - bounds.minX;
+  const diagramHeight = bounds.maxY - bounds.minY;
+  const padding = Math.max(
+    TRANSLATE_EXTENT_MIN_PADDING,
+    diagramWidth * TRANSLATE_EXTENT_SIZE_MULTIPLIER,
+    diagramHeight * TRANSLATE_EXTENT_SIZE_MULTIPLIER,
+  );
+
+  return [
+    [bounds.minX - padding, bounds.minY - padding],
+    [bounds.maxX + padding, bounds.maxY + padding],
+  ];
+};
+
+const nodeLayoutSignature = (node = {}) =>
+  [
+    node.id,
+    node.parentId || "",
+    node.position?.x ?? node.x ?? 0,
+    node.position?.y ?? node.y ?? 0,
+    node.width ?? node.measured?.width ?? DEFAULT_NODE_WIDTH,
+    node.height ?? node.measured?.height ?? DEFAULT_NODE_HEIGHT,
+  ].join(":");
+
+const graphLayoutSignature = (nodes = [], edges = []) =>
+  `${nodes.map(nodeLayoutSignature).join("|")}::${edges
+    .map((edge) => edge.id)
+    .join("|")}`;
+
+const absoluteGeometrySignature = (node = {}) => {
+  const geometry = node.data?.absoluteGeometry;
+
+  if (!geometry) return "";
+
+  return [geometry.x, geometry.y, geometry.w, geometry.h].join(":");
+};
+
+const mergeFixedLayoutNodes = (currentNodes = [], nextNodes = []) => {
+  const currentById = new Map(currentNodes.map((node) => [node.id, node]));
+
+  return nextNodes.map((node) => {
+    const currentNode = currentById.get(node.id);
+    const geometryChanged =
+      absoluteGeometrySignature(currentNode) !==
+      absoluteGeometrySignature(node);
+
+    if (!currentNode?.position || node.draggable === false || geometryChanged) {
+      return node;
+    }
+
+    return {
+      ...node,
+      measured: currentNode.measured || node.measured,
+      position: currentNode.position,
+      x: currentNode.x ?? node.x,
+      y: currentNode.y ?? node.y,
+      data: currentNode.data?.absoluteGeometry
+        ? {
+            ...node.data,
+            absoluteGeometry: currentNode.data.absoluteGeometry,
+          }
+        : node.data,
+    };
+  });
+};
+
 const LayoutFlow = ({
   initialNodes,
   initialEdges,
   onNodeClick,
+  onNodeDoubleClick,
   onOpenExpanded,
+  onCloseExpanded,
   containerRef,
   rootNodeId,
+  onPaneClick,
+  topControls,
+  afterControls,
+  bottomControls,
+  onInitialFitComplete,
+  graphOptions,
 }) => {
-  const { fitView, zoomIn, zoomOut, getNodes } = useReactFlow();
+  const {
+    layoutMode,
+    extraNodeTypes,
+    focusNodeId,
+    focusNodeRequestKey,
+    minimapNodeColor,
+    controlsOrientation = "horizontal",
+    fitViewOnLayoutChange,
+    fitViewPadding = FIT_VIEW_PADDING,
+    defaultFitViewPadding,
+    minZoom: minZoomLimit = DEFAULT_MIN_ZOOM,
+    maxZoom: maxZoomLimit = DEFAULT_MAX_ZOOM,
+    wheelZoomSensitivity,
+    preserveUserViewportOnLayoutChange,
+    fitViewRequestKey,
+    onlyRenderVisibleElements,
+  } = graphOptions || {};
+  const {
+    fitView,
+    zoomIn,
+    zoomOut,
+    getNodes,
+    getNodesBounds: getFlowNodesBounds,
+    setCenter,
+    getViewport,
+    setViewport,
+  } = useReactFlow();
   const { formatMessage } = useIntl();
   const [isInitialized, setIsInitialized] = useState(false);
-  const [minZoom, setMinZoom] = useState(DEFAULT_MIN_ZOOM);
+  const [isMinimapCollapsed, setIsMinimapCollapsed] = useState(false);
+  const [isMinimapExpanded, setIsMinimapExpanded] = useState(false);
+  const [minimapZoom, setMinimapZoom] = useState(1);
+  const [spacePanMode, setSpacePanMode] = useState(false);
+  const resolvedFitViewPadding = defaultFitViewPadding ?? fitViewPadding;
+  const [minZoom, setMinZoom] = useState(minZoomLimit);
   const layoutRunId = useRef(0);
   const fitViewFrameId = useRef();
+  const fitRunId = useRef(0);
+  const initialFitComplete = useRef(false);
+  const initialFitCallback = useRef(onInitialFitComplete);
+  initialFitCallback.current = onInitialFitComplete;
+  const focusFrameIds = useRef([]);
+  const wheelZoomFrameId = useRef();
+  const minimapZoomFrameId = useRef();
+  const pendingMinimapZoom = useRef(1);
+  const pendingWheelZoom = useRef({ delta: 0, pointer: null });
+  const userOwnsViewport = useRef(false);
   const lastFitSignature = useRef("");
+  const lastFitViewRequestKey = useRef(fitViewRequestKey);
+  const suppressSpaceInteraction = useRef(false);
+  const focusNodeIdRef = useRef(focusNodeId);
+  focusNodeIdRef.current = focusNodeId ?? null;
+  const fixedLayout = layoutMode === "fixed";
+  const nodeTypes = useMemo(
+    () => ({ ...baseNodeTypes, ...(extraNodeTypes || {}) }),
+    [extraNodeTypes],
+  );
   const parsedNodes = useMemo(
     () =>
       initialNodes.map((node) => ({
         ...node,
-        position: { x: 0, y: 0 },
-        sourcePosition: Position.Right,
-        targetPosition: Position.Left,
+        position: fixedLayout
+          ? node.position || { x: 0, y: 0 }
+          : { x: 0, y: 0 },
+        sourcePosition: node.sourcePosition || Position.Right,
+        targetPosition: node.targetPosition || Position.Left,
       })),
-    [initialNodes],
+    [fixedLayout, initialNodes],
   );
   const parsedEdges = useMemo(() => {
     const edgesWithStroke = initialEdges.map((edge) => {
@@ -234,60 +780,179 @@ const LayoutFlow = ({
       };
     });
 
-    const groupsByTarget = new Map();
+    const groupMetaByEdgeId = new Map();
+    const mergeEdgeMeta = (edgeId, meta) => {
+      groupMetaByEdgeId.set(edgeId, {
+        ...groupMetaByEdgeId.get(edgeId),
+        ...meta,
+      });
+    };
 
-    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) || [];
+    if (fixedLayout) {
+      const edgesByTarget = new Map();
+      const edgesBySource = new Map();
 
-      group.push(edge.id);
-      targetGroups.set(groupKey, group);
-      groupsByTarget.set(edge.target, targetGroups);
-    });
+      edgesWithStroke.forEach((edge) => {
+        const targetEdges = edgesByTarget.get(edge.target) || [];
+        const sourceEdges = edgesBySource.get(edge.source) || [];
 
-    const groupMetaByEdgeId = new Map();
+        targetEdges.push(edge);
+        edgesByTarget.set(edge.target, targetEdges);
+        sourceEdges.push(edge);
+        edgesBySource.set(edge.source, sourceEdges);
+      });
 
-    groupsByTarget.forEach((targetGroups) => {
-      const orderedGroups = Array.from(targetGroups.entries()).sort(
-        ([groupKeyA], [groupKeyB]) => groupKeyA.localeCompare(groupKeyB),
-      );
+      edgesByTarget.forEach((targetEdges) => {
+        const orderedEdges = [...targetEdges].sort((edgeA, edgeB) => {
+          const sourceDiff = edgeA.source.localeCompare(edgeB.source);
+
+          if (sourceDiff !== 0) return sourceDiff;
+
+          const strokeA = edgeA.style?.stroke || DEFAULT_EDGE_STROKE;
+          const strokeB = edgeB.style?.stroke || DEFAULT_EDGE_STROKE;
+          const strokeDiff = strokeA.localeCompare(strokeB);
 
-      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 strokeDiff || edgeA.id.localeCompare(edgeB.id);
+        });
+
+        orderedEdges.forEach((edge, edgeIndex) => {
+          mergeEdgeMeta(edge.id, {
+            targetSlotCount: orderedEdges.length,
+            targetSlotIndex: edgeIndex,
+            showTargetArrow: edge.data?.showTargetArrow !== false,
           });
         });
       });
-    });
+
+      edgesBySource.forEach((sourceEdges) => {
+        const orderedEdges = [...sourceEdges].sort((edgeA, edgeB) => {
+          const targetDiff = edgeA.target.localeCompare(edgeB.target);
+
+          if (targetDiff !== 0) return targetDiff;
+
+          const strokeA = edgeA.style?.stroke || DEFAULT_EDGE_STROKE;
+          const strokeB = edgeB.style?.stroke || DEFAULT_EDGE_STROKE;
+          const strokeDiff = strokeA.localeCompare(strokeB);
+
+          return strokeDiff || edgeA.id.localeCompare(edgeB.id);
+        });
+
+        orderedEdges.forEach((edge, edgeIndex) => {
+          mergeEdgeMeta(edge.id, {
+            sourceSlotCount: orderedEdges.length,
+            sourceSlotIndex: edgeIndex,
+            routeCount: orderedEdges.length,
+            routeIndex: edgeIndex,
+          });
+        });
+      });
+    } else {
+      const groupsByTarget = new Map();
+      const groupsBySource = 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) || [];
+        const sourceGroupKey = getOutgoingEdgeGroupKey(edge, stroke);
+        const sourceGroups = groupsBySource.get(edge.source) || new Map();
+        const sourceGroup = sourceGroups.get(sourceGroupKey) || [];
+
+        group.push(edge.id);
+        targetGroups.set(groupKey, group);
+        groupsByTarget.set(edge.target, targetGroups);
+        sourceGroup.push(edge.id);
+        sourceGroups.set(sourceGroupKey, sourceGroup);
+        groupsBySource.set(edge.source, sourceGroups);
+      });
+
+      groupsByTarget.forEach((targetGroups) => {
+        const orderedGroups = Array.from(targetGroups.entries()).sort(
+          ([groupKeyA], [groupKeyB]) => groupKeyA.localeCompare(groupKeyB),
+        );
+
+        orderedGroups.forEach(([groupKey, edgeIds], groupIndex) => {
+          edgeIds.forEach((edgeId, edgeIndex) => {
+            mergeEdgeMeta(edgeId, {
+              targetSlotCount: orderedGroups.length,
+              targetSlotIndex: groupIndex,
+              showTargetArrow: edgeIndex === edgeIds.length - 1,
+              incomingGroupKey: groupKey,
+            });
+          });
+        });
+      });
+
+      groupsBySource.forEach((sourceGroups) => {
+        const orderedGroups = Array.from(sourceGroups.entries()).sort(
+          ([groupKeyA], [groupKeyB]) => groupKeyA.localeCompare(groupKeyB),
+        );
+
+        orderedGroups.forEach(([, edgeIds], groupIndex) => {
+          edgeIds.forEach((edgeId) => {
+            mergeEdgeMeta(edgeId, {
+              sourceSlotCount: orderedGroups.length,
+              sourceSlotIndex: groupIndex,
+            });
+          });
+        });
+      });
+    }
 
     return edgesWithStroke.map((edge) => ({
       ...edge,
-      markerEnd: edge.markerEnd || {
+      markerEnd: {
         type: MarkerType.ArrowClosed,
         width: 12,
         height: 12,
         color: edge.style?.stroke || DEFAULT_EDGE_STROKE,
+        ...(edge.markerEnd || {}),
       },
       data: {
         ...edge.data,
         ...groupMetaByEdgeId.get(edge.id),
       },
     }));
-  }, [initialEdges]);
+  }, [fixedLayout, initialEdges]);
   const [nodes, setNodes, onNodesChange] = useNodesState(parsedNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(parsedEdges);
+  const translateExtent = useMemo(() => getTranslateExtent(nodes), [nodes]);
+  const onFixedNodeDragStop = useCallback(
+    (_, draggedNode) => {
+      if (!fixedLayout || !draggedNode?.id) return;
+
+      setNodes((currentNodes) => {
+        const nodesWithDraggedPosition = currentNodes.map((node) =>
+          node.id === draggedNode.id
+            ? {
+                ...node,
+                ...draggedNode,
+                data: {
+                  ...node.data,
+                  ...draggedNode.data,
+                },
+                style: {
+                  ...node.style,
+                  ...draggedNode.style,
+                },
+              }
+            : node,
+        );
+
+        return resolveFixedNodeSiblingOverlap(
+          nodesWithDraggedPosition,
+          draggedNode.id,
+        );
+      });
+    },
+    [fixedLayout, setNodes],
+  );
   const layoutInput = useMemo(() => {
-    const safeNodes = orderNodesByRelationGroup(
-      parsedNodes.filter((node) => node && node.id),
-      parsedEdges,
-      rootNodeId,
-    );
+    const parsedSafeNodes = parsedNodes.filter((node) => node && node.id);
+    const safeNodes = fixedLayout
+      ? parsedSafeNodes
+      : orderNodesByRelationGroup(parsedSafeNodes, parsedEdges, rootNodeId);
     const safeNodeIds = new Set(safeNodes.map((node) => node.id));
     const safeEdges = parsedEdges.filter(
       (edge) =>
@@ -300,44 +965,263 @@ const LayoutFlow = ({
     );
 
     return { nodes: safeNodes, edges: safeEdges };
-  }, [parsedNodes, parsedEdges, rootNodeId]);
+  }, [fixedLayout, parsedNodes, parsedEdges, rootNodeId]);
+
+  const scheduleFitView = useCallback(
+    (nodesForFit, edgesForFit) => {
+      const signature = fixedLayout
+        ? graphLayoutSignature(nodesForFit, edgesForFit)
+        : `${nodesForFit.map((node) => node.id).join("|")}::${edgesForFit
+            .map((edge) => edge.id)
+            .join("|")}`;
+      const isInitialLoad = lastFitSignature.current === "";
+      const changed = signature !== lastFitSignature.current;
+      const fitViewRequested =
+        fitViewRequestKey !== lastFitViewRequestKey.current;
+      lastFitSignature.current = signature;
+      lastFitViewRequestKey.current = fitViewRequestKey;
+
+      if (fixedLayout && !changed && !fitViewRequested) return;
 
-  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);
+      if (fitViewFrameId.current) {
+        cancelAnimationFrame(fitViewFrameId.current);
+      }
+
+      fitRunId.current += 1;
+      const runId = fitRunId.current;
+      const fitWhenMeasured = () => {
+        const measuredNodes = getNodes();
+        const measuredIds = new Set(
+          measuredNodes
+            .filter((node) => node.measured?.width && node.measured?.height)
+            .map((node) => node.id),
+        );
+
+        if (
+          initialFitCallback.current &&
+          !initialFitComplete.current &&
+          (!containerRef.current?.clientWidth ||
+            !containerRef.current?.clientHeight ||
+            nodesForFit.some((node) => !measuredIds.has(node.id)))
+        ) {
+          fitViewFrameId.current = requestAnimationFrame(fitWhenMeasured);
+          return;
+        }
+        const nextMinZoom = getMinZoomForDiagram(
+          measuredNodes.length ? measuredNodes : nodesForFit,
+          containerRef.current?.clientWidth,
+          containerRef.current?.clientHeight,
+          resolvedFitViewPadding,
+          minZoomLimit,
+          maxZoomLimit,
+          getFlowNodesBounds,
+        );
+
+        setMinZoom(nextMinZoom);
+        const shouldFollowFixedLayoutChange =
+          fixedLayout &&
+          fitViewOnLayoutChange &&
+          (fitViewRequested ||
+            !(preserveUserViewportOnLayoutChange && userOwnsViewport.current));
+        const pendingFocusId = shouldFollowFixedLayoutChange
+          ? null
+          : focusNodeIdRef.current;
+        if (
+          pendingFocusId &&
+          (initialFitComplete.current || !initialFitCallback.current)
+        ) {
+          const nodesForFocus = measuredNodes.length
+            ? measuredNodes
+            : nodesForFit;
+          const targetNode = nodesForFocus.find((n) => n.id === pendingFocusId);
+
+          if (targetNode) {
+            const currentZoom = getViewport().zoom;
+            const focusCenter = nodeCenterForViewport(targetNode);
+            const focusZoom = getFocusZoomForNode(
+              targetNode,
+              containerRef.current?.clientWidth,
+              containerRef.current?.clientHeight,
+              nextMinZoom,
+              currentZoom,
+            );
+
+            setCenter(focusCenter.x, focusCenter.y, {
+              zoom: focusZoom,
+              duration: 300,
+            });
+            return;
+          }
         }
 
-        fitViewFrameId.current = requestAnimationFrame(() => {
-          const measuredNodes = getNodes();
-          const nextMinZoom = getMinZoomForDiagram(
-            measuredNodes.length ? measuredNodes : nodesForFit,
-            containerRef.current?.clientWidth,
-            containerRef.current?.clientHeight,
-          );
+        const shouldFitGraph =
+          !fixedLayout ||
+          isInitialLoad ||
+          (initialFitCallback.current && !initialFitComplete.current) ||
+          shouldFollowFixedLayoutChange;
+
+        if (!shouldFitGraph) return;
 
-          setMinZoom(nextMinZoom);
+        Promise.resolve(
           fitView({
-            padding: FIT_VIEW_PADDING,
-            duration: changed ? 300 : 0,
+            padding: resolvedFitViewPadding,
+            duration:
+              initialFitCallback.current && !initialFitComplete.current
+                ? 0
+                : changed || isInitialLoad || fitViewRequested
+                  ? 500
+                  : 0,
             minZoom: nextMinZoom,
+          }),
+        ).then((fitted) => {
+          if (runId !== fitRunId.current || initialFitComplete.current) return;
+          if (fitted === false) {
+            if (initialFitCallback.current)
+              fitViewFrameId.current = requestAnimationFrame(fitWhenMeasured);
+            return;
+          }
+          fitViewFrameId.current = requestAnimationFrame(() => {
+            if (runId !== fitRunId.current) return;
+            initialFitComplete.current = true;
+            initialFitCallback.current?.();
           });
         });
       };
+      fitViewFrameId.current = requestAnimationFrame(fitWhenMeasured);
+    },
+    [
+      containerRef,
+      fitView,
+      fitViewRequestKey,
+      fixedLayout,
+      fitViewOnLayoutChange,
+      getFlowNodesBounds,
+      getNodes,
+      getViewport,
+      maxZoomLimit,
+      minZoomLimit,
+      preserveUserViewportOnLayoutChange,
+      resolvedFitViewPadding,
+      setCenter,
+    ],
+  );
+
+  const markUserViewportInteraction = useCallback(() => {
+    userOwnsViewport.current = true;
+  }, []);
+
+  const handleMoveStart = useCallback(
+    (event) => {
+      if (event) markUserViewportInteraction();
+    },
+    [markUserViewportInteraction],
+  );
+
+  const handleWheelZoom = useCallback(
+    (event) => {
+      if (spacePanMode) return;
+      if (
+        !Number.isFinite(wheelZoomSensitivity) ||
+        wheelZoomSensitivity <= 0 ||
+        isEditableTarget(event.target)
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      const bounds = containerRef.current?.getBoundingClientRect();
+
+      if (!bounds) return;
+
+      const delta = normalizeWheelDelta(
+        event.deltaY,
+        event.deltaMode,
+        bounds.height,
+      );
+
+      pendingWheelZoom.current = {
+        delta: pendingWheelZoom.current.delta + delta,
+        pointer: {
+          x: event.clientX - bounds.left,
+          y: event.clientY - bounds.top,
+        },
+      };
+      markUserViewportInteraction();
+
+      if (wheelZoomFrameId.current) return;
+
+      wheelZoomFrameId.current = requestAnimationFrame(() => {
+        const pendingZoom = pendingWheelZoom.current;
+
+        wheelZoomFrameId.current = undefined;
+        pendingWheelZoom.current = { delta: 0, pointer: null };
+
+        if (!pendingZoom.pointer || !pendingZoom.delta) return;
+
+        const nextViewport = viewportForWheelZoom({
+          viewport: getViewport(),
+          pointer: pendingZoom.pointer,
+          delta: pendingZoom.delta,
+          sensitivity: wheelZoomSensitivity,
+          minZoom,
+          maxZoom: maxZoomLimit,
+        });
+
+        setViewport(nextViewport, { duration: 0 });
+      });
+    },
+    [
+      containerRef,
+      getViewport,
+      markUserViewportInteraction,
+      maxZoomLimit,
+      minZoom,
+      setViewport,
+      wheelZoomSensitivity,
+      spacePanMode,
+    ],
+  );
+
+  useEffect(() => {
+    const graphContainer = containerRef.current;
+
+    if (
+      !graphContainer ||
+      !Number.isFinite(wheelZoomSensitivity) ||
+      wheelZoomSensitivity <= 0
+    ) {
+      return undefined;
+    }
+
+    graphContainer.addEventListener("wheel", handleWheelZoom, {
+      capture: true,
+      passive: false,
+    });
+
+    return () => {
+      graphContainer.removeEventListener("wheel", handleWheelZoom, {
+        capture: true,
+      });
+    };
+  }, [containerRef, handleWheelZoom, wheelZoomSensitivity]);
 
+  const getLayoutedElements = useCallback(
+    ({ nodes: nodesToLayout, edges: edgesToLayout }) => {
       if (!nodesToLayout.length) {
         setNodes([]);
         setEdges([]);
         return;
       }
 
+      if (fixedLayout) {
+        setNodes((currentNodes) =>
+          mergeFixedLayoutNodes(currentNodes, nodesToLayout),
+        );
+        setEdges(edgesToLayout);
+        scheduleFitView(nodesToLayout, edgesToLayout);
+        return;
+      }
+
       const currentLayoutRunId = layoutRunId.current + 1;
       layoutRunId.current = currentLayoutRunId;
       const layoutOptions = {
@@ -345,11 +1229,9 @@ const LayoutFlow = ({
         "elk.direction": "RIGHT",
         "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
         "elk.layered.crossingMinimization.forceNodeModelOrder": true,
-        "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
-        "elk.layered.spacing.nodeNodeBetweenLayers": 50,
-        "elk.spacing.nodeNode": 32,
-        "elk.spacing.edgeNodeBetweenLayers": 8,
-        "elk.spacing.edgeEdgeBetweenLayers": 8,
+        "elk.layered.spacing.nodeNodeBetweenLayers": 120,
+        "elk.spacing.nodeNode": 70,
+        "elk.padding": "[top=40,left=40,bottom=40,right=40]",
       };
       const graph = {
         id: "root",
@@ -366,13 +1248,19 @@ const LayoutFlow = ({
         .layout(graph)
         .then(({ children = [] }) => {
           if (currentLayoutRunId !== layoutRunId.current) return;
-          children.forEach((node) => {
-            // eslint-disable-next-line fp/no-mutation
-            node.position = { x: node.x, y: node.y };
-          });
+          const positionedChildren = children.map((node) => ({
+            ...node,
+            position: { x: node.x, y: node.y },
+          }));
+
+          const alignedChildren = alignNodesToConnectionPoints(
+            positionedChildren,
+            edgesToLayout,
+            rootNodeId,
+          );
 
-          setNodes(children);
-          scheduleFitView(children, edgesToLayout);
+          setNodes(alignedChildren);
+          scheduleFitView(alignedChildren, edgesToLayout);
         })
         .catch(() => {
           if (currentLayoutRunId !== layoutRunId.current) return;
@@ -382,7 +1270,7 @@ const LayoutFlow = ({
           scheduleFitView(nodesToLayout, edgesToLayout);
         });
     },
-    [containerRef, fitView, getNodes, rootNodeId, setEdges, setNodes],
+    [fixedLayout, rootNodeId, scheduleFitView, setEdges, setNodes],
   );
 
   const onInit = useCallback(() => {
@@ -392,24 +1280,197 @@ const LayoutFlow = ({
     getLayoutedElements(layoutInput);
   }, [getLayoutedElements, layoutInput, setEdges, setNodes]);
 
+  useEffect(() => {
+    if (isInitialized) setMinimapZoom(getViewport().zoom);
+  }, [getViewport, isInitialized]);
+
+  const suppressCanvasAction = useCallback((event) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+  }, []);
+
+  const handleNodeClick = useCallback(
+    (event, node) => {
+      if (spacePanMode || suppressSpaceInteraction.current) {
+        suppressCanvasAction(event);
+        suppressSpaceInteraction.current = false;
+        return;
+      }
+
+      onNodeClick && onNodeClick(event, node);
+    },
+    [onNodeClick, spacePanMode, suppressCanvasAction],
+  );
+
+  const handleNodeDoubleClick = useCallback(
+    (event, node) => {
+      if (spacePanMode || suppressSpaceInteraction.current) {
+        suppressCanvasAction(event);
+        suppressSpaceInteraction.current = false;
+        return;
+      }
+
+      onNodeDoubleClick && onNodeDoubleClick(event, node);
+    },
+    [onNodeDoubleClick, spacePanMode, suppressCanvasAction],
+  );
+
+  const handlePaneClick = useCallback(
+    (event) => {
+      if (spacePanMode || suppressSpaceInteraction.current) {
+        suppressCanvasAction(event);
+        suppressSpaceInteraction.current = false;
+        return;
+      }
+
+      onPaneClick && onPaneClick(event);
+    },
+    [onPaneClick, spacePanMode, suppressCanvasAction],
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return undefined;
+
+    const handleMouseDown = () => {
+      if (spacePanMode) {
+        suppressSpaceInteraction.current = true;
+      }
+    };
+
+    const suppressAction = (event) => {
+      if (!spacePanMode && !suppressSpaceInteraction.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.type === "click") suppressSpaceInteraction.current = false;
+    };
+    container.addEventListener("mousedown", handleMouseDown, true);
+    container.addEventListener("click", suppressAction, true);
+    container.addEventListener("dblclick", suppressAction, true);
+    container.addEventListener("contextmenu", suppressAction, true);
+    return () => {
+      container.removeEventListener("mousedown", handleMouseDown, true);
+      container.removeEventListener("click", suppressAction, true);
+      container.removeEventListener("dblclick", suppressAction, true);
+      container.removeEventListener("contextmenu", suppressAction, true);
+    };
+  }, [containerRef, spacePanMode]);
+
+  useEffect(() => {
+    const deactivateSpacePanMode = () => {
+      setSpacePanMode(false);
+    };
+
+    const handleKeyDown = (event) => {
+      if (!isSpaceKeyEvent(event) || isEditableTarget(event.target)) return;
+
+      event.preventDefault();
+      setSpacePanMode(true);
+    };
+
+    const handleKeyUp = (event) => {
+      if (!isSpaceKeyEvent(event)) return;
+
+      event.preventDefault();
+      deactivateSpacePanMode();
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", deactivateSpacePanMode);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", deactivateSpacePanMode);
+    };
+  }, []);
+
   useEffect(() => {
     if (!isInitialized) return;
 
-    setNodes(layoutInput.nodes);
+    if (fixedLayout) {
+      setNodes((currentNodes) =>
+        mergeFixedLayoutNodes(currentNodes, layoutInput.nodes),
+      );
+    } else {
+      setNodes(layoutInput.nodes);
+    }
     setEdges(layoutInput.edges);
     const animationFrameId = requestAnimationFrame(() => {
       getLayoutedElements(layoutInput);
     });
 
     return () => cancelAnimationFrame(animationFrameId);
-  }, [isInitialized, layoutInput, setNodes, setEdges, getLayoutedElements]);
+  }, [
+    fixedLayout,
+    isInitialized,
+    layoutInput,
+    setNodes,
+    setEdges,
+    getLayoutedElements,
+  ]);
+
+  useEffect(() => {
+    if (!isInitialized || !focusNodeId) return undefined;
+
+    const focusNode = () => {
+      const targetNode = getNodes().find((node) => node.id === focusNodeId);
+
+      if (!targetNode) return;
+
+      const focusCenter = nodeCenterForViewport(targetNode);
+      const focusZoom = getFocusZoomForNode(
+        targetNode,
+        containerRef.current?.clientWidth,
+        containerRef.current?.clientHeight,
+        minZoom,
+        getViewport().zoom,
+      );
+
+      userOwnsViewport.current = true;
+      setCenter(focusCenter.x, focusCenter.y, {
+        zoom: focusZoom,
+        duration: 300,
+      });
+    };
+    const firstFrameId = requestAnimationFrame(() => {
+      const secondFrameId = requestAnimationFrame(focusNode);
+
+      focusFrameIds.current = [firstFrameId, secondFrameId];
+    });
+
+    focusFrameIds.current = [firstFrameId];
+
+    return () => {
+      focusFrameIds.current.forEach(cancelAnimationFrame);
+      focusFrameIds.current = [];
+    };
+  }, [
+    containerRef,
+    focusNodeId,
+    focusNodeRequestKey,
+    getNodes,
+    getViewport,
+    isInitialized,
+    minZoom,
+    setCenter,
+  ]);
 
   useEffect(
     () => () => {
       if (fitViewFrameId.current) {
         cancelAnimationFrame(fitViewFrameId.current);
       }
+      if (wheelZoomFrameId.current) {
+        cancelAnimationFrame(wheelZoomFrameId.current);
+      }
+      if (minimapZoomFrameId.current) {
+        cancelAnimationFrame(minimapZoomFrameId.current);
+      }
+      focusFrameIds.current.forEach(cancelAnimationFrame);
       layoutRunId.current += 1;
+      fitRunId.current += 1;
     },
     [],
   );
@@ -421,12 +1482,64 @@ const LayoutFlow = ({
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onInit={onInit}
-      onNodeClick={onNodeClick}
+      onNodeClick={handleNodeClick}
+      onNodeDoubleClick={handleNodeDoubleClick}
       nodesConnectable={false}
+      nodesDraggable={!spacePanMode}
+      nodesFocusable={!spacePanMode}
+      elementsSelectable={!spacePanMode}
+      onlyRenderVisibleElements={onlyRenderVisibleElements}
+      onNodeDragStop={fixedLayout ? onFixedNodeDragStop : undefined}
+      panOnDrag
+      onMoveStart={handleMoveStart}
+      onMove={(_event, viewport) => {
+        pendingMinimapZoom.current = viewport.zoom;
+        if (minimapZoomFrameId.current) return;
+
+        minimapZoomFrameId.current = requestAnimationFrame(() => {
+          minimapZoomFrameId.current = undefined;
+          setMinimapZoom((currentZoom) =>
+            Math.abs(currentZoom - pendingMinimapZoom.current) < 0.01
+              ? currentZoom
+              : pendingMinimapZoom.current,
+          );
+        });
+      }}
+      {...(wheelZoomSensitivity
+        ? {
+            zoomOnScroll: false,
+          }
+        : {})}
+      {...(fixedLayout
+        ? {
+            zoomOnDoubleClick: false,
+            edgesFocusable: false,
+            edgesReconnectable: false,
+            elevateNodesOnSelect: false,
+            elevateEdgesOnSelect: false,
+          }
+        : {})}
+      {...(spacePanMode
+        ? {
+            zoomOnScroll: false,
+            zoomOnPinch: false,
+            zoomOnDoubleClick: false,
+            selectionOnDrag: false,
+            selectionKeyCode: null,
+            multiSelectionKeyCode: null,
+            deleteKeyCode: null,
+            panOnScroll: true,
+          }
+        : {})}
+      translateExtent={translateExtent}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       attributionPosition="bottom-left"
-      minZoom={DEFAULT_MIN_ZOOM}
+      proOptions={{ hideAttribution: true }}
+      minZoom={minZoom}
+      maxZoom={maxZoomLimit}
+      onPaneClick={handlePaneClick}
+      className={spacePanMode ? "td-graph__space-pan-active" : undefined}
     >
       <Background
         variant={BackgroundVariant.Dots}
@@ -435,73 +1548,80 @@ const LayoutFlow = ({
         color="var(--td-graph-node-border, #d0d5e0)"
       />
       <Controls
+        className={`td-graph-controls td-graph-controls--${controlsOrientation}`}
         position="top-right"
-        orientation="horizontal"
+        orientation={controlsOrientation}
         showZoom={false}
         showFitView={false}
         showInteractive={false}
       >
+        {topControls}
         <GraphControlTooltip
           content={formatMessage({ id: "graph.controls.zoom_in" })}
         >
           <ControlButton
-            onClick={() => zoomIn({ duration: 200 })}
+            onClick={() => {
+              markUserViewportInteraction();
+              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>
+            <ZoomIn size={20} strokeWidth={2} />
           </ControlButton>
         </GraphControlTooltip>
         <GraphControlTooltip
           content={formatMessage({ id: "graph.controls.zoom_out" })}
         >
           <ControlButton
-            onClick={() => zoomOut({ duration: 200 })}
+            onClick={() => {
+              markUserViewportInteraction();
+              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>
+            <ZoomOut size={20} strokeWidth={2} />
           </ControlButton>
         </GraphControlTooltip>
         <GraphControlTooltip
           content={formatMessage({ id: "graph.controls.fit_view" })}
         >
           <ControlButton
-            onClick={() =>
-              fitView({ padding: FIT_VIEW_PADDING, duration: 300, minZoom })
-            }
+            onClick={() => {
+              userOwnsViewport.current = false;
+              fitView({
+                padding: resolvedFitViewPadding,
+                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>
+            {fixedLayout ? (
+              <Focus size={20} strokeWidth={2} />
+            ) : (
+              <Maximize size={20} strokeWidth={2} />
+            )}
           </ControlButton>
         </GraphControlTooltip>
+        {onCloseExpanded ? (
+          <GraphControlTooltip
+            content={formatMessage({
+              id: "graph.controls.return_normal",
+              defaultMessage: "Volver a vista normal",
+            })}
+          >
+            <ControlButton
+              className="td-graph-controls-return"
+              onClick={onCloseExpanded}
+              aria-label={formatMessage({
+                id: "graph.controls.return_normal",
+                defaultMessage: "Volver a vista normal",
+              })}
+            >
+              <Minimize2 size={20} strokeWidth={2} />
+            </ControlButton>
+          </GraphControlTooltip>
+        ) : null}
         {onOpenExpanded ? (
           <GraphControlTooltip
             content={formatMessage({ id: "graph.controls.open_expanded" })}
@@ -510,23 +1630,90 @@ const LayoutFlow = ({
               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>
+              <Expand size={20} strokeWidth={2} />
             </ControlButton>
           </GraphControlTooltip>
         ) : null}
+        {afterControls}
       </Controls>
+      {minimapNodeColor && (
+        <div
+          className={`td-graph-minimap-shell${
+            isMinimapCollapsed ? " td-graph-minimap-shell--collapsed" : ""
+          }${isMinimapExpanded ? " td-graph-minimap-shell--expanded" : ""}`}
+        >
+          <div className="td-graph-minimap-header">
+            <span className="td-graph-minimap-title">
+              <Icon name="map outline" aria-hidden="true" />
+              Mapa
+            </span>
+            <span className="td-graph-minimap-zoom">
+              {Math.round(minimapZoom * 100)}%
+            </span>
+            <button
+              aria-expanded={!isMinimapCollapsed}
+              aria-label={
+                isMinimapCollapsed
+                  ? "Expandir mini-mapa"
+                  : "Minimizar mini-mapa"
+              }
+              className="td-graph-minimap-toggle"
+              onClick={(event) => {
+                event.stopPropagation();
+                setIsMinimapCollapsed((collapsed) => !collapsed);
+              }}
+              onMouseDown={(event) => event.stopPropagation()}
+              type="button"
+            >
+              <Icon
+                name={isMinimapCollapsed ? "chevron up" : "chevron down"}
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+          {!isMinimapCollapsed ? (
+            <div className="td-graph-minimap-body">
+              <MiniMap
+                position="bottom-left"
+                pannable
+                zoomable
+                maskColor="rgba(15, 23, 42, 0.08)"
+                nodeColor={minimapNodeColor}
+                nodeStrokeColor="rgba(15, 23, 42, 0.12)"
+                className="td-graph-minimap"
+              />
+              <button
+                type="button"
+                className="td-graph-minimap-expand"
+                aria-label={
+                  isMinimapExpanded ? "Reducir mini-mapa" : "Expandir mini-mapa"
+                }
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setIsMinimapExpanded((prev) => !prev);
+                }}
+                onMouseDown={(event) => event.stopPropagation()}
+              >
+                {isMinimapExpanded ? (
+                  <Minimize2 size={12} strokeWidth={2} />
+                ) : (
+                  <Expand size={12} strokeWidth={2} />
+                )}
+              </button>
+            </div>
+          ) : null}
+        </div>
+      )}
+      {bottomControls && (
+        <Controls
+          position="bottom-right"
+          showZoom={false}
+          showFitView={false}
+          showInteractive={false}
+        >
+          {bottomControls}
+        </Controls>
+      )}
     </ReactFlow>
   );
 };
@@ -535,24 +1722,41 @@ LayoutFlow.propTypes = {
   initialNodes: PropTypes.array,
   initialEdges: PropTypes.array,
   onNodeClick: PropTypes.func,
+  onNodeDoubleClick: PropTypes.func,
   onOpenExpanded: PropTypes.func,
+  onCloseExpanded: PropTypes.func,
   containerRef: PropTypes.object,
   rootNodeId: PropTypes.string,
+  onPaneClick: PropTypes.func,
+  topControls: PropTypes.node,
+  afterControls: PropTypes.node,
+  bottomControls: PropTypes.node,
+  onInitialFitComplete: PropTypes.func,
+  graphOptions: PropTypes.object,
 };
 
 const GraphCanvas = ({
   nodes,
   edges,
   onNodeClick,
+  onNodeDoubleClick,
   height,
   onOpenExpanded,
+  onCloseExpanded,
   rootNodeId,
+  onPaneClick,
+  topControls,
+  afterControls,
+  bottomControls,
+  onInitialFitComplete,
+  className,
+  graphOptions,
 }) => {
   const containerRef = useRef(null);
 
   return (
     <div
-      className="td-graph-container"
+      className={["td-graph-container", className].filter(Boolean).join(" ")}
       style={{ "--td-graph-container-height": height }}
       ref={containerRef}
     >
@@ -561,9 +1765,17 @@ const GraphCanvas = ({
           initialNodes={nodes}
           initialEdges={edges}
           onNodeClick={onNodeClick}
+          onNodeDoubleClick={onNodeDoubleClick}
           onOpenExpanded={onOpenExpanded}
+          onCloseExpanded={onCloseExpanded}
           containerRef={containerRef}
           rootNodeId={rootNodeId}
+          onPaneClick={onPaneClick}
+          topControls={topControls}
+          afterControls={afterControls}
+          bottomControls={bottomControls}
+          onInitialFitComplete={onInitialFitComplete}
+          graphOptions={graphOptions}
         />
       </ReactFlowProvider>
     </div>
@@ -574,19 +1786,36 @@ GraphCanvas.propTypes = {
   nodes: PropTypes.array,
   edges: PropTypes.array,
   onNodeClick: PropTypes.func,
+  onNodeDoubleClick: PropTypes.func,
   height: PropTypes.string,
   onOpenExpanded: PropTypes.func,
+  onCloseExpanded: PropTypes.func,
   rootNodeId: PropTypes.string,
+  onPaneClick: PropTypes.func,
+  topControls: PropTypes.node,
+  afterControls: PropTypes.node,
+  bottomControls: PropTypes.node,
+  onInitialFitComplete: PropTypes.func,
+  className: PropTypes.string,
+  graphOptions: PropTypes.object,
 };
 
 export const Graph = ({
   nodes,
   edges,
   onNodeClick,
+  onNodeDoubleClick,
   allowExpandedView = true,
+  height = DEFAULT_GRAPH_HEIGHT,
   rootNodeId,
+  onPaneClick,
+  topControls,
+  afterControls,
+  bottomControls,
+  onInitialFitComplete,
+  canvasClassName,
+  graphOptions,
 }) => {
-  const { formatMessage } = useIntl();
   const [expandedOpen, setExpandedOpen] = useState(false);
 
   const openExpanded = useCallback(() => setExpandedOpen(true), []);
@@ -598,9 +1827,17 @@ export const Graph = ({
         nodes={nodes}
         edges={edges}
         onNodeClick={onNodeClick}
-        height={DEFAULT_GRAPH_HEIGHT}
+        onNodeDoubleClick={onNodeDoubleClick}
+        height={height}
         onOpenExpanded={allowExpandedView ? openExpanded : undefined}
         rootNodeId={rootNodeId}
+        onPaneClick={onPaneClick}
+        topControls={topControls}
+        afterControls={afterControls}
+        bottomControls={bottomControls}
+        onInitialFitComplete={onInitialFitComplete}
+        className={canvasClassName}
+        graphOptions={graphOptions}
       />
       {allowExpandedView ? (
         <Modal
@@ -610,18 +1847,24 @@ export const Graph = ({
           size="fullscreen"
           closeOnDimmerClick
           closeOnEscape
-          className="td-graph-modal"
+          className="td-graph-modal td-graph-modal--expanded"
         >
-          <Modal.Header>
-            {formatMessage({ id: "graph.expanded.header" })}
-          </Modal.Header>
           <Modal.Content>
             <GraphCanvas
               nodes={nodes}
               edges={edges}
               onNodeClick={onNodeClick}
+              onNodeDoubleClick={onNodeDoubleClick}
+              onCloseExpanded={closeExpanded}
               height={EXPANDED_GRAPH_HEIGHT}
               rootNodeId={rootNodeId}
+              onPaneClick={onPaneClick}
+              topControls={topControls}
+              afterControls={afterControls}
+              bottomControls={bottomControls}
+              onInitialFitComplete={onInitialFitComplete}
+              className={canvasClassName}
+              graphOptions={graphOptions}
             />
           </Modal.Content>
         </Modal>
@@ -634,8 +1877,17 @@ Graph.propTypes = {
   nodes: PropTypes.array,
   edges: PropTypes.array,
   onNodeClick: PropTypes.func,
+  onNodeDoubleClick: PropTypes.func,
   allowExpandedView: PropTypes.bool,
+  height: PropTypes.string,
   rootNodeId: PropTypes.string,
+  onPaneClick: PropTypes.func,
+  topControls: PropTypes.node,
+  afterControls: PropTypes.node,
+  bottomControls: PropTypes.node,
+  onInitialFitComplete: PropTypes.func,
+  canvasClassName: PropTypes.string,
+  graphOptions: PropTypes.object,
 };
 
 export default Graph;