@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/visualizer/equalizer.js

@@ -4,22 +4,19 @@ 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;
 };
-var EqualizerComponent_1;
 import '@shoelace-style/shoelace/dist/components/range/range.js';
-import { serialize } from '@shoelace-style/shoelace/dist/utilities/form.js';
 import { customElement, property, query } from "lit/decorators.js";
 import { html } from "lit";
 import equalizerCss from "./equalizer.css.js";
 import { OrientationControlsComponent } from "./orientation-controls.js";
-import { ExplorerEqualizerChanged, ExplorerEqualizerClose, ExplorerEqualizerFiltered, ExplorerEqualizerOpen, ExplorerKeyClose, ExplorerKeyOpen, ModelTreeNodeClicked } from "../../events/doctor.js";
+import { ExplorerEqualizerChanged, ExplorerEqualizerClose, ExplorerEqualizerFiltered, ExplorerEqualizerOpen, ExplorerKeyClose, ExplorerKeyOpen, ExplorerPovModeExit, ExplorerPovAncestorsToggle, ModelTreeNodeClicked } from "../../events/doctor.js";
 import EqualizerWorker from "../../workers/equalizer.worker.js?worker";
 import sharedCss from "./shared.css.js";
 import formsCss from "../../css/forms.css.js";
-import { NodeType } from "../../model/node_type.js";
-import { IconSize } from "../model-icon/model-icon.js";
 import buttonCss from "../../css/button.css.js";
 import { HasEyes } from "./has-eyes.js";
 import { ExplorerKeyComponent } from "./key.js";
+import { NodeType } from "../../model/node_type.js";
 export var NodeSpacing;
 (function (NodeSpacing) {
     NodeSpacing["NodeNodeBetweenLayers"] = "nodeNodeBetweenLayers";
@@ -27,36 +24,49 @@ export var NodeSpacing;
     NodeSpacing["EdgeNodeBetweenLayers"] = "edgeNodeBetweenLayers";
     NodeSpacing["EdgeNode"] = "edgeNode";
 })(NodeSpacing || (NodeSpacing = {}));
-let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends HasEyes {
+export const DefaultMaxNodes = 10000;
+let EqualizerComponent = class EqualizerComponent extends HasEyes {
     static getObjectTypes() {
         return [
-            { type: NodeType.OPERATION, label: 'Operations', enabled: true },
-            { type: NodeType.PARAMETER, label: 'Parameters', enabled: true },
-            { type: NodeType.SCHEMA, label: 'Schemas', enabled: true },
-            { type: NodeType.INFO, label: 'Information', enabled: true },
-            { type: NodeType.CONTACT, label: 'Contact' },
-            { type: NodeType.LICENSE, label: 'License' },
-            { type: NodeType.RESPONSE, label: 'Responses', enabled: true },
-            { type: NodeType.SERVER, label: 'Servers', enabled: true },
-            { type: NodeType.SERVER_VARIABLE, label: 'Server Variables' },
-            { type: NodeType.PATH_ITEM, label: 'Paths', enabled: true },
-            { type: NodeType.MEDIA_TYPE, label: 'Media Types', enabled: true },
-            { type: NodeType.REQUEST_BODY, label: 'Request Bodies', enabled: true },
-            { type: NodeType.EXAMPLE, label: 'Examples', enabled: false },
-            { type: NodeType.LINK, label: 'Links', enabled: true },
-            { type: NodeType.HEADER, label: 'Headers', enabled: true },
-            { type: NodeType.ENCODING, label: 'Encodings' },
-            { type: NodeType.TAG, label: 'Tags', enabled: true },
-            { type: NodeType.SECURITY, label: 'Security', enabled: true },
-            { type: NodeType.CALLBACK, label: 'Callbacks', enabled: true },
-            { type: NodeType.WEBHOOK, label: 'Webhooks', enabled: true },
+            { type: NodeType.DOCUMENT, label: 'Document' },
+            { type: NodeType.INFO, label: 'Info' },
+            { type: NodeType.PATHS, label: 'Paths' },
+            { type: NodeType.PATH_ITEM, label: 'Path Item' },
+            { type: NodeType.OPERATION, label: 'Operation' },
+            { type: NodeType.PARAMETER, label: 'Parameter' },
+            { type: NodeType.REQUEST_BODY, label: 'Request Body' },
+            { type: NodeType.RESPONSE, label: 'Response' },
+            { type: NodeType.MEDIA_TYPE, label: 'Media Type' },
+            { type: NodeType.SCHEMA, label: 'Schema' },
+            { type: NodeType.COMPONENTS, label: 'Components' },
+            { type: NodeType.SCHEMAS, label: 'Schemas' },
+            { type: NodeType.RESPONSES, label: 'Responses' },
+            { type: NodeType.PARAMETERS, label: 'Parameters' },
+            { type: NodeType.REQUEST_BODIES, label: 'Request Bodies' },
+            { type: NodeType.HEADERS, label: 'Headers' },
+            { type: NodeType.SECURITY_SCHEMES, label: 'Security Schemes' },
+            { type: NodeType.LINKS, label: 'Links' },
+            { type: NodeType.CALLBACKS, label: 'Callbacks' },
+            { type: NodeType.SERVERS, label: 'Servers' },
+            { type: NodeType.SERVER, label: 'Server' },
+            { type: NodeType.TAGS, label: 'Tags' },
+            { type: NodeType.TAG, label: 'Tag' },
+            { type: NodeType.EXTERNAL_DOCS, label: 'External Docs' },
+            { type: NodeType.WEBHOOKS, label: 'Webhooks' },
+            { type: NodeType.WEBHOOK, label: 'Webhook' },
+            { type: NodeType.EXAMPLE, label: 'Example' },
+            { type: NodeType.HEADER, label: 'Header' },
+            { type: NodeType.LINK, label: 'Link' },
+            { type: NodeType.CALLBACK, label: 'Callback' },
+            { type: NodeType.SECURITY_SCHEME, label: 'Security Scheme' },
+            { type: NodeType.POLYMORPHIC, label: 'Polymorphic' },
         ];
     }
     constructor() {
         super();
-        this.configuredObjects = new Set();
+        this.maxNodes = DefaultMaxNodes;
         this.initialized = false;
-        this._allChecked = false;
+        this._inPovMode = false;
         this.renderEqualizer = true;
         this.controls = new OrientationControlsComponent();
         this.keyComponent = new ExplorerKeyComponent();
@@ -64,85 +74,144 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
         this.equalizerOpen = false;
         this.keyOpen = false;
         this.equalizerWorker = new EqualizerWorker();
-        this.equalizerWorker.addEventListener("message", (event) => {
-            this.controls.searchComponent.graphResponse = event.data;
-            this.controls.searchComponent.currentObjects = this.currentObjects;
-            this.controls.searchComponent.currentObjects = this.currentObjects;
-            if (!this.firstBoot) {
-                this.dispatchEvent(new CustomEvent(ExplorerEqualizerFiltered, {
-                    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
-                        }
-                    }
-                }));
-                // select the root after the equalizer has run with defaults
-                // setTimeout(() => {
-                //     if (!this.activeNode)
-                //         this.navigateToRoot();
-                //         this.firstBoot = false;
-                // }, 350); // delay a few MS to allow event bubbling to complete
-            }
-            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));
-        this.addEventListener(ExplorerKeyOpen, this.openKey.bind(this));
-        this.addEventListener(ExplorerKeyClose, this.closeKey.bind(this));
-        this.buildRenderObjects();
-        this.buildRenderObjectFilters();
+        // Store bound handlers for cleanup
+        this.boundHandleEQResult = this.handleEQResult.bind(this);
+        this.boundOpenEqualizer = this.openEqualizer.bind(this);
+        this.boundCloseEqualizer = this.closeEqualizer.bind(this);
+        this.boundOpenKey = this.openKey.bind(this);
+        this.boundCloseKey = this.closeKey.bind(this);
+        this.boundExitPovMode = this.exitPovMode.bind(this);
+        this.boundHandleAncestorToggle = this.handleAncestorToggle.bind(this);
+        this.equalizerWorker.addEventListener("message", this.boundHandleEQResult);
+        this.controls.addEventListener(ExplorerEqualizerOpen, this.boundOpenEqualizer);
+        this.controls.addEventListener(ExplorerEqualizerClose, this.boundCloseEqualizer);
+        this.addEventListener(ExplorerKeyOpen, this.boundOpenKey);
+        this.addEventListener(ExplorerKeyClose, this.boundCloseKey);
+        this.controls.addEventListener(ExplorerPovModeExit, this.boundExitPovMode);
+        this.controls.addEventListener(ExplorerPovAncestorsToggle, this.boundHandleAncestorToggle);
         this.firstBoot = true;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.equalizerWorker.removeEventListener("message", this.boundHandleEQResult);
+        this.equalizerWorker.terminate();
+        this.controls.removeEventListener(ExplorerEqualizerOpen, this.boundOpenEqualizer);
+        this.controls.removeEventListener(ExplorerEqualizerClose, this.boundCloseEqualizer);
+        this.removeEventListener(ExplorerKeyOpen, this.boundOpenKey);
+        this.removeEventListener(ExplorerKeyClose, this.boundCloseKey);
+        this.controls.removeEventListener(ExplorerPovModeExit, this.boundExitPovMode);
+        this.controls.removeEventListener(ExplorerPovAncestorsToggle, this.boundHandleAncestorToggle);
+    }
     updated() {
         this.controls.renderEqualizer = this.renderEqualizer;
+        this.controls.povMode = this.povMode;
+    }
+    async runEQ(rebuild = false) {
+        this.runEQPromise = new Promise(resolve => {
+            const workerObject = {};
+            workerObject.graphResponse = this.graphResponse;
+            workerObject.rebuild = rebuild;
+            this.extractSpacing(workerObject);
+            // create a one-time handler that removes itself after use
+            const onceHandler = (event) => {
+                this.equalizerWorker.removeEventListener("message", onceHandler);
+                resolve(event.data);
+            };
+            this.equalizerWorker.addEventListener("message", onceHandler);
+            if (this._visible || rebuild) {
+                this.equalizerWorker.postMessage(workerObject);
+            }
+            else {
+                this._cachedEQ = workerObject;
+                this.equalizerWorker.removeEventListener("message", onceHandler);
+                resolve(workerObject);
+            }
+        });
+        return this.runEQPromise;
+    }
+    handleEQResult(event) {
+        // Check if this is a POV mode result
+        if (event.data.povMode) {
+            this.povMode = true;
+            this.equalizerOpen = false;
+            this.controls.equalizerClosed = true;
+            this.controls.povMode = true;
+            if (!this._inPovMode) {
+                this._inPovMode = true;
+            }
+            const povResponse = {
+                nodes: event.data.nodes,
+                edges: event.data.edges,
+                spacing: {
+                    nodeNodeBetweenLayers: this.nodeNodeBetweenLayers,
+                    nodeNode: this.nodeNode,
+                    edgeNodeBetweenLayers: this.edgeNodeBetweenLayers,
+                    edgeNode: this.edgeNode,
+                    bendEdges: this.bendEdges,
+                    bendPoints: this.bendPoints
+                },
+                povMode: true,
+                povNodeId: event.data.povNodeId
+            };
+            this.dispatchEvent(new CustomEvent(ExplorerEqualizerFiltered, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    graph: povResponse,
+                    spacing: povResponse.spacing,
+                    povMode: true,
+                    povNodeId: event.data.povNodeId
+                }
+            }));
+            return;
+        }
+        this.controls.searchComponent.graphResponse = event.data;
+        if (!this.firstBoot) {
+            const detail = {
+                graph: event.data,
+                spacing: {
+                    nodeNodeBetweenLayers: this.nodeNodeBetweenLayers,
+                    nodeNode: this.nodeNode,
+                    edgeNodeBetweenLayers: this.edgeNodeBetweenLayers,
+                    edgeNode: this.edgeNode,
+                    bendEdges: this.bendEdges,
+                    bendPoints: this.bendPoints
+                },
+                povMode: false
+            };
+            this.dispatchEvent(new CustomEvent(ExplorerEqualizerFiltered, {
+                bubbles: true,
+                composed: true,
+                detail: detail,
+            }));
+        }
+        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
+                    },
+                    povMode: false
+                }
+            }));
+            if (this.firstBoot) {
+                setTimeout(() => {
+                    if (!this.activeNode)
+                        this.navigateToRoot();
+                    this.firstBoot = false;
+                }, 2000);
+            }
+        }
     }
     navigateToRoot() {
         this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
@@ -154,53 +223,14 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
             }
         }));
     }
-    buildRenderObjects() {
-        this.renderObjects = EqualizerComponent_1.getObjectTypes();
-    }
-    buildRenderObjectFilters() {
-        this.renderObjects.forEach((object) => {
-            switch (object.type) {
-                case NodeType.RESPONSE:
-                    object.filters = [
-                        { value: '2XX', label: 'Success (2xx)', icon: NodeType.RESPONSE, enabled: true },
-                        { value: '3XX', label: 'Redirect (3xx)', icon: NodeType.RESPONSE, enabled: true },
-                        { value: '4XX', label: 'Client Error (4xx)', icon: NodeType.RESPONSE, enabled: true },
-                        { value: '5XX', label: 'Server Error (5xx)', icon: NodeType.RESPONSE, enabled: true },
-                    ];
-                    break;
-                case NodeType.PARAMETER:
-                    object.filters = [
-                        { value: 'query', label: 'Queries', icon: NodeType.PARAMETER_QUERY, enabled: true },
-                        { value: 'header', label: 'Headers', icon: NodeType.HEADER, enabled: true },
-                        { value: 'path', label: 'Paths', icon: NodeType.PATH_ITEM, enabled: true },
-                        { value: 'cookie', label: 'Cookies', icon: NodeType.COOKIE, enabled: true },
-                    ];
-                    break;
-                case NodeType.OPERATION:
-                    object.filters = [
-                        { value: 'get', label: 'get', icon: NodeType.OPERATION, enabled: true },
-                        { value: 'post', label: 'post', icon: NodeType.OPERATION, enabled: true },
-                        { value: 'put', label: 'put', icon: NodeType.OPERATION, enabled: true },
-                        { value: 'patch', label: 'patch', icon: NodeType.OPERATION, enabled: true },
-                        { value: 'delete', label: 'delete', icon: NodeType.OPERATION, enabled: true },
-                        { value: 'head', label: 'head', icon: NodeType.OPERATION },
-                        { value: 'options', label: 'options', icon: NodeType.OPERATION },
-                        { value: 'trace', label: 'trace', icon: NodeType.OPERATION },
-                    ];
-                    break;
-            }
-        });
-    }
     openEqualizer() {
         this.equalizerOpen = true;
         this.controls.equalizerClosed = false;
-        this.controls.eqPulse = false;
         this.requestUpdate();
     }
     closeEqualizer() {
         this.equalizerOpen = false;
         this.controls.equalizerClosed = true;
-        this.controls.eqPulse = false;
         this.requestUpdate();
     }
     closeKey() {
@@ -234,17 +264,6 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
                 break;
         }
     }
-    processRenderedObjects() {
-        this.renderObjects.forEach((object) => {
-            const f = serialize(this.form);
-            object.enabled = f.hasOwnProperty(object.type);
-            if (object.filters) {
-                object.filters.forEach((filter) => {
-                    filter.enabled = f.hasOwnProperty(`${object.type}_filter_${filter.value}`);
-                });
-            }
-        });
-    }
     bendChanged() {
         this.bendEdges = !this.bendEdges;
         if (this.bendEdges) {
@@ -254,108 +273,61 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
     bendPointsChanged() {
         this.bendPoints = !this.bendPoints;
     }
-    refsChanged() {
-        this.renderRefs = !this.renderRefs;
-        if (!this.renderRefs && this.renderPoly) {
-            this.renderPoly = false;
-        }
-    }
-    polyChanged() {
-        this.renderPoly = !this.renderPoly;
-        if (this.renderPoly && !this.renderRefs) {
-            this.renderRefs = true;
-        }
-    }
-    dimmingChanged() {
-        this.dimDependencies = !this.dimDependencies;
+    exitPovMode() {
+        this.povMode = false;
+        this._inPovMode = false;
+        this.controls.povMode = false;
+        this.controls.equalizerClosed = true;
+        this.controls.showAncestors = true;
+        this.runEQ(true);
     }
-    // run the initial graph through the defaults to turn down the noise on the initial render
-    initializeEqualizer() {
-        if (this.initialized) {
-            return;
-        }
-        const bootObject = {};
-        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) {
-                    object.filters.forEach((filter) => {
-                        if (filter.enabled) {
-                            bootObject[`${object.type}_filter_${filter.value}`] = true;
-                        }
-                    });
-                }
+    handleAncestorToggle(evt) {
+        const showAncestors = evt.detail.showAncestors;
+        this.dispatchEvent(new CustomEvent('reprocessPov', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                showAncestors: showAncestors
             }
-        }
-        const workerObject = { objects: bootObject };
-        workerObject.graphResponse = this.graphResponse;
-        workerObject.references = {
-            renderRefs: this.renderRefs,
-            renderPoly: this.renderPoly
-        };
-        this.configuredObjects = new Set(Object.keys(bootObject));
-        this.extractSpacing(workerObject);
-        this.currentObjects = workerObject.objects;
-        this.equalizerWorker.postMessage(workerObject);
+        }));
     }
-    runEQ(rebuild = false) {
-        if (this.configuredObjects && this.configuredObjects.size > 0) {
+    async initializeEqualizer() {
+        return new Promise((resolve) => {
+            if (this.initialized) {
+                resolve(this.graphResponse);
+                return;
+            }
             const workerObject = {};
-            const configuredObjects = {};
-            this.configuredObjects.forEach((object) => {
-                configuredObjects[object] = true;
-            });
-            workerObject.objects = configuredObjects;
             workerObject.graphResponse = this.graphResponse;
-            workerObject.rebuild = rebuild;
-            workerObject.references = {
-                renderRefs: this.renderRefs,
-                renderPoly: this.renderPoly
-            };
             this.extractSpacing(workerObject);
-            if (this._visible || rebuild) {
-                this.equalizerWorker.postMessage(workerObject);
-            }
-            else {
-                this._cachedEQ = workerObject;
-            }
-            this.currentObjects = configuredObjects;
-        }
+            const initHandler = (event) => {
+                this.equalizerWorker.removeEventListener("message", initHandler);
+                resolve(event.data);
+            };
+            this.equalizerWorker.addEventListener("message", initHandler);
+            this.equalizerWorker.postMessage(workerObject);
+        });
     }
     componentVisible() {
         super.componentVisible();
-        if (this._cachedEQ) {
-            // this.equalizerWorker.postMessage(this._cachedEQ);
-            //this._cachedEQ = null
-        }
     }
     componentHidden() {
         super.componentHidden();
         this.controls.searchComponent.disableSearchPanel();
     }
-    sendConfig() {
-        if (this.form) {
-            const form = serialize(this.form);
+    async sendConfig() {
+        return new Promise((resolve) => {
             const workerObject = {};
-            if (Object.keys(form).length > 0) {
-                workerObject.objects = form;
-            }
             workerObject.graphResponse = this.graphResponse;
-            workerObject.references = {
-                renderRefs: this.renderRefs,
-                renderPoly: this.renderPoly
-            };
             this.extractSpacing(workerObject);
-            this.currentObjects = workerObject.objects;
+            const configHandler = (event) => {
+                this.equalizerWorker.removeEventListener("message", configHandler);
+                resolve(event.data);
+            };
+            this.equalizerWorker.addEventListener("message", configHandler);
             this.equalizerWorker.postMessage(workerObject);
-            this.configuredObjects = new Set(Object.keys(workerObject.objects));
-            this.processRenderedObjects();
             this.closeEqualizer();
-        }
+        });
     }
     extractSpacing(workerObject) {
         workerObject.spacing = {
@@ -367,134 +339,64 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
             bendPoints: this.bendPoints
         };
     }
-    checkObjectForFilters(object) {
-        // get object checked state
-        const objectElement = this.shadowRoot?.querySelector(`[name=${object.type}]`);
-        if (object.filters) {
-            object.filters.forEach((filter) => {
-                const filterElement = this.shadowRoot?.querySelector(`[name=${object.type}_filter_${filter.value}]`);
-                if (filterElement) {
-                    filterElement.checked = objectElement.checked;
-                }
-            });
-        }
-    }
-    checkObjectForUncheckedParent(object, filter) {
-        const objectElement = this.shadowRoot?.querySelector(`[name=${object.type}]`);
-        const filterElement = this.shadowRoot?.querySelector(`[name=${filter}]`);
-        if (filterElement && objectElement) {
-            if (filterElement.checked && !objectElement.checked) {
-                objectElement.checked = true;
-            }
-        }
-    }
-    allTheThings() {
-        const form = this.shadowRoot?.querySelector('form');
-        const all = form.querySelectorAll('sl-checkbox');
-        all.forEach((checkbox) => {
-            checkbox.checked = !this._allChecked;
-        });
-        this._allChecked = !this._allChecked;
-        this.requestUpdate();
-    }
     equalizer() {
         return html `
-            <div class="equalizer-container">
-                <h4 style="margin-top: 10px; margin-left: 20px;">Explorer Equalizer</h4>
-                <sl-button class="all-or-none" size="small" @click="${this.allTheThings}">
-                     ${this._allChecked ? 'Unselect' : 'Select'} all the things
-                </sl-button>
-                <sl-icon-button name="x-lg" @click="${this.closeEqualizer}" class="close"></sl-icon-button>
+            <div class="equalizer-container" role="region" aria-label="Layout settings">
+                <h4 style="margin-top: 10px; margin-left: 20px;">Layout Settings</h4>
+                <sl-icon-button name="x-lg" label="Close settings" @click="${this.closeEqualizer}" class="close"></sl-icon-button>
                 <form>
-                    <div class="equalizer-content">
-                        <div class="object-container">
-                            ${this.renderObjects.map((object) => html `
-                                <div>
-                                    <sl-checkbox name="${object.type}" label="${object.label}"
-                                                 ?checked="${object.enabled}"
-                                                 @sl-change="${() => this.checkObjectForFilters(object)}">
-                                        <pb33f-model-icon icon="${object.type}"
-                                                          size="${IconSize.smaller}"></pb33f-model-icon>
-                                        ${object.label}
-                                    </sl-checkbox>
-                                    ${object.filters ? object.filters.map((filter) => html `
-                                        <div class="filter">
-                                            <sl-checkbox size="small" name="${object.type}_filter_${filter.value}"
-                                                         label="${filter.label}" ?checked="${filter.enabled}"
-                                                         @sl-change="${() => this.checkObjectForUncheckedParent(object, object.type + '_filter_' + filter.value)}">
-                                                <pb33f-model-icon icon="${filter.icon}"
-                                                                  size="${IconSize.tiny}"></pb33f-model-icon>
-                                                ${object.type === NodeType.OPERATION ? html `
-                                                    <pb33f-http-method method=${filter.label}
-                                                                       tiny></pb33f-http-method>` : filter.label}
-                                        </div>
-                                    `) : ''}
-                                </div>
-                            `)}
+                    <div class="layout-grid">
+                        <div class="slider-column">
+                            <div class="range-container">
+                                <sl-range id="${NodeSpacing.NodeNodeBetweenLayers}"
+                                          @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.NodeNodeBetweenLayers)}"
+                                          label="Layer Spacing" min="10" max="600"
+                                          value="${this.nodeNodeBetweenLayers}"></sl-range>
+                                <span class="range-value">${this.nodeNodeBetweenLayers}</span>
+                            </div>
+                            <div class="range-container">
+                                <sl-range id="${NodeSpacing.NodeNode}"
+                                          @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.NodeNode)}"
+                                          label="Node Spacing" min="10" max="600"
+                                          value="${this.nodeNode}"></sl-range>
+                                <span class="range-value">${this.nodeNode}</span>
+                            </div>
+                        </div>
+                        <div class="slider-column">
+                            <div class="range-container">
+                                <sl-range id="${NodeSpacing.EdgeNodeBetweenLayers}"
+                                          @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.EdgeNodeBetweenLayers)}"
+                                          label="Edges Between Layers" min="5" max="600"
+                                          value="${this.edgeNodeBetweenLayers}"></sl-range>
+                                <span class="range-value">${this.edgeNodeBetweenLayers}</span>
+                            </div>
+                            <div class="range-container">
+                                <sl-range id="${NodeSpacing.EdgeNode}"
+                                          @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.EdgeNode)}"
+                                          label="Edge & Node Spacing" min="5" max="600"
+                                          value="${this.edgeNode}"></sl-range>
+                                <span class="range-value">${this.edgeNode}</span>
+                            </div>
                         </div>
-
-                        <div class="mode-container">
-                            <div class="sizing">
-                                <div class="range-container">
-                                    <sl-range id="${NodeSpacing.NodeNodeBetweenLayers}"
-                                              @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.NodeNodeBetweenLayers)}"
-                                              label="Layer Spacing" min="10" max="600"
-                                              value="${this.nodeNodeBetweenLayers}"></sl-range>
-                                    <span class="range-value">${this.nodeNodeBetweenLayers}</span>
-                                </div>
-                                <div class="range-container">
-                                    <sl-range id="${NodeSpacing.NodeNode}"
-                                              @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.NodeNode)}"
-                                              label="Node Spacing" min="10" max="600"
-                                              value="${this.nodeNode}"></sl-range>
-                                    <span class="range-value">${this.nodeNode}</span>
-
-                                </div>
-                                <div class="range-container">
-                                    <sl-range id="${NodeSpacing.EdgeNodeBetweenLayers}"
-                                              @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.EdgeNodeBetweenLayers)}"
-                                              label="Edges Between Layers" min="5" max="600"
-                                              value="${this.edgeNodeBetweenLayers}"></sl-range>
-                                    <span class="range-value">${this.edgeNodeBetweenLayers}</span>
-
-                                </div>
-                                <div class="range-container">
-                                    <sl-range id="${NodeSpacing.EdgeNode}"
-                                              @sl-change="${() => this.nodeSpacingRangeChanged(NodeSpacing.EdgeNode)}"
-                                              label="Edge & Node Spacing" min="5" max="600"
-                                              value="${this.edgeNode}"></sl-range>
-                                    <span class="range-value">${this.edgeNode}</span>
-
-                                </div>
-                                <sl-switch size="small" @sl-change=${this.dimmingChanged} ?checked=${this.dimDependencies}>
-                                    Dim Dependencies
-                                </sl-switch> <br/>
-                                
-                                <sl-switch size="small" @sl-change=${this.bendChanged} ?checked=${this.bendEdges}>
-                                    Curved Edges
-                                </sl-switch> &nbsp;
-                                <br/>
-                                <sl-switch size="small" @sl-change=${this.bendPointsChanged}
-                                           ?checked=${this.bendPoints}>
-                                    Bend Points
-                                </sl-switch>
-                                <br/>
-                                <sl-switch size="small" @sl-change=${this.refsChanged} ?checked=${this.renderRefs}>
-                                    <span style="color: var(--terminal-text)">References</span>
-                                </sl-switch> &nbsp;
-                                <sl-switch size="small" @sl-change=${this.polyChanged} ?checked=${this.renderPoly}>
-                                    <span style="color: var(--warn-color)">Polymorphic References</span>
-                                </sl-switch> &nbsp;
-                                <br/><br/>
+                        <div class="controls-column">
+                            <sl-switch size="small" @sl-change=${this.bendChanged} ?checked=${this.bendEdges}>
+                                Curved Edges
+                            </sl-switch>
+                            <sl-switch size="small" @sl-change=${this.bendPointsChanged}
+                                       ?checked=${this.bendPoints}>
+                                Bend Points
+                            </sl-switch>
+                            <div class="button-row">
                                 <sl-button @click="${this.sendConfig}">
-                                    <sl-icon name="broadcast-pin" slot="prefix"></sl-icon>
-                                    Tune visualization</sl-button>
-                                <sl-button @click="${this.closeEqualizer}" class="close-button" style="margin-top: 20px;">Cancel
+                                    <sl-icon name="broadcast-pin" slot="prefix" aria-hidden="true"></sl-icon>
+                                    Tune visualization
+                                </sl-button>
+                                <sl-button @click="${this.closeEqualizer}" class="close-button">
+                                    Cancel
                                 </sl-button>
                             </div>
                         </div>
                     </div>
-                   
                 </form>
             </div>
         `;
@@ -540,17 +442,14 @@ __decorate([
 ], EqualizerComponent.prototype, "bendPoints", void 0);
 __decorate([
     property({ type: Boolean })
-], EqualizerComponent.prototype, "renderRefs", void 0);
-__decorate([
-    property({ type: Boolean })
-], EqualizerComponent.prototype, "renderPoly", void 0);
+], EqualizerComponent.prototype, "renderEqualizer", void 0);
 __decorate([
     property({ type: Boolean })
-], EqualizerComponent.prototype, "dimDependencies", void 0);
+], EqualizerComponent.prototype, "povMode", void 0);
 __decorate([
-    property({ type: Boolean })
-], EqualizerComponent.prototype, "renderEqualizer", void 0);
-EqualizerComponent = EqualizerComponent_1 = __decorate([
+    property({ type: Number })
+], EqualizerComponent.prototype, "maxNodes", void 0);
+EqualizerComponent = __decorate([
     customElement('pb33f-explorer-equalizer')
 ], EqualizerComponent);
 export { EqualizerComponent };