@pb33f/cowboy-components 0.2.0 → 0.2.2

package/dist/components/model-tree/tree-item.js

@@ -0,0 +1,37 @@
+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/tree-item/tree-item.js';
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { SlTreeItem } from "@shoelace-style/shoelace";
+let ModelTreeItem = class ModelTreeItem extends SlTreeItem {
+    constructor(node, results) {
+        super();
+        this.node = node;
+        this.results = results;
+    }
+    render() {
+        return html `
+            <sl-tree-item expanded>
+                <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
+                <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+                ${this.node.label} (${this.node.nodePath})
+                ${this.results}
+            </sl-tree-item>
+        `;
+    }
+};
+__decorate([
+    property()
+], ModelTreeItem.prototype, "node", void 0);
+__decorate([
+    property()
+], ModelTreeItem.prototype, "results", void 0);
+ModelTreeItem = __decorate([
+    customElement("pb33f-model-treeitem")
+], ModelTreeItem);
+export { ModelTreeItem };

package/dist/components/model-tree/tree.css.d.ts

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

package/dist/components/model-tree/tree.css.js

@@ -0,0 +1,20 @@
+import { css } from "lit";
+export default css `
+
+    sl-tree {
+        --indent-guide-width: 1px;
+        --indent-guide-color: var(--secondary-color);
+        --indent-guide-style: dashed;
+        
+        
+    }
+    sl-tree-item {
+            
+    }
+    
+    
+    sl-tree-item::part(expand-button) {
+        rotate: none;
+    }
+    
+`;

package/dist/components/model-tree/tree.d.ts

@@ -0,0 +1,16 @@
+import '@shoelace-style/shoelace/dist/components/tree/tree.js';
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import { LitElement, TemplateResult } from "lit";
+import { Node } from "../visualizer/visualizer.js";
+import { SlTreeItem } from "@shoelace-style/shoelace";
+export declare class ModelTree extends LitElement {
+    static styles: import("lit").CSSResult[];
+    node: Node;
+    nodeClicked(nodeHashId: string): void;
+    explorerClicked(nodeHashId: string): void;
+    collapse(evt: Event, node: Node): void;
+    expanded(evt: Event, node: Node): void;
+    buildTree(node: Node, depth: number): TemplateResult;
+    nodesSelected(treeItems: SlTreeItem[]): void;
+    render(): TemplateResult<1>;
+}

package/dist/components/model-tree/tree.js

@@ -0,0 +1,103 @@
+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/tree/tree.js';
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import treeCss from "./tree.css.js";
+import { ModelTreeNodeClicked } from "../../events/doctor";
+let ModelTree = class ModelTree extends LitElement {
+    nodeClicked(nodeHashId) {
+        this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                nodeHashId: nodeHashId
+            }
+        }));
+    }
+    explorerClicked(nodeHashId) {
+        const treeItems = this.renderRoot.querySelectorAll(`sl-tree-item`);
+        let selected = null;
+        for (let i = 0; i < treeItems.length; i++) {
+            const item = treeItems[i];
+            item.selected = item.id === `model-${nodeHashId}`;
+            item.expanded = true;
+            if (item.selected) {
+                selected = item;
+            }
+        }
+        if (selected) {
+            requestAnimationFrame(() => {
+                selected?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+            });
+        }
+    }
+    collapse(evt, node) {
+        evt.stopPropagation();
+        node.treeExpanded = false;
+    }
+    expanded(evt, node) {
+        evt.stopPropagation();
+        node.treeExpanded = true;
+    }
+    buildTree(node, depth) {
+        let results = [];
+        if (node.nodes && node.nodes.length > 0) {
+            for (let i = 0; i < node.nodes.length; i++) {
+                depth++;
+                results.push(this.buildTree(node.nodes[i], depth));
+            }
+        }
+        let expanded = node.treeExpanded;
+        if (depth < 2) {
+            expanded = true;
+        }
+        return html `
+            <sl-tree-item id="model-${node.idHash}" ?expanded="${expanded}" 
+                          @sl-expand="${(evt) => {
+            this.expanded(evt, node);
+        }}"
+                          @sl-collapse="${(evt) => {
+            this.collapse(evt, node);
+        }}">
+                <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
+                <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+                <span >${node.label}</span>
+                ${results}
+            </sl-tree-item>
+        `;
+    }
+    nodesSelected(treeItems) {
+        for (let i = 0; i < treeItems.length; i++) {
+            this.nodeClicked(treeItems[i].id);
+        }
+    }
+    render() {
+        if (!this.node) {
+            return html ``;
+        }
+        return html `
+            <sl-tree @sl-selection-change="${(evt) => {
+            {
+                const selected = evt.detail.selection;
+                this.nodesSelected(selected);
+            }
+        }}">
+                ${this.buildTree(this.node, 0)}
+            </sl-tree>
+        `;
+    }
+};
+ModelTree.styles = [treeCss];
+__decorate([
+    property()
+], ModelTree.prototype, "node", void 0);
+ModelTree = __decorate([
+    customElement("pb33f-model-tree")
+], ModelTree);
+export { ModelTree };

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

@@ -177,7 +177,7 @@ export default css `
     
     .spinner-draw-closed {
         top: 35px;
-        right: 2px;
+        right: 8px;
     }
 
     pb33f-toast-manager {
@@ -219,7 +219,7 @@ export default css `
     }
     .collapse-side {
         position: absolute;
-        right: 0;
+        right: 5px;
         top: 0;
         padding: 0;
         color: var(--secondary-color);

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

@@ -7,7 +7,7 @@ import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import '@shoelace-style/shoelace/dist/components/badge/badge.js';
 import { LitElement } from "lit";
-import { AddToastEvent, EditorUpdatedEvent, ProblemRuleFilterChangedEvent, RulesetSavedEvent, RuleClickedEvent } from "../../events/doctor.js";
+import { AddToastEvent, EditorUpdatedEvent, ProblemRuleFilterChangedEvent, RulesetSavedEvent, RuleClickedEvent, NodeClickedEvent } from "../../events/doctor.js";
 import { ProblemDrawerEvent } from "../problem-list/details-drawer.js";
 import { SlDialog, SlIcon, SlRadioGroup, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
 import { AttentionBox } from "../attention-box/attention-box.js";
@@ -87,6 +87,7 @@ export declare class TheDoctor extends LitElement {
     private selectedEditorTab;
     private sidebarClosed;
     constructor(doctorEndpoint?: string);
+    modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
     exportRuleset(): void;
     addToastEvent(event: CustomEvent<AddToastEvent>): void;
     sendToast(toast: Toast): void;
@@ -108,7 +109,8 @@ export declare class TheDoctor extends LitElement {
     private fetchDocs;
     fetchRulesetMap(): void;
     ruleClicked(evt: CustomEvent<RuleClickedEvent>): void;
-    rulesetChanged(): void;
+    builtInRulesetSelected(): void;
+    rulesetManuallyChanged(): void;
     specChanged(event: CustomEvent<EditorUpdatedEvent>): void;
     boostrap(): void;
     exportJSON(): void;

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

@@ -15,7 +15,7 @@ import '@shoelace-style/shoelace/dist/components/badge/badge.js';
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { SpecEditor } from "../editor/editor.js";
-import { ActiveView, AddToast, CustomRulesetEnabled, EditorClicked, EditorUpdated, ExportRuleset, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RuleViolationClicked, RulesetSaved, RuleClicked } from "../../events/doctor.js";
+import { ActiveView, AddToast, CustomRulesetEnabled, EditorClicked, EditorUpdated, ExportRuleset, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RuleViolationClicked, RulesetSaved, RuleClicked, BuiltInRulesetChanged, } from "../../events/doctor.js";
 import { ProblemDetailsDrawer, ProblemDrawerEventType } from "../problem-list/details-drawer.js";
 import { CreateBagManager } from "@pb33f/saddlebag";
 import { LintingService } from "../../services/linting-service.js";
@@ -38,6 +38,7 @@ import dialogCss from "../../css/dialog.css.js";
 import buttonCss from "../../css/button.css.js";
 import radioGroupsCss from "../../css/radiogroups.css.js";
 import { MarkerSeverity } from "monaco-editor";
+import { ModelService } from "../../services/model-service";
 export const DoctorDocumentBag = "pb33f-doctor-editor";
 export const HowToFixBag = "pb33f-doctor-howtofix";
 export const FunctionDocumentationBag = "pb33f-doctor-funcdocs";
@@ -110,6 +111,10 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.addEventListener(ExportRuleset, this.exportRuleset);
         // @ts-ignore
         this.addEventListener(RuleClicked, this.ruleClicked);
+        // @ts-ignore
+        this.addEventListener(BuiltInRulesetChanged, this.builtInRulesetSelected);
+        // @ts-ignore
+        //this.addEventListener(ModelTreeNodeClicked, this.modelTreeNodeClicked)
         // hijack navigation buttons.
         window.addEventListener('popstate', (e) => {
             const state = e.state;
@@ -126,6 +131,10 @@ let TheDoctor = class TheDoctor extends LitElement {
         });
         //history.pushState({view: ActiveView.Overview}, "", ActiveView.Overview);
     }
+    modelTreeNodeClicked(evt) {
+        // TODO: this is a placeholder for now
+        console.log(evt);
+    }
     exportRuleset() {
         this.exportRulesetDialog.show();
     }
@@ -281,6 +290,13 @@ let TheDoctor = class TheDoctor extends LitElement {
                         });
                     }
                 }
+                // update visualization
+                // TODO: this is a placeholder for now
+                // ModelService.createGraph(value).then((result) => {
+                //   this.vis
+                //
+                //
+                // })
             }).catch((e) => {
                 console.error("statistics service is down", e);
                 this.platformUnavailable(e);
@@ -305,6 +321,8 @@ let TheDoctor = class TheDoctor extends LitElement {
     }
     platformUnavailable(error) {
         if (!this.unavailable) {
+            this.loadingOverlay.hide();
+            this.activitySpinner.hide();
             this.errorBanner.errorTitle = "The doctor is out.";
             if (!error) {
                 this.errorBanner.errorMessage = "The clinic is <strong>closed!</strong> " +
@@ -371,6 +389,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         LintingService.doctorEndpoint = this.doctorEndpoint;
         FeedbackService.doctorEndpoint = this.doctorEndpoint;
         RulesetService.doctorEndpoint = this.doctorEndpoint;
+        ModelService.doctorEndpoint = this.doctorEndpoint;
         this.docBag = this.bagManager.getBag(DoctorDocumentBag);
         if (this.docBag) {
             const doc = this.docBag.get(DefaultDocument);
@@ -459,6 +478,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.sessionRulesetMapBag = this.bagManager.getBag(SessionRulesetMapBag);
         // fire off all network requests, then configure the ruleset management.
         Promise.all(promises).then(() => {
+            this.loadingOverlay.hide();
             // configure rule management
             this.manageRuleset.defaultRuleset = this.defaultRuleset;
             this.manageRuleset.owaspRuleset = this.OWASPRuleset;
@@ -471,17 +491,18 @@ let TheDoctor = class TheDoctor extends LitElement {
             else {
                 this.manageRuleset.rulesetConfig = { ruleMapping: new Map(), allRulesSwitch: true };
             }
-            this.manageRuleset.buildRulesets();
-            if (this.CustomRuleset && this.CustomRuleset.rules.size > 0) {
-                this.manageRuleset.customRuleset = this.CustomRuleset;
-            }
-            // do nothing with this for now. we just need to make sure the default ruleset
-            // has a session.
-            this.fetchSessionRulesetAsYaml().then((result) => {
-                this.loadingOverlay.hide();
-                this.rulesetEditor?.setValue(result, true);
-                this.fetchRulesetMap();
-            });
+            setTimeout(() => {
+                this.manageRuleset.buildRulesets();
+                if (this.CustomRuleset && this.CustomRuleset.rules.size > 0) {
+                    this.manageRuleset.customRuleset = this.CustomRuleset;
+                }
+                this.fetchSessionRulesetAsYaml().then((result) => {
+                    this.rulesetEditor?.setValue(result, true);
+                    this.fetchRulesetMap();
+                }).catch((e) => {
+                    this.platformUnavailable(e);
+                });
+            }, 50);
         });
         // refresh state for how to fix.
         this.fetchDocs();
@@ -535,12 +556,12 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     async fetchSessionRulesetAsYaml() {
-        return new Promise(async (resolve) => {
+        return new Promise(async (resolve, reject) => {
             RulesetService.getSessionRulesetAsYAML().then((result) => {
                 resolve(result);
             }).catch((e) => {
                 console.error("cannot fetch session ruleset: ", e.title);
-                resolve("");
+                reject(e);
             });
         });
     }
@@ -668,7 +689,10 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         }
     }
-    rulesetChanged() {
+    builtInRulesetSelected() {
+        // todo
+    }
+    rulesetManuallyChanged() {
         clearTimeout(this.bounceId);
         this.bounceId = window.setTimeout(() => {
             const ruleset = this.rulesetEditor.editor?.getValue();
@@ -747,7 +771,7 @@ let TheDoctor = class TheDoctor extends LitElement {
     specChanged(event) {
         const editor = this.editorMap.get(event.detail.id);
         if (editor && event.detail.id === 'ruleset') {
-            this.rulesetChanged();
+            this.rulesetManuallyChanged();
             return;
         }
         if (this.docBag) {
@@ -844,8 +868,8 @@ let TheDoctor = class TheDoctor extends LitElement {
             if (splitPanel) {
                 this.collapseButton.name = "chevron-bar-left";
                 this.problemsDataDiv.style.display = "none";
-                splitPanel.style.setProperty('--min', '50px');
-                splitPanel.style.setProperty('--max', 'calc(100vw - 50px)');
+                splitPanel.style.setProperty('--min', '40px');
+                splitPanel.style.setProperty('--max', 'calc(100vw - 40px)');
                 splitPanel.position = 100;
                 splitPanel.disabled = true;
                 this.splitDivider.style.display = "none";

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

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+import { Direction, Edge, Node } from "./visualizer";
+import { NodeComponent } from "./node";
+export declare class ExplorerComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    svgItem: SVGSVGElement;
+    svgGroup: SVGSVGElement;
+    ready: boolean;
+    elk: any;
+    graph: any;
+    nodes: Node[];
+    models: Node[];
+    edges: Edge[];
+    direction: Direction;
+    nodeComponents: NodeComponent[];
+    scale: number;
+    private grabbed;
+    nodeMap: Map<string, Node>;
+    private startX;
+    private startY;
+    private translateX;
+    private translateY;
+    constructor();
+    mouseMove(evt: MouseEvent): void;
+    mouseDown(evt: MouseEvent): void;
+    mouseUp(): void;
+    onWheel(evt: MouseEvent): void;
+    buildLayout(): void;
+    buildGraph(): any;
+    readyGo(): void;
+    reset(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    generateOptions(): {
+        'spacing.nodeNodeBetweenLayers': number;
+        'spacing.nodeNode': number;
+        'elk.nodeLabels.placement': string;
+        'elk.algorithm': string;
+        'elk.direction': Direction;
+        'org.eclipse.elk.edgeRouting': string;
+        'elk.layered.unnecessaryBendpoints': string;
+        'elk.layered.spacing.edgeNodeBetweenLayers': number;
+        'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': string;
+        'org.eclipse.elk.layered.cycleBreaking.strategy': string;
+        'nodePlacement.strategy': string;
+        'org.eclipse.elk.spacing.edgeLabel': string;
+        'org.eclipse.elk.spacing.edgeNode': string;
+        'org.eclipse.elk.layered.edgeLabels.sideSelection': string;
+        'org.eclipse.elk.spacing.portPort': string;
+    };
+    render(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
+}