@memberjunction/ng-artifacts 5.42.0 → 5.44.0

package/dist/lib/components/plugins/ml-experiment-results-viewer.component.js

@@ -0,0 +1,630 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectorRef, Output, EventEmitter, inject } from '@angular/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
+import { createMarkdownSnapshot } from '../../snapshot-helpers';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-ui-components";
+const _forTrack0 = ($index, $item) => $item.rank;
+const _forTrack1 = ($index, $item) => $item.feature;
+const _forTrack2 = ($index, $item) => $item.label;
+function MLExperimentResultsViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 3);
+    i0.ɵɵelementEnd();
+} }
+function MLExperimentResultsViewerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "i", 4);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No experiment results to display");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.ErrorMessage || "This artifact does not contain readable ML experiment results.");
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Summary);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 31);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 32);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.HeadlineScore);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r0.TargetMetricLabel, " \u00B7 winner");
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 33);
+    i0.ɵɵtext(2, "Goal");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.Goal);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 33);
+    i0.ɵɵtext(2, "Target");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.Spec.target);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 33);
+    i0.ɵɵtext(2, "As-of");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.Spec.asOf);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 33);
+    i0.ɵɵtext(2, "Validation");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.Spec.validation);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "span", 33);
+    i0.ɵɵtext(2, "Budget used");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.Spec.budgetUsed);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "strong");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r4.algorithm);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const row_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", row_r4.algorithm, " ");
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 42);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "strong");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.formatScore(row_r4.score));
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const row_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatScore(row_r4.score), " ");
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 39);
+    i0.ɵɵlistener("click", function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Template_tr_click_0_listener() { const row_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnOpenRowModel(row_r4)); });
+    i0.ɵɵelementStart(1, "td")(2, "span", 40);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "td", 41);
+    i0.ɵɵconditionalCreate(5, MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_5_Template, 2, 1, "strong")(6, MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_6_Template, 1, 1);
+    i0.ɵɵconditionalCreate(7, MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_7_Template, 1, 0, "i", 42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "td", 26);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "td", 37);
+    i0.ɵɵconditionalCreate(11, MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_11_Template, 2, 1, "strong")(12, MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Conditional_12_Template, 1, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "td", 43);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const row_r4 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("is-winner", row_r4.isWinner)("has-model", row_r4.modelId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("gold", row_r4.isWinner);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r4.rank);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(row_r4.isWinner ? 5 : 6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(row_r4.modelId ? 7 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r4.featureSet || "\u2014");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(row_r4.isWinner ? 11 : 12);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.formatScore(row_r4.cvScore));
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "table", 35)(2, "thead")(3, "tr")(4, "th", 36);
+    i0.ɵɵtext(5, "#");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Algorithm");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th");
+    i0.ɵɵtext(9, "Feature set");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th", 37);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th", 37);
+    i0.ɵɵtext(13, "CV");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(14, "tbody");
+    i0.ɵɵrepeaterCreate(15, MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_For_16_Template, 15, 12, "tr", 38, _forTrack0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(11);
+    i0.ɵɵtextInterpolate(ctx_r0.TargetMetricLabel);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r0.LeaderboardRows);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵtext(1, "No leaderboard iterations were recorded.");
+    i0.ɵɵelementEnd();
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_21_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 46);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵelement(4, "span", 48);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 49);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const bar_r5 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", bar_r5.feature);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(bar_r5.feature);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", bar_r5.widthPct, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.formatImportance(bar_r5.importance));
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵtext(1, "Feature Importance \u2014 winning model");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 44);
+    i0.ɵɵrepeaterCreate(3, MLExperimentResultsViewerComponent_Conditional_3_Conditional_21_For_4_Template, 7, 5, "div", 45, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.FeatureBars);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.WinningModelSubtitle);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_33_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "div", 51);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 52);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const m_r6 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(m_r6.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(m_r6.label);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵrepeaterCreate(1, MLExperimentResultsViewerComponent_Conditional_3_Conditional_33_For_2_Template, 5, 2, "div", 50, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.WinningMetrics);
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵtext(1, " No linked ML Model record on this artifact yet. ");
+    i0.ɵɵelementEnd();
+} }
+function MLExperimentResultsViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
+    i0.ɵɵelement(2, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 7)(4, "h2", 8);
+    i0.ɵɵtext(5, "ML Experiment Results");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, MLExperimentResultsViewerComponent_Conditional_3_Conditional_6_Template, 2, 1, "div", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, MLExperimentResultsViewerComponent_Conditional_3_Conditional_7_Template, 5, 2, "div", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 11)(9, "div", 12);
+    i0.ɵɵconditionalCreate(10, MLExperimentResultsViewerComponent_Conditional_3_Conditional_10_Template, 5, 1, "div", 13);
+    i0.ɵɵconditionalCreate(11, MLExperimentResultsViewerComponent_Conditional_3_Conditional_11_Template, 5, 1, "div", 13);
+    i0.ɵɵconditionalCreate(12, MLExperimentResultsViewerComponent_Conditional_3_Conditional_12_Template, 5, 1, "div", 13);
+    i0.ɵɵconditionalCreate(13, MLExperimentResultsViewerComponent_Conditional_3_Conditional_13_Template, 5, 1, "div", 13);
+    i0.ɵɵconditionalCreate(14, MLExperimentResultsViewerComponent_Conditional_3_Conditional_14_Template, 5, 1, "div", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 14)(16, "div", 15)(17, "div", 16);
+    i0.ɵɵtext(18, "Leaderboard");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(19, MLExperimentResultsViewerComponent_Conditional_3_Conditional_19_Template, 17, 1, "div", 17)(20, MLExperimentResultsViewerComponent_Conditional_3_Conditional_20_Template, 2, 0, "div", 18);
+    i0.ɵɵconditionalCreate(21, MLExperimentResultsViewerComponent_Conditional_3_Conditional_21_Template, 5, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "div", 19)(23, "div", 16);
+    i0.ɵɵtext(24, "Winning Model");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 20)(26, "div", 21)(27, "div", 22);
+    i0.ɵɵelement(28, "i", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "div", 24)(30, "h3", 25);
+    i0.ɵɵtext(31);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(32, MLExperimentResultsViewerComponent_Conditional_3_Conditional_32_Template, 2, 1, "div", 26);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(33, MLExperimentResultsViewerComponent_Conditional_3_Conditional_33_Template, 3, 0, "div", 27);
+    i0.ɵɵelementStart(34, "button", 28);
+    i0.ɵɵlistener("click", function MLExperimentResultsViewerComponent_Conditional_3_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDrillThroughToModel()); });
+    i0.ɵɵelement(35, "i", 29);
+    i0.ɵɵtext(36, " Drill through to ML Model ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(37, MLExperimentResultsViewerComponent_Conditional_3_Conditional_37_Template, 2, 0, "div", 30);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r0.Summary ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.HeadlineScore != null ? 7 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.Goal ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Spec.target ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Spec.asOf ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Spec.validation ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Spec.budgetUsed ? 14 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r0.LeaderboardRows.length > 0 ? 19 : 20);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.FeatureBars.length > 0 ? 21 : -1);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r0.WinningAlgorithm);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.WinningModelSubtitle ? 32 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.WinningMetrics.length > 0 ? 33 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", !ctx_r0.HasDrillThroughTarget);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r0.HasDrillThroughTarget ? 37 : -1);
+} }
+/**
+ * Viewer plugin for **ML Experiment Results** artifacts (Predictive Studio).
+ *
+ * Renders the experiment goal + headline best metric, a ranked leaderboard of
+ * iterations, feature-importance bars for the winning model, and a winning-model
+ * card with a drill-through button that issues a {@link NavigationRequest} to open
+ * the winning `MJ: ML Models` record in Predictive Studio's "Models" nav item.
+ *
+ * Falls back to a friendly empty state when the JSON can't be parsed, and exposes
+ * the agent-authored markdown report as an additional "Report" tab when present.
+ */
+let MLExperimentResultsViewerComponent = class MLExperimentResultsViewerComponent extends BaseArtifactViewerPluginComponent {
+    /** Emitted to request app-level navigation (drill-through to the ML Model record). */
+    navigationRequest = new EventEmitter();
+    cdr = inject(ChangeDetectorRef);
+    /** Parsed artifact content. */
+    Spec = null;
+    IsLoading = true;
+    HasError = false;
+    ErrorMessage = '';
+    /** Normalized, ranked leaderboard rows for rendering. */
+    LeaderboardRows = [];
+    /** Normalized feature-importance bars for rendering. */
+    FeatureBars = [];
+    // ─── Lifecycle ───────────────────────────────────────────────────
+    ngOnInit() {
+        try {
+            this.Spec = this.parseJsonContent();
+            if (!this.Spec) {
+                this.HasError = true;
+                this.ErrorMessage = 'Could not parse the ML Experiment Results content as JSON.';
+                return;
+            }
+            this.LeaderboardRows = this.buildLeaderboardRows(this.Spec.Leaderboard ?? this.Spec.leaderboard ?? []);
+            this.FeatureBars = this.buildFeatureBars(this.Spec.FeatureImportance ?? this.Spec.featureImportance ?? []);
+        }
+        catch (error) {
+            this.HasError = true;
+            this.ErrorMessage = error instanceof Error ? error.message : 'Failed to load experiment results.';
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ─── Base-class contract ─────────────────────────────────────────
+    get hasDisplayContent() {
+        return this.Spec != null;
+    }
+    GetCurrentStateSnapshot() {
+        // The richest portable representation is the agent-authored markdown report.
+        return createMarkdownSnapshot(this.WinningMarkdown ?? this.getRawContent(), this.getDisplayTitle());
+    }
+    /**
+     * Expose the agent-authored markdown report as an additional "Report" tab
+     * so users can read the full narrative alongside the rich visual display.
+     */
+    GetAdditionalTabs() {
+        const markdown = this.Spec?.Markdown ?? this.Spec?.report?.markdown;
+        if (!markdown) {
+            return [];
+        }
+        return [
+            {
+                label: 'Report',
+                icon: 'fa-file-lines',
+                contentType: 'markdown',
+                content: markdown
+            }
+        ];
+    }
+    // ─── Display getters ─────────────────────────────────────────────
+    get Goal() {
+        return this.Spec?.Goal ?? this.Spec?.goal ?? this.Spec?.Summary ?? this.Spec?.report?.summary ?? '';
+    }
+    get Summary() {
+        return this.Spec?.Summary ?? this.Spec?.report?.summary ?? '';
+    }
+    get TargetMetricLabel() {
+        return this.Spec?.TargetMetric ?? this.Spec?.targetMetric ?? this.firstMetricName() ?? 'Score';
+    }
+    /** The winning row (rank 1) if any. */
+    get WinningRow() {
+        return this.LeaderboardRows.find(r => r.isWinner) ?? this.LeaderboardRows[0] ?? null;
+    }
+    /** Headline best score (the winning row's primary score), formatted. */
+    get HeadlineScore() {
+        const score = this.WinningRow?.score;
+        return score != null ? this.formatScore(score) : null;
+    }
+    get WinningAlgorithm() {
+        return this.Spec?.BestModel?.Name ?? this.Spec?.report?.bestModelName ?? this.WinningRow?.algorithm ?? 'Winning model';
+    }
+    get WinningModelSubtitle() {
+        const parts = [];
+        if (this.WinningRow?.featureSet) {
+            parts.push(this.WinningRow.featureSet);
+        }
+        const version = this.Spec?.BestModel?.Version ?? this.Spec?.report?.bestModelVersion;
+        if (version != null && `${version}`.trim()) {
+            parts.push(`${version}`);
+        }
+        return parts.join(' · ');
+    }
+    /** Extra headline metrics for the winning-model card. */
+    get WinningMetrics() {
+        const provided = this.Spec?.winningMetrics ?? [];
+        if (provided.length > 0) {
+            return provided;
+        }
+        // Synthesize a single metric from the headline score when nothing explicit was provided.
+        const row = this.WinningRow;
+        if (row?.score != null) {
+            return [{ label: this.firstMetricName() ?? 'Score', value: this.formatScore(row.score) }];
+        }
+        return [];
+    }
+    get WinningMarkdown() {
+        return this.Spec?.Markdown ?? this.Spec?.report?.markdown ?? null;
+    }
+    /** Whether we have a resolvable model ID to drill through to. */
+    get HasDrillThroughTarget() {
+        return this.resolveBestModelId() != null;
+    }
+    get LeaderboardSize() {
+        return this.LeaderboardRows.length;
+    }
+    // ─── Actions ─────────────────────────────────────────────────────
+    /**
+     * Drill through to the winning ML Model record in Predictive Studio.
+     * Matches the §9.4 contract: NavigationRequest to the 'Models' nav item.
+     */
+    OnDrillThroughToModel() {
+        const modelId = this.resolveBestModelId();
+        if (!modelId) {
+            return;
+        }
+        this.navigationRequest.emit({
+            appName: 'Predictive Studio',
+            navItemName: 'Models',
+            queryParams: { modelId }
+        });
+    }
+    /**
+     * Drill through to a specific leaderboard row's model, when that row carries a modelId.
+     */
+    OnOpenRowModel(row) {
+        if (!row.modelId) {
+            return;
+        }
+        this.navigationRequest.emit({
+            appName: 'Predictive Studio',
+            navItemName: 'Models',
+            queryParams: { modelId: row.modelId }
+        });
+    }
+    // ─── Helpers ─────────────────────────────────────────────────────
+    /**
+     * Resolve the winning model ID. Priority (canonical PascalCase first):
+     * BestModel.ID → BestModelID → report block → lowercase field → top leaderboard row.
+     */
+    resolveBestModelId() {
+        return this.Spec?.BestModel?.ID
+            ?? this.Spec?.BestModelID
+            ?? this.Spec?.report?.bestModelId
+            ?? this.Spec?.bestModelId
+            ?? this.WinningRow?.modelId
+            ?? null;
+    }
+    /** Build normalized, ranked leaderboard rows from raw entries. */
+    buildLeaderboardRows(entries) {
+        if (!Array.isArray(entries) || entries.length === 0) {
+            return [];
+        }
+        const rows = entries.map((e, index) => ({
+            // Canonical `Leaderboard` is already best-first; derive rank from order.
+            rank: e.rank ?? index + 1,
+            algorithm: e.algorithm ?? e.algorithmName ?? 'Unknown',
+            featureSet: e.featureSet ?? '',
+            // Canonical: `Metric`; fallback: lowercase `score`.
+            score: this.firstDefined(e.Metric ?? e.score),
+            cvScore: this.firstDefined(e.cvScore),
+            // Canonical: `ModelID`; fallback: lowercase `modelId`.
+            modelId: e.ModelID ?? e.modelId ?? null,
+            isWinner: false
+        }));
+        // Sort by explicit rank ascending (rank 1 is best).
+        rows.sort((a, b) => a.rank - b.rank);
+        if (rows.length > 0) {
+            rows[0].isWinner = true;
+        }
+        return rows;
+    }
+    /** Build normalized feature-importance bars (widths relative to the max). */
+    buildFeatureBars(entries) {
+        if (!Array.isArray(entries) || entries.length === 0) {
+            return [];
+        }
+        const resolved = entries.map(e => ({
+            feature: e.feature ?? e.name ?? 'Feature',
+            importance: this.firstDefined(e.importance ?? e.weight ?? e.value) ?? 0
+        }));
+        const max = resolved.reduce((m, r) => Math.max(m, r.importance), 0);
+        // Sort descending by importance for a clean ranked bar chart.
+        resolved.sort((a, b) => b.importance - a.importance);
+        return resolved.map(r => ({
+            feature: r.feature,
+            importance: r.importance,
+            widthPct: max > 0 ? Math.max(2, Math.round((r.importance / max) * 100)) : 0
+        }));
+    }
+    /** First metric name found on the leaderboard, for column/label fallback. */
+    firstMetricName() {
+        const entry = (this.Spec?.Leaderboard ?? this.Spec?.leaderboard)?.[0];
+        return entry?.metricName ?? null;
+    }
+    /** Return the value if it's a finite number, else null. */
+    firstDefined(value) {
+        return typeof value === 'number' && Number.isFinite(value) ? value : null;
+    }
+    /** Format a numeric score for display (3 decimals, trimmed). */
+    formatScore(value) {
+        if (value == null) {
+            return '—';
+        }
+        // Scores in [0,1] (AUC/F1) look best at 3 decimals; larger metrics (RMSE) at 2.
+        const decimals = Math.abs(value) < 1 ? 3 : 2;
+        return value.toFixed(decimals);
+    }
+    /** Format an importance weight for the small bar label. */
+    formatImportance(value) {
+        if (!Number.isFinite(value)) {
+            return '';
+        }
+        // Show .31 style for sub-1 weights, otherwise 2 decimals.
+        return Math.abs(value) < 1 ? value.toFixed(2).replace(/^0/, '') : value.toFixed(2);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵMLExperimentResultsViewerComponent_BaseFactory; return function MLExperimentResultsViewerComponent_Factory(__ngFactoryType__) { return (ɵMLExperimentResultsViewerComponent_BaseFactory || (ɵMLExperimentResultsViewerComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MLExperimentResultsViewerComponent)))(__ngFactoryType__ || MLExperimentResultsViewerComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MLExperimentResultsViewerComponent, selectors: [["mj-ml-experiment-results-viewer"]], outputs: { navigationRequest: "navigationRequest" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 2, consts: [[1, "ml-exp-viewer", 3, "ngClass"], [1, "ml-exp-loading"], [1, "ml-exp-empty"], ["text", "Loading experiment results\u2026", "size", "medium"], [1, "fa-solid", "fa-flask-vial"], [1, "ml-exp-hero"], [1, "hero-badge"], [1, "hero-titles"], [1, "hero-title"], [1, "hero-sub"], [1, "hero-metric"], [1, "ml-exp-body"], [1, "goalbar"], [1, "goal-item"], [1, "ml-exp-cols"], [1, "col-main"], [1, "section-title"], [1, "lb-card"], [1, "inline-empty"], [1, "col-side"], [1, "winner-card"], [1, "winner-top"], [1, "crown"], [1, "fa-solid", "fa-crown"], [1, "winner-head"], [1, "winner-name"], [1, "muted"], [1, "wmetrics"], ["mjButton", "", "variant", "primary", 1, "drill-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "drill-hint", "muted"], [1, "hero-metric-value"], [1, "hero-metric-label"], [1, "goal-key"], [1, "goal-val"], [1, "lb-table"], [1, "lb-rank-col"], [1, "num"], [3, "is-winner", "has-model"], [3, "click"], [1, "rank"], [1, "algo"], ["title", "Open this model", 1, "fa-solid", "fa-arrow-up-right-from-square", "row-link-icon"], [1, "num", "muted"], [1, "fi-card"], [1, "fbar"], [1, "fbar-label", 3, "title"], [1, "fbar-track"], [1, "fbar-fill"], [1, "fbar-num"], [1, "wmetric"], [1, "wmetric-value"], [1, "wmetric-label"]], template: function MLExperimentResultsViewerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, MLExperimentResultsViewerComponent_Conditional_1_Template, 2, 0, "div", 1)(2, MLExperimentResultsViewerComponent_Conditional_2_Template, 6, 1, "div", 2)(3, MLExperimentResultsViewerComponent_Conditional_3_Template, 38, 14);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", ctx.cssClass);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : ctx.HasError || !ctx.Spec ? 2 : 3);
+        } }, dependencies: [i1.NgClass, i2.LoadingComponent, i3.MJButtonDirective], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.ml-exp-viewer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  font-size: 13px;\n}\n\n\n\n\n.ml-exp-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  min-height: 200px;\n}\n\n.ml-exp-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  min-height: 240px;\n  padding: 40px 24px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n\n.ml-exp-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 40px;\n  margin-bottom: 14px;\n  color: var(--mj-text-disabled);\n}\n\n.ml-exp-empty[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 6px;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n}\n\n.ml-exp-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  max-width: 420px;\n  font-size: 13px;\n}\n\n\n\n\n.ml-exp-hero[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 20px 22px;\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-brand-primary-active), var(--mj-brand-primary));\n}\n\n.hero-badge[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  display: grid;\n  place-items: center;\n  font-size: 20px;\n  background: color-mix(in srgb, var(--mj-text-inverse) 16%, transparent);\n}\n\n.hero-titles[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n\n.hero-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n}\n\n.hero-sub[_ngcontent-%COMP%] {\n  margin-top: 3px;\n  font-size: 12.5px;\n  color: color-mix(in srgb, var(--mj-text-inverse) 78%, transparent);\n}\n\n.hero-metric[_ngcontent-%COMP%] {\n  margin-left: auto;\n  text-align: right;\n  flex: 0 0 auto;\n}\n\n.hero-metric-value[_ngcontent-%COMP%] {\n  font-size: 34px;\n  font-weight: 780;\n  letter-spacing: -0.02em;\n  line-height: 1;\n}\n\n.hero-metric-label[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: color-mix(in srgb, var(--mj-text-inverse) 72%, transparent);\n}\n\n\n\n\n.ml-exp-body[_ngcontent-%COMP%] {\n  padding: 20px 22px 28px;\n  background: var(--mj-bg-surface);\n  flex: 1;\n}\n\n.goalbar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px 26px;\n  padding: 13px 16px;\n  margin-bottom: 18px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n}\n\n.goal-item[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  min-width: 0;\n}\n\n.goal-key[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n}\n\n.goal-val[_ngcontent-%COMP%] {\n  font-weight: 650;\n  color: var(--mj-text-primary);\n}\n\n.ml-exp-cols[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1.25fr 1fr;\n  gap: 20px;\n  align-items: start;\n}\n\n@media (max-width: 920px) {\n  .ml-exp-cols[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0 0 10px;\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n}\n\n.col-main[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]:not(:first-child) {\n  margin-top: 20px;\n}\n\n.inline-empty[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border: 1px dashed var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12.5px;\n}\n\n\n\n\n.lb-card[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.lb-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12.5px;\n}\n\n.lb-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 10px 12px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.lb-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-primary);\n}\n\n.lb-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n  border-bottom: 0;\n}\n\n.lb-table[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n.lb-table[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.lb-table[_ngcontent-%COMP%]   .lb-rank-col[_ngcontent-%COMP%] {\n  width: 44px;\n}\n\n.lb-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.is-winner[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n}\n\n.lb-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.has-model[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.lb-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.has-model[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.lb-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.has-model.is-winner[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, var(--mj-bg-surface));\n}\n\n.row-link-icon[_ngcontent-%COMP%] {\n  margin-left: 6px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.lb-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.has-model[_ngcontent-%COMP%]:hover   .row-link-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.rank[_ngcontent-%COMP%] {\n  display: inline-grid;\n  place-items: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.rank.gold[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning-text);\n  background: var(--mj-status-warning-bg);\n}\n\n\n\n\n.fi-card[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 14px 16px;\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.fbar[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 2fr auto;\n  align-items: center;\n  gap: 12px;\n  font-size: 12.5px;\n}\n\n.fbar-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.fbar-track[_ngcontent-%COMP%] {\n  height: 8px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.fbar-fill[_ngcontent-%COMP%] {\n  display: block;\n  height: 100%;\n  border-radius: 999px;\n  background: var(--mj-brand-primary);\n  transition: width 0.25s ease;\n}\n\n.fbar-num[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-muted);\n  min-width: 30px;\n  text-align: right;\n}\n\n\n\n\n.winner-card[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-status-success-border);\n  border-radius: 12px;\n  padding: 18px;\n  background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n}\n\n.winner-top[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 13px;\n}\n\n.crown[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 46px;\n  height: 46px;\n  border-radius: 11px;\n  display: grid;\n  place-items: center;\n  font-size: 19px;\n  color: var(--mj-text-inverse);\n  background: var(--mj-status-success);\n}\n\n.winner-head[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n\n.winner-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.winner-head[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.wmetrics[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));\n  gap: 10px;\n  margin: 16px 0;\n}\n\n.wmetric[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 9px;\n  padding: 10px 12px;\n  text-align: center;\n  background: var(--mj-bg-surface);\n}\n\n.wmetric-value[_ngcontent-%COMP%] {\n  font-size: 19px;\n  font-weight: 720;\n  color: var(--mj-status-success-text);\n}\n\n.wmetric-label[_ngcontent-%COMP%] {\n  margin-top: 2px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.drill-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  justify-content: center;\n}\n\n.drill-hint[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  font-size: 11.5px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}"] });
+};
+MLExperimentResultsViewerComponent = __decorate([
+    RegisterClass(BaseArtifactViewerPluginComponent, 'MLExperimentResultsViewerPlugin')
+], MLExperimentResultsViewerComponent);
+export { MLExperimentResultsViewerComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MLExperimentResultsViewerComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-ml-experiment-results-viewer', template: "<div class=\"ml-exp-viewer\" [ngClass]=\"cssClass\">\n\n  @if (IsLoading) {\n    <div class=\"ml-exp-loading\">\n      <mj-loading text=\"Loading experiment results\u2026\" size=\"medium\"></mj-loading>\n    </div>\n  } @else if (HasError || !Spec) {\n    <div class=\"ml-exp-empty\">\n      <i class=\"fa-solid fa-flask-vial\"></i>\n      <h3>No experiment results to display</h3>\n      <p>{{ ErrorMessage || 'This artifact does not contain readable ML experiment results.' }}</p>\n    </div>\n  } @else {\n\n    <!-- HERO -->\n    <div class=\"ml-exp-hero\">\n      <div class=\"hero-badge\"><i class=\"fa-solid fa-flask-vial\"></i></div>\n      <div class=\"hero-titles\">\n        <h2 class=\"hero-title\">ML Experiment Results</h2>\n        @if (Summary) {\n          <div class=\"hero-sub\">{{ Summary }}</div>\n        }\n      </div>\n      @if (HeadlineScore != null) {\n        <div class=\"hero-metric\">\n          <div class=\"hero-metric-value\">{{ HeadlineScore }}</div>\n          <div class=\"hero-metric-label\">{{ TargetMetricLabel }} \u00B7 winner</div>\n        </div>\n      }\n    </div>\n\n    <div class=\"ml-exp-body\">\n\n      <!-- GOAL BAR -->\n      <div class=\"goalbar\">\n        @if (Goal) {\n          <div class=\"goal-item\">\n            <span class=\"goal-key\">Goal</span>\n            <span class=\"goal-val\">{{ Goal }}</span>\n          </div>\n        }\n        @if (Spec.target) {\n          <div class=\"goal-item\">\n            <span class=\"goal-key\">Target</span>\n            <span class=\"goal-val\">{{ Spec.target }}</span>\n          </div>\n        }\n        @if (Spec.asOf) {\n          <div class=\"goal-item\">\n            <span class=\"goal-key\">As-of</span>\n            <span class=\"goal-val\">{{ Spec.asOf }}</span>\n          </div>\n        }\n        @if (Spec.validation) {\n          <div class=\"goal-item\">\n            <span class=\"goal-key\">Validation</span>\n            <span class=\"goal-val\">{{ Spec.validation }}</span>\n          </div>\n        }\n        @if (Spec.budgetUsed) {\n          <div class=\"goal-item\">\n            <span class=\"goal-key\">Budget used</span>\n            <span class=\"goal-val\">{{ Spec.budgetUsed }}</span>\n          </div>\n        }\n      </div>\n\n      <div class=\"ml-exp-cols\">\n\n        <!-- LEFT COLUMN: leaderboard + feature importance -->\n        <div class=\"col-main\">\n\n          <div class=\"section-title\">Leaderboard</div>\n          @if (LeaderboardRows.length > 0) {\n            <div class=\"lb-card\">\n              <table class=\"lb-table\">\n                <thead>\n                  <tr>\n                    <th class=\"lb-rank-col\">#</th>\n                    <th>Algorithm</th>\n                    <th>Feature set</th>\n                    <th class=\"num\">{{ TargetMetricLabel }}</th>\n                    <th class=\"num\">CV</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of LeaderboardRows; track row.rank) {\n                    <tr [class.is-winner]=\"row.isWinner\"\n                        [class.has-model]=\"row.modelId\"\n                        (click)=\"OnOpenRowModel(row)\">\n                      <td>\n                        <span class=\"rank\" [class.gold]=\"row.isWinner\">{{ row.rank }}</span>\n                      </td>\n                      <td class=\"algo\">\n                        @if (row.isWinner) {\n                          <strong>{{ row.algorithm }}</strong>\n                        } @else {\n                          {{ row.algorithm }}\n                        }\n                        @if (row.modelId) {\n                          <i class=\"fa-solid fa-arrow-up-right-from-square row-link-icon\"\n                             title=\"Open this model\"></i>\n                        }\n                      </td>\n                      <td class=\"muted\">{{ row.featureSet || '\u2014' }}</td>\n                      <td class=\"num\">\n                        @if (row.isWinner) {\n                          <strong>{{ formatScore(row.score) }}</strong>\n                        } @else {\n                          {{ formatScore(row.score) }}\n                        }\n                      </td>\n                      <td class=\"num muted\">{{ formatScore(row.cvScore) }}</td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          } @else {\n            <div class=\"inline-empty\">No leaderboard iterations were recorded.</div>\n          }\n\n          @if (FeatureBars.length > 0) {\n            <div class=\"section-title\">Feature Importance \u2014 winning model</div>\n            <div class=\"fi-card\">\n              @for (bar of FeatureBars; track bar.feature) {\n                <div class=\"fbar\">\n                  <div class=\"fbar-label\" [title]=\"bar.feature\">{{ bar.feature }}</div>\n                  <div class=\"fbar-track\">\n                    <span class=\"fbar-fill\" [style.width.%]=\"bar.widthPct\"></span>\n                  </div>\n                  <div class=\"fbar-num\">{{ formatImportance(bar.importance) }}</div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- RIGHT COLUMN: winning model card + drill-through -->\n        <div class=\"col-side\">\n          <div class=\"section-title\">Winning Model</div>\n          <div class=\"winner-card\">\n            <div class=\"winner-top\">\n              <div class=\"crown\"><i class=\"fa-solid fa-crown\"></i></div>\n              <div class=\"winner-head\">\n                <h3 class=\"winner-name\">{{ WinningAlgorithm }}</h3>\n                @if (WinningModelSubtitle) {\n                  <div class=\"muted\">{{ WinningModelSubtitle }}</div>\n                }\n              </div>\n            </div>\n\n            @if (WinningMetrics.length > 0) {\n              <div class=\"wmetrics\">\n                @for (m of WinningMetrics; track m.label) {\n                  <div class=\"wmetric\">\n                    <div class=\"wmetric-value\">{{ m.value }}</div>\n                    <div class=\"wmetric-label\">{{ m.label }}</div>\n                  </div>\n                }\n              </div>\n            }\n\n            <button mjButton variant=\"primary\" class=\"drill-btn\"\n                    [disabled]=\"!HasDrillThroughTarget\"\n                    (click)=\"OnDrillThroughToModel()\">\n              <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n              Drill through to ML Model\n            </button>\n\n            @if (!HasDrillThroughTarget) {\n              <div class=\"drill-hint muted\">\n                No linked ML Model record on this artifact yet.\n              </div>\n            }\n          </div>\n        </div>\n\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host {\n  display: block;\n  height: 100%;\n}\n\n.ml-exp-viewer {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  font-size: 13px;\n}\n\n/* \u2500\u2500\u2500 Loading / empty states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ml-exp-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  min-height: 200px;\n}\n\n.ml-exp-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  min-height: 240px;\n  padding: 40px 24px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n\n.ml-exp-empty i {\n  font-size: 40px;\n  margin-bottom: 14px;\n  color: var(--mj-text-disabled);\n}\n\n.ml-exp-empty h3 {\n  margin: 0 0 6px;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n}\n\n.ml-exp-empty p {\n  margin: 0;\n  max-width: 420px;\n  font-size: 13px;\n}\n\n/* \u2500\u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ml-exp-hero {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 20px 22px;\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-brand-primary-active), var(--mj-brand-primary));\n}\n\n.hero-badge {\n  flex: 0 0 auto;\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  display: grid;\n  place-items: center;\n  font-size: 20px;\n  background: color-mix(in srgb, var(--mj-text-inverse) 16%, transparent);\n}\n\n.hero-titles {\n  min-width: 0;\n}\n\n.hero-title {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n}\n\n.hero-sub {\n  margin-top: 3px;\n  font-size: 12.5px;\n  color: color-mix(in srgb, var(--mj-text-inverse) 78%, transparent);\n}\n\n.hero-metric {\n  margin-left: auto;\n  text-align: right;\n  flex: 0 0 auto;\n}\n\n.hero-metric-value {\n  font-size: 34px;\n  font-weight: 780;\n  letter-spacing: -0.02em;\n  line-height: 1;\n}\n\n.hero-metric-label {\n  margin-top: 4px;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: color-mix(in srgb, var(--mj-text-inverse) 72%, transparent);\n}\n\n/* \u2500\u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ml-exp-body {\n  padding: 20px 22px 28px;\n  background: var(--mj-bg-surface);\n  flex: 1;\n}\n\n.goalbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px 26px;\n  padding: 13px 16px;\n  margin-bottom: 18px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n}\n\n.goal-item {\n  font-size: 12.5px;\n  min-width: 0;\n}\n\n.goal-key {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n}\n\n.goal-val {\n  font-weight: 650;\n  color: var(--mj-text-primary);\n}\n\n.ml-exp-cols {\n  display: grid;\n  grid-template-columns: 1.25fr 1fr;\n  gap: 20px;\n  align-items: start;\n}\n\n@media (max-width: 920px) {\n  .ml-exp-cols {\n    grid-template-columns: 1fr;\n  }\n}\n\n.section-title {\n  margin: 0 0 10px;\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n}\n\n.col-main .section-title:not(:first-child) {\n  margin-top: 20px;\n}\n\n.inline-empty {\n  padding: 14px 16px;\n  border: 1px dashed var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12.5px;\n}\n\n/* \u2500\u2500\u2500 Leaderboard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.lb-card {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.lb-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12.5px;\n}\n\n.lb-table thead th {\n  text-align: left;\n  padding: 10px 12px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.lb-table tbody td {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-primary);\n}\n\n.lb-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n\n.lb-table .num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n\n.lb-table .muted {\n  color: var(--mj-text-muted);\n}\n\n.lb-table .lb-rank-col {\n  width: 44px;\n}\n\n.lb-table tbody tr.is-winner {\n  background: var(--mj-status-success-bg);\n}\n\n.lb-table tbody tr.has-model {\n  cursor: pointer;\n}\n\n.lb-table tbody tr.has-model:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.lb-table tbody tr.has-model.is-winner:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 14%, var(--mj-bg-surface));\n}\n\n.row-link-icon {\n  margin-left: 6px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n}\n\n.lb-table tbody tr.has-model:hover .row-link-icon {\n  color: var(--mj-brand-primary);\n}\n\n.rank {\n  display: inline-grid;\n  place-items: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.rank.gold {\n  color: var(--mj-status-warning-text);\n  background: var(--mj-status-warning-bg);\n}\n\n/* \u2500\u2500\u2500 Feature importance \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.fi-card {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 14px 16px;\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.fbar {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 2fr auto;\n  align-items: center;\n  gap: 12px;\n  font-size: 12.5px;\n}\n\n.fbar-label {\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.fbar-track {\n  height: 8px;\n  border-radius: 999px;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n.fbar-fill {\n  display: block;\n  height: 100%;\n  border-radius: 999px;\n  background: var(--mj-brand-primary);\n  transition: width 0.25s ease;\n}\n\n.fbar-num {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-muted);\n  min-width: 30px;\n  text-align: right;\n}\n\n/* \u2500\u2500\u2500 Winning model card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.winner-card {\n  border: 1px solid var(--mj-status-success-border);\n  border-radius: 12px;\n  padding: 18px;\n  background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n}\n\n.winner-top {\n  display: flex;\n  align-items: center;\n  gap: 13px;\n}\n\n.crown {\n  flex: 0 0 auto;\n  width: 46px;\n  height: 46px;\n  border-radius: 11px;\n  display: grid;\n  place-items: center;\n  font-size: 19px;\n  color: var(--mj-text-inverse);\n  background: var(--mj-status-success);\n}\n\n.winner-head {\n  min-width: 0;\n}\n\n.winner-name {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.winner-head .muted {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.wmetrics {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));\n  gap: 10px;\n  margin: 16px 0;\n}\n\n.wmetric {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 9px;\n  padding: 10px 12px;\n  text-align: center;\n  background: var(--mj-bg-surface);\n}\n\n.wmetric-value {\n  font-size: 19px;\n  font-weight: 720;\n  color: var(--mj-status-success-text);\n}\n\n.wmetric-label {\n  margin-top: 2px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.drill-btn {\n  width: 100%;\n  justify-content: center;\n}\n\n.drill-hint {\n  margin-top: 8px;\n  font-size: 11.5px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n"] }]
+    }], null, { navigationRequest: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MLExperimentResultsViewerComponent, { className: "MLExperimentResultsViewerComponent", filePath: "src/lib/components/plugins/ml-experiment-results-viewer.component.ts", lineNumber: 184 }); })();
+//# sourceMappingURL=ml-experiment-results-viewer.component.js.map