@memberjunction/ng-clustering 5.39.0 → 5.40.1

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

@@ -33,27 +33,29 @@ 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.ClusterId;
+const _forTrack1 = ($index, $item) => $item.Name;
 function ClusterScatterComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 8);
-    i0.ɵɵelement(2, "i", 9);
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 9);
+    i0.ɵɵelement(2, "i", 10);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Computing clusters...");
     i0.ɵɵelementEnd()()();
 } }
 function ClusterScatterComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "i", 10);
+    i0.ɵɵelement(1, "i", 11);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No data to display");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 11);
+    i0.ɵɵelementStart(4, "p", 12);
     i0.ɵɵtext(5, "Configure and run clustering to see results");
     i0.ɵɵelementEnd()();
 } }
 function ClusterScatterComponent_Conditional_3_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "radialGradient", 13);
-    i0.ɵɵelement(1, "stop", 16)(2, "stop", 17);
+    i0.ɵɵelementStart(0, "radialGradient", 14);
+    i0.ɵɵelement(1, "stop", 17)(2, "stop", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const centroid_r3 = ctx.$implicit;
@@ -77,16 +79,16 @@ function ClusterScatterComponent_Conditional_3_For_9_Template(rf, ctx) { if (rf
     const x_r5 = ctx.$implicit;
     i0.ɵɵattribute("x1", x_r5)("y1", 0)("x2", x_r5)("y2", 700);
 } }
-function ClusterScatterComponent_Conditional_3_For_11_Template(rf, ctx) { if (rf & 1) {
+function ClusterScatterComponent_Conditional_3_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "circle");
 } if (rf & 2) {
     const centroid_r6 = ctx.$implicit;
     i0.ɵɵattribute("cx", centroid_r6.Cx)("cy", centroid_r6.Cy)("r", centroid_r6.R)("fill", "url(#cluster-glow-" + centroid_r6.ClusterId + ")");
 } }
-function ClusterScatterComponent_Conditional_3_For_13_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function ClusterScatterComponent_Conditional_3_Conditional_10_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "text", 18);
+    i0.ɵɵelementStart(0, "text", 19);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -95,57 +97,91 @@ function ClusterScatterComponent_Conditional_3_For_13_Conditional_0_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx);
 } }
-function ClusterScatterComponent_Conditional_3_For_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_3_For_13_Conditional_0_Template, 2, 4, ":svg:text", 18);
+function ClusterScatterComponent_Conditional_3_Conditional_10_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_3_Conditional_10_For_3_Conditional_0_Template, 2, 4, ":svg:text", 19);
 } if (rf & 2) {
-    let tmp_12_0;
+    let tmp_13_0;
     const centroid_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional((tmp_13_0 = ctx_r1.GetClusterLabelById(centroid_r7.ClusterId)) ? 0 : -1, tmp_13_0);
+} }
+function ClusterScatterComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ClusterScatterComponent_Conditional_3_Conditional_10_For_1_Template, 1, 4, ":svg:circle", null, i0.ɵɵcomponentInstance().TrackCentroidBy, true);
+    i0.ɵɵrepeaterCreate(2, ClusterScatterComponent_Conditional_3_Conditional_10_For_3_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().TrackCentroidBy, true);
+} if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional((tmp_12_0 = ctx_r1.GetClusterLabelById(centroid_r7.ClusterId)) ? 0 : -1, tmp_12_0);
+    i0.ɵɵrepeater(ctx_r1.ClusterCentroids);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.ClusterCentroids);
 } }
-function ClusterScatterComponent_Conditional_3_For_15_Template(rf, ctx) { if (rf & 1) {
+function ClusterScatterComponent_Conditional_3_For_12_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "circle", 19);
-    i0.ɵɵlistener("mouseenter", function ClusterScatterComponent_Conditional_3_For_15_Template_circle_mouseenter_0_listener($event) { const point_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPointMouseEnter(point_r9, $event)); })("mouseleave", function ClusterScatterComponent_Conditional_3_For_15_Template_circle_mouseleave_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPointMouseLeave()); })("click", function ClusterScatterComponent_Conditional_3_For_15_Template_circle_click_0_listener($event) { const point_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.OnPointClick(point_r9); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(0, "circle", 20);
+    i0.ɵɵlistener("mouseenter", function ClusterScatterComponent_Conditional_3_For_12_Template_circle_mouseenter_0_listener($event) { const point_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPointMouseEnter(point_r9, $event)); })("mouseleave", function ClusterScatterComponent_Conditional_3_For_12_Template_circle_mouseleave_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPointMouseLeave()); })("click", function ClusterScatterComponent_Conditional_3_For_12_Template_circle_click_0_listener($event) { const point_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.OnPointClick(point_r9); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const point_r9 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("cx", point_r9.X)("cy", point_r9.Y)("r", ctx_r1.GetPointRadius(point_r9))("fill", ctx_r1.GetPointColor(point_r9))("opacity", ctx_r1.GetPointOpacity(point_r9));
+    i0.ɵɵattribute("cx", ctx_r1.PX(point_r9))("cy", ctx_r1.PY(point_r9))("r", ctx_r1.GetPointRadius(point_r9))("fill", ctx_r1.GetPointColor(point_r9))("opacity", ctx_r1.GetPointOpacity(point_r9));
 } }
-function ClusterScatterComponent_Conditional_3_For_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function ClusterScatterComponent_Conditional_3_Conditional_13_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "circle", 20);
+    i0.ɵɵelementStart(0, "text", 21);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const point_r10 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("cx", point_r10.X)("cy", point_r10.Y)("r", ctx_r1.HighlightRadius + 2)("stroke", ctx_r1.GetPointColor(point_r10));
+    const lbl_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵattribute("x", lbl_r10.X)("y", lbl_r10.Y)("fill", lbl_r10.Color);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
 } }
-function ClusterScatterComponent_Conditional_3_For_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_3_For_17_Conditional_0_Template, 1, 4, ":svg:circle", 20);
+function ClusterScatterComponent_Conditional_3_Conditional_13_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_3_Conditional_13_For_1_Conditional_0_Template, 2, 4, ":svg:text", 21);
+} if (rf & 2) {
+    let tmp_13_0;
+    const lbl_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional((tmp_13_0 = ctx_r1.GetClusterLabelById(lbl_r10.ClusterId)) ? 0 : -1, tmp_13_0);
+} }
+function ClusterScatterComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ClusterScatterComponent_Conditional_3_Conditional_13_For_1_Template, 1, 1, null, null, _forTrack0);
 } if (rf & 2) {
-    const point_r10 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.IsSelected(point_r10) ? 0 : -1);
+    i0.ɵɵrepeater(ctx_r1.ProjectedClusterLabels);
 } }
-function ClusterScatterComponent_Conditional_3_Conditional_18_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function ClusterScatterComponent_Conditional_3_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "circle", 21);
+    i0.ɵɵelement(0, "circle", 22);
 } if (rf & 2) {
     const point_r11 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵattribute("cx", point_r11.X)("cy", point_r11.Y)("r", ctx_r1.HighlightRadius + 4)("stroke", ctx_r1.GetPointColor(point_r11));
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("cx", ctx_r1.PX(point_r11))("cy", ctx_r1.PY(point_r11))("r", ctx_r1.HighlightRadius + 2)("stroke", ctx_r1.GetPointColor(point_r11));
 } }
-function ClusterScatterComponent_Conditional_3_Conditional_18_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_3_Conditional_18_For_1_Conditional_0_Template, 1, 4, ":svg:circle", 21);
+function ClusterScatterComponent_Conditional_3_For_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_3_For_15_Conditional_0_Template, 1, 4, ":svg:circle", 22);
 } if (rf & 2) {
     const point_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.IsSelected(point_r11) ? 0 : -1);
+} }
+function ClusterScatterComponent_Conditional_3_Conditional_16_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "circle", 23);
+} if (rf & 2) {
+    const point_r12 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("cx", ctx_r1.PX(point_r12))("cy", ctx_r1.PY(point_r12))("r", ctx_r1.HighlightRadius + 4)("stroke", ctx_r1.GetPointColor(point_r12));
+} }
+function ClusterScatterComponent_Conditional_3_Conditional_16_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ClusterScatterComponent_Conditional_3_Conditional_16_For_1_Conditional_0_Template, 1, 4, ":svg:circle", 23);
+} if (rf & 2) {
+    const point_r12 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵconditional(ctx_r1.IsHighlighted(point_r11) ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.IsHighlighted(point_r12) ? 0 : -1);
 } }
-function ClusterScatterComponent_Conditional_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ClusterScatterComponent_Conditional_3_Conditional_18_For_1_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().TrackPointBy, true);
+function ClusterScatterComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ClusterScatterComponent_Conditional_3_Conditional_16_For_1_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().TrackPointBy, true);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵrepeater(ctx_r1.Points);
@@ -153,20 +189,20 @@ function ClusterScatterComponent_Conditional_3_Conditional_18_Template(rf, ctx)
 function ClusterScatterComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 12, 0);
+    i0.ɵɵelementStart(0, "svg", 13, 0);
     i0.ɵɵlistener("wheel", function ClusterScatterComponent_Conditional_3_Template_svg_wheel_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnWheel($event)); })("mousedown", function ClusterScatterComponent_Conditional_3_Template_svg_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnMouseDown($event)); });
     i0.ɵɵelementStart(2, "defs");
-    i0.ɵɵrepeaterCreate(3, ClusterScatterComponent_Conditional_3_For_4_Template, 3, 3, ":svg:radialGradient", 13, i0.ɵɵcomponentInstance().TrackCentroidBy, true);
+    i0.ɵɵrepeaterCreate(3, ClusterScatterComponent_Conditional_3_For_4_Template, 3, 3, ":svg:radialGradient", 14, i0.ɵɵcomponentInstance().TrackCentroidBy, true);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "g", 14);
+    i0.ɵɵelementStart(5, "g", 15);
     i0.ɵɵrepeaterCreate(6, ClusterScatterComponent_Conditional_3_For_7_Template, 1, 4, ":svg:line", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵrepeaterCreate(8, ClusterScatterComponent_Conditional_3_For_9_Template, 1, 4, ":svg:line", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(10, ClusterScatterComponent_Conditional_3_For_11_Template, 1, 4, ":svg:circle", null, i0.ɵɵcomponentInstance().TrackCentroidBy, true);
-    i0.ɵɵrepeaterCreate(12, ClusterScatterComponent_Conditional_3_For_13_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().TrackCentroidBy, true);
-    i0.ɵɵrepeaterCreate(14, ClusterScatterComponent_Conditional_3_For_15_Template, 1, 5, ":svg:circle", 15, i0.ɵɵcomponentInstance().TrackPointBy, true);
-    i0.ɵɵrepeaterCreate(16, ClusterScatterComponent_Conditional_3_For_17_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().TrackPointBy, true);
-    i0.ɵɵconditionalCreate(18, ClusterScatterComponent_Conditional_3_Conditional_18_Template, 2, 0);
+    i0.ɵɵconditionalCreate(10, ClusterScatterComponent_Conditional_3_Conditional_10_Template, 4, 0);
+    i0.ɵɵrepeaterCreate(11, ClusterScatterComponent_Conditional_3_For_12_Template, 1, 5, ":svg:circle", 16, i0.ɵɵcomponentInstance().TrackPointBy, true);
+    i0.ɵɵconditionalCreate(13, ClusterScatterComponent_Conditional_3_Conditional_13_Template, 2, 0);
+    i0.ɵɵrepeaterCreate(14, ClusterScatterComponent_Conditional_3_For_15_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().TrackPointBy, true);
+    i0.ɵɵconditionalCreate(16, ClusterScatterComponent_Conditional_3_Conditional_16_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -179,79 +215,120 @@ function ClusterScatterComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.VerticalGridLines);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.ClusterCentroids);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.ClusterCentroids);
+    i0.ɵɵconditional(!ctx_r1.Is3D ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.RenderPoints);
     i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.Is3D && ctx_r1.ColorBy !== "entity" ? 13 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.Points);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.Points);
+    i0.ɵɵconditional(ctx_r1.HighlightedKey ? 16 : -1);
+} }
+function ClusterScatterComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "3D \u00B7 drag to rotate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 25);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_4_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ResetRotation()); });
+    i0.ɵɵelement(5, "i", 26);
+    i0.ɵɵelementEnd()();
+} }
+function ClusterScatterComponent_Conditional_5_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "div", 29);
+    i0.ɵɵelementStart(2, "span", 30);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 31);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ent_r14 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", ent_r14.Color);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ent_r14.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.HighlightedKey ? 18 : -1);
+    i0.ɵɵtextInterpolate(ent_r14.Count);
 } }
-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()); });
+function ClusterScatterComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 27);
+    i0.ɵɵtext(2, "Entities");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, ClusterScatterComponent_Conditional_5_For_4_Template, 6, 4, "div", 28, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.EntityLegend);
+} }
+function ClusterScatterComponent_Conditional_6_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 34);
+    i0.ɵɵtwoWayListener("ngModelChange", function ClusterScatterComponent_Conditional_6_For_4_Conditional_2_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); 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_6_For_4_Conditional_2_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r17); const cluster_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnLabelEditKeydown($event, cluster_r16)); })("blur", function ClusterScatterComponent_Conditional_6_For_4_Conditional_2_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r17); const cluster_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CommitLabelEdit(cluster_r16)); })("click", function ClusterScatterComponent_Conditional_6_For_4_Conditional_2_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r17); 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);
+function ClusterScatterComponent_Conditional_6_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 30);
     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.ɵɵelementStart(2, "button", 35);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_6_For_4_Conditional_3_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r18); const cluster_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StartLabelEdit(cluster_r16, $event)); });
+    i0.ɵɵelement(3, "i", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cluster_r13 = i0.ɵɵnextContext().$implicit;
+    const cluster_r16 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cluster_r13.Label);
+    i0.ɵɵtextInterpolate(cluster_r16.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.ɵɵ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);
+function ClusterScatterComponent_Conditional_6_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_6_For_4_Template_div_click_0_listener() { const cluster_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnClusterLegendClick(cluster_r16)); });
+    i0.ɵɵelement(1, "div", 29);
+    i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_6_For_4_Conditional_2_Template, 1, 1, "input", 33)(3, ClusterScatterComponent_Conditional_6_For_4_Conditional_3_Template, 4, 1);
+    i0.ɵɵelementStart(4, "span", 31);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const cluster_r13 = ctx.$implicit;
+    const cluster_r16 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background", cluster_r13.Color);
+    i0.ɵɵstyleProp("background", cluster_r16.Color);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.EditingClusterId === cluster_r13.Id ? 2 : 3);
+    i0.ɵɵconditional(ctx_r1.EditingClusterId === cluster_r16.Id ? 2 : 3);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(cluster_r13.MemberCount);
+    i0.ɵɵtextInterpolate(cluster_r16.MemberCount);
 } }
-function ClusterScatterComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 22);
+function ClusterScatterComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 27);
     i0.ɵɵtext(2, "Clusters");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ClusterScatterComponent_Conditional_4_For_4_Template, 6, 4, "div", 23, i0.ɵɵcomponentInstance().TrackClusterBy, true);
+    i0.ɵɵrepeaterCreate(3, ClusterScatterComponent_Conditional_6_For_4_Template, 6, 4, "div", 28, i0.ɵɵcomponentInstance().TrackClusterBy, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.Clusters);
 } }
-function ClusterScatterComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "mj-entity-card", 33);
-    i0.ɵɵelementStart(2, "div", 34);
-    i0.ɵɵelement(3, "i", 35);
+function ClusterScatterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelement(1, "mj-entity-card", 38);
+    i0.ɵɵelementStart(2, "div", 39);
+    i0.ɵɵelement(3, "i", 40);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 36);
-    i0.ɵɵelement(6, "i", 37);
+    i0.ɵɵelementStart(5, "div", 41);
+    i0.ɵɵelement(6, "i", 42);
     i0.ɵɵtext(7, " Click to view details ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -262,8 +339,8 @@ function ClusterScatterComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.GetClusterLabel(ctx_r1.HoveredPoint), " ");
 } }
-function ClusterScatterComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
+function ClusterScatterComponent_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -271,8 +348,8 @@ function ClusterScatterComponent_Conditional_7_Conditional_2_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.SelectedPoint.Metadata["EntityIcon"]);
 } }
-function ClusterScatterComponent_Conditional_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 43);
+function ClusterScatterComponent_Conditional_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 48);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -280,70 +357,70 @@ function ClusterScatterComponent_Conditional_7_Conditional_6_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.SelectedPoint.Metadata["Entity"]);
 } }
-function ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 60);
+function ClusterScatterComponent_Conditional_9_Conditional_20_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 65);
 } if (rf & 2) {
-    const member_r18 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap(member_r18.Metadata["EntityIcon"]);
+    const member_r21 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(member_r21.Metadata["EntityIcon"]);
 } }
-function ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    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", 58);
-    i0.ɵɵelementStart(2, "span", 59);
+function ClusterScatterComponent_Conditional_9_Conditional_20_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_9_Conditional_20_For_2_Template_div_click_0_listener() { const member_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnClusterMemberClick(member_r21)); });
+    i0.ɵɵconditionalCreate(1, ClusterScatterComponent_Conditional_9_Conditional_20_For_2_Conditional_1_Template, 1, 2, "i", 63);
+    i0.ɵɵelementStart(2, "span", 64);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const member_r18 = ctx.$implicit;
+    const member_r21 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", member_r18.VectorKey === ctx_r1.SelectedPoint.VectorKey);
+    i0.ɵɵclassProp("active", member_r21.VectorKey === ctx_r1.SelectedPoint.VectorKey);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((member_r18.Metadata == null ? null : member_r18.Metadata["EntityIcon"]) ? 1 : -1);
+    i0.ɵɵconditional((member_r21.Metadata == null ? null : member_r21.Metadata["EntityIcon"]) ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(member_r18.Label);
+    i0.ɵɵtextInterpolate(member_r21.Label);
 } }
-function ClusterScatterComponent_Conditional_7_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵrepeaterCreate(1, ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template, 4, 4, "div", 56, i0.ɵɵcomponentInstance().TrackMemberBy, true);
+function ClusterScatterComponent_Conditional_9_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵrepeaterCreate(1, ClusterScatterComponent_Conditional_9_Conditional_20_For_2_Template, 4, 4, "div", 61, i0.ɵɵcomponentInstance().TrackMemberBy, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.ClusterMembers);
 } }
-function ClusterScatterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    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);
+function ClusterScatterComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 43)(1, "div", 44);
+    i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_9_Conditional_2_Template, 2, 2, "div", 45);
+    i0.ɵɵelementStart(3, "div", 46)(4, "div", 47);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ClusterScatterComponent_Conditional_7_Conditional_6_Template, 2, 1, "span", 43);
+    i0.ɵɵconditionalCreate(6, ClusterScatterComponent_Conditional_9_Conditional_6_Template, 2, 1, "span", 48);
     i0.ɵɵelementEnd()();
-    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.ɵɵelementStart(7, "button", 49);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_9_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseDetailPanel()); });
+    i0.ɵɵelement(8, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 46);
-    i0.ɵɵelement(10, "span", 47);
+    i0.ɵɵelementStart(9, "div", 51);
+    i0.ɵɵelement(10, "span", 52);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    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.ɵɵelement(12, "mj-entity-card", 53);
+    i0.ɵɵelementStart(13, "div", 54)(14, "button", 55);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_9_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleClusterMembers()); });
+    i0.ɵɵelement(15, "i", 56);
     i0.ɵɵelementStart(16, "span");
     i0.ɵɵtext(17, "Cluster Members");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 52);
+    i0.ɵɵelementStart(18, "span", 57);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(20, ClusterScatterComponent_Conditional_7_Conditional_20_Template, 3, 0, "div", 53);
+    i0.ɵɵconditionalCreate(20, ClusterScatterComponent_Conditional_9_Conditional_20_Template, 3, 0, "div", 58);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(21, "div", 59)(22, "button", 60);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_9_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenRecordClick()); });
+    i0.ɵɵelement(23, "i", 42);
     i0.ɵɵtext(24, " Open Record ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -384,6 +461,12 @@ export class ClusterScatterComponent {
          * Cluster summary information used for the legend and color mapping.
          */
         this.Clusters = [];
+        /**
+         * Legend / color mode. `'cluster'` (default) colors each point by its assigned
+         * cluster; `'entity'` colors by the point's source entity (`Metadata.EntityName`),
+         * which is the useful mode for multi-entity analyses.
+         */
+        this.ColorBy = 'cluster';
         /**
          * When `true`, a semi-transparent loading overlay is displayed
          * on top of the scatter plot.
@@ -652,11 +735,25 @@ export class ClusterScatterComponent {
         this.panStartX = 0;
         this.panStartY = 0;
         this.panStartViewBox = [0, 0, 1000, 700];
+        // 3D orbit-drag state
+        this.isRotating = false;
+        this.rotateStartX = 0;
+        this.rotateStartY = 0;
+        this.rotateStartYaw = 0;
+        this.rotateStartPitch = 0;
         this.boundOnMouseMove = null;
         this.boundOnMouseUp = null;
         /** Default viewBox dimensions used for zoom-limit calculations. */
         this.defaultWidth = 1000;
         this.defaultHeight = 700;
+        // ================================================================
+        // Color-by-entity (multi-entity analyses)
+        // ================================================================
+        /** Stable entity-name → color map, assigned in first-seen order. */
+        this.entityColorMap = new Map();
+        /** Orbit angles (radians) for the interactive 3D projection. Updated by drag. */
+        this.Yaw = 0.6;
+        this.Pitch = 0.45;
     }
     /** Start inline editing for a cluster label. */
     StartLabelEdit(cluster, event) {
@@ -773,12 +870,127 @@ export class ClusterScatterComponent {
      * @returns CSS color string.
      */
     GetPointColor(point) {
+        if (this.ColorBy === 'entity') {
+            return this.getEntityColor(point);
+        }
         if (point.ClusterId < 0)
             return '#64748b'; // outlier gray
         const palette = this.getActivePalette();
         const cluster = this.Clusters.find(c => c.Id === point.ClusterId);
         return cluster?.Color ?? palette[point.ClusterId % palette.length];
     }
+    /** Resolve a color for a point keyed by its source entity name. */
+    getEntityColor(point) {
+        const name = point.Metadata?.['EntityName'] || point.Metadata?.['Entity'] || 'Unknown';
+        let color = this.entityColorMap.get(name);
+        if (!color) {
+            const palette = this.getActivePalette();
+            color = palette[this.entityColorMap.size % palette.length];
+            this.entityColorMap.set(name, color);
+        }
+        return color;
+    }
+    /** Distinct source entities present in the data (for the entity legend). */
+    get EntityLegend() {
+        if (this.ColorBy !== 'entity')
+            return [];
+        const counts = new Map();
+        for (const p of this.Points) {
+            const name = p.Metadata?.['EntityName'] || p.Metadata?.['Entity'] || 'Unknown';
+            counts.set(name, (counts.get(name) ?? 0) + 1);
+        }
+        return [...counts.entries()].map(([Name, Count]) => ({
+            Name,
+            Count,
+            Color: this.getEntityColor({ Metadata: { EntityName: Name } }),
+        }));
+    }
+    // ================================================================
+    // 3D projection (static isometric, depth-cued)
+    // ================================================================
+    /** True when any point carries a Z coordinate (a 3D projection). */
+    get Is3D() {
+        return this.Points.some(p => p.Z != null);
+    }
+    /** Rotate a centered (x,y,z) by the current yaw (around Y) then pitch (around X). */
+    rotate(point) {
+        const x0 = point.X - 500;
+        const y0 = point.Y - 350;
+        const z0 = (point.Z ?? 500) - 500;
+        const cy = Math.cos(this.Yaw), sy = Math.sin(this.Yaw);
+        // yaw around vertical (Y) axis
+        const x1 = x0 * cy + z0 * sy;
+        const z1 = -x0 * sy + z0 * cy;
+        const y1 = y0;
+        // pitch around horizontal (X) axis
+        const cp = Math.cos(this.Pitch), sp = Math.sin(this.Pitch);
+        const y2 = y1 * cp - z1 * sp;
+        const z2 = y1 * sp + z1 * cp;
+        return { x: x1, y: y2, z: z2 };
+    }
+    /** Project a point's (X,Y,Z) to a screen X in the SVG coordinate space. */
+    PX(point) {
+        if (!this.Is3D || point.Z == null)
+            return point.X;
+        return 500 + this.rotate(point).x;
+    }
+    /** Project a point's (X,Y,Z) to a screen Y in the SVG coordinate space. */
+    PY(point) {
+        if (!this.Is3D || point.Z == null)
+            return point.Y;
+        return 350 + this.rotate(point).y;
+    }
+    /** Normalized depth [0=far, 1=near] for a point, used for size/opacity cues. */
+    depthNorm(point) {
+        if (!this.Is3D || point.Z == null)
+            return 1;
+        const depth = this.rotate(point).z;
+        // centered coords span roughly ±440 per axis; combined depth ~[-760, 760]
+        return Math.max(0, Math.min(1, (depth + 600) / 1200));
+    }
+    /** Reset the 3D orbit to the default viewing angle. */
+    ResetRotation() {
+        this.Yaw = 0.6;
+        this.Pitch = 0.45;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Cluster labels positioned at each cluster's centroid in *projected* space.
+     * Used to label clusters in 3D (where the 2D centroid-glow path is disabled).
+     * Recomputes as the user orbits because it depends on PX/PY (yaw/pitch).
+     */
+    get ProjectedClusterLabels() {
+        if (!this.Is3D)
+            return [];
+        const groups = new Map();
+        for (const p of this.Points) {
+            if (p.ClusterId < 0)
+                continue;
+            const arr = groups.get(p.ClusterId);
+            if (arr)
+                arr.push(p);
+            else
+                groups.set(p.ClusterId, [p]);
+        }
+        const palette = this.getActivePalette();
+        const out = [];
+        for (const [cid, pts] of groups) {
+            const sx = pts.reduce((s, p) => s + this.PX(p), 0) / pts.length;
+            const sy = pts.reduce((s, p) => s + this.PY(p), 0) / pts.length;
+            const cluster = this.Clusters.find(c => c.Id === cid);
+            out.push({ X: sx, Y: sy, ClusterId: cid, Color: cluster?.Color ?? palette[cid % palette.length] });
+        }
+        return out;
+    }
+    /**
+     * Points in render order. In 3D, far points are drawn first so nearer points
+     * paint on top (SVG has no z-index); in 2D the original order is preserved.
+     */
+    get RenderPoints() {
+        if (!this.Is3D)
+            return this.Points;
+        return [...this.Points].sort((a, b) => this.depthNorm(a) - this.depthNorm(b));
+    }
     /**
      * Compute the SVG radius for a data point.
      *
@@ -791,6 +1003,10 @@ export class ClusterScatterComponent {
         if (this.SelectedPointIds.has(point.VectorKey)) {
             return this.HighlightRadius;
         }
+        if (this.Is3D) {
+            // Nearer points (depth→1) render larger to convey depth.
+            return this.DotRadius * (0.6 + 0.7 * this.depthNorm(point));
+        }
         return this.DotRadius;
     }
     /**
@@ -805,6 +1021,10 @@ export class ClusterScatterComponent {
         if (this.HoveredPoint && this.HoveredPoint.VectorKey !== point.VectorKey) {
             return this.DotOpacity * 0.5;
         }
+        if (this.Is3D) {
+            // Fade far points slightly for depth perception.
+            return this.DotOpacity * (0.55 + 0.45 * this.depthNorm(point));
+        }
         return this.DotOpacity;
     }
     /**
@@ -922,7 +1142,19 @@ export class ClusterScatterComponent {
      * @param event  The native mouse event.
      */
     OnMouseDown(event) {
-        if (event.button !== 0 || !this.EnablePan)
+        if (event.button !== 0)
+            return;
+        // In 3D mode a left-drag orbits the camera (so depth is perceivable);
+        // in 2D it pans the viewBox.
+        if (this.Is3D) {
+            this.isRotating = true;
+            this.rotateStartX = event.clientX;
+            this.rotateStartY = event.clientY;
+            this.rotateStartYaw = this.Yaw;
+            this.rotateStartPitch = this.Pitch;
+            return;
+        }
+        if (!this.EnablePan)
             return;
         this.isPanning = true;
         this.panStartX = event.clientX;
@@ -1209,6 +1441,15 @@ export class ClusterScatterComponent {
     // Private Methods
     // ================================================================
     onMouseMove(event) {
+        if (this.isRotating) {
+            const dx = event.clientX - this.rotateStartX;
+            const dy = event.clientY - this.rotateStartY;
+            this.Yaw = this.rotateStartYaw + dx * 0.01;
+            // clamp pitch so the scene never flips upside down
+            this.Pitch = Math.max(-1.3, Math.min(1.3, this.rotateStartPitch + dy * 0.01));
+            this.cdr.detectChanges();
+            return;
+        }
         if (!this.isPanning || !this.svgRef)
             return;
         const svg = this.svgRef.nativeElement;
@@ -1229,6 +1470,7 @@ export class ClusterScatterComponent {
     }
     onMouseUp(_event) {
         this.isPanning = false;
+        this.isRotating = false;
     }
     computeCentroids() {
         if (!this.Points.length || !this.Clusters.length) {
@@ -1312,15 +1554,17 @@ 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", 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) {
+        } }, inputs: { Points: "Points", Clusters: "Clusters", ColorBy: "ColorBy", 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: 10, vars: 10, consts: [["svgElement", ""], [1, "scatter-container"], [1, "loading-overlay"], [1, "empty-state"], ["preserveAspectRatio", "xMidYMid meet", 1, "scatter-svg", 3, "no-transitions"], [1, "threed-hint"], [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"], ["text-anchor", "middle", 1, "cluster-label", "cluster-label-3d"], ["fill", "none", "stroke-width", "2", "opacity", "0.8", 1, "selection-ring"], ["fill", "none", "stroke-width", "2.5", "opacity", "0.9"], [1, "fa-solid", "fa-cube"], ["title", "Reset view", 1, "threed-reset", 3, "click"], [1, "fa-solid", "fa-rotate-left"], [1, "legend-title"], [1, "legend-item"], [1, "legend-dot"], [1, "legend-label"], [1, "legend-count"], [1, "legend-item", 3, "click"], ["autofocus", "", 1, "legend-label-input", 3, "ngModel"], ["autofocus", "", 1, "legend-label-input", 3, "ngModelChange", "keydown", "blur", "click", "ngModel"], ["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, 8, 7, "div", 6);
-            i0.ɵɵelementStart(6, "div", 7);
-            i0.ɵɵconditionalCreate(7, ClusterScatterComponent_Conditional_7_Template, 25, 14);
+            i0.ɵɵconditionalCreate(3, ClusterScatterComponent_Conditional_3_Template, 17, 6, ":svg:svg", 4);
+            i0.ɵɵconditionalCreate(4, ClusterScatterComponent_Conditional_4_Template, 6, 0, "div", 5);
+            i0.ɵɵconditionalCreate(5, ClusterScatterComponent_Conditional_5_Template, 5, 0, "div", 6);
+            i0.ɵɵconditionalCreate(6, ClusterScatterComponent_Conditional_6_Template, 5, 0, "div", 6);
+            i0.ɵɵconditionalCreate(7, ClusterScatterComponent_Conditional_7_Template, 8, 7, "div", 7);
+            i0.ɵɵelementStart(8, "div", 8);
+            i0.ɵɵconditionalCreate(9, ClusterScatterComponent_Conditional_9_Template, 25, 14);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -1330,22 +1574,28 @@ export class ClusterScatterComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Points.length > 0 ? 3 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowLegend && ctx.Clusters.length > 0 ? 4 : -1);
+            i0.ɵɵconditional(ctx.Points.length > 0 && ctx.Is3D ? 4 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowTooltip && ctx.HoveredPoint ? 5 : -1);
+            i0.ɵɵconditional(ctx.ShowLegend && ctx.ColorBy === "entity" && ctx.EntityLegend.length > 0 ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowLegend && ctx.ColorBy !== "entity" && ctx.Clusters.length > 0 ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowTooltip && ctx.HoveredPoint ? 7 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("detail-panel-open", ctx.ShowDetailPanel && ctx.SelectedPoint);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.SelectedPoint ? 7 : -1);
-        } }, 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 }); }
+            i0.ɵɵconditional(ctx.SelectedPoint ? 9 : -1);
+        } }, 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\n/* 3D orbit hint + reset */\n.threed-hint {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    z-index: 6;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 5px 8px 5px 10px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 88%, transparent);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    backdrop-filter: blur(4px);\n}\n.threed-hint > i { color: var(--mj-brand-primary); }\n.threed-reset {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n}\n.threed-reset:hover { color: var(--mj-brand-primary); border-color: var(--mj-brand-primary); }\n\n/* 3D cluster labels \u2014 halo for readability over points */\n.cluster-label-3d {\n    font-weight: 700;\n    font-size: 13px;\n    paint-order: stroke;\n    stroke: var(--mj-bg-surface);\n    stroke-width: 3px;\n    stroke-linejoin: round;\n    pointer-events: none;\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]=\"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"] }]
+        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 + labels (2D only; centroids are 2D aesthetics) -->\n            @if (!Is3D) {\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                @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\n            <!-- Data points (RenderPoints is depth-sorted in 3D) -->\n            @for (point of RenderPoints; track TrackPointBy($index, point)) {\n                <circle class=\"data-point\"\n                        [attr.cx]=\"PX(point)\"\n                        [attr.cy]=\"PY(point)\"\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            <!-- 3D cluster labels (at projected centroids; follow rotation) -->\n            @if (Is3D && ColorBy !== 'entity') {\n                @for (lbl of ProjectedClusterLabels; track lbl.ClusterId) {\n                    @if (GetClusterLabelById(lbl.ClusterId); as text) {\n                        <text class=\"cluster-label cluster-label-3d\"\n                              [attr.x]=\"lbl.X\"\n                              [attr.y]=\"lbl.Y\"\n                              text-anchor=\"middle\"\n                              [attr.fill]=\"lbl.Color\">{{ text }}</text>\n                    }\n                }\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]=\"PX(point)\"\n                            [attr.cy]=\"PY(point)\"\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]=\"PX(point)\"\n                                [attr.cy]=\"PY(point)\"\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    <!-- 3D orbit hint + reset -->\n    @if (Points.length > 0 && Is3D) {\n        <div class=\"threed-hint\">\n            <i class=\"fa-solid fa-cube\"></i>\n            <span>3D \u00B7 drag to rotate</span>\n            <button class=\"threed-reset\" (click)=\"ResetRotation()\" title=\"Reset view\">\n                <i class=\"fa-solid fa-rotate-left\"></i>\n            </button>\n        </div>\n    }\n\n    <!-- Entity legend (multi-entity color mode) -->\n    @if (ShowLegend && ColorBy === 'entity' && EntityLegend.length > 0) {\n        <div class=\"legend\">\n            <div class=\"legend-title\">Entities</div>\n            @for (ent of EntityLegend; track ent.Name) {\n                <div class=\"legend-item\">\n                    <div class=\"legend-dot\" [style.background]=\"ent.Color\"></div>\n                    <span class=\"legend-label\">{{ ent.Name }}</span>\n                    <span class=\"legend-count\">{{ ent.Count }}</span>\n                </div>\n            }\n        </div>\n    }\n\n    <!-- Legend overlay (cluster color mode) -->\n    @if (ShowLegend && ColorBy !== 'entity' && 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\n/* 3D orbit hint + reset */\n.threed-hint {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    z-index: 6;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 5px 8px 5px 10px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 88%, transparent);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    backdrop-filter: blur(4px);\n}\n.threed-hint > i { color: var(--mj-brand-primary); }\n.threed-reset {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n}\n.threed-reset:hover { color: var(--mj-brand-primary); border-color: var(--mj-brand-primary); }\n\n/* 3D cluster labels \u2014 halo for readability over points */\n.cluster-label-3d {\n    font-weight: 700;\n    font-size: 13px;\n    paint-order: stroke;\n    stroke: var(--mj-bg-surface);\n    stroke-width: 3px;\n    stroke-linejoin: round;\n    pointer-events: none;\n}\n"] }]
     }], null, { Points: [{
             type: Input
         }], Clusters: [{
             type: Input
+        }], ColorBy: [{
+            type: Input
         }], IsLoading: [{
             type: Input
         }], DotRadius: [{