Fixes 31156: release TipTap editors on unmount and load the ELK layout engine on demand

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/hooks/useCustomEditor.ts

@@ -125,7 +125,7 @@
 
     instance.on('transaction', () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           if (isMounted) {
             forceUpdate();
           }
@@ -135,8 +135,17 @@
 
     return () => {
       isMounted = false;
+      // Without this the ProseMirror view, its plugin state and its
+      // MutationObserver outlive the component. Tables mount one editor per
+      // description cell, so every pagination click, search keystroke or tab
+      // switch used to abandon N live instances for the rest of the session.
+      // The isDestroyed guard mirrors @tiptap/react's own useEditor cleanup —
+      // StrictMode double-invokes effects, so this can run twice.
+      if (!instance.isDestroyed) {
+        instance.destroy();
+      }
     };
   }, deps);
 
   return editor;
 };

openmetadata-ui/src/main/resources/ui/src/context/LineageProvider/LineageProvider.tsx

@@ -131,8 +131,8 @@
 import {
   centerNodePosition,
   getViewportForLineageExport,
-  positionNodesUsingElk,
 } from '../../utils/EntityLineageLayoutUtils';
+import { positionNodesUsingElk } from '../../utils/Lineage/Layout/ElkLayoutUtils';
 import {
   createNodes,
   getConnectedNodesEdges,
@@ -202,7 +202,7 @@
 
 export const LineageContext = createContext({} as LineageContextType);
 
 const LineageProvider = ({ children }: LineageProviderProps) => {
   const { t } = useTranslation();
   const { fqn: decodedFqn } = useFqn();
   const location = useCustomLocation();
@@ -333,7 +333,7 @@
     const existingMust = quickFilterQuery?.query?.bool?.must;
     const mustArray = Array.isArray(existingMust)
       ? [...existingMust]
       : existingMust
       ? [existingMust]
       : [];
 
@@ -467,7 +467,7 @@
       outgoingMap,
       isColumnLevelLineage
     );
   }, [
     cachedEdgesAndMaps,
     entityLineage.edges,
     entityFqn,
@@ -500,7 +500,7 @@
       recenter?: string | boolean,
       isFirstTime = false,
       activeReactFlowInstance = reactFlowInstanceRef.current
     ) => {
       if (!activeReactFlowInstance?.viewportInitialized) {
         return;
       }
@@ -619,7 +619,7 @@
       setEdges(visibleEdges);
       setColumnsHavingLineage(columnsLineageSet);
     },
     [
       entityFqn,
       isEditMode,
       zoomValue,
@@ -678,7 +678,7 @@
       } catch (err) {
         showErrorToast(
           err as AxiosError,
           t('server.entity-fetch-error', {
             entity: t('label.lineage-data-lowercase'),
           })
         );

openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageLayoutUtils.ts

@@ -12,7 +12,6 @@
  */
 
 import { graphlib, layout } from '@dagrejs/dagre';
-import type { ElkExtendedEdge, ElkNode } from 'elkjs/lib/elk.bundled.js';
 import type { Edge, Node, ReactFlowInstance } from 'reactflow';
 import { Position } from 'reactflow';
 import type { ExportViewport } from '../components/Entity/EntityExportModalProvider/EntityExportModalProvider.interface';
@@ -24,10 +23,6 @@ import {
   ZOOM_VALUE,
 } from '../constants/Lineage.constants';
 import { EntityLineageDirection } from '../enums/entity.enum';
-import { useLineageStore } from '../hooks/useLineageStore';
-import { getNodeHeight } from './CanvasUtils';
-import { getEntityChildrenAndLabel } from './EntityLineageNodeUtils';
-import ELKLayout from './Lineage/Layout/ELKUtil/ELKUtil';
 
 interface LayoutedElements {
   node: Array<Node & { nodeHeight: number }>;
@@ -101,70 +96,6 @@ export const getLayoutedElements = (
   return { node: uNode, edge: edgesRequired };
 };
 
-export const getELKLayoutedElements = async (
-  nodes: Node[],
-  edges: Edge[],
-  columnsHavingLineage: Map<string, Set<string>> = new Map()
-) => {
-  const { nodeFilterState, isColumnLevelLineage, isEditMode } =
-    useLineageStore.getState();
-  const elkNodes: ElkNode[] = nodes.map((node) => {
-    const isColumnOnlyFilterActive =
-      (isColumnLevelLineage || nodeFilterState.get(node.id)) ?? false;
-    const columns = isEditMode
-      ? getEntityChildrenAndLabel(node.data.node).children.length
-      : columnsHavingLineage.get(node.id)?.size ?? 0;
-
-    const nodeHeight = getNodeHeight(node, isColumnOnlyFilterActive, columns);
-
-    return {
-      id: node.id,
-      width: NODE_WIDTH,
-      height: nodeHeight,
-    };
-  });
-
-  const elkEdges: ElkExtendedEdge[] = edges.map((edge) => ({
-    id: edge.id,
-    sources: [edge.source],
-    targets: [edge.target],
-  }));
-
-  try {
-    const layoutedGraph = await ELKLayout.layoutGraph(elkNodes, elkEdges);
-    const layoutedMap = new Map(
-      (layoutedGraph?.children ?? []).map((n) => [n.id, n])
-    );
-    const updatedNodes: Node[] = nodes.map((node) => {
-      const layoutedNode = layoutedMap.get(node.id);
-
-      return {
-        ...node,
-        position: { x: layoutedNode?.x ?? 0, y: layoutedNode?.y ?? 0 },
-        height: layoutedNode?.height ?? node.height,
-        hidden: false,
-      };
-    });
-
-    return { nodes: updatedNodes, edges: edges ?? [] };
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('Error occurred while layouting graph:', error);
-
-    return { nodes: [], edges: [] };
-  }
-};
-
-export const positionNodesUsingElk = async (
-  nodes: Node[],
-  edges: Edge[],
-  columnsHavingLineage: Map<string, Set<string>>
-) => {
-  const obj = await getELKLayoutedElements(nodes, edges, columnsHavingLineage);
-
-  return obj;
-};
-
 export const getNodesBoundsReactFlow = (nodes: Node[]) => {
   const bounds = {
     xMin: Infinity,

openmetadata-ui/src/main/resources/ui/src/utils/Lineage/Layout/ElkLayoutUtils.ts

@@ -0,0 +1,96 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import type { ElkExtendedEdge, ElkNode } from 'elkjs/lib/elk.bundled.js';
+import type { Edge, Node } from 'reactflow';
+import { NODE_WIDTH } from '../../../constants/Lineage.constants';
+import { useLineageStore } from '../../../hooks/useLineageStore';
+import { getNodeHeight } from '../../CanvasUtils';
+import { getEntityChildrenAndLabel } from '../../EntityLineageNodeUtils';
+
+/**
+ * Lazy boundary for the ELK engine.
+ *
+ * elkjs is ~1.37MB in the built bundle and this is the only module that needs
+ * it. Loading it here — rather than at module scope — keeps it out of whatever
+ * chunk imports this file. `LineageProvider` is statically imported by eight
+ * lineage components, so a top-level import would put the engine in the shared
+ * chunk that every authenticated route pulls, including glossary pages that
+ * render with G6/antv-dagre and never call ELK.
+ */
+const loadElkLayout = async () => (await import('./ELKUtil/ELKUtil')).default;
+
+export const getELKLayoutedElements = async (
+  nodes: Node[],
+  edges: Edge[],
+  columnsHavingLineage: Map<string, Set<string>> = new Map()
+) => {
+  const { nodeFilterState, isColumnLevelLineage, isEditMode } =
+    useLineageStore.getState();
+  const elkNodes: ElkNode[] = nodes.map((node) => {
+    const isColumnOnlyFilterActive =
+      (isColumnLevelLineage || nodeFilterState.get(node.id)) ?? false;
+    const columns = isEditMode
+      ? getEntityChildrenAndLabel(node.data.node).children.length
+      : columnsHavingLineage.get(node.id)?.size ?? 0;
+
+    const nodeHeight = getNodeHeight(node, isColumnOnlyFilterActive, columns);
+
+    return {
+      id: node.id,
+      width: NODE_WIDTH,
+      height: nodeHeight,
+    };
+  });
+
+  const elkEdges: ElkExtendedEdge[] = edges.map((edge) => ({
+    id: edge.id,
+    sources: [edge.source],
+    targets: [edge.target],
+  }));
+
+  try {
+    const ELKLayout = await loadElkLayout();
+    const layoutedGraph = await ELKLayout.layoutGraph(elkNodes, elkEdges);
+    const layoutedMap = new Map(
+      (layoutedGraph?.children ?? []).map((n) => [n.id, n])
+    );
+    const updatedNodes: Node[] = nodes.map((node) => {
+      const layoutedNode = layoutedMap.get(node.id);
+
+      return {
+        ...node,
+        position: { x: layoutedNode?.x ?? 0, y: layoutedNode?.y ?? 0 },
+        height: layoutedNode?.height ?? node.height,
+        hidden: false,
+      };
+    });
+
+    return { nodes: updatedNodes, edges: edges ?? [] };
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Error occurred while layouting graph:', error);
+
+    return { nodes: [], edges: [] };
+  }
+};
+
+export const positionNodesUsingElk = async (
+  nodes: Node[],
+  edges: Edge[],
+  columnsHavingLineage: Map<string, Set<string>>
+) => {
+  const obj = await getELKLayoutedElements(nodes, edges, columnsHavingLineage);
+
+  return obj;
+};