@memberjunction/ng-clustering 5.23.0 → 5.24.0

package/dist/lib/cluster-scatter.component.js

@@ -30,8 +30,9 @@
 import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectorRef, ViewChild, ViewEncapsulation, inject, } from '@angular/core';
 import { CLUSTER_COLORS, } from './clustering.types';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-entity-card";
 const _c0 = ["svgElement"];
-const _forTrack0 = ($index, $item) => $item.Key;
 function ClusterScatterComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "div", 8);
     i0.ɵɵelement(2, "i", 9);
@@ -170,7 +171,7 @@ function ClusterScatterComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("no-transitions", !ctx_r1.AnimateTransitions);
-    i0.ɵɵattribute("viewBox", ctx_r1.GetViewBoxString());
+    i0.ɵɵattribute("viewBox", ctx_r1.ViewBoxString);
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.ClusterCentroids);
     i0.ɵɵadvance(3);
@@ -188,24 +189,47 @@ function ClusterScatterComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.HighlightedKey ? 18 : -1);
 } }
+function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 28);
+    i0.ɵɵtwoWayListener("ngModelChange", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.EditingLabelDraft, $event) || (ctx_r1.EditingLabelDraft = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r14); const cluster_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnLabelEditKeydown($event, cluster_r13)); })("blur", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r14); const cluster_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CommitLabelEdit(cluster_r13)); })("click", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditingLabelDraft);
+} }
+function ClusterScatterComponent_Conditional_4_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 30);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_4_For_4_Conditional_3_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r15); const cluster_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StartLabelEdit(cluster_r13, $event)); });
+    i0.ɵɵelement(3, "i", 31);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cluster_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(cluster_r13.Label);
+} }
 function ClusterScatterComponent_Conditional_4_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 24);
     i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_4_For_4_Template_div_click_0_listener() { const cluster_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnClusterLegendClick(cluster_r13)); });
     i0.ɵɵelement(1, "div", 25);
-    i0.ɵɵelementStart(2, "span", 26);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template, 1, 1, "input", 26)(3, ClusterScatterComponent_Conditional_4_For_4_Conditional_3_Template, 4, 1);
     i0.ɵɵelementStart(4, "span", 27);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const cluster_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("background", cluster_r13.Color);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(cluster_r13.Label);
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditingClusterId === cluster_r13.Id ? 2 : 3);
+    i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(cluster_r13.MemberCount);
 } }
 function ClusterScatterComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
@@ -219,81 +243,27 @@ function ClusterScatterComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.Clusters);
 } }
-function ClusterScatterComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.HoveredPoint.Metadata["EntityIcon"]);
-} }
-function ClusterScatterComponent_Conditional_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.HoveredPoint.Metadata["Entity"]);
-} }
-function ClusterScatterComponent_Conditional_5_Conditional_10_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const entry_r14 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(entry_r14.Value);
-} }
-function ClusterScatterComponent_Conditional_5_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_5_Conditional_10_For_2_Conditional_0_Template, 2, 1, "div", 39);
-} if (rf & 2) {
-    const entry_r14 = ctx.$implicit;
-    i0.ɵɵconditional(entry_r14.Key !== "Entity" && entry_r14.Key !== "EntityIcon" && entry_r14.Key !== "RecordID" && entry_r14.Key !== "Name" && entry_r14.Key !== "TemplateID" && entry_r14.Key !== "__mj_UpdatedAt" ? 0 : -1);
-} }
-function ClusterScatterComponent_Conditional_5_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵrepeaterCreate(1, ClusterScatterComponent_Conditional_5_Conditional_10_For_2_Template, 1, 1, null, null, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.TooltipEntries);
-} }
 function ClusterScatterComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
-    i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_5_Conditional_2_Template, 2, 2, "div", 30);
-    i0.ɵɵelementStart(3, "div", 31)(4, "div", 32);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ClusterScatterComponent_Conditional_5_Conditional_6_Template, 2, 1, "div", 33);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 34);
-    i0.ɵɵelement(8, "i", 35);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "mj-entity-card", 33);
+    i0.ɵɵelementStart(2, "div", 34);
+    i0.ɵɵelement(3, "i", 35);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, ClusterScatterComponent_Conditional_5_Conditional_10_Template, 3, 0, "div", 36);
-    i0.ɵɵelementStart(11, "div", 37);
-    i0.ɵɵelement(12, "i", 38);
-    i0.ɵɵtext(13, " Click to view details ");
+    i0.ɵɵelementStart(5, "div", 36);
+    i0.ɵɵelement(6, "i", 37);
+    i0.ɵɵtext(7, " Click to view details ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r1.TooltipX, "px")("top", ctx_r1.TooltipY, "px");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional((ctx_r1.HoveredPoint.Metadata == null ? null : ctx_r1.HoveredPoint.Metadata["EntityIcon"]) ? 2 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.HoveredPoint.Label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r1.HoveredPoint.Metadata == null ? null : ctx_r1.HoveredPoint.Metadata["Entity"]) ? 6 : -1);
+    i0.ɵɵproperty("EntityName", ctx_r1.EntityName)("Record", ctx_r1.HoveredPoint.Metadata);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.GetClusterLabel(ctx_r1.HoveredPoint), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.TooltipEntries.length > 0 ? 10 : -1);
 } }
 function ClusterScatterComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelementStart(0, "div", 40);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -302,7 +272,7 @@ function ClusterScatterComponent_Conditional_7_Conditional_2_Template(rf, ctx) {
     i0.ɵɵclassMap(ctx_r1.SelectedPoint.Metadata["EntityIcon"]);
 } }
 function ClusterScatterComponent_Conditional_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵelementStart(0, "span", 43);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -310,41 +280,18 @@ function ClusterScatterComponent_Conditional_7_Conditional_6_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.SelectedPoint.Metadata["Entity"]);
 } }
-function ClusterScatterComponent_Conditional_7_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 60);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const entry_r16 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(entry_r16.Key);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(entry_r16.Value);
-} }
-function ClusterScatterComponent_Conditional_7_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵrepeaterCreate(1, ClusterScatterComponent_Conditional_7_Conditional_12_For_2_Template, 5, 2, "div", 58, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.DetailEntries);
-} }
 function ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 65);
+    i0.ɵɵelement(0, "i", 60);
 } if (rf & 2) {
     const member_r18 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵclassMap(member_r18.Metadata["EntityIcon"]);
 } }
 function ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵelementStart(0, "div", 57);
     i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template_div_click_0_listener() { const member_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnClusterMemberClick(member_r18)); });
-    i0.ɵɵconditionalCreate(1, ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Conditional_1_Template, 1, 2, "i", 63);
-    i0.ɵɵelementStart(2, "span", 64);
+    i0.ɵɵconditionalCreate(1, ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Conditional_1_Template, 1, 2, "i", 58);
+    i0.ɵɵelementStart(2, "span", 59);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -357,8 +304,8 @@ function ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template(rf,
     i0.ɵɵtextInterpolate(member_r18.Label);
 } }
 function ClusterScatterComponent_Conditional_7_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55);
-    i0.ɵɵrepeaterCreate(1, ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template, 4, 4, "div", 61, i0.ɵɵcomponentInstance().TrackMemberBy, true);
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵrepeaterCreate(1, ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template, 4, 4, "div", 56, i0.ɵɵcomponentInstance().TrackMemberBy, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -366,37 +313,37 @@ function ClusterScatterComponent_Conditional_7_Conditional_20_Template(rf, ctx)
     i0.ɵɵrepeater(ctx_r1.ClusterMembers);
 } }
 function ClusterScatterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40)(1, "div", 41);
-    i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_7_Conditional_2_Template, 2, 2, "div", 42);
-    i0.ɵɵelementStart(3, "div", 43)(4, "div", 44);
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38)(1, "div", 39);
+    i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_7_Conditional_2_Template, 2, 2, "div", 40);
+    i0.ɵɵelementStart(3, "div", 41)(4, "div", 42);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ClusterScatterComponent_Conditional_7_Conditional_6_Template, 2, 1, "span", 45);
+    i0.ɵɵconditionalCreate(6, ClusterScatterComponent_Conditional_7_Conditional_6_Template, 2, 1, "span", 43);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "button", 46);
-    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDetailPanel()); });
-    i0.ɵɵelement(8, "i", 47);
+    i0.ɵɵelementStart(7, "button", 44);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDetailPanel()); });
+    i0.ɵɵelement(8, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 48);
-    i0.ɵɵelement(10, "span", 49);
+    i0.ɵɵelementStart(9, "div", 46);
+    i0.ɵɵelement(10, "span", 47);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, ClusterScatterComponent_Conditional_7_Conditional_12_Template, 3, 0, "div", 50);
-    i0.ɵɵelementStart(13, "div", 51)(14, "button", 52);
-    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_7_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleClusterMembers()); });
-    i0.ɵɵelement(15, "i", 53);
+    i0.ɵɵelement(12, "mj-entity-card", 48);
+    i0.ɵɵelementStart(13, "div", 49)(14, "button", 50);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_7_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleClusterMembers()); });
+    i0.ɵɵelement(15, "i", 51);
     i0.ɵɵelementStart(16, "span");
     i0.ɵɵtext(17, "Cluster Members");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 54);
+    i0.ɵɵelementStart(18, "span", 52);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(20, ClusterScatterComponent_Conditional_7_Conditional_20_Template, 3, 0, "div", 55);
+    i0.ɵɵconditionalCreate(20, ClusterScatterComponent_Conditional_7_Conditional_20_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 56)(22, "button", 57);
-    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_7_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenRecordClick()); });
-    i0.ɵɵelement(23, "i", 38);
+    i0.ɵɵelementStart(21, "div", 54)(22, "button", 55);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_7_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenRecordClick()); });
+    i0.ɵɵelement(23, "i", 37);
     i0.ɵɵtext(24, " Open Record ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -412,7 +359,7 @@ function ClusterScatterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.GetClusterLabel(ctx_r1.SelectedPoint), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.DetailEntries.length > 0 ? 12 : -1);
+    i0.ɵɵproperty("EntityName", ctx_r1.EntityName)("Record", ctx_r1.SelectedPoint.Metadata);
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("fa-chevron-down", ctx_r1.ClusterMembersExpanded)("fa-chevron-right", !ctx_r1.ClusterMembersExpanded);
     i0.ɵɵadvance(4);
@@ -494,6 +441,32 @@ export class ClusterScatterComponent {
          * ```
          */
         this.TooltipFields = [];
+        /**
+         * Ordered list of metadata field keys for prioritized display in tooltips
+         * and the detail panel. When set, fields are displayed in this order instead
+         * of raw metadata key order. Fields not in this list appear after the
+         * prioritized fields.
+         *
+         * Typically computed from entity metadata (DefaultInView, Sequence) by the
+         * consuming component and passed in.
+         *
+         * @default [] (no prioritization — original key order)
+         */
+        this.FieldPriority = [];
+        /**
+         * Map of field names to human-readable display names.
+         * Used to show "First Name" instead of "FirstName" in tooltips and detail panels.
+         * If a field is not in this map, the raw key is shown.
+         *
+         * @default {} (use raw key names)
+         */
+        this.FieldDisplayNames = {};
+        /**
+         * The entity name for metadata-driven field display in tooltips and
+         * detail panels. When set, the mj-entity-card component uses EntityInfo
+         * to prioritize fields by IsNameField and DefaultInView.
+         */
+        this.EntityName = null;
         /**
          * Override the default cluster color palette.
          *
@@ -626,11 +599,25 @@ export class ClusterScatterComponent {
          * Fires after every zoom or pan that changes the visible viewport.
          */
         this.ViewportChanged = new EventEmitter();
+        /**
+         * Fires when the user edits a cluster label inline.
+         * Payload: `{ ClusterId, OldLabel, NewLabel }`.
+         */
+        this.LabelEdited = new EventEmitter();
+        // ================================================================
+        // Label Editing State
+        // ================================================================
+        /** The cluster ID currently being edited, or null if none. */
+        this.EditingClusterId = null;
+        /** The draft label text during editing. */
+        this.EditingLabelDraft = '';
         // ================================================================
         // Internal State
         // ================================================================
         /** SVG viewBox parameters: [minX, minY, width, height]. */
-        this.ViewBox = [0, 0, 1000, 700];
+        this._viewBox = [0, 0, 1000, 700];
+        /** Cached viewBox string for template binding (avoids NG0100 on recalc). */
+        this.ViewBoxString = '0 0 1000 700';
         /** Currently hovered point (null when idle). */
         this.HoveredPoint = null;
         /** Screen-space tooltip X position. */
@@ -671,6 +658,45 @@ export class ClusterScatterComponent {
         this.defaultWidth = 1000;
         this.defaultHeight = 700;
     }
+    /** Start inline editing for a cluster label. */
+    StartLabelEdit(cluster, event) {
+        event.stopPropagation();
+        this.EditingClusterId = cluster.Id;
+        this.EditingLabelDraft = cluster.Label;
+        this.cdr.detectChanges();
+    }
+    /** Commit the edited label. */
+    CommitLabelEdit(cluster) {
+        const oldLabel = cluster.Label;
+        const newLabel = this.EditingLabelDraft.trim();
+        if (newLabel.length > 0 && newLabel !== oldLabel) {
+            cluster.Label = newLabel;
+            this.LabelEdited.emit({ ClusterId: cluster.Id, OldLabel: oldLabel, NewLabel: newLabel });
+        }
+        this.EditingClusterId = null;
+        this.cdr.detectChanges();
+    }
+    /** Cancel editing. */
+    CancelLabelEdit() {
+        this.EditingClusterId = null;
+        this.cdr.detectChanges();
+    }
+    /** Handle keydown in the edit input. */
+    OnLabelEditKeydown(event, cluster) {
+        if (event.key === 'Enter') {
+            this.CommitLabelEdit(cluster);
+        }
+        else if (event.key === 'Escape') {
+            this.CancelLabelEdit();
+        }
+    }
+    get ViewBox() {
+        return this._viewBox;
+    }
+    set ViewBox(value) {
+        this._viewBox = value;
+        this.ViewBoxString = value.join(' ');
+    }
     /** Get the current viewport transform for saving/restoring. */
     GetViewportTransform() {
         return {
@@ -1157,13 +1183,15 @@ export class ClusterScatterComponent {
     }
     /**
      * Compute the metadata entries for the detail panel, excluding internal fields.
+     * Uses FieldPriority for ordering when available.
      */
     computeDetailEntries(point) {
         const hidden = this.internalMetadataKeys;
-        this.DetailEntries = Object.entries(point.Metadata)
+        const raw = Object.entries(point.Metadata)
             .filter(([key]) => !hidden.has(key))
             .filter(([, value]) => value != null && String(value).trim() !== '')
             .map(([Key, Value]) => ({ Key, Value }));
+        this.DetailEntries = this.sortEntriesByPriority(raw);
     }
     /**
      * Compute the list of cluster members for the selected point's cluster.
@@ -1249,17 +1277,34 @@ export class ClusterScatterComponent {
     }
     /**
      * Compute the tooltip entries based on TooltipFields filter.
+     * Uses FieldPriority for ordering when available.
      */
     computeTooltipEntries(point) {
         const entries = Object.entries(point.Metadata);
+        let mapped;
         if (this.TooltipFields.length > 0) {
-            this.TooltipEntries = entries
+            mapped = entries
                 .filter(([key]) => this.TooltipFields.includes(key))
                 .map(([Key, Value]) => ({ Key, Value }));
         }
         else {
-            this.TooltipEntries = entries.map(([Key, Value]) => ({ Key, Value }));
+            mapped = entries.map(([Key, Value]) => ({ Key, Value }));
         }
+        this.TooltipEntries = this.sortEntriesByPriority(mapped);
+    }
+    /**
+     * Sort entries using the FieldPriority ordering.
+     * Fields in FieldPriority come first (in priority order), then remaining fields.
+     */
+    sortEntriesByPriority(entries) {
+        if (this.FieldPriority.length === 0)
+            return entries;
+        const priorityIndex = new Map(this.FieldPriority.map((key, idx) => [key, idx]));
+        return [...entries].sort((a, b) => {
+            const aIdx = priorityIndex.get(a.Key) ?? 99999;
+            const bIdx = priorityIndex.get(b.Key) ?? 99999;
+            return aIdx - bIdx;
+        });
     }
     static { this.ɵfac = function ClusterScatterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ClusterScatterComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ClusterScatterComponent, selectors: [["mj-cluster-scatter"]], viewQuery: function ClusterScatterComponent_Query(rf, ctx) { if (rf & 1) {
@@ -1267,15 +1312,15 @@ export class ClusterScatterComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgRef = _t.first);
-        } }, inputs: { Points: "Points", Clusters: "Clusters", IsLoading: "IsLoading", DotRadius: "DotRadius", DotOpacity: "DotOpacity", HighlightRadius: "HighlightRadius", ShowLegend: "ShowLegend", ShowTooltip: "ShowTooltip", TooltipFields: "TooltipFields", ColorPalette: "ColorPalette", EnableZoom: "EnableZoom", EnablePan: "EnablePan", AnimateTransitions: "AnimateTransitions", SelectedPointIds: "SelectedPointIds", MinZoom: "MinZoom", MaxZoom: "MaxZoom" }, outputs: { PointClicked: "PointClicked", OpenRecordRequested: "OpenRecordRequested", PointHovered: "PointHovered", BeforePointClick: "BeforePointClick", BeforePointHover: "BeforePointHover", BeforeZoom: "BeforeZoom", AfterClusteringComplete: "AfterClusteringComplete", ClusterSelected: "ClusterSelected", SelectionChanged: "SelectionChanged", ViewportChanged: "ViewportChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 8, consts: [["svgElement", ""], [1, "scatter-container"], [1, "loading-overlay"], [1, "empty-state"], ["preserveAspectRatio", "xMidYMid meet", 1, "scatter-svg", 3, "no-transitions"], [1, "legend"], [1, "tooltip", 3, "left", "top"], [1, "detail-panel"], [1, "loading-spinner"], [1, "fa-solid", "fa-circle-nodes", "fa-spin"], [1, "fa-solid", "fa-chart-scatter"], [1, "empty-hint"], ["preserveAspectRatio", "xMidYMid meet", 1, "scatter-svg", 3, "wheel", "mousedown"], ["cx", "50%", "cy", "50%", "r", "50%"], [1, "grid-lines"], [1, "data-point"], ["offset", "0%", "stop-opacity", "0.12"], ["offset", "100%", "stop-opacity", "0"], ["text-anchor", "middle", 1, "cluster-label"], [1, "data-point", 3, "mouseenter", "mouseleave", "click"], ["fill", "none", "stroke-width", "2", "opacity", "0.8", 1, "selection-ring"], ["fill", "none", "stroke-width", "2.5", "opacity", "0.9"], [1, "legend-title"], [1, "legend-item"], [1, "legend-item", 3, "click"], [1, "legend-dot"], [1, "legend-label"], [1, "legend-count"], [1, "tooltip"], [1, "tt-header"], [1, "tt-icon"], [1, "tt-header-text"], [1, "tt-name"], [1, "tt-entity"], [1, "tt-cluster"], [1, "fa-solid", "fa-circle", 2, "font-size", "7px", "vertical-align", "middle"], [1, "tt-fields"], [1, "tt-action"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "tt-field-row"], [1, "detail-header"], [1, "detail-header-content"], [1, "detail-icon"], [1, "detail-header-text"], [1, "detail-name"], [1, "detail-entity-badge"], ["title", "Close", 1, "detail-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-cluster"], [1, "detail-cluster-dot"], [1, "detail-fields"], [1, "detail-members-section"], [1, "detail-members-toggle", 3, "click"], [1, "fa-solid"], [1, "detail-members-count"], [1, "detail-members-list"], [1, "detail-footer"], [1, "detail-open-btn", 3, "click"], [1, "detail-field"], [1, "detail-field-key"], [1, "detail-field-value"], [1, "detail-member-row", 3, "active"], [1, "detail-member-row", 3, "click"], [1, "member-icon", 3, "class"], [1, "member-label"], [1, "member-icon"]], template: function ClusterScatterComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Points: "Points", Clusters: "Clusters", IsLoading: "IsLoading", DotRadius: "DotRadius", DotOpacity: "DotOpacity", HighlightRadius: "HighlightRadius", ShowLegend: "ShowLegend", ShowTooltip: "ShowTooltip", TooltipFields: "TooltipFields", FieldPriority: "FieldPriority", FieldDisplayNames: "FieldDisplayNames", EntityName: "EntityName", ColorPalette: "ColorPalette", EnableZoom: "EnableZoom", EnablePan: "EnablePan", AnimateTransitions: "AnimateTransitions", SelectedPointIds: "SelectedPointIds", MinZoom: "MinZoom", MaxZoom: "MaxZoom" }, outputs: { PointClicked: "PointClicked", OpenRecordRequested: "OpenRecordRequested", PointHovered: "PointHovered", BeforePointClick: "BeforePointClick", BeforePointHover: "BeforePointHover", BeforeZoom: "BeforeZoom", AfterClusteringComplete: "AfterClusteringComplete", ClusterSelected: "ClusterSelected", SelectionChanged: "SelectionChanged", ViewportChanged: "ViewportChanged", LabelEdited: "LabelEdited" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 8, consts: [["svgElement", ""], [1, "scatter-container"], [1, "loading-overlay"], [1, "empty-state"], ["preserveAspectRatio", "xMidYMid meet", 1, "scatter-svg", 3, "no-transitions"], [1, "legend"], [1, "tooltip", 3, "left", "top"], [1, "detail-panel"], [1, "loading-spinner"], [1, "fa-solid", "fa-circle-nodes", "fa-spin"], [1, "fa-solid", "fa-chart-scatter"], [1, "empty-hint"], ["preserveAspectRatio", "xMidYMid meet", 1, "scatter-svg", 3, "wheel", "mousedown"], ["cx", "50%", "cy", "50%", "r", "50%"], [1, "grid-lines"], [1, "data-point"], ["offset", "0%", "stop-opacity", "0.12"], ["offset", "100%", "stop-opacity", "0"], ["text-anchor", "middle", 1, "cluster-label"], [1, "data-point", 3, "mouseenter", "mouseleave", "click"], ["fill", "none", "stroke-width", "2", "opacity", "0.8", 1, "selection-ring"], ["fill", "none", "stroke-width", "2.5", "opacity", "0.9"], [1, "legend-title"], [1, "legend-item"], [1, "legend-item", 3, "click"], [1, "legend-dot"], ["autofocus", "", 1, "legend-label-input", 3, "ngModel"], [1, "legend-count"], ["autofocus", "", 1, "legend-label-input", 3, "ngModelChange", "keydown", "blur", "click", "ngModel"], [1, "legend-label"], ["title", "Edit label", 1, "legend-edit-btn", 3, "click"], [1, "fa-solid", "fa-pencil"], [1, "tooltip"], ["Variant", "compact", 3, "EntityName", "Record"], [1, "tt-cluster"], [1, "fa-solid", "fa-circle", 2, "font-size", "7px", "vertical-align", "middle"], [1, "tt-action"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "detail-header"], [1, "detail-header-content"], [1, "detail-icon"], [1, "detail-header-text"], [1, "detail-name"], [1, "detail-entity-badge"], ["title", "Close", 1, "detail-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-cluster"], [1, "detail-cluster-dot"], ["Variant", "detail", "CssClass", "detail-entity-card", 3, "EntityName", "Record"], [1, "detail-members-section"], [1, "detail-members-toggle", 3, "click"], [1, "fa-solid"], [1, "detail-members-count"], [1, "detail-members-list"], [1, "detail-footer"], [1, "detail-open-btn", 3, "click"], [1, "detail-member-row", 3, "active"], [1, "detail-member-row", 3, "click"], [1, "member-icon", 3, "class"], [1, "member-label"], [1, "member-icon"]], template: function ClusterScatterComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵconditionalCreate(1, ClusterScatterComponent_Conditional_1_Template, 5, 0, "div", 2);
             i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_2_Template, 6, 0, "div", 3);
             i0.ɵɵconditionalCreate(3, ClusterScatterComponent_Conditional_3_Template, 19, 4, ":svg:svg", 4);
             i0.ɵɵconditionalCreate(4, ClusterScatterComponent_Conditional_4_Template, 5, 0, "div", 5);
-            i0.ɵɵconditionalCreate(5, ClusterScatterComponent_Conditional_5_Template, 14, 9, "div", 6);
+            i0.ɵɵconditionalCreate(5, ClusterScatterComponent_Conditional_5_Template, 8, 7, "div", 6);
             i0.ɵɵelementStart(6, "div", 7);
-            i0.ɵɵconditionalCreate(7, ClusterScatterComponent_Conditional_7_Template, 25, 13);
+            i0.ɵɵconditionalCreate(7, ClusterScatterComponent_Conditional_7_Template, 25, 14);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -1292,11 +1337,11 @@ export class ClusterScatterComponent {
             i0.ɵɵclassProp("detail-panel-open", ctx.ShowDetailPanel && ctx.SelectedPoint);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.SelectedPoint ? 7 : -1);
-        } }, styles: [":host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.scatter-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background: var(--mj-bg-page);\n}\n\n/* SVG */\n.scatter-svg {\n    width: 100%;\n    height: 100%;\n    cursor: grab;\n    user-select: none;\n}\n\n.scatter-svg:active {\n    cursor: grabbing;\n}\n\n/* Grid lines */\n.grid-lines line {\n    stroke: var(--mj-border-subtle);\n    stroke-width: 0.5;\n}\n\n/* Data points */\n.data-point {\n    cursor: pointer;\n    transition: opacity 0.15s ease, r 0.15s ease;\n}\n\n.data-point:hover {\n    filter: brightness(1.2);\n}\n\n/* Selection rings */\n.selection-ring {\n    pointer-events: none;\n    transition: r 0.15s ease;\n}\n\n/* Disable transitions when AnimateTransitions is false */\n.no-transitions .data-point,\n.no-transitions .selection-ring {\n    transition: none;\n}\n\n/* Loading overlay */\n.loading-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-page) 80%, transparent);\n    z-index: 5;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9rem;\n}\n\n.loading-spinner i {\n    font-size: 2rem;\n    color: var(--mj-brand-primary);\n}\n\n/* Empty state */\n.empty-state {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    gap: 8px;\n}\n\n.empty-state i {\n    font-size: 3rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.empty-state p {\n    font-size: 1rem;\n    margin: 0;\n}\n\n.empty-hint {\n    font-size: 0.8rem !important;\n    opacity: 0.7;\n}\n\n/* Legend */\n.legend {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(12px);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 14px 18px;\n    z-index: 3;\n}\n\n.legend-title {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.78rem;\n    margin-bottom: 4px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    border-radius: 4px;\n    padding: 2px 4px;\n    margin-left: -4px;\n    margin-right: -4px;\n    transition: background 0.15s ease;\n}\n\n.legend-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.legend-label {\n    flex: 1;\n}\n\n.legend-count {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n    margin-left: auto;\n    padding-left: 16px;\n}\n\n/* Cluster labels on chart */\n.cluster-label {\n    font-size: 14px;\n    font-weight: 600;\n    opacity: 0.85;\n    pointer-events: none;\n    text-shadow:\n        0 0 6px var(--mj-bg-page),\n        0 0 12px var(--mj-bg-page),\n        1px 1px 2px var(--mj-bg-page);\n}\n\n/* Tooltip */\n.tooltip {\n    position: fixed;\n    background: color-mix(in srgb, var(--mj-bg-surface-elevated) 96%, transparent);\n    backdrop-filter: blur(16px);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 10px;\n    padding: 14px 16px;\n    width: 280px;\n    box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-bg-page) 40%, transparent);\n    pointer-events: none;\n    z-index: 50;\n}\n\n.tt-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.tt-icon {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n}\n\n.tt-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.tt-name {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-entity {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    margin-top: 1px;\n}\n\n.tt-cluster {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    margin-bottom: 6px;\n}\n\n.tt-fields {\n    font-size: 0.72rem;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n}\n\n.tt-field-row {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-action {\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-border-default);\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n}\n\n.tt-action i {\n    margin-right: 4px;\n}\n\n/* ================================================================\n   Detail Panel (right slide-in)\n   ================================================================ */\n\n.detail-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(16px);\n    border-left: 1px solid var(--mj-border-default);\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: -4px 0 24px color-mix(in srgb, var(--mj-bg-page) 30%, transparent);\n    overflow: hidden;\n}\n\n.detail-panel-open {\n    transform: translateX(0);\n}\n\n/* Header */\n.detail-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 16px 16px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-header-content {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-icon {\n    width: 2.25rem;\n    height: 2.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.95rem;\n    flex-shrink: 0;\n}\n\n.detail-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-name {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.detail-entity-badge {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 0.68rem;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.detail-close {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n    padding: 4px 6px;\n    border-radius: 4px;\n    transition: color 0.15s ease, background 0.15s ease;\n    flex-shrink: 0;\n}\n\n.detail-close:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n/* Cluster badge */\n.detail-cluster {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    font-size: 0.78rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.detail-cluster-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n/* Metadata fields */\n.detail-fields {\n    padding: 4px 16px 8px;\n    overflow-y: auto;\n    flex-shrink: 0;\n}\n\n.detail-field {\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-field:last-child {\n    border-bottom: none;\n}\n\n.detail-field-key {\n    font-size: 0.68rem;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-bottom: 2px;\n}\n\n.detail-field-value {\n    font-size: 0.8rem;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n    word-wrap: break-word;\n}\n\n/* Cluster Members Section */\n.detail-members-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-members-toggle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 16px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 0.78rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    transition: background 0.15s ease;\n}\n\n.detail-members-toggle:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-members-toggle i {\n    font-size: 0.65rem;\n    width: 12px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n.detail-members-count {\n    margin-left: auto;\n    font-size: 0.7rem;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 7px;\n    border-radius: 8px;\n}\n\n.detail-members-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 8px 8px;\n}\n\n.detail-member-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n    transition: background 0.12s ease;\n}\n\n.detail-member-row:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-member-row.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.detail-member-row .member-icon {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n    flex-shrink: 0;\n}\n\n.detail-member-row.active .member-icon {\n    color: var(--mj-brand-primary);\n}\n\n.member-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* Footer */\n.detail-footer {\n    padding: 12px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.detail-open-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 16px;\n    border: none;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.82rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.detail-open-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.detail-open-btn i {\n    font-size: 0.75rem;\n}\n"], encapsulation: 2 }); }
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEntityCardComponent], styles: [":host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.scatter-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background: var(--mj-bg-page);\n}\n\n/* SVG */\n.scatter-svg {\n    width: 100%;\n    height: 100%;\n    cursor: grab;\n    user-select: none;\n}\n\n.scatter-svg:active {\n    cursor: grabbing;\n}\n\n/* Grid lines */\n.grid-lines line {\n    stroke: var(--mj-border-subtle);\n    stroke-width: 0.5;\n}\n\n/* Data points */\n.data-point {\n    cursor: pointer;\n    transition: opacity 0.15s ease, r 0.15s ease;\n}\n\n.data-point:hover {\n    filter: brightness(1.2);\n}\n\n/* Selection rings */\n.selection-ring {\n    pointer-events: none;\n    transition: r 0.15s ease;\n}\n\n/* Disable transitions when AnimateTransitions is false */\n.no-transitions .data-point,\n.no-transitions .selection-ring {\n    transition: none;\n}\n\n/* Loading overlay */\n.loading-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-page) 80%, transparent);\n    z-index: 5;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9rem;\n}\n\n.loading-spinner i {\n    font-size: 2rem;\n    color: var(--mj-brand-primary);\n}\n\n/* Empty state */\n.empty-state {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    gap: 8px;\n}\n\n.empty-state i {\n    font-size: 3rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.empty-state p {\n    font-size: 1rem;\n    margin: 0;\n}\n\n.empty-hint {\n    font-size: 0.8rem !important;\n    opacity: 0.7;\n}\n\n/* Legend */\n.legend {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(12px);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 14px 18px;\n    z-index: 3;\n}\n\n.legend-title {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.78rem;\n    margin-bottom: 4px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    border-radius: 4px;\n    padding: 2px 4px;\n    margin-left: -4px;\n    margin-right: -4px;\n    transition: background 0.15s ease;\n}\n\n.legend-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.legend-label {\n    flex: 1;\n}\n\n.legend-edit-btn {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.6rem;\n    border-radius: 4px;\n    transition: color 0.15s ease;\n}\n\n.legend-item:hover .legend-edit-btn {\n    display: inline-flex;\n}\n\n.legend-edit-btn:hover {\n    color: var(--mj-brand-primary);\n}\n\n.legend-label-input {\n    flex: 1;\n    padding: 2px 4px;\n    border: 1px solid var(--mj-border-focus);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 0.75rem;\n    outline: none;\n    min-width: 60px;\n}\n\n.legend-count {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n    margin-left: auto;\n    padding-left: 16px;\n}\n\n/* Cluster labels on chart */\n.cluster-label {\n    font-size: 14px;\n    font-weight: 600;\n    opacity: 0.85;\n    pointer-events: none;\n    text-shadow:\n        0 0 6px var(--mj-bg-page),\n        0 0 12px var(--mj-bg-page),\n        1px 1px 2px var(--mj-bg-page);\n}\n\n/* Tooltip */\n.tooltip {\n    position: fixed;\n    background: color-mix(in srgb, var(--mj-bg-surface-elevated) 96%, transparent);\n    backdrop-filter: blur(16px);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 10px;\n    padding: 14px 16px;\n    width: 280px;\n    box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-bg-page) 40%, transparent);\n    pointer-events: none;\n    z-index: 50;\n}\n\n.tt-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.tt-icon {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n}\n\n.tt-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.tt-name {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-entity {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    margin-top: 1px;\n}\n\n.tt-cluster {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    margin-bottom: 6px;\n}\n\n.tt-fields {\n    font-size: 0.72rem;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n}\n\n.tt-field-row {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-action {\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-border-default);\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n}\n\n.tt-action i {\n    margin-right: 4px;\n}\n\n/* ================================================================\n   Detail Panel (right slide-in)\n   ================================================================ */\n\n.detail-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(16px);\n    border-left: 1px solid var(--mj-border-default);\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: -4px 0 24px color-mix(in srgb, var(--mj-bg-page) 30%, transparent);\n    overflow: hidden;\n}\n\n.detail-panel-open {\n    transform: translateX(0);\n}\n\n/* Header */\n.detail-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 16px 16px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-header-content {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-icon {\n    width: 2.25rem;\n    height: 2.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.95rem;\n    flex-shrink: 0;\n}\n\n.detail-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-name {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.detail-entity-badge {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 0.68rem;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.detail-close {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n    padding: 4px 6px;\n    border-radius: 4px;\n    transition: color 0.15s ease, background 0.15s ease;\n    flex-shrink: 0;\n}\n\n.detail-close:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n/* Cluster badge */\n.detail-cluster {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    font-size: 0.78rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.detail-cluster-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n/* Metadata fields */\n.detail-fields {\n    padding: 4px 16px 8px;\n    overflow-y: auto;\n    flex-shrink: 0;\n}\n\n.detail-field {\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-field:last-child {\n    border-bottom: none;\n}\n\n.detail-field-key {\n    font-size: 0.68rem;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-bottom: 2px;\n}\n\n.detail-field-value {\n    font-size: 0.8rem;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n    word-wrap: break-word;\n}\n\n/* Cluster Members Section */\n.detail-members-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-members-toggle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 16px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 0.78rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    transition: background 0.15s ease;\n}\n\n.detail-members-toggle:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-members-toggle i {\n    font-size: 0.65rem;\n    width: 12px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n.detail-members-count {\n    margin-left: auto;\n    font-size: 0.7rem;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 7px;\n    border-radius: 8px;\n}\n\n.detail-members-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 8px 8px;\n}\n\n.detail-member-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n    transition: background 0.12s ease;\n}\n\n.detail-member-row:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-member-row.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.detail-member-row .member-icon {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n    flex-shrink: 0;\n}\n\n.detail-member-row.active .member-icon {\n    color: var(--mj-brand-primary);\n}\n\n.member-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* Footer */\n.detail-footer {\n    padding: 12px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.detail-open-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 16px;\n    border: none;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.82rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.detail-open-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.detail-open-btn i {\n    font-size: 0.75rem;\n}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ClusterScatterComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-cluster-scatter', encapsulation: ViewEncapsulation.None, template: "<div class=\"scatter-container\">\n    <!-- Loading overlay -->\n    @if (IsLoading) {\n        <div class=\"loading-overlay\">\n            <div class=\"loading-spinner\">\n                <i class=\"fa-solid fa-circle-nodes fa-spin\"></i>\n                <span>Computing clusters...</span>\n            </div>\n        </div>\n    }\n\n    <!-- Empty state -->\n    @if (!IsLoading && Points.length === 0) {\n        <div class=\"empty-state\">\n            <i class=\"fa-solid fa-chart-scatter\"></i>\n            <p>No data to display</p>\n            <p class=\"empty-hint\">Configure and run clustering to see results</p>\n        </div>\n    }\n\n    <!-- SVG scatter plot -->\n    @if (Points.length > 0) {\n        <svg #svgElement\n             class=\"scatter-svg\"\n             [class.no-transitions]=\"!AnimateTransitions\"\n             [attr.viewBox]=\"GetViewBoxString()\"\n             preserveAspectRatio=\"xMidYMid meet\"\n             (wheel)=\"OnWheel($event)\"\n             (mousedown)=\"OnMouseDown($event)\">\n\n            <!-- Gradient definitions for cluster glow -->\n            <defs>\n                @for (centroid of ClusterCentroids; track TrackCentroidBy($index, centroid)) {\n                    <radialGradient [attr.id]=\"'cluster-glow-' + centroid.ClusterId\"\n                                    cx=\"50%\" cy=\"50%\" r=\"50%\">\n                        <stop offset=\"0%\" [attr.stop-color]=\"centroid.Color\" stop-opacity=\"0.12\"/>\n                        <stop offset=\"100%\" [attr.stop-color]=\"centroid.Color\" stop-opacity=\"0\"/>\n                    </radialGradient>\n                }\n            </defs>\n\n            <!-- Background grid lines -->\n            <g class=\"grid-lines\">\n                @for (y of HorizontalGridLines; track y) {\n                    <line [attr.x1]=\"0\" [attr.y1]=\"y\" [attr.x2]=\"1000\" [attr.y2]=\"y\"/>\n                }\n                @for (x of VerticalGridLines; track x) {\n                    <line [attr.x1]=\"x\" [attr.y1]=\"0\" [attr.x2]=\"x\" [attr.y2]=\"700\"/>\n                }\n            </g>\n\n            <!-- Cluster glow circles -->\n            @for (centroid of ClusterCentroids; track TrackCentroidBy($index, centroid)) {\n                <circle [attr.cx]=\"centroid.Cx\"\n                        [attr.cy]=\"centroid.Cy\"\n                        [attr.r]=\"centroid.R\"\n                        [attr.fill]=\"'url(#cluster-glow-' + centroid.ClusterId + ')'\"/>\n            }\n\n            <!-- Cluster labels (positioned above centroids) -->\n            @for (centroid of ClusterCentroids; track TrackCentroidBy($index, centroid)) {\n                @if (GetClusterLabelById(centroid.ClusterId); as label) {\n                    <text class=\"cluster-label\"\n                          [attr.x]=\"centroid.Cx\"\n                          [attr.y]=\"centroid.Cy - centroid.R - 8\"\n                          text-anchor=\"middle\"\n                          [attr.fill]=\"centroid.Color\">{{ label }}</text>\n                }\n            }\n\n            <!-- Data points -->\n            @for (point of Points; track TrackPointBy($index, point)) {\n                <circle class=\"data-point\"\n                        [attr.cx]=\"point.X\"\n                        [attr.cy]=\"point.Y\"\n                        [attr.r]=\"GetPointRadius(point)\"\n                        [attr.fill]=\"GetPointColor(point)\"\n                        [attr.opacity]=\"GetPointOpacity(point)\"\n                        (mouseenter)=\"OnPointMouseEnter(point, $event)\"\n                        (mouseleave)=\"OnPointMouseLeave()\"\n                        (click)=\"OnPointClick(point); $event.stopPropagation()\"/>\n            }\n\n            <!-- Selection rings for selected points -->\n            @for (point of Points; track TrackPointBy($index, point)) {\n                @if (IsSelected(point)) {\n                    <circle class=\"selection-ring\"\n                            [attr.cx]=\"point.X\"\n                            [attr.cy]=\"point.Y\"\n                            [attr.r]=\"HighlightRadius + 2\"\n                            fill=\"none\"\n                            [attr.stroke]=\"GetPointColor(point)\"\n                            stroke-width=\"2\"\n                            opacity=\"0.8\"/>\n                }\n            }\n\n            <!-- Highlight ring for last-clicked point -->\n            @if (HighlightedKey) {\n                @for (point of Points; track TrackPointBy($index, point)) {\n                    @if (IsHighlighted(point)) {\n                        <circle [attr.cx]=\"point.X\"\n                                [attr.cy]=\"point.Y\"\n                                [attr.r]=\"HighlightRadius + 4\"\n                                fill=\"none\"\n                                [attr.stroke]=\"GetPointColor(point)\"\n                                stroke-width=\"2.5\"\n                                opacity=\"0.9\"/>\n                    }\n                }\n            }\n        </svg>\n    }\n\n    <!-- Legend overlay -->\n    @if (ShowLegend && Clusters.length > 0) {\n        <div class=\"legend\">\n            <div class=\"legend-title\">Clusters</div>\n            @for (cluster of Clusters; track TrackClusterBy($index, cluster)) {\n                <div class=\"legend-item\" (click)=\"OnClusterLegendClick(cluster)\">\n                    <div class=\"legend-dot\" [style.background]=\"cluster.Color\"></div>\n                    <span class=\"legend-label\">{{ cluster.Label }}</span>\n                    <span class=\"legend-count\">{{ cluster.MemberCount }}</span>\n                </div>\n            }\n        </div>\n    }\n\n    <!-- Tooltip -->\n    @if (ShowTooltip && HoveredPoint) {\n        <div class=\"tooltip\"\n             [style.left.px]=\"TooltipX\"\n             [style.top.px]=\"TooltipY\">\n            <div class=\"tt-header\">\n                @if (HoveredPoint.Metadata?.['EntityIcon']) {\n                    <div class=\"tt-icon\">\n                        <i [class]=\"HoveredPoint.Metadata['EntityIcon']\"></i>\n                    </div>\n                }\n                <div class=\"tt-header-text\">\n                    <div class=\"tt-name\">{{ HoveredPoint.Label }}</div>\n                    @if (HoveredPoint.Metadata?.['Entity']) {\n                        <div class=\"tt-entity\">{{ HoveredPoint.Metadata['Entity'] }}</div>\n                    }\n                </div>\n            </div>\n            <div class=\"tt-cluster\">\n                <i class=\"fa-solid fa-circle\" style=\"font-size: 7px; vertical-align: middle\"></i>\n                {{ GetClusterLabel(HoveredPoint) }}\n            </div>\n            @if (TooltipEntries.length > 0) {\n                <div class=\"tt-fields\">\n                    @for (entry of TooltipEntries; track entry.Key) {\n                        @if (entry.Key !== 'Entity' && entry.Key !== 'EntityIcon' && entry.Key !== 'RecordID' && entry.Key !== 'Name' && entry.Key !== 'TemplateID' && entry.Key !== '__mj_UpdatedAt') {\n                            <div class=\"tt-field-row\">{{ entry.Value }}</div>\n                        }\n                    }\n                </div>\n            }\n            <div class=\"tt-action\">\n                <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Click to view details\n            </div>\n        </div>\n    }\n\n    <!-- Detail Panel (slide-in from right) -->\n    <div class=\"detail-panel\" [class.detail-panel-open]=\"ShowDetailPanel && SelectedPoint\">\n        @if (SelectedPoint) {\n            <!-- Panel Header -->\n            <div class=\"detail-header\">\n                <div class=\"detail-header-content\">\n                    @if (SelectedPoint.Metadata?.['EntityIcon']) {\n                        <div class=\"detail-icon\">\n                            <i [class]=\"SelectedPoint.Metadata['EntityIcon']\"></i>\n                        </div>\n                    }\n                    <div class=\"detail-header-text\">\n                        <div class=\"detail-name\">{{ SelectedPoint.Label }}</div>\n                        @if (SelectedPoint.Metadata?.['Entity']) {\n                            <span class=\"detail-entity-badge\">{{ SelectedPoint.Metadata['Entity'] }}</span>\n                        }\n                    </div>\n                </div>\n                <button class=\"detail-close\" (click)=\"CloseDetailPanel()\" title=\"Close\">\n                    <i class=\"fa-solid fa-times\"></i>\n                </button>\n            </div>\n\n            <!-- Cluster badge -->\n            <div class=\"detail-cluster\">\n                <span class=\"detail-cluster-dot\"\n                      [style.background]=\"GetClusterColor(SelectedPoint.ClusterId)\"></span>\n                {{ GetClusterLabel(SelectedPoint) }}\n            </div>\n\n            <!-- Metadata fields -->\n            @if (DetailEntries.length > 0) {\n                <div class=\"detail-fields\">\n                    @for (entry of DetailEntries; track entry.Key) {\n                        <div class=\"detail-field\">\n                            <div class=\"detail-field-key\">{{ entry.Key }}</div>\n                            <div class=\"detail-field-value\">{{ entry.Value }}</div>\n                        </div>\n                    }\n                </div>\n            }\n\n            <!-- Cluster Members -->\n            <div class=\"detail-members-section\">\n                <button class=\"detail-members-toggle\" (click)=\"ToggleClusterMembers()\">\n                    <i class=\"fa-solid\"\n                       [class.fa-chevron-down]=\"ClusterMembersExpanded\"\n                       [class.fa-chevron-right]=\"!ClusterMembersExpanded\"></i>\n                    <span>Cluster Members</span>\n                    <span class=\"detail-members-count\">{{ ClusterMembers.length }}</span>\n                </button>\n\n                @if (ClusterMembersExpanded) {\n                    <div class=\"detail-members-list\">\n                        @for (member of ClusterMembers; track TrackMemberBy($index, member)) {\n                            <div class=\"detail-member-row\"\n                                 [class.active]=\"member.VectorKey === SelectedPoint.VectorKey\"\n                                 (click)=\"OnClusterMemberClick(member)\">\n                                @if (member.Metadata?.['EntityIcon']) {\n                                    <i [class]=\"member.Metadata['EntityIcon']\" class=\"member-icon\"></i>\n                                }\n                                <span class=\"member-label\">{{ member.Label }}</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n\n            <!-- Open Record button -->\n            <div class=\"detail-footer\">\n                <button class=\"detail-open-btn\" (click)=\"OnOpenRecordClick()\">\n                    <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                    Open Record\n                </button>\n            </div>\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.scatter-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background: var(--mj-bg-page);\n}\n\n/* SVG */\n.scatter-svg {\n    width: 100%;\n    height: 100%;\n    cursor: grab;\n    user-select: none;\n}\n\n.scatter-svg:active {\n    cursor: grabbing;\n}\n\n/* Grid lines */\n.grid-lines line {\n    stroke: var(--mj-border-subtle);\n    stroke-width: 0.5;\n}\n\n/* Data points */\n.data-point {\n    cursor: pointer;\n    transition: opacity 0.15s ease, r 0.15s ease;\n}\n\n.data-point:hover {\n    filter: brightness(1.2);\n}\n\n/* Selection rings */\n.selection-ring {\n    pointer-events: none;\n    transition: r 0.15s ease;\n}\n\n/* Disable transitions when AnimateTransitions is false */\n.no-transitions .data-point,\n.no-transitions .selection-ring {\n    transition: none;\n}\n\n/* Loading overlay */\n.loading-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-page) 80%, transparent);\n    z-index: 5;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9rem;\n}\n\n.loading-spinner i {\n    font-size: 2rem;\n    color: var(--mj-brand-primary);\n}\n\n/* Empty state */\n.empty-state {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    gap: 8px;\n}\n\n.empty-state i {\n    font-size: 3rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.empty-state p {\n    font-size: 1rem;\n    margin: 0;\n}\n\n.empty-hint {\n    font-size: 0.8rem !important;\n    opacity: 0.7;\n}\n\n/* Legend */\n.legend {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(12px);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 14px 18px;\n    z-index: 3;\n}\n\n.legend-title {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.78rem;\n    margin-bottom: 4px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    border-radius: 4px;\n    padding: 2px 4px;\n    margin-left: -4px;\n    margin-right: -4px;\n    transition: background 0.15s ease;\n}\n\n.legend-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.legend-label {\n    flex: 1;\n}\n\n.legend-count {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n    margin-left: auto;\n    padding-left: 16px;\n}\n\n/* Cluster labels on chart */\n.cluster-label {\n    font-size: 14px;\n    font-weight: 600;\n    opacity: 0.85;\n    pointer-events: none;\n    text-shadow:\n        0 0 6px var(--mj-bg-page),\n        0 0 12px var(--mj-bg-page),\n        1px 1px 2px var(--mj-bg-page);\n}\n\n/* Tooltip */\n.tooltip {\n    position: fixed;\n    background: color-mix(in srgb, var(--mj-bg-surface-elevated) 96%, transparent);\n    backdrop-filter: blur(16px);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 10px;\n    padding: 14px 16px;\n    width: 280px;\n    box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-bg-page) 40%, transparent);\n    pointer-events: none;\n    z-index: 50;\n}\n\n.tt-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.tt-icon {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n}\n\n.tt-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.tt-name {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-entity {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    margin-top: 1px;\n}\n\n.tt-cluster {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    margin-bottom: 6px;\n}\n\n.tt-fields {\n    font-size: 0.72rem;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n}\n\n.tt-field-row {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-action {\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-border-default);\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n}\n\n.tt-action i {\n    margin-right: 4px;\n}\n\n/* ================================================================\n   Detail Panel (right slide-in)\n   ================================================================ */\n\n.detail-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(16px);\n    border-left: 1px solid var(--mj-border-default);\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: -4px 0 24px color-mix(in srgb, var(--mj-bg-page) 30%, transparent);\n    overflow: hidden;\n}\n\n.detail-panel-open {\n    transform: translateX(0);\n}\n\n/* Header */\n.detail-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 16px 16px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-header-content {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-icon {\n    width: 2.25rem;\n    height: 2.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.95rem;\n    flex-shrink: 0;\n}\n\n.detail-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-name {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.detail-entity-badge {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 0.68rem;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.detail-close {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n    padding: 4px 6px;\n    border-radius: 4px;\n    transition: color 0.15s ease, background 0.15s ease;\n    flex-shrink: 0;\n}\n\n.detail-close:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n/* Cluster badge */\n.detail-cluster {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    font-size: 0.78rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.detail-cluster-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n/* Metadata fields */\n.detail-fields {\n    padding: 4px 16px 8px;\n    overflow-y: auto;\n    flex-shrink: 0;\n}\n\n.detail-field {\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-field:last-child {\n    border-bottom: none;\n}\n\n.detail-field-key {\n    font-size: 0.68rem;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-bottom: 2px;\n}\n\n.detail-field-value {\n    font-size: 0.8rem;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n    word-wrap: break-word;\n}\n\n/* Cluster Members Section */\n.detail-members-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-members-toggle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 16px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 0.78rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    transition: background 0.15s ease;\n}\n\n.detail-members-toggle:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-members-toggle i {\n    font-size: 0.65rem;\n    width: 12px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n.detail-members-count {\n    margin-left: auto;\n    font-size: 0.7rem;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 7px;\n    border-radius: 8px;\n}\n\n.detail-members-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 8px 8px;\n}\n\n.detail-member-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n    transition: background 0.12s ease;\n}\n\n.detail-member-row:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-member-row.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.detail-member-row .member-icon {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n    flex-shrink: 0;\n}\n\n.detail-member-row.active .member-icon {\n    color: var(--mj-brand-primary);\n}\n\n.member-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* Footer */\n.detail-footer {\n    padding: 12px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.detail-open-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 16px;\n    border: none;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.82rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.detail-open-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.detail-open-btn i {\n    font-size: 0.75rem;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-cluster-scatter', encapsulation: ViewEncapsulation.None, template: "<div class=\"scatter-container\">\n    <!-- Loading overlay -->\n    @if (IsLoading) {\n        <div class=\"loading-overlay\">\n            <div class=\"loading-spinner\">\n                <i class=\"fa-solid fa-circle-nodes fa-spin\"></i>\n                <span>Computing clusters...</span>\n            </div>\n        </div>\n    }\n\n    <!-- Empty state -->\n    @if (!IsLoading && Points.length === 0) {\n        <div class=\"empty-state\">\n            <i class=\"fa-solid fa-chart-scatter\"></i>\n            <p>No data to display</p>\n            <p class=\"empty-hint\">Configure and run clustering to see results</p>\n        </div>\n    }\n\n    <!-- SVG scatter plot -->\n    @if (Points.length > 0) {\n        <svg #svgElement\n             class=\"scatter-svg\"\n             [class.no-transitions]=\"!AnimateTransitions\"\n             [attr.viewBox]=\"ViewBoxString\"\n             preserveAspectRatio=\"xMidYMid meet\"\n             (wheel)=\"OnWheel($event)\"\n             (mousedown)=\"OnMouseDown($event)\">\n\n            <!-- Gradient definitions for cluster glow -->\n            <defs>\n                @for (centroid of ClusterCentroids; track TrackCentroidBy($index, centroid)) {\n                    <radialGradient [attr.id]=\"'cluster-glow-' + centroid.ClusterId\"\n                                    cx=\"50%\" cy=\"50%\" r=\"50%\">\n                        <stop offset=\"0%\" [attr.stop-color]=\"centroid.Color\" stop-opacity=\"0.12\"/>\n                        <stop offset=\"100%\" [attr.stop-color]=\"centroid.Color\" stop-opacity=\"0\"/>\n                    </radialGradient>\n                }\n            </defs>\n\n            <!-- Background grid lines -->\n            <g class=\"grid-lines\">\n                @for (y of HorizontalGridLines; track y) {\n                    <line [attr.x1]=\"0\" [attr.y1]=\"y\" [attr.x2]=\"1000\" [attr.y2]=\"y\"/>\n                }\n                @for (x of VerticalGridLines; track x) {\n                    <line [attr.x1]=\"x\" [attr.y1]=\"0\" [attr.x2]=\"x\" [attr.y2]=\"700\"/>\n                }\n            </g>\n\n            <!-- Cluster glow circles -->\n            @for (centroid of ClusterCentroids; track TrackCentroidBy($index, centroid)) {\n                <circle [attr.cx]=\"centroid.Cx\"\n                        [attr.cy]=\"centroid.Cy\"\n                        [attr.r]=\"centroid.R\"\n                        [attr.fill]=\"'url(#cluster-glow-' + centroid.ClusterId + ')'\"/>\n            }\n\n            <!-- Cluster labels (positioned above centroids) -->\n            @for (centroid of ClusterCentroids; track TrackCentroidBy($index, centroid)) {\n                @if (GetClusterLabelById(centroid.ClusterId); as label) {\n                    <text class=\"cluster-label\"\n                          [attr.x]=\"centroid.Cx\"\n                          [attr.y]=\"centroid.Cy - centroid.R - 8\"\n                          text-anchor=\"middle\"\n                          [attr.fill]=\"centroid.Color\">{{ label }}</text>\n                }\n            }\n\n            <!-- Data points -->\n            @for (point of Points; track TrackPointBy($index, point)) {\n                <circle class=\"data-point\"\n                        [attr.cx]=\"point.X\"\n                        [attr.cy]=\"point.Y\"\n                        [attr.r]=\"GetPointRadius(point)\"\n                        [attr.fill]=\"GetPointColor(point)\"\n                        [attr.opacity]=\"GetPointOpacity(point)\"\n                        (mouseenter)=\"OnPointMouseEnter(point, $event)\"\n                        (mouseleave)=\"OnPointMouseLeave()\"\n                        (click)=\"OnPointClick(point); $event.stopPropagation()\"/>\n            }\n\n            <!-- Selection rings for selected points -->\n            @for (point of Points; track TrackPointBy($index, point)) {\n                @if (IsSelected(point)) {\n                    <circle class=\"selection-ring\"\n                            [attr.cx]=\"point.X\"\n                            [attr.cy]=\"point.Y\"\n                            [attr.r]=\"HighlightRadius + 2\"\n                            fill=\"none\"\n                            [attr.stroke]=\"GetPointColor(point)\"\n                            stroke-width=\"2\"\n                            opacity=\"0.8\"/>\n                }\n            }\n\n            <!-- Highlight ring for last-clicked point -->\n            @if (HighlightedKey) {\n                @for (point of Points; track TrackPointBy($index, point)) {\n                    @if (IsHighlighted(point)) {\n                        <circle [attr.cx]=\"point.X\"\n                                [attr.cy]=\"point.Y\"\n                                [attr.r]=\"HighlightRadius + 4\"\n                                fill=\"none\"\n                                [attr.stroke]=\"GetPointColor(point)\"\n                                stroke-width=\"2.5\"\n                                opacity=\"0.9\"/>\n                    }\n                }\n            }\n        </svg>\n    }\n\n    <!-- Legend overlay -->\n    @if (ShowLegend && Clusters.length > 0) {\n        <div class=\"legend\">\n            <div class=\"legend-title\">Clusters</div>\n            @for (cluster of Clusters; track TrackClusterBy($index, cluster)) {\n                <div class=\"legend-item\" (click)=\"OnClusterLegendClick(cluster)\">\n                    <div class=\"legend-dot\" [style.background]=\"cluster.Color\"></div>\n                    @if (EditingClusterId === cluster.Id) {\n                        <input class=\"legend-label-input\"\n                               [(ngModel)]=\"EditingLabelDraft\"\n                               (keydown)=\"OnLabelEditKeydown($event, cluster)\"\n                               (blur)=\"CommitLabelEdit(cluster)\"\n                               (click)=\"$event.stopPropagation()\"\n                               autofocus />\n                    } @else {\n                        <span class=\"legend-label\">{{ cluster.Label }}</span>\n                        <button class=\"legend-edit-btn\"\n                                title=\"Edit label\"\n                                (click)=\"StartLabelEdit(cluster, $event)\">\n                            <i class=\"fa-solid fa-pencil\"></i>\n                        </button>\n                    }\n                    <span class=\"legend-count\">{{ cluster.MemberCount }}</span>\n                </div>\n            }\n        </div>\n    }\n\n    <!-- Tooltip -->\n    @if (ShowTooltip && HoveredPoint) {\n        <div class=\"tooltip\"\n             [style.left.px]=\"TooltipX\"\n             [style.top.px]=\"TooltipY\">\n            <mj-entity-card\n                [EntityName]=\"EntityName\"\n                [Record]=\"HoveredPoint.Metadata\"\n                Variant=\"compact\">\n            </mj-entity-card>\n            <div class=\"tt-cluster\">\n                <i class=\"fa-solid fa-circle\" style=\"font-size: 7px; vertical-align: middle\"></i>\n                {{ GetClusterLabel(HoveredPoint) }}\n            </div>\n            <div class=\"tt-action\">\n                <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Click to view details\n            </div>\n        </div>\n    }\n\n    <!-- Detail Panel (slide-in from right) -->\n    <div class=\"detail-panel\" [class.detail-panel-open]=\"ShowDetailPanel && SelectedPoint\">\n        @if (SelectedPoint) {\n            <!-- Panel Header -->\n            <div class=\"detail-header\">\n                <div class=\"detail-header-content\">\n                    @if (SelectedPoint.Metadata?.['EntityIcon']) {\n                        <div class=\"detail-icon\">\n                            <i [class]=\"SelectedPoint.Metadata['EntityIcon']\"></i>\n                        </div>\n                    }\n                    <div class=\"detail-header-text\">\n                        <div class=\"detail-name\">{{ SelectedPoint.Label }}</div>\n                        @if (SelectedPoint.Metadata?.['Entity']) {\n                            <span class=\"detail-entity-badge\">{{ SelectedPoint.Metadata['Entity'] }}</span>\n                        }\n                    </div>\n                </div>\n                <button class=\"detail-close\" (click)=\"CloseDetailPanel()\" title=\"Close\">\n                    <i class=\"fa-solid fa-times\"></i>\n                </button>\n            </div>\n\n            <!-- Cluster badge -->\n            <div class=\"detail-cluster\">\n                <span class=\"detail-cluster-dot\"\n                      [style.background]=\"GetClusterColor(SelectedPoint.ClusterId)\"></span>\n                {{ GetClusterLabel(SelectedPoint) }}\n            </div>\n\n            <!-- Metadata fields via entity card -->\n            <mj-entity-card\n                [EntityName]=\"EntityName\"\n                [Record]=\"SelectedPoint.Metadata\"\n                Variant=\"detail\"\n                CssClass=\"detail-entity-card\">\n            </mj-entity-card>\n\n            <!-- Cluster Members -->\n            <div class=\"detail-members-section\">\n                <button class=\"detail-members-toggle\" (click)=\"ToggleClusterMembers()\">\n                    <i class=\"fa-solid\"\n                       [class.fa-chevron-down]=\"ClusterMembersExpanded\"\n                       [class.fa-chevron-right]=\"!ClusterMembersExpanded\"></i>\n                    <span>Cluster Members</span>\n                    <span class=\"detail-members-count\">{{ ClusterMembers.length }}</span>\n                </button>\n\n                @if (ClusterMembersExpanded) {\n                    <div class=\"detail-members-list\">\n                        @for (member of ClusterMembers; track TrackMemberBy($index, member)) {\n                            <div class=\"detail-member-row\"\n                                 [class.active]=\"member.VectorKey === SelectedPoint.VectorKey\"\n                                 (click)=\"OnClusterMemberClick(member)\">\n                                @if (member.Metadata?.['EntityIcon']) {\n                                    <i [class]=\"member.Metadata['EntityIcon']\" class=\"member-icon\"></i>\n                                }\n                                <span class=\"member-label\">{{ member.Label }}</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n\n            <!-- Open Record button -->\n            <div class=\"detail-footer\">\n                <button class=\"detail-open-btn\" (click)=\"OnOpenRecordClick()\">\n                    <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                    Open Record\n                </button>\n            </div>\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n}\n\n.scatter-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background: var(--mj-bg-page);\n}\n\n/* SVG */\n.scatter-svg {\n    width: 100%;\n    height: 100%;\n    cursor: grab;\n    user-select: none;\n}\n\n.scatter-svg:active {\n    cursor: grabbing;\n}\n\n/* Grid lines */\n.grid-lines line {\n    stroke: var(--mj-border-subtle);\n    stroke-width: 0.5;\n}\n\n/* Data points */\n.data-point {\n    cursor: pointer;\n    transition: opacity 0.15s ease, r 0.15s ease;\n}\n\n.data-point:hover {\n    filter: brightness(1.2);\n}\n\n/* Selection rings */\n.selection-ring {\n    pointer-events: none;\n    transition: r 0.15s ease;\n}\n\n/* Disable transitions when AnimateTransitions is false */\n.no-transitions .data-point,\n.no-transitions .selection-ring {\n    transition: none;\n}\n\n/* Loading overlay */\n.loading-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-bg-page) 80%, transparent);\n    z-index: 5;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9rem;\n}\n\n.loading-spinner i {\n    font-size: 2rem;\n    color: var(--mj-brand-primary);\n}\n\n/* Empty state */\n.empty-state {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    gap: 8px;\n}\n\n.empty-state i {\n    font-size: 3rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.empty-state p {\n    font-size: 1rem;\n    margin: 0;\n}\n\n.empty-hint {\n    font-size: 0.8rem !important;\n    opacity: 0.7;\n}\n\n/* Legend */\n.legend {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(12px);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 14px 18px;\n    z-index: 3;\n}\n\n.legend-title {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 8px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.78rem;\n    margin-bottom: 4px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    border-radius: 4px;\n    padding: 2px 4px;\n    margin-left: -4px;\n    margin-right: -4px;\n    transition: background 0.15s ease;\n}\n\n.legend-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.legend-label {\n    flex: 1;\n}\n\n.legend-edit-btn {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.6rem;\n    border-radius: 4px;\n    transition: color 0.15s ease;\n}\n\n.legend-item:hover .legend-edit-btn {\n    display: inline-flex;\n}\n\n.legend-edit-btn:hover {\n    color: var(--mj-brand-primary);\n}\n\n.legend-label-input {\n    flex: 1;\n    padding: 2px 4px;\n    border: 1px solid var(--mj-border-focus);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 0.75rem;\n    outline: none;\n    min-width: 60px;\n}\n\n.legend-count {\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n    margin-left: auto;\n    padding-left: 16px;\n}\n\n/* Cluster labels on chart */\n.cluster-label {\n    font-size: 14px;\n    font-weight: 600;\n    opacity: 0.85;\n    pointer-events: none;\n    text-shadow:\n        0 0 6px var(--mj-bg-page),\n        0 0 12px var(--mj-bg-page),\n        1px 1px 2px var(--mj-bg-page);\n}\n\n/* Tooltip */\n.tooltip {\n    position: fixed;\n    background: color-mix(in srgb, var(--mj-bg-surface-elevated) 96%, transparent);\n    backdrop-filter: blur(16px);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 10px;\n    padding: 14px 16px;\n    width: 280px;\n    box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-bg-page) 40%, transparent);\n    pointer-events: none;\n    z-index: 50;\n}\n\n.tt-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.tt-icon {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n}\n\n.tt-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.tt-name {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-entity {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    margin-top: 1px;\n}\n\n.tt-cluster {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    margin-bottom: 6px;\n}\n\n.tt-fields {\n    font-size: 0.72rem;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n}\n\n.tt-field-row {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.tt-action {\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-border-default);\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n}\n\n.tt-action i {\n    margin-right: 4px;\n}\n\n/* ================================================================\n   Detail Panel (right slide-in)\n   ================================================================ */\n\n.detail-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 320px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 92%, transparent);\n    backdrop-filter: blur(16px);\n    border-left: 1px solid var(--mj-border-default);\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: -4px 0 24px color-mix(in srgb, var(--mj-bg-page) 30%, transparent);\n    overflow: hidden;\n}\n\n.detail-panel-open {\n    transform: translateX(0);\n}\n\n/* Header */\n.detail-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 16px 16px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-header-content {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-icon {\n    width: 2.25rem;\n    height: 2.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.95rem;\n    flex-shrink: 0;\n}\n\n.detail-header-text {\n    min-width: 0;\n    flex: 1;\n}\n\n.detail-name {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.detail-entity-badge {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 0.68rem;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.detail-close {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n    padding: 4px 6px;\n    border-radius: 4px;\n    transition: color 0.15s ease, background 0.15s ease;\n    flex-shrink: 0;\n}\n\n.detail-close:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n/* Cluster badge */\n.detail-cluster {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    font-size: 0.78rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.detail-cluster-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n/* Metadata fields */\n.detail-fields {\n    padding: 4px 16px 8px;\n    overflow-y: auto;\n    flex-shrink: 0;\n}\n\n.detail-field {\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-field:last-child {\n    border-bottom: none;\n}\n\n.detail-field-key {\n    font-size: 0.68rem;\n    font-weight: 500;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-bottom: 2px;\n}\n\n.detail-field-value {\n    font-size: 0.8rem;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n    word-wrap: break-word;\n}\n\n/* Cluster Members Section */\n.detail-members-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-members-toggle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 16px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 0.78rem;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-align: left;\n    transition: background 0.15s ease;\n}\n\n.detail-members-toggle:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-members-toggle i {\n    font-size: 0.65rem;\n    width: 12px;\n    text-align: center;\n    color: var(--mj-text-muted);\n}\n\n.detail-members-count {\n    margin-left: auto;\n    font-size: 0.7rem;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 7px;\n    border-radius: 8px;\n}\n\n.detail-members-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 8px 8px;\n}\n\n.detail-member-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 0.78rem;\n    color: var(--mj-text-primary);\n    transition: background 0.12s ease;\n}\n\n.detail-member-row:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.detail-member-row.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.detail-member-row .member-icon {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n    flex-shrink: 0;\n}\n\n.detail-member-row.active .member-icon {\n    color: var(--mj-brand-primary);\n}\n\n.member-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n/* Footer */\n.detail-footer {\n    padding: 12px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.detail-open-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 16px;\n    border: none;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.82rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.detail-open-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.detail-open-btn i {\n    font-size: 0.75rem;\n}\n"] }]
     }], null, { Points: [{
             type: Input
         }], Clusters: [{
@@ -1315,6 +1360,12 @@ export class ClusterScatterComponent {
             type: Input
         }], TooltipFields: [{
             type: Input
+        }], FieldPriority: [{
+            type: Input
+        }], FieldDisplayNames: [{
+            type: Input
+        }], EntityName: [{
+            type: Input
         }], ColorPalette: [{
             type: Input
         }], EnableZoom: [{
@@ -1349,6 +1400,8 @@ export class ClusterScatterComponent {
             type: Output
         }], ViewportChanged: [{
             type: Output
+        }], LabelEdited: [{
+            type: Output
         }], svgRef: [{
             type: ViewChild,
             args: ['svgElement', { static: false }]