@pb33f/cowboy-components 0.13.1 → 0.14.0

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

@@ -173,13 +173,32 @@ let ProblemList = class ProblemList extends LitElement {
         this.requestUpdate();
     }
     problemClicked(event) {
-        const problem = event.detail.problem;
-        this.selectedProblemHash = problem.problemObject.hash();
-        this.selectedLine = problem.line;
-        this.selectedIdx = problem.idx;
-        this.mainView.problems = [problem];
-        this.lineClicked(problem.line, false, problem.idx);
-        this.setPageForProblem(problem.problemObject);
+        const target = this.resolveProblemClickTarget(event.detail);
+        const { problem, line, index } = target;
+        this.selectedProblemHash = problem.hash();
+        this.selectedLine = line;
+        this.selectedIdx = index;
+        this.lineClicked(line, false, index);
+        this.setPageForProblem(problem);
+    }
+    resolveProblemClickTarget(event) {
+        if (event.problemItem) {
+            return {
+                problem: event.problem,
+                line: event.problemItem.line,
+                index: event.problemItem.idx
+            };
+        }
+        return {
+            problem: event.problem,
+            line: event.problem.startLineNumber,
+            index: this.indexForProblemOnLine(event.problem)
+        };
+    }
+    indexForProblemOnLine(problem) {
+        const lineProblems = this.filteredProblems.filter(p => p.startLineNumber === problem.startLineNumber);
+        const index = lineProblems.findIndex(p => p.hash() === problem.hash());
+        return index >= 0 ? index + 1 : 0;
     }
     slideChanged(event) {
         this.lineClicked(event.detail.problem.line, false, event.detail.index, true);

package/dist/components/problems-overview/problem-overview-group.js

@@ -41,7 +41,8 @@ let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
             bubbles: true,
             composed: true,
             detail: {
-                problem: problem,
+                problem: problem.problemObject,
+                problemItem: problem,
                 launchedFromProblems: false
             }
         }));

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

@@ -2,11 +2,13 @@ import { LitElement, TemplateResult } from "lit";
 import { ExplorerEdge } from "./explorer.js";
 import { ElkEdgeSection } from "elkjs";
 import { ChangeCategory } from "../../model/graph.js";
+export type EdgePathStyle = 'd3' | 'rounded-orthogonal' | 'polyline';
 export interface EdgeConfig {
     edge: ExplorerEdge;
     bendPoints?: boolean;
     bendCurve?: boolean;
     roundCorners?: boolean;
+    edgePathStyle?: EdgePathStyle;
     visible?: boolean;
     animated?: boolean;
     isDependency?: boolean;
@@ -18,6 +20,7 @@ export declare class EdgeComponent extends LitElement {
     bendPoints: boolean;
     bendCurve: boolean;
     roundCorners: boolean;
+    edgePathStyle: EdgePathStyle;
     visible: boolean;
     targetIsLeaf: boolean;
     sections: TemplateResult[];
@@ -29,13 +32,14 @@ export declare class EdgeComponent extends LitElement {
     configure(config: EdgeConfig): void;
     render(): TemplateResult<2>;
     private shouldUseRoundedPath;
+    private buildPath;
 }
-type Point = {
+export type Point = {
     x: number;
     y: number;
 };
 export declare function getSectionPoints(section: ElkEdgeSection | undefined, includeBendPoints: boolean): Point[];
 export declare function normalizeEdgePoints(points: Point[]): Point[];
 export declare function buildPolylinePath(points: Point[]): string;
+export declare function buildD3BundlePath(points: Point[]): string;
 export declare function buildRoundedOrthogonalPath(points: Point[], radius?: number): string;
-export {};

package/dist/components/visualizer/edge.js

@@ -6,11 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from "lit/decorators.js";
 import { LitElement, svg } from "lit";
+import { curveBundle, line } from "d3-shape";
 import { ChangeCategory } from "../../model/graph.js";
 let EdgeComponent = class EdgeComponent extends LitElement {
     constructor() {
         super();
         this.roundCorners = false;
+        this.edgePathStyle = 'd3';
         this.visible = true;
         this.targetIsLeaf = false;
         this.sections = [];
@@ -27,6 +29,8 @@ let EdgeComponent = class EdgeComponent extends LitElement {
             this.bendCurve = config.bendCurve;
         if (config.roundCorners !== undefined)
             this.roundCorners = config.roundCorners;
+        if (config.edgePathStyle !== undefined)
+            this.edgePathStyle = config.edgePathStyle;
         if (config.visible !== undefined)
             this.visible = config.visible;
         if (config.animated !== undefined)
@@ -70,10 +74,7 @@ let EdgeComponent = class EdgeComponent extends LitElement {
                     arrow = `leaf-${this.changeCategory}`;
             }
             const points = getSectionPoints(section, this.bendPoints);
-            const shouldRoundPath = this.bendCurve && this.shouldUseRoundedPath();
-            const path = shouldRoundPath
-                ? buildRoundedOrthogonalPath(points)
-                : buildPolylinePath(points);
+            const path = this.buildPath(points);
             const clazzList = [];
             if (this.edge.ref.length > 0) {
                 clazzList.push('ref');
@@ -107,11 +108,26 @@ let EdgeComponent = class EdgeComponent extends LitElement {
     shouldUseRoundedPath() {
         return this.roundCorners && this.edge.ref.length === 0 && (!this.edge.poly || this.edge.poly === '');
     }
+    buildPath(points) {
+        if (!this.bendCurve || this.edgePathStyle === 'polyline') {
+            return buildPolylinePath(points);
+        }
+        if (this.edgePathStyle === 'rounded-orthogonal') {
+            return this.shouldUseRoundedPath()
+                ? buildRoundedOrthogonalPath(points)
+                : buildPolylinePath(points);
+        }
+        return buildD3BundlePath(points) || buildPolylinePath(points);
+    }
 };
 EdgeComponent = __decorate([
     customElement('pb33f-explorer-edge')
 ], EdgeComponent);
 export { EdgeComponent };
+const d3BundlePathFunction = line()
+    .x((point) => point.x)
+    .y((point) => point.y)
+    .curve(curveBundle.beta(1));
 export function getSectionPoints(section, includeBendPoints) {
     if (!section) {
         return [];
@@ -162,6 +178,12 @@ export function buildPolylinePath(points) {
     }
     return path;
 }
+export function buildD3BundlePath(points) {
+    if (points.length === 0) {
+        return '';
+    }
+    return d3BundlePathFunction(points) || '';
+}
 export function buildRoundedOrthogonalPath(points, radius = 6) {
     if (points.length <= 2) {
         return buildPolylinePath(points);

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

@@ -3,19 +3,28 @@ export default css `
     .equalizer {
         height: 40px;
         border-bottom: 1px dashed var(--secondary-color-dimmer);
+        position: relative;
+        z-index: 20;
     }
     .equalizer-container {
         margin-top: 7px;
+        box-sizing: border-box;
+        min-height: 220px;
         height: auto;
         max-height: 400px;
+        border-top: 1px solid var(--secondary-color-dimmer);
         border-bottom: 1px solid var(--secondary-color);
-        background-color: var(--background-color-withopacity);
-        z-index: 1;
+        background-color: var(--background-color);
+        z-index: 20;
         position: absolute;
+        left: 0;
+        right: 0;
         width: 100%;
         backdrop-filter: blur(2px);
         -webkit-backdrop-filter: blur(2px);
         padding-bottom: 20px;
+        overflow: hidden;
+        box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
     }
 
     .explorer-key-container {

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

@@ -2,7 +2,7 @@ import { ForeignObjectComponent } from "./foreign-object.js";
 import { GraphNodeComponent } from "./nodes/graph-node.js";
 import { ElkNode, ElkExtendedEdge } from 'elkjs';
 import { Edge, GraphMode, GraphResponse, Node, VacuumResult } from "../../model/graph.js";
-import { EdgeComponent } from "./edge.js";
+import { EdgeComponent, type EdgePathStyle } from "./edge.js";
 import { EqualizerComponent } from "./equalizer.js";
 import { ExplorerDependentNodeClickedEvent, ExplorerEqualizerChangedEvent, ExplorerLoadMoreChildrenEvent } from "../../events/doctor.js";
 import { HasEyes } from "./has-eyes.js";
@@ -50,6 +50,7 @@ export declare class ExplorerComponent extends HasEyes {
     foreignObjects: SVGForeignObjectElement[];
     ready: boolean;
     renderEqualizer: boolean;
+    edgePathStyle: EdgePathStyle;
     embeddedMode: boolean;
     graphResponse: GraphResponse;
     disablePovMode: boolean;
@@ -199,6 +200,7 @@ export declare class ExplorerComponent extends HasEyes {
         'elk.layered.considerModelOrder.strategy': string;
     };
     buildGraph(): Promise<any>;
+    private buildGraphAndRender;
     buildNodes(): void;
     buildEdges(): void;
     readyGo(): void;

package/dist/components/visualizer/explorer.js

@@ -20,6 +20,7 @@ import ElkLayoutWorker from "../../workers/elk-layout.worker.js?worker&inline";
 import sharedCss from "../../css/shared.css.js";
 import { ExpansionManager } from "../../managers/expansion-manager.js";
 import { LayoutFilterManager } from "../../managers/layout-filter-manager.js";
+import { calculateNodeViewportTarget } from "./viewport-position.js";
 export var Direction;
 (function (Direction) {
     Direction["UP"] = "UP";
@@ -34,6 +35,7 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
     get pathRevealTarget() { return this.expansionManager.pathRevealTarget; }
     constructor() {
         super();
+        this.edgePathStyle = 'd3';
         this.embeddedMode = false;
         this.disablePovMode = false;
         this.hideExamples = false;
@@ -325,13 +327,10 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
                 this.violationMap.set(id, violation);
             });
         }
-        this.buildGraph().then(() => {
-            // Center on root after initial graph build
-            setTimeout(() => {
-                if (!this.activeNode) {
-                    this.centerOnRoot();
-                }
-            }, 50);
+        this.buildGraphAndRender().then(() => {
+            if (!this.activeNode) {
+                this.centerOnRoot();
+            }
         });
     }
     rotate() {
@@ -350,19 +349,16 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
                 break;
         }
         this.resetNodes();
-        this.buildGraph().then(() => {
-            setTimeout(() => {
-                if (this.activeNode) {
-                    this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
-                        bubbles: true,
-                        composed: true,
-                        detail: {
-                            nodeId: this.activeNode.id,
-                        }
-                    }));
-                    return;
-                }
-            }, 200);
+        this.buildGraphAndRender().then(() => {
+            if (this.activeNode) {
+                this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        nodeId: this.activeNode.id,
+                    }
+                }));
+            }
         });
     }
     mouseMove(evt) {
@@ -462,20 +458,16 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
         if (isPovMode) {
             this.povMode = true;
         }
-        this.buildGraph().then(() => {
+        this.buildGraphAndRender().then(() => {
             if (isPovMode && this.povFocusNodeId) {
                 this.equalizer.controls.povNode = this.povNode;
-                setTimeout(() => {
-                    const povNode = this.graphResponse.nodes?.find(n => n.id === this.povFocusNodeId);
-                    if (povNode) {
-                        this.moveToNode(povNode, false);
-                    }
-                }, 50);
+                const povNode = this.graphResponse.nodes?.find(n => n.id === this.povFocusNodeId);
+                if (povNode) {
+                    this.moveToNode(povNode, false);
+                }
             }
             else if (!this.activeNode) {
-                setTimeout(() => {
-                    this.centerOnRoot();
-                }, 50);
+                this.centerOnRoot();
             }
         });
     }
@@ -505,19 +497,17 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
             this.graphResponse = evt.detail.graph;
         }
         this.extractEQPreferences(evt);
-        this.buildGraph().then(() => {
-            setTimeout(() => {
-                if (this.activeNode && this._visible) {
-                    this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
-                        bubbles: true,
-                        composed: true,
-                        detail: {
-                            nodeId: this.activeNode.id,
-                            first: true
-                        }
-                    }));
-                }
-            }, 50);
+        this.buildGraphAndRender().then(() => {
+            if (this.activeNode && this._visible) {
+                this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        nodeId: this.activeNode.id,
+                        first: true
+                    }
+                }));
+            }
         });
     }
     resetNodes() {
@@ -642,6 +632,11 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
             });
         });
     }
+    async buildGraphAndRender() {
+        await this.buildGraph();
+        await this.updateComplete;
+        await new Promise(resolve => requestAnimationFrame(() => resolve()));
+    }
     buildNodes() {
         this.nodeMap.clear();
         this.definitionCache.clear();
@@ -671,6 +666,7 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
             collapsedEdges: this.collapsedEdges,
             bendPoints: this.bendPoints,
             bendEdges: this.bendEdges,
+            edgePathStyle: this.edgePathStyle,
             nodeLimitExceeded: this.nodeLimitExceeded,
             povMode: this.povMode
         }, this.renderGraphMap);
@@ -707,10 +703,8 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
         this.zoomY = -150;
         this.svgItem.setAttribute('viewBox', `-150 -150 ${viewBoxW} ${viewBoxH}`);
         this.resetNodes();
-        this.buildGraph().then(() => {
-            setTimeout(() => {
-                this.snapToRoot();
-            }, 150);
+        this.buildGraphAndRender().then(() => {
+            this.snapToRoot();
         });
     }
     snapToRoot() {
@@ -720,9 +714,8 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
         if (rootNode && rootNode.x !== undefined && rootNode.y !== undefined) {
             const viewBox = this.svgItem?.viewBox?.baseVal;
             if (viewBox) {
-                const width = rootNode.width || 0;
-                const height = rootNode.height || 0;
-                this.snapViewBox(rootNode.x - (viewBox.width / 2) + (width / 2), rootNode.y - (viewBox.height / 2) + (height / 2));
+                const target = calculateNodeViewportTarget(this.direction, rootNode, viewBox);
+                this.snapViewBox(target.x, target.y);
             }
             this.activeNode = rootNode;
         }
@@ -744,9 +737,8 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
         if (rootNode && rootNode.x !== undefined && rootNode.y !== undefined) {
             const viewBox = this.svgItem?.viewBox?.baseVal;
             if (viewBox) {
-                const width = rootNode.width || 0;
-                const height = rootNode.height || 0;
-                this.animateViewBox(rootNode.x - (viewBox.width / 2) + (width / 2), rootNode.y - (viewBox.height / 2) + (height / 2), 200);
+                const target = calculateNodeViewportTarget(this.direction, rootNode, viewBox);
+                this.animateViewBox(target.x, target.y, 200);
             }
             this.activeNode = rootNode;
         }
@@ -840,15 +832,12 @@ let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends Ha
             const viewBox = this.svgItem.viewBox.baseVal;
             const found = this.graph.children.find((n) => n.id === node.id);
             if (found && found.x !== undefined && found.y !== undefined && !found.filtered) {
-                const width = found.width || 0;
-                const height = found.height || 0;
-                const targetX = found.x - (viewBox.width / 2) + (width / 2);
-                const targetY = found.y - (viewBox.height / 2) + (height / 2);
+                const target = calculateNodeViewportTarget(this.direction, found, viewBox);
                 if (snap) {
-                    this.snapViewBox(targetX, targetY);
+                    this.snapViewBox(target.x, target.y);
                 }
                 else {
-                    this.animateViewBox(targetX, targetY, 200);
+                    this.animateViewBox(target.x, target.y, 200);
                 }
             }
         }
@@ -951,6 +940,9 @@ __decorate([
 __decorate([
     property()
 ], ExplorerComponent.prototype, "renderEqualizer", void 0);
+__decorate([
+    property()
+], ExplorerComponent.prototype, "edgePathStyle", void 0);
 __decorate([
     property({ type: Boolean })
 ], ExplorerComponent.prototype, "embeddedMode", void 0);

package/dist/components/visualizer/nodes/change-view-node.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult } from "lit";
 import { GraphNodeComponent } from "./graph-node.js";
-import { Node } from "../../../model/graph.js";
+import { Node, ChangeCounts } from "../../../model/graph.js";
 export declare class ChangeViewNodeComponent extends GraphNodeComponent {
     static styles: import("lit").CSSResult[];
     constructor(nodeMap: Map<string, Node>);
@@ -14,6 +14,6 @@ export declare class ChangeViewNodeComponent extends GraphNodeComponent {
      */
     private getOwnChanges;
     private renderChildRows;
-    renderChanges(): TemplateResult;
+    renderChanges(changeCounts?: ChangeCounts): TemplateResult;
     render(): TemplateResult<1>;
 }

package/dist/components/visualizer/nodes/change-view-node.js

@@ -100,27 +100,31 @@ let ChangeViewNodeComponent = class ChangeViewNodeComponent extends GraphNodeCom
             </div>
         `)}`;
     }
-    renderChanges() {
+    renderChanges(changeCounts = this.changeCounts) {
         if (!this.node?.timeline?.length)
             return html ``;
         if (!this.node.childChanges?.length)
-            return super.renderChanges();
+            return super.renderChanges(changeCounts);
         const ownOnly = this.getOwnChanges(this.node);
         if (!ownOnly.length)
             return html ``;
         const counts = categorizeChanges(ownOnly);
         const blocks = this.renderBadges(counts.breaking, counts.modifications, counts.additions, counts.removals);
-        return html `<div class="row-node change-div">${blocks}</div>`;
+        if (blocks.length === 0)
+            return html ``;
+        return html `<div class="node-annotation change-div">${blocks}</div>`;
     }
     render() {
+        const results = this.countResults();
+        const changeCounts = this.changeCounts;
         return html `
-            <div class="${this.renderClasses()}"
+            <div class="${this.renderClasses('rendered-element', results, changeCounts)}"
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderHeader()}
                 ${this.renderChildRows()}
-                ${this.renderChanges()}
-                ${this.renderUpArrow()}
+                ${this.renderExtensions()}
             </div>
+            ${this.renderUnderNodeAnnotations(results, changeCounts)}
             ${this.renderActiveArrow()}
         `;
     }

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

@@ -1,6 +1,11 @@
 import { LitElement, TemplateResult } from "lit";
 import { ExplorerEdge, ExplorerNode } from "../explorer.js";
 import { Node, VacuumResult, ChangeCategory, ChangeCounts } from "../../../model/graph.js";
+interface VacuumResultCounts {
+    errors: number;
+    warnings: number;
+    info: number;
+}
 export declare class GraphNodeComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     active: boolean;
@@ -37,19 +42,18 @@ export declare class GraphNodeComponent extends LitElement {
     activatePovMode(): void;
     renderPovButton(): TemplateResult<1> | null;
     renderUpArrow(): TemplateResult<1>;
+    renderUnderNodeAnnotations(results?: VacuumResultCounts, changeCounts?: ChangeCounts): TemplateResult<1>;
     renderActiveArrow(): TemplateResult<1>;
-    countResults(): {
-        errors: number;
-        warnings: number;
-        info: number;
-    };
-    renderVacuumResults(): TemplateResult<1> | undefined;
+    countResults(): VacuumResultCounts;
+    hasVacuumResults(results?: VacuumResultCounts): boolean;
+    renderVacuumResults(results?: VacuumResultCounts): TemplateResult<1> | undefined;
     renderExtensions(): TemplateResult<1> | undefined;
     clicked(): void;
     isSingleLineNode(): boolean;
-    renderClasses(defaultString?: string): string;
+    renderClasses(defaultString?: string, results?: VacuumResultCounts, changeCounts?: ChangeCounts): string;
     protected renderNodeWrapper(content: TemplateResult | TemplateResult[]): TemplateResult<1>;
     renderBadges(breaking: number, mods: number, adds: number, removals: number): TemplateResult[];
-    renderChanges(): TemplateResult;
+    renderChanges(changeCounts?: ChangeCounts): TemplateResult;
     render(): TemplateResult<1>;
 }
+export {};

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

@@ -120,10 +120,15 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
         return null;
     }
     renderUpArrow() {
-        return html `${this.renderExtensions()}
-        ${this.renderArrayType()}
-        ${this.renderVacuumResults()}
-        ${this.renderPovButton()}`;
+        return this.renderUnderNodeAnnotations();
+    }
+    renderUnderNodeAnnotations(results = this.countResults(), changeCounts = this.changeCounts) {
+        return html `
+            ${this.renderArrayType()}
+            ${this.renderChanges(changeCounts)}
+            ${this.renderVacuumResults(results)}
+            ${this.renderPovButton()}
+            ${this.renderLoadMoreControl()}`;
     }
     renderActiveArrow() {
         if (!this.active)
@@ -133,12 +138,17 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
     countResults() {
         return countViolationsBySeverity(this.node, this.violationMap);
     }
-    renderVacuumResults() {
+    hasVacuumResults(results = this.countResults()) {
+        return results.errors + results.warnings + results.info > 0;
+    }
+    renderVacuumResults(results = this.countResults()) {
         if (this.node?.violationIds && this.node.violationIds.length > 0 && this.violationMap) {
             let errors = html ``;
             let warnings = html ``;
             let info = html ``;
-            let results = this.countResults();
+            if (results.errors + results.warnings + results.info <= 0) {
+                return html ``;
+            }
             if (results.errors > 0) {
                 errors = html `
                     <pb33f-model-icon color="${IconColor.error}" size="${IconSize.small}"
@@ -188,7 +198,7 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
     isSingleLineNode() {
         return this.height <= 30;
     }
-    renderClasses(defaultString = 'rendered-element') {
+    renderClasses(defaultString = 'rendered-element', results = this.countResults(), changeCounts = this.changeCounts) {
         let classes = [defaultString];
         if (this.active)
             classes.push('active');
@@ -198,20 +208,26 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
             classes.push('ref');
         if (this.node.dependency && this.dim)
             classes.push('dependent-node');
-        const cat = this.changeCategory;
+        if (this.hasVacuumResults(results))
+            classes.push('has-vacuum-results');
+        const cat = changeCounts.category;
         if (cat !== ChangeCategory.NONE && cat !== ChangeCategory.MODIFIED) {
             classes.push(`change-${cat}`);
         }
         return classes.join(' ');
     }
     renderNodeWrapper(content) {
+        const results = this.countResults();
+        const changeCounts = this.changeCounts;
         return html `
-            <div class="${this.renderClasses()}"
+            <div class="${this.renderClasses('rendered-element', results, changeCounts)}"
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
-                ${content}
-                ${this.renderChanges()}
-                ${this.renderUpArrow()}
+                <div class="node-content">
+                    ${content}
+                    ${this.renderExtensions()}
+                </div>
             </div>
+            ${this.renderUnderNodeAnnotations(results, changeCounts)}
             ${this.renderActiveArrow()}
         `;
     }
@@ -231,19 +247,24 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
         }
         return blocks;
     }
-    renderChanges() {
+    renderChanges(changeCounts = this.changeCounts) {
         if (!this.node.timeline) {
             return html ``;
         }
-        const { breaking, modifications: mods, additions: adds, removals } = this.changeCounts;
+        const { breaking, modifications: mods, additions: adds, removals } = changeCounts;
         const blocks = this.renderBadges(breaking, mods, adds, removals);
+        if (blocks.length === 0) {
+            return html ``;
+        }
         return html `
-            <div class="row-node change-div">
+            <div class="node-annotation change-div">
                 ${blocks}
             </div>
         `;
     }
     render() {
+        const results = this.countResults();
+        const changeCounts = this.changeCounts;
         let arrayValues = html ``;
         if (this.node.isArray) {
             arrayValues = html `
@@ -258,20 +279,21 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
                 </sl-badge>`;
         }
         return html `
-            <div class="${this.renderClasses("node")}"
+            <div class="${this.renderClasses('node', results, changeCounts)}"
                  style="height: ${this.height}px; width: ${this.width - 2}px" @click="${this.clicked}">
 
-                <div class="row-node header-node">
-                    <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
-                                      icon="${this.node.type}"></pb33f-model-icon>
-                    <span class="header-text">${this.label}</span>
-                    ${arrayValues}
-                    ${this.renderDependentControl()}
+                <div class="node-content">
+                    <div class="row-node header-node">
+                        <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
+                                          icon="${this.node.type}"></pb33f-model-icon>
+                        <span class="header-text">${this.label}</span>
+                        ${arrayValues}
+                        ${this.renderDependentControl()}
+                    </div>
+                    ${this.renderExtensions()}
                 </div>
-                ${this.renderChanges()}
-                ${this.renderUpArrow()}
-                ${this.renderLoadMoreControl()}
             </div>
+            ${this.renderUnderNodeAnnotations(results, changeCounts)}
             ${this.renderActiveArrow()}
         `;
     }