@pb33f/cowboy-components 0.6.7 → 0.7.1

package/dist/components/the-doctor/the-doctor.js

@@ -16,7 +16,7 @@ import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { SpecEditor } from "../editor/editor.js";
-import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, ModelTreeNodeClicked, NodeReferenceClicked, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, NukeWorkspaceEvent } from "../../events/doctor.js";
+import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, LoadRenderedNodeIntoInspector, ModelTreeNodeClicked, NodeReferenceClicked, NukeWorkspaceEvent, OpenProblemDrawer, OpenSettings, ProblemClicked, ProblemRuleFilterChangedManual, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, } from "../../events/doctor.js";
 import { ProblemDetailsDrawer, ProblemDrawerEventType } from "../problem-list/details-drawer.js";
 import { CreateBagManager } from "@pb33f/saddlebag";
 import { LintingService } from "../../services/linting-service.js";
@@ -46,16 +46,20 @@ import { ExplorerComponent } from "../visualizer/explorer.js";
 import { RenderedNodeComponent } from "../model-renderer/rendered-node.js";
 import tabsCss from "../../css/tabs.css.js";
 import { CreateBus } from "@pb33f/ranch";
-import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel } from "../../model/channels";
-import formsCss from "../../css/forms.css";
-import spinnerCss from "../../css/spinner.css";
-import { UploadArchiveComponent } from "./upload-archive";
-import { NodeType } from "../../model/node_type";
-import tooltipCss from "../../css/tooltip.css";
-import { NukeWorkspaceComponent } from "./nuke-workspace";
-import { CreditTicker } from "../credit-ticker/credit-ticker";
-import { AuthController } from "../../controllers/auth";
-import { AuthService } from "../../services/auth-service";
+import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel } from "../../model/channels.js";
+import formsCss from "../../css/forms.css.js";
+import spinnerCss from "../../css/spinner.css.js";
+import { UploadArchiveComponent } from "./upload-archive.js";
+import { NodeType } from "../../model/node_type.js";
+import tooltipCss from "../../css/tooltip.css.js";
+import { NukeWorkspaceComponent } from "./nuke-workspace.js";
+import { CreditTicker } from "../credit-ticker/credit-ticker.js";
+import { AuthController } from "../../controllers/auth.js";
+import { AuthService } from "../../services/auth-service.js";
+import { TimeVortex } from "../time-vortex/time-vortex.js";
+import { TimelineService } from "../../services/timeline-service.js";
+import { DoctorSettings } from "./settings.js";
+import panelsCss from "../../css/panels.css.js";
 export const GraphBag = "pb33f-doctor-graph";
 export const PanelStateBag = "pb33f-doctor-panel-state";
 export const RolodexResponseBag = "pb33f-doctor-rolodex-response";
@@ -76,19 +80,35 @@ export const FunctionsSchemaBag = "pb33f-doctor-function-schema";
 export const CustomRulesetBag = "pb33f-doctor-custom-ruleset";
 export const RuleConfigurationBag = "pb33f-doctor-rule-configuration";
 export const SessionRulesetMapBag = "pb33f-doctor-session-rulesetmap";
+export const SettingsBag = "pb33f-doctor-settings";
 export const DefaultDocument = "pb33f-doctor-document";
 export const DocumentProblems = "pb33f-doctor-problems";
 export const DoctorEndpoint = "doctor-endpoint";
 let TheDoctor = class TheDoctor extends LitElement {
     constructor(doctorEndpoint = "https://doctor.pb33f.io") {
         super();
-        this.debounceTime = 400;
+        this.debounceTime = 1000;
         this.debounceTimeRuleset = 900;
         this.bounceId = 0;
         this.useTLS = false;
         // rolodex divider state (because it may not exist)
         this.rolodexDividerPosition = 40;
         this._firstRun = true;
+        // extract the doctor endpoint from session storage.
+        const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
+        if (sessionEndpoint) {
+            this.doctorEndpoint = sessionEndpoint;
+        }
+        else {
+            this.doctorEndpoint = doctorEndpoint;
+        }
+        LintingService.doctorEndpoint = this.doctorEndpoint;
+        FeedbackService.doctorEndpoint = this.doctorEndpoint;
+        RulesetService.doctorEndpoint = this.doctorEndpoint;
+        ModelService.doctorEndpoint = this.doctorEndpoint;
+        AuthService.doctorEndpoint = this.doctorEndpoint;
+        TimelineService.doctorEndpoint = this.doctorEndpoint;
+        this.timeVortex = new TimeVortex();
         //this.authController = new AuthController(this)
         // bus it up
         this.bus = CreateBus();
@@ -120,6 +140,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.manageRuleset = new ManageRuleset();
         this.toastManager = new ToastManager();
         this.creditTicker = new CreditTicker();
+        this.settingsComponent = new DoctorSettings();
         this.editorMap = new Map();
         this.editorMap.set("spec", this.editor);
         this.editorMap.set("ruleset-editor", this.rulesetEditor);
@@ -133,6 +154,8 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.rolodexRootPath = "";
         this.importDisabled = false;
         this.pendingLine = 0;
+        this.autoDiagnose = true;
+        this.skipTimeline = false;
         this.nodeMap = new Map();
         this.nodeIdMap = new Map();
         this.nodeIdHashMap = new Map();
@@ -146,21 +169,9 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.references = [];
         this.minimapVisible = true;
         this.minimapIconVisible = true;
+        this.showDiagnosisButton = false;
         this.nodeLimit = 150;
         this.randomTicker = 0;
-        // extract the doctor endpoint from session storage.
-        const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
-        if (sessionEndpoint) {
-            this.doctorEndpoint = sessionEndpoint;
-        }
-        else {
-            this.doctorEndpoint = doctorEndpoint;
-        }
-        LintingService.doctorEndpoint = this.doctorEndpoint;
-        FeedbackService.doctorEndpoint = this.doctorEndpoint;
-        RulesetService.doctorEndpoint = this.doctorEndpoint;
-        ModelService.doctorEndpoint = this.doctorEndpoint;
-        AuthService.doctorEndpoint = this.doctorEndpoint;
         // session call back for when we're online.
         const sessionCallback = (session) => {
             if (session.creditsRemaining) {
@@ -214,6 +225,9 @@ let TheDoctor = class TheDoctor extends LitElement {
         //@ts-ignore
         this.explorer.equalizer.addEventListener(ExplorerEqualizerFiltered, this.filterTreeModel.bind(this));
         this.nukeWorkspace.addEventListener(NukeWorkspaceEvent, this.nukeWorkspaceHandler.bind(this));
+        this.timeVortex.historyPicker.addEventListener(OpenSettings, this.openSettings.bind(this));
+        //@ts-ignore
+        this.addEventListener(LoadRenderedNodeIntoInspector, this.loadRenderedNodeIntoInspector.bind(this));
         // extract port from session storage.
         this.busPort = sessionStorage.getItem("pb33f-doctor-port");
         this.busHost = sessionStorage.getItem("pb33f-doctor-host");
@@ -250,11 +264,45 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         });
     }
+    openSettings() {
+        this.settingsComponent.open();
+    }
+    settingsChanged(_, config) {
+        if (config) {
+            this.autoDiagnose = config.autoDiagnose;
+            this.skipTimeline = config.skipTimeline;
+            this.showDiagnosisButton = !config.autoDiagnose;
+            // if the time vortex is not available, enable skipsState
+            this.timeVortex.historyPicker.skipChanges = config.skipTimeline;
+            if (config.applicationVersion == this.currentVersion) {
+                return;
+            }
+            if (this.currentVersion && this.currentVersion != 'bootstrap' &&
+                config.applicationVersion &&
+                config.applicationVersion != 'bootstrap' &&
+                this.currentVersion != config.applicationVersion) {
+                console.warn('version changed, reloading', this.currentVersion, config.applicationVersion);
+                this.nukeWorkspaceHandler();
+            }
+            else {
+                config.applicationVersion = this.currentVersion;
+                this.settingsBag?.set(SettingsBag, config);
+            }
+        }
+    }
+    loadRenderedNodeIntoInspector(evt) {
+        const rn = new RenderedNodeComponent();
+        rn.node = evt.detail.renderedNode;
+        this.renderedNode = rn;
+        this.requestUpdate();
+        this.viewerPanel.click();
+    }
     tickRandomly() {
         this.randomTicker = Math.floor(Math.random() * 9999999);
     }
     nukeWorkspaceHandler() {
         this.bagManager.resetBags();
+        localStorage.removeItem("pb33f-doctor-version");
         ModelService.resetWorkspace().then(() => {
             window.location.reload();
         });
@@ -305,8 +353,22 @@ let TheDoctor = class TheDoctor extends LitElement {
                 if (isBrokerResponse(msg.payload.payload)) {
                     this.brokerConnectionId = msg.payload.payload.broker;
                     this.authController.associateBroker(this.brokerConnectionId).then(() => {
-                        console.log('broker connection', this.brokerConnectionId);
-                        console.log("💊 Welcome to the clinic, the %cdoctor %cis ready to see you.", 'color: #62C4FFFF; font-weight: bold', 'color: default');
+                        // check version from the server
+                        const version = msg.payload.payload.version;
+                        if (version !== "") {
+                            this.currentVersion = version;
+                        }
+                        const memVersion = localStorage.getItem("pb33f-doctor-version");
+                        if (memVersion) {
+                            if (this.currentVersion != memVersion) {
+                                this.nukeWorkspaceHandler();
+                                return;
+                            }
+                        }
+                        else {
+                            localStorage.setItem("pb33f-doctor-version", this.currentVersion);
+                        }
+                        console.log("💊 Welcome to the clinic, the %cdoctor %cis ready to see you. [" + "v" + version + "]", 'color: #62C4FFFF; font-weight: bold', 'color: default');
                         this.startTheDoctor();
                     });
                 }
@@ -319,7 +381,6 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.bus.mapChannelToBrokerDestination(QueuePrefix + SpecStreamChannel, SpecStreamChannel);
         this.bus.mapChannelToBrokerDestination(QueuePrefix + CreditStreamChannel, CreditStreamChannel);
         this.boostrap();
-        this.loadingOverlay.hide();
     }
     specStreamHandler() {
         return (msg) => {
@@ -344,7 +405,7 @@ let TheDoctor = class TheDoctor extends LitElement {
     filterTreeModel(event) {
         this.filteredNodes = new Map();
         event.detail.graph.nodes.forEach((node) => {
-            this.filteredNodes.set(node.idHash, node);
+            this.filteredNodes.set(node.id, node);
         });
         this.modelTree.filteredNodes = this.filteredNodes;
         this.modelTree.renderedNodes = this.renderedNodeMap;
@@ -374,10 +435,10 @@ let TheDoctor = class TheDoctor extends LitElement {
             const node = this.nodeIdMap.get(path);
             if (node) {
                 if (this.nodeIdHashMap.has(node.idHash)) {
-                    const renderedNode = this.renderedNodeMap.get(node.idHash);
+                    const renderedNode = this.renderedNodeMap.get(node.id);
                     if (renderedNode) {
                         this.renderedNode.node = renderedNode;
-                        this.modelTree.explorerClicked(node.idHash);
+                        this.modelTree.explorerClicked(node.id);
                         // add a ref click
                         if (!evt.detail.noState) {
                             this.addRefTrack(evt.detail.jsonPath);
@@ -421,15 +482,15 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     explorerReferenceClicked(evt) {
-        let hashId = '';
+        let nodeId = '';
         this.explorer.nodeComponents.forEach((node) => {
             if (node.body.node.nodePath === evt.detail.nodePath) {
-                const renderedNode = this.renderedNodeMap.get(node.body.node.idHash);
+                const renderedNode = this.renderedNodeMap.get(node.body.node.id);
                 if (renderedNode) {
                     this.editor.editor?.setPosition({ lineNumber: renderedNode.keyLine, column: 0 });
                     this.editor.editor?.revealLineInCenter(renderedNode.keyLine);
                     this.renderedNode.node = renderedNode;
-                    hashId = node.body.node.idHash;
+                    nodeId = node.body.node.id;
                     this.explorer.moveToNode(node.body.node);
                     this.activeNode = node.body.node;
                     this.explorer.activeNode = node.body.node;
@@ -441,8 +502,8 @@ let TheDoctor = class TheDoctor extends LitElement {
                 node.body.active = false;
             }
         });
-        if (hashId) {
-            this.modelTree.explorerClicked(hashId);
+        if (nodeId) {
+            this.modelTree.explorerClicked(nodeId);
             this.explorer.requestUpdate();
             this.viewerPanel.click();
         }
@@ -610,7 +671,10 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     modelTreeNodeClicked(evt) {
-        const node = this.nodeIdHashMap.get(evt.detail.nodeHashId);
+        let node = this.nodeIdMap.get(evt.detail.nodeId);
+        if (!node) {
+            node = this.nodeIdHashMap.get(evt.detail.nodeId);
+        }
         if (node) {
             if (node.origin && node.origin != this.rolodexActivePath && (node.origin != '/root.yaml' && node.origin != 'root.yaml')) {
                 // extract the rolodex id using the path
@@ -630,23 +694,36 @@ let TheDoctor = class TheDoctor extends LitElement {
                 }));
                 return;
             }
-            this.editor.editor?.setPosition({ lineNumber: node.keyLine, column: 0 });
-            this.editor.editor?.revealLineInCenter(node.keyLine);
+            // don't jump to the root in the editor if the root is selected
+            if (node.idHash !== 'root') {
+                this.editor.editor?.setPosition({ lineNumber: node.keyLine, column: 0 });
+                this.editor.editor?.revealLineInCenter(node.keyLine);
+            }
             if (this.explorerVisible) {
                 this.explorer.moveToNode(node, evt.detail.first);
             }
             this.activeNode = node;
+            // add changes to active node.
+            if (evt.detail.changes) {
+                node.timeline = evt.detail.changes;
+            }
             this.explorer.activeNode = node;
             this.explorer.equalizer.activeNode = node;
-            const renderedNode = this.renderedNodeMap.get(node.idHash);
+            const renderedNode = structuredClone(this.renderedNodeMap.get(node.id));
             if (renderedNode) {
+                if (evt.detail.changes) {
+                    renderedNode.timeline = evt.detail.changes;
+                }
                 this.renderedNode.node = renderedNode;
             }
+            else {
+                alert('no id found');
+            }
             if (!evt.detail.noState) {
                 this.addClickTrack(node);
                 evt.detail.noState = true;
             }
-            this.explorerNodeClicked(evt);
+            this.explorerNodeClicked(evt, false);
             if (this._firstRun) {
                 this._firstRun = false;
             }
@@ -654,22 +731,36 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.viewerPanel.click();
             }
         }
+        else {
+            this.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);
+        }
     }
-    explorerNodeClicked(evt) {
+    explorerNodeClicked(evt, replaceRenderedNode = true) {
         let found = false;
         let foundRenderedNode;
         this.explorer.nodeComponents.forEach((node) => {
-            if (node.id === evt.detail.nodeHashId) {
-                const renderedNode = this.renderedNodeMap.get(node.id);
-                if (renderedNode && !this._firstRun) {
-                    this.renderedNode.node = renderedNode;
+            if (node.id === evt.detail.nodeId) {
+                let renderedNode;
+                if (replaceRenderedNode) {
+                    renderedNode = this.renderedNodeMap.get(node.id);
+                    if (renderedNode && !this._firstRun) {
+                        this.renderedNode.node = renderedNode;
+                    }
                 }
                 this.selectedNodeHashId = node.body.node.idHash;
                 node.body.active = true;
                 this.activeNode = node.body.node;
                 this.explorer.activeNode = node.body.node;
                 found = true;
-                foundRenderedNode = renderedNode;
+                if (replaceRenderedNode) {
+                    foundRenderedNode = renderedNode;
+                }
                 if (!evt.detail.noState) {
                     this.addClickTrack(node.body.node);
                 }
@@ -680,9 +771,9 @@ let TheDoctor = class TheDoctor extends LitElement {
         });
         if (!found) {
             // might be filtered, check the filtered nodes
-            const node = this.nodeIdHashMap.get(evt.detail.nodeHashId);
+            const node = this.nodeIdMap.get(evt.detail.nodeId);
             if (node) {
-                this.selectedNodeHashId = evt.detail.nodeHashId;
+                this.selectedNodeHashId = node.idHash;
                 this.activeNode = node;
                 this.explorer.activeNode = node;
                 this.explorer.equalizer.activeNode = node;
@@ -692,7 +783,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             // when jumping back to the spec view, we need to set the line
             this.pendingLine = foundRenderedNode.keyLine;
         }
-        this.modelTree.explorerClicked(evt.detail.nodeHashId);
+        this.modelTree.explorerClicked(evt.detail.nodeId);
         if (!this._firstRun) {
             this.viewerPanel.click();
         }
@@ -810,6 +901,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     buildRolodexResultMap(results) {
+        // TODO: optimize this, it's a bit slow.
         this.rolodexProblemMap.clear();
         results.forEach((problem) => {
             // check if the source location is '/root.yaml'
@@ -839,10 +931,24 @@ let TheDoctor = class TheDoctor extends LitElement {
                 }
                 else {
                     if (!this.rolodexRootPath) {
-                        this.rolodexProblemMap.set("root", [problem]);
+                        const currProblems = this.rolodexProblemMap.get("root");
+                        if (currProblems) {
+                            currProblems.push(problem);
+                            this.rolodexProblemMap.set("root", currProblems);
+                        }
+                        else {
+                            this.rolodexProblemMap.set("root", [problem]);
+                        }
                     }
                     else {
-                        this.rolodexProblemMap.set(this.rolodexRootPath, [problem]);
+                        const currProblems = this.rolodexProblemMap.get(this.rolodexRootPath);
+                        if (currProblems) {
+                            currProblems.push(problem);
+                            this.rolodexProblemMap.set(this.rolodexRootPath, currProblems);
+                        }
+                        else {
+                            this.rolodexProblemMap.set(this.rolodexRootPath, [problem]);
+                        }
                     }
                 }
             }
@@ -915,7 +1021,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         }
         let revive = true;
-        LintingService.lintFile(value, this.brokerConnectionId, url, currentPath).then((result) => {
+        LintingService.lintFile(value, this.brokerConnectionId, url, currentPath, this.skipTimeline).then((result) => {
             //if (replaceResults) {
             this.activitySpinner.hide();
             const map = this.buildRolodexResultMap(result);
@@ -1024,7 +1130,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
             // fetch graph
             if ((this.rolodexRootPath == this.rolodexActivePath || this.rolodexActivePath == 'root') || url) {
-                ModelService.createGraph().then((result) => {
+                ModelService.fetchLatestGraph().then((result) => {
                     this.extractGraph(result);
                 });
             }
@@ -1059,6 +1165,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
             else {
                 this.fetchRefMap(currentPath);
+                this.timeVortex.tardisControl.fetchHistory();
             }
             // update the overview statistics
             LintingService.fetchStatistics().then((result) => {
@@ -1106,6 +1213,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.explorerBooted = true;
             }
         }).catch((e) => {
+            this.activitySpinner.hide();
             if (!url) {
                 //this.platformUnavailable(e);
                 console.error("so sorry, the doctor cannot see you right now, the clinic is closed.");
@@ -1121,6 +1229,14 @@ let TheDoctor = class TheDoctor extends LitElement {
                             title: "Credit exhausted!",
                         });
                     }
+                    else {
+                        this.sendToast({
+                            id: crypto.randomUUID(),
+                            type: ToastType.ERROR,
+                            body: e.detail,
+                            title: "Platform Error",
+                        });
+                    }
                 }
             }
             else {
@@ -1293,6 +1409,14 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.referenceMapBag = this.bagManager.getBag(ReferenceMapBag);
         this.docExpirationBag = this.bagManager.getBag(DocumentationExpirationBag);
         this.panelStateBag = this.bagManager.getBag(PanelStateBag);
+        this.settingsBag = this.bagManager.getBag(SettingsBag);
+        // register a handler for settings bag changes.
+        this.settingsBag?.onAllChanges(this.settingsChanged.bind(this));
+        this.settingsComponent.settingsBag = this.settingsBag;
+        if (this.settingsBag) {
+            this.settingsChanged('', this.settingsBag.get(SettingsBag));
+        }
+        this.settingsComponent.bootstrap();
         // load the rolodex
         if (this.rolodexResponseBag) {
             const response = this.rolodexResponseBag.get(RolodexResponseBag);
@@ -1545,20 +1669,26 @@ let TheDoctor = class TheDoctor extends LitElement {
         const renderedNodes = new Map();
         graph?.nodesRendered?.forEach((node) => {
             this.explorer.renderedNodeMap.set(node.id, node);
-            renderedNodes.set(node.idHash, node);
+            renderedNodes.set(node.id, node);
         });
         for (let i = 0; i < graph?.nodesRendered?.length; i++) {
-            this.renderedNodeMap.set(graph.nodesRendered[i].idHash, graph.nodesRendered[i]);
+            this.renderedNodeMap.set(graph.nodesRendered[i].id, graph.nodesRendered[i]);
         }
         graph?.nodes?.forEach((node) => {
-            this.nodeMap.set('model-' + node.idHash, node);
-            this.nodeIdMap.set(node.id, node);
-            this.nodeIdHashMap.set(node.idHash, node);
+            this.nodeMap.set(node.id, node);
+            if (node.idHash.includes('root')) {
+                this.nodeIdMap.set('root', node);
+                this.nodeIdHashMap.set(node.id, node);
+            }
+            else {
+                this.nodeIdMap.set(node.id, node);
+                this.nodeIdHashMap.set(node.idHash, node);
+            }
             if (node.filtered) {
-                this.filteredNodes.set(node.idHash, node);
+                this.filteredNodes.set(node.id, node);
             }
-            const renderedNode = this.renderedNodeMap.get(node.idHash);
-            if (this.activeNode?.id === node.id && this.renderedNodeMap.get(node.idHash)) {
+            const renderedNode = this.renderedNodeMap.get(node.id);
+            if (this.activeNode?.id === node.id && this.renderedNodeMap.get(node.id)) {
                 if (this.renderedNode && renderedNode) {
                     this.renderedNode.node = renderedNode;
                 }
@@ -1567,7 +1697,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.graphBag?.set(GraphBag, graph);
         this.explorer.updateGraphResponse(graph);
         if (graph && graph.nodes) {
-            this.modelTree.node = graph?.nodes[0]; // update tree
+            this.modelTree.node = graph?.nodesRendered[0]; // update tree
         }
         if (!this.explorer.equalizer.isInitialized()) {
             this.explorer.equalizer.initializeEqualizer();
@@ -1575,6 +1705,8 @@ let TheDoctor = class TheDoctor extends LitElement {
         else {
             this.explorer.equalizer.runEQ(true);
         }
+        // sync timeline
+        this.timeVortex.checkHistory();
     }
     customRulesetEnabled(event) {
         const customRS = { rules: new Map() };
@@ -1713,7 +1845,6 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.ruleDocsWorker.addEventListener("message", (event) => {
             const data = event.data;
             if (data) {
-                this.docExpirationBag?.set(DocumentationExpirationBag, new Date().toISOString());
                 data.forEach((doc) => {
                     if (doc.ruleId) {
                         this.ruleDocsBag?.set(doc.ruleId, doc);
@@ -1725,20 +1856,20 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.activitySpinner.hide();
             }
         });
-        let ruleDocs = [];
-        let functionDocs = [];
-        if (this.ruleDocsBag) {
-            ruleDocs = Array.from(this.ruleDocsBag.export().keys());
-        }
-        if (this.functionDocsBag) {
-            functionDocs = Array.from(this.functionDocsBag.export().keys());
-        }
+        // let ruleDocs: string[] = [];
+        // let functionDocs: string[] = [];
+        // if (this.ruleDocsBag) {
+        //     ruleDocs = Array.from(this.ruleDocsBag.export().keys());
+        // }
+        // if (this.functionDocsBag) {
+        //     functionDocs = Array.from(this.functionDocsBag.export().keys());
+        // }
         const fetchDocs = () => {
             this.ruleDocsWorker.postMessage({
                 start: true,
                 endpoint: this.doctorEndpoint,
-                existingRules: ruleDocs,
-                existingFunctions: functionDocs
+                existingRules: [],
+                existingFunctions: []
             });
         };
         // check expiration
@@ -1748,12 +1879,12 @@ let TheDoctor = class TheDoctor extends LitElement {
             if (expiration) {
                 const now = new Date().getTime();
                 const then = new Date(expiration).getTime();
-                if (now - then > 1296000000) {
-                    fetchDocs();
-                }
-                else {
-                    this.activitySpinner.hide();
-                }
+                // if (now - then > 1296000000) {
+                //     fetchDocs();
+                // } else {
+                //     this.activitySpinner.hide();
+                // }
+                fetchDocs(); // always fetch for now.
             }
             else {
                 fetchDocs();
@@ -1877,10 +2008,17 @@ let TheDoctor = class TheDoctor extends LitElement {
         if (this.docBag) {
             this.docBag.set(DefaultDocument, event.detail.content);
         }
-        clearTimeout(this.bounceId);
-        this.bounceId = window.setTimeout(() => {
-            this.lintSpec(event.detail.content);
-        }, this.debounceTime);
+        if (this.autoDiagnose) {
+            clearTimeout(this.bounceId);
+            this.bounceId = window.setTimeout(() => {
+                this.lintSpec(event.detail.content);
+            }, this.debounceTime);
+        }
+    }
+    runDiagnostics() {
+        if (!this.autoDiagnose) {
+            this.lintSpec(this.editor.getValue());
+        }
     }
     boostrap() {
         // if the url is set in the query string, fetch it and run a lint with the URL
@@ -1892,18 +2030,25 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.lintSpec('', urlParam);
             return;
         }
-        if (this.editor.getValue() === '' || !this.problems) {
-            LintingService.bootstrapEditor().then((result) => {
-                this.editor.setValue(result, true);
-                this.rolodexActivePath = "";
-                this.specChanged(new CustomEvent(EditorUpdated, {
-                    detail: {
-                        content: result,
-                        id: "spec"
-                    }
-                }));
-            });
-        }
+        setTimeout(() => {
+            this.loadingOverlay.hide();
+            // check for a history
+            this.timeVortex.doctor = this;
+            this.timeVortex.checkHistory();
+            const editorValue = this.docBag?.get(DefaultDocument);
+            if (!editorValue) {
+                LintingService.bootstrapEditor().then((result) => {
+                    this.editor.setValue(result, true);
+                    this.rolodexActivePath = "";
+                    this.specChanged(new CustomEvent(EditorUpdated, {
+                        detail: {
+                            content: result,
+                            id: "spec"
+                        }
+                    }));
+                });
+            }
+        }, 200);
     }
     exportJSON() {
         let jsonRS;
@@ -1959,10 +2104,10 @@ let TheDoctor = class TheDoctor extends LitElement {
         switch (event.detail.name) {
             case ActiveView.Problems:
             case ActiveView.Overview:
-                if (this.selectedEditorTab != "spec") {
-                    this.selectedEditorTab = "spec";
-                    this.editorTabGroup.show("spec");
-                }
+                // if (this.selectedEditorTab != "spec") {
+                //     this.selectedEditorTab = "spec";
+                //     this.editorTabGroup.show("spec");
+                // }
                 break;
             case ActiveView.Ruleset:
                 if (this.selectedEditorTab != ActiveView.Ruleset) {
@@ -2000,12 +2145,18 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
         this.sidebarClosed = !this.sidebarClosed;
     }
+    showHistory() {
+        this.closeExplorer();
+        this.hideMinimapIcon();
+        this.requestUpdate();
+    }
     toggleExplorer() {
         this.explorerVisible = !this.explorerVisible;
         if (this.explorerVisible && this.activeNode) {
             this.explorer.moveToNode(this.activeNode);
         }
         this.hideMinimapIcon();
+        this.showDiagnosisButton = false;
         this.explorerBooted = true;
         // check if ths is safari and fire a warning toast!
         const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -2019,16 +2170,23 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     hideMinimapIcon() {
-        console.log('hiding minimap icon');
         this.minimapIconVisible = false;
     }
+    hideDiagnosisButton() {
+        this.showDiagnosisButton = false;
+    }
+    enableDiagnosisButton() {
+        if (!this.autoDiagnose) {
+            this.showDiagnosisButton = true;
+        }
+    }
     showMinimapIcon() {
-        console.log('showing minimap icon');
         this.minimapIconVisible = true;
     }
     closeExplorer() {
         this.explorerVisible = false;
         this.showMinimapIcon();
+        this.showDiagnosisButton = true;
         setTimeout(() => {
             if (this.pendingLine > 0) {
                 this.editor.editor?.setPosition({ lineNumber: this.pendingLine, column: 1 });
@@ -2098,6 +2256,25 @@ let TheDoctor = class TheDoctor extends LitElement {
                     </div>
                 </sl-split-panel>`;
         }
+        // if the timeVortex is on and the picker is visible, we need to wrap the model tree in a tab view.
+        if (this.timeVortex.pickerVisible) {
+            modelTree = html `
+                <sl-tab-group class="tab-group timevortex" @sl-tab-show="${this.selectEditorTab}">
+                    <sl-tab slot="nav" panel="model-tree" class="tab" id="model-tree">
+                        Document
+                    </sl-tab>
+                    <sl-tab slot="nav" panel="timeline" class="tab" id="timeline-view">
+                        Timeline
+                    </sl-tab>
+                    <sl-tab-panel name="model-tree" class="tab-panel model-tree-panel">
+                        ${modelTree}
+                    </sl-tab-panel>
+                    <sl-tab-panel name="timeline" class="tab-panel">
+                        ${this.timeVortex.historyPicker}
+                    </sl-tab-panel>
+                </sl-tab-group>
+            `;
+        }
         return html `
             ${this.uploadArchive}
             ${this.nukeWorkspace}
@@ -2165,33 +2342,73 @@ let TheDoctor = class TheDoctor extends LitElement {
                                      class="divider-vert"></sl-icon>
                             <div class="editor" slot="start">
 
-                                <sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist  style="${!this.minimapIconVisible ? 'display: none' : ''}">  
+                                ${this.settingsComponent}
+
+                                <sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist
+                                            style="${!this.minimapIconVisible ? 'display: none' : ''}">
                                     <sl-icon-button @click="${this.minimapToggled}"
                                                     name="map"
-                                                    class="minimap-toggle ${this.minimapVisible ? 'active' : ''}" 
+                                                    class="minimap-toggle ${this.minimapVisible ? 'active' : ''}"
                                                     style="${!this.minimapIconVisible ? 'display: none' : ''}"></sl-icon-button>
                                 </sl-tooltip>
 
+                                <sl-tooltip class="settings-tip" content="Open settings for the doctor" hoist>
+                                    <sl-icon-button @click="${() => {
+            this.settingsComponent.open();
+        }}"
+                                                    name="gear"
+                                                    class="settings-toggle ${!this.settingsComponent.opened ? 'active' : ''}"></sl-icon-button>
+                                </sl-tooltip>
+
+                                <sl-button class="diagnose-button" @click="${this.runDiagnostics}"
+                                           size="small"
+                                           style="${(this.autoDiagnose || !this.showDiagnosisButton) ? 'display: none' : ''}">
+                                    make diagnosis
+                                </sl-button>
+
+
                                 ${this.detailsDrawer}
                                 <sl-tab-group class="tab-group" @sl-tab-show="${this.selectEditorTab}"
                                               id="editor-controls">
 
                                     <sl-tab slot="nav" panel="spec" class="tab" id="spec"
-                                            @click="${this.closeExplorer}">
+                                            @click="${() => {
+            this.closeExplorer();
+            this.enableDiagnosisButton();
+        }}">
                                         OpenAPI Spec
                                     </sl-tab>
                                     <sl-tab slot="nav" panel="explorer" class="tab" id="explorer"
-                                            @click="${this.toggleExplorer}">Explorer
+                                            @click="${() => {
+            this.toggleExplorer();
+            this.hideDiagnosisButton();
+        }}">Explorer
+                                    </sl-tab>
+
+
+                                    <sl-tab slot="nav" panel="tardis" class="tab" id="history"
+                                            @click="${() => {
+            this.showHistory();
+            this.hideDiagnosisButton();
+        }}">History
                                     </sl-tab>
+
                                     <sl-tab slot="nav" panel="ruleset" class="tab" id="ruleset"
-                                            @click="${this.closeExplorer}">
+                                            @click="${() => {
+            this.closeExplorer();
+            this.hideDiagnosisButton();
+        }}">
                                         Ruleset ${rulesetPulsePill}
                                     </sl-tab>
 
-                                    <sl-tab slot="nav" panel="docs" class="tab" id="docs" @click="${this.hideMinimapIcon}">
+                                    <sl-tab slot="nav" panel="docs" class="tab" id="docs"
+                                            @click="${() => {
+            this.hideMinimapIcon();
+            this.hideDiagnosisButton();
+        }}">
                                         API Docs
                                     </sl-tab>
-                                    
+
 
                                     <sl-tab-panel name="spec" class="tab-panel">
                                         <div class="main-view">
@@ -2231,6 +2448,10 @@ let TheDoctor = class TheDoctor extends LitElement {
                                                   @mouseleave="${this.ungrabExplorer}">${this.explorer}
                                     </sl-tab-panel>
 
+                                    <sl-tab-panel name="tardis" class="tab-panel">
+                                        ${this.timeVortex.tardisControl}
+                                    </sl-tab-panel>
+
                                     <sl-tab-panel name="docs" class="tab-panel" style="height: calc(100vh - 100px)">
                                         <iframe src="${this.doctorEndpoint}/model/scalar-template?z=${this.randomTicker}" width="100%" height="100%" style="border: none"></iframe>
                                     </sl-tab-panel>
@@ -2244,6 +2465,7 @@ let TheDoctor = class TheDoctor extends LitElement {
 
             </div>`;
     }
+    //   <iframe src="${this.doctorEndpoint}/model/scalar-template?z=${this.randomTicker}" width="100%" height="100%" style="border: none"></iframe>
     fetchUrl(event) {
         this.activeURL = event.detail.url;
         this.rolodexNeedsReset = true;
@@ -2268,8 +2490,12 @@ let TheDoctor = class TheDoctor extends LitElement {
     ungrabExplorer() {
         this.explorer.grabbed = false;
     }
+    selectTardis() {
+        this.closeExplorer();
+        this.historyPanel.click();
+    }
 };
-TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss];
+TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss];
 __decorate([
     query('#overviewPanel')
 ], TheDoctor.prototype, "overviewPanel", void 0);
@@ -2282,6 +2508,9 @@ __decorate([
 __decorate([
     query('#explorer')
 ], TheDoctor.prototype, "explorerPanel", void 0);
+__decorate([
+    query('#history')
+], TheDoctor.prototype, "historyPanel", void 0);
 __decorate([
     query('sl-tab-group#manager-controls')
 ], TheDoctor.prototype, "controlTabGroup", void 0);
@@ -2366,6 +2595,12 @@ __decorate([
 __decorate([
     state()
 ], TheDoctor.prototype, "rolodexNeedsReset", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "autoDiagnose", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "showDiagnosisButton", void 0);
 TheDoctor = __decorate([
     customElement("pb33f-doctor")
 ], TheDoctor);