@memberjunction/ng-dashboards 2.117.0 → 2.119.0

package/dist/Testing/components/testing-version-comparison.component.js

@@ -0,0 +1,801 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Subject, combineLatest, of } from 'rxjs';
+import { takeUntil, map, shareReplay, switchMap } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../services/testing-instrumentation.service";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.version;
+const _forTrack1 = ($index, $item) => $item.testName;
+const _c0 = () => [];
+function TestingVersionComparisonComponent_For_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const version_r1 = ctx.$implicit;
+    i0.ɵɵproperty("value", version_r1.version);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", version_r1.version, " (", version_r1.totalTests, " tests)");
+} }
+function TestingVersionComparisonComponent_For_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const version_r2 = ctx.$implicit;
+    i0.ɵɵproperty("value", version_r2.version);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", version_r2.version, " (", version_r2.totalTests, " tests)");
+} }
+function TestingVersionComparisonComponent_Conditional_31_For_69_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵelement(1, "i", 61);
+    i0.ɵɵtext(2, " Regression ");
+    i0.ɵɵelementEnd();
+} }
+function TestingVersionComparisonComponent_Conditional_31_For_69_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵtext(2, " Improved ");
+    i0.ɵɵelementEnd();
+} }
+function TestingVersionComparisonComponent_Conditional_31_For_69_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵtext(2, " Unchanged ");
+    i0.ɵɵelementEnd();
+} }
+function TestingVersionComparisonComponent_Conditional_31_For_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49)(1, "div", 50)(2, "span", 51);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 52)(5, "div", 53)(6, "span", 48);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 54);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 52)(11, "div", 53)(12, "span", 48);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 54);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "div", 55)(17, "span", 56);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 55)(20, "span", 56);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 55)(23, "span", 56);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(25, "div", 57);
+    i0.ɵɵtemplate(26, TestingVersionComparisonComponent_Conditional_31_For_69_Conditional_26_Template, 3, 0, "span", 58)(27, TestingVersionComparisonComponent_Conditional_31_For_69_Conditional_27_Template, 3, 0, "span", 59)(28, TestingVersionComparisonComponent_Conditional_31_For_69_Conditional_28_Template, 3, 0, "span", 60);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const comparison_r5 = ctx.$implicit;
+    i0.ɵɵclassProp("regression", comparison_r5.regression)("improvement", comparison_r5.improvement);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(comparison_r5.testName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(comparison_r5.versionA.avgScore.toFixed(4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", comparison_r5.versionA.passRate.toFixed(0), "% pass \u2022 ", comparison_r5.versionA.runCount, " runs");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(comparison_r5.versionB.avgScore.toFixed(4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", comparison_r5.versionB.passRate.toFixed(0), "% pass \u2022 ", comparison_r5.versionB.runCount, " runs");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("positive", comparison_r5.scoreDelta > 0)("negative", comparison_r5.scoreDelta < 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", comparison_r5.scoreDelta > 0 ? "+" : "", "", (comparison_r5.scoreDelta * 100).toFixed(1), "% ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("positive", comparison_r5.costDelta < 0)("negative", comparison_r5.costDelta > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", comparison_r5.costDelta > 0 ? "+" : "", "", (comparison_r5.costDelta * 100).toFixed(1), "% ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("positive", comparison_r5.durationDelta < 0)("negative", comparison_r5.durationDelta > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", comparison_r5.durationDelta > 0 ? "+" : "", "", (comparison_r5.durationDelta * 100).toFixed(1), "% ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(comparison_r5.regression ? 26 : comparison_r5.improvement ? 27 : 28);
+} }
+function TestingVersionComparisonComponent_Conditional_31_ForEmpty_70_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No test data available for comparison");
+    i0.ɵɵelementEnd()();
+} }
+function TestingVersionComparisonComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 16)(2, "div", 17);
+    i0.ɵɵelement(3, "i", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 19)(5, "div", 20);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "async");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 21);
+    i0.ɵɵtext(9, "Regressions Detected");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 16)(11, "div", 22);
+    i0.ɵɵelement(12, "i", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 19)(14, "div", 20);
+    i0.ɵɵtext(15);
+    i0.ɵɵpipe(16, "async");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 21);
+    i0.ɵɵtext(18, "Improvements");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 16)(20, "div", 24);
+    i0.ɵɵelement(21, "i", 25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "div", 19)(23, "div", 20);
+    i0.ɵɵtext(24);
+    i0.ɵɵpipe(25, "async");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 21);
+    i0.ɵɵtext(27, "Unchanged");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(28, "div", 16)(29, "div", 26);
+    i0.ɵɵelement(30, "i", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "div", 19)(32, "div", 20);
+    i0.ɵɵtext(33);
+    i0.ɵɵpipe(34, "async");
+    i0.ɵɵpipe(35, "number");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(36, "div", 21);
+    i0.ɵɵtext(37, "Cost Change");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(38, "div", 28)(39, "button", 29);
+    i0.ɵɵlistener("click", function TestingVersionComparisonComponent_Conditional_31_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.setFilter("all")); });
+    i0.ɵɵelement(40, "i", 30);
+    i0.ɵɵtext(41, " All Tests ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "button", 31);
+    i0.ɵɵlistener("click", function TestingVersionComparisonComponent_Conditional_31_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.setFilter("regressions")); });
+    i0.ɵɵelement(43, "i", 18);
+    i0.ɵɵtext(44, " Regressions Only ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "button", 32);
+    i0.ɵɵlistener("click", function TestingVersionComparisonComponent_Conditional_31_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.setFilter("improvements")); });
+    i0.ɵɵelement(46, "i", 23);
+    i0.ɵɵtext(47, " Improvements Only ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(48, "button", 33);
+    i0.ɵɵlistener("click", function TestingVersionComparisonComponent_Conditional_31_Template_button_click_48_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.setFilter("unchanged")); });
+    i0.ɵɵelement(49, "i", 25);
+    i0.ɵɵtext(50, " Unchanged ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(51, "div", 34)(52, "div", 35)(53, "div", 36)(54, "div", 37);
+    i0.ɵɵtext(55, "Test Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(56, "div", 38);
+    i0.ɵɵtext(57);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(58, "div", 38);
+    i0.ɵɵtext(59);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(60, "div", 39);
+    i0.ɵɵtext(61, "Score \u0394");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(62, "div", 39);
+    i0.ɵɵtext(63, "Cost \u0394");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(64, "div", 39);
+    i0.ɵɵtext(65, "Duration \u0394");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(66, "div", 40);
+    i0.ɵɵtext(67, "Status");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(68, TestingVersionComparisonComponent_Conditional_31_For_69_Template, 29, 30, "div", 41, _forTrack1, false, TestingVersionComparisonComponent_Conditional_31_ForEmpty_70_Template, 4, 0, "div", 42);
+    i0.ɵɵpipe(71, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(72, "div", 43)(73, "div", 44)(74, "h3");
+    i0.ɵɵtext(75);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(76, "div", 45)(77, "div", 46)(78, "span", 47);
+    i0.ɵɵtext(79, "Avg Score");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(80, "span", 48);
+    i0.ɵɵtext(81);
+    i0.ɵɵpipe(82, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(83, "div", 46)(84, "span", 47);
+    i0.ɵɵtext(85, "Pass Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(86, "span", 48);
+    i0.ɵɵtext(87);
+    i0.ɵɵpipe(88, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(89, "div", 46)(90, "span", 47);
+    i0.ɵɵtext(91, "Total Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(92, "span", 48);
+    i0.ɵɵtext(93);
+    i0.ɵɵpipe(94, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(95, "div", 46)(96, "span", 47);
+    i0.ɵɵtext(97, "Avg Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(98, "span", 48);
+    i0.ɵɵtext(99);
+    i0.ɵɵpipe(100, "async");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(101, "div", 44)(102, "h3");
+    i0.ɵɵtext(103);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(104, "div", 45)(105, "div", 46)(106, "span", 47);
+    i0.ɵɵtext(107, "Avg Score");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(108, "span", 48);
+    i0.ɵɵtext(109);
+    i0.ɵɵpipe(110, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(111, "div", 46)(112, "span", 47);
+    i0.ɵɵtext(113, "Pass Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(114, "span", 48);
+    i0.ɵɵtext(115);
+    i0.ɵɵpipe(116, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(117, "div", 46)(118, "span", 47);
+    i0.ɵɵtext(119, "Total Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(120, "span", 48);
+    i0.ɵɵtext(121);
+    i0.ɵɵpipe(122, "async");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(123, "div", 46)(124, "span", 47);
+    i0.ɵɵtext(125, "Avg Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(126, "span", 48);
+    i0.ɵɵtext(127);
+    i0.ɵɵpipe(128, "async");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    let tmp_11_0;
+    let tmp_13_0;
+    let tmp_14_0;
+    let tmp_15_0;
+    let tmp_16_0;
+    let tmp_18_0;
+    let tmp_19_0;
+    let tmp_20_0;
+    let tmp_21_0;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 25, ctx_r3.regressionCount$) || 0);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 27, ctx_r3.improvementCount$) || 0);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(25, 29, ctx_r3.unchangedCount$) || 0);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(35, 33, i0.ɵɵpipeBind1(34, 31, ctx_r3.totalCostDelta$) || 0, "1.2-2"), "%");
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("active", ctx_r3.filter === "all");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r3.filter === "regressions");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r3.filter === "improvements");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r3.filter === "unchanged");
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r3.versionA);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r3.versionB);
+    i0.ɵɵadvance(9);
+    i0.ɵɵrepeater((tmp_11_0 = i0.ɵɵpipeBind1(71, 36, ctx_r3.filteredComparisons$)) !== null && tmp_11_0 !== undefined ? tmp_11_0 : i0.ɵɵpureFunction0(54, _c0));
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1("", ctx_r3.versionA, " Metrics");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(((tmp_13_0 = i0.ɵɵpipeBind1(82, 38, ctx_r3.versionAMetrics$)) == null ? null : tmp_13_0.averageScore.toFixed(4)) || "0.0000");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("", ((tmp_14_0 = i0.ɵɵpipeBind1(88, 40, ctx_r3.versionAMetrics$)) == null ? null : tmp_14_0.passRate.toFixed(1)) || "0.0", "%");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("$", ((tmp_15_0 = i0.ɵɵpipeBind1(94, 42, ctx_r3.versionAMetrics$)) == null ? null : tmp_15_0.totalCost.toFixed(2)) || "0.00", "");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r3.formatDuration(((tmp_16_0 = i0.ɵɵpipeBind1(100, 44, ctx_r3.versionAMetrics$)) == null ? null : tmp_16_0.avgDuration) || 0));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r3.versionB, " Metrics");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(((tmp_18_0 = i0.ɵɵpipeBind1(110, 46, ctx_r3.versionBMetrics$)) == null ? null : tmp_18_0.averageScore.toFixed(4)) || "0.0000");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("", ((tmp_19_0 = i0.ɵɵpipeBind1(116, 48, ctx_r3.versionBMetrics$)) == null ? null : tmp_19_0.passRate.toFixed(1)) || "0.0", "%");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("$", ((tmp_20_0 = i0.ɵɵpipeBind1(122, 50, ctx_r3.versionBMetrics$)) == null ? null : tmp_20_0.totalCost.toFixed(2)) || "0.00", "");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r3.formatDuration(((tmp_21_0 = i0.ɵɵpipeBind1(128, 52, ctx_r3.versionBMetrics$)) == null ? null : tmp_21_0.avgDuration) || 0));
+} }
+function TestingVersionComparisonComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "i", 3);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "Select Two Versions to Compare");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Choose a baseline version and a comparison version from the dropdowns above to analyze changes and detect regressions.");
+    i0.ɵɵelementEnd()();
+} }
+export class TestingVersionComparisonComponent {
+    instrumentationService;
+    cdr;
+    initialState;
+    stateChange = new EventEmitter();
+    destroy$ = new Subject();
+    versionA = '';
+    versionB = '';
+    filter = 'all';
+    versions$;
+    comparisons$;
+    filteredComparisons$;
+    regressionCount$;
+    improvementCount$;
+    unchangedCount$;
+    totalCostDelta$;
+    versionAMetrics$;
+    versionBMetrics$;
+    constructor(instrumentationService, cdr) {
+        this.instrumentationService = instrumentationService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.setupObservables();
+        if (this.initialState) {
+            this.versionA = this.initialState.versionA || '';
+            this.versionB = this.initialState.versionB || '';
+            this.filter = this.initialState.filter || 'all';
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupObservables() {
+        // Load version metrics from the service method
+        this.versions$ = of(this.instrumentationService.getVersionMetrics()).pipe(switchMap(promise => promise), shareReplay(1), takeUntil(this.destroy$));
+        this.comparisons$ = combineLatest([
+            this.instrumentationService.testRuns$
+        ]).pipe(map(() => this.generateComparisons()), takeUntil(this.destroy$));
+        this.filteredComparisons$ = this.comparisons$.pipe(map(comparisons => this.filterComparisons(comparisons)));
+        this.regressionCount$ = this.comparisons$.pipe(map(comparisons => comparisons.filter(c => c.regression).length));
+        this.improvementCount$ = this.comparisons$.pipe(map(comparisons => comparisons.filter(c => c.improvement).length));
+        this.unchangedCount$ = this.comparisons$.pipe(map(comparisons => comparisons.filter(c => !c.regression && !c.improvement).length));
+        this.totalCostDelta$ = this.comparisons$.pipe(map(comparisons => {
+            if (comparisons.length === 0)
+                return 0;
+            const avgDelta = comparisons.reduce((sum, c) => sum + c.costDelta, 0) / comparisons.length;
+            return avgDelta * 100;
+        }));
+        this.versionAMetrics$ = this.instrumentationService.testRuns$.pipe(map(runs => this.calculateVersionMetrics(this.versionA, runs)));
+        this.versionBMetrics$ = this.instrumentationService.testRuns$.pipe(map(runs => this.calculateVersionMetrics(this.versionB, runs)));
+    }
+    generateComparisons() {
+        if (!this.versionA || !this.versionB)
+            return [];
+        const runsA = this.getRunsForVersion(this.versionA);
+        const runsB = this.getRunsForVersion(this.versionB);
+        const testNames = new Set([
+            ...runsA.map(r => r.testName),
+            ...runsB.map(r => r.testName)
+        ]);
+        return Array.from(testNames).map(testName => {
+            const testRunsA = runsA.filter(r => r.testName === testName);
+            const testRunsB = runsB.filter(r => r.testName === testName);
+            const versionAData = this.aggregateTestData(testRunsA);
+            const versionBData = this.aggregateTestData(testRunsB);
+            const scoreDelta = versionBData.avgScore - versionAData.avgScore;
+            const costDelta = versionBData.avgCost === 0 ? 0 : (versionBData.avgCost - versionAData.avgCost) / versionAData.avgCost;
+            const durationDelta = versionBData.avgDuration === 0 ? 0 : (versionBData.avgDuration - versionAData.avgDuration) / versionAData.avgDuration;
+            return {
+                testName,
+                versionA: versionAData,
+                versionB: versionBData,
+                regression: scoreDelta < -0.05 || (versionBData.passRate - versionAData.passRate) < -5,
+                improvement: scoreDelta > 0.05 || (versionBData.passRate - versionAData.passRate) > 5,
+                scoreDelta,
+                costDelta,
+                durationDelta
+            };
+        }).sort((a, b) => {
+            if (a.regression && !b.regression)
+                return -1;
+            if (!a.regression && b.regression)
+                return 1;
+            return Math.abs(b.scoreDelta) - Math.abs(a.scoreDelta);
+        });
+    }
+    getRunsForVersion(version) {
+        return [];
+    }
+    aggregateTestData(runs) {
+        if (runs.length === 0) {
+            return {
+                avgScore: 0,
+                avgCost: 0,
+                avgDuration: 0,
+                passRate: 0,
+                runCount: 0
+            };
+        }
+        const passed = runs.filter(r => r.status === 'Passed').length;
+        return {
+            avgScore: runs.reduce((sum, r) => sum + r.score, 0) / runs.length,
+            avgCost: runs.reduce((sum, r) => sum + r.cost, 0) / runs.length,
+            avgDuration: runs.reduce((sum, r) => sum + r.duration, 0) / runs.length,
+            passRate: (passed / runs.length) * 100,
+            runCount: runs.length
+        };
+    }
+    filterComparisons(comparisons) {
+        if (this.filter === 'all')
+            return comparisons;
+        if (this.filter === 'regressions')
+            return comparisons.filter(c => c.regression);
+        if (this.filter === 'improvements')
+            return comparisons.filter(c => c.improvement);
+        if (this.filter === 'unchanged')
+            return comparisons.filter(c => !c.regression && !c.improvement);
+        return comparisons;
+    }
+    calculateVersionMetrics(version, allRuns) {
+        const runs = allRuns.filter(r => r.testName === version);
+        if (runs.length === 0) {
+            return {
+                averageScore: 0,
+                passRate: 0,
+                totalCost: 0,
+                avgDuration: 0
+            };
+        }
+        const passed = runs.filter(r => r.status === 'Passed').length;
+        return {
+            averageScore: runs.reduce((sum, r) => sum + r.score, 0) / runs.length,
+            passRate: (passed / runs.length) * 100,
+            totalCost: runs.reduce((sum, r) => sum + r.cost, 0),
+            avgDuration: runs.reduce((sum, r) => sum + r.duration, 0) / runs.length
+        };
+    }
+    onVersionChange() {
+        this.emitStateChange();
+        this.cdr.markForCheck();
+    }
+    setFilter(filter) {
+        this.filter = filter;
+        this.emitStateChange();
+        this.cdr.markForCheck();
+    }
+    refresh() {
+        this.instrumentationService.refresh();
+    }
+    formatDuration(milliseconds) {
+        if (milliseconds < 1000)
+            return `${milliseconds}ms`;
+        const seconds = Math.floor(milliseconds / 1000);
+        const minutes = Math.floor(seconds / 60);
+        if (minutes > 0)
+            return `${minutes}m ${seconds % 60}s`;
+        return `${seconds}s`;
+    }
+    emitStateChange() {
+        this.stateChange.emit({
+            versionA: this.versionA,
+            versionB: this.versionB,
+            filter: this.filter
+        });
+    }
+    static ɵfac = function TestingVersionComparisonComponent_Factory(t) { return new (t || TestingVersionComparisonComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingVersionComparisonComponent, selectors: [["app-testing-version-comparison"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, decls: 33, vars: 9, consts: [[1, "testing-version-comparison"], [1, "version-header"], [1, "header-left"], [1, "fa-solid", "fa-code-compare"], [1, "header-actions"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "version-selector"], [1, "selector-group"], [1, "version-select", 3, "ngModelChange", "change", "ngModel"], ["value", ""], [3, "value"], [1, "selector-icon"], [1, "fa-solid", "fa-arrows-left-right"], [1, "empty-state"], [1, "comparison-summary"], [1, "summary-card"], [1, "card-icon", "regression"], [1, "fa-solid", "fa-arrow-trend-down"], [1, "card-content"], [1, "card-value"], [1, "card-label"], [1, "card-icon", "improvement"], [1, "fa-solid", "fa-arrow-trend-up"], [1, "card-icon", "neutral"], [1, "fa-solid", "fa-minus"], [1, "card-icon", "cost"], [1, "fa-solid", "fa-dollar-sign"], [1, "comparison-filters"], [1, "filter-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "filter-btn", "regression", 3, "click"], [1, "filter-btn", "improvement", 3, "click"], [1, "filter-btn", "neutral", 3, "click"], [1, "comparison-content"], [1, "comparison-table"], [1, "table-header"], [1, "header-cell", "test-name"], [1, "header-cell", "version-data"], [1, "header-cell", "delta"], [1, "header-cell", "status"], [1, "table-row", 3, "regression", "improvement"], [1, "no-data"], [1, "metrics-overview"], [1, "overview-section"], [1, "metrics-grid"], [1, "metric-item"], [1, "metric-label"], [1, "metric-value"], [1, "table-row"], [1, "cell", "test-name"], [1, "test-name-text"], [1, "cell", "version-data"], [1, "version-metrics"], [1, "metric-meta"], [1, "cell", "delta"], [1, "delta-value"], [1, "cell", "status"], [1, "status-badge", "regression"], [1, "status-badge", "improvement"], [1, "status-badge", "neutral"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-minus-circle"], [1, "fa-solid", "fa-chart-simple"]], template: function TestingVersionComparisonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
+            i0.ɵɵelement(4, "i", 3);
+            i0.ɵɵtext(5, " Version Comparison ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 4)(7, "button", 5);
+            i0.ɵɵlistener("click", function TestingVersionComparisonComponent_Template_button_click_7_listener() { return ctx.refresh(); });
+            i0.ɵɵelement(8, "i", 6);
+            i0.ɵɵtext(9, " Refresh ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(10, "div", 7)(11, "div", 8)(12, "label");
+            i0.ɵɵtext(13, "Version A (Baseline)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "select", 9);
+            i0.ɵɵtwoWayListener("ngModelChange", function TestingVersionComparisonComponent_Template_select_ngModelChange_14_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.versionA, $event) || (ctx.versionA = $event); return $event; });
+            i0.ɵɵlistener("change", function TestingVersionComparisonComponent_Template_select_change_14_listener() { return ctx.onVersionChange(); });
+            i0.ɵɵelementStart(15, "option", 10);
+            i0.ɵɵtext(16, "Select Version...");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(17, TestingVersionComparisonComponent_For_18_Template, 2, 3, "option", 11, _forTrack0);
+            i0.ɵɵpipe(19, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(20, "div", 12);
+            i0.ɵɵelement(21, "i", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "div", 8)(23, "label");
+            i0.ɵɵtext(24, "Version B (Comparison)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(25, "select", 9);
+            i0.ɵɵtwoWayListener("ngModelChange", function TestingVersionComparisonComponent_Template_select_ngModelChange_25_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.versionB, $event) || (ctx.versionB = $event); return $event; });
+            i0.ɵɵlistener("change", function TestingVersionComparisonComponent_Template_select_change_25_listener() { return ctx.onVersionChange(); });
+            i0.ɵɵelementStart(26, "option", 10);
+            i0.ɵɵtext(27, "Select Version...");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(28, TestingVersionComparisonComponent_For_29_Template, 2, 3, "option", 11, _forTrack0);
+            i0.ɵɵpipe(30, "async");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(31, TestingVersionComparisonComponent_Conditional_31_Template, 129, 55)(32, TestingVersionComparisonComponent_Conditional_32_Template, 6, 0, "div", 14);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            let tmp_1_0;
+            let tmp_3_0;
+            i0.ɵɵadvance(14);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.versionA);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater((tmp_1_0 = i0.ɵɵpipeBind1(19, 3, ctx.versions$)) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(7, _c0));
+            i0.ɵɵadvance(8);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.versionB);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater((tmp_3_0 = i0.ɵɵpipeBind1(30, 5, ctx.versions$)) !== null && tmp_3_0 !== undefined ? tmp_3_0 : i0.ɵɵpureFunction0(8, _c0));
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.versionA && ctx.versionB ? 31 : 32);
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.AsyncPipe, i3.DecimalPipe], styles: [".testing-version-comparison[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .version-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn[_ngcontent-%COMP%]:hover {\n      background: #f5f5f5;\n    }\n\n    .version-selector[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr auto 1fr;\n      gap: 20px;\n      align-items: center;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 24px;\n    }\n\n    .selector-group[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .selector-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .version-select[_ngcontent-%COMP%] {\n      padding: 10px 14px;\n      border: 2px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      transition: border-color 0.2s ease;\n    }\n\n    .version-select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n\n    .selector-icon[_ngcontent-%COMP%] {\n      font-size: 24px;\n      color: #2196f3;\n      text-align: center;\n    }\n\n    .comparison-summary[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 16px;\n      margin-bottom: 24px;\n    }\n\n    .summary-card[_ngcontent-%COMP%] {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .card-icon[_ngcontent-%COMP%] {\n      width: 56px;\n      height: 56px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 24px;\n      color: white;\n    }\n\n    .card-icon.regression[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);\n    }\n\n    .card-icon.improvement[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);\n    }\n\n    .card-icon.neutral[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);\n    }\n\n    .card-icon.cost[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);\n    }\n\n    .card-content[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .card-value[_ngcontent-%COMP%] {\n      font-size: 28px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 6px;\n    }\n\n    .card-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n\n    .comparison-filters[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      margin-bottom: 20px;\n      background: white;\n      padding: 16px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .filter-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .filter-btn[_ngcontent-%COMP%]:hover {\n      background: #f5f5f5;\n      border-color: #bdbdbd;\n    }\n\n    .filter-btn.active[_ngcontent-%COMP%] {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n    }\n\n    .filter-btn.regression.active[_ngcontent-%COMP%] {\n      background: #f44336;\n      border-color: #f44336;\n    }\n\n    .filter-btn.improvement.active[_ngcontent-%COMP%] {\n      background: #4caf50;\n      border-color: #4caf50;\n    }\n\n    .filter-btn.neutral.active[_ngcontent-%COMP%] {\n      background: #9e9e9e;\n      border-color: #9e9e9e;\n    }\n\n    .comparison-content[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      margin-bottom: 24px;\n    }\n\n    .comparison-table[_ngcontent-%COMP%] {\n      overflow-x: auto;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 1.5fr 1.5fr 100px 100px 100px 140px;\n      gap: 16px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 2px solid #e0e0e0;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 1.5fr 1.5fr 100px 100px 100px 140px;\n      gap: 16px;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .table-row.regression[_ngcontent-%COMP%] {\n      border-left: 4px solid #f44336;\n    }\n\n    .table-row.improvement[_ngcontent-%COMP%] {\n      border-left: 4px solid #4caf50;\n    }\n\n    .cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .cell.test-name[_ngcontent-%COMP%] {\n      font-weight: 500;\n    }\n\n    .version-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .metric-value[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .metric-meta[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .delta-value[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .delta-value.positive[_ngcontent-%COMP%] {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .delta-value.negative[_ngcontent-%COMP%] {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .status-badge.regression[_ngcontent-%COMP%] {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .status-badge.improvement[_ngcontent-%COMP%] {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .status-badge.neutral[_ngcontent-%COMP%] {\n      background: #f5f5f5;\n      color: #9e9e9e;\n    }\n\n    .metrics-overview[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 20px;\n    }\n\n    .overview-section[_ngcontent-%COMP%] {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .overview-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 16px 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      padding-bottom: 12px;\n      border-bottom: 2px solid #f0f0f0;\n    }\n\n    .metrics-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n\n    .metric-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .metric-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .metric-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n    }\n\n    .empty-state[_ngcontent-%COMP%], \n   .no-data[_ngcontent-%COMP%] {\n      padding: 80px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n   .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 64px;\n      margin-bottom: 20px;\n      opacity: 0.3;\n      color: #2196f3;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      font-size: 20px;\n      color: #666;\n      margin: 0 0 12px 0;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n   .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 14px;\n      margin: 0;\n      max-width: 500px;\n      margin: 0 auto;\n      line-height: 1.6;\n    }\n\n    @media (max-width: 1200px) {\n      .metrics-overview[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .version-selector[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .selector-icon[_ngcontent-%COMP%] {\n        transform: rotate(90deg);\n      }\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingVersionComparisonComponent, [{
+        type: Component,
+        args: [{ selector: 'app-testing-version-comparison', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="testing-version-comparison">
+      <div class="version-header">
+        <div class="header-left">
+          <h2>
+            <i class="fa-solid fa-code-compare"></i>
+            Version Comparison
+          </h2>
+        </div>
+        <div class="header-actions">
+          <button class="action-btn" (click)="refresh()">
+            <i class="fa-solid fa-refresh"></i>
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <!-- Version Selector -->
+      <div class="version-selector">
+        <div class="selector-group">
+          <label>Version A (Baseline)</label>
+          <select [(ngModel)]="versionA" (change)="onVersionChange()" class="version-select">
+            <option value="">Select Version...</option>
+            @for (version of (versions$ | async) ?? []; track version.version) {
+              <option [value]="version.version">{{ version.version }} ({{ version.totalTests }} tests)</option>
+            }
+          </select>
+        </div>
+        <div class="selector-icon">
+          <i class="fa-solid fa-arrows-left-right"></i>
+        </div>
+        <div class="selector-group">
+          <label>Version B (Comparison)</label>
+          <select [(ngModel)]="versionB" (change)="onVersionChange()" class="version-select">
+            <option value="">Select Version...</option>
+            @for (version of (versions$ | async) ?? []; track version.version) {
+              <option [value]="version.version">{{ version.version }} ({{ version.totalTests }} tests)</option>
+            }
+          </select>
+        </div>
+      </div>
+
+      @if (versionA && versionB) {
+        <!-- Summary Cards -->
+        <div class="comparison-summary">
+          <div class="summary-card">
+            <div class="card-icon regression">
+              <i class="fa-solid fa-arrow-trend-down"></i>
+            </div>
+            <div class="card-content">
+              <div class="card-value">{{ (regressionCount$ | async) || 0 }}</div>
+              <div class="card-label">Regressions Detected</div>
+            </div>
+          </div>
+          <div class="summary-card">
+            <div class="card-icon improvement">
+              <i class="fa-solid fa-arrow-trend-up"></i>
+            </div>
+            <div class="card-content">
+              <div class="card-value">{{ (improvementCount$ | async) || 0 }}</div>
+              <div class="card-label">Improvements</div>
+            </div>
+          </div>
+          <div class="summary-card">
+            <div class="card-icon neutral">
+              <i class="fa-solid fa-minus"></i>
+            </div>
+            <div class="card-content">
+              <div class="card-value">{{ (unchangedCount$ | async) || 0 }}</div>
+              <div class="card-label">Unchanged</div>
+            </div>
+          </div>
+          <div class="summary-card">
+            <div class="card-icon cost">
+              <i class="fa-solid fa-dollar-sign"></i>
+            </div>
+            <div class="card-content">
+              <div class="card-value">{{ (totalCostDelta$ | async) || 0 | number:'1.2-2' }}%</div>
+              <div class="card-label">Cost Change</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="comparison-filters">
+          <button
+            class="filter-btn"
+            [class.active]="filter === 'all'"
+            (click)="setFilter('all')"
+          >
+            <i class="fa-solid fa-list"></i>
+            All Tests
+          </button>
+          <button
+            class="filter-btn regression"
+            [class.active]="filter === 'regressions'"
+            (click)="setFilter('regressions')"
+          >
+            <i class="fa-solid fa-arrow-trend-down"></i>
+            Regressions Only
+          </button>
+          <button
+            class="filter-btn improvement"
+            [class.active]="filter === 'improvements'"
+            (click)="setFilter('improvements')"
+          >
+            <i class="fa-solid fa-arrow-trend-up"></i>
+            Improvements Only
+          </button>
+          <button
+            class="filter-btn neutral"
+            [class.active]="filter === 'unchanged'"
+            (click)="setFilter('unchanged')"
+          >
+            <i class="fa-solid fa-minus"></i>
+            Unchanged
+          </button>
+        </div>
+
+        <!-- Comparison Table -->
+        <div class="comparison-content">
+          <div class="comparison-table">
+            <div class="table-header">
+              <div class="header-cell test-name">Test Name</div>
+              <div class="header-cell version-data">{{ versionA }}</div>
+              <div class="header-cell version-data">{{ versionB }}</div>
+              <div class="header-cell delta">Score Δ</div>
+              <div class="header-cell delta">Cost Δ</div>
+              <div class="header-cell delta">Duration Δ</div>
+              <div class="header-cell status">Status</div>
+            </div>
+
+            @for (comparison of (filteredComparisons$ | async) ?? []; track comparison.testName) {
+              <div class="table-row" [class.regression]="comparison.regression" [class.improvement]="comparison.improvement">
+                <div class="cell test-name">
+                  <span class="test-name-text">{{ comparison.testName }}</span>
+                </div>
+                <div class="cell version-data">
+                  <div class="version-metrics">
+                    <span class="metric-value">{{ comparison.versionA.avgScore.toFixed(4) }}</span>
+                    <span class="metric-meta">{{ comparison.versionA.passRate.toFixed(0) }}% pass • {{ comparison.versionA.runCount }} runs</span>
+                  </div>
+                </div>
+                <div class="cell version-data">
+                  <div class="version-metrics">
+                    <span class="metric-value">{{ comparison.versionB.avgScore.toFixed(4) }}</span>
+                    <span class="metric-meta">{{ comparison.versionB.passRate.toFixed(0) }}% pass • {{ comparison.versionB.runCount }} runs</span>
+                  </div>
+                </div>
+                <div class="cell delta">
+                  <span class="delta-value" [class.positive]="comparison.scoreDelta > 0" [class.negative]="comparison.scoreDelta < 0">
+                    {{ comparison.scoreDelta > 0 ? '+' : '' }}{{ (comparison.scoreDelta * 100).toFixed(1) }}%
+                  </span>
+                </div>
+                <div class="cell delta">
+                  <span class="delta-value" [class.positive]="comparison.costDelta < 0" [class.negative]="comparison.costDelta > 0">
+                    {{ comparison.costDelta > 0 ? '+' : '' }}{{ (comparison.costDelta * 100).toFixed(1) }}%
+                  </span>
+                </div>
+                <div class="cell delta">
+                  <span class="delta-value" [class.positive]="comparison.durationDelta < 0" [class.negative]="comparison.durationDelta > 0">
+                    {{ comparison.durationDelta > 0 ? '+' : '' }}{{ (comparison.durationDelta * 100).toFixed(1) }}%
+                  </span>
+                </div>
+                <div class="cell status">
+                  @if (comparison.regression) {
+                    <span class="status-badge regression">
+                      <i class="fa-solid fa-exclamation-triangle"></i>
+                      Regression
+                    </span>
+                  } @else if (comparison.improvement) {
+                    <span class="status-badge improvement">
+                      <i class="fa-solid fa-check-circle"></i>
+                      Improved
+                    </span>
+                  } @else {
+                    <span class="status-badge neutral">
+                      <i class="fa-solid fa-minus-circle"></i>
+                      Unchanged
+                    </span>
+                  }
+                </div>
+              </div>
+            } @empty {
+              <div class="no-data">
+                <i class="fa-solid fa-chart-simple"></i>
+                <p>No test data available for comparison</p>
+              </div>
+            }
+          </div>
+        </div>
+
+        <!-- Version Metrics Overview -->
+        <div class="metrics-overview">
+          <div class="overview-section">
+            <h3>{{ versionA }} Metrics</h3>
+            <div class="metrics-grid">
+              <div class="metric-item">
+                <span class="metric-label">Avg Score</span>
+                <span class="metric-value">{{ (versionAMetrics$ | async)?.averageScore.toFixed(4) || '0.0000' }}</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">Pass Rate</span>
+                <span class="metric-value">{{ (versionAMetrics$ | async)?.passRate.toFixed(1) || '0.0' }}%</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">Total Cost</span>
+                <span class="metric-value">\${{ (versionAMetrics$ | async)?.totalCost.toFixed(2) || '0.00' }}</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">Avg Duration</span>
+                <span class="metric-value">{{ formatDuration((versionAMetrics$ | async)?.avgDuration || 0) }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="overview-section">
+            <h3>{{ versionB }} Metrics</h3>
+            <div class="metrics-grid">
+              <div class="metric-item">
+                <span class="metric-label">Avg Score</span>
+                <span class="metric-value">{{ (versionBMetrics$ | async)?.averageScore.toFixed(4) || '0.0000' }}</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">Pass Rate</span>
+                <span class="metric-value">{{ (versionBMetrics$ | async)?.passRate.toFixed(1) || '0.0' }}%</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">Total Cost</span>
+                <span class="metric-value">\${{ (versionBMetrics$ | async)?.totalCost.toFixed(2) || '0.00' }}</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-label">Avg Duration</span>
+                <span class="metric-value">{{ formatDuration((versionBMetrics$ | async)?.avgDuration || 0) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <div class="empty-state">
+          <i class="fa-solid fa-code-compare"></i>
+          <h3>Select Two Versions to Compare</h3>
+          <p>Choose a baseline version and a comparison version from the dropdowns above to analyze changes and detect regressions.</p>
+        </div>
+      }
+    </div>
+  `, styles: ["\n    .testing-version-comparison {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .version-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left h2 i {\n      color: #2196f3;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .version-selector {\n      display: grid;\n      grid-template-columns: 1fr auto 1fr;\n      gap: 20px;\n      align-items: center;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 24px;\n    }\n\n    .selector-group {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .selector-group label {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .version-select {\n      padding: 10px 14px;\n      border: 2px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      transition: border-color 0.2s ease;\n    }\n\n    .version-select:focus {\n      outline: none;\n      border-color: #2196f3;\n    }\n\n    .selector-icon {\n      font-size: 24px;\n      color: #2196f3;\n      text-align: center;\n    }\n\n    .comparison-summary {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 16px;\n      margin-bottom: 24px;\n    }\n\n    .summary-card {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .card-icon {\n      width: 56px;\n      height: 56px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 24px;\n      color: white;\n    }\n\n    .card-icon.regression {\n      background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);\n    }\n\n    .card-icon.improvement {\n      background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);\n    }\n\n    .card-icon.neutral {\n      background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);\n    }\n\n    .card-icon.cost {\n      background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);\n    }\n\n    .card-content {\n      flex: 1;\n    }\n\n    .card-value {\n      font-size: 28px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 6px;\n    }\n\n    .card-label {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n\n    .comparison-filters {\n      display: flex;\n      gap: 12px;\n      margin-bottom: 20px;\n      background: white;\n      padding: 16px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .filter-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .filter-btn:hover {\n      background: #f5f5f5;\n      border-color: #bdbdbd;\n    }\n\n    .filter-btn.active {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n    }\n\n    .filter-btn.regression.active {\n      background: #f44336;\n      border-color: #f44336;\n    }\n\n    .filter-btn.improvement.active {\n      background: #4caf50;\n      border-color: #4caf50;\n    }\n\n    .filter-btn.neutral.active {\n      background: #9e9e9e;\n      border-color: #9e9e9e;\n    }\n\n    .comparison-content {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      margin-bottom: 24px;\n    }\n\n    .comparison-table {\n      overflow-x: auto;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 2fr 1.5fr 1.5fr 100px 100px 100px 140px;\n      gap: 16px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 2px solid #e0e0e0;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 2fr 1.5fr 1.5fr 100px 100px 100px 140px;\n      gap: 16px;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .table-row:hover {\n      background: #f8f9fa;\n    }\n\n    .table-row.regression {\n      border-left: 4px solid #f44336;\n    }\n\n    .table-row.improvement {\n      border-left: 4px solid #4caf50;\n    }\n\n    .cell {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .cell.test-name {\n      font-weight: 500;\n    }\n\n    .version-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .metric-value {\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .metric-meta {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .delta-value {\n      font-size: 13px;\n      font-weight: 600;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .delta-value.positive {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .delta-value.negative {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .status-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .status-badge.regression {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .status-badge.improvement {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .status-badge.neutral {\n      background: #f5f5f5;\n      color: #9e9e9e;\n    }\n\n    .metrics-overview {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 20px;\n    }\n\n    .overview-section {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .overview-section h3 {\n      margin: 0 0 16px 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      padding-bottom: 12px;\n      border-bottom: 2px solid #f0f0f0;\n    }\n\n    .metrics-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n\n    .metric-item {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .metric-label {\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .metric-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n    }\n\n    .empty-state,\n    .no-data {\n      padding: 80px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .empty-state i,\n    .no-data i {\n      font-size: 64px;\n      margin-bottom: 20px;\n      opacity: 0.3;\n      color: #2196f3;\n    }\n\n    .empty-state h3 {\n      font-size: 20px;\n      color: #666;\n      margin: 0 0 12px 0;\n    }\n\n    .empty-state p,\n    .no-data p {\n      font-size: 14px;\n      margin: 0;\n      max-width: 500px;\n      margin: 0 auto;\n      line-height: 1.6;\n    }\n\n    @media (max-width: 1200px) {\n      .metrics-overview {\n        grid-template-columns: 1fr;\n      }\n\n      .version-selector {\n        grid-template-columns: 1fr;\n      }\n\n      .selector-icon {\n        transform: rotate(90deg);\n      }\n    }\n  "] }]
+    }], () => [{ type: i1.TestingInstrumentationService }, { type: i0.ChangeDetectorRef }], { initialState: [{
+            type: Input
+        }], stateChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingVersionComparisonComponent, { className: "TestingVersionComparisonComponent", filePath: "src/Testing/components/testing-version-comparison.component.ts", lineNumber: 697 }); })();
+//# sourceMappingURL=testing-version-comparison.component.js.map