@memberjunction/ng-clustering 0.0.1 → 5.24.0

package/dist/lib/cluster-config-panel.component.js

@@ -0,0 +1,732 @@
+/**
+ * @fileoverview Floating glass-morphism configuration panel for clustering.
+ *
+ * `ClusterConfigPanelComponent` provides a draggable floating panel with
+ * entity picker, algorithm picker, parameter sliders, distance metric
+ * selector, max records input, run button, and result metrics display.
+ *
+ * It emits cancelable `BeforeXXX` events so consumers can intercept and
+ * validate before clustering starts or a visualization is saved.
+ *
+ * @example
+ * ```html
+ * <mj-cluster-config-panel
+ *     [IsRunning]="isRunning"
+ *     [Metrics]="result?.Metrics ?? null"
+ *     [EntityOptions]="myEntityOptions"
+ *     [ShowSaveButton]="true"
+ *     [DefaultAlgorithm]="'dbscan'"
+ *     [Collapsed]="false"
+ *     (BeforeRunClustering)="onBeforeRun($event)"
+ *     (RunClustering)="onRunClustering($event)"
+ *     (ConfigChanged)="onConfigChanged($event)"
+ *     (SaveVisualization)="onSave()">
+ * </mj-cluster-config-panel>
+ * ```
+ */
+import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectorRef, ViewChild, inject, } from '@angular/core';
+import { DefaultClusterConfig, } from './clustering.types';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _c0 = ["panelElement"];
+const _forTrack0 = ($index, $item) => $item.ID;
+function ClusterConfigPanelComponent_Conditional_8_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const entity_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", entity_r4.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(entity_r4.Name);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const doc_r6 = ctx.$implicit;
+    i0.ɵɵproperty("value", doc_r6.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(doc_r6.Name);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2, "Document Template");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "select", 8);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_6_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.Config.EntityDocumentID = $event; return i0.ɵɵresetView(ctx_r2.OnFieldChanged()); });
+    i0.ɵɵrepeaterCreate(4, ClusterConfigPanelComponent_Conditional_8_Conditional_6_For_5_Template, 2, 2, "option", 9, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngModel", ctx_r2.Config.EntityDocumentID);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.EntityDocOptions);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_12_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const alg_r8 = ctx.$implicit;
+    i0.ɵɵproperty("value", alg_r8.Value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(alg_r8.Label);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2, "Algorithm");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "select", 8);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_12_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnAlgorithmChanged($event)); });
+    i0.ɵɵrepeaterCreate(4, ClusterConfigPanelComponent_Conditional_8_Conditional_12_For_5_Template, 2, 2, "option", 9, i0.ɵɵcomponentInstance().TrackAlgorithmBy, true);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngModel", ctx_r2.Config.Algorithm);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.AlgorithmOptions);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 16);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_13_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.Config.K = $event; return i0.ɵɵresetView(ctx_r2.OnFieldChanged()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Clusters (K): ", ctx_r2.Config.K);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngModel", ctx_r2.Config.K)("min", 2)("max", 20)("step", 1);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 16);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_14_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.Config.Epsilon = $event; return i0.ɵɵresetView(ctx_r2.OnFieldChanged()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Epsilon: ", ctx_r2.Config.Epsilon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngModel", ctx_r2.Config.Epsilon)("min", 0.05)("max", 0.95)("step", 0.05);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 16);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_15_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.Config.MinPoints = $event; return i0.ɵɵresetView(ctx_r2.OnFieldChanged()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Min Points: ", ctx_r2.Config.MinPoints);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngModel", ctx_r2.Config.MinPoints)("min", 2)("max", 20)("step", 1);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const metric_r13 = ctx.$implicit;
+    i0.ɵɵproperty("value", metric_r13.Value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(metric_r13.Label);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2, "Distance Metric");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "select", 8);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_17_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnMetricChanged($event)); });
+    i0.ɵɵrepeaterCreate(4, ClusterConfigPanelComponent_Conditional_8_Conditional_17_For_5_Template, 2, 2, "option", 9, i0.ɵɵcomponentInstance().TrackMetricBy, true);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngModel", ctx_r2.Config.DistanceMetric);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.MetricOptions);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 17);
+    i0.ɵɵtext(1, " Running... ");
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 18);
+    i0.ɵɵtext(1, " Run Clustering ");
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_25_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
+    i0.ɵɵtext(2, "Outliers");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.Metrics.OutlierCount);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 19)(2, "span", 20);
+    i0.ɵɵtext(3, "Silhouette");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 21);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 19)(7, "span", 20);
+    i0.ɵɵtext(8, "Clusters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 21);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 19)(12, "span", 20);
+    i0.ɵɵtext(13, "Records");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 21);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 19)(17, "span", 20);
+    i0.ɵɵtext(18, "Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "span", 21);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(21, ClusterConfigPanelComponent_Conditional_8_Conditional_25_Conditional_21_Template, 5, 1, "div", 19);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("good", ctx_r2.IsSilhouetteGood(ctx_r2.Metrics.SilhouetteScore));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.FormatSilhouette(ctx_r2.Metrics.SilhouetteScore), " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.Metrics.ClusterCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.Metrics.RecordCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.FormatTime(ctx_r2.Metrics.ComputationTimeMs));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.Metrics.OutlierCount > 0 ? 21 : -1);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnSave()); });
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵtext(2, " Save this visualization ");
+    i0.ɵɵelementEnd();
+} }
+function ClusterConfigPanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2, "Entity");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "select", 8);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnEntityChanged($event)); });
+    i0.ɵɵrepeaterCreate(4, ClusterConfigPanelComponent_Conditional_8_For_5_Template, 2, 2, "option", 9, i0.ɵɵcomponentInstance().TrackEntityBy, true);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(6, ClusterConfigPanelComponent_Conditional_8_Conditional_6_Template, 6, 1, "div", 7);
+    i0.ɵɵelementStart(7, "div", 7)(8, "label");
+    i0.ɵɵtext(9, "Filter (optional)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "input", 10);
+    i0.ɵɵtwoWayListener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.Config.Filter, $event) || (ctx_r2.Config.Filter = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Template_input_ngModelChange_10_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnFieldChanged()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 11);
+    i0.ɵɵconditionalCreate(12, ClusterConfigPanelComponent_Conditional_8_Conditional_12_Template, 6, 1, "div", 7);
+    i0.ɵɵconditionalCreate(13, ClusterConfigPanelComponent_Conditional_8_Conditional_13_Template, 4, 5, "div", 7)(14, ClusterConfigPanelComponent_Conditional_8_Conditional_14_Template, 4, 5, "div", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(15, ClusterConfigPanelComponent_Conditional_8_Conditional_15_Template, 4, 5, "div", 7);
+    i0.ɵɵelementStart(16, "div", 11);
+    i0.ɵɵconditionalCreate(17, ClusterConfigPanelComponent_Conditional_8_Conditional_17_Template, 6, 1, "div", 7);
+    i0.ɵɵelementStart(18, "div", 7)(19, "label");
+    i0.ɵɵtext(20, "Max Records");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "input", 12);
+    i0.ɵɵtwoWayListener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Template_input_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.Config.MaxRecords, $event) || (ctx_r2.Config.MaxRecords = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Template_input_ngModelChange_21_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnFieldChanged()); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "button", 13);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnRun()); });
+    i0.ɵɵconditionalCreate(23, ClusterConfigPanelComponent_Conditional_8_Conditional_23_Template, 2, 0)(24, ClusterConfigPanelComponent_Conditional_8_Conditional_24_Template, 2, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(25, ClusterConfigPanelComponent_Conditional_8_Conditional_25_Template, 22, 7, "div", 14);
+    i0.ɵɵconditionalCreate(26, ClusterConfigPanelComponent_Conditional_8_Conditional_26_Template, 3, 0, "div", 15);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngModel", ctx_r2.Config.EntityName);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.FilteredEntityOptions);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.EntityDocOptions.length > 1 ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.Config.Filter);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.ShowAlgorithmPicker ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsKMeans ? 13 : 14);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r2.IsKMeans ? 15 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.ShowMetricPicker ? 17 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.Config.MaxRecords);
+    i0.ɵɵproperty("min", 10)("max", 5000);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.IsRunning || !ctx_r2.Config.EntityName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsRunning ? 23 : 24);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.Metrics && ctx_r2.Metrics.RecordCount > 0 ? 25 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.ShowSaveButton ? 26 : -1);
+} }
+export class ClusterConfigPanelComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        // ================================================================
+        // Data Inputs
+        // ================================================================
+        /**
+         * Whether a clustering run is currently in progress.
+         *
+         * When `true`, the Run button is disabled and shows a spinner.
+         *
+         * @default false
+         */
+        this.IsRunning = false;
+        /**
+         * Result metrics from the most recent clustering run.
+         *
+         * When non-null, the metrics section is displayed at the bottom
+         * of the panel showing silhouette score, cluster count, etc.
+         */
+        this.Metrics = null;
+        /**
+         * Entity options for the dropdown.
+         *
+         * The parent component is responsible for populating this list,
+         * typically from MJ Metadata or a subset filtered by
+         * `AvailableEntities`.
+         */
+        this._entityOptions = [];
+        /** Entity Document options for the selected entity. Only shown when 2+ docs exist. */
+        this.EntityDocOptions = [];
+        // ================================================================
+        // Customization Inputs
+        // ================================================================
+        /**
+         * Whether to display the "Save this visualization" link.
+         *
+         * @default true
+         */
+        this.ShowSaveButton = true;
+        /**
+         * Whether to display the algorithm picker dropdown.
+         *
+         * When `false`, the algorithm is fixed to `DefaultAlgorithm`.
+         *
+         * @default true
+         */
+        this.ShowAlgorithmPicker = true;
+        /**
+         * Whether to display the distance metric picker dropdown.
+         *
+         * @default true
+         */
+        this.ShowMetricPicker = true;
+        /**
+         * Default algorithm selection when the panel initializes.
+         *
+         * @default 'kmeans'
+         */
+        this.DefaultAlgorithm = 'kmeans';
+        /**
+         * Restrict the entity picker to a specific list of entity names.
+         *
+         * When empty (the default), all entity options from the
+         * `EntityOptions` input are shown.  When non-empty, only entities
+         * whose `Name` appears in this array are shown.
+         *
+         * @default []
+         *
+         * @example
+         * ```html
+         * <mj-cluster-config-panel
+         *     [AvailableEntities]="['Companies', 'Contacts', 'Deals']">
+         * </mj-cluster-config-panel>
+         * ```
+         */
+        this.AvailableEntities = [];
+        /**
+         * Whether the panel starts in a collapsed (minimized) state.
+         *
+         * The user can toggle between collapsed and expanded by clicking
+         * the collapse chevron in the panel header.
+         *
+         * @default false
+         */
+        this.Collapsed = false;
+        // ================================================================
+        // Standard Outputs
+        // ================================================================
+        /**
+         * Emitted when the user clicks Run and `BeforeRunClustering` was not
+         * canceled.  Payload is a snapshot of the current config.
+         */
+        this.RunClustering = new EventEmitter();
+        /**
+         * Emitted when the user clicks the Save link and `BeforeSave` was
+         * not canceled.
+         */
+        this.SaveVisualization = new EventEmitter();
+        // ================================================================
+        // Cancelable Outputs
+        // ================================================================
+        /**
+         * Fires **before** a clustering run starts.  Set `event.Cancel = true`
+         * to prevent the run (e.g., for validation).
+         *
+         * @example
+         * ```typescript
+         * onBeforeRun(event: CancelableEvent<ClusterConfig>): void {
+         *     if (!event.Data.EntityName) {
+         *         event.Cancel = true;
+         *         alert('Please select an entity first.');
+         *     }
+         * }
+         * ```
+         */
+        this.BeforeRunClustering = new EventEmitter();
+        /**
+         * Fires **before** a visualization is saved.  Set `event.Cancel = true`
+         * to prevent the save (e.g., to prompt for a name first).
+         */
+        this.BeforeSave = new EventEmitter();
+        // ================================================================
+        // Informational Outputs
+        // ================================================================
+        /**
+         * Fires whenever any configuration value changes (entity, algorithm,
+         * K, epsilon, distance metric, max records, filter).
+         *
+         * Payload is a snapshot of the entire config at the time of change.
+         */
+        this.ConfigChanged = new EventEmitter();
+        /**
+         * Fires specifically when the algorithm selection changes.
+         *
+         * Useful for showing/hiding algorithm-specific UI in the parent.
+         */
+        this.AlgorithmChanged = new EventEmitter();
+        // ================================================================
+        // Internal State
+        // ================================================================
+        /** The working configuration object. */
+        this.Config = DefaultClusterConfig();
+        /** Filtered entity list for display (filtered by AvailableEntities). */
+        this.FilteredEntityOptions = [];
+        /** Whether the panel body is currently visible. */
+        this.IsExpanded = true;
+        /** Algorithm options for the dropdown. */
+        this.AlgorithmOptions = [
+            { Value: 'kmeans', Label: 'K-Means' },
+            { Value: 'dbscan', Label: 'DBSCAN' },
+        ];
+        /** Distance metric options for the dropdown. */
+        this.MetricOptions = [
+            { Value: 'cosine', Label: 'Cosine' },
+            { Value: 'euclidean', Label: 'Euclidean' },
+            { Value: 'dotproduct', Label: 'Dot Product' },
+        ];
+        // Dragging state
+        /** Current panel top offset in pixels. */
+        this.PanelTop = 12;
+        /** Current panel left offset in pixels. */
+        this.PanelLeft = 12;
+        this.isDragging = false;
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.dragStartTop = 0;
+        this.dragStartLeft = 0;
+        this.boundOnMouseMove = null;
+        this.boundOnMouseUp = null;
+    }
+    set EntityOptions(value) {
+        this._entityOptions = value || [];
+        this.rebuildFilteredEntities();
+    }
+    get EntityOptions() {
+        return this._entityOptions;
+    }
+    // ================================================================
+    // Lifecycle
+    // ================================================================
+    ngOnInit() {
+        // Apply defaults
+        this.Config.Algorithm = this.DefaultAlgorithm;
+        this.IsExpanded = !this.Collapsed;
+        this.rebuildFilteredEntities();
+        this.boundOnMouseMove = this.onMouseMove.bind(this);
+        this.boundOnMouseUp = this.onMouseUp.bind(this);
+        document.addEventListener('mousemove', this.boundOnMouseMove);
+        document.addEventListener('mouseup', this.boundOnMouseUp);
+    }
+    ngOnDestroy() {
+        if (this.boundOnMouseMove)
+            document.removeEventListener('mousemove', this.boundOnMouseMove);
+        if (this.boundOnMouseUp)
+            document.removeEventListener('mouseup', this.boundOnMouseUp);
+    }
+    // ================================================================
+    // Public Template Methods
+    // ================================================================
+    /**
+     * Whether the current algorithm is K-Means (controls which
+     * parameter sliders are shown).
+     */
+    get IsKMeans() {
+        return this.Config.Algorithm === 'kmeans';
+    }
+    /**
+     * Handle algorithm dropdown change.
+     *
+     * @param value  New algorithm value string.
+     */
+    OnAlgorithmChanged(value) {
+        const newAlg = value;
+        this.Config.Algorithm = newAlg;
+        this.AlgorithmChanged.emit(newAlg);
+        this.emitConfigChanged();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle distance metric dropdown change.
+     *
+     * @param value  New metric value string.
+     */
+    OnMetricChanged(value) {
+        this.Config.DistanceMetric = value;
+        this.emitConfigChanged();
+    }
+    /**
+     * Handle entity dropdown change.
+     *
+     * @param value  New entity name.
+     */
+    OnEntityChanged(value) {
+        this.Config.EntityName = value;
+        this.emitConfigChanged();
+    }
+    /**
+     * Handle changes to any numeric/text config field (K, Epsilon,
+     * MinPoints, MaxRecords, Filter).
+     */
+    OnFieldChanged() {
+        this.emitConfigChanged();
+    }
+    /**
+     * Handle Run button click.  Fires `BeforeRunClustering`, and if not
+     * canceled, emits `RunClustering`.
+     */
+    OnRun() {
+        if (!this.Config.EntityName || this.IsRunning)
+            return;
+        const snapshot = { ...this.Config };
+        const cancelable = { Data: snapshot, Cancel: false };
+        this.BeforeRunClustering.emit(cancelable);
+        if (cancelable.Cancel)
+            return;
+        this.RunClustering.emit(snapshot);
+    }
+    /**
+     * Handle Save link click.  Fires `BeforeSave`, and if not canceled,
+     * emits `SaveVisualization`.
+     */
+    OnSave() {
+        const cancelable = { Data: { ...this.Config }, Cancel: false };
+        this.BeforeSave.emit(cancelable);
+        if (cancelable.Cancel)
+            return;
+        this.SaveVisualization.emit();
+    }
+    /**
+     * Toggle the panel between expanded and collapsed states.
+     */
+    ToggleCollapse() {
+        this.IsExpanded = !this.IsExpanded;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Format a silhouette score to 2 decimal places.
+     *
+     * @param score  The raw silhouette score.
+     * @returns Formatted string (e.g., `"0.72"`).
+     */
+    FormatSilhouette(score) {
+        return score.toFixed(2);
+    }
+    /**
+     * Whether a silhouette score indicates good clustering quality.
+     *
+     * @param score  The silhouette score to evaluate.
+     * @returns `true` if score >= 0.5.
+     */
+    IsSilhouetteGood(score) {
+        return score >= 0.5;
+    }
+    /**
+     * Format a computation time in milliseconds to a human-readable string.
+     *
+     * @param ms  Milliseconds.
+     * @returns e.g., `"1.2s"` or `"450ms"`.
+     */
+    FormatTime(ms) {
+        return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`;
+    }
+    /**
+     * Start dragging the panel via header mousedown.
+     *
+     * @param event  The native mouse event.
+     */
+    OnHeaderMouseDown(event) {
+        event.preventDefault();
+        this.isDragging = true;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragStartTop = this.PanelTop;
+        this.dragStartLeft = this.PanelLeft;
+    }
+    /** @internal TrackBy for algorithm options. */
+    TrackAlgorithmBy(_index, item) {
+        return item.Value;
+    }
+    /** @internal TrackBy for metric options. */
+    TrackMetricBy(_index, item) {
+        return item.Value;
+    }
+    /** @internal TrackBy for entity options. */
+    TrackEntityBy(_index, item) {
+        return item.Name;
+    }
+    // ================================================================
+    // Private Methods
+    // ================================================================
+    /**
+     * Rebuild the filtered entity list based on `AvailableEntities`.
+     */
+    rebuildFilteredEntities() {
+        if (this.AvailableEntities.length > 0) {
+            const allowedSet = new Set(this.AvailableEntities);
+            this.FilteredEntityOptions = this.EntityOptions.filter(e => allowedSet.has(e.Name));
+        }
+        else {
+            this.FilteredEntityOptions = this.EntityOptions;
+        }
+        if (this.FilteredEntityOptions.length > 0 && !this.Config.EntityName) {
+            this.Config.EntityName = this.FilteredEntityOptions[0].Name;
+        }
+    }
+    /** Emit `ConfigChanged` with a snapshot of the current config. */
+    emitConfigChanged() {
+        this.ConfigChanged.emit({ ...this.Config });
+    }
+    onMouseMove(event) {
+        if (!this.isDragging)
+            return;
+        const dx = event.clientX - this.dragStartX;
+        const dy = event.clientY - this.dragStartY;
+        this.PanelTop = Math.max(0, this.dragStartTop + dy);
+        this.PanelLeft = Math.max(0, this.dragStartLeft + dx);
+        this.cdr.detectChanges();
+    }
+    onMouseUp(_event) {
+        this.isDragging = false;
+    }
+    static { this.ɵfac = function ClusterConfigPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ClusterConfigPanelComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ClusterConfigPanelComponent, selectors: [["mj-cluster-config-panel"]], viewQuery: function ClusterConfigPanelComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panelRef = _t.first);
+        } }, inputs: { IsRunning: "IsRunning", Metrics: "Metrics", EntityOptions: "EntityOptions", EntityDocOptions: "EntityDocOptions", ShowSaveButton: "ShowSaveButton", ShowAlgorithmPicker: "ShowAlgorithmPicker", ShowMetricPicker: "ShowMetricPicker", DefaultAlgorithm: "DefaultAlgorithm", AvailableEntities: "AvailableEntities", Collapsed: "Collapsed" }, outputs: { RunClustering: "RunClustering", SaveVisualization: "SaveVisualization", BeforeRunClustering: "BeforeRunClustering", BeforeSave: "BeforeSave", ConfigChanged: "ConfigChanged", AlgorithmChanged: "AlgorithmChanged" }, standalone: false, decls: 9, vars: 9, consts: [["panelElement", ""], [1, "config-panel"], [1, "panel-header", 3, "mousedown"], [1, "fa-solid", "fa-sliders"], [1, "header-actions"], ["title", "Toggle panel", 1, "fa-solid", 3, "click"], [1, "fa-solid", "fa-grip-dots-vertical", "drag-handle"], [1, "form-group"], [3, "ngModelChange", "ngModel"], [3, "value"], ["type", "text", "placeholder", "e.g. Status = 'Active'", 3, "ngModelChange", "ngModel"], [1, "form-row"], ["type", "number", 3, "ngModelChange", "ngModel", "min", "max"], [1, "run-btn", 3, "click", "disabled"], [1, "metrics-section"], [1, "save-link"], ["type", "range", 3, "ngModelChange", "ngModel", "min", "max", "step"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "metric-item"], [1, "metric-label"], [1, "metric-value"], [1, "save-link", 3, "click"], [1, "fa-solid", "fa-bookmark"]], template: function ClusterConfigPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1, 0)(2, "h3", 2);
+            i0.ɵɵlistener("mousedown", function ClusterConfigPanelComponent_Template_h3_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnHeaderMouseDown($event)); });
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵtext(4, " Configuration ");
+            i0.ɵɵelementStart(5, "span", 4)(6, "i", 5);
+            i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Template_i_click_6_listener($event) { i0.ɵɵrestoreView(_r1); ctx.ToggleCollapse(); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(7, "i", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(8, ClusterConfigPanelComponent_Conditional_8_Template, 27, 14);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("top", ctx.PanelTop, "px")("left", ctx.PanelLeft, "px");
+            i0.ɵɵadvance(6);
+            i0.ɵɵclassProp("fa-chevron-up", ctx.IsExpanded)("fa-chevron-down", !ctx.IsExpanded);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.IsExpanded ? 8 : -1);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.RangeValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel], styles: [".config-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    width: 300px;\n    background: color-mix(in srgb, var(--mj-bg-surface-elevated) 95%, transparent);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 14px;\n    padding: 20px;\n    box-shadow: 0 20px 60px color-mix(in srgb, var(--mj-bg-page) 40%, transparent);\n    z-index: 10;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    font-weight: 600;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-primary);\n    cursor: move;\n    user-select: none;\n}\n\n.panel-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n    color: var(--mj-brand-primary);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.header-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n    cursor: pointer;\n    transition: color 0.15s;\n}\n\n.header-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n    margin-bottom: 14px;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 0.7rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin-bottom: 5px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%]   input[type=\"number\"][_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 7px;\n    color: var(--mj-text-primary);\n    font-size: 0.82rem;\n    outline: none;\n    transition: border 0.15s;\n}\n\n.form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus, \n.form-group[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%]:focus, \n.form-group[_ngcontent-%COMP%]   input[type=\"number\"][_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n}\n\n.form-group[_ngcontent-%COMP%]   input[type=\"range\"][_ngcontent-%COMP%] {\n    width: 100%;\n    accent-color: var(--mj-brand-primary);\n}\n\n.form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n}\n\n.form-row[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n\n\n.run-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 0.82rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: background 0.15s;\n    margin-top: 4px;\n}\n\n.run-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.run-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n\n\n.metrics-section[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 8px;\n    margin-top: 14px;\n    padding-top: 14px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.metric-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n    font-size: 0.65rem;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-muted);\n}\n\n.metric-value[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.metric-value.good[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n.save-link[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: color 0.15s;\n}\n\n.save-link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ClusterConfigPanelComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-cluster-config-panel', template: "<div #panelElement\n     class=\"config-panel\"\n     [style.top.px]=\"PanelTop\"\n     [style.left.px]=\"PanelLeft\">\n\n    <!-- Draggable header -->\n    <h3 class=\"panel-header\"\n        (mousedown)=\"OnHeaderMouseDown($event)\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        Configuration\n        <span class=\"header-actions\">\n            <i class=\"fa-solid\"\n               [class.fa-chevron-up]=\"IsExpanded\"\n               [class.fa-chevron-down]=\"!IsExpanded\"\n               (click)=\"ToggleCollapse(); $event.stopPropagation()\"\n               title=\"Toggle panel\"></i>\n            <i class=\"fa-solid fa-grip-dots-vertical drag-handle\"></i>\n        </span>\n    </h3>\n\n    @if (IsExpanded) {\n        <!-- Entity picker -->\n        <div class=\"form-group\">\n            <label>Entity</label>\n            <select [ngModel]=\"Config.EntityName\"\n                    (ngModelChange)=\"OnEntityChanged($event)\">\n                @for (entity of FilteredEntityOptions; track TrackEntityBy($index, entity)) {\n                    <option [value]=\"entity.Name\">{{ entity.Name }}</option>\n                }\n            </select>\n        </div>\n\n        <!-- Entity Document selector (only shown when 2+ docs for selected entity) -->\n        @if (EntityDocOptions.length > 1) {\n            <div class=\"form-group\">\n                <label>Document Template</label>\n                <select [ngModel]=\"Config.EntityDocumentID\"\n                        (ngModelChange)=\"Config.EntityDocumentID = $event; OnFieldChanged()\">\n                    @for (doc of EntityDocOptions; track doc.ID) {\n                        <option [value]=\"doc.ID\">{{ doc.Name }}</option>\n                    }\n                </select>\n            </div>\n        }\n\n        <!-- Filter -->\n        <div class=\"form-group\">\n            <label>Filter (optional)</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"Config.Filter\"\n                   (ngModelChange)=\"OnFieldChanged()\"\n                   placeholder=\"e.g. Status = 'Active'\">\n        </div>\n\n        <!-- Algorithm + K/Epsilon row -->\n        <div class=\"form-row\">\n            @if (ShowAlgorithmPicker) {\n                <div class=\"form-group\">\n                    <label>Algorithm</label>\n                    <select [ngModel]=\"Config.Algorithm\"\n                            (ngModelChange)=\"OnAlgorithmChanged($event)\">\n                        @for (alg of AlgorithmOptions; track TrackAlgorithmBy($index, alg)) {\n                            <option [value]=\"alg.Value\">{{ alg.Label }}</option>\n                        }\n                    </select>\n                </div>\n            }\n\n            @if (IsKMeans) {\n                <div class=\"form-group\">\n                    <label>Clusters (K): {{ Config.K }}</label>\n                    <input type=\"range\"\n                           [ngModel]=\"Config.K\"\n                           (ngModelChange)=\"Config.K = $event; OnFieldChanged()\"\n                           [min]=\"2\"\n                           [max]=\"20\"\n                           [step]=\"1\">\n                </div>\n            } @else {\n                <div class=\"form-group\">\n                    <label>Epsilon: {{ Config.Epsilon }}</label>\n                    <input type=\"range\"\n                           [ngModel]=\"Config.Epsilon\"\n                           (ngModelChange)=\"Config.Epsilon = $event; OnFieldChanged()\"\n                           [min]=\"0.05\"\n                           [max]=\"0.95\"\n                           [step]=\"0.05\">\n                </div>\n            }\n        </div>\n\n        <!-- DBSCAN MinPoints row (only visible for DBSCAN) -->\n        @if (!IsKMeans) {\n            <div class=\"form-group\">\n                <label>Min Points: {{ Config.MinPoints }}</label>\n                <input type=\"range\"\n                       [ngModel]=\"Config.MinPoints\"\n                       (ngModelChange)=\"Config.MinPoints = $event; OnFieldChanged()\"\n                       [min]=\"2\"\n                       [max]=\"20\"\n                       [step]=\"1\">\n            </div>\n        }\n\n        <!-- Distance metric + Max records row -->\n        <div class=\"form-row\">\n            @if (ShowMetricPicker) {\n                <div class=\"form-group\">\n                    <label>Distance Metric</label>\n                    <select [ngModel]=\"Config.DistanceMetric\"\n                            (ngModelChange)=\"OnMetricChanged($event)\">\n                        @for (metric of MetricOptions; track TrackMetricBy($index, metric)) {\n                            <option [value]=\"metric.Value\">{{ metric.Label }}</option>\n                        }\n                    </select>\n                </div>\n            }\n            <div class=\"form-group\">\n                <label>Max Records</label>\n                <input type=\"number\"\n                       [(ngModel)]=\"Config.MaxRecords\"\n                       (ngModelChange)=\"OnFieldChanged()\"\n                       [min]=\"10\"\n                       [max]=\"5000\">\n            </div>\n        </div>\n\n        <!-- Run button -->\n        <button class=\"run-btn\"\n                [disabled]=\"IsRunning || !Config.EntityName\"\n                (click)=\"OnRun()\">\n            @if (IsRunning) {\n                <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n            } @else {\n                <i class=\"fa-solid fa-play\"></i> Run Clustering\n            }\n        </button>\n\n        <!-- Metrics display -->\n        @if (Metrics && Metrics.RecordCount > 0) {\n            <div class=\"metrics-section\">\n                <div class=\"metric-item\">\n                    <span class=\"metric-label\">Silhouette</span>\n                    <span class=\"metric-value\"\n                          [class.good]=\"IsSilhouetteGood(Metrics.SilhouetteScore)\">\n                        {{ FormatSilhouette(Metrics.SilhouetteScore) }}\n                    </span>\n                </div>\n                <div class=\"metric-item\">\n                    <span class=\"metric-label\">Clusters</span>\n                    <span class=\"metric-value\">{{ Metrics.ClusterCount }}</span>\n                </div>\n                <div class=\"metric-item\">\n                    <span class=\"metric-label\">Records</span>\n                    <span class=\"metric-value\">{{ Metrics.RecordCount }}</span>\n                </div>\n                <div class=\"metric-item\">\n                    <span class=\"metric-label\">Time</span>\n                    <span class=\"metric-value\">{{ FormatTime(Metrics.ComputationTimeMs) }}</span>\n                </div>\n                @if (Metrics.OutlierCount > 0) {\n                    <div class=\"metric-item\">\n                        <span class=\"metric-label\">Outliers</span>\n                        <span class=\"metric-value\">{{ Metrics.OutlierCount }}</span>\n                    </div>\n                }\n            </div>\n        }\n\n        <!-- Save link -->\n        @if (ShowSaveButton) {\n            <div class=\"save-link\" (click)=\"OnSave()\">\n                <i class=\"fa-solid fa-bookmark\"></i> Save this visualization\n            </div>\n        }\n    }\n</div>\n", styles: [".config-panel {\n    position: absolute;\n    width: 300px;\n    background: color-mix(in srgb, var(--mj-bg-surface-elevated) 95%, transparent);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 14px;\n    padding: 20px;\n    box-shadow: 0 20px 60px color-mix(in srgb, var(--mj-bg-page) 40%, transparent);\n    z-index: 10;\n}\n\n.panel-header {\n    font-size: 0.8rem;\n    font-weight: 600;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--mj-text-primary);\n    cursor: move;\n    user-select: none;\n}\n\n.panel-header i:first-child {\n    color: var(--mj-brand-primary);\n}\n\n.header-actions {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.header-actions i {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n    cursor: pointer;\n    transition: color 0.15s;\n}\n\n.header-actions i:hover {\n    color: var(--mj-text-primary);\n}\n\n.drag-handle {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n}\n\n/* Form elements */\n.form-group {\n    margin-bottom: 14px;\n}\n\n.form-group label {\n    display: block;\n    font-size: 0.7rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    margin-bottom: 5px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.form-group select,\n.form-group input[type=\"text\"],\n.form-group input[type=\"number\"] {\n    width: 100%;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 7px;\n    color: var(--mj-text-primary);\n    font-size: 0.82rem;\n    outline: none;\n    transition: border 0.15s;\n}\n\n.form-group select:focus,\n.form-group input[type=\"text\"]:focus,\n.form-group input[type=\"number\"]:focus {\n    border-color: var(--mj-brand-primary);\n}\n\n.form-group input[type=\"range\"] {\n    width: 100%;\n    accent-color: var(--mj-brand-primary);\n}\n\n.form-row {\n    display: flex;\n    gap: 10px;\n}\n\n.form-row .form-group {\n    flex: 1;\n}\n\n/* Run button */\n.run-btn {\n    width: 100%;\n    padding: 10px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 0.82rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: background 0.15s;\n    margin-top: 4px;\n}\n\n.run-btn:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.run-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n/* Metrics */\n.metrics-section {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 8px;\n    margin-top: 14px;\n    padding-top: 14px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.metric-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.metric-label {\n    font-size: 0.65rem;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--mj-text-muted);\n}\n\n.metric-value {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.metric-value.good {\n    color: var(--mj-status-success);\n}\n\n/* Save link */\n.save-link {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: color 0.15s;\n}\n\n.save-link:hover {\n    color: var(--mj-brand-primary);\n}\n\n"] }]
+    }], null, { IsRunning: [{
+            type: Input
+        }], Metrics: [{
+            type: Input
+        }], EntityOptions: [{
+            type: Input
+        }], EntityDocOptions: [{
+            type: Input
+        }], ShowSaveButton: [{
+            type: Input
+        }], ShowAlgorithmPicker: [{
+            type: Input
+        }], ShowMetricPicker: [{
+            type: Input
+        }], DefaultAlgorithm: [{
+            type: Input
+        }], AvailableEntities: [{
+            type: Input
+        }], Collapsed: [{
+            type: Input
+        }], RunClustering: [{
+            type: Output
+        }], SaveVisualization: [{
+            type: Output
+        }], BeforeRunClustering: [{
+            type: Output
+        }], BeforeSave: [{
+            type: Output
+        }], ConfigChanged: [{
+            type: Output
+        }], AlgorithmChanged: [{
+            type: Output
+        }], panelRef: [{
+            type: ViewChild,
+            args: ['panelElement', { static: false }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ClusterConfigPanelComponent, { className: "ClusterConfigPanelComponent", filePath: "src/lib/cluster-config-panel.component.ts", lineNumber: 57 }); })();
+//# sourceMappingURL=cluster-config-panel.component.js.map