@pb33f/cowboy-components 0.3.5 → 0.5.0

package/dist/components/the-doctor/upload-archive.css.d.ts

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

package/dist/components/the-doctor/upload-archive.css.js

@@ -0,0 +1,98 @@
+import { css } from "lit";
+export default css `
+    
+    sl-dialog::part(body) {
+        margin-top:0;
+        padding-top: 0;
+    }
+
+    sl-dialog::part(title) {
+        margin-bottom:5px;
+        padding-bottom: 5px;
+    }
+
+
+    .invalid-file {
+        border: 1px solid var(--error-color);
+    }
+    .invalid {
+        color: var(--error-color);
+    }
+    
+    h4 {
+        margin-top: 0;
+        padding-top: 0;
+    }
+    
+    .files {
+        border: 1px dashed var(--secondary-color);
+        padding: 20px;
+        margin-top: 20px;
+    }
+    
+    .file-list {
+        max-height: 400px;
+        overflow-x: auto;
+    }
+    
+    .path{
+        color: var(--font-color-sub1);
+    }
+    
+    .name {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold),serif;
+        
+    }
+
+    input[type="file"] {
+        display: none;
+    }
+    
+    .archive-select {
+        display: flex;
+        flex-direction: row;
+        padding-top: 20px;
+        border-top: 1px dashed var(--secondary-color);
+
+    }
+    
+    .url-input {
+        width: 100%
+    }
+    
+    .use-url {
+        width: 50%;
+        display: flex;
+        flex-direction: row;
+        border-right: 1px dashed var(--secondary-color);
+        padding-right: 20px;
+        margin-right: 20px;
+    }
+    
+    .upload-archive {
+        width: 50%;
+    }
+
+    sl-button.close-button::part(base) {
+        margin-top: 0;
+    }
+    
+    .upload-archive-button {
+        border: 1px solid var(--primary-color);
+        display: inline-block;
+        cursor: pointer;
+        color: var(--primary-color);
+        padding: 10px;
+        font-size: 0.8rem;
+        height: 18px;
+    }
+    
+    
+    
+    .not-spec {
+        color: var(--secondary-color);
+        font-family: var(--font-stack), serif;
+    }
+    
+`;

package/dist/components/the-doctor/upload-archive.d.ts

@@ -0,0 +1,33 @@
+import '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.js';
+import { LitElement, TemplateResult } from "lit";
+import SlDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
+import { SlButton, SlInput } from "@shoelace-style/shoelace";
+import { FileMeta } from "../../model/rolodex";
+export declare class UploadArchiveComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    dialog: SlDialog | undefined;
+    visible: boolean;
+    invalid: boolean;
+    loading: boolean;
+    files: FileMeta[];
+    urlInputButton: SlButton;
+    urlInput: SlInput;
+    urlOverlay: HTMLElement;
+    urlProblem: HTMLElement;
+    urlSpinner: HTMLDivElement;
+    file: any;
+    fileName: string;
+    fileType: string;
+    fileSize: number;
+    fileTooBig: boolean;
+    noSpecFilesFound: boolean;
+    constructor();
+    show(): void;
+    hide(): void;
+    handleFileChange(event: any): void;
+    selectFile(path: string): void;
+    fetchUrl(): void;
+    validateUrl(evt: KeyboardEvent): void;
+    renderFilePath(file: string, isOpenAPI?: boolean): TemplateResult;
+    render(): TemplateResult<1>;
+}

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

@@ -0,0 +1,281 @@
+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 '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.js';
+import { customElement, property, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import dialogCss from "../../css/dialog.css";
+import buttonCss from "../../css/button.css";
+import uploadArchiveCss from "./upload-archive.css";
+import listsCss from "../../css/lists.css";
+import { ModelService } from "../../services/model-service";
+import linksCss from "../../css/links.css";
+import { RolodexRootFileSelected, ArchiveURLRequested } from "../../events/doctor";
+import formsCss from "../../css/forms.css";
+import hrCss from "../../css/hr.css";
+import { NodeType } from "../../model/node_type";
+import { IconSize } from "../model-icon/model-icon";
+const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this.invalid = false;
+        this.file = null;
+        this.files = [];
+    }
+    show() {
+        this.visible = true;
+        this.dialog?.show();
+    }
+    hide() {
+        this.visible = false;
+        this.dialog?.hide();
+    }
+    handleFileChange(event) {
+        const file = event.target.files[0];
+        if (file) {
+            this.noSpecFilesFound = false;
+            // check if the file is over 5mb (which is too big for free tier)
+            if (file.size > 5242880) {
+                this.invalid = true;
+                this.fileName = file.name;
+                this.fileType = file.type;
+                this.fileSize = file.size;
+                this.fileTooBig = true;
+                return;
+            }
+            this.fileName = file.name;
+            this.fileType = file.type;
+            this.fileSize = file.size;
+            if (file.type === 'application/zip' || file.type === 'application/gzip' || file.type === 'application/x-gzip') {
+                this.file = file;
+                this.invalid = false;
+                const formData = new FormData();
+                formData.append('spec-archive', file);
+                ModelService.uploadArchive(formData).then((response) => {
+                    // count the number of openapi files, if there is only one - automatically select it to avoid
+                    // a step. Thanks to @francois for the suggestion.
+                    this.files = response.files;
+                    let count = 0;
+                    let found = [];
+                    this.files.forEach((file) => {
+                        if (file.isOpenAPI) {
+                            count++;
+                            found.push(file);
+                        }
+                    });
+                    if (count === 0) {
+                        console.error('No OpenAPI files found in the archive');
+                        this.noSpecFilesFound = true;
+                        return;
+                    }
+                    if (count === 1) {
+                        this.selectFile(found[0].name);
+                        return;
+                    }
+                }).catch((error) => {
+                    console.error(error);
+                });
+                return;
+            }
+            this.invalid = true;
+        }
+    }
+    selectFile(path) {
+        this.noSpecFilesFound = false;
+        ModelService.selectRootPath(path).then((response) => {
+            this.dispatchEvent(new CustomEvent(RolodexRootFileSelected, {
+                composed: true,
+                bubbles: true,
+                detail: {
+                    content: response.instance,
+                    path: path,
+                    nodeHashId: response.idHash,
+                }
+            }));
+            this.files = [];
+            this.hide();
+        }).catch((error) => {
+            console.error(error);
+        });
+    }
+    fetchUrl() {
+        this.noSpecFilesFound = false;
+        this.dispatchEvent(new CustomEvent(ArchiveURLRequested, {
+            composed: true,
+            bubbles: true,
+            detail: {
+                url: this.urlInput.value
+            }
+        }));
+        this.hide();
+    }
+    validateUrl(evt) {
+        if (evt.key === "Enter") {
+            this.fetchUrl();
+        }
+        const urlValue = this.urlInput.value;
+        if (urlValue.match(urlRegex)) {
+            this.urlInputButton.disabled = false;
+            this.urlInputButton.classList.remove('close-button');
+        }
+        else {
+            this.urlInputButton.disabled = true;
+            this.urlInputButton.classList.add('close-button');
+        }
+    }
+    renderFilePath(file, isOpenAPI = false) {
+        // get the index of the last slash
+        const lastSlash = file.lastIndexOf('/');
+        if (lastSlash === -1) {
+            let link = html ` <a href="#" @click="${() => {
+                this.selectFile(file);
+            }}">${file}</a>`;
+            if (!isOpenAPI) {
+                link = html `<span class="not-spec">${file}</span>`;
+            }
+            return html `<span class="name">${link}</span>`;
+        }
+        const fileName = file.substring(lastSlash + 1);
+        const path = file.substring(0, lastSlash);
+        let link = html ` <a href="#" @click="${() => {
+            this.selectFile(path + '/' + fileName);
+        }}">${fileName}</a>`;
+        if (!isOpenAPI) {
+            link = html `<span class="not-spec">${fileName}</span>`;
+        }
+        return html `
+            <span class="path">${path}/</span><span class="name">
+                ${link}
+            </span>
+        `;
+    }
+    render() {
+        let files = html ``;
+        if (this.files.length > 0) {
+            files = html `
+                <div class="files">
+                    <h4>Select the Entry Document</h4>
+                    <p>
+                        The Entry Document is the 'top' or the <strong><em>starting point</em></strong>. 
+                        Tell the doctor which is your <strong><em>main</em></strong>
+                        specification that <strong>starts</strong> the OpenAPI document.
+                    </p>
+                    <div class="file-list"><ul>
+                    ${this.files.map((file) => {
+                let icon = html ``;
+                if (file.isOpenAPI) {
+                    icon = html `<pb33f-model-icon size="${IconSize.small}" icon="${NodeType.OPENAPI}" ></pb33f-model-icon>`;
+                    return html `
+                            <li>${this.renderFilePath(file.name, file.isOpenAPI)} ${icon}</li>`;
+                }
+            })}
+                    </div>
+                </ul>
+                </div>`;
+        }
+        if (this.noSpecFilesFound) {
+            files = html ` <p class="invalid"><strong>No OpenAPI files found in archive!</strong></p>
+            <p class="invalid">The doctor was unable to detect any OpenAPI YAML or JSON files in the archive you selected.</p>
+            <p>Try another file, or check your archive.</p>`;
+        }
+        return html `
+            <sl-dialog style="--width: 60vw; --height: 50vh">
+                <span slot="label"><sl-icon name="upload"></sl-icon> Import OpenAPI spec via URL or upload an archive</span>
+                <div class="archive-select">
+                    <div class="use-url">
+                        
+                        <div style="margin-top: 8px; margin-right: 5px;">URL:</div>
+                        <div style="width: 100%">
+                            <sl-input id="url-input" class="url-input"
+                                      placeholder="https://api.pb33f.io/train-travel.yaml" 
+                                      @keydown="${this.validateUrl}"
+                                      @keyup="${this.validateUrl}"></sl-input>
+                            <div style="width: 100%; padding-top: 20px;">
+                                <sl-button id="url-input-button" class="url-input-button close-button"
+                                           variant="neutral" disabled
+                                           @click="${this.fetchUrl}">Fetch URL
+                                </sl-button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="upload-archive">
+                        Spec exploded into multiple files? Upload a <strong>zip</strong> archive or a <strong>tarball</strong> containing everything.
+                        <p>
+                            The OpenAPI doctor supports <strong>zip files</strong> (.zip) and gzip compressed
+                            <strong>tarballs</strong> (.tar.gz).
+                        </p>
+
+                        <label for="fileInput" class="upload-archive-button">
+                            Upload .zip or .tar.gz
+                        </label>
+                        <input ${this.invalid ? 'invalid-file invalid' : ''}" type="file" id="fileInput"
+                            @change="${this.handleFileChange}"/>
+
+                        ${this.invalid && !this.fileTooBig ? html `
+                            <p class="invalid">'<strong>${this.fileName}</strong>' has a type of
+                                '<strong>${this.fileType}</strong>'
+                                which is an invalid file type.</p>
+                            <p class="invalid">Please upload a <strong>valid</strong> zip archive or a tarball.</p>
+                        ` : ''}
+
+                        ${this.invalid && this.fileTooBig ? html `
+                            <p class="invalid">'<strong>${this.fileName}</strong>' is too big!
+                                '<strong>
+                                    <sl-format-bytes value="${this.fileSize}"></sl-format-bytes>
+                                </strong>'
+                                exceeds the <strong>5mb</strong> limit for free use
+                            </p>
+                            <p class="invalid">Please upload a <strong>smaller</strong> zip archive or a tarball, or
+                                authenticate.</p>
+                        ` : ''}
+
+                    </div>
+                </div>
+
+                ${files}
+                <sl-button slot="footer" variant="primary" @click="${this.hide}">Close</sl-button>
+            </sl-dialog>
+        `;
+    }
+};
+UploadArchiveComponent.styles = [dialogCss, buttonCss, uploadArchiveCss, listsCss, linksCss, formsCss, hrCss];
+__decorate([
+    query('sl-dialog')
+], UploadArchiveComponent.prototype, "dialog", void 0);
+__decorate([
+    property({ type: Boolean })
+], UploadArchiveComponent.prototype, "visible", void 0);
+__decorate([
+    property({ type: Boolean })
+], UploadArchiveComponent.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean })
+], UploadArchiveComponent.prototype, "loading", void 0);
+__decorate([
+    property({ type: Array })
+], UploadArchiveComponent.prototype, "files", void 0);
+__decorate([
+    query('#url-input-button')
+], UploadArchiveComponent.prototype, "urlInputButton", void 0);
+__decorate([
+    query('#url-input')
+], UploadArchiveComponent.prototype, "urlInput", void 0);
+__decorate([
+    query('#editor-url-overlay')
+], UploadArchiveComponent.prototype, "urlOverlay", void 0);
+__decorate([
+    query('#url-problem')
+], UploadArchiveComponent.prototype, "urlProblem", void 0);
+__decorate([
+    query('#url-spinner')
+], UploadArchiveComponent.prototype, "urlSpinner", void 0);
+UploadArchiveComponent = __decorate([
+    customElement("pb33f-upload-archive")
+], UploadArchiveComponent);
+export { UploadArchiveComponent };

package/dist/components/visualizer/equalizer.d.ts

@@ -71,6 +71,7 @@ export declare class EqualizerComponent extends HasEyes {
     closeEqualizer(): void;
     closeKey(): void;
     openKey(): void;
+    isInitialized(): boolean;
     nodeSpacingRangeChanged(id: string): void;
     processRenderedObjects(): void;
     bendChanged(): void;
@@ -78,8 +79,9 @@ export declare class EqualizerComponent extends HasEyes {
     refsChanged(): void;
     polyChanged(): void;
     dimmingChanged(): void;
+    private initialized;
     initializeEqualizer(): void;
-    runEQ(): void;
+    runEQ(rebuild?: boolean): void;
     componentVisible(): void;
     componentHidden(): void;
     sendConfig(): void;

package/dist/components/visualizer/equalizer.js

@@ -55,6 +55,7 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
     constructor() {
         super();
         this.configuredObjects = new Set();
+        this.initialized = false;
         this._allChecked = false;
         this.controls = new OrientationControlsComponent();
         this.keyComponent = new ExplorerKeyComponent();
@@ -65,7 +66,7 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
         this.equalizerWorker.addEventListener("message", (event) => {
             this.controls.searchComponent.graphResponse = event.data;
             this.controls.searchComponent.currentObjects = this.currentObjects;
-            if (this.firstBoot) {
+            if (!this.firstBoot) {
                 this.dispatchEvent(new CustomEvent(ExplorerEqualizerFiltered, {
                     bubbles: true,
                     composed: true,
@@ -89,34 +90,46 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
                     }
                 }));
                 // select the root after the equalizer has run with defaults
-                setTimeout(() => {
-                    if (!this.activeNode)
-                        this.navigateToRoot();
-                    this.firstBoot = false;
-                }, 50); // delay a few MS to allow event bubbling to complete
+                // setTimeout(() => {
+                //     if (!this.activeNode)
+                //         this.navigateToRoot();
+                //         this.firstBoot = false;
+                // }, 350); // delay a few MS to allow event bubbling to complete
             }
-            this.dispatchEvent(new CustomEvent(ExplorerEqualizerChanged, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    graph: event.data,
-                    spacing: {
-                        nodeNodeBetweenLayers: this.nodeNodeBetweenLayers,
-                        nodeNode: this.nodeNode,
-                        edgeNodeBetweenLayers: this.edgeNodeBetweenLayers,
-                        edgeNode: this.edgeNode,
-                        bendEdges: this.bendEdges,
-                        bendPoints: this.bendPoints
-                    },
-                    references: {
-                        renderRefs: this.renderRefs,
-                        renderPoly: this.renderPoly
-                    },
-                    options: {
-                        dimDependents: this.dimDependencies
+            if (!this.initialized)
+                this.initialized = true;
+            if (this.firstBoot || event.data.rebuild) {
+                this.dispatchEvent(new CustomEvent(ExplorerEqualizerChanged, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        graph: event.data,
+                        spacing: {
+                            nodeNodeBetweenLayers: this.nodeNodeBetweenLayers,
+                            nodeNode: this.nodeNode,
+                            edgeNodeBetweenLayers: this.edgeNodeBetweenLayers,
+                            edgeNode: this.edgeNode,
+                            bendEdges: this.bendEdges,
+                            bendPoints: this.bendPoints
+                        },
+                        references: {
+                            renderRefs: this.renderRefs,
+                            renderPoly: this.renderPoly
+                        },
+                        options: {
+                            dimDependents: this.dimDependencies
+                        }
                     }
+                }));
+                if (this.firstBoot) {
+                    // select the root after the equalizer has run with defaults
+                    setTimeout(() => {
+                        if (!this.activeNode)
+                            this.navigateToRoot();
+                        this.firstBoot = false;
+                    }, 2000); // wait
                 }
-            }));
+            }
         });
         this.controls.addEventListener(ExplorerEqualizerOpen, this.openEqualizer.bind(this));
         this.controls.addEventListener(ExplorerEqualizerClose, this.closeEqualizer.bind(this));
@@ -195,6 +208,9 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
         this.controls.keyClosed = false;
         this.requestUpdate();
     }
+    isInitialized() {
+        return this.initialized;
+    }
     nodeSpacingRangeChanged(id) {
         const range = this.shadowRoot?.querySelector(`#${id}`);
         const rangeValue = parseInt(range.value);
@@ -250,8 +266,15 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
     }
     // run the initial graph through the defaults to turn down the noise on the initial render
     initializeEqualizer() {
+        if (this.initialized) {
+            return;
+        }
         const bootObject = {};
-        for (const object of this.renderObjects) {
+        if (!this.renderObjects) {
+            return;
+        }
+        for (let i = 0; i < this.renderObjects.length; i++) {
+            const object = this.renderObjects[i];
             if (object.enabled) {
                 bootObject[object.type] = true;
                 if (object.filters) {
@@ -274,7 +297,7 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
         this.currentObjects = workerObject.objects;
         this.equalizerWorker.postMessage(workerObject);
     }
-    runEQ() {
+    runEQ(rebuild = false) {
         if (this.configuredObjects && this.configuredObjects.size > 0) {
             const workerObject = {};
             const configuredObjects = {};
@@ -283,12 +306,13 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
             });
             workerObject.objects = configuredObjects;
             workerObject.graphResponse = this.graphResponse;
+            workerObject.rebuild = rebuild;
             workerObject.references = {
                 renderRefs: this.renderRefs,
                 renderPoly: this.renderPoly
             };
             this.extractSpacing(workerObject);
-            if (this._visible) {
+            if (this._visible || rebuild) {
                 this.equalizerWorker.postMessage(workerObject);
             }
             else {
@@ -300,8 +324,8 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
     componentVisible() {
         super.componentVisible();
         if (this._cachedEQ) {
-            this.equalizerWorker.postMessage(this._cachedEQ);
-            this._cachedEQ = null;
+            // this.equalizerWorker.postMessage(this._cachedEQ);
+            //this._cachedEQ = null
         }
     }
     componentHidden() {

package/dist/components/visualizer/explorer.js

@@ -247,12 +247,16 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         if (width2 >= this.zoomMax || width2 <= this.zoomMin) {
             return;
         }
+        if (Number.isNaN(x2) || Number.isNaN(y2) || Number.isNaN(width2) || Number.isNaN(height2)) {
+            return;
+        }
         requestAnimationFrame(() => {
             this.svgItem.setAttribute('viewBox', `${x2} ${y2} ${width2} ${height2}`);
         });
     }
     equalizerFiltered(evt) {
-        this.equalizer.controls.searchComponent.graphResponse = evt.detail.graph;
+        this.graphResponse = evt.detail.graph;
+        this.buildGraph();
     }
     equalizerChanged(evt) {
         if (evt.detail.graph.nodes.length > 0) {
@@ -281,7 +285,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         }
         this.buildGraph();
         setTimeout(() => {
-            if (this.activeNode) {
+            if (this.activeNode && this._visible) {
                 this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
                     bubbles: true,
                     composed: true,
@@ -292,7 +296,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                 }));
                 return;
             }
-            this.navigateToRoot();
+            //this.navigateToRoot();
         }, 150);
     }
     buildLayout() {
@@ -398,7 +402,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.nodeComponents = [];
         this.renderGraphMap.clear();
         this.renderedNodeMap.clear();
-        this.graphResponse.nodesRendered.forEach((node) => {
+        this.graphResponse.nodesRendered?.forEach((node) => {
             this.renderedNodeMap.set(node.id, node);
         });
         this.graph.children?.forEach((c) => {
@@ -609,7 +613,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         return svg `
         ${this.equalizer}
         ${nodeLimitExceeded}
-        <svg preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%;" viewBox="0 0 ${base} ${base}"
+        <svg preserveAspectRatio="xMidYMid meet" style="width: 100%; height: calc(100vh - 170px);" viewBox="0 0 ${base} ${base}"
                              @wheel="${this.onWheel}"
                              @mousedown="${this.mouseDown}"
                              @mouseup="${this.mouseUp}"