@memberjunction/ng-dashboards 5.34.1 → 5.36.0

package/dist/AI/components/analytics/model-performance/model-performance.component.js

@@ -4,174 +4,138 @@
  * Ranks AI models by configurable metrics (Cost Efficiency, Speed, Reliability, Usage Volume).
  * Data is loaded from MJ: AI Prompt Runs and augmented with model metadata from AIEngineBase.
  */
-import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
+import { Component, Input, ChangeDetectorRef, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { RunView } from '@memberjunction/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { UUIDsEqual } from '@memberjunction/global';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "@memberjunction/ng-shared-generic";
-import * as i3 from "@angular/common";
-const _forTrack0 = ($index, $item) => $item.value;
-const _forTrack1 = ($index, $item) => $item.id;
-const _forTrack2 = ($index, $item) => $item.ModelName;
-function AnalyticsModelPerformanceComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 5);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const opt_r1 = ctx.$implicit;
-    i0.ɵɵproperty("value", opt_r1.value);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(opt_r1.label);
-} }
-function AnalyticsModelPerformanceComponent_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 5);
-    i0.ɵɵtext(1);
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.ModelName;
+function AnalyticsModelPerformanceComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵelement(1, "mj-loading", 2);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const v_r2 = ctx.$implicit;
-    i0.ɵɵproperty("value", v_r2.id);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(v_r2.name);
 } }
-function AnalyticsModelPerformanceComponent_For_15_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function AnalyticsModelPerformanceComponent_For_15_Template_button_click_0_listener() { const opt_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.OnTimeRangeSelect(opt_r4)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const opt_r4 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("active", ctx_r4.TimeRange === opt_r4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", opt_r4, " ");
-} }
-function AnalyticsModelPerformanceComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "mj-loading", 12);
-    i0.ɵɵelementEnd();
-} }
-function AnalyticsModelPerformanceComponent_Conditional_17_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 19);
+function AnalyticsModelPerformanceComponent_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 9);
     i0.ɵɵtext(2, "No model data for selected period");
     i0.ɵɵelementEnd()();
 } }
-function AnalyticsModelPerformanceComponent_Conditional_17_For_26_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
+function AnalyticsModelPerformanceComponent_Conditional_1_For_26_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r6 = i0.ɵɵnextContext().$implicit;
+    const row_r1 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(row_r6.ApiId);
+    i0.ɵɵtextInterpolate(row_r1.ApiId);
 } }
-function AnalyticsModelPerformanceComponent_Conditional_17_For_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "span", 20);
+function AnalyticsModelPerformanceComponent_Conditional_1_For_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "span", 10);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "td", 21)(5, "div", 22);
+    i0.ɵɵelementStart(4, "td", 11)(5, "div", 12);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, AnalyticsModelPerformanceComponent_Conditional_17_For_26_Conditional_7_Template, 2, 1, "div", 23);
+    i0.ɵɵconditionalCreate(7, AnalyticsModelPerformanceComponent_Conditional_1_For_26_Conditional_7_Template, 2, 1, "div", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "td", 24);
+    i0.ɵɵelementStart(8, "td", 14);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "td", 25);
+    i0.ɵɵelementStart(10, "td", 15);
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "td", 25)(14, "span");
+    i0.ɵɵelementStart(13, "td", 15)(14, "span");
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "td", 25);
+    i0.ɵɵelementStart(16, "td", 15);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "td", 25)(19, "div", 26)(20, "span", 27);
+    i0.ɵɵelementStart(18, "td", 15)(19, "div", 16)(20, "span", 17);
     i0.ɵɵtext(21);
     i0.ɵɵpipe(22, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 28);
-    i0.ɵɵelement(24, "div", 29);
+    i0.ɵɵelementStart(23, "div", 18);
+    i0.ɵɵelement(24, "div", 19);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(25, "td", 25);
+    i0.ɵɵelementStart(25, "td", 15);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "td", 30);
+    i0.ɵɵelementStart(27, "td", 20);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r6 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(2);
+    const row_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(row_r6.RankClass);
+    i0.ɵɵclassMap(row_r1.RankClass);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", row_r6.Rank, " ");
+    i0.ɵɵtextInterpolate1(" ", row_r1.Rank, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(row_r6.ModelName);
+    i0.ɵɵtextInterpolate(row_r1.ModelName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(row_r6.ApiId && row_r6.ApiId !== row_r6.ModelName ? 7 : -1);
+    i0.ɵɵconditional(row_r1.ApiId && row_r1.ApiId !== row_r1.ModelName ? 7 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(row_r6.Vendor);
+    i0.ɵɵtextInterpolate(row_r1.Vendor);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 16, row_r6.Runs));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 16, row_r1.Runs));
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("color", row_r6.AvgLatencyColor);
+    i0.ɵɵstyleProp("color", row_r1.AvgLatencyColor);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r4.FormatLatency(row_r6.AvgLatencyMs), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatLatency(row_r1.AvgLatencyMs), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r4.FormatLatency(row_r6.P95LatencyMs));
+    i0.ɵɵtextInterpolate(ctx_r1.FormatLatency(row_r1.P95LatencyMs));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(22, 18, row_r6.SuccessRate, "1.1-1"), "%");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(22, 18, row_r1.SuccessRate, "1.1-1"), "%");
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("width", row_r6.SuccessRate, "%");
+    i0.ɵɵstyleProp("width", row_r1.SuccessRate, "%");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r4.FormatCurrency(row_r6.CostPer1KTokens, 4));
+    i0.ɵɵtextInterpolate(ctx_r1.FormatCurrency(row_r1.CostPer1KTokens, 4));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r4.FormatCurrency(row_r6.TotalCost));
+    i0.ɵɵtextInterpolate(ctx_r1.FormatCurrency(row_r1.TotalCost));
 } }
-function AnalyticsModelPerformanceComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 13)(2, "table", 14)(3, "thead")(4, "tr")(5, "th", 15);
+function AnalyticsModelPerformanceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 3)(2, "table", 4)(3, "thead")(4, "tr")(5, "th", 5);
     i0.ɵɵtext(6, "Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "th", 16);
+    i0.ɵɵelementStart(7, "th", 6);
     i0.ɵɵtext(8, "Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 17);
+    i0.ɵɵelementStart(9, "th", 7);
     i0.ɵɵtext(10, "Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 18);
+    i0.ɵɵelementStart(11, "th", 8);
     i0.ɵɵtext(12, "Runs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "th", 18);
+    i0.ɵɵelementStart(13, "th", 8);
     i0.ɵɵtext(14, "Avg Latency");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "th", 18);
+    i0.ɵɵelementStart(15, "th", 8);
     i0.ɵɵtext(16, "P95 Latency");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "th", 18);
+    i0.ɵɵelementStart(17, "th", 8);
     i0.ɵɵtext(18, "Success Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "th", 18);
+    i0.ɵɵelementStart(19, "th", 8);
     i0.ɵɵtext(20, "$/1K Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "th", 18);
+    i0.ɵɵelementStart(21, "th", 8);
     i0.ɵɵtext(22, "Total Cost");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(23, "tbody");
-    i0.ɵɵconditionalCreate(24, AnalyticsModelPerformanceComponent_Conditional_17_Conditional_24_Template, 3, 0, "tr");
-    i0.ɵɵrepeaterCreate(25, AnalyticsModelPerformanceComponent_Conditional_17_For_26_Template, 29, 21, "tr", null, _forTrack2);
+    i0.ɵɵconditionalCreate(24, AnalyticsModelPerformanceComponent_Conditional_1_Conditional_24_Template, 3, 0, "tr");
+    i0.ɵɵrepeaterCreate(25, AnalyticsModelPerformanceComponent_Conditional_1_For_26_Template, 29, 21, "tr", null, _forTrack0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(24);
-    i0.ɵɵconditional(ctx_r4.Rows.length === 0 ? 24 : -1);
+    i0.ɵɵconditional(ctx_r1.Rows.length === 0 ? 24 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r4.Rows);
+    i0.ɵɵrepeater(ctx_r1.Rows);
 } }
 const FIELDS = [
     'ID', 'RunAt', 'CompletedAt', 'ExecutionTimeMS', 'Success',
@@ -179,50 +143,51 @@ const FIELDS = [
     'ModelID', 'Model', 'VendorID', 'Vendor'
 ];
 export class AnalyticsModelPerformanceComponent extends BaseAngularComponent {
-    TimeRange = '7d';
-    TimeRangeChange = new EventEmitter();
+    _timeRange = '7d';
+    set TimeRange(value) {
+        const prev = this._timeRange;
+        this._timeRange = value;
+        if (prev !== value && this.initialized)
+            this.LoadData();
+    }
+    get TimeRange() { return this._timeRange; }
+    _sortBy = 'cost-efficiency';
+    set SortBy(value) {
+        const prev = this._sortBy;
+        this._sortBy = (value || 'cost-efficiency');
+        if (prev !== this._sortBy && this.initialized) {
+            this.buildRows();
+            this.cdr.markForCheck();
+        }
+    }
+    get SortBy() { return this._sortBy; }
+    _selectedVendor = '';
+    set SelectedVendor(value) {
+        const prev = this._selectedVendor;
+        this._selectedVendor = value ?? '';
+        if (prev !== this._selectedVendor && this.initialized) {
+            this.buildRows();
+            this.cdr.markForCheck();
+        }
+    }
+    get SelectedVendor() { return this._selectedVendor; }
     cdr = inject(ChangeDetectorRef);
     destroy$ = new Subject();
+    initialized = false;
     IsLoading = false;
-    SortBy = 'cost-efficiency';
-    SelectedVendor = '';
     Rows = [];
-    TimeRangeOptions = ['24h', '7d', '30d'];
-    SortByOptions = [
-        { value: 'cost-efficiency', label: 'Cost Efficiency' },
-        { value: 'speed', label: 'Speed' },
-        { value: 'reliability', label: 'Reliability' },
-        { value: 'usage-volume', label: 'Usage Volume' }
-    ];
-    VendorOptions = [];
     allRuns = [];
     async ngOnInit() {
         // AIEngineBase is deferred at startup — make sure it's loaded before
         // we read .Vendors / .Models from it.
         await AIEngineBase.Instance.EnsureLoaded();
-        this.loadVendorOptions();
+        this.initialized = true;
         this.LoadData();
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    // ── Public Handlers ──
-    OnTimeRangeSelect(range) {
-        this.TimeRange = range;
-        this.TimeRangeChange.emit(range);
-        this.LoadData();
-    }
-    OnSortByChange(event) {
-        this.SortBy = event.target.value;
-        this.buildRows();
-        this.cdr.detectChanges();
-    }
-    OnVendorChange(event) {
-        this.SelectedVendor = event.target.value;
-        this.buildRows();
-        this.cdr.detectChanges();
-    }
     FormatLatency(ms) {
         if (ms < 1000)
             return Math.round(ms) + 'ms';
@@ -236,17 +201,6 @@ export class AnalyticsModelPerformanceComponent extends BaseAngularComponent {
         return '$' + value.toFixed(decimals);
     }
     // ── Data Loading ──
-    loadVendorOptions() {
-        try {
-            this.VendorOptions = AIEngineBase.Instance.Vendors.map(v => ({
-                id: v.ID,
-                name: v.Name
-            }));
-        }
-        catch {
-            this.VendorOptions = [];
-        }
-    }
     async LoadData() {
         this.IsLoading = true;
         this.cdr.detectChanges();
@@ -394,78 +348,15 @@ export class AnalyticsModelPerformanceComponent extends BaseAngularComponent {
         return `RunAt >= '${start.toISOString()}'`;
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵAnalyticsModelPerformanceComponent_BaseFactory; return function AnalyticsModelPerformanceComponent_Factory(__ngFactoryType__) { return (ɵAnalyticsModelPerformanceComponent_BaseFactory || (ɵAnalyticsModelPerformanceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AnalyticsModelPerformanceComponent)))(__ngFactoryType__ || AnalyticsModelPerformanceComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsModelPerformanceComponent, selectors: [["app-analytics-model-performance"]], inputs: { TimeRange: "TimeRange" }, outputs: { TimeRangeChange: "TimeRangeChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 3, consts: [[1, "filter-bar"], [1, "filter-controls"], [1, "filter-label"], [1, "fa-solid", "fa-trophy"], [1, "filter-select", 3, "change", "value"], [3, "value"], ["value", ""], [1, "time-chips"], [1, "time-chip", 3, "active"], [1, "loading-container"], [1, "leaderboard-panel"], [1, "time-chip", 3, "click"], ["text", "Loading model performance..."], [1, "table-wrapper"], [1, "leaderboard-table"], [1, "col-rank"], [1, "col-model"], [1, "col-vendor"], [1, "col-numeric"], ["colspan", "9", 1, "empty-row"], [1, "rank-badge"], [1, "cell-model"], [1, "model-name"], [1, "model-api-id"], [1, "cell-vendor"], [1, "cell-numeric"], [1, "success-rate-cell"], [1, "success-rate-value"], [1, "success-bar-bg"], [1, "success-bar-fill"], [1, "cell-numeric", "cell-cost"]], template: function AnalyticsModelPerformanceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
-            i0.ɵɵelement(3, "i", 3);
-            i0.ɵɵtext(4, " Leaderboard ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "select", 4);
-            i0.ɵɵlistener("change", function AnalyticsModelPerformanceComponent_Template_select_change_5_listener($event) { return ctx.OnSortByChange($event); });
-            i0.ɵɵrepeaterCreate(6, AnalyticsModelPerformanceComponent_For_7_Template, 2, 2, "option", 5, _forTrack0);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "select", 4);
-            i0.ɵɵlistener("change", function AnalyticsModelPerformanceComponent_Template_select_change_8_listener($event) { return ctx.OnVendorChange($event); });
-            i0.ɵɵelementStart(9, "option", 6);
-            i0.ɵɵtext(10, "All Vendors");
-            i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(11, AnalyticsModelPerformanceComponent_For_12_Template, 2, 2, "option", 5, _forTrack1);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(13, "div", 7);
-            i0.ɵɵrepeaterCreate(14, AnalyticsModelPerformanceComponent_For_15_Template, 2, 3, "button", 8, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(16, AnalyticsModelPerformanceComponent_Conditional_16_Template, 2, 0, "div", 9)(17, AnalyticsModelPerformanceComponent_Conditional_17_Template, 27, 1, "div", 10);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsModelPerformanceComponent, selectors: [["app-analytics-model-performance"]], inputs: { TimeRange: "TimeRange", SortBy: "SortBy", SelectedVendor: "SelectedVendor" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "loading-container"], [1, "leaderboard-panel"], ["text", "Loading model performance..."], [1, "table-wrapper"], [1, "leaderboard-table"], [1, "col-rank"], [1, "col-model"], [1, "col-vendor"], [1, "col-numeric"], ["colspan", "9", 1, "empty-row"], [1, "rank-badge"], [1, "cell-model"], [1, "model-name"], [1, "model-api-id"], [1, "cell-vendor"], [1, "cell-numeric"], [1, "success-rate-cell"], [1, "success-rate-value"], [1, "success-bar-bg"], [1, "success-bar-fill"], [1, "cell-numeric", "cell-cost"]], template: function AnalyticsModelPerformanceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, AnalyticsModelPerformanceComponent_Conditional_0_Template, 2, 0, "div", 0)(1, AnalyticsModelPerformanceComponent_Conditional_1_Template, 27, 1, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("value", ctx.SortBy);
-            i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.SortByOptions);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", ctx.SelectedVendor);
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.VendorOptions);
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.TimeRangeOptions);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.IsLoading ? 16 : 17);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.LoadingComponent, i3.DecimalPipe], styles: ["[_nghost-%COMP%] { display: block; }\n\n        .loading-container[_ngcontent-%COMP%] {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        \n\n        .filter-bar[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 12px 16px;\n            flex-wrap: wrap;\n            margin-bottom: 16px;\n        }\n\n        .filter-controls[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .filter-label[_ngcontent-%COMP%] {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            white-space: nowrap;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .filter-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: var(--mj-status-warning);\n        }\n\n        .filter-select[_ngcontent-%COMP%] {\n            padding: 5px 10px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-primary);\n            font-size: 13px;\n            cursor: pointer;\n            min-width: 130px;\n            outline: none;\n        }\n\n        .filter-select[_ngcontent-%COMP%]:focus {\n            border-color: var(--mj-border-focus);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n        }\n\n        .time-chips[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            margin-left: auto;\n        }\n\n        .time-chip[_ngcontent-%COMP%] {\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 16px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n            white-space: nowrap;\n        }\n\n        .time-chip[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .time-chip.active[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n            font-weight: 600;\n        }\n\n        \n\n        .leaderboard-panel[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            overflow: hidden;\n        }\n\n        .table-wrapper[_ngcontent-%COMP%] {\n            overflow-x: auto;\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%] {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .leaderboard-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n            padding: 12px 14px;\n            text-align: left;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            background: var(--mj-bg-surface-card);\n            position: sticky;\n            top: 0;\n            white-space: nowrap;\n        }\n\n        .col-rank[_ngcontent-%COMP%] { width: 60px; text-align: center; }\n        .col-model[_ngcontent-%COMP%] { min-width: 180px; }\n        .col-vendor[_ngcontent-%COMP%] { min-width: 100px; }\n        .col-numeric[_ngcontent-%COMP%] { text-align: right; white-space: nowrap; }\n\n        .leaderboard-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n            transition: background 0.15s;\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n        }\n\n        .empty-row[_ngcontent-%COMP%] {\n            text-align: center;\n            color: var(--mj-text-disabled);\n            padding: 32px;\n        }\n\n        \n\n        .rank-badge[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            font-size: 12px;\n            font-weight: 700;\n        }\n\n        .rank-gold[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface)));\n            color: var(--mj-status-warning-text, var(--mj-status-warning));\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n        }\n\n        .rank-silver[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-text-muted) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n        }\n\n        .rank-bronze[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n        }\n\n        .rank-neutral[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface-sunken);\n            color: var(--mj-text-muted);\n        }\n\n        \n\n        .cell-model[_ngcontent-%COMP%] {\n            font-weight: 500;\n            color: var(--mj-text-primary);\n        }\n\n        .model-name[_ngcontent-%COMP%] {\n            font-weight: 600;\n        }\n\n        .model-api-id[_ngcontent-%COMP%] {\n            font-size: 11px;\n            color: var(--mj-text-muted);\n            margin-top: 2px;\n            font-family: monospace;\n        }\n\n        .cell-vendor[_ngcontent-%COMP%] {\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-numeric[_ngcontent-%COMP%] {\n            text-align: right;\n            font-variant-numeric: tabular-nums;\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-cost[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        \n\n        .success-rate-cell[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n            gap: 3px;\n        }\n\n        .success-rate-value[_ngcontent-%COMP%] {\n            font-weight: 600;\n        }\n\n        .success-bar-bg[_ngcontent-%COMP%] {\n            width: 60px;\n            height: 4px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 2px;\n            overflow: hidden;\n        }\n\n        .success-bar-fill[_ngcontent-%COMP%] {\n            height: 100%;\n            background: var(--mj-status-success);\n            border-radius: 2px;\n            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        \n\n        @media (max-width: 1200px) {\n            .leaderboard-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .leaderboard-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n                padding: 10px 10px;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .filter-bar[_ngcontent-%COMP%] {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            .time-chips[_ngcontent-%COMP%] {\n                margin-left: 0;\n                justify-content: flex-start;\n                flex-wrap: wrap;\n            }\n        }"] });
+            i0.ɵɵconditional(ctx.IsLoading ? 0 : 1);
+        } }, dependencies: [i1.LoadingComponent, i2.DecimalPipe], styles: ["[_nghost-%COMP%] { display: block; }\n\n        .loading-container[_ngcontent-%COMP%] {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        \n\n        .leaderboard-panel[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            overflow: hidden;\n        }\n\n        .table-wrapper[_ngcontent-%COMP%] {\n            overflow-x: auto;\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%] {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .leaderboard-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n            padding: 12px 14px;\n            text-align: left;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            background: var(--mj-bg-surface-card);\n            position: sticky;\n            top: 0;\n            white-space: nowrap;\n        }\n\n        .col-rank[_ngcontent-%COMP%] { width: 60px; text-align: center; }\n        .col-model[_ngcontent-%COMP%] { min-width: 180px; }\n        .col-vendor[_ngcontent-%COMP%] { min-width: 100px; }\n        .col-numeric[_ngcontent-%COMP%] { text-align: right; white-space: nowrap; }\n\n        .leaderboard-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n            transition: background 0.15s;\n        }\n\n        .leaderboard-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n            background: var(--mj-bg-surface-hover);\n        }\n\n        .empty-row[_ngcontent-%COMP%] {\n            text-align: center;\n            color: var(--mj-text-disabled);\n            padding: 32px;\n        }\n\n        \n\n        .rank-badge[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            font-size: 12px;\n            font-weight: 700;\n        }\n\n        .rank-gold[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface)));\n            color: var(--mj-status-warning-text, var(--mj-status-warning));\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n        }\n\n        .rank-silver[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-text-muted) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n        }\n\n        .rank-bronze[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n        }\n\n        .rank-neutral[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface-sunken);\n            color: var(--mj-text-muted);\n        }\n\n        \n\n        .cell-model[_ngcontent-%COMP%] {\n            font-weight: 500;\n            color: var(--mj-text-primary);\n        }\n\n        .model-name[_ngcontent-%COMP%] {\n            font-weight: 600;\n        }\n\n        .model-api-id[_ngcontent-%COMP%] {\n            font-size: 11px;\n            color: var(--mj-text-muted);\n            margin-top: 2px;\n            font-family: monospace;\n        }\n\n        .cell-vendor[_ngcontent-%COMP%] {\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-numeric[_ngcontent-%COMP%] {\n            text-align: right;\n            font-variant-numeric: tabular-nums;\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-cost[_ngcontent-%COMP%] {\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        \n\n        .success-rate-cell[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n            gap: 3px;\n        }\n\n        .success-rate-value[_ngcontent-%COMP%] {\n            font-weight: 600;\n        }\n\n        .success-bar-bg[_ngcontent-%COMP%] {\n            width: 60px;\n            height: 4px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 2px;\n            overflow: hidden;\n        }\n\n        .success-bar-fill[_ngcontent-%COMP%] {\n            height: 100%;\n            background: var(--mj-status-success);\n            border-radius: 2px;\n            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        \n\n        @media (max-width: 1200px) {\n            .leaderboard-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .leaderboard-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n                padding: 10px 10px;\n            }\n        }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnalyticsModelPerformanceComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'app-analytics-model-performance', template: `
-        <!-- Filter Bar -->
-        <div class="filter-bar">
-            <div class="filter-controls">
-                <span class="filter-label">
-                    <i class="fa-solid fa-trophy"></i>
-                    Leaderboard
-                </span>
-
-                <select class="filter-select" [value]="SortBy" (change)="OnSortByChange($event)">
-                    @for (opt of SortByOptions; track opt.value) {
-                        <option [value]="opt.value">{{ opt.label }}</option>
-                    }
-                </select>
-
-                <select class="filter-select" [value]="SelectedVendor" (change)="OnVendorChange($event)">
-                    <option value="">All Vendors</option>
-                    @for (v of VendorOptions; track v.id) {
-                        <option [value]="v.id">{{ v.name }}</option>
-                    }
-                </select>
-            </div>
-
-            <div class="time-chips">
-                @for (opt of TimeRangeOptions; track opt) {
-                    <button
-                        class="time-chip"
-                        [class.active]="TimeRange === opt"
-                        (click)="OnTimeRangeSelect(opt)">
-                        {{ opt }}
-                    </button>
-                }
-            </div>
-        </div>
-
         @if (IsLoading) {
             <div class="loading-container">
                 <mj-loading text="Loading model performance..."></mj-loading>
@@ -530,12 +421,14 @@ export class AnalyticsModelPerformanceComponent extends BaseAngularComponent {
                 </div>
             </div>
         }
-    `, styles: ["\n        :host { display: block; }\n\n        .loading-container {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        /* \u2500\u2500 Filter Bar \u2500\u2500 */\n        .filter-bar {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 10px;\n            padding: 12px 16px;\n            flex-wrap: wrap;\n            margin-bottom: 16px;\n        }\n\n        .filter-controls {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .filter-label {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            white-space: nowrap;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .filter-label i {\n            font-size: 13px;\n            color: var(--mj-status-warning);\n        }\n\n        .filter-select {\n            padding: 5px 10px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-primary);\n            font-size: 13px;\n            cursor: pointer;\n            min-width: 130px;\n            outline: none;\n        }\n\n        .filter-select:focus {\n            border-color: var(--mj-border-focus);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n        }\n\n        .time-chips {\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            margin-left: auto;\n        }\n\n        .time-chip {\n            padding: 5px 12px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 16px;\n            background: var(--mj-bg-surface);\n            color: var(--mj-text-secondary);\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s, border-color 0.15s;\n            white-space: nowrap;\n        }\n\n        .time-chip:hover {\n            background: var(--mj-bg-surface-hover);\n            color: var(--mj-text-primary);\n        }\n\n        .time-chip.active {\n            background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            border-color: var(--mj-brand-primary);\n            font-weight: 600;\n        }\n\n        /* \u2500\u2500 Leaderboard \u2500\u2500 */\n        .leaderboard-panel {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            overflow: hidden;\n        }\n\n        .table-wrapper {\n            overflow-x: auto;\n        }\n\n        .leaderboard-table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n        }\n\n        .leaderboard-table th,\n        .leaderboard-table td {\n            padding: 12px 14px;\n            text-align: left;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .leaderboard-table th {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            background: var(--mj-bg-surface-card);\n            position: sticky;\n            top: 0;\n            white-space: nowrap;\n        }\n\n        .col-rank { width: 60px; text-align: center; }\n        .col-model { min-width: 180px; }\n        .col-vendor { min-width: 100px; }\n        .col-numeric { text-align: right; white-space: nowrap; }\n\n        .leaderboard-table tbody tr {\n            transition: background 0.15s;\n        }\n\n        .leaderboard-table tbody tr:hover {\n            background: var(--mj-bg-surface-hover);\n        }\n\n        .empty-row {\n            text-align: center;\n            color: var(--mj-text-disabled);\n            padding: 32px;\n        }\n\n        /* \u2500\u2500 Rank Badge \u2500\u2500 */\n        .rank-badge {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            font-size: 12px;\n            font-weight: 700;\n        }\n\n        .rank-gold {\n            background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface)));\n            color: var(--mj-status-warning-text, var(--mj-status-warning));\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n        }\n\n        .rank-silver {\n            background: color-mix(in srgb, var(--mj-text-muted) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n        }\n\n        .rank-bronze {\n            background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n        }\n\n        .rank-neutral {\n            background: var(--mj-bg-surface-sunken);\n            color: var(--mj-text-muted);\n        }\n\n        /* \u2500\u2500 Model Cell \u2500\u2500 */\n        .cell-model {\n            font-weight: 500;\n            color: var(--mj-text-primary);\n        }\n\n        .model-name {\n            font-weight: 600;\n        }\n\n        .model-api-id {\n            font-size: 11px;\n            color: var(--mj-text-muted);\n            margin-top: 2px;\n            font-family: monospace;\n        }\n\n        .cell-vendor {\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-numeric {\n            text-align: right;\n            font-variant-numeric: tabular-nums;\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-cost {\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        /* \u2500\u2500 Success Rate Mini Bar \u2500\u2500 */\n        .success-rate-cell {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n            gap: 3px;\n        }\n\n        .success-rate-value {\n            font-weight: 600;\n        }\n\n        .success-bar-bg {\n            width: 60px;\n            height: 4px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 2px;\n            overflow: hidden;\n        }\n\n        .success-bar-fill {\n            height: 100%;\n            background: var(--mj-status-success);\n            border-radius: 2px;\n            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        /* \u2500\u2500 Responsive \u2500\u2500 */\n        @media (max-width: 1200px) {\n            .leaderboard-table th,\n            .leaderboard-table td {\n                padding: 10px 10px;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .filter-bar {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            .time-chips {\n                margin-left: 0;\n                justify-content: flex-start;\n                flex-wrap: wrap;\n            }\n        }\n    "] }]
+    `, styles: ["\n        :host { display: block; }\n\n        .loading-container {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        /* \u2500\u2500 Leaderboard \u2500\u2500 */\n        .leaderboard-panel {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            overflow: hidden;\n        }\n\n        .table-wrapper {\n            overflow-x: auto;\n        }\n\n        .leaderboard-table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 13px;\n        }\n\n        .leaderboard-table th,\n        .leaderboard-table td {\n            padding: 12px 14px;\n            text-align: left;\n            border-bottom: 1px solid var(--mj-border-subtle);\n        }\n\n        .leaderboard-table th {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            background: var(--mj-bg-surface-card);\n            position: sticky;\n            top: 0;\n            white-space: nowrap;\n        }\n\n        .col-rank { width: 60px; text-align: center; }\n        .col-model { min-width: 180px; }\n        .col-vendor { min-width: 100px; }\n        .col-numeric { text-align: right; white-space: nowrap; }\n\n        .leaderboard-table tbody tr {\n            transition: background 0.15s;\n        }\n\n        .leaderboard-table tbody tr:hover {\n            background: var(--mj-bg-surface-hover);\n        }\n\n        .empty-row {\n            text-align: center;\n            color: var(--mj-text-disabled);\n            padding: 32px;\n        }\n\n        /* \u2500\u2500 Rank Badge \u2500\u2500 */\n        .rank-badge {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            font-size: 12px;\n            font-weight: 700;\n        }\n\n        .rank-gold {\n            background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-warning) 35%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface)));\n            color: var(--mj-status-warning-text, var(--mj-status-warning));\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n        }\n\n        .rank-silver {\n            background: color-mix(in srgb, var(--mj-text-muted) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n        }\n\n        .rank-bronze {\n            background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n            color: var(--mj-text-secondary);\n        }\n\n        .rank-neutral {\n            background: var(--mj-bg-surface-sunken);\n            color: var(--mj-text-muted);\n        }\n\n        /* \u2500\u2500 Model Cell \u2500\u2500 */\n        .cell-model {\n            font-weight: 500;\n            color: var(--mj-text-primary);\n        }\n\n        .model-name {\n            font-weight: 600;\n        }\n\n        .model-api-id {\n            font-size: 11px;\n            color: var(--mj-text-muted);\n            margin-top: 2px;\n            font-family: monospace;\n        }\n\n        .cell-vendor {\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-numeric {\n            text-align: right;\n            font-variant-numeric: tabular-nums;\n            color: var(--mj-text-secondary);\n        }\n\n        .cell-cost {\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        /* \u2500\u2500 Success Rate Mini Bar \u2500\u2500 */\n        .success-rate-cell {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n            gap: 3px;\n        }\n\n        .success-rate-value {\n            font-weight: 600;\n        }\n\n        .success-bar-bg {\n            width: 60px;\n            height: 4px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 2px;\n            overflow: hidden;\n        }\n\n        .success-bar-fill {\n            height: 100%;\n            background: var(--mj-status-success);\n            border-radius: 2px;\n            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        /* \u2500\u2500 Responsive \u2500\u2500 */\n        @media (max-width: 1200px) {\n            .leaderboard-table th,\n            .leaderboard-table td {\n                padding: 10px 10px;\n            }\n        }\n\n    "] }]
     }], null, { TimeRange: [{
             type: Input
-        }], TimeRangeChange: [{
-            type: Output
+        }], SortBy: [{
+            type: Input
+        }], SelectedVendor: [{
+            type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsModelPerformanceComponent, { className: "AnalyticsModelPerformanceComponent", filePath: "src/AI/components/analytics/model-performance/model-performance.component.ts", lineNumber: 429 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsModelPerformanceComponent, { className: "AnalyticsModelPerformanceComponent", filePath: "src/AI/components/analytics/model-performance/model-performance.component.ts", lineNumber: 300 }); })();
 export function LoadAnalyticsModelPerformance() { }
 //# sourceMappingURL=model-performance.component.js.map