@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/controllers/node-clicker-controller.js

@@ -1,126 +1,325 @@
 import { RolodexFilesBag, RolodexStateBag } from "../components/the-doctor/the-doctor.js";
-import { RolodexTreeNodeClicked } from "../events/doctor.js";
+import { RolodexTreeNodeClicked, ExplorerPovModeClicked } from "../events/doctor.js";
 import { ToastType } from "../model/toast.js";
-import { NodeType } from "../model/node_type.js";
 import { ModelService } from "../services/model-service.js";
+import { normalizeRolodexPath } from "../utils/path-utils.js";
+import { getMonacoLanguageFromExtension } from "../utils/language-utils.js";
+import { collectAncestors, resolveNodeIdFromHash } from "../utils/node-helpers.js";
+function normalizeBracketNotation(path) {
+    return path.replace(/\['([^']+)'\]/g, '/$1');
+}
 export class NodeClickerController extends EventTarget {
-    constructor(doc) {
+    constructor(deps) {
         super();
-        this.doc = doc;
+        this.showAncestorsInPov = true;
+        this.deps = deps;
+        this.povModeListener = ((evt) => {
+            this.handlePovModeRequest(evt);
+        });
+        this.deps.addEventListener(ExplorerPovModeClicked, this.povModeListener);
+        this.setupEqualizerListener();
     }
-    rolodexTreeNodeClicked(evt) {
-        const fileBag = this.doc.rolodexFilesBag?.get(RolodexFilesBag);
-        const handleRolodexResponse = (result) => {
-            this.doc.rolodexActivePath = evt.detail.path;
-            this.doc.rolodexActiveHash = evt.detail.nodeHashId;
-            this.doc.editor.setValue(result.instance, true);
-            this.doc.editor.setCurrentPath(this.doc.rolodexActivePath);
-            this.doc.modelController.fetchRefMap(this.doc.rolodexActivePath);
-            const probs = this.doc.rolodexProblemMap.get(this.doc.rolodexActivePath);
-            if (probs) {
-                this.doc.editor.setMarkers(probs);
+    setupEqualizerListener() {
+        const checkEqualizer = () => {
+            if (this.deps.explorer?.equalizer) {
+                this.equalizerListener = ((evt) => {
+                    this.handleAncestorToggle(evt.detail.showAncestors);
+                });
+                this.deps.explorer.equalizer.addEventListener('reprocessPov', this.equalizerListener);
             }
-            // set the editor file type
-            let language = 'yaml';
-            const ext = evt.detail?.path?.split('.').pop();
-            if (ext) {
-                switch (ext) {
-                    case NodeType.JSON:
-                        language = NodeType.JSON;
-                        break;
-                    case NodeType.GO:
-                        language = NodeType.GO;
-                        break;
-                    case NodeType.PY:
-                        language = 'python';
-                        break;
-                    case NodeType.JS:
-                        language = 'javascript';
-                        break;
-                    case NodeType.TS:
-                        language = 'typescript';
-                        break;
-                    case NodeType.PHP:
-                        language = NodeType.PHP;
-                        break;
-                    case NodeType.XML:
-                        language = NodeType.XML;
-                        break;
-                    case NodeType.JAVA:
-                        language = NodeType.JAVA;
-                        break;
-                    case NodeType.RB:
-                        language = 'ruby';
-                        break;
-                    case NodeType.RS:
-                        language = 'rust';
-                        break;
-                    case NodeType.C:
-                        language = NodeType.C;
-                        break;
-                    case NodeType.CPP:
-                        language = NodeType.CPP;
-                        break;
-                    case NodeType.CS:
-                        language = 'csharp';
-                        break;
-                    case NodeType.MD:
-                        language = 'markdown';
-                        break;
-                }
+            else {
+                this.rafId = requestAnimationFrame(checkEqualizer);
+            }
+        };
+        this.rafId = requestAnimationFrame(checkEqualizer);
+    }
+    destroy() {
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+        }
+        if (this.povModeListener) {
+            this.deps.removeEventListener?.(ExplorerPovModeClicked, this.povModeListener);
+        }
+        if (this.equalizerListener && this.deps.explorer?.equalizer) {
+            this.deps.explorer.equalizer.removeEventListener('reprocessPov', this.equalizerListener);
+        }
+    }
+    getActiveNodeMapAndEdges(nodeId) {
+        if (nodeId && this.deps.modelController.changeReport &&
+            this.deps.modelController.changeNodeMap.has(nodeId)) {
+            return {
+                nodeMap: this.deps.modelController.changeNodeMap,
+                edges: this.deps.modelController.changeReport.edges || []
+            };
+        }
+        return {
+            nodeMap: this.deps.modelController.nodeMap,
+            edges: this.deps.modelController.edges
+        };
+    }
+    getNodeFromActiveContext(nodeId, hasChanges) {
+        if (hasChanges && this.deps.modelController.changeNodeMap.has(nodeId)) {
+            return this.deps.modelController.changeNodeMap.get(nodeId);
+        }
+        return this.deps.modelController.nodeMap.get(nodeId);
+    }
+    setActiveNode(node, updateEqualizer = true) {
+        this.deps.modelController.activeNode = node;
+        this.deps.explorer.activeNode = node;
+        if (updateEqualizer) {
+            this.deps.explorer.equalizer.activeNode = node;
+        }
+    }
+    revealLineInEditor(line, column = 0) {
+        this.deps.editor.editor?.setPosition({ lineNumber: line, column });
+        this.deps.editor.editor?.revealLineInCenter(line);
+    }
+    applyProblemsForPath(path) {
+        const lookupPath = normalizeRolodexPath(path);
+        let probs = this.deps.rolodexProblemMap.get(lookupPath);
+        if (!probs && path === this.deps.rolodexRootPath) {
+            probs = this.deps.rolodexProblemMap.get("root");
+        }
+        if (probs) {
+            this.deps.editor.setMarkers(probs);
+        }
+        else {
+            this.deps.editor.clearAllMarkers();
+        }
+    }
+    navigateToRolodexFile(filePath, line = 1, column = 1, nodeHashId, resetRefMapBag = false, showBreadcrumb = false) {
+        let fileBag = this.deps.rolodexFilesBag?.get(RolodexFilesBag);
+        const cachedNode = fileBag?.files[filePath];
+        if (resetRefMapBag) {
+            this.deps.referenceMapBag?.reset();
+        }
+        if (cachedNode?.instance) {
+            if (showBreadcrumb)
+                this.deps.editor.showBreadcrumb = true;
+            this.applyRolodexNavigation(cachedNode, filePath, line, column, nodeHashId);
+        }
+        else {
+            ModelService.queryRolodex(undefined, filePath).then((result) => {
+                if (showBreadcrumb)
+                    this.deps.editor.showBreadcrumb = true;
+                this.cacheRolodexFile(filePath, result.rolodexRoot);
+                this.applyRolodexNavigation(result.rolodexRoot, filePath, line, column, nodeHashId);
+            }).catch(() => {
+                this.deps.sendToast({
+                    id: crypto.randomUUID(),
+                    type: ToastType.ERROR,
+                    title: 'Navigation failed',
+                    body: `Could not load file: ${filePath}`
+                });
+            });
+        }
+    }
+    cacheRolodexFile(filePath, node) {
+        let fileBag = this.deps.rolodexFilesBag?.get(RolodexFilesBag);
+        if (fileBag && !fileBag.files[filePath]) {
+            fileBag.files[filePath] = node;
+            this.deps.rolodexFilesBag?.set(RolodexFilesBag, fileBag);
+        }
+        else if (!fileBag) {
+            const rf = { files: { [filePath]: node } };
+            this.deps.rolodexFilesBag?.set(RolodexFilesBag, rf);
+        }
+    }
+    expandRolodexAncestorsForPath(filePath) {
+        const nodeMap = this.deps.rolodexTree.nodeMap;
+        if (!nodeMap)
+            return;
+        let fileNode;
+        for (const node of nodeMap.values()) {
+            if (node.path === filePath || node.nodePath === filePath) {
+                fileNode = node;
+                break;
             }
-            const existingState = this.doc.rolodexStateBag?.get(RolodexStateBag);
-            if (existingState) {
-                existingState.activePath = evt.detail.path;
-                existingState.activeHash = evt.detail.nodeHashId;
-                existingState.activeLanguage = language;
-                existingState.activeNode = result;
-                existingState.rootPath = this.doc.rolodexRootPath;
-                this.doc.rolodexStateBag?.set(RolodexStateBag, existingState);
+            if (filePath && (node.path?.endsWith(filePath) || node.nodePath?.endsWith(filePath))) {
+                fileNode = node;
+                break;
             }
-            else {
-                const existingState = {
-                    activePath: evt.detail.path,
-                    activeHash: evt.detail.nodeHashId,
-                    activeLanguage: language,
-                    activeNode: result,
-                    rootHash: this.doc.rolodexRootHash,
-                    rootPath: this.doc.rolodexRootPath
+        }
+        if (!fileNode)
+            return;
+        const ancestors = collectAncestors(fileNode, nodeMap);
+        for (const ancestor of ancestors) {
+            ancestor.treeExpanded = true;
+            this.deps.rolodexTree.childrenRendered.add(ancestor.id);
+            this.deps.rolodexTree.expandedNodes.set(ancestor.id, ancestor);
+        }
+        this.deps.rolodexTree.requestUpdate();
+        requestAnimationFrame(() => {
+            this.deps.rolodexTree.openNodeByPath(filePath);
+        });
+    }
+    applyRolodexNavigation(node, filePath, line, column, nodeHashId) {
+        if (!node.instance)
+            return;
+        this.deps.rolodexActivePath = filePath;
+        this.deps.editor.setValue(node.instance, true);
+        this.deps.editor.setCurrentPath(filePath);
+        const language = getMonacoLanguageFromExtension(filePath);
+        this.deps.editor.switchLanguage(language);
+        this.updateRolodexState(filePath, node, language, nodeHashId);
+        this.deps.editor.editor?.setPosition({ lineNumber: line, column });
+        this.deps.editor.editor?.revealLineInCenter(line);
+        this.expandRolodexAncestorsForPath(filePath);
+        this.deps.modelController.fetchRefMap(filePath);
+        this.applyProblemsForPath(filePath);
+    }
+    updateRolodexState(filePath, node, language, nodeHashId) {
+        const existingState = this.deps.rolodexStateBag?.get(RolodexStateBag);
+        const rootId = existingState?.rootId
+            ?? (this.deps.rolodexRootPath === filePath ? node.id : undefined);
+        const stateUpdate = {
+            activePath: filePath,
+            activeId: node.id,
+            activeHash: nodeHashId || node.idHash || '',
+            activeLanguage: language,
+            activeNode: node,
+            rootId: rootId,
+            rootHash: this.deps.rolodexRootHash || '',
+            rootPath: this.deps.rolodexRootPath || ''
+        };
+        if (existingState) {
+            Object.assign(existingState, stateUpdate);
+            this.deps.rolodexStateBag?.set(RolodexStateBag, existingState);
+        }
+        else {
+            this.deps.rolodexStateBag?.set(RolodexStateBag, stateUpdate);
+        }
+    }
+    handleAncestorToggle(showAncestors) {
+        this.showAncestorsInPov = showAncestors;
+        if (this.deps.explorer?.povFocusNodeId) {
+            const evt = new CustomEvent(ExplorerPovModeClicked, {
+                detail: {
+                    nodeId: this.deps.explorer.povFocusNodeId
+                }
+            });
+            this.reprocessPovMode(evt.detail.nodeId, showAncestors);
+        }
+    }
+    collectParentChain(targetNode, nodeMap) {
+        return [targetNode, ...collectAncestors(targetNode, nodeMap)];
+    }
+    reprocessPovMode(nodeId, showAncestors) {
+        const { nodeMap, edges } = this.getActiveNodeMapAndEdges(nodeId);
+        const nodeArray = Array.from(nodeMap.values());
+        if (this.deps.explorer?.equalizer?.equalizerWorker) {
+            this.deps.explorer.equalizer.equalizerWorker.postMessage({
+                povRequest: true,
+                povNodeId: nodeId,
+                nodeMap: nodeArray,
+                edges: edges,
+                includeAncestors: showAncestors
+            });
+        }
+    }
+    handlePovModeRequest(evt, showAncestors = true) {
+        this.deps.genericDrawer.close();
+        if (this.deps.selectedEditorTab !== 'explorer') {
+            this.deps.editorPanel?.showTab('explorer');
+            this.deps.selectedEditorTab = 'explorer';
+        }
+        this.showAncestorsInPov = showAncestors;
+        if (this.deps.explorer) {
+            this.deps.explorer.povFocusNodeId = evt.detail.nodeId;
+            const nodeComponent = this.deps.explorer.nodeComponents.find(nc => nc.id === evt.detail.nodeId);
+            if (nodeComponent && this.deps.explorer.svgItem) {
+                const svg = this.deps.explorer.svgItem;
+                const viewBox = svg.viewBox.baseVal;
+                this.deps.explorer.povPreviousViewBox = {
+                    x: viewBox.x,
+                    y: viewBox.y,
+                    width: viewBox.width,
+                    height: viewBox.height
                 };
-                this.doc.rolodexStateBag?.set(RolodexStateBag, existingState);
             }
-            this.doc.editor.switchLanguage(language);
-            let line = 1;
-            let col = 0;
-            if (evt.detail.line) {
-                line = evt.detail.line;
-            }
-            if (evt.detail.column) {
-                col = evt.detail.column;
+        }
+        const { nodeMap, edges } = this.getActiveNodeMapAndEdges(evt.detail.nodeId);
+        const nodeArray = Array.from(nodeMap.values());
+        if (this.deps.explorer?.equalizer?.equalizerWorker) {
+            const povNode = nodeMap.get(evt.detail.nodeId);
+            if (povNode) {
+                this.deps.explorer.enterPovMode(evt.detail.nodeId, povNode);
             }
-            this.doc.editor.editor?.setPosition({ lineNumber: line, column: col });
-            this.doc.editor.editor?.revealLineInCenter(line, col);
-            //this.lintSpec(result.instance);
-            if (evt.detail.path) {
-                this.doc.rolodexTree.openNodeByPath(evt.detail.path);
+            this.deps.explorer.equalizer.equalizerWorker.postMessage({
+                povRequest: true,
+                povNodeId: evt.detail.nodeId,
+                nodeMap: nodeArray,
+                edges: edges,
+                includeAncestors: this.showAncestorsInPov
+            });
+        }
+    }
+    rolodexTreeNodeClicked(evt) {
+        const fileBag = this.deps.rolodexFilesBag?.get(RolodexFilesBag);
+        const handleRolodexResponse = (result) => {
+            this.deps.rolodexActivePath = evt.detail.path;
+            if (result.instance) {
+                this.deps.editor.setValue(result.instance, true);
+                this.deps.editor.setCurrentPath(this.deps.rolodexActivePath);
+                this.deps.modelController.fetchRefMap(this.deps.rolodexActivePath);
+                this.applyProblemsForPath(this.deps.rolodexActivePath);
+                const language = getMonacoLanguageFromExtension(evt.detail.path || '');
+                const existingState = this.deps.rolodexStateBag?.get(RolodexStateBag);
+                if (existingState) {
+                    existingState.activePath = evt.detail.path;
+                    existingState.activeId = evt.detail.nodeId || result.id;
+                    existingState.activeHash = evt.detail.nodeHashId;
+                    existingState.activeLanguage = language;
+                    existingState.activeNode = result;
+                    this.deps.rolodexStateBag?.set(RolodexStateBag, existingState);
+                }
+                else {
+                    const rootId = this.deps.rolodexRootPath === evt.detail.path
+                        ? (evt.detail.nodeId || result.id)
+                        : undefined;
+                    const newState = {
+                        activePath: evt.detail.path,
+                        activeId: evt.detail.nodeId || result.id,
+                        activeHash: evt.detail.nodeHashId,
+                        activeLanguage: language,
+                        activeNode: result,
+                        rootId: rootId,
+                        rootHash: this.deps.rolodexRootHash || '',
+                        rootPath: this.deps.rolodexRootPath || ''
+                    };
+                    this.deps.rolodexStateBag?.set(RolodexStateBag, newState);
+                }
+                this.deps.editor.switchLanguage(language);
+                let line = 1;
+                let col = 0;
+                if (evt.detail.line) {
+                    line = evt.detail.line;
+                }
+                if (evt.detail.column) {
+                    col = evt.detail.column;
+                }
+                this.deps.editor.editor?.setPosition({ lineNumber: line, column: col });
+                this.deps.editor.editor?.revealLineInCenter(line, col);
+                if (evt.detail.path) {
+                    this.expandRolodexAncestorsForPath(evt.detail.path);
+                }
+                return language;
             }
-            return language;
         };
-        ModelService.queryRolodex(evt.detail.nodeHashId, evt.detail.path).then((result) => {
-            this.doc.editor.showBreadcrumb = true;
-            // clear all references
-            this.doc.referenceMapBag?.reset();
+        ModelService.queryRolodex(undefined, evt.detail.path).then((result) => {
+            this.deps.editor.showBreadcrumb = true;
+            this.deps.referenceMapBag?.reset();
             handleRolodexResponse(result.rolodexRoot);
             if (evt.detail.path) {
                 if (fileBag && !fileBag.files[evt.detail.path]) {
                     fileBag.files[evt.detail.path] = result.rolodexRoot;
-                    this.doc.rolodexFilesBag?.set(RolodexFilesBag, fileBag);
+                    this.deps.rolodexFilesBag?.set(RolodexFilesBag, fileBag);
                 }
                 if (!fileBag) {
                     const rf = {
                         files: { [evt.detail.path]: result.rolodexRoot }
                     };
-                    this.doc.rolodexFilesBag?.set(RolodexFilesBag, rf);
+                    this.deps.rolodexFilesBag?.set(RolodexFilesBag, rf);
                 }
             }
         });
@@ -128,155 +327,242 @@ export class NodeClickerController extends EventTarget {
     explorerNodeClicked(evt, replaceRenderedNode = true) {
         let found = false;
         let foundRenderedNode;
-        this.doc.explorer.nodeComponents.forEach((node) => {
-            if (node.id === evt.detail.nodeId) {
-                let renderedNode;
-                if (replaceRenderedNode) {
-                    renderedNode = this.doc.renderedNodeMap.get(node.id);
-                    if (renderedNode && !this.doc.firstRun) {
-                        this.doc.renderedNode.node = renderedNode;
-                    }
-                }
-                this.doc.selectedNodeHashId = node.body.node.idHash;
-                node.body.active = true;
-                this.doc.activeNode = node.body.node;
-                this.doc.explorer.activeNode = node.body.node;
-                found = true;
-                if (replaceRenderedNode) {
-                    foundRenderedNode = renderedNode;
-                }
-                if (!evt.detail.noState) {
-                    this.doc.addClickTrack(node.body.node);
+        if (this.deps.explorer.previousActiveNodeId) {
+            const prevNode = this.deps.explorer.nodeComponents.find(nc => nc.id === this.deps.explorer.previousActiveNodeId);
+            if (prevNode) {
+                prevNode.body.active = false;
+            }
+        }
+        const newNode = this.deps.explorer.nodeComponents.find(nc => nc.id === evt.detail.nodeId);
+        if (newNode) {
+            let renderedNode;
+            if (replaceRenderedNode) {
+                renderedNode = this.deps.modelController.nodeMap.get(newNode.id);
+                if (renderedNode) {
+                    this.deps.modelController.renderedNodeComponent.node = renderedNode;
                 }
             }
-            else {
-                node.body.active = false;
+            newNode.body.active = true;
+            this.deps.modelController.activeNode = newNode.body.node;
+            this.deps.explorer.activeNode = newNode.body.node;
+            found = true;
+            if (replaceRenderedNode) {
+                foundRenderedNode = renderedNode;
             }
-        });
+            if (!evt.detail.noState) {
+                this.deps.addClickTrack(newNode.body.node);
+            }
+        }
+        this.deps.explorer.previousActiveNodeId = evt.detail.nodeId || null;
         if (!found) {
-            // might be filtered, check the filtered nodes
-            const node = this.doc.nodeIdMap.get(evt.detail.nodeId);
+            const node = this.deps.modelController.nodeMap.get(evt.detail.nodeId);
             if (node) {
-                this.doc.selectedNodeHashId = node.idHash;
-                this.doc.activeNode = node;
-                this.doc.explorer.activeNode = node;
-                this.doc.explorer.equalizer.activeNode = node;
+                this.deps.modelController.activeNode = node;
+                this.deps.explorer.activeNode = node;
+                this.deps.explorer.equalizer.activeNode = node;
             }
         }
         if (foundRenderedNode) {
-            // when jumping back to the spec view, we need to set the line
-            this.doc.pendingLine = foundRenderedNode.keyLine;
+            this.deps.pendingLine = foundRenderedNode.keyLine;
         }
-        this.doc.modelTree.explorerClicked(evt.detail.nodeId);
-        if (!this.doc.firstRun) {
-            this.doc.viewerPanel.click();
+        this.deps.modelTree.explorerClicked(evt.detail.nodeId, false);
+        if (this.deps.firstRun) {
+            this.deps.firstRun = false;
         }
-        this.doc.explorer.requestUpdate();
+        this.deps.sidebarPanel?.showTab('viewer');
+        this.deps.explorer.requestUpdate();
     }
     modelTreeNodeClicked(evt) {
-        let node = this.doc.nodeIdMap.get(evt.detail.nodeId);
+        if (!evt.detail.nodeId && evt.detail.nodeHashId) {
+            const resolvedId = resolveNodeIdFromHash(evt.detail.nodeHashId, this.deps.modelController.nodeMap);
+            if (resolvedId) {
+                evt.detail.nodeId = resolvedId;
+            }
+        }
+        if (!evt.detail.nodeId) {
+            return;
+        }
+        const hasChanges = !!(evt.detail.changes && evt.detail.changes.length > 0);
+        const node = this.getNodeFromActiveContext(evt.detail.nodeId, hasChanges);
         if (!node) {
-            node = this.doc.nodeIdHashMap.get(evt.detail.nodeId);
-        }
-        if (node) {
-            if (node.origin && node.origin != this.doc.rolodexActivePath && (node.origin != '/root.yaml' && node.origin != 'root.yaml')) {
-                // extract the rolodex id using the path
-                let hashId = '';
-                let path = '';
-                const fb = this.doc.rolodexFilesBag?.get(RolodexFilesBag);
-                if (fb) {
-                    if (node.origin && fb.files[node.origin]) {
-                        hashId = fb.files[node.origin].idHash;
-                        path = node.origin;
+            this.deps.modelController.renderedNodeComponent.node = null;
+            return;
+        }
+        if (this.deps.bundleController?.isBundled) {
+            const mapping = node.nodePath
+                ? this.deps.bundleController.findOriginalLocation(node.nodePath)
+                : null;
+            if (mapping) {
+                this.navigateToRolodexFile(mapping.originalFilePath, mapping.originalLine, mapping.originalColumn);
+                if (this.deps.modelController.renderedNodeComponent) {
+                    this.deps.modelController.renderedNodeComponent.node = node;
+                }
+                if (!evt.detail.noState) {
+                    this.deps.addClickTrack(node);
+                }
+                if (this.deps.explorerVisible && this.deps.explorer) {
+                    this.deps.explorer.revealPathToNode(node.id);
+                    this.setActiveNode(node);
+                    this.deps.explorer.moveToNode(node, evt.detail.first);
+                }
+                this.explorerNodeClicked(evt, false);
+                this.deps.sidebarPanel?.showTab('viewer');
+                return;
+            }
+            else {
+                let targetLine = node.keyLine;
+                let fallbackUsed = 'keyLine';
+                if (node.nodePath) {
+                    let originalNode = this.deps.modelController.originalNodePathIndex?.get(node.nodePath);
+                    if (!originalNode) {
+                        const normalizedPath = normalizeBracketNotation(node.nodePath);
+                        originalNode = this.deps.modelController.originalNodePathIndex?.get(normalizedPath);
+                    }
+                    if (originalNode) {
+                        targetLine = originalNode.keyLine;
+                        fallbackUsed = 'originalGraph-nodePath';
                     }
                 }
-                this.explorerNodeClicked(evt, true);
-                // we need to fire a rolodex tree node change event.
-                this.rolodexTreeNodeClicked(new CustomEvent(RolodexTreeNodeClicked, {
-                    detail: {
-                        nodeHashId: hashId,
-                        path: path
+                if (fallbackUsed === 'keyLine' && node.id) {
+                    const originalNode = this.deps.modelController.originalNodeMap?.get(node.id);
+                    if (originalNode) {
+                        targetLine = originalNode.keyLine;
+                        fallbackUsed = 'originalGraph-id';
                     }
-                }));
+                }
+                this.navigateToRolodexFile(this.deps.rolodexRootPath, targetLine, 0);
+                if (this.deps.modelController.renderedNodeComponent) {
+                    this.deps.modelController.renderedNodeComponent.node = node;
+                }
+                if (!evt.detail.noState) {
+                    this.deps.addClickTrack(node);
+                }
+                if (this.deps.explorerVisible && this.deps.explorer) {
+                    this.deps.explorer.revealPathToNode(node.id);
+                    this.setActiveNode(node);
+                    this.deps.explorer.moveToNode(node, evt.detail.first);
+                }
+                this.explorerNodeClicked(evt, false);
+                this.deps.sidebarPanel?.showTab('viewer');
                 return;
             }
-            // don't jump to the root in the editor if the root is selected
-            if (node.idHash !== 'root') {
-                this.doc.editor.editor?.setPosition({ lineNumber: node.keyLine, column: 0 });
-                this.doc.editor.editor?.revealLineInCenter(node.keyLine);
-            }
-            if (this.doc.explorerVisible) {
-                this.doc.explorer.moveToNode(node, evt.detail.first);
-            }
-            this.doc.activeNode = node;
-            // add changes to active node.
-            if (evt.detail.changes) {
-                node.timeline = evt.detail.changes;
-            }
-            this.doc.explorer.activeNode = node;
-            this.doc.explorer.equalizer.activeNode = node;
-            const renderedNode = structuredClone(this.doc.renderedNodeMap.get(node.id));
-            if (renderedNode) {
-                if (evt.detail.changes) {
-                    renderedNode.timeline = evt.detail.changes;
+        }
+        if (!hasChanges) {
+            this.deps.modelController.renderedNodeComponent.renderProblems = evt.detail.nodeId != 'root';
+        }
+        if (this.deps.explorerVisible && this.deps.explorer) {
+            const isVisible = this.deps.explorer.isNodeCurrentlyVisible(node.id);
+            if (!isVisible) {
+                this.deps.explorer.revealPathToNode(node.id);
+                if (node.id !== 'root') {
+                    this.revealLineInEditor(node.keyLine);
                 }
-                this.doc.renderedNode.node = renderedNode;
-            }
-            else {
-                alert('no id found');
-            }
-            if (!evt.detail.noState) {
-                this.doc.addClickTrack(node);
-                evt.detail.noState = true;
-            }
-            this.explorerNodeClicked(evt, true);
-            if (this.doc.firstRun) {
-                this.doc.firstRun = false;
-            }
-            else {
-                this.doc.viewerPanel.click();
+                this.deps.modelTree?.explorerClicked(node.id, false);
+                this.setActiveNode(node);
+                this.deps.modelController.renderedNodeComponent.node = node;
+                if (!evt.detail.noState) {
+                    this.deps.addClickTrack(node);
+                }
+                return;
             }
         }
-        else {
-            this.doc.sendToast({
-                id: crypto.randomUUID(),
-                title: 'Unable to load change model',
-                type: ToastType.WARNING,
-                body: 'There is no-longer a model with the path `' + evt.detail.nodeId + '` in the document',
-            });
-            console.error('cannot navigate to node, path not found', evt.detail.nodeId);
+        if (node.id !== 'root') {
+            this.revealLineInEditor(node.keyLine);
+        }
+        if (this.deps.explorerVisible) {
+            this.deps.explorer.moveToNode(node, evt.detail.first);
+        }
+        this.setActiveNode(node);
+        const renderedNode = this.getNodeFromActiveContext(evt.detail.nodeId, hasChanges);
+        if (renderedNode) {
+            this.deps.modelController.renderedNodeComponent.node = renderedNode;
+        }
+        if (!evt.detail.noState) {
+            this.deps.addClickTrack(node);
+            evt.detail.noState = true;
+        }
+        this.explorerNodeClicked(evt, false);
+        if (this.deps.firstRun) {
+            this.deps.firstRun = false;
+        }
+        else if (!evt.detail.source) {
+            this.deps.sidebarPanel?.showTab('viewer');
         }
     }
     explorerReferenceClicked(evt) {
-        let nodeId = '';
-        this.doc.explorer.nodeComponents.forEach((node) => {
-            if (node.body.node.nodePath === evt.detail.nodePath) {
-                const renderedNode = this.doc.renderedNodeMap.get(node.body.node.id);
-                if (renderedNode) {
-                    this.doc.editor.editor?.setPosition({ lineNumber: renderedNode.keyLine, column: 0 });
-                    this.doc.editor.editor?.revealLineInCenter(renderedNode.keyLine);
-                    this.doc.renderedNode.node = renderedNode;
-                    nodeId = node.body.node.id;
-                    this.doc.explorer.moveToNode(node.body.node);
-                    this.doc.activeNode = node.body.node;
-                    this.doc.explorer.activeNode = node.body.node;
-                    this.doc.explorer.equalizer.activeNode = node.body.node;
+        const refPath = evt.detail.nodePath;
+        if (!refPath)
+            return;
+        const hasChangeReport = !!this.deps.modelController.changeReport;
+        const isInTardisView = this.deps.selectedEditorTab === 'tardis';
+        const refExistsInChangeMap = hasChangeReport && this.deps.modelController.changeNodePathIndex.has(refPath);
+        const inChangeMode = isInTardisView && refExistsInChangeMap;
+        const nodeMapToUse = inChangeMode
+            ? this.deps.modelController.changeNodeMap
+            : this.deps.modelController.nodeMap;
+        const nodePathIndexToUse = inChangeMode
+            ? this.deps.modelController.changeNodePathIndex
+            : this.deps.modelController.nodePathIndex;
+        const edgesToUse = inChangeMode
+            ? (this.deps.modelController.changeReport?.edges || [])
+            : this.deps.modelController.edges;
+        const targetNode = nodePathIndexToUse.get(refPath);
+        if (targetNode) {
+            if (this.deps.bundleController?.isBundled && targetNode.nodePath) {
+                const mapping = this.deps.bundleController.findOriginalLocation(targetNode.nodePath);
+                if (mapping) {
+                    this.navigateToRolodexFile(mapping.originalFilePath, mapping.originalLine, mapping.originalColumn);
+                    this.deps.modelController.renderedNodeComponent.node = targetNode;
+                    this.setActiveNode(targetNode, false);
+                    if (this.deps.explorerVisible && this.deps.explorer) {
+                        this.deps.explorer.revealPathToNode(targetNode.id);
+                        this.deps.explorer.moveToNode(targetNode);
+                    }
+                    this.deps.modelTree?.explorerClicked(targetNode.id, false);
+                    this.deps.sidebarPanel?.showTab('viewer');
+                    return;
                 }
-                node.body.active = true;
             }
-            else {
-                node.body.active = false;
+            this.revealLineInEditor(targetNode.keyLine);
+            this.deps.modelController.renderedNodeComponent.node = targetNode;
+            this.setActiveNode(targetNode, false);
+            const graphNodes = this.deps.explorer.graphResponse?.nodes;
+            const graphEdges = this.deps.explorer.graphResponse?.edges;
+            const isInGraph = graphNodes?.some(n => n.id === targetNode.id);
+            if (!isInGraph && graphNodes && graphEdges) {
+                const parentChain = this.collectParentChain(targetNode, nodeMapToUse);
+                const existingIds = new Set(graphNodes.map(n => n.id));
+                for (const node of parentChain) {
+                    if (!existingIds.has(node.id)) {
+                        const clonedNode = structuredClone(node);
+                        graphNodes.push(clonedNode);
+                        existingIds.add(node.id);
+                        this.deps.explorer.addToNodeMap(clonedNode);
+                    }
+                }
+                for (const edge of edgesToUse) {
+                    const sourceInGraph = edge.sources.some(s => existingIds.has(s));
+                    const targetInGraph = edge.targets.some(t => existingIds.has(t));
+                    if (sourceInGraph && targetInGraph) {
+                        const edgeExists = graphEdges.some(e => e.id === edge.id);
+                        if (!edgeExists) {
+                            graphEdges.push(structuredClone(edge));
+                        }
+                    }
+                }
+                this.deps.explorer.invalidateChildrenCache();
+                this.deps.explorer.ensureNodesVisible(parentChain);
             }
-        });
-        if (nodeId) {
-            this.doc.modelTree.explorerClicked(nodeId);
-            this.doc.explorer.requestUpdate();
-            this.doc.viewerPanel.click();
+            this.deps.explorer.revealPathToNode(targetNode.id);
+            this.deps.explorer.moveToNode(targetNode);
+            this.deps.modelTree?.explorerClicked(targetNode.id, false);
+            this.deps.sidebarPanel?.showTab('viewer');
+            return;
         }
-        if (evt.detail.nodePath) {
-            let p = evt.detail.nodePath;
+        if (refPath) {
+            let p = refPath;
             if (!p.startsWith('/') && !p.includes('#')) {
-                const dir = this.doc.rolodexRootPath.substring(0, this.doc.rolodexRootPath.lastIndexOf('/') + 1);
+                const dir = this.deps.rolodexRootPath.substring(0, this.deps.rolodexRootPath.lastIndexOf('/') + 1);
                 p = dir + p;
             }
             if (!p.startsWith('#/')) {
@@ -298,7 +584,6 @@ export class NodeClickerController extends EventTarget {
         if (evt.detail.jsonPath.includes('||')) {
             location = evt.detail.jsonPath.split('||')[1];
             path = evt.detail.jsonPath.split('||')[0];
-            // location is formatted line:col-endCol
             line = parseInt(location.split(':')[0]);
             col = parseInt(location.split(':')[1]);
             fullPath = evt.detail.jsonPath.split('||')[2];
@@ -307,25 +592,21 @@ export class NodeClickerController extends EventTarget {
             }
             rolodexId = evt.detail.jsonPath.split('||')[3];
         }
-        this.doc.editor.editor?.setPosition({ lineNumber: line, column: col });
-        this.doc.editor.editor?.revealLineInCenter(line);
-        if (this.doc.nodeIdMap.has(path)) {
-            const node = this.doc.nodeIdMap.get(path);
+        this.revealLineInEditor(line, col);
+        if (this.deps.modelController.nodeMap.has(path)) {
+            const node = this.deps.modelController.nodeMap.get(path);
             if (node) {
-                if (this.doc.nodeIdHashMap.has(node.idHash)) {
-                    const renderedNode = this.doc.renderedNodeMap.get(node.id);
-                    if (renderedNode) {
-                        this.doc.renderedNode.node = renderedNode;
-                        this.doc.modelTree.explorerClicked(node.id);
-                        // add a ref click
-                        if (!evt.detail.noState) {
-                            this.doc.addRefTrack(evt.detail.jsonPath);
-                        }
+                const renderedNode = this.deps.modelController.nodeMap.get(node.id);
+                if (renderedNode) {
+                    this.deps.modelController.renderedNodeComponent.node = renderedNode;
+                    this.deps.modelTree.explorerClicked(node.id);
+                    if (!evt.detail.noState) {
+                        this.deps.addRefTrack(evt.detail.jsonPath);
                     }
                 }
             }
             else {
-                this.doc.toastManager.addToastManually({
+                this.deps.sendToast({
                     id: crypto.randomUUID(),
                     type: ToastType.INFO,
                     title: "Reference not found",
@@ -334,25 +615,17 @@ export class NodeClickerController extends EventTarget {
             }
         }
         else {
-            if (this.doc.rolodexActivePath != undefined && this.doc.rolodexActivePath != file) {
+            if (this.deps.rolodexActivePath != undefined && this.deps.rolodexActivePath != file) {
                 ModelService.queryRolodex(rolodexId, file).then((result) => {
-                    this.doc.editor.showBreadcrumb = true;
-                    this.doc.rolodexActivePath = file;
-                    this.doc.editor.clearDecorations();
-                    this.doc.editor.setValue(result.rolodexRoot.instance, true);
-                    this.doc.editor.editor?.setPosition({ lineNumber: line, column: 1 });
-                    this.doc.editor.editor?.revealLineInCenter(line);
-                    this.doc.rolodexTree.explorerClicked(rolodexId);
-                    this.doc.editor.setCurrentPath(file);
-                    this.doc.modelController.fetchRefMap(file);
-                    //this.lintSpec(result.rolodexRoot.instance);
-                    // apply problems
-                    if (this.doc.rolodexProblemMap.has(this.doc.rolodexActivePath)) {
-                        const probs = this.doc.rolodexProblemMap.get(this.doc.rolodexActivePath);
-                        if (probs) {
-                            this.doc.editor.setMarkers(probs);
-                        }
-                    }
+                    this.deps.editor.showBreadcrumb = true;
+                    this.deps.rolodexActivePath = file;
+                    this.deps.editor.clearDecorations();
+                    this.deps.editor.setValue(result.rolodexRoot.instance, true);
+                    this.revealLineInEditor(line, 1);
+                    this.deps.editor.setCurrentPath(file);
+                    this.expandRolodexAncestorsForPath(file);
+                    this.deps.modelController.fetchRefMap(file);
+                    this.applyProblemsForPath(this.deps.rolodexActivePath);
                 }).catch((e) => {
                     console.error('rolodex query failed', e);
                 });