@pb33f/cowboy-components 0.6.6 → 0.7.0

package/dist/components/time-vortex/spec-summary-timeline-item.js

@@ -0,0 +1,153 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property, } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import specSummaryTimelineItemCss from "./spec-summary-timeline-item.css";
+import tooltipCss from "../../css/tooltip.css";
+let SpecSummaryTimelineItem = class SpecSummaryTimelineItem extends LitElement {
+    constructor() {
+        super();
+        this.large = false;
+        this.selected = false;
+    }
+    render() {
+        let empty = html ``;
+        let breakingChanges = html `
+            <sl-icon name="heartbreak-fill" class="empty"></sl-icon>`;
+        let breaking = false;
+        if (this.specSummary.breakingChanges && this.specSummary.breakingChanges > 0) {
+            breakingChanges = html `
+                <strong>${this.specSummary.breakingChanges}</strong>
+                <sl-icon name="heartbreak-fill" class="breaking"></sl-icon>`;
+            breaking = true;
+        }
+        let totalChanges = html `
+            <sl-icon name="stack" class="empty"></sl-icon>`;
+        if (this.specSummary.totalChanges && this.specSummary.totalChanges > 0) {
+            totalChanges = html `
+                ${this.specSummary.totalChanges}
+                <sl-icon name="stack"></sl-icon>`;
+        }
+        let additions = html `
+            <sl-icon name="plus-lg" class="empty"></sl-icon>`;
+        if (this.specSummary.additions && this.specSummary.additions > 0) {
+            additions = html `
+                ${this.specSummary.additions}
+                <sl-icon name="plus-lg"></sl-icon>`;
+        }
+        let modifications = html `
+            <sl-icon name="pencil" class="empty"></sl-icon>`;
+        if (this.specSummary.modifications && this.specSummary.modifications > 0) {
+            modifications = html `
+                ${this.specSummary.modifications}
+                <sl-icon name="pencil"></sl-icon>`;
+        }
+        let removals = html `
+            <sl-icon name="x-lg" class="empty"></sl-icon>`;
+        if (this.specSummary.removals && this.specSummary.removals > 0) {
+            removals = html `
+                ${this.specSummary.removals}
+                <sl-icon name="x-lg"></sl-icon>`;
+        }
+        let diagnosis = html `
+            <sl-icon name="capsule" class="empty"></sl-icon>`;
+        if (this.specSummary.diagnosisScore && this.specSummary.diagnosisScore > 0) {
+            diagnosis = html `
+                ${this.specSummary.diagnosisScore}
+                <sl-icon name="capsule"></sl-icon>
+                ${this.specSummary.wentUp ? html `<sl-icon name="arrow-up" class="arrow ${this.large ? 'large' : ''} up"></sl-icon>` : ''}
+                ${this.specSummary.wentDown ? html `<sl-icon name="arrow-down" class="arrow ${this.large ? 'large' : ''} down"></sl-icon>` : ''}
+            `;
+        }
+        let diagnosisMessage = `diagnosis score did not change`;
+        if (this.specSummary.wentUp) {
+            diagnosisMessage = `diagnosis score went up by ${this.specSummary.scoreVariance} points`;
+        }
+        if (this.specSummary.wentDown) {
+            diagnosisMessage = `diagnosis score went down by ${this.specSummary.scoreVariance} points`;
+        }
+        return html `
+            <div class="timeline-item ${this.large ? 'justify-center' : ''} ${this.selected ? 'selected' : ''}">
+                <sl-tooltip content="breaking changes made" placement="top">
+                    <div class="score ${breaking ? 'breaking-score' : ''} ${this.large ? 'large' : ''} ${this.additionalWidth(this.specSummary.breakingChanges)}">
+                        ${breakingChanges}
+                    </div>
+                </sl-tooltip>
+                <sl-tooltip content="total changes made" placement="top">
+                    <div class="score ${this.large ? 'large' : ''} ${this.additionalWidth(this.specSummary.totalChanges)}">
+                        ${totalChanges}
+                    </div>
+                </sl-tooltip>
+                <sl-tooltip content="new additions made" placement="top">
+                    <div class="score ${this.large ? 'large' : ''} ${this.additionalWidth(this.specSummary.additions)}">
+                        ${additions}
+                    </div>
+                </sl-tooltip>
+                <sl-tooltip content="property modifications made" placement="top">
+                    <div class="score ${this.large ? 'large' : ''} ${this.additionalWidth(this.specSummary.modifications)}">
+                        ${modifications}
+                    </div>
+                </sl-tooltip>
+                <sl-tooltip content="properties removed" placement="top">
+                    <div class="score ${this.large ? 'large' : ''} ${this.additionalWidth(this.specSummary.removals)}">
+                        ${removals}
+                    </div>
+                </sl-tooltip>
+                <sl-tooltip content="${diagnosisMessage}" placement="top">
+                    <div class="score ${this.large ? 'large' : ''} ${this.additionalWidth(this.specSummary.diagnosisScore)}">
+                        ${diagnosis}
+                    </div>
+                </sl-tooltip>
+
+            </div>
+        `;
+    }
+    additionalWidth(v) {
+        if (!v) {
+            return 'gip';
+        }
+        if (v >= 100000) {
+            if (this.large) {
+                return 'sext-large';
+            }
+            return 'sext';
+        }
+        if (v >= 10000) {
+            if (this.large) {
+                return 'quint-large';
+            }
+            return 'quint';
+        }
+        if (v >= 1000) {
+            if (this.large) {
+                return 'quad-large';
+            }
+            return 'quad';
+        }
+        if (v >= 100) {
+            if (this.large) {
+                return 'triple-large';
+            }
+            return 'triple';
+        }
+        return 'no' + v;
+    }
+};
+SpecSummaryTimelineItem.styles = [specSummaryTimelineItemCss, tooltipCss];
+__decorate([
+    property()
+], SpecSummaryTimelineItem.prototype, "specSummary", void 0);
+__decorate([
+    property()
+], SpecSummaryTimelineItem.prototype, "large", void 0);
+__decorate([
+    property()
+], SpecSummaryTimelineItem.prototype, "selected", void 0);
+SpecSummaryTimelineItem = __decorate([
+    customElement("pb33f-spec-summary-timeline-item")
+], SpecSummaryTimelineItem);
+export { SpecSummaryTimelineItem };

package/dist/components/time-vortex/tardis-control.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/time-vortex/tardis-control.css.js

@@ -0,0 +1,103 @@
+import { css } from "lit";
+export default css `
+    :host {
+        --chart-color-primary: var(--primary-color);
+        --chart-color-error: var(--error-color);
+        --chart-color-secondary: var(--secondary-color);
+        --chart-color-third: var(--tertiary-color);
+        --chart-color-fourth: var(--terminal-text);
+        --chart-text-color:  var(--font-color);
+        --chart-gridline-color: var(--font-color-sub3);
+        --chart-background-color: transparent;
+    }
+    
+    .changes-container {
+       
+        height: 100%;
+    }
+    
+    .change-navigator {
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid var(--secondary-color-dimmer);
+        margin-bottom: 5px;
+        height: 100%;
+    }
+    
+    .change-tree-container {
+       
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+    }
+    
+    
+    
+    .change-list {
+        width: 100%;
+        height: 100%;
+        flex: 2;
+    }
+    
+    em {
+        font-family: var(--font-stack-italic), sans-serif;
+    }
+    
+    header {
+        border-bottom: 1px solid var(--secondary-color);
+        padding: 5px 5px 10px 10px;
+    }
+    
+    strong {
+        color: var(--secondary-color);
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .score {
+        height: 35px;
+        width: 45px;
+        font-size: 1.6rem;
+        text-align: center;
+        color: var(--font-color);
+        font-family: var(--font-stack-bold), sans-serif;
+        border: 1px solid var(--font-color-sub3);
+        padding: 5px;
+        margin-right: 5px;
+        position: relative;
+    }
+
+    .time-vortex {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        padding-top: 10px;
+    }
+    
+    .timeline-view {
+        overflow-y: auto;
+        height: calc(100vh - 130px);
+    }
+
+    .timeline-view::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .timeline-view::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .timeline-view::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+
+    .tardis-split-panel {
+        --min: 300px;
+        --max: calc(100vh - 400px);
+        height: calc(100vh - 160px);
+    }
+
+
+`;

package/dist/components/time-vortex/tardis-control.d.ts

@@ -0,0 +1,32 @@
+import { TemplateResult } from "lit";
+import { GraphResponse } from "../../model/graph.js";
+import { ChangeHistory, SpecSummary } from "../../model/timeline.js";
+import { DoughnutChart } from "../charts/doughnut-chart.js";
+import { ExplorerComponent } from "../visualizer/explorer.js";
+import { Colorful } from "../charts/chart-colors.js";
+import { TimelineView } from "./timeline-view.js";
+import { NodeClickedEvent } from "../../events/doctor.js";
+import '../charts/beefy-chart';
+import '../charts/doughnut-chart.js';
+import './change-list-item.js';
+export declare class TardisControl extends Colorful {
+    static styles: import("lit").CSSResult[];
+    changeReport?: GraphResponse | null;
+    changeGraph?: GraphResponse;
+    history?: ChangeHistory;
+    chartOptions?: any;
+    changeDoughnut: DoughnutChart;
+    breakingDoughnut: DoughnutChart;
+    specSummary: SpecSummary | null;
+    explorer: ExplorerComponent;
+    timelineView: TimelineView;
+    constructor();
+    explorerNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
+    firstUpdated(): void;
+    fetchHistory(): void;
+    renderSummaryForMultiChange(): TemplateResult;
+    render(): TemplateResult<1>;
+    showSummaryOnly(): void;
+    set summary(summary: SpecSummary);
+    handleChange(resp: GraphResponse): void;
+}

package/dist/components/time-vortex/tardis-control.js

@@ -0,0 +1,286 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, query, state } from "lit/decorators.js";
+import { html } from "lit";
+import tardisControlCss from "./tardis-control.css";
+import { TimelineService } from "../../services/timeline-service.js";
+import { ChangesComponent } from "../model-renderer/changes.js";
+import spinnerCss from "../../css/spinner.css.js";
+import specSummaryTimelineItemCss from "./spec-summary-timeline-item.css.js";
+import { SpecSummaryTimelineItem } from "./spec-summary-timeline-item.js";
+import tabsCss from "../../css/tabs.css.js";
+import { ExplorerComponent } from "../visualizer/explorer.js";
+import { Colorful } from "../charts/chart-colors.js";
+import { TimelineView } from "./timeline-view.js";
+import panelsCss from "../../css/panels.css.js";
+import scrollbarCss from "../../css/scrollbar.css.js";
+import { ToastType } from "../../model/toast.js";
+import { AddToast, ExplorerNodeClicked, LoadRenderedNodeIntoInspector } from "../../events/doctor.js";
+import '../charts/beefy-chart';
+import '../charts/doughnut-chart.js';
+import './change-list-item.js';
+let TardisControl = class TardisControl extends Colorful {
+    constructor() {
+        super();
+        this.explorer = new ExplorerComponent();
+        this.explorer.renderEqualizer = false;
+        this.explorer.equalizer.renderEqualizer = false;
+        this.timelineView = new TimelineView();
+        //@ts-ignore
+        this.addEventListener(ExplorerNodeClicked, this.explorerNodeClicked.bind(this));
+    }
+    explorerNodeClicked(evt) {
+        evt.stopPropagation();
+        // we only have a select number of nodes for this change, so instead of bubbling up to the doctor
+        if (this.changeReport) {
+            this.changeReport.nodesRendered.forEach((node) => {
+                if (node.id == evt.detail.nodeId) {
+                    // load up this rendered node and send to the inspector panel for rendering.
+                    this.dispatchEvent(new CustomEvent(LoadRenderedNodeIntoInspector, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            renderedNode: node,
+                        }
+                    }));
+                    this.explorer.activeNode = node;
+                    this.explorer.buildLayout();
+                }
+            });
+        }
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        this.fetchHistory();
+    }
+    fetchHistory() {
+        TimelineService.fetchHistory().then((history) => {
+            this.history = history;
+            if (history.changeData) {
+                this.timelineView.changeDatasets = history.changeData?.datasets;
+                this.timelineView.changeLabels = history.changeData?.labels;
+            }
+            if (history?.violationData) {
+                this.timelineView.violationDatasets = history.violationData?.datasets;
+                this.timelineView.violationLabels = history.violationData?.labels;
+            }
+            if (history.qualityData) {
+                this.timelineView.qualityDatasets = history.qualityData?.datasets;
+                this.timelineView.qualityLabels = history.qualityData?.labels;
+            }
+            this.timelineView.requestUpdate();
+            this.requestUpdate();
+        }).catch((e) => {
+            this.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        type: ToastType.ERROR,
+                        id: "timeline-error",
+                        body: e.detail,
+                        title: "timeline error",
+                    }
+                }
+            }));
+        });
+    }
+    renderSummaryForMultiChange() {
+        if (this.specSummary?.totalChanges <= 1) {
+            return html ``;
+        }
+        const labels = ['Modified', 'Added', 'Removed'];
+        const breakingLabels = ['Breaking', 'Non-Breaking'];
+        const dataSet = [
+            {
+                labels: labels,
+                data: [this.specSummary?.modifications, this.specSummary?.additions, this.specSummary?.removals]
+            }
+        ];
+        const breakingDataSet = [
+            {
+                labels: breakingLabels,
+                data: [this.specSummary?.breakingChanges, this.specSummary?.totalChanges]
+            }
+        ];
+        let breakingChart = html ``;
+        if (this.specSummary?.totalChanges > 1) {
+            breakingChart = html `
+                <pb33f-doughnut-chart id="breaking-doughnut" showLegend breakingChanges width=290 height=130
+                                      .datasets=${breakingDataSet} .labels=${breakingLabels}
+                                      style="padding-left: 10px; padding-top: 10px"></pb33f-doughnut-chart>`;
+        }
+        const timelineItem = new SpecSummaryTimelineItem();
+        if (this.specSummary) {
+            timelineItem.specSummary = this.specSummary;
+            timelineItem.large = true;
+        }
+        return html `
+
+            <div style="width:100%; padding: 10px; display: flex">
+                <pb33f-doughnut-chart id="change-doughnut" showLegend changesChart width=290 height=130
+                                      .datasets=${dataSet} .labels=${labels}
+                                      style="padding-left: 10px; padding-top: 10px"></pb33f-doughnut-chart>
+                ${breakingChart}
+            </div>
+            ${timelineItem}`;
+    }
+    render() {
+        if (!this.changeReport && !this.history) {
+            return html `
+                <div class="pb33f-loader">
+                    <div class="spin"></div>
+                    Waiting for changes to be made in the space-time continuum...<br/>
+                    <br/>
+                    <div style="padding-left: 38px;">(Make some changes / edits to the OpenAPI Spec)</div>
+                </div>`;
+        }
+        if (!this.changeReport && this.history) {
+            return html `
+                <div class="timeline-view">
+                    ${this.timelineView}
+                </div>`;
+        }
+        let changelist = [];
+        this.changeReport?.changes?.forEach(change => {
+            const ch = new ChangesComponent([change]);
+            ch.addPadding = true;
+            ch.renderChangeCountBar = false;
+            ch.renderBreakingBar = true;
+            ch.renderMeta = true;
+            changelist.push(ch);
+        });
+        let changeSummary = html ``;
+        if (changelist.length > 0) {
+            changeSummary = this.renderSummaryForMultiChange();
+            this.changeDoughnut?.refresh();
+            this.breakingDoughnut?.refresh();
+        }
+        const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const changeTreeContainer = html `
+            <div class="change-tree-container scroller" slot="start">
+                <pb33f-model-tree expand .node=${this.changeReport?.nodeChangeTree}
+                                  class="change-tree" style="padding-top: 10px;"></pb33f-model-tree>
+            </div>`;
+        let changesView = html `${changeTreeContainer}`;
+        if (this.changeReport && this.changeReport.changes && this.changeReport.changes?.length > 1) {
+            changesView = html `
+                <sl-split-panel position-in-pixels="350" id="tardis-change-navigator-split-panel"
+                                class="tardis-change-navigator-split-panel">
+                    <sl-icon id="split-divider" slot="divider" name="grip-vertical"
+                             class="divider-vert"></sl-icon>
+
+                    ${changeTreeContainer}
+                    <div style="position: relative; width: 100%" slot="end"> ${changeSummary}</div>
+                </sl-split-panel>`;
+        }
+        return html `
+
+            <header>
+                <strong>${changelist.length}</strong> ${changelist.length > 1 ? 'changes' : 'change'} made</strong>
+                <span style="color: var(--font-color-sub1"> on
+                    <sl-format-date time-zone="${userTimeZone}" date="${this.specSummary?.created}"
+                                    time-zone-name="short" month="long" day="numeric" year="numeric" hour="2-digit"
+                                    minute="numeric" second="numeric"></sl-format-date> <em>(<sl-relative-time date="${this.specSummary?.created}"></sl-relative-time>)</em> <br/>
+                </span>
+            </header>
+            <div class="changes-container">
+
+                <sl-split-panel position-in-pixels="300" vertical id="tardis-split-panel" class="tardis-split-panel">
+                    <sl-icon id="split-divider" slot="divider" name="grip-horizontal" class="divider-horiz"></sl-icon>
+                    <div class="editor" slot="start">
+
+
+                        <div class="change-navigator">
+                            ${changesView}
+                        </div>
+                    </div>
+                    <div class="editor" slot="end">
+
+                        <sl-tab-group class="tab-group time-vortex">
+                            <sl-tab slot="nav" panel="changelist" class="tab" id="changelist-view">
+                                Changelog
+                            </sl-tab>
+                            <sl-tab slot="nav" panel="graph" class="tab" id="graph-view">
+                                Explore Changes
+                            </sl-tab>
+                            <sl-tab slot="nav" panel="list" class="tab" id="list-view">
+                                List
+                            </sl-tab>
+                            <sl-tab-panel name="changelist" class="tab-panel changelist-panel">
+                                <div class="change-list">
+                                    <pb33f-paginator-navigation label="Changes" hideSparks
+                                                                .values=${changelist}></pb33f-paginator-navigation>
+                                </div>
+                            </sl-tab-panel>
+                            <sl-tab-panel name="graph" class="tab-panel">
+                                ${this.explorer}
+                            </sl-tab-panel>
+                            <sl-tab-panel name="list" class="tab-panel">
+                                <pb33f-change-list .changes=${this.changeReport?.changes}></pb33f-change-list>
+                            </sl-tab-panel>
+
+                        </sl-tab-group>
+                    </div>
+            </div>`;
+    }
+    showSummaryOnly() {
+        this.specSummary = null;
+        this.changeReport = null;
+        return;
+    }
+    set summary(summary) {
+        this.specSummary = summary;
+        if (summary.changeId) {
+            TimelineService.fetchChange(summary.changeId)
+                .then(this.handleChange.bind(this))
+                .catch((e) => {
+                this.dispatchEvent(new CustomEvent(AddToast, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        toast: {
+                            type: ToastType.ERROR,
+                            id: "timeline-error",
+                            body: e.detail,
+                            title: "timeline error",
+                        }
+                    }
+                }));
+            });
+        }
+    }
+    handleChange(resp) {
+        this.changeReport = resp;
+        this.explorer.updateGraphResponse(resp);
+        this.explorer.buildGraph();
+    }
+};
+TardisControl.styles = [specSummaryTimelineItemCss,
+    tardisControlCss, spinnerCss, tabsCss, panelsCss, scrollbarCss];
+__decorate([
+    state()
+], TardisControl.prototype, "changeReport", void 0);
+__decorate([
+    state()
+], TardisControl.prototype, "changeGraph", void 0);
+__decorate([
+    state()
+], TardisControl.prototype, "history", void 0);
+__decorate([
+    state()
+], TardisControl.prototype, "chartOptions", void 0);
+__decorate([
+    query('pb33f-doughnut-chart#change-doughnut')
+], TardisControl.prototype, "changeDoughnut", void 0);
+__decorate([
+    query('pb33f-doughnut-chart#breaking-doughnut')
+], TardisControl.prototype, "breakingDoughnut", void 0);
+TardisControl = __decorate([
+    customElement("pb33f-tardis-control")
+], TardisControl);
+export { TardisControl };

package/dist/components/time-vortex/time-vortex.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+import { TheDoctor } from "../the-doctor/the-doctor.js";
+import { HistoryPicker } from "./history-picker.js";
+import { TardisControl } from "./tardis-control.js";
+import { RevisionClickedEvent } from "../../events/doctor.js";
+export declare class TimeVortex extends LitElement {
+    pickerVisible: boolean;
+    skipChanges: boolean;
+    historyPicker: HistoryPicker;
+    tardisControl: TardisControl;
+    doctor: TheDoctor;
+    constructor();
+    checkHistory(): void;
+    updated(): void;
+    revisionClicked(evt: CustomEvent<RevisionClickedEvent>): void;
+    showTimelineSummary(): void;
+}

package/dist/components/time-vortex/time-vortex.js

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { HistoryPicker } from "./history-picker.js";
+import { TimelineService } from "../../services/timeline-service.js";
+import { TardisControl } from "./tardis-control.js";
+import { ToastType } from "../../model/toast.js";
+import { AddToast, RevisionClicked, ShowTimelineSummary, TimelineHistoryRefresh } from "../../events/doctor.js";
+let TimeVortex = class TimeVortex extends LitElement {
+    constructor() {
+        super();
+        this.pickerVisible = false;
+        this.skipChanges = false;
+        this.historyPicker = new HistoryPicker();
+        this.tardisControl = new TardisControl();
+        this.addEventListener(TimelineHistoryRefresh, this.checkHistory);
+        //@ts-ignore
+        this.historyPicker.addEventListener(RevisionClicked, (evt) => {
+            this.revisionClicked(evt);
+        });
+        this.historyPicker.addEventListener(ShowTimelineSummary, this.showTimelineSummary.bind(this));
+    }
+    checkHistory() {
+        TimelineService.getSummary().then((summaries) => {
+            if (summaries.length > 0) {
+                this.pickerVisible = true;
+                this.historyPicker.specSummary = summaries;
+                if (this.doctor)
+                    this.doctor.requestUpdate();
+            }
+        }).catch((e) => {
+            this.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        type: ToastType.ERROR,
+                        id: "timeline-error",
+                        body: e.detail,
+                        title: "timeline summary error",
+                    }
+                }
+            }));
+        });
+        this.tardisControl.fetchHistory();
+    }
+    updated() {
+        this.historyPicker.skipChanges = this.skipChanges;
+    }
+    revisionClicked(evt) {
+        this.tardisControl.specSummary = evt.detail.specSummary;
+        this.doctor.selectTardis();
+        this.tardisControl.summary = evt.detail.specSummary;
+    }
+    showTimelineSummary() {
+        this.tardisControl.showSummaryOnly();
+        this.tardisControl.fetchHistory();
+        this.doctor.selectTardis();
+    }
+};
+__decorate([
+    state()
+], TimeVortex.prototype, "pickerVisible", void 0);
+__decorate([
+    state()
+], TimeVortex.prototype, "skipChanges", void 0);
+TimeVortex = __decorate([
+    customElement("pb33f-time-vortex")
+], TimeVortex);
+export { TimeVortex };

package/dist/components/time-vortex/timeline-view.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;