@pb33f/cowboy-components 0.3.4 → 0.4.0

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

@@ -9,25 +9,40 @@ import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
 import { customElement, property, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import treeCss from "./tree.css.js";
-import { ModelTreeNodeClicked } from "../../events/doctor.js";
+import { ModelTreeNodeClicked, RolodexTreeNodeClicked } from "../../events/doctor.js";
 import { IconColor, IconSize } from "../model-icon/model-icon.js";
 import { ExtractStatusStyleFromCodeByCode } from "../../model/extract_status.js";
 import modelSharedCss from "../model-renderer/model-shared.css.js";
 import tooltipCss from "../../css/tooltip.css.js";
+import { NodeType } from "../../model/node_type";
 let ModelTree = class ModelTree extends LitElement {
     constructor(nodeMap, nodeIdMap, nodeIdHashMap) {
         super();
+        this.selectedNodes = [];
         this.nodeMap = nodeMap;
         this.nodeIdMap = nodeIdMap;
         this.nodeIdHashMap = nodeIdHashMap;
+        this.isRolodex = false;
         this.filteredNodes = new Map();
+        this.pendingNavigationHash = "";
+        this.pendingNavigationPath = "";
     }
     nodeClicked(nodeHashId) {
         this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
             bubbles: true,
             composed: true,
             detail: {
-                nodeHashId: nodeHashId
+                nodeHashId: nodeHashId,
+            }
+        }));
+    }
+    rolodexClicked(nodeHashId, path = '') {
+        this.dispatchEvent(new CustomEvent(RolodexTreeNodeClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                nodeHashId: nodeHashId,
+                path: path
             }
         }));
     }
@@ -38,18 +53,76 @@ let ModelTree = class ModelTree extends LitElement {
                 this.openNode(parent.parentId);
             }
             this.renderRoot.querySelectorAll(`sl-tree-item#model-${parent?.idHash}`)[0]?.setAttribute('expanded', 'true');
+            this.requestUpdate();
+            return;
+        }
+        else {
+            const model = this.renderRoot.querySelectorAll(`sl-tree-item#model-${parentId}`)[0];
+            if (model) {
+                model.setAttribute('expanded', 'true');
+                // check if the model has a parent
+                const nodeParent = model.getAttribute('data-parentid');
+                if (nodeParent) {
+                    this.openNode(nodeParent);
+                }
+                this.requestUpdate();
+                return;
+            }
+        }
+    }
+    updated() {
+        if (this.pendingNavigationHash != "") {
+            this.explorerClicked(this.pendingNavigationHash);
+        }
+        if (this.pendingNavigationPath && this.pendingNavigationPath != "") {
+            const pnp = this.pendingNavigationPath;
+            this.openNodeByPath(pnp);
+        }
+    }
+    openNodeByPath(path) {
+        const treeItems = this.renderRoot?.querySelectorAll(`sl-tree-item`);
+        if (treeItems) {
+            let selected = null;
+            for (let i = 0; i < treeItems?.length; i++) {
+                const item = treeItems[i];
+                const itemPath = item.getAttribute('data-path');
+                item.selected = itemPath === path;
+                if (item.selected) {
+                    selected = item;
+                    item.expanded = true;
+                    const parentId = item.getAttribute('data-parentid');
+                    if (parentId) {
+                        this.pendingNavigationPath = "";
+                        this.openNode(parentId);
+                    }
+                }
+            }
+            if (selected) {
+                requestAnimationFrame(() => {
+                    selected?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+                });
+            }
         }
     }
     explorerClicked(nodeHashId) {
-        const treeItems = this.renderRoot.querySelectorAll(`sl-tree-item`);
+        const treeItems = this.renderRoot?.querySelectorAll(`sl-tree-item`);
+        if (!treeItems) {
+            this.pendingNavigationHash = nodeHashId;
+        }
+        else {
+            if (this.pendingNavigationHash != "") {
+                nodeHashId = this.pendingNavigationHash;
+                this.pendingNavigationHash = "";
+            }
+        }
         let selected = null;
-        for (let i = 0; i < treeItems.length; i++) {
+        for (let i = 0; i < treeItems?.length; i++) {
             const item = treeItems[i];
             item.selected = item.id === `model-${nodeHashId}`;
             if (item.selected) {
                 selected = item;
                 item.expanded = true;
-                const parentId = item.getAttribute('data-parentId');
+                const parentId = item.getAttribute('data-parentid');
                 if (parentId) {
                     this.openNode(parentId);
                 }
@@ -74,13 +147,17 @@ let ModelTree = class ModelTree extends LitElement {
             return html `<span style="color: var(--font-color-sub1)">${node.label}</span>`;
         }
         switch (node.type) {
-            case 'response':
+            case NodeType.ROLODEX_FILE:
+                return html `<span style="color: var(--font-color)"><strong>${node.label}</strong></span>`;
+            case NodeType.RESPONSE:
                 const label = parseInt(node.label);
                 return html `<span class="${ExtractStatusStyleFromCodeByCode(label)}">${node.label}</span>`;
-            case 'operation':
-                return html `<pb33f-http-method tiny method="${node.label}"></pb33f-http-method>`;
-            case 'pathItem':
-                return html `<pb33f-render-operation-path nowrap path="${node.label}"></pb33f-render-operation-path>`;
+            case NodeType.OPERATION:
+                return html `
+                    <pb33f-http-method tiny method="${node.label}"></pb33f-http-method>`;
+            case NodeType.PATH_ITEM:
+                return html `
+                    <pb33f-render-operation-path nowrap path="${node.label}"></pb33f-render-operation-path>`;
             default:
                 if (node.instance) {
                     return html `<strong>${node.label}</strong>`;
@@ -91,7 +168,16 @@ let ModelTree = class ModelTree extends LitElement {
     buildTree(node, depth) {
         let results = [];
         if (node.nodes && node.nodes.length > 0) {
-            node.nodes.sort((a, b) => a.label.localeCompare(b.label));
+            // check if this is a path item, if so make sure the parameters are first.
+            if (node.type === NodeType.PATH_ITEM) {
+                const operations = node.nodes.filter(n => n.type === NodeType.OPERATION);
+                const parameters = node.nodes.filter(n => (n.type === NodeType.PARAMETER || n.type === NodeType.PARAMETERS));
+                const other = node.nodes.filter(n => n.type !== NodeType.OPERATION && (n.type !== NodeType.PARAMETER && n.type !== NodeType.PARAMETERS));
+                node.nodes = parameters.concat(operations).concat(other);
+            }
+            else {
+                node.nodes.sort((a, b) => a.label.localeCompare(b.label));
+            }
             for (let i = 0; i < node.nodes.length; i++) {
                 depth++;
                 results.push(this.buildTree(node.nodes[i], depth));
@@ -103,7 +189,7 @@ let ModelTree = class ModelTree extends LitElement {
         }
         let styleIco = IconColor.primary;
         const filtered = (this.filteredNodes.size > 0 && !this.filteredNodes.get(node.idHash));
-        if (node.type === 'response') {
+        if (node.type === NodeType.RESPONSE) {
             const label = parseInt(node.label);
             const style = ExtractStatusStyleFromCodeByCode(label);
             switch (style) {
@@ -118,6 +204,9 @@ let ModelTree = class ModelTree extends LitElement {
                     break;
             }
         }
+        if (node.type === NodeType.ROLODEX_FILE) {
+            styleIco = IconColor.secondary;
+        }
         if (filtered) {
             styleIco = IconColor.filtered;
         }
@@ -138,14 +227,106 @@ let ModelTree = class ModelTree extends LitElement {
                     }
                 }
                 if (warnings > 0) {
-                    warnBadge = html `<sl-badge class="warn">${warnings}</sl-badge>`;
+                    warnBadge = html `
+                        <sl-badge class="warn">${warnings}</sl-badge>`;
                 }
                 if (errors > 0) {
-                    errorBadge = html `<sl-badge class="err">${errors}</sl-badge>`;
+                    errorBadge = html `
+                        <sl-badge class="err">${errors}</sl-badge>`;
+                }
+            }
+        }
+        let icon = html `
+            <pb33f-model-icon size="${IconSize.small}" icon="${node.type}" color=${styleIco}></pb33f-model-icon>`;
+        if (node.openapi) {
+            icon = html `
+                <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.OPENAPI}"
+                                  color=${styleIco}></pb33f-model-icon>`;
+        }
+        else {
+            // determine if this is something other than a JSON or YAML file by looking at the extension.
+            if (!node.label.endsWith('.json') || !node.label.endsWith('.yaml') || !node.label.endsWith('.yml')) {
+                if (node.label.includes('.')) {
+                    const ext = node.label.split('.').pop();
+                    if (ext) {
+                        switch (ext) {
+                            case NodeType.JS:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.JS}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.GO:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.GO}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.TS:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.TS}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.CS:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.CS}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.C:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.C}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.CPP:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.CPP}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.PHP:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.PHP}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.PY:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.PY}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.HTML:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.HTML}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.MD:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.MD}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.JAVA:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.JAVA}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.RS:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.RS}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.ZIG:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.ZIG}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                            case NodeType.RB:
+                                icon = html `
+                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.RB}"
+                                                      color=${styleIco}></pb33f-model-icon>`;
+                                break;
+                        }
+                    }
                 }
             }
         }
         return html `
+
             <sl-tree-item id="model-${node.idHash}" ?expanded="${expanded}"
                           @sl-expand="${(evt) => {
             this.expanded(evt, node);
@@ -153,12 +334,14 @@ let ModelTree = class ModelTree extends LitElement {
                           @sl-collapse="${(evt) => {
             this.collapse(evt, node);
         }}"
-                          data-parentId="${node.parentId}"
-                          data-hashId="${node.idHash}">
+                          data-parentid="${node.parentId}"
+                          data-hashid="${node.idHash}"
+                          data-path="${node.path ? node.path : node.nodePath}">
                 <div style="display: flex">
-                    <pb33f-model-icon size="${IconSize.small}" icon="${node.type}" color=${styleIco}></pb33f-model-icon> 
+                    ${icon}
                     <div style="padding-left:8px; flex-grow: 4; white-space: nowrap">
-                        ${filtered ? html `<span style="color: var(--font-color-sub1)">${this.renderLabel(node, filtered)} 
+                        ${filtered ? html `<span
+                                style="color: var(--font-color-sub1)">${this.renderLabel(node, filtered)} 
                             <sl-tooltip content="filtered item">
                                 <sl-icon name="eye-slash" style="vertical-align: middle; font-size: 0.8rem"></sl-icon>
                             </sl-tooltip>
@@ -171,10 +354,30 @@ let ModelTree = class ModelTree extends LitElement {
         `;
     }
     nodesSelected(treeItems) {
+        this.selectedNodes = treeItems;
         for (let i = 0; i < treeItems.length; i++) {
             const hash = treeItems[i].getAttribute('data-hashId');
-            if (hash)
-                this.nodeClicked(hash);
+            const path = treeItems[i].getAttribute('data-path');
+            if (hash) {
+                if (!this.isRolodex) {
+                    this.nodeClicked(hash);
+                }
+                else {
+                    if (path && path != '') {
+                        this.rolodexClicked(hash, path);
+                    }
+                }
+            }
+        }
+    }
+    treeClicked(event) {
+        // which tree item was actually clicked?
+        const clickedItem = event.target?.closest('sl-tree-item');
+        if (!clickedItem)
+            return;
+        // if the clicked item is already in selectedNodes, re-fire
+        if (this.selectedNodes.some(item => item === clickedItem)) {
+            this.nodesSelected(this.selectedNodes);
         }
     }
     render() {
@@ -184,13 +387,15 @@ let ModelTree = class ModelTree extends LitElement {
         const tree = this.buildTree(this.node, 0);
         let nodeLimitExceeded = html ``;
         if (this.nodeLimitExceeded) {
-            nodeLimitExceeded = html `<div class="node-limit-exceeded">
-                <sl-icon name="exclamation-triangle" style="vertical-align: middle"></sl-icon> Objects exceed limit of ${this.nodeLimit}.
-            </div>`;
+            nodeLimitExceeded = html `
+                <div class="node-limit-exceeded">
+                    <sl-icon name="exclamation-triangle" style="vertical-align: middle"></sl-icon>
+                    Objects exceed limit of ${this.nodeLimit}.
+                </div>`;
         }
         return html `
             ${nodeLimitExceeded}
-            <sl-tree @sl-selection-change="${(evt) => {
+            <sl-tree @click=${this.treeClicked} @sl-selection-change="${(evt) => {
             {
                 const selected = evt.detail.selection;
                 this.nodesSelected(selected);
@@ -217,6 +422,9 @@ __decorate([
 __decorate([
     property()
 ], ModelTree.prototype, "filteredNodes", void 0);
+__decorate([
+    property()
+], ModelTree.prototype, "isRolodex", void 0);
 ModelTree = __decorate([
     customElement("pb33f-model-tree")
 ], ModelTree);

package/dist/components/paginator/paginator.css.js

@@ -21,15 +21,19 @@ export default css `
     }
     
     .no-values {
+        min-height: 550px;
         width: 500px;
         margin: 0 auto;
         padding-top: 50px;
         text-align: center;
         font-size: 1.9em;
-        color: var(--font-color-sub3);
+        color: var(--font-color-sub4);
         font-family: var(--font-stack-bold), monospace;
         overflow-y: hidden;
-        
+    }
+
+    .error {
+        color: var(--error-color);
     }
     
     .no-values sl-icon {

package/dist/components/paginator/paginator.d.ts

@@ -8,6 +8,7 @@ export declare class Paginator extends LitElement {
     itemsPerPage: number;
     label: string;
     activeIndex: number;
+    invalid: boolean;
     private renderValues;
     private sparks;
     private paginatorNavigator;

package/dist/components/paginator/paginator.js

@@ -19,6 +19,7 @@ let Paginator = class Paginator extends LitElement {
         this.totalItems = 0;
         this.itemsPerPage = 20;
         this.activeIndex = 0;
+        this.invalid = false;
         this.paginatorNavigator = new PaginatorNavigation();
         this.paginatorNavigator.currentPage = this.currentPage;
         this.paginatorNavigator.totalPages = this.totalPages;
@@ -82,13 +83,13 @@ let Paginator = class Paginator extends LitElement {
         this.renderValues = this.values?.slice(this.paginatorNavigator.getRangeStart(), this.paginatorNavigator.getRangeEnd());
     }
     render() {
-        let sparks = new PixelSparks();
+        this.sparks.isError = this.invalid;
         if (this.renderValues?.length === 0 || !this.renderValues) {
             return html `
-                <div class="no-values" style="position: relative">
+                <div class="no-values ${this.invalid ? 'error' : ''}" style="position: relative">
                     <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
-                    <sl-icon name="x-square"></sl-icon><br/>
-                no results
+                    <sl-icon name="prescription2"></sl-icon><br/>
+                    ${this.invalid ? 'invalid / error' : 'healthy!'}
             </div>
             `;
         }
@@ -122,6 +123,9 @@ __decorate([
 __decorate([
     property()
 ], Paginator.prototype, "activeIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], Paginator.prototype, "invalid", void 0);
 Paginator = __decorate([
     customElement("pb33f-paginator-navigation")
 ], Paginator);

package/dist/components/problem-list/details-drawer.css.js

@@ -7,7 +7,7 @@ export default css `
 
     sl-drawer::part(panel) {
         border: 1px dashed var(--secondary-color);
-        z-index: 3
+        z-index: 10
     }
 
     sl-drawer::part(header) {

package/dist/components/problem-list/problem-item.js

@@ -30,13 +30,16 @@ let ProblemItem = class ProblemItem extends LitElement {
                                             class="${this.selectedSibling ? 'selectedPath' : ''}"></pb33f-render-json-path>`;
                 break;
             case ProblemLabelView.RuleViolation:
-                render = html `${this.problemObject.source}</>`;
+                render = html `${this.problemObject.source}`;
                 break;
             case ProblemLabelView.Message:
-                render = html `${unsafeHTML(marked.parse(this.problemObject.message).toString())}</>`;
+                render = html `${unsafeHTML(marked.parse(this.problemObject.message).toString())}`;
                 break;
             case ProblemLabelView.Category:
-                render = html `${this.problemObject.category}</>`;
+                render = html `${this.problemObject.category}`;
+                break;
+            case ProblemLabelView.Source:
+                render = html `${this.problemObject.sourceLocation}`;
                 break;
         }
         return render;

package/dist/components/problem-list/problem-label-view-filter.d.ts

@@ -6,7 +6,8 @@ export declare enum ProblemLabelView {
     JSONPath = "Path",
     RuleViolation = "Rule Violation",
     Message = "Message",
-    Category = "Category"
+    Category = "Category",
+    Source = "Source Location"
 }
 export declare class ProblemLabelViewFilter extends LitElement {
     static styles: import("lit").CSSResult[];

package/dist/components/problem-list/problem-label-view-filter.js

@@ -18,6 +18,7 @@ export var ProblemLabelView;
     ProblemLabelView["RuleViolation"] = "Rule Violation";
     ProblemLabelView["Message"] = "Message";
     ProblemLabelView["Category"] = "Category";
+    ProblemLabelView["Source"] = "Source Location";
 })(ProblemLabelView || (ProblemLabelView = {}));
 let ProblemLabelViewFilter = class ProblemLabelViewFilter extends LitElement {
     constructor() {

package/dist/components/problem-list/problem-list.d.ts

@@ -13,6 +13,7 @@ export declare class ProblemList extends LitElement {
     private readonly paginator;
     private unfilteredProblems;
     private activeSearch;
+    isInvalid: boolean;
     constructor();
     private reset;
     private addSearchWorkerListener;

package/dist/components/problem-list/problem-list.js

@@ -4,7 +4,7 @@ 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 } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { ProblemItem } from "./problem-item.js";
 import { ProblemMainView } from "./problem-mainview.js";
@@ -29,6 +29,7 @@ let ProblemList = class ProblemList extends LitElement {
         this.unfilteredProblems = [];
         this.searchWorker = new SearchWorker();
         this.activeSearch = false;
+        this.isInvalid = false;
         this.addSearchWorkerListener();
         // @ts-ignore
         this.addEventListener(ProblemClicked, this.problemClicked);
@@ -139,6 +140,10 @@ let ProblemList = class ProblemList extends LitElement {
                     this.problemList[i].problemLabelView = ProblemLabelView.Category;
                     this.problemLabelView = ProblemLabelView.Category;
                     break;
+                case ProblemLabelView.Source:
+                    this.problemList[i].problemLabelView = ProblemLabelView.Source;
+                    this.problemLabelView = ProblemLabelView.Source;
+                    break;
             }
         }
     }
@@ -189,6 +194,15 @@ let ProblemList = class ProblemList extends LitElement {
                     return 0;
                 });
                 break;
+            case ProblemSortView.SourceLocation:
+                this.problemList = this.problemList.sort((a, b) => {
+                    if (a.problemObject.sourceLocation < b.problemObject.sourceLocation)
+                        return 1;
+                    if (a.problemObject.sourceLocation > b.problemObject.sourceLocation)
+                        return -1;
+                    return 0;
+                });
+                break;
         }
         this.problemList = this.problemList.slice(0, this.problemList.length);
         this.requestUpdate();
@@ -311,6 +325,7 @@ let ProblemList = class ProblemList extends LitElement {
     }
     render() {
         this.paginator.values = this.problemList;
+        this.paginator.invalid = this.isInvalid;
         return html `
             <div class="problem-list-container">
                 <div class="main-view">
@@ -327,6 +342,9 @@ let ProblemList = class ProblemList extends LitElement {
     }
 };
 ProblemList.styles = [problemListCss, sharedCss];
+__decorate([
+    property({ type: Boolean })
+], ProblemList.prototype, "isInvalid", void 0);
 ProblemList = __decorate([
     customElement("pb33f-problem-list")
 ], ProblemList);

package/dist/components/problem-list/problem-mainview.css.js

@@ -69,7 +69,7 @@ export default css `
     }
     
     
-    .location {
+    .location, .source-location {
         font-size: 0.7rem;
         margin-top: 15px;
         display: block;

package/dist/components/problem-list/problem-mainview.js

@@ -96,6 +96,11 @@ let ProblemMainView = class ProblemMainView extends LitElement {
             <div class="main-view empty">Pick a problem...<br/><sl-icon name="pin-angle"></sl-icon><br/></div>`;
     }
     renderProblem(problem) {
+        let sourceLocation = html ``;
+        if (problem.sourceLocation && problem.sourceLocation.length > 0 &&
+            (problem.sourceLocation != 'root.yaml' && problem.sourceLocation != 'root')) {
+            sourceLocation = html `<div class="source-location">Problem file:<br/> <strong>${problem.sourceLocation}</strong></div>`;
+        }
         return html `
             <div class="problem">
                 <div class="icon ${getProblemClass(problem)}">
@@ -106,6 +111,7 @@ let ProblemMainView = class ProblemMainView extends LitElement {
                     <div class="location">
                         Location: <pb33f-render-json-path path="${problem.jsonPath}"></pb33f-render-json-path>
                     </div>
+                    ${sourceLocation}
                 </div>
             </div>
             <div class="source">

package/dist/components/problem-list/problem-sort-filter.d.ts

@@ -7,7 +7,8 @@ export declare enum ProblemSortView {
     Rule = "Rule Violation",
     JSONPath = "Path",
     Category = "Category",
-    Severity = "Severity"
+    Severity = "Severity",
+    SourceLocation = "Source Location"
 }
 export declare class ProblemSortFilter extends LitElement {
     static styles: import("lit").CSSResult[];

package/dist/components/problem-list/problem-sort-filter.js

@@ -19,6 +19,7 @@ export var ProblemSortView;
     ProblemSortView["JSONPath"] = "Path";
     ProblemSortView["Category"] = "Category";
     ProblemSortView["Severity"] = "Severity";
+    ProblemSortView["SourceLocation"] = "Source Location";
 })(ProblemSortView || (ProblemSortView = {}));
 let ProblemSortFilter = class ProblemSortFilter extends LitElement {
     constructor() {

package/dist/components/problems-overview/diagnostic-evaluation.css.js

@@ -24,20 +24,30 @@ export default css `
     .score {
         width: 100px;
         height: 100px;
-        line-height: 100px;
+        //line-height: 100px;
         border: 1px solid var(--primary-color);
         text-align: center;
         margin-top: 10px;
         margin-bottom: 10px;
     }
-    .score span {
+
+    .score .score-percent {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: normal;
+        font-size: 1rem;
+        color: var(--primary-color);
+        padding-top: 8px;
+        font-family: var(--font-stack-bold), monospace;
+    }
+    
+    .score .score-grade {
         display: inline-block;
         vertical-align: middle;
         line-height: normal;
-        font-size: 2rem;
+        font-size: 3.2rem;
         color: var(--primary-color);
         font-family: var(--font-stack-bold), monospace;
-        
     }
     
     .evaluation {