@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/visualizer/explorer.js

@@ -7,36 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import '../';
 import { queryAll, customElement, query, state, property } from "lit/decorators.js";
 import { html, svg } from "lit";
+import { repeat } from "lit/directives/repeat.js";
 import visualizerCss from "./visualizer.css.js";
-import { ForeignObjectComponent } from "./foreign-object.js";
-import { GraphNodeComponent } from "./nodes/graph-node.js";
-import ElkConstructor from 'elkjs';
-import { EdgeComponent } from "./edge.js";
-import { DocumentNodeComponent } from "./nodes/document.js";
-import { NodeType } from "../../model/node_type.js";
-import { InfoNodeComponent } from "./nodes/info.js";
-import { LicenseNodeComponent } from "./nodes/license.js";
-import { ContactNodeComponent } from "./nodes/contact.js";
-import { TagNodeComponent } from "./nodes/tag.js";
-import { ServerNodeComponent } from "./nodes/server.js";
-import { ComponentsNodeComponent } from "./nodes/components.js";
-import { SchemaNodeComponent } from "./nodes/schema.js";
-import { SecuritySchemeNodeComponent } from "./nodes/security-scheme.js";
-import { ParameterNodeComponent } from "./nodes/parameter.js";
-import { HeaderNodeComponent } from "./nodes/header.js";
-import { RequestBodyNodeComponent } from "./nodes/request-body.js";
-import { MediaTypeNodeComponent } from "./nodes/media-type.js";
-import { ResponseNodeComponent } from "./nodes/response.js";
-import { LinkNodeComponent } from "./nodes/link.js";
-import { CallbackNodeComponent } from "./nodes/callback.js";
-import { PathItemNodeComponent } from "./nodes/path-item.js";
-import { OperationNodeComponent } from "./nodes/operation.js";
-import { XMLNodeComponent } from "./nodes/xml.js";
 import { EqualizerComponent } from "./equalizer.js";
-import { ExplorerDependentNodeClicked, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerReset, ExplorerRotate, ExplorerZoomIn, ExplorerZoomOut, ModelTreeNodeClicked } from "../../events/doctor.js";
+import { ExplorerComponentFactory } from "../../factories/explorer-component-factory.js";
+import { renderSvgMarkers } from "./templates/svg-markers.js";
+import { ExplorerDependentNodeClicked, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerLoadMoreChildren, ExplorerPovModeExit, ExplorerReset, ExplorerRotate, ExplorerZoomIn, ExplorerZoomOut, ModelTreeNodeClicked } from "../../events/doctor.js";
 import { HasEyes } from "./has-eyes.js";
 import GraphDependentWorker from "../../workers/graph-dependent.worker.js?worker";
-import sharedCss from "../../css/shared.css";
+import ElkLayoutWorker from "../../workers/elk-layout.worker.js?worker";
+import sharedCss from "../../css/shared.css.js";
+import { ExpansionManager } from "../../managers/expansion-manager.js";
+import { LayoutFilterManager } from "../../managers/layout-filter-manager.js";
 export var Direction;
 (function (Direction) {
     Direction["UP"] = "UP";
@@ -45,24 +27,45 @@ export var Direction;
     Direction["RIGHT"] = "RIGHT";
 })(Direction || (Direction = {}));
 let ExplorerComponent = class ExplorerComponent extends HasEyes {
-    constructor() {
+    get expandedNodes() { return this.expansionManager.expandedNodes; }
+    get visibleChildrenCount() { return this.expansionManager.visibleChildrenCount; }
+    get pathRevealNodes() { return this.expansionManager.pathRevealNodes; }
+    get pathRevealTarget() { return this.expansionManager.pathRevealTarget; }
+    constructor(doc) {
         super();
+        this.embeddedMode = false;
+        this.povPreviousViewBox = null;
+        this.povFocusNodeId = null;
+        this.layoutRequestId = 0;
         this.nodeComponents = [];
         this.edgeComponents = [];
         this.scale = 1;
+        this.isDragging = false; // Track if we're actually dragging vs just clicked
+        this.dragThreshold = 5; // Pixels to move before considering it a drag
         this.dragStartViewBoxX = 0;
         this.dragStartViewBoxY = 0;
+        this.previousActiveNodeId = null;
         this.zoomMax = 8000;
         this.zoomMin = 50;
         this.collapsedNodes = new Map();
         this.collapsedEdges = new Map();
-        this.elk = new ElkConstructor();
+        this.hasMoreChildren = new Map();
+        this.currentAnimationId = 0;
+        this.savedExpandedNodes = null;
+        this.savedVisibleChildrenCount = null;
+        this.resizeObserver = null;
+        this.containerWidth = 0;
+        this.containerHeight = 0;
+        this.doc = doc;
         this.ready = false;
         this.direction = Direction.RIGHT;
         this.nodeMap = new Map();
+        this.definitionCache = new Map();
+        this.edgeMap = new Map();
+        this.violationMap = new Map();
         this.renderGraphMap = new Map();
         this.edgeComponentMap = new Map();
-        this.renderedNodeMap = new Map();
+        this.nodeComponentMap = new Map();
         this.collapsedNodes = new Map();
         this.nodes = [];
         this.edges = [];
@@ -72,8 +75,6 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.edgeNode = '120';
         this.bendEdges = true;
         this.bendPoints = true;
-        this.renderRefs = false;
-        this.renderPoly = false;
         this.nodeLimitExceeded = false;
         this.nodeLimit = -1;
         this.equalizer = new EqualizerComponent();
@@ -85,72 +86,223 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.equalizer.edgeNode = parseInt(this.edgeNode);
         this.equalizer.bendEdges = this.bendEdges;
         this.equalizer.bendPoints = this.bendPoints;
-        this.equalizer.renderRefs = this.renderRefs;
-        this.equalizer.renderPoly = this.renderPoly;
-        this.dimDependencies = false;
-        this.zoomX = 0;
-        this.zoomY = 0;
-        this.zoomW = 0;
-        this.zoomH = 0;
+        this.zoomX = null;
+        this.zoomY = null;
+        this.zoomW = null;
+        this.zoomH = null;
         this.graphDependentWorker = new GraphDependentWorker();
-        this.equalizer.addEventListener(ExplorerZoomIn, this.zoomIn.bind(this));
-        this.equalizer.addEventListener(ExplorerZoomOut, this.zoomOut.bind(this));
-        this.equalizer.addEventListener(ExplorerRotate, this.rotate.bind(this));
-        this.equalizer.addEventListener(ExplorerReset, this.reset.bind(this));
-        //@ts-ignore
-        this.equalizer.addEventListener(ExplorerEqualizerChanged, this.equalizerChanged.bind(this));
-        //@ts-ignore
-        this.equalizer.addEventListener(ExplorerEqualizerFiltered, this.equalizerFiltered.bind(this));
-        //@ts-ignore
-        this.addEventListener(ExplorerDependentNodeClicked, this.dependentNodeClicked.bind(this));
-        this.graphDependentWorker.onmessage = (e) => {
+        this.elkLayoutWorker = new ElkLayoutWorker();
+        this.elkLayoutWorker.onerror = (e) => {
+            console.error('[explorer] ELK layout worker error:', e);
+        };
+        this.expansionManager = new ExpansionManager({
+            getNodeMap: () => this.nodeMap,
+            getGraphResponseNodes: () => this.graphResponse?.nodes,
+            buildGraph: () => this.buildGraph(),
+            moveToNode: (node) => this.moveToNode(node),
+            getActiveNode: () => this.activeNode,
+            setActiveNode: (node) => { this.activeNode = node; },
+            setPreviousActiveNodeId: (id) => { this.previousActiveNodeId = id; },
+            getNodeScreenOffset: (nodeId) => this.getNodeScreenOffset(nodeId),
+            restoreNodeScreenPosition: (nodeId, offset) => this.restoreNodeScreenPosition(nodeId, offset),
+            preservePositions: () => this.layoutFilterManager.preservePositions(this.graph)
+        });
+        this.layoutFilterManager = new LayoutFilterManager({
+            getExpandedNodes: () => this.expansionManager.expandedNodes,
+            getVisibleChildrenCount: () => this.expansionManager.visibleChildrenCount,
+            getPathRevealNodes: () => this.expansionManager.pathRevealNodes,
+            getChildBatchSize: () => this.expansionManager.CHILD_BATCH_SIZE
+        });
+        this.explorerComponentFactory = new ExplorerComponentFactory({
+            getNodeMap: () => this.nodeMap,
+            getDefinitionCache: () => this.definitionCache,
+            getEdgeMap: () => this.edgeMap
+        });
+        // Store bound handlers for cleanup
+        this.boundZoomIn = this.zoomIn.bind(this);
+        this.boundZoomOut = this.zoomOut.bind(this);
+        this.boundRotate = this.rotate.bind(this);
+        this.boundReset = this.reset.bind(this);
+        this.boundEqualizerChanged = this.equalizerChanged.bind(this);
+        this.boundEqualizerFiltered = this.equalizerFiltered.bind(this);
+        this.boundDependentNodeClicked = this.dependentNodeClicked.bind(this);
+        this.boundLoadMoreChildren = this.loadMoreChildrenClicked.bind(this);
+        this.boundPovModeExit = this.handlePovModeExit.bind(this);
+        this.boundGraphDependentMessage = (e) => {
             this.toggleNodeVisibility(e.data.filteredNodes, e.data.filteredEdges, e.data.collapse);
         };
+        this.equalizer.addEventListener(ExplorerZoomIn, this.boundZoomIn);
+        this.equalizer.addEventListener(ExplorerZoomOut, this.boundZoomOut);
+        this.equalizer.addEventListener(ExplorerRotate, this.boundRotate);
+        this.equalizer.addEventListener(ExplorerReset, this.boundReset);
+        this.equalizer.addEventListener(ExplorerEqualizerChanged, this.boundEqualizerChanged);
+        this.equalizer.addEventListener(ExplorerEqualizerFiltered, this.boundEqualizerFiltered);
+        this.addEventListener(ExplorerDependentNodeClicked, this.boundDependentNodeClicked);
+        this.addEventListener(ExplorerLoadMoreChildren, this.boundLoadMoreChildren);
+        this.equalizer.addEventListener(ExplorerPovModeExit, this.boundPovModeExit);
+        this.graphDependentWorker.onmessage = this.boundGraphDependentMessage;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupResizeObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.elkLayoutWorker?.terminate();
+        this.graphDependentWorker?.terminate();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        // Remove event listeners from equalizer
+        this.equalizer.removeEventListener(ExplorerZoomIn, this.boundZoomIn);
+        this.equalizer.removeEventListener(ExplorerZoomOut, this.boundZoomOut);
+        this.equalizer.removeEventListener(ExplorerRotate, this.boundRotate);
+        this.equalizer.removeEventListener(ExplorerReset, this.boundReset);
+        this.equalizer.removeEventListener(ExplorerEqualizerChanged, this.boundEqualizerChanged);
+        this.equalizer.removeEventListener(ExplorerEqualizerFiltered, this.boundEqualizerFiltered);
+        this.equalizer.removeEventListener(ExplorerPovModeExit, this.boundPovModeExit);
+        // Remove event listeners from self
+        this.removeEventListener(ExplorerDependentNodeClicked, this.boundDependentNodeClicked);
+        this.removeEventListener(ExplorerLoadMoreChildren, this.boundLoadMoreChildren);
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                if (width !== this.containerWidth || height !== this.containerHeight) {
+                    this.containerWidth = width;
+                    this.containerHeight = height;
+                    this.updateViewBoxForContainer();
+                }
+            }
+        });
+        this.resizeObserver.observe(this);
+    }
+    updateViewBoxForContainer() {
+        if (!this.svgItem || this.containerWidth === 0 || this.containerHeight === 0)
+            return;
+        const viewBox = this.svgItem.viewBox.baseVal;
+        const currentCenterX = viewBox.x + viewBox.width / 2;
+        const currentCenterY = viewBox.y + viewBox.height / 2;
+        const aspectRatio = this.containerWidth / this.containerHeight;
+        const box = this.buildBaseViewBox();
+        const base = box.base + 300;
+        let newWidth;
+        let newHeight;
+        if (aspectRatio > 1) {
+            newHeight = base;
+            newWidth = base * aspectRatio;
+        }
+        else {
+            newWidth = base;
+            newHeight = base / aspectRatio;
+        }
+        viewBox.width = newWidth;
+        viewBox.height = newHeight;
+        viewBox.x = currentCenterX - newWidth / 2;
+        viewBox.y = currentCenterY - newHeight / 2;
+        this.zoomW = newWidth;
+        this.zoomH = newHeight;
+        this.zoomX = viewBox.x;
+        this.zoomY = viewBox.y;
     }
     toggleNodeVisibility(nodes, edges, collapse) {
         nodes.forEach((node) => {
-            const nodeComponent = this.nodeComponents.find((nc) => nc.id === node.id);
-            if (nodeComponent) {
-                if (nodeComponent.visible && collapse) {
-                    nodeComponent.visible = false;
-                    this.collapsedNodes.set(node.id, true);
-                }
-                if (!nodeComponent.visible && !collapse) {
-                    nodeComponent.visible = true;
-                    this.collapsedNodes.delete(node.id);
-                }
+            if (!node?.id)
+                return;
+            const nodeComponent = this.nodeComponentMap.get(node.id);
+            if (!nodeComponent)
+                return;
+            if (nodeComponent.visible && collapse) {
+                nodeComponent.visible = false;
+                this.collapsedNodes.set(node.id, true);
+            }
+            else if (!nodeComponent.visible && !collapse) {
+                nodeComponent.visible = true;
+                this.collapsedNodes.delete(node.id);
             }
         });
         edges.forEach((edge) => {
-            const edgeComponent = this.edgeComponents.find((ec) => ec.edge.id === edge.id);
-            if (edgeComponent) {
-                if (edgeComponent.visible && collapse) {
-                    edgeComponent.visible = false;
-                    this.collapsedEdges.set(edge.id, true);
-                }
-                if (!edgeComponent.visible && !collapse) {
-                    edgeComponent.visible = true;
-                    this.collapsedEdges.delete(edge.id);
-                }
+            if (!edge?.id)
+                return;
+            const edgeComponent = this.edgeComponentMap.get(edge.id);
+            if (!edgeComponent)
+                return;
+            if (edgeComponent.visible && collapse) {
+                edgeComponent.visible = false;
+                this.collapsedEdges.set(edge.id, true);
+            }
+            else if (!edgeComponent.visible && !collapse) {
+                edgeComponent.visible = true;
+                this.collapsedEdges.delete(edge.id);
             }
         });
         this.requestUpdate();
     }
     dependentNodeClicked(evt) {
-        if (this.graphDependentWorker) {
-            this.graphDependentWorker.postMessage({
-                dependentNode: evt.detail.node,
-                collapse: evt.detail.collapse,
-                nodes: this.graphResponse.nodes,
-                edges: this.graphResponse.edges
+        const nodeId = evt.detail.node.id;
+        this.toggleNodeExpansion(nodeId);
+    }
+    loadMoreChildrenClicked(evt) {
+        this.loadMoreChildren(evt.detail.parentId);
+    }
+    enterPovMode(nodeId, povNode) {
+        const state = this.expansionManager.saveState();
+        this.savedExpandedNodes = state.expandedNodes;
+        this.savedVisibleChildrenCount = state.visibleChildrenCount;
+        this.povMode = true;
+        this.povFocusNodeId = nodeId;
+        this.povNode = povNode;
+        this.povNodeId = nodeId;
+    }
+    exitPovMode(invalidateCache = true) {
+        if (this.savedExpandedNodes && this.savedVisibleChildrenCount) {
+            this.expansionManager.restoreState({
+                expandedNodes: this.savedExpandedNodes,
+                visibleChildrenCount: this.savedVisibleChildrenCount
             });
+            this.savedExpandedNodes = null;
+            this.savedVisibleChildrenCount = null;
+        }
+        this.graphResponse?.nodes?.forEach(node => {
+            if (node.dependency)
+                node.dependency = false;
+        });
+        this.graphResponse?.edges?.forEach(edge => {
+            if (edge.dependency)
+                edge.dependency = false;
+        });
+        this.povMode = false;
+        this.povNode = null;
+        this.equalizer.controls.povNode = null;
+        if (invalidateCache) {
+            this.expansionManager.invalidateChildrenCache();
+            this.layoutFilterManager.invalidateChildrenCache();
         }
     }
+    handlePovModeExit() {
+        this.exitPovMode(true);
+    }
     updateGraphResponse(graphResponse) {
         this.graphResponse = graphResponse;
+        this.expansionManager.invalidateChildrenCache();
+        this.layoutFilterManager.invalidateChildrenCache();
         this.equalizer.graphResponse = graphResponse;
         this.equalizer.controls.searchComponent.graphResponse = graphResponse;
-        this.buildGraph();
+        // Populate violation map from graph response
+        this.violationMap.clear();
+        if (graphResponse.violations) {
+            Object.entries(graphResponse.violations).forEach(([id, violation]) => {
+                this.violationMap.set(id, violation);
+            });
+        }
+        this.buildGraph().then(() => {
+            // Center on root after initial graph build
+            setTimeout(() => {
+                if (!this.activeNode) {
+                    this.centerOnRoot();
+                }
+            }, 50);
+        });
     }
     rotate() {
         switch (this.direction) {
@@ -168,29 +320,45 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                 break;
         }
         this.resetNodes();
-        this.buildGraph();
-        setTimeout(() => {
-            if (this.activeNode) {
-                this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        nodeId: this.activeNode.id,
-                    }
-                }));
-                return;
-            }
+        this.buildGraph().then(() => {
+            setTimeout(() => {
+                if (this.activeNode) {
+                    this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            nodeId: this.activeNode.id,
+                        }
+                    }));
+                    return;
+                }
+            }, 200);
         });
     }
     mouseMove(evt) {
         if (this.grabbed) {
-            requestAnimationFrame(() => {
-                const viewBox = this.svgItem.viewBox.baseVal;
-                const dx = (evt.clientX - this.startX) * (viewBox.width / this.svgItem.clientWidth);
-                const dy = (evt.clientY - this.startY) * (viewBox.height / this.svgItem.clientHeight);
-                viewBox.x = this.dragStartViewBoxX - dx;
-                viewBox.y = this.dragStartViewBoxY - dy;
-            });
+            // Calculate distance moved from initial click
+            const distanceMoved = Math.sqrt(Math.pow(evt.clientX - this.startX, 2) +
+                Math.pow(evt.clientY - this.startY, 2));
+            // Only start dragging if we've moved beyond the threshold
+            if (!this.isDragging && distanceMoved > this.dragThreshold) {
+                this.isDragging = true;
+            }
+            // Only move the graph if we're actually dragging
+            if (this.isDragging) {
+                requestAnimationFrame(() => {
+                    const viewBox = this.svgItem.viewBox.baseVal;
+                    const dx = (evt.clientX - this.startX) * (viewBox.width / this.svgItem.clientWidth);
+                    const dy = (evt.clientY - this.startY) * (viewBox.height / this.svgItem.clientHeight);
+                    viewBox.x = this.dragStartViewBoxX - dx;
+                    viewBox.y = this.dragStartViewBoxY - dy;
+                    // Update stored zoom values when dragging
+                    this.zoomX = viewBox.x;
+                    this.zoomY = viewBox.y;
+                    this.zoomW = viewBox.width;
+                    this.zoomH = viewBox.height;
+                });
+            }
         }
     }
     mouseDown(evt) {
@@ -203,11 +371,11 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     }
     mouseUp() {
         this.grabbed = false;
+        this.isDragging = false; // Reset dragging state
     }
     zoom(scale) {
         scale = Math.abs(scale) < 0.02 ? (scale / Math.abs(scale)) * 0.02 : scale;
-        //@ts-ignore
-        let [x, y, width, height] = this.svgItem.getAttribute('viewBox')?.split(' ').map(Number);
+        const [x, y, width, height] = (this.svgItem.getAttribute('viewBox')?.split(' ').map(Number) ?? [0, 0, 0, 0]);
         let centerX = x + width / 2;
         let centerY = y + height / 2;
         let [width2, height2] = [width + width * scale, height + height * scale];
@@ -230,13 +398,11 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     }
     onWheel(evt) {
         evt.preventDefault();
-        //@ts-ignore
         let scale = evt.deltaY / 1000;
-        //@ts-ignore
         scale = Math.abs(scale) < .02 ? .02 * evt.deltaY / Math.abs(evt.deltaY) : scale;
         let pt = new DOMPoint(evt.clientX, evt.clientY);
         pt = pt.matrixTransform(this.svgItem.getScreenCTM()?.inverse());
-        let [x, y, width, height] = this.svgItem.getAttribute('viewBox')?.split(' ').map(Number);
+        const [x, y, width, height] = (this.svgItem.getAttribute('viewBox')?.split(' ').map(Number) ?? [0, 0, 0, 0]);
         let [xPropW, yPropH] = [(pt.x - x) / width, (pt.y - y) / height];
         let [width2, height2] = [width + width * scale, height + height * scale];
         let x2 = pt.x - xPropW * width2;
@@ -256,13 +422,34 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         });
     }
     equalizerFiltered(evt) {
+        this.clearPathReveal();
         this.graphResponse = evt.detail.graph;
-        this.buildGraph();
-    }
-    equalizerChanged(evt) {
-        if (evt.detail.graph.nodes.length > 0) {
-            this.graphResponse = evt.detail.graph;
+        this.expansionManager.invalidateChildrenCache();
+        this.layoutFilterManager.invalidateChildrenCache();
+        this.extractEQPreferences(evt);
+        const isPovMode = evt.detail.povMode;
+        this.povNodeId = evt.detail.povNodeId || null;
+        if (isPovMode) {
+            this.povMode = true;
         }
+        this.buildGraph().then(() => {
+            if (isPovMode && this.povFocusNodeId) {
+                this.equalizer.controls.povNode = this.povNode;
+                setTimeout(() => {
+                    const povNode = this.graphResponse.nodes?.find(n => n.id === this.povFocusNodeId);
+                    if (povNode) {
+                        this.moveToNode(povNode, false);
+                    }
+                }, 50);
+            }
+            else if (!this.activeNode) {
+                setTimeout(() => {
+                    this.centerOnRoot();
+                }, 50);
+            }
+        });
+    }
+    extractEQPreferences(evt) {
         if (evt.detail.spacing) {
             if (evt.detail.spacing.nodeNodeBetweenLayers) {
                 this.nodeNodeBetweenLayers = evt.detail.spacing.nodeNodeBetweenLayers.toString();
@@ -278,35 +465,30 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             }
             this.bendEdges = !!evt.detail.spacing.bendEdges;
             this.bendPoints = !!evt.detail.spacing.bendPoints;
-            this.dimDependencies = !!evt.detail.options?.dimDependents;
         }
-        if (evt.detail.references) {
-            this.renderRefs = !!evt.detail.references.renderRefs;
-            this.renderPoly = !!evt.detail.references.renderPoly;
-        }
-        this.buildGraph();
-        setTimeout(() => {
-            if (this.activeNode && this._visible) {
-                this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        nodeId: this.activeNode.id,
-                        first: true
-                    }
-                }));
-                return;
-            }
-        }, 150);
     }
-    buildLayout() {
-        this.elk.layout(this.graph, {
-            layoutOptions: {
-                'algorithm': 'layered'
-            },
-            logging: true,
-            measureExecutionTime: true
-        }).then(this.readyGo.bind(this));
+    equalizerChanged(evt) {
+        this.clearPathReveal();
+        if (evt.detail.graph.nodes.length > 0) {
+            this.expansionManager.invalidateChildrenCache();
+            this.layoutFilterManager.invalidateChildrenCache();
+            this.graphResponse = evt.detail.graph;
+        }
+        this.extractEQPreferences(evt);
+        this.buildGraph().then(() => {
+            setTimeout(() => {
+                if (this.activeNode && this._visible) {
+                    this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            nodeId: this.activeNode.id,
+                            first: true
+                        }
+                    }));
+                }
+            }, 50);
+        });
     }
     resetNodes() {
         this.graph.children?.forEach((c) => {
@@ -318,6 +500,45 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             delete (e.sections);
         });
     }
+    filterGraphByExpansion(allNodes, allEdges) {
+        return this.layoutFilterManager.filterGraphByExpansion(allNodes, allEdges, this.povMode);
+    }
+    preservePositions() {
+        this.layoutFilterManager.preservePositions(this.graph);
+    }
+    applyPositionHints(nodes) {
+        this.layoutFilterManager.applyPositionHints(nodes);
+    }
+    toggleNodeExpansion(nodeId) {
+        this.expansionManager.toggleNodeExpansion(nodeId);
+    }
+    loadMoreChildren(parentId) {
+        this.expansionManager.loadMoreChildren(parentId);
+    }
+    isNodeExpanded(nodeId) {
+        return this.expansionManager.isNodeExpanded(nodeId);
+    }
+    isNodeCurrentlyVisible(nodeId) {
+        return this.expansionManager.isNodeCurrentlyVisible(nodeId);
+    }
+    invalidateChildrenCache() {
+        this.expansionManager.invalidateChildrenCache();
+        this.layoutFilterManager.invalidateChildrenCache();
+    }
+    addToNodeMap(node) {
+        if (!this.nodeMap.has(node.id)) {
+            this.nodeMap.set(node.id, node);
+        }
+    }
+    ensureNodesVisible(nodes) {
+        this.expansionManager.ensureNodesVisible(nodes);
+    }
+    revealPathToNode(nodeId) {
+        this.expansionManager.revealPathToNode(nodeId, this.povMode);
+    }
+    clearPathReveal() {
+        this.expansionManager.clearPathReveal();
+    }
     generateOptions() {
         return {
             'spacing.nodeNodeBetweenLayers': this.nodeNodeBetweenLayers,
@@ -335,173 +556,92 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             'org.eclipse.elk.spacing.edgeNode': this.edgeNode,
             'org.eclipse.elk.layered.edgeLabels.sideSelection': 'ALWAYS_UP',
             'org.eclipse.elk.spacing.portPort': '10',
+            // Interactive mode for position stability during incremental expansion
+            'elk.interactive': 'true',
+            'elk.interactiveLayout': 'true',
+            'elk.layered.interactiveReferencePoint': 'CENTER',
+            'elk.layered.crossingMinimization.semiInteractive': 'true',
+            'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
         };
     }
     buildGraph() {
+        const currentRequestId = ++this.layoutRequestId;
+        const filtered = this.filterGraphByExpansion(this.graphResponse.nodes || [], this.graphResponse.edges || []);
+        this.hasMoreChildren = filtered.hasMoreChildren;
+        this.applyPositionHints(filtered.nodes);
         const graph = {
             id: "root",
             layoutOptions: this.generateOptions(),
-            children: this.graphResponse.nodes,
-            edges: this.graphResponse.edges
+            children: filtered.nodes,
+            edges: filtered.edges
         };
-        this.graph = graph;
         this.nodeMap.clear();
-        this.buildLayout();
         if (!this.equalizer.graphResponse) {
             this.equalizer.graphResponse = this.graphResponse;
         }
-        return graph;
-    }
-    generateNodeType(nodeType) {
-        switch (nodeType) {
-            case NodeType.DOCUMENT:
-                return new DocumentNodeComponent();
-            case NodeType.INFO:
-                return new InfoNodeComponent();
-            case NodeType.LICENSE:
-                return new LicenseNodeComponent();
-            case NodeType.CONTACT:
-                return new ContactNodeComponent();
-            case NodeType.TAG:
-                return new TagNodeComponent();
-            case NodeType.SERVER:
-                return new ServerNodeComponent();
-            case NodeType.COMPONENTS:
-                return new ComponentsNodeComponent();
-            case NodeType.SCHEMA:
-                return new SchemaNodeComponent();
-            case NodeType.SECURITY_SCHEME:
-                return new SecuritySchemeNodeComponent();
-            case NodeType.PARAMETER:
-                return new ParameterNodeComponent();
-            case NodeType.HEADER:
-                return new HeaderNodeComponent();
-            case NodeType.REQUEST_BODY:
-                return new RequestBodyNodeComponent();
-            case NodeType.MEDIA_TYPE:
-                return new MediaTypeNodeComponent();
-            case NodeType.RESPONSE:
-                return new ResponseNodeComponent();
-            case NodeType.LINK:
-                return new LinkNodeComponent();
-            case NodeType.CALLBACK:
-                return new CallbackNodeComponent();
-            case NodeType.PATH_ITEM:
-                return new PathItemNodeComponent();
-            case NodeType.OPERATION:
-                return new OperationNodeComponent();
-            case NodeType.XML:
-                return new XMLNodeComponent();
-            default:
-                return new GraphNodeComponent();
-        }
+        return new Promise((resolve, reject) => {
+            const cleanup = () => {
+                this.elkLayoutWorker.removeEventListener('message', handleMessage);
+                this.elkLayoutWorker.removeEventListener('error', handleError);
+            };
+            const handleMessage = (e) => {
+                if (e.data.requestId !== currentRequestId) {
+                    return;
+                }
+                cleanup();
+                if (e.data.success) {
+                    this.graph = e.data.graph;
+                    this.readyGo();
+                    resolve(this.graph);
+                }
+                else {
+                    reject(new Error(e.data.error));
+                }
+            };
+            const handleError = (error) => {
+                cleanup();
+                reject(new Error(`Worker error: ${error.message}`));
+            };
+            this.elkLayoutWorker.addEventListener('message', handleMessage);
+            this.elkLayoutWorker.addEventListener('error', handleError);
+            this.elkLayoutWorker.postMessage({
+                requestId: currentRequestId,
+                graph: graph,
+                layoutOptions: { 'algorithm': 'layered' }
+            });
+        });
     }
     buildNodes() {
-        this.nodes = [];
-        this.nodeComponents = [];
-        this.renderGraphMap.clear();
-        this.renderedNodeMap.clear();
-        this.graphResponse.nodesRendered?.forEach((node) => {
-            this.renderedNodeMap.set(node.id, node);
-        });
-        this.graph.children?.forEach((c) => {
-            const child = c;
-            const nc = new ForeignObjectComponent();
-            nc.id = child.id;
-            if (child.x && child.y) {
-                child.x = Math.round(child.x);
-                child.y = Math.round(child.y);
-                nc.x = Math.round(child.x);
-                nc.y = Math.round(child.y);
-            }
-            nc.width = child.width;
-            nc.height = child.height;
-            const op = this.generateNodeType(child.type);
-            op.height = child.height;
-            op.width = child.width - 2;
-            op.id = child.id;
-            op.label = child.label;
-            op.isLeaf = !(child.nodes && child.nodes.length > 0);
-            op.node = child;
-            if (child.active) {
-                op.active = child.active;
-                nc.active = child.active;
-            }
-            if (!child.active && this.activeNode && this.activeNode.id === child.id) {
-                op.active = true;
-                nc.active = true;
-            }
-            if (child.dependency) {
-                op.isDependency = true;
-                if (this.dimDependencies) {
-                    op.dim = true;
-                }
-            }
-            if (this.collapsedNodes.has(child.id)) {
-                nc.visible = false;
-            }
-            op.nodeInstance = this.renderedNodeMap.get(child.id)?.instance;
-            child.results = this.renderedNodeMap.get(child.id)?.results;
-            this.renderGraphMap.set(child.id, op);
-            nc.body = op;
-            this.nodeComponents.push(nc);
-            this.nodes.push(child);
+        this.nodeMap.clear();
+        this.definitionCache.clear();
+        this.edgeMap.clear();
+        const result = this.explorerComponentFactory.buildNodes({
+            graph: this.graph,
+            graphResponse: this.graphResponse,
+            expandedNodes: this.expandedNodes,
+            hasMoreChildren: this.hasMoreChildren,
+            povMode: this.povMode,
+            povNodeId: this.povNodeId,
+            activeNode: this.activeNode,
+            violationMap: this.violationMap
         });
+        this.nodes = result.nodes;
+        this.nodeComponents = result.nodeComponents;
+        this.renderGraphMap = result.renderGraphMap;
+        this.nodeComponentMap = result.nodeComponentMap;
     }
     buildEdges() {
-        this.edgeComponents = [];
-        this.edgeComponentMap.clear();
-        this.edges = [];
-        this.graph.edges?.forEach((e) => {
-            const edge = e;
-            let s = this.renderGraphMap.get(edge.sources[0]);
-            s?.outputs.push(edge);
-            let t = this.renderGraphMap.get(edge.targets[0]);
-            t?.inputs.push(edge);
-            if (edge.ref.length > 0 && s) {
-                s.isRef = true;
-            }
-            const edgeComponent = new EdgeComponent(edge);
-            if (this.collapsedEdges.has(edge.id)) {
-                edgeComponent.visible = false;
-            }
-            if (this.nodeLimitExceeded) {
-                edgeComponent.animated = false;
-            }
-            this.edges.push(edge);
-            this.edgeComponents.push(edgeComponent);
-            this.edgeComponentMap.set(edge.id, edgeComponent);
-            edgeComponent.bendPoints = this.bendPoints;
-            edgeComponent.bendCurve = this.bendEdges;
-            if (edge.dependency) {
-                edgeComponent.isDependency = true;
-                if (this.dimDependencies) {
-                    edgeComponent.dim = true;
-                }
-            }
-        });
-        this.renderGraphMap.forEach((node) => {
-            if (node.outputs.length <= 0) {
-                node.inputs.forEach((edge) => {
-                    const e = this.edgeComponentMap.get(edge.id);
-                    if (e) {
-                        e.targetIsLeaf = true;
-                    }
-                });
-            }
-            else {
-                node.outputs.forEach((edge) => {
-                    if (edge.ref != '') {
-                        const e = this.edgeComponentMap.get(edge.id);
-                        if (e && e.targetIsLeaf) {
-                            e.targetIsLeaf = false;
-                            node.isLeaf = false;
-                            node.isRef = true;
-                        }
-                    }
-                });
-            }
-        });
+        const result = this.explorerComponentFactory.buildEdges({
+            graph: this.graph,
+            collapsedEdges: this.collapsedEdges,
+            bendPoints: this.bendPoints,
+            bendEdges: this.bendEdges,
+            nodeLimitExceeded: this.nodeLimitExceeded,
+            povMode: this.povMode
+        }, this.renderGraphMap);
+        this.edges = result.edges;
+        this.edgeComponents = result.edgeComponents;
+        this.edgeComponentMap = result.edgeComponentMap;
     }
     readyGo() {
         this.buildNodes();
@@ -512,39 +652,72 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     reset() {
         this.direction = Direction.RIGHT;
         const box = this.buildBaseViewBox();
-        this.zoomH = null;
-        this.zoomW = null;
-        this.zoomX = null;
-        this.zoomY = null;
-        this.svgItem.setAttribute('viewBox', `0 0 ${box.base} ${box.base}`);
+        const base = box.base + 300;
+        let viewBoxW = base;
+        let viewBoxH = base;
+        if (this.containerWidth > 0 && this.containerHeight > 0) {
+            const aspectRatio = this.containerWidth / this.containerHeight;
+            if (aspectRatio > 1) {
+                viewBoxH = base;
+                viewBoxW = base * aspectRatio;
+            }
+            else {
+                viewBoxW = base;
+                viewBoxH = base / aspectRatio;
+            }
+        }
+        this.zoomH = viewBoxH;
+        this.zoomW = viewBoxW;
+        this.zoomX = -150;
+        this.zoomY = -150;
+        this.svgItem.setAttribute('viewBox', `-150 -150 ${viewBoxW} ${viewBoxH}`);
         this.resetNodes();
-        this.buildGraph();
-        setTimeout(() => {
-            if (this.activeNode) {
-                this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        nodeId: this.activeNode.id,
-                        first: true
-                    }
-                }));
-                return;
+        this.buildGraph().then(() => {
+            setTimeout(() => {
+                this.snapToRoot();
+            }, 150);
+        });
+    }
+    snapToRoot() {
+        if (!this.graph?.children)
+            return;
+        const rootNode = this.graph.children.find((n) => n.id === 'root');
+        if (rootNode && rootNode.x !== undefined && rootNode.y !== undefined) {
+            const viewBox = this.svgItem?.viewBox?.baseVal;
+            if (viewBox) {
+                const width = rootNode.width || 0;
+                const height = rootNode.height || 0;
+                this.snapViewBox(rootNode.x - (viewBox.width / 2) + (width / 2), rootNode.y - (viewBox.height / 2) + (height / 2));
             }
-            this.navigateToRoot();
-        }, 150);
+            this.activeNode = rootNode;
+        }
+    }
+    centerOnRoot() {
+        if (!this.graph?.children)
+            return;
+        const rootNode = this.graph.children.find((n) => n.id === 'root');
+        if (rootNode && rootNode.x !== undefined && rootNode.y !== undefined) {
+            const viewBox = this.svgItem?.viewBox?.baseVal;
+            if (viewBox) {
+                const width = rootNode.width || 0;
+                const height = rootNode.height || 0;
+                this.animateViewBox(rootNode.x - (viewBox.width / 2) + (width / 2), rootNode.y - (viewBox.height / 2) + (height / 2), 200);
+            }
+            this.activeNode = rootNode;
+        }
     }
     navigateToRoot() {
         this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
             bubbles: true,
             composed: true,
             detail: {
-                nodeHashId: 'root',
+                nodeId: 'root',
                 first: true
             }
         }));
     }
     animateViewBox(targetX, targetY, duration) {
+        const animationId = ++this.currentAnimationId;
         const viewBox = this.svgItem.viewBox.baseVal;
         const startX = viewBox.x;
         const startY = viewBox.y;
@@ -554,30 +727,83 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                 ? 4 * t * t * t
                 : 1 - Math.pow(-2 * t + 2, 3) / 2;
         };
+        const self = this;
         function animate(time) {
+            if (animationId !== self.currentAnimationId) {
+                return;
+            }
             const elapsedTime = time - startTime;
             const t = Math.min(elapsedTime / duration, 1);
             const easedT = easeInOutCubic(t);
             viewBox.x = startX + (targetX - startX) * easedT;
             viewBox.y = startY + (targetY - startY) * easedT;
+            self.zoomX = viewBox.x;
+            self.zoomY = viewBox.y;
             if (t < 1) {
                 requestAnimationFrame(animate);
             }
         }
         requestAnimationFrame(animate);
     }
-    moveToNode(node, first = false) {
-        if (this.svgItem) {
+    snapViewBox(targetX, targetY) {
+        this.currentAnimationId++;
+        const viewBox = this.svgItem.viewBox.baseVal;
+        viewBox.x = targetX;
+        viewBox.y = targetY;
+        this.zoomX = targetX;
+        this.zoomY = targetY;
+        this.zoomW = viewBox.width;
+        this.zoomH = viewBox.height;
+    }
+    getNodeScreenOffset(nodeId) {
+        const viewBox = this.svgItem?.viewBox?.baseVal;
+        if (!viewBox)
+            return null;
+        const node = this.graph?.children?.find((n) => n.id === nodeId);
+        if (!node || node.x === undefined || node.y === undefined)
+            return null;
+        const nodeWidth = node.width || 0;
+        const nodeHeight = node.height || 0;
+        const nodeCenterX = node.x + nodeWidth / 2;
+        const nodeCenterY = node.y + nodeHeight / 2;
+        const viewportCenterX = viewBox.x + viewBox.width / 2;
+        const viewportCenterY = viewBox.y + viewBox.height / 2;
+        return {
+            x: nodeCenterX - viewportCenterX,
+            y: nodeCenterY - viewportCenterY
+        };
+    }
+    restoreNodeScreenPosition(nodeId, targetOffset) {
+        const viewBox = this.svgItem?.viewBox?.baseVal;
+        if (!viewBox)
+            return;
+        const node = this.graph?.children?.find((n) => n.id === nodeId);
+        if (!node || node.x === undefined || node.y === undefined)
+            return;
+        const nodeWidth = node.width || 0;
+        const nodeHeight = node.height || 0;
+        const nodeCenterX = node.x + nodeWidth / 2;
+        const nodeCenterY = node.y + nodeHeight / 2;
+        const newViewportCenterX = nodeCenterX - targetOffset.x;
+        const newViewportCenterY = nodeCenterY - targetOffset.y;
+        const newViewBoxX = newViewportCenterX - viewBox.width / 2;
+        const newViewBoxY = newViewportCenterY - viewBox.height / 2;
+        this.snapViewBox(newViewBoxX, newViewBoxY);
+    }
+    moveToNode(node, _first = false, snap = false) {
+        if (this.svgItem && this.graph?.children) {
             const viewBox = this.svgItem.viewBox.baseVal;
-            const found = this.graphResponse.nodes.find((n) => n.id === node.id);
-            if (found != undefined) {
-                if (found.x && found.y && !found.filtered) {
-                    if (!first) {
-                        this.animateViewBox(found.x - (viewBox.width / 2) + (found.width / 2), found.y - (viewBox.height / 2) + (found.height / 2), 200);
-                    }
-                    else {
-                        this.animateViewBox(found.x - 100, found.y - 100, 200);
-                    }
+            const found = this.graph.children.find((n) => n.id === node.id);
+            if (found && found.x !== undefined && found.y !== undefined && !found.filtered) {
+                const width = found.width || 0;
+                const height = found.height || 0;
+                const targetX = found.x - (viewBox.width / 2) + (width / 2);
+                const targetY = found.y - (viewBox.height / 2) + (height / 2);
+                if (snap) {
+                    this.snapViewBox(targetX, targetY);
+                }
+                else {
+                    this.animateViewBox(targetX, targetY, 200);
                 }
             }
         }
@@ -603,93 +829,39 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                 </div>`;
         }
         const box = this.buildBaseViewBox();
-        const base = box.base;
-        let nodeLimitExceeded = html ``;
-        if (this.nodeLimitExceeded) {
-            nodeLimitExceeded = html `<div class="node-limit-exceeded">
-                <sl-icon name="exclamation-triangle" style="vertical-align: middle"></sl-icon> The number of objects in this graph 
-                exceeds the limit of ${this.nodeLimit}. It's been limited during preview
-            </div>`;
+        const base = box.base + 300;
+        // Calculate viewBox dimensions based on container aspect ratio
+        let defaultW = base;
+        let defaultH = base;
+        if (this.containerWidth > 0 && this.containerHeight > 0) {
+            const aspectRatio = this.containerWidth / this.containerHeight;
+            if (aspectRatio > 1) {
+                defaultH = base;
+                defaultW = base * aspectRatio;
+            }
+            else {
+                defaultW = base;
+                defaultH = base / aspectRatio;
+            }
         }
+        // Use stored zoom values if they exist, otherwise use calculated defaults
+        let viewBoxX = this.zoomX !== null ? this.zoomX : -150;
+        let viewBoxY = this.zoomY !== null ? this.zoomY : -150;
+        let viewBoxW = this.zoomW !== null ? this.zoomW : defaultW;
+        let viewBoxH = this.zoomH !== null ? this.zoomH : defaultH;
         return svg `
         ${this.equalizer}
-        ${nodeLimitExceeded}
-        <svg preserveAspectRatio="xMidYMid meet" style="width: 100%; height: calc(100vh - 170px);" viewBox="0 0 ${base} ${base}"
+        <svg preserveAspectRatio="xMidYMid meet"
+                             style="width: 100%; height: ${this.embeddedMode ? '100%' : 'calc(100vh - 170px)'}; cursor: ${this.isDragging ? 'grabbing' : 'grab'};"
+                             viewBox="${viewBoxX} ${viewBoxY} ${viewBoxW} ${viewBoxH}"
                              @wheel="${this.onWheel}"
                              @mousedown="${this.mouseDown}"
                              @mouseup="${this.mouseUp}"
                              @mousemove="${this.mouseMove}">
-                            <defs>
-                                <marker
-                                    id="leaf"
-                                    viewBox="0 0 6 12"
-                                    refX="3"
-                                    refY="3"
-                                    markerWidth="6"
-                                    markerHeight="12"
-                                    fill="var(--primary-color)"
-                                    orient="auto">
-                                    <rect x="0" y="0" width="3" height="6"/>
-                                </marker>
-                                 <marker
-                                    id="leaf-poly"
-                                    viewBox="0 0 6 12"
-                                    refX="3"
-                                    refY="3"
-                                    markerWidth="6"
-                                    markerHeight="12"
-                                    fill="var(--warn-color)"
-                                    orient="auto">
-                                    <rect x="0" y="0" width="3" height="6"/>
-                                </marker>
-                                 <marker
-                                    id="leaf-ref"
-                                    viewBox="0 0 6 12"
-                                    refX="3"
-                                    refY="3"
-                                    markerWidth="6"
-                                    markerHeight="12"
-                                    fill="var(--terminal-text)"
-                                    orient="auto">
-                                    <rect x="0" y="0" width="3" height="6"/>
-                                </marker>
-                                <marker
-                                        id="arrow"
-                                        viewBox="0 0 12 12"
-                                        refX="9"
-                                        refY="5"
-                                        markerWidth="5"
-                                        markerHeight="5"
-                                        fill="var(--secondary-color)"
-                                        orient="auto-start-reverse">
-                                    <path d="M 0 0 L 10 5 L 0 10 z"/>
-                                </marker>
-                                <marker
-                                        id="arrow-ref"
-                                        viewBox="0 0 12 12"
-                                        refX="9"
-                                        refY="5"
-                                        markerWidth="5"
-                                        markerHeight="5"
-                                        fill="var(--terminal-text)"
-                                        orient="auto-start-reverse">
-                                    <path d="M 0 0 L 10 5 L 0 10 z"/>
-                                </marker>
-                                <marker
-                                        id="arrow-poly"
-                                        viewBox="0 0 12 12"
-                                        refX="9"
-                                        refY="5"
-                                        markerWidth="5"
-                                        markerHeight="5"
-                                        fill="var(--terminal-yellow)"
-                                        orient="auto-start-reverse">
-                                    <path d="M 0 0 L 10 5 L 0 10 z" class="glow"/>
-                                </marker>
-                            </defs>
+                            ${renderSvgMarkers()}
                             <g id="#svgGroup">
-                                ${this.nodeComponents.map((nc) => nc.render())}
-                                ${this.edgeComponents.map((ec) => ec.render())}
+                                ${repeat(this.edgeComponents, (ec) => ec.edge.id, (ec) => ec.render())}
+                                ${repeat(this.nodeComponents, (nc) => nc.id, (nc) => nc.render())}
                             </g>
                         </svg>
         `;
@@ -714,6 +886,21 @@ __decorate([
 __decorate([
     property()
 ], ExplorerComponent.prototype, "renderEqualizer", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExplorerComponent.prototype, "embeddedMode", void 0);
+__decorate([
+    property()
+], ExplorerComponent.prototype, "graphResponse", void 0);
+__decorate([
+    property()
+], ExplorerComponent.prototype, "povMode", void 0);
+__decorate([
+    property()
+], ExplorerComponent.prototype, "povNodeId", void 0);
+__decorate([
+    property()
+], ExplorerComponent.prototype, "povNode", void 0);
 __decorate([
     state()
 ], ExplorerComponent.prototype, "models", void 0);