@pb33f/cowboy-components 0.6.6 → 0.7.0

package/dist/components/visualizer/equalizer.js

@@ -33,11 +33,11 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
             { 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' },
+            { 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' },
+            { 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 },
@@ -48,8 +48,8 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
             { type: NodeType.ENCODING, label: 'Encodings' },
             { type: NodeType.TAG, label: 'Tags', enabled: true },
             { type: NodeType.SECURITY, label: 'Security', enabled: true },
-            { type: NodeType.CALLBACK, label: 'Callbacks' },
-            { type: NodeType.WEBHOOK, label: 'Webhooks' },
+            { type: NodeType.CALLBACK, label: 'Callbacks', enabled: true },
+            { type: NodeType.WEBHOOK, label: 'Webhooks', enabled: true },
         ];
     }
     constructor() {
@@ -57,6 +57,7 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
         this.configuredObjects = new Set();
         this.initialized = false;
         this._allChecked = false;
+        this.renderEqualizer = true;
         this.controls = new OrientationControlsComponent();
         this.keyComponent = new ExplorerKeyComponent();
         this.controls.searchComponent.graphResponse = this.graphResponse;
@@ -66,6 +67,7 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
         this.equalizerWorker.addEventListener("message", (event) => {
             this.controls.searchComponent.graphResponse = event.data;
             this.controls.searchComponent.currentObjects = this.currentObjects;
+            this.controls.searchComponent.currentObjects = this.currentObjects;
             if (!this.firstBoot) {
                 this.dispatchEvent(new CustomEvent(ExplorerEqualizerFiltered, {
                     bubbles: true,
@@ -139,12 +141,15 @@ let EqualizerComponent = EqualizerComponent_1 = class EqualizerComponent extends
         this.buildRenderObjectFilters();
         this.firstBoot = true;
     }
+    updated() {
+        this.controls.renderEqualizer = this.renderEqualizer;
+    }
     navigateToRoot() {
         this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
             bubbles: true,
             composed: true,
             detail: {
-                nodeHashId: 'root',
+                nodeId: 'root',
                 first: true
             }
         }));
@@ -542,6 +547,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], EqualizerComponent.prototype, "dimDependencies", void 0);
+__decorate([
+    property({ type: Boolean })
+], EqualizerComponent.prototype, "renderEqualizer", void 0);
 EqualizerComponent = EqualizerComponent_1 = __decorate([
     customElement('pb33f-explorer-equalizer')
 ], EqualizerComponent);

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

@@ -22,10 +22,15 @@ export declare class ExplorerComponent extends HasEyes {
     paths: SVGPathElement[];
     foreignObjects: SVGForeignObjectElement[];
     ready: boolean;
+    renderEqualizer: boolean;
     models: Node[];
     private elk;
     private startX;
     private startY;
+    private zoomX;
+    private zoomY;
+    private zoomW;
+    private zoomH;
     private readonly graphDependentWorker;
     nodes: ExplorerNode[];
     edges: ExplorerEdge[];

package/dist/components/visualizer/explorer.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import '../';
-import { queryAll, customElement, query, state } from "lit/decorators.js";
+import { queryAll, customElement, query, state, property } from "lit/decorators.js";
 import { html, svg } from "lit";
 import visualizerCss from "./visualizer.css.js";
 import { ForeignObjectComponent } from "./foreign-object.js";
@@ -77,6 +77,8 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.nodeLimitExceeded = false;
         this.nodeLimit = -1;
         this.equalizer = new EqualizerComponent();
+        this.renderEqualizer = true;
+        this.equalizer.renderEqualizer = this.renderEqualizer;
         this.equalizer.nodeNodeBetweenLayers = parseInt(this.nodeNodeBetweenLayers);
         this.equalizer.nodeNode = parseInt(this.nodeNode);
         this.equalizer.edgeNodeBetweenLayers = parseInt(this.edgeNodeBetweenLayers);
@@ -86,6 +88,10 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.equalizer.renderRefs = this.renderRefs;
         this.equalizer.renderPoly = this.renderPoly;
         this.dimDependencies = false;
+        this.zoomX = 0;
+        this.zoomY = 0;
+        this.zoomW = 0;
+        this.zoomH = 0;
         this.graphDependentWorker = new GraphDependentWorker();
         this.equalizer.addEventListener(ExplorerZoomIn, this.zoomIn.bind(this));
         this.equalizer.addEventListener(ExplorerZoomOut, this.zoomOut.bind(this));
@@ -103,21 +109,19 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     }
     toggleNodeVisibility(nodes, edges, collapse) {
         nodes.forEach((node) => {
-            // extract node component
-            const nodeComponent = this.nodeComponents.find((nc) => nc.id === node.idHash);
+            const nodeComponent = this.nodeComponents.find((nc) => nc.id === node.id);
             if (nodeComponent) {
                 if (nodeComponent.visible && collapse) {
                     nodeComponent.visible = false;
-                    this.collapsedNodes.set(node.idHash, true);
+                    this.collapsedNodes.set(node.id, true);
                 }
                 if (!nodeComponent.visible && !collapse) {
                     nodeComponent.visible = true;
-                    this.collapsedNodes.delete(node.idHash);
+                    this.collapsedNodes.delete(node.id);
                 }
             }
         });
         edges.forEach((edge) => {
-            // extract edge component
             const edgeComponent = this.edgeComponents.find((ec) => ec.edge.id === edge.id);
             if (edgeComponent) {
                 if (edgeComponent.visible && collapse) {
@@ -146,6 +150,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.graphResponse = graphResponse;
         this.equalizer.graphResponse = graphResponse;
         this.equalizer.controls.searchComponent.graphResponse = graphResponse;
+        this.buildGraph();
     }
     rotate() {
         switch (this.direction) {
@@ -170,7 +175,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        nodeHashId: this.activeNode.idHash,
+                        nodeId: this.activeNode.id,
                     }
                 }));
                 return;
@@ -200,47 +205,39 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.grabbed = false;
     }
     zoom(scale) {
-        // Prevent scaling below a certain threshold
         scale = Math.abs(scale) < 0.02 ? (scale / Math.abs(scale)) * 0.02 : scale;
-        // Get the current viewBox transform
         //@ts-ignore
         let [x, y, width, height] = this.svgItem.getAttribute('viewBox')?.split(' ').map(Number);
-        // Calculate the center of the current viewBox
         let centerX = x + width / 2;
         let centerY = y + height / 2;
-        // Calculate new width and height
         let [width2, height2] = [width + width * scale, height + height * scale];
-        // Calculate new x and y to keep the zoom centered around the viewBox center
         let x2 = centerX - (width2 / 2);
         let y2 = centerY - (height2 / 2);
         if (width2 >= this.zoomMax || width2 <= this.zoomMin) {
             return;
         }
-        // Set the new viewBox
         this.svgItem.setAttribute('viewBox', `${x2} ${y2} ${width2} ${height2}`);
+        this.zoomX = x2;
+        this.zoomY = y2;
+        this.zoomW = width2;
+        this.zoomH = height2;
     }
     zoomIn() {
-        this.zoom(-0.1); // Decrease the viewBox size to zoom in
+        this.zoom(-0.1);
     }
     zoomOut() {
-        this.zoom(0.1); // Increase the viewBox size to zoom out
+        this.zoom(0.1);
     }
     onWheel(evt) {
         evt.preventDefault();
-        // I lifted this directly from here:
-        // https://stackoverflow.com/questions/76150884/how-to-use-the-mouse-wheel-to-zoom-on-an-svg-using-the-viewbox
-        // set the scaling factor (and make sure it's at least 10%)
         //@ts-ignore
         let scale = evt.deltaY / 1000;
         //@ts-ignore
         scale = Math.abs(scale) < .02 ? .02 * evt.deltaY / Math.abs(evt.deltaY) : scale;
         let pt = new DOMPoint(evt.clientX, evt.clientY);
         pt = pt.matrixTransform(this.svgItem.getScreenCTM()?.inverse());
-        // @ts-ignore
         let [x, y, width, height] = this.svgItem.getAttribute('viewBox')?.split(' ').map(Number);
-        // get pt.x as a proportion of width and pt.y as proportion of height
         let [xPropW, yPropH] = [(pt.x - x) / width, (pt.y - y) / height];
-        // calc new width and height, new x2, y2 (using proportions and new width and height)
         let [width2, height2] = [width + width * scale, height + height * scale];
         let x2 = pt.x - xPropW * width2;
         let y2 = pt.y - yPropH * height2;
@@ -251,6 +248,10 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             return;
         }
         requestAnimationFrame(() => {
+            this.zoomX = x2;
+            this.zoomY = y2;
+            this.zoomW = width2;
+            this.zoomH = height2;
             this.svgItem.setAttribute('viewBox', `${x2} ${y2} ${width2} ${height2}`);
         });
     }
@@ -290,13 +291,12 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        nodeHashId: this.activeNode.idHash,
+                        nodeId: this.activeNode.id,
                         first: true
                     }
                 }));
                 return;
             }
-            //this.navigateToRoot();
         }, 150);
     }
     buildLayout() {
@@ -345,7 +345,6 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             edges: this.graphResponse.edges
         };
         this.graph = graph;
-        // build node map
         this.nodeMap.clear();
         this.buildLayout();
         if (!this.equalizer.graphResponse) {
@@ -408,17 +407,19 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.graph.children?.forEach((c) => {
             const child = c;
             const nc = new ForeignObjectComponent();
-            nc.id = child.idHash;
+            nc.id = child.id;
             if (child.x && child.y) {
-                nc.x = child.x;
-                nc.y = child.y;
+                child.x = Math.round(child.x);
+                child.y = Math.round(child.y);
+                nc.x = Math.round(child.x);
+                nc.y = Math.round(child.y);
             }
             nc.width = child.width;
             nc.height = child.height;
             const op = this.generateNodeType(child.type);
             op.height = child.height;
             op.width = child.width - 2;
-            op.id = child.idHash;
+            op.id = child.id;
             op.label = child.label;
             op.isLeaf = !(child.nodes && child.nodes.length > 0);
             op.node = child;
@@ -426,7 +427,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                 op.active = child.active;
                 nc.active = child.active;
             }
-            if (!child.active && this.activeNode && this.activeNode.idHash === child.idHash) {
+            if (!child.active && this.activeNode && this.activeNode.id === child.id) {
                 op.active = true;
                 nc.active = true;
             }
@@ -436,14 +437,12 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                     op.dim = true;
                 }
             }
-            //  check if this node was collapsed
-            if (this.collapsedNodes.has(child.idHash)) {
+            if (this.collapsedNodes.has(child.id)) {
                 nc.visible = false;
             }
             op.nodeInstance = this.renderedNodeMap.get(child.id)?.instance;
             child.results = this.renderedNodeMap.get(child.id)?.results;
             this.renderGraphMap.set(child.id, op);
-            // set the node component body to the operation
             nc.body = op;
             this.nodeComponents.push(nc);
             this.nodes.push(child);
@@ -463,7 +462,6 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                 s.isRef = true;
             }
             const edgeComponent = new EdgeComponent(edge);
-            // check if this edge was collapsed
             if (this.collapsedEdges.has(edge.id)) {
                 edgeComponent.visible = false;
             }
@@ -492,7 +490,6 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                 });
             }
             else {
-                // could be refs
                 node.outputs.forEach((edge) => {
                     if (edge.ref != '') {
                         const e = this.edgeComponentMap.get(edge.id);
@@ -515,7 +512,11 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     reset() {
         this.direction = Direction.RIGHT;
         const box = this.buildBaseViewBox();
-        this.svgItem.setAttribute('viewBox', `${box.offset} 80 ${box.base} ${box.base}`);
+        this.zoomH = null;
+        this.zoomW = null;
+        this.zoomX = null;
+        this.zoomY = null;
+        this.svgItem.setAttribute('viewBox', `0 0 ${box.base} ${box.base}`);
         this.resetNodes();
         this.buildGraph();
         setTimeout(() => {
@@ -524,7 +525,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        nodeHashId: this.activeNode.idHash,
+                        nodeId: this.activeNode.id,
                         first: true
                     }
                 }));
@@ -568,7 +569,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     moveToNode(node, first = false) {
         if (this.svgItem) {
             const viewBox = this.svgItem.viewBox.baseVal;
-            const found = this.graphResponse.nodes.find((n) => n.idHash === node.idHash);
+            const found = this.graphResponse.nodes.find((n) => n.id === node.id);
             if (found != undefined) {
                 if (found.x && found.y && !found.filtered) {
                     if (!first) {
@@ -710,6 +711,9 @@ __decorate([
 __decorate([
     state()
 ], ExplorerComponent.prototype, "ready", void 0);
+__decorate([
+    property()
+], ExplorerComponent.prototype, "renderEqualizer", void 0);
 __decorate([
     state()
 ], ExplorerComponent.prototype, "models", void 0);

package/dist/components/visualizer/foreign-object.js

@@ -23,6 +23,9 @@ let ForeignObjectComponent = class ForeignObjectComponent extends LitElement {
         else {
             body = "Object Node";
         }
+        if (this.x == undefined || this.y == undefined) {
+            return svg ``;
+        }
         return svg `
               <rect id="node-${this.id}" x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height}" class="node"/>
                 <foreignObject x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height + 30}" class="fo">

package/dist/components/visualizer/nodes/callback.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let CallbackNodeComponent = class CallbackNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -40,11 +41,12 @@ let CallbackNodeComponent = class CallbackNodeComponent extends GraphNodeCompone
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-CallbackNodeComponent.styles = [sharedCss];
+CallbackNodeComponent.styles = [sharedCss, changesCss];
 CallbackNodeComponent = __decorate([
     customElement('pb33f-explorer-callback-node')
 ], CallbackNodeComponent);

package/dist/components/visualizer/nodes/changes.css.d.ts

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

package/dist/components/visualizer/nodes/changes.css.js

@@ -0,0 +1,33 @@
+import { css } from "lit";
+export default css `
+    .change-icon {
+        display: inline-block;
+        margin-left: 6px;
+        margin-right: 1px;
+        padding-right: 2px;
+        padding-left: 2px;
+        border: 1px solid var(--font-color-sub2);
+    }
+    
+    sl-icon {
+        vertical-align: middle;
+        margin-right: 1px;
+    }
+
+    .breaking, .removed {
+        color: var(--error-color);
+        border: 1px solid var(--error-color);
+    }
+    
+    .added {
+        color: var(--terminal-text);
+        border: 1px solid var(--terminal-text);
+    }
+    
+    .modified {
+        color: var(--font-color-sub1)
+    }
+    
+    .change-div {
+    }
+`;

package/dist/components/visualizer/nodes/components.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let ComponentsNodeComponent = class ComponentsNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -112,11 +113,12 @@ let ComponentsNodeComponent = class ComponentsNodeComponent extends GraphNodeCom
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderDocument()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-ComponentsNodeComponent.styles = [sharedCss];
+ComponentsNodeComponent.styles = [sharedCss, changesCss];
 ComponentsNodeComponent = __decorate([
     customElement('pb33f-explorer-components-node')
 ], ComponentsNodeComponent);

package/dist/components/visualizer/nodes/contact.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let ContactNodeComponent = class ContactNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -35,11 +36,12 @@ let ContactNodeComponent = class ContactNodeComponent extends GraphNodeComponent
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-ContactNodeComponent.styles = [sharedCss];
+ContactNodeComponent.styles = [sharedCss, changesCss];
 ContactNodeComponent = __decorate([
     customElement('pb33f-explorer-contact-node')
 ], ContactNodeComponent);

package/dist/components/visualizer/nodes/document.js

@@ -75,6 +75,7 @@ let DocumentNodeComponent = class DocumentNodeComponent extends GraphNodeCompone
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderDocument()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }

package/dist/components/visualizer/nodes/graph-node.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, TemplateResult } from "lit";
 import { ExplorerEdge, ExplorerNode } from "../explorer.js";
 import { Node } from "../../../model/graph.js";
 export declare class GraphNodeComponent extends LitElement {
@@ -20,17 +20,18 @@ export declare class GraphNodeComponent extends LitElement {
     outputs: ExplorerEdge[];
     constructor();
     expandDependents(node: Node): void;
-    renderDependentControl(): import("lit-html").TemplateResult<1>;
-    renderArrayType(): import("lit-html").TemplateResult<1> | null;
-    renderUpArrow(): import("lit-html").TemplateResult<1>;
+    renderDependentControl(): TemplateResult<1>;
+    renderArrayType(): TemplateResult<1> | null;
+    renderUpArrow(): TemplateResult<1>;
     countResults(): {
         errors: number;
         warnings: number;
         info: number;
     };
-    renderVacuumResults(): import("lit-html").TemplateResult<1> | undefined;
-    renderExtensions(): import("lit-html").TemplateResult<1> | undefined;
+    renderVacuumResults(): TemplateResult<1> | undefined;
+    renderExtensions(): TemplateResult<1> | undefined;
     clicked(): void;
     renderClasses(defaultString?: string): string;
-    render(): import("lit-html").TemplateResult<1>;
+    renderChanges(): TemplateResult;
+    render(): TemplateResult<1>;
 }

package/dist/components/visualizer/nodes/graph-node.js

@@ -124,7 +124,7 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
             bubbles: true,
             composed: true,
             detail: {
-                nodeHashId: this.id
+                nodeId: this.id
             }
         }));
     }
@@ -141,6 +141,60 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
         }
         return classes.join(' ');
     }
+    renderChanges() {
+        if (!this.node.timeline) {
+            return html ``;
+        }
+        let breaking = 0;
+        let mods = 0;
+        let adds = 0;
+        let removals = 0;
+        this.node.timeline.forEach((change) => {
+            if (change.breaking) {
+                breaking++;
+            }
+            switch (change.change) {
+                case 1:
+                    mods++;
+                    break;
+                case 2:
+                case 3:
+                    adds++;
+                    break;
+                case 4:
+                case 5:
+                    removals++;
+                    break;
+            }
+        });
+        const total = mods + adds + removals;
+        let blocks = [];
+        if (breaking > 0) {
+            blocks.push(html `
+                <span class="change-icon breaking"><sl-icon name="heartbreak-fill"></sl-icon>${breaking}</span>
+            `);
+        }
+        if (mods > 0) {
+            blocks.push(html `
+                <span class="change-icon modified"><sl-icon name="pencil"></sl-icon>${mods}</span>
+            `);
+        }
+        if (adds > 0) {
+            blocks.push(html `
+                <span class="change-icon added"><sl-icon name="plus-lg"></sl-icon>${adds}</span>
+            `);
+        }
+        if (removals > 0) {
+            blocks.push(html `
+                <span class="change-icon removed"><sl-icon name="x-lg"></sl-icon>${removals}</span>
+            `);
+        }
+        return html `
+            <div class="row-node change-div">
+                ${blocks}
+            </div>
+        `;
+    }
     render() {
         let arrayValues = html ``;
         if (this.node.isArray) {

package/dist/components/visualizer/nodes/header.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let HeaderNodeComponent = class HeaderNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -73,11 +74,12 @@ let HeaderNodeComponent = class HeaderNodeComponent extends GraphNodeComponent {
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-HeaderNodeComponent.styles = [sharedCss];
+HeaderNodeComponent.styles = [sharedCss, changesCss];
 HeaderNodeComponent = __decorate([
     customElement('pb33f-explorer-header-node')
 ], HeaderNodeComponent);

package/dist/components/visualizer/nodes/info.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let InfoNodeComponent = class InfoNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -41,11 +42,12 @@ let InfoNodeComponent = class InfoNodeComponent extends GraphNodeComponent {
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-InfoNodeComponent.styles = [sharedCss];
+InfoNodeComponent.styles = [sharedCss, changesCss, changesCss];
 InfoNodeComponent = __decorate([
     customElement('pb33f-explorer-info-node')
 ], InfoNodeComponent);

package/dist/components/visualizer/nodes/license.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let LicenseNodeComponent = class LicenseNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -20,6 +21,11 @@ let LicenseNodeComponent = class LicenseNodeComponent extends GraphNodeComponent
                 <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}" icon="${NodeType.LICENSE}"></pb33f-model-icon>
             <span class="header-text">License</span>
             </div>`);
+        if (this.license?.name) {
+            values.push(html `<div class="row"><span class="chevron">&nbsp;&gt;</span>
+                ${this.license.name}
+            </div>`);
+        }
         if (this.license?.url || this.license?.identifier) {
             if (this.license?.identifier) {
                 values.push(html `<div class="row"><span class="chevron">&nbsp;&gt;</span>
@@ -40,11 +46,12 @@ let LicenseNodeComponent = class LicenseNodeComponent extends GraphNodeComponent
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-LicenseNodeComponent.styles = [sharedCss];
+LicenseNodeComponent.styles = [sharedCss, changesCss];
 LicenseNodeComponent = __decorate([
     customElement('pb33f-explorer-license-node')
 ], LicenseNodeComponent);