@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/toast/toast-component.d.ts

@@ -12,6 +12,7 @@ export declare class ToastComponent extends LitElement {
     secondsLeft: number;
     toastLife: number;
     constructor(toast?: Toast);
+    disconnectedCallback(): void;
     close(): void;
     activate(): void;
     renderIcon(): import("lit-html").TemplateResult<1>;

package/dist/components/toast/toast-component.js

@@ -19,6 +19,18 @@ let ToastComponent = class ToastComponent extends LitElement {
         }
         this.secondsLeft = this.toastLife;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.secondTimer) {
+            clearInterval(this.secondTimer);
+            this.secondTimer = undefined;
+        }
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+        this.isActive = false;
+    }
     close() {
         this.toastElement.classList.remove('active');
         this.toastTimer?.remove();
@@ -54,30 +66,33 @@ let ToastComponent = class ToastComponent extends LitElement {
         switch (this.toast.type) {
             case ToastType.INFO:
                 return html `
-                    <sl-icon name="info-square"></sl-icon>`;
+                    <sl-icon name="info-square" aria-hidden="true"></sl-icon>`;
             case ToastType.SUCCESS:
                 return html `
-                    <sl-icon name="check-square"></sl-icon>`;
+                    <sl-icon name="check-square" aria-hidden="true"></sl-icon>`;
             case ToastType.ERROR:
                 return html `
-                    <sl-icon name="x-square"></sl-icon>`;
+                    <sl-icon name="x-square" aria-hidden="true"></sl-icon>`;
             case ToastType.WARNING:
                 return html `
-                    <sl-icon name="exclamation-triangle"></sl-icon>`;
+                    <sl-icon name="exclamation-triangle" aria-hidden="true"></sl-icon>`;
             case ToastType.SCOREDOWN:
                 return html `
-                    <sl-icon name="arrow-down"></sl-icon>`;
+                    <sl-icon name="arrow-down" aria-hidden="true"></sl-icon>`;
             case ToastType.SCOREUP:
                 return html `
-                    <sl-icon name="arrow-up"></sl-icon>`;
+                    <sl-icon name="arrow-up" aria-hidden="true"></sl-icon>`;
             default:
                 return html `
-                    <sl-icon name="info-square"></sl-icon>`;
+                    <sl-icon name="info-square" aria-hidden="true"></sl-icon>`;
         }
     }
     render() {
         return html `
-            <div class="toast ${this.isActive ? 'active' : ''} toast-${this.toast.type}">
+            <div class="toast ${this.isActive ? 'active' : ''} toast-${this.toast.type}"
+                 role="status"
+                 aria-live="polite"
+                 aria-atomic="true">
                 <div class="toast-body">
                     <div class="icon ${this.toast.type}">
                         ${this.renderIcon()}

package/dist/components/toast/toast-manager.d.ts

@@ -4,7 +4,12 @@ import { Toast } from "../../model/toast.js";
 import { AddToastEvent, ToastExpiredEvent } from "../../events/doctor.js";
 export declare class ToastManager extends LitElement {
     toasts: ToastComponent[];
+    private pendingTimeouts;
+    private removeToastHandler;
+    private addToastHandler;
+    private activateTimeoutIds;
     constructor();
+    disconnectedCallback(): void;
     removeToast(evt: CustomEvent<ToastExpiredEvent>): void;
     addToastManually(toast: Toast): void;
     addToast(evt: CustomEvent<AddToastEvent>): void;

package/dist/components/toast/toast-manager.js

@@ -8,19 +8,39 @@ import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { ToastComponent } from "./toast-component.js";
 import { AddToast, ToastExpired } from "../../events/doctor.js";
+import { typedEventHandler } from "../../helpers/typed-events.js";
 let ToastManager = class ToastManager extends LitElement {
     constructor() {
         super();
+        this.pendingTimeouts = new Map();
+        this.activateTimeoutIds = new Set();
         this.toasts = [];
-        // @ts-ignore
-        this.addEventListener(ToastExpired, this.removeToast);
-        // @ts-ignore
-        this.addEventListener(AddToast, this.addToast);
+        this.removeToastHandler = typedEventHandler(this.removeToast.bind(this));
+        this.addToastHandler = typedEventHandler(this.addToast.bind(this));
+        this.addEventListener(ToastExpired, this.removeToastHandler);
+        this.addEventListener(AddToast, this.addToastHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(ToastExpired, this.removeToastHandler);
+        this.removeEventListener(AddToast, this.addToastHandler);
+        this.pendingTimeouts.forEach(id => clearTimeout(id));
+        this.pendingTimeouts.clear();
+        this.activateTimeoutIds.forEach(id => clearTimeout(id));
+        this.activateTimeoutIds.clear();
     }
     removeToast(evt) {
-        setTimeout(() => {
-            this.toasts = this.toasts.filter(toast => toast.toast.id !== evt.detail.toastId);
+        const toastId = evt.detail.toastId;
+        // Clear any existing timeout for this toast
+        const existingTimeout = this.pendingTimeouts.get(toastId);
+        if (existingTimeout !== undefined) {
+            clearTimeout(existingTimeout);
+        }
+        const timeoutId = window.setTimeout(() => {
+            this.pendingTimeouts.delete(toastId);
+            this.toasts = this.toasts.filter(toast => toast.toast.id !== toastId);
         }, 500);
+        this.pendingTimeouts.set(toastId, timeoutId);
     }
     addToastManually(toast) {
         this.toasts.unshift(new ToastComponent(toast));
@@ -32,9 +52,11 @@ let ToastManager = class ToastManager extends LitElement {
     }
     updated() {
         this.toasts?.forEach(toast => {
-            setTimeout(() => {
+            const timeoutId = window.setTimeout(() => {
+                this.activateTimeoutIds.delete(timeoutId);
                 toast.activate();
             }, 200);
+            this.activateTimeoutIds.add(timeoutId);
         });
     }
     render() {

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

@@ -1,6 +1,15 @@
 import { LitElement, TemplateResult } from "lit";
 import { ExplorerEdge } from "./explorer.js";
 import { Edge } from "../../model/graph.js";
+export interface EdgeConfig {
+    edge: ExplorerEdge;
+    bendPoints?: boolean;
+    bendCurve?: boolean;
+    visible?: boolean;
+    animated?: boolean;
+    isDependency?: boolean;
+    dim?: boolean;
+}
 export declare class EdgeComponent extends LitElement {
     edge: ExplorerEdge;
     bendPoints: boolean;
@@ -12,7 +21,8 @@ export declare class EdgeComponent extends LitElement {
     isDependency: boolean;
     dim: boolean;
     animated: boolean;
-    constructor(edge: ExplorerEdge);
+    constructor();
+    configure(config: EdgeConfig): void;
     elkEdgeToSvgPath(edge: Edge): string | undefined;
     render(): TemplateResult<2>;
 }

package/dist/components/visualizer/edge.js

@@ -4,20 +4,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement } from "lit/decorators.js";
 import { LitElement, svg } from "lit";
 import { curveBundle, line } from "d3-shape";
 let EdgeComponent = class EdgeComponent extends LitElement {
-    constructor(edge) {
+    constructor() {
         super();
+        this.visible = true;
+        this.targetIsLeaf = false;
         this.sections = [];
-        let pathFn = line().x((d) => d.x).y((d) => d.y);
-        this.pathFunction = pathFn.curve(curveBundle.beta(1));
-        this.edge = edge;
         this.isDependency = false;
         this.dim = false;
-        this.visible = true;
         this.animated = true;
+        let pathFn = line().x((d) => d.x).y((d) => d.y);
+        this.pathFunction = pathFn.curve(curveBundle.beta(1));
+    }
+    configure(config) {
+        this.edge = config.edge;
+        if (config.bendPoints !== undefined)
+            this.bendPoints = config.bendPoints;
+        if (config.bendCurve !== undefined)
+            this.bendCurve = config.bendCurve;
+        if (config.visible !== undefined)
+            this.visible = config.visible;
+        if (config.animated !== undefined)
+            this.animated = config.animated;
+        if (config.isDependency !== undefined)
+            this.isDependency = config.isDependency;
+        if (config.dim !== undefined)
+            this.dim = config.dim;
+        this.requestUpdate();
     }
     elkEdgeToSvgPath(edge) {
         if (edge.sections) {
@@ -37,7 +53,7 @@ let EdgeComponent = class EdgeComponent extends LitElement {
             return svg ``;
         }
         let x = 0;
-        this.sections = [];
+        this.sections.length = 0;
         this.edge.sections?.forEach((section) => {
             const points = section ? [section.startPoint, ...(section.bendPoints || []), section.endPoint] : [];
             let arrow = 'arrow';
@@ -77,27 +93,16 @@ let EdgeComponent = class EdgeComponent extends LitElement {
                 clazzList.push('no-animation');
             }
             const renderedPath = svg `
-                     <path id="edge-${this.edge.id}-${x}" 
-                        d="${path}" 
-                        class="edge ${clazzList.join(' ')}" 
+                     <path id="edge-${this.edge.id}-${x}"
+                        d="${path}"
+                        class="edge ${clazzList.join(' ')}"
+                        pointer-events="none"
                         marker-end="url(#${arrow})"/>`;
             this.sections.push(renderedPath);
         });
         return svg `${this.sections}`;
     }
 };
-__decorate([
-    property()
-], EdgeComponent.prototype, "edge", void 0);
-__decorate([
-    property({ type: Boolean })
-], EdgeComponent.prototype, "bendPoints", void 0);
-__decorate([
-    property({ type: Boolean })
-], EdgeComponent.prototype, "bendCurve", void 0);
-__decorate([
-    property({ type: Boolean })
-], EdgeComponent.prototype, "visible", void 0);
 EdgeComponent = __decorate([
     customElement('pb33f-explorer-edge')
 ], EdgeComponent);

package/dist/components/visualizer/equalizer.css.js

@@ -6,7 +6,8 @@ export default css `
     }
     .equalizer-container {
         margin-top: 7px;
-        height: 610px;
+        height: auto;
+        max-height: 400px;
         border-bottom: 1px solid var(--secondary-color);
         background-color: var(--background-color-withopacity);
         z-index: 1;
@@ -14,6 +15,7 @@ export default css `
         width: 100%;
         backdrop-filter: blur(2px);
         -webkit-backdrop-filter: blur(2px);
+        padding-bottom: 20px;
     }
 
     .explorer-key-container {
@@ -28,32 +30,19 @@ export default css `
         -webkit-backdrop-filter: blur(2px);
     }
 
-    sl-button.all-or-none {
-        position: absolute;
-        right: calc(50% - 100px);
-        top: 3px;
-    }
-    
-    .equalizer-content {
-        display: flex;
-        height: 545px;
-        overflow: auto;
-        padding: 10px 20px 10px 20px;
-    }
-    
     .controls {
         display: flex;
         margin-left: 10px;
         padding-top: 2px;
         font-size: 0.8rem;
     }
-    
+
     .control {
         padding: 0 0 0 5px;
         margin-right: 5px;
         color: var(--primary-color);
     }
-    
+
     .control sl-icon-button {
         vertical-align: bottom;
         font-size:1rem;
@@ -62,55 +51,23 @@ export default css `
     .control sl-icon-button#eq.active {
         color: var(--primary-color);
     }
-    
-    .control sl-icon-button#eq.pulse {
-        color: var(--warn-color);
-        animation: pulse-animation 1.5s infinite;
-    }
 
-    .control sl-icon-button#eq.seen {
-        color: var(--warn-color);
+    .control sl-icon-button#eq.disabled {
+        color: var(--font-color-sub3);
+        opacity: 0.5;
+        cursor: not-allowed;
     }
-    
+
     .close {
         position: absolute;
         right:0;
         top: 0;
     }
-    
-    .object-container {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        width: 70%;
-    }
-    
-    .object-item {
-        width: 220px;
-    }
-    
-    .mode-container {
-        display: flex;
-        width: 20%;
-    }
-    
+
     sl-checkbox {
         margin-bottom: 10px;
     }
-    
-    .filter {
-        margin-left: 10px;
-        padding-left: 20px;
-        font-size: 0.8rem;
-        border-left: 1px solid var(--secondary-color-dimmer);
-    }
-    .filter:last-child {
-        margin-bottom: 10px;
-    }
-    
-    .mode-container {
-        font-size: 0.8rem;
-    }
+
     sl-range {
         width: 150px;
         --thumb-size: 13px;
@@ -118,16 +75,37 @@ export default css `
         --track-color-active: var(--primary-color);
         --track-color-inactive: var(--font-color-sub3);
     }
-    
+
     sl-range::part(form-control-label) {
         font-size: 0.8rem;
         margin-bottom: 10px;
     }
-    
-    .sizing {
-        width: 200px;
+
+    .layout-grid {
+        display: flex;
+        gap: 30px;
+        padding: 10px 20px;
     }
-    
+
+    .slider-column {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    .controls-column {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding-top: 5px;
+    }
+
+    .button-row {
+        display: flex;
+        gap: 10px;
+        margin-top: 10px;
+    }
+
     .range-container sl-range{
         margin-bottom: 10px;
     }
@@ -135,9 +113,9 @@ export default css `
         margin-bottom: 5px;
         display: flex;
     }
-    
+
     .range-value {
-        display: inline-block; 
+        display: inline-block;
         border: 1px solid var(--primary-color);
         color: var(--primary-color);
         font-family: var(--font-stack-bold), monospace;
@@ -150,24 +128,21 @@ export default css `
         padding-top: 5px;
         text-align-last: center;
     }
-    .references {
-        padding-left: 20px;
-    }
-    
+
     sl-switch {
         margin-bottom: 5px;
     }
-    
+
     .search {
         position: absolute;
         right: 2px;
     }
-    
+
     sl-input.search-input {
         display: inline-block;
         min-width: 300px;
     }
-    
+
     .search-panel {
         position: absolute;
         right: 5px;
@@ -181,7 +156,7 @@ export default css `
         -webkit-backdrop-filter: blur(2px);
         overflow-y: auto;
     }
-    
+
     .search-panel::-webkit-scrollbar {
         width: 8px;
     }
@@ -195,7 +170,7 @@ export default css `
         background: var(--primary-color-lowalpha);
         padding: var(--global-padding);
     }
-    
+
     .search-result, .search-result-empty {
         padding: 5px 5px 5px 10px;
     }
@@ -208,15 +183,15 @@ export default css `
     .search-result sl-icon {
         color: var(--font-color-sub1); !important;
     }
-    
+
     .search-result-active sl-icon {
         color: var(--background-color); !important;
     }
-    
+
     .search-result:hover {
         color: var(--background-color);
         background-color: var(--primary-color);
-        font-family: var(--font-stack-bold), monospace; 
+        font-family: var(--font-stack-bold), monospace;
         cursor: pointer;
     }
 
@@ -224,12 +199,79 @@ export default css `
         color: var(--background-color);
     }
 
+    .pov-container {
+        border-top: 1px solid var(--primary-color);
+        border-bottom: 1px solid var(--primary-color);
+        color: var(--primary-color);
+        padding-top: 5px;
+        padding-bottom: 2px;
+        padding-left: 10px;
+        height: 25px;
+        margin-top: 6px;
+        font-size: 1.2rem;
+        display: flex;
+        position: relative;
+        overflow-y: hidden;
+        background-color: var(--background-color-withopacity);
+    }
+    .pov-copy {
+        display: inline-block;
+        padding-left: 8px;
+        padding-top: 2px;
+        font-size: 0.8rem;
+    }
+
+    .pov-controls {
+        position: absolute;
+        right: 8px;
+        top: 0;
+    }
+
+    .pov-control-button::part(base) {
+        height: 20px;
+        margin-top: 2px;
+        line-height: 18px;
+    }
+
+    .exit {
+        border: 1px solid var(--primary-color);
+        background-color: var(--primary-color);
+        height: 22px;
+    }
+
+    .exit::part(base) {
+        padding: 0 8px;
+        border: none;
+        background: transparent;
+        color: var(--background-color);
+        min-height: unset;
+        margin-top: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .exit:hover {
+        background-color: var(--primary-color);
+    }
+
+    .exit:hover::part(base) {
+        background: transparent;
+        color: var(--background-color);
+    }
+
+    .exit.pulse {
+        animation: pulse-animation 1.5s infinite;
+        margin-left: 5px;
+    }
+
     @keyframes pulse-animation {
         0% {
-            box-shadow: 0 0 0 0 var(--warn-color);
+            box-shadow: 0 0 0 0 var(--primary-color);
         }
         100% {
-            box-shadow: 0 0 0 5px rgb(0, 0, 0, 0);
+            box-shadow: 0 0 0 8px transparent;
         }
     }
 `;

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

@@ -1,6 +1,5 @@
 import '@shoelace-style/shoelace/dist/components/range/range.js';
 import { OrientationControlsComponent } from "./orientation-controls.js";
-import { NodeType } from "../../model/node_type.js";
 import { GraphResponse } from "../../model/graph.js";
 import { HasEyes } from "./has-eyes.js";
 import { Node } from "../../model/graph.js";
@@ -11,22 +10,18 @@ export declare enum NodeSpacing {
     EdgeNodeBetweenLayers = "edgeNodeBetweenLayers",
     EdgeNode = "edgeNode"
 }
+export declare const DefaultMaxNodes = 10000;
 export interface EqualizerConfig {
     objects: string[];
     graph: GraphResponse;
 }
-export interface filter {
-    value: string;
-    label: string;
-    icon: NodeType;
-    enabled?: boolean;
-}
-export interface formObject {
-    [key: string]: string | any;
-}
 export declare class EqualizerComponent extends HasEyes {
     static styles: import("lit").CSSResult[];
-    private equalizerWorker;
+    static getObjectTypes(): {
+        type: string;
+        label: string;
+    }[];
+    equalizerWorker: Worker;
     controls: OrientationControlsComponent;
     keyComponent: ExplorerKeyComponent;
     equalizerOpen: boolean;
@@ -38,60 +33,44 @@ export declare class EqualizerComponent extends HasEyes {
     edgeNode: number;
     bendEdges: boolean;
     bendPoints: boolean;
-    renderRefs: boolean;
-    renderPoly: boolean;
-    dimDependencies: boolean;
     renderEqualizer: boolean;
-    renderObjects: {
-        type: string;
-        label: string;
-        default?: boolean;
-        enabled?: boolean;
-        filters?: filter[];
-    }[];
+    povMode: boolean;
+    maxNodes: number;
     graphResponse: GraphResponse;
     firstBoot: boolean;
-    configuredObjects: Set<string>;
     activeNode: Node;
     private _cachedEQ;
-    private currentObjects;
-    static getObjectTypes(): ({
-        type: NodeType;
-        label: string;
-        enabled: boolean;
-    } | {
-        type: NodeType;
-        label: string;
-        enabled?: undefined;
-    })[];
+    private runEQPromise;
+    private boundHandleEQResult;
+    private boundOpenEqualizer;
+    private boundCloseEqualizer;
+    private boundOpenKey;
+    private boundCloseKey;
+    private boundExitPovMode;
+    private boundHandleAncestorToggle;
     constructor();
+    disconnectedCallback(): void;
     updated(): void;
+    runEQ(rebuild?: boolean): Promise<GraphResponse>;
+    handleEQResult(event: MessageEvent<any>): void;
     navigateToRoot(): void;
-    buildRenderObjects(): void;
-    buildRenderObjectFilters(): void;
     openEqualizer(): void;
     closeEqualizer(): void;
     closeKey(): void;
     openKey(): void;
     isInitialized(): boolean;
     nodeSpacingRangeChanged(id: string): void;
-    processRenderedObjects(): void;
     bendChanged(): void;
     bendPointsChanged(): void;
-    refsChanged(): void;
-    polyChanged(): void;
-    dimmingChanged(): void;
+    exitPovMode(): void;
+    handleAncestorToggle(evt: CustomEvent): void;
     private initialized;
-    initializeEqualizer(): void;
-    runEQ(rebuild?: boolean): void;
+    initializeEqualizer(): Promise<GraphResponse>;
     componentVisible(): void;
     componentHidden(): void;
-    sendConfig(): void;
+    sendConfig(): Promise<GraphResponse>;
     private extractSpacing;
-    checkObjectForFilters(object: any): void;
-    checkObjectForUncheckedParent(object: any, filter: string): void;
-    private _allChecked;
-    allTheThings(): void;
+    private _inPovMode;
     equalizer(): import("lit-html").TemplateResult<1>;
     key(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;