@memberjunction/ng-clustering 5.39.0 → 5.40.0

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

@@ -66,24 +66,112 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_6_Template(rf, ct
     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);
+function ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedDocIDs.length);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_5_For_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const alg_r8 = ctx.$implicit;
-    i0.ɵɵproperty("value", alg_r8.Value);
+    const doc_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(alg_r8.Label);
+    i0.ɵɵtextInterpolate(doc_r9.EntityName);
 } }
-function ClusterConfigPanelComponent_Conditional_8_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_5_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 26)(1, "input", 27);
+    i0.ɵɵlistener("change", function ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_5_For_4_Template_input_change_1_listener() { const doc_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.ToggleDoc(doc_r9.ID)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 28);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_5_For_4_Conditional_4_Template, 2, 1, "span", 29);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const doc_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r2.IsDocSelected(doc_r9.ID));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(doc_r9.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(doc_r9.EntityName ? 4 : -1);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25);
+    i0.ɵɵtext(2, "Select 2+ documents to cluster them together. All must use the same embedding model.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_5_For_4_Template, 5, 3, "label", 26, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r2.AllEntityDocOptions);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "button", 21);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleMultiSource()); });
+    i0.ɵɵelement(2, "i", 22);
+    i0.ɵɵtext(3, " Multiple sources ");
+    i0.ɵɵconditionalCreate(4, ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_4_Template, 2, 1, "span", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, ClusterConfigPanelComponent_Conditional_8_Conditional_7_Conditional_5_Template, 5, 0, "div", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-chevron-down", !ctx_r2.ShowMultiSource)("fa-chevron-up", ctx_r2.ShowMultiSource);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.IsMultiEntity ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.ShowMultiSource ? 5 : -1);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "label");
+    i0.ɵɵtext(2, "Projection");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 12)(4, "button", 13);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Conditional_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetDimensions(2)); });
+    i0.ɵɵtext(5, "2D");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 13);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Conditional_9_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetDimensions(3)); });
+    i0.ɵɵtext(7, "3D");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", (ctx_r2.Config.Dimensions ?? 2) === 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r2.Config.Dimensions === 3);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_23_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const alg_r12 = ctx.$implicit;
+    i0.ɵɵproperty("value", alg_r12.Value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(alg_r12.Label);
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = 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.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_23_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnAlgorithmChanged($event)); });
+    i0.ɵɵrepeaterCreate(4, ClusterConfigPanelComponent_Conditional_8_Conditional_23_For_5_Template, 2, 2, "option", 9, i0.ɵɵcomponentInstance().TrackAlgorithmBy, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -92,13 +180,13 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_12_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.AlgorithmOptions);
 } }
-function ClusterConfigPanelComponent_Conditional_8_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+function ClusterConfigPanelComponent_Conditional_8_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = 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.ɵɵelementStart(3, "input", 30);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_24_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r13); 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);
@@ -107,13 +195,13 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_13_Template(rf, c
     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();
+function ClusterConfigPanelComponent_Conditional_8_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = 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.ɵɵelementStart(3, "input", 30);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_25_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r14); 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);
@@ -122,13 +210,13 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_14_Template(rf, c
     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();
+function ClusterConfigPanelComponent_Conditional_8_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = 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.ɵɵelementStart(3, "input", 30);
+    i0.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_26_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r15); 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);
@@ -137,24 +225,24 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_15_Template(rf, c
     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) {
+function ClusterConfigPanelComponent_Conditional_8_Conditional_28_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);
+    const metric_r17 = ctx.$implicit;
+    i0.ɵɵproperty("value", metric_r17.Value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(metric_r13.Label);
+    i0.ɵɵtextInterpolate(metric_r17.Label);
 } }
-function ClusterConfigPanelComponent_Conditional_8_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+function ClusterConfigPanelComponent_Conditional_8_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = 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.ɵɵlistener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Conditional_28_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnMetricChanged($event)); });
+    i0.ɵɵrepeaterCreate(4, ClusterConfigPanelComponent_Conditional_8_Conditional_28_For_5_Template, 2, 2, "option", 9, i0.ɵɵcomponentInstance().TrackMetricBy, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -163,19 +251,27 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_17_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.MetricOptions);
 } }
-function ClusterConfigPanelComponent_Conditional_8_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 17);
+function ClusterConfigPanelComponent_Conditional_8_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 31);
     i0.ɵɵtext(1, " Running... ");
 } }
-function ClusterConfigPanelComponent_Conditional_8_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 18);
+function ClusterConfigPanelComponent_Conditional_8_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 32);
     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);
+function ClusterConfigPanelComponent_Conditional_8_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Conditional_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnSave()); });
+    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵtext(2, " Save ");
+    i0.ɵɵelementEnd();
+} }
+function ClusterConfigPanelComponent_Conditional_8_Conditional_38_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35)(1, "span", 36);
     i0.ɵɵtext(2, "Outliers");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵelementStart(3, "span", 37);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -183,32 +279,32 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_25_Conditional_21
     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);
+function ClusterConfigPanelComponent_Conditional_8_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 35)(2, "span", 36);
     i0.ɵɵtext(3, "Silhouette");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 21);
+    i0.ɵɵelementStart(4, "span", 37);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 19)(7, "span", 20);
+    i0.ɵɵelementStart(6, "div", 35)(7, "span", 36);
     i0.ɵɵtext(8, "Clusters");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 21);
+    i0.ɵɵelementStart(9, "span", 37);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 19)(12, "span", 20);
+    i0.ɵɵelementStart(11, "div", 35)(12, "span", 36);
     i0.ɵɵtext(13, "Records");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 21);
+    i0.ɵɵelementStart(14, "span", 37);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 19)(17, "span", 20);
+    i0.ɵɵelementStart(16, "div", 35)(17, "span", 36);
     i0.ɵɵtext(18, "Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 21);
+    i0.ɵɵelementStart(19, "span", 37);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(21, ClusterConfigPanelComponent_Conditional_8_Conditional_25_Conditional_21_Template, 5, 1, "div", 19);
+    i0.ɵɵconditionalCreate(21, ClusterConfigPanelComponent_Conditional_8_Conditional_38_Conditional_21_Template, 5, 1, "div", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -225,14 +321,6 @@ function ClusterConfigPanelComponent_Conditional_8_Conditional_25_Template(rf, c
     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");
@@ -243,33 +331,48 @@ function ClusterConfigPanelComponent_Conditional_8_Template(rf, ctx) { if (rf &
     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.ɵɵconditionalCreate(7, ClusterConfigPanelComponent_Conditional_8_Conditional_7_Template, 6, 6, "div", 10);
+    i0.ɵɵelementStart(8, "div", 11);
+    i0.ɵɵconditionalCreate(9, ClusterConfigPanelComponent_Conditional_8_Conditional_9_Template, 8, 4, "div", 7);
+    i0.ɵɵelementStart(10, "div", 7)(11, "label");
+    i0.ɵɵtext(12, "Color by");
     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.ɵɵelementStart(13, "div", 12)(14, "button", 13);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetColorBy("cluster")); });
+    i0.ɵɵtext(15, "Cluster");
     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(16, "button", 13);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetColorBy("entity")); });
+    i0.ɵɵtext(17, "Entity");
+    i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(18, "div", 7)(19, "label");
-    i0.ɵɵtext(20, "Max Records");
+    i0.ɵɵtext(20, "Filter (optional)");
     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.ɵɵelementStart(21, "input", 14);
+    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.Filter, $event) || (ctx_r2.Config.Filter = $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, "div", 15);
+    i0.ɵɵconditionalCreate(23, ClusterConfigPanelComponent_Conditional_8_Conditional_23_Template, 6, 1, "div", 7);
+    i0.ɵɵconditionalCreate(24, ClusterConfigPanelComponent_Conditional_8_Conditional_24_Template, 4, 5, "div", 7)(25, ClusterConfigPanelComponent_Conditional_8_Conditional_25_Template, 4, 5, "div", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(26, ClusterConfigPanelComponent_Conditional_8_Conditional_26_Template, 4, 5, "div", 7);
+    i0.ɵɵelementStart(27, "div", 15);
+    i0.ɵɵconditionalCreate(28, ClusterConfigPanelComponent_Conditional_8_Conditional_28_Template, 6, 1, "div", 7);
+    i0.ɵɵelementStart(29, "div", 7)(30, "label");
+    i0.ɵɵtext(31, "Max Records");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "input", 16);
+    i0.ɵɵtwoWayListener("ngModelChange", function ClusterConfigPanelComponent_Conditional_8_Template_input_ngModelChange_32_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_32_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.ɵɵelementStart(33, "div", 17)(34, "button", 18);
+    i0.ɵɵlistener("click", function ClusterConfigPanelComponent_Conditional_8_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnRun()); });
+    i0.ɵɵconditionalCreate(35, ClusterConfigPanelComponent_Conditional_8_Conditional_35_Template, 2, 0)(36, ClusterConfigPanelComponent_Conditional_8_Conditional_36_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);
+    i0.ɵɵconditionalCreate(37, ClusterConfigPanelComponent_Conditional_8_Conditional_37_Template, 3, 0, "button", 19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(38, ClusterConfigPanelComponent_Conditional_8_Conditional_38_Template, 22, 7, "div", 20);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
@@ -278,27 +381,35 @@ function ClusterConfigPanelComponent_Conditional_8_Template(rf, ctx) { if (rf &
     i0.ɵɵrepeater(ctx_r2.FilteredEntityOptions);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.EntityDocOptions.length > 1 ? 6 : -1);
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.HasMultiSourceOptions ? 7 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.ShowDimensionToggle ? 9 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("active", (ctx_r2.Config.ColorBy ?? "cluster") === "cluster");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r2.Config.ColorBy === "entity");
+    i0.ɵɵadvance(5);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.Config.Filter);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.ShowAlgorithmPicker ? 12 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowAlgorithmPicker ? 23 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.IsKMeans ? 13 : 14);
+    i0.ɵɵconditional(ctx_r2.IsKMeans ? 24 : 25);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(!ctx_r2.IsKMeans ? 15 : -1);
+    i0.ɵɵconditional(!ctx_r2.IsKMeans ? 26 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.ShowMetricPicker ? 17 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowMetricPicker ? 28 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.Config.MaxRecords);
     i0.ɵɵproperty("min", 10)("max", 5000);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.CanRun);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r2.IsRunning || !ctx_r2.Config.EntityName);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.IsRunning ? 23 : 24);
+    i0.ɵɵconditional(ctx_r2.IsRunning ? 35 : 36);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.Metrics && ctx_r2.Metrics.RecordCount > 0 ? 25 : -1);
+    i0.ɵɵconditional(ctx_r2.CanSave ? 37 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.ShowSaveButton ? 26 : -1);
+    i0.ɵɵconditional(ctx_r2.Metrics && ctx_r2.Metrics.RecordCount > 0 ? 38 : -1);
 } }
 export class ClusterConfigPanelComponent {
     constructor() {
@@ -331,6 +442,16 @@ export class ClusterConfigPanelComponent {
         this._entityOptions = [];
         /** Entity Document options for the selected entity. Only shown when 2+ docs exist. */
         this.EntityDocOptions = [];
+        /**
+         * All Entity Documents across entities (each with `EntityName`), used to power
+         * the optional multi-entity source selector. When two or more are selected the
+         * run becomes a multi-entity analysis (their vectors are merged server-side).
+         */
+        this.AllEntityDocOptions = [];
+        /** Whether to show the 2D/3D projection toggle. @default true */
+        this.ShowDimensionToggle = true;
+        /** Whether to show the multi-entity source selector. @default true */
+        this.ShowMultiEntity = true;
         // ================================================================
         // Customization Inputs
         // ================================================================
@@ -438,6 +559,12 @@ export class ClusterConfigPanelComponent {
          * Useful for showing/hiding algorithm-specific UI in the parent.
          */
         this.AlgorithmChanged = new EventEmitter();
+        /**
+         * Fires when the 2D/3D projection toggle changes. Hosts should re-run (or
+         * re-project) so the change is reflected immediately — a 3D projection needs
+         * a Z coordinate that only a fresh run produces.
+         */
+        this.DimensionsChanged = new EventEmitter();
         // ================================================================
         // Internal State
         // ================================================================
@@ -447,6 +574,8 @@ export class ClusterConfigPanelComponent {
         this.FilteredEntityOptions = [];
         /** Whether the panel body is currently visible. */
         this.IsExpanded = true;
+        /** Whether the multi-entity source selector is expanded. */
+        this.ShowMultiSource = false;
         /** Algorithm options for the dropdown. */
         this.AlgorithmOptions = [
             { Value: 'kmeans', Label: 'K-Means' },
@@ -544,12 +673,74 @@ export class ClusterConfigPanelComponent {
     OnFieldChanged() {
         this.emitConfigChanged();
     }
+    // ----- Multi-entity / dimensions / color-by -----
+    /** The currently selected entity-document IDs for multi-entity clustering. */
+    get SelectedDocIDs() {
+        return this.Config.EntityDocumentIDs ?? [];
+    }
+    /** True when two or more source documents are selected (multi-entity mode). */
+    get IsMultiEntity() {
+        return this.SelectedDocIDs.length >= 2;
+    }
+    /** Whether there are enough documents to offer multi-entity selection. */
+    get HasMultiSourceOptions() {
+        return this.ShowMultiEntity && this.AllEntityDocOptions.length > 1;
+    }
+    /** Whether a given document is currently selected. */
+    IsDocSelected(id) {
+        return this.SelectedDocIDs.includes(id);
+    }
+    /** Toggle a document in/out of the multi-entity selection. */
+    ToggleDoc(id) {
+        const set = new Set(this.Config.EntityDocumentIDs ?? []);
+        if (set.has(id)) {
+            set.delete(id);
+        }
+        else {
+            set.add(id);
+        }
+        this.Config.EntityDocumentIDs = [...set];
+        // Once a multi-entity selection exists, color-by-entity is the useful default.
+        if (this.IsMultiEntity && this.Config.ColorBy !== 'entity') {
+            this.Config.ColorBy = 'entity';
+        }
+        this.emitConfigChanged();
+        this.cdr.detectChanges();
+    }
+    /** Toggle the multi-source expander. */
+    ToggleMultiSource() {
+        this.ShowMultiSource = !this.ShowMultiSource;
+        this.cdr.detectChanges();
+    }
+    /** Set the projection dimensionality (2 or 3). */
+    SetDimensions(d) {
+        if (this.Config.Dimensions === d)
+            return;
+        this.Config.Dimensions = d;
+        this.emitConfigChanged();
+        this.DimensionsChanged.emit(d);
+        this.cdr.detectChanges();
+    }
+    /** Set the legend/color mode. */
+    SetColorBy(mode) {
+        this.Config.ColorBy = mode;
+        this.emitConfigChanged();
+        this.cdr.detectChanges();
+    }
+    /** Whether the Run button can be clicked. */
+    get CanRun() {
+        return !this.IsRunning && (!!this.Config.EntityName || this.SelectedDocIDs.length > 0);
+    }
+    /** Whether the Save button should be offered (there are results to save). */
+    get CanSave() {
+        return this.ShowSaveButton && !!this.Metrics && this.Metrics.RecordCount > 0;
+    }
     /**
      * Handle Run button click.  Fires `BeforeRunClustering`, and if not
      * canceled, emits `RunClustering`.
      */
     OnRun() {
-        if (!this.Config.EntityName || this.IsRunning)
+        if (!this.CanRun)
             return;
         const snapshot = { ...this.Config };
         const cancelable = { Data: snapshot, Cancel: false };
@@ -668,7 +859,7 @@ export class ClusterConfigPanelComponent {
         } 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) {
+        } }, inputs: { IsRunning: "IsRunning", Metrics: "Metrics", EntityOptions: "EntityOptions", EntityDocOptions: "EntityDocOptions", AllEntityDocOptions: "AllEntityDocOptions", ShowDimensionToggle: "ShowDimensionToggle", ShowMultiEntity: "ShowMultiEntity", 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", DimensionsChanged: "DimensionsChanged" }, 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"], [1, "form-group", "multi-source"], [1, "form-row", "toggle-row"], ["role", "group", 1, "seg-toggle"], ["type", "button", 1, "seg-btn", 3, "click"], ["type", "text", "placeholder", "e.g. Status = 'Active'", 3, "ngModelChange", "ngModel"], [1, "form-row"], ["type", "number", 3, "ngModelChange", "ngModel", "min", "max"], [1, "action-row"], [1, "run-btn", 3, "click", "disabled"], ["title", "Save this visualization", 1, "save-btn"], [1, "metrics-section"], ["type", "button", 1, "multi-source-toggle", 3, "click"], [1, "fa-solid"], [1, "multi-source-badge"], [1, "multi-source-list"], [1, "multi-source-hint"], [1, "multi-source-item"], ["type", "checkbox", 3, "change", "checked"], [1, "multi-source-name"], [1, "multi-source-entity"], ["type", "range", 3, "ngModelChange", "ngModel", "min", "max", "step"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], ["title", "Save this visualization", 1, "save-btn", 3, "click"], [1, "fa-solid", "fa-bookmark"], [1, "metric-item"], [1, "metric-label"], [1, "metric-value"]], 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)); });
@@ -679,7 +870,7 @@ export class ClusterConfigPanelComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵelement(7, "i", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(8, ClusterConfigPanelComponent_Conditional_8_Template, 27, 14);
+            i0.ɵɵconditionalCreate(8, ClusterConfigPanelComponent_Conditional_8_Template, 39, 20);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵstyleProp("top", ctx.PanelTop, "px")("left", ctx.PanelLeft, "px");
@@ -687,11 +878,11 @@ export class ClusterConfigPanelComponent {
             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}"] }); }
+        } }, 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.action-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 4px;\n}\n\n.run-btn[_ngcontent-%COMP%] {\n    flex: 1;\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}\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.save-btn[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.82rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n\n.save-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.toggle-row[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] { min-width: 0; }\n\n.seg-toggle[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 2px;\n    padding: 3px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    width: 100%;\n}\n\n.seg-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 5px 8px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.75rem;\n    font-weight: 600;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s, color 0.15s;\n}\n\n.seg-btn[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n\n.seg-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 2px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n\n\n.multi-source-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.78rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.multi-source-toggle[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n\n.multi-source-badge[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-radius: 10px;\n    padding: 1px 8px;\n    font-size: 0.7rem;\n}\n\n.multi-source-list[_ngcontent-%COMP%] {\n    margin-top: 6px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 8px;\n    max-height: 180px;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n}\n\n.multi-source-hint[_ngcontent-%COMP%] {\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\n    margin-bottom: 6px;\n    line-height: 1.3;\n}\n\n.multi-source-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 5px 4px;\n    cursor: pointer;\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n}\n\n.multi-source-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); border-radius: 6px; }\n\n.multi-source-entity[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\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}"] }); }
 }
 (() => { (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"] }]
+        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        <!-- Multi-entity source selector -->\n        @if (HasMultiSourceOptions) {\n            <div class=\"form-group multi-source\">\n                <button type=\"button\" class=\"multi-source-toggle\" (click)=\"ToggleMultiSource()\">\n                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!ShowMultiSource\" [class.fa-chevron-up]=\"ShowMultiSource\"></i>\n                    Multiple sources\n                    @if (IsMultiEntity) {\n                        <span class=\"multi-source-badge\">{{ SelectedDocIDs.length }}</span>\n                    }\n                </button>\n                @if (ShowMultiSource) {\n                    <div class=\"multi-source-list\">\n                        <div class=\"multi-source-hint\">Select 2+ documents to cluster them together. All must use the same embedding model.</div>\n                        @for (doc of AllEntityDocOptions; track doc.ID) {\n                            <label class=\"multi-source-item\">\n                                <input type=\"checkbox\" [checked]=\"IsDocSelected(doc.ID)\" (change)=\"ToggleDoc(doc.ID)\">\n                                <span class=\"multi-source-name\">{{ doc.Name }}</span>\n                                @if (doc.EntityName) { <span class=\"multi-source-entity\">{{ doc.EntityName }}</span> }\n                            </label>\n                        }\n                    </div>\n                }\n            </div>\n        }\n\n        <!-- Projection (2D / 3D) + Color-by toggles -->\n        <div class=\"form-row toggle-row\">\n            @if (ShowDimensionToggle) {\n                <div class=\"form-group\">\n                    <label>Projection</label>\n                    <div class=\"seg-toggle\" role=\"group\">\n                        <button type=\"button\" class=\"seg-btn\" [class.active]=\"(Config.Dimensions ?? 2) === 2\" (click)=\"SetDimensions(2)\">2D</button>\n                        <button type=\"button\" class=\"seg-btn\" [class.active]=\"Config.Dimensions === 3\" (click)=\"SetDimensions(3)\">3D</button>\n                    </div>\n                </div>\n            }\n            <div class=\"form-group\">\n                <label>Color by</label>\n                <div class=\"seg-toggle\" role=\"group\">\n                    <button type=\"button\" class=\"seg-btn\" [class.active]=\"(Config.ColorBy ?? 'cluster') === 'cluster'\" (click)=\"SetColorBy('cluster')\">Cluster</button>\n                    <button type=\"button\" class=\"seg-btn\" [class.active]=\"Config.ColorBy === 'entity'\" (click)=\"SetColorBy('entity')\">Entity</button>\n                </div>\n            </div>\n        </div>\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 + Save action row -->\n        <div class=\"action-row\">\n            <button class=\"run-btn\"\n                    [disabled]=\"!CanRun\"\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            @if (CanSave) {\n                <button class=\"save-btn\" (click)=\"OnSave()\" title=\"Save this visualization\">\n                    <i class=\"fa-solid fa-bookmark\"></i> Save\n                </button>\n            }\n        </div>\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    }\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.action-row {\n    display: flex;\n    gap: 8px;\n    margin-top: 4px;\n}\n\n.run-btn {\n    flex: 1;\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}\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.save-btn {\n    flex: 0 0 auto;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.82rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n\n.save-btn:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Segmented toggles (Projection 2D/3D, Color-by) */\n.toggle-row .form-group { min-width: 0; }\n\n.seg-toggle {\n    display: inline-flex;\n    gap: 2px;\n    padding: 3px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    width: 100%;\n}\n\n.seg-btn {\n    flex: 1;\n    padding: 5px 8px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.75rem;\n    font-weight: 600;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s, color 0.15s;\n}\n\n.seg-btn:hover { color: var(--mj-text-primary); }\n\n.seg-btn.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 2px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n/* Multi-entity source selector */\n.multi-source-toggle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 10px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.78rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.multi-source-toggle:hover { color: var(--mj-text-primary); }\n\n.multi-source-badge {\n    margin-left: auto;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-radius: 10px;\n    padding: 1px 8px;\n    font-size: 0.7rem;\n}\n\n.multi-source-list {\n    margin-top: 6px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 8px;\n    max-height: 180px;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n}\n\n.multi-source-hint {\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\n    margin-bottom: 6px;\n    line-height: 1.3;\n}\n\n.multi-source-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 5px 4px;\n    cursor: pointer;\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n}\n\n.multi-source-item:hover { background: var(--mj-bg-surface-hover); border-radius: 6px; }\n\n.multi-source-entity {\n    margin-left: auto;\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\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\n"] }]
     }], null, { IsRunning: [{
             type: Input
         }], Metrics: [{
@@ -700,6 +891,12 @@ export class ClusterConfigPanelComponent {
             type: Input
         }], EntityDocOptions: [{
             type: Input
+        }], AllEntityDocOptions: [{
+            type: Input
+        }], ShowDimensionToggle: [{
+            type: Input
+        }], ShowMultiEntity: [{
+            type: Input
         }], ShowSaveButton: [{
             type: Input
         }], ShowAlgorithmPicker: [{
@@ -724,6 +921,8 @@ export class ClusterConfigPanelComponent {
             type: Output
         }], AlgorithmChanged: [{
             type: Output
+        }], DimensionsChanged: [{
+            type: Output
         }], panelRef: [{
             type: ViewChild,
             args: ['panelElement', { static: false }]