@memberjunction/ng-clustering 0.0.1 → 5.24.0

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

@@ -0,0 +1,1410 @@
+/**
+ * @fileoverview SVG scatter plot component for cluster visualization.
+ *
+ * `ClusterScatterComponent` renders an interactive 2D scatter plot where each
+ * dot represents a clustered entity record.  It supports:
+ *
+ * - **Zoom / pan** via mouse wheel and drag (SVG viewBox manipulation)
+ * - **Tooltips** on hover showing point metadata
+ * - **Legend** overlay in the bottom-left corner
+ * - **Radial gradient glow** per cluster centroid
+ * - **Cancelable `BeforeXXX` events** so consumers can intercept interactions
+ * - **Programmatic selection and zoom** via public methods
+ * - **Full customization** of dot radius, opacity, color palette, and more
+ *
+ * @example
+ * ```html
+ * <mj-cluster-scatter
+ *     [Points]="result.Points"
+ *     [Clusters]="result.Clusters"
+ *     [DotRadius]="6"
+ *     [ShowTooltip]="true"
+ *     [ColorPalette]="['#ff0000','#00ff00','#0000ff']"
+ *     (BeforePointClick)="onBeforeClick($event)"
+ *     (PointClicked)="onPointClicked($event)"
+ *     (AfterClusteringComplete)="onClustered($event)"
+ *     (SelectionChanged)="onSelectionChanged($event)">
+ * </mj-cluster-scatter>
+ * ```
+ */
+import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectorRef, ViewChild, ViewEncapsulation, inject, } from '@angular/core';
+import { CLUSTER_COLORS, } from './clustering.types';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-entity-card";
+const _c0 = ["svgElement"];
+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(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.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No data to display");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 11);
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const centroid_r3 = ctx.$implicit;
+    i0.ɵɵattribute("id", "cluster-glow-" + centroid_r3.ClusterId);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("stop-color", centroid_r3.Color);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("stop-color", centroid_r3.Color);
+} }
+function ClusterScatterComponent_Conditional_3_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "line");
+} if (rf & 2) {
+    const y_r4 = ctx.$implicit;
+    i0.ɵɵattribute("x1", 0)("y1", y_r4)("x2", 1000)("y2", y_r4);
+} }
+function ClusterScatterComponent_Conditional_3_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "line");
+} if (rf & 2) {
+    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) {
+    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) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "text", 18);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const centroid_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵattribute("x", centroid_r7.Cx)("y", centroid_r7.Cy - centroid_r7.R - 8)("fill", centroid_r7.Color);
+    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);
+} if (rf & 2) {
+    let tmp_12_0;
+    const centroid_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional((tmp_12_0 = ctx_r1.GetClusterLabelById(centroid_r7.ClusterId)) ? 0 : -1, tmp_12_0);
+} }
+function ClusterScatterComponent_Conditional_3_For_15_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.ɵɵ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));
+} }
+function ClusterScatterComponent_Conditional_3_For_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "circle", 20);
+} 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));
+} }
+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);
+} if (rf & 2) {
+    const point_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.IsSelected(point_r10) ? 0 : -1);
+} }
+function ClusterScatterComponent_Conditional_3_Conditional_18_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "circle", 21);
+} 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));
+} }
+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);
+} if (rf & 2) {
+    const point_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r1.IsHighlighted(point_r11) ? 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);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.Points);
+} }
+function ClusterScatterComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 12, 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.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "g", 14);
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("no-transitions", !ctx_r1.AnimateTransitions);
+    i0.ɵɵattribute("viewBox", ctx_r1.ViewBoxString);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.ClusterCentroids);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.HorizontalGridLines);
+    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.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.Points);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.Points);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.HighlightedKey ? 18 : -1);
+} }
+function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 28);
+    i0.ɵɵtwoWayListener("ngModelChange", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.EditingLabelDraft, $event) || (ctx_r1.EditingLabelDraft = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r14); const cluster_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnLabelEditKeydown($event, cluster_r13)); })("blur", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r14); const cluster_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CommitLabelEdit(cluster_r13)); })("click", function ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditingLabelDraft);
+} }
+function ClusterScatterComponent_Conditional_4_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 30);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_4_For_4_Conditional_3_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r15); const cluster_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StartLabelEdit(cluster_r13, $event)); });
+    i0.ɵɵelement(3, "i", 31);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cluster_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(cluster_r13.Label);
+} }
+function ClusterScatterComponent_Conditional_4_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵlistener("click", function ClusterScatterComponent_Conditional_4_For_4_Template_div_click_0_listener() { const cluster_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnClusterLegendClick(cluster_r13)); });
+    i0.ɵɵelement(1, "div", 25);
+    i0.ɵɵconditionalCreate(2, ClusterScatterComponent_Conditional_4_For_4_Conditional_2_Template, 1, 1, "input", 26)(3, ClusterScatterComponent_Conditional_4_For_4_Conditional_3_Template, 4, 1);
+    i0.ɵɵelementStart(4, "span", 27);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const cluster_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", cluster_r13.Color);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditingClusterId === cluster_r13.Id ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(cluster_r13.MemberCount);
+} }
+function ClusterScatterComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 22);
+    i0.ɵɵtext(2, "Clusters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, ClusterScatterComponent_Conditional_4_For_4_Template, 6, 4, "div", 23, 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);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 36);
+    i0.ɵɵelement(6, "i", 37);
+    i0.ɵɵtext(7, " Click to view details ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r1.TooltipX, "px")("top", ctx_r1.TooltipY, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EntityName", ctx_r1.EntityName)("Record", ctx_r1.HoveredPoint.Metadata);
+    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);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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);
+} if (rf & 2) {
+    const member_r18 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(member_r18.Metadata["EntityIcon"]);
+} }
+function ClusterScatterComponent_Conditional_7_Conditional_20_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 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);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const member_r18 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", member_r18.VectorKey === ctx_r1.SelectedPoint.VectorKey);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((member_r18.Metadata == null ? null : member_r18.Metadata["EntityIcon"]) ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(member_r18.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);
+    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);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, ClusterScatterComponent_Conditional_7_Conditional_6_Template, 2, 1, "span", 43);
+    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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 46);
+    i0.ɵɵelement(10, "span", 47);
+    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.ɵɵelementStart(16, "span");
+    i0.ɵɵtext(17, "Cluster Members");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "span", 52);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(20, ClusterScatterComponent_Conditional_7_Conditional_20_Template, 3, 0, "div", 53);
+    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.ɵɵtext(24, " Open Record ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((ctx_r1.SelectedPoint.Metadata == null ? null : ctx_r1.SelectedPoint.Metadata["EntityIcon"]) ? 2 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedPoint.Label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.SelectedPoint.Metadata == null ? null : ctx_r1.SelectedPoint.Metadata["Entity"]) ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("background", ctx_r1.GetClusterColor(ctx_r1.SelectedPoint.ClusterId));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetClusterLabel(ctx_r1.SelectedPoint), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EntityName", ctx_r1.EntityName)("Record", ctx_r1.SelectedPoint.Metadata);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.ClusterMembersExpanded)("fa-chevron-right", !ctx_r1.ClusterMembersExpanded);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.ClusterMembers.length);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ClusterMembersExpanded ? 20 : -1);
+} }
+export class ClusterScatterComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        // ================================================================
+        // Data Inputs
+        // ================================================================
+        /**
+         * Array of 2D-projected points to render.
+         *
+         * Each point carries its cluster assignment, label, and metadata.
+         * Typically produced by `ClusteringService.RunPipeline()`.
+         */
+        this.Points = [];
+        /**
+         * Cluster summary information used for the legend and color mapping.
+         */
+        this.Clusters = [];
+        /**
+         * When `true`, a semi-transparent loading overlay is displayed
+         * on top of the scatter plot.
+         */
+        this.IsLoading = false;
+        // ================================================================
+        // Customization Inputs
+        // ================================================================
+        /**
+         * Base radius (in SVG units) for each data point dot.
+         *
+         * @default 5
+         */
+        this.DotRadius = 5;
+        /**
+         * Base opacity for data point dots (0 to 1).
+         *
+         * When a point is hovered, non-hovered points are dimmed below this value.
+         *
+         * @default 0.75
+         */
+        this.DotOpacity = 0.75;
+        /**
+         * Radius used for the highlight ring on hovered or selected points.
+         *
+         * @default 8
+         */
+        this.HighlightRadius = 8;
+        /**
+         * Whether to show the color-coded cluster legend overlay.
+         *
+         * @default true
+         */
+        this.ShowLegend = true;
+        /**
+         * Whether to show the tooltip popup on point hover.
+         *
+         * When `false`, `BeforePointHover` and `PointHovered` still fire but
+         * the built-in tooltip DOM is not rendered.
+         *
+         * @default true
+         */
+        this.ShowTooltip = true;
+        /**
+         * Which metadata keys to display inside the tooltip.
+         *
+         * When empty (the default), **all** metadata keys are shown.
+         *
+         * @default []
+         *
+         * @example
+         * ```html
+         * <mj-cluster-scatter [TooltipFields]="['EntityRecordID', 'Score']">
+         * </mj-cluster-scatter>
+         * ```
+         */
+        this.TooltipFields = [];
+        /**
+         * Ordered list of metadata field keys for prioritized display in tooltips
+         * and the detail panel. When set, fields are displayed in this order instead
+         * of raw metadata key order. Fields not in this list appear after the
+         * prioritized fields.
+         *
+         * Typically computed from entity metadata (DefaultInView, Sequence) by the
+         * consuming component and passed in.
+         *
+         * @default [] (no prioritization — original key order)
+         */
+        this.FieldPriority = [];
+        /**
+         * Map of field names to human-readable display names.
+         * Used to show "First Name" instead of "FirstName" in tooltips and detail panels.
+         * If a field is not in this map, the raw key is shown.
+         *
+         * @default {} (use raw key names)
+         */
+        this.FieldDisplayNames = {};
+        /**
+         * The entity name for metadata-driven field display in tooltips and
+         * detail panels. When set, the mj-entity-card component uses EntityInfo
+         * to prioritize fields by IsNameField and DefaultInView.
+         */
+        this.EntityName = null;
+        /**
+         * Override the default cluster color palette.
+         *
+         * Colors are assigned to clusters by index: cluster 0 gets
+         * `ColorPalette[0]`, cluster 1 gets `ColorPalette[1]`, etc.
+         * Wraps around when there are more clusters than colors.
+         *
+         * @default CLUSTER_COLORS (10 accessible colors)
+         */
+        this.ColorPalette = [];
+        /**
+         * Enable or disable zoom via mouse wheel.
+         *
+         * @default true
+         */
+        this.EnableZoom = true;
+        /**
+         * Enable or disable panning via click-and-drag.
+         *
+         * @default true
+         */
+        this.EnablePan = true;
+        /**
+         * Whether scatter plot transitions (zoom, highlight) should be animated.
+         *
+         * @default true
+         */
+        this.AnimateTransitions = true;
+        /**
+         * Externally controlled set of selected point IDs (by `VectorKey`).
+         *
+         * When provided, the component renders selection rings for matching
+         * points and emits `SelectionChanged` when the user modifies the set
+         * interactively.
+         *
+         * @default (empty Set)
+         *
+         * @example
+         * ```html
+         * <mj-cluster-scatter
+         *     [SelectedPointIds]="mySelectedIds"
+         *     (SelectionChanged)="mySelectedIds = $event">
+         * </mj-cluster-scatter>
+         * ```
+         */
+        this.SelectedPointIds = new Set();
+        /**
+         * Minimum zoom level (smallest allowed viewBox multiplier).
+         *
+         * A value of `0.5` means the user can zoom in until the viewBox is
+         * half of the default 1000x700 size.
+         *
+         * @default 0.5
+         */
+        this.MinZoom = 0.5;
+        /**
+         * Maximum zoom level (largest allowed viewBox multiplier).
+         *
+         * A value of `10` means the user can zoom out until the viewBox is
+         * 10x the default 1000x700 size.
+         *
+         * @default 10
+         */
+        this.MaxZoom = 10;
+        // ================================================================
+        // Outputs (standard events)
+        // ================================================================
+        /**
+         * Emitted when a point is clicked (after `BeforePointClick` completes
+         * without cancellation).
+         */
+        this.PointClicked = new EventEmitter();
+        /**
+         * Emitted when the user clicks "Open Record" in the detail panel.
+         * The parent should wire this to `NavigationService.OpenEntityRecord()`.
+         */
+        this.OpenRecordRequested = new EventEmitter();
+        /**
+         * Emitted when the mouse enters or leaves a data point.
+         * Emits `null` on mouse-leave.
+         */
+        this.PointHovered = new EventEmitter();
+        // ================================================================
+        // Outputs (cancelable "Before" events)
+        // ================================================================
+        /**
+         * Fires **before** `PointClicked`.  Set `event.Cancel = true` to
+         * suppress the click entirely.
+         *
+         * @example
+         * ```typescript
+         * onBeforeClick(event: CancelableEvent<ClusterPoint>): void {
+         *     if (event.Data.ClusterId === -1) {
+         *         event.Cancel = true; // ignore outlier clicks
+         *     }
+         * }
+         * ```
+         */
+        this.BeforePointClick = new EventEmitter();
+        /**
+         * Fires **before** the tooltip is shown on hover.  Set
+         * `event.Cancel = true` to suppress the tooltip for this point.
+         */
+        this.BeforePointHover = new EventEmitter();
+        /**
+         * Fires **before** a zoom or pan operation is applied.  Set
+         * `event.Cancel = true` to reject the viewport change.
+         *
+         * The payload contains the **proposed** viewport rectangle.
+         */
+        this.BeforeZoom = new EventEmitter();
+        // ================================================================
+        // Outputs (informational events)
+        // ================================================================
+        /**
+         * Fires after new `Points` and `Clusters` are received and centroids
+         * have been computed, delivering the full visualization result.
+         */
+        this.AfterClusteringComplete = new EventEmitter();
+        /**
+         * Fires when the user clicks a cluster label or legend swatch.
+         */
+        this.ClusterSelected = new EventEmitter();
+        /**
+         * Fires whenever the set of selected point IDs changes
+         * (via user click or programmatic `SelectPoints` / `ClearSelection`).
+         */
+        this.SelectionChanged = new EventEmitter();
+        /**
+         * Fires after every zoom or pan that changes the visible viewport.
+         */
+        this.ViewportChanged = new EventEmitter();
+        /**
+         * Fires when the user edits a cluster label inline.
+         * Payload: `{ ClusterId, OldLabel, NewLabel }`.
+         */
+        this.LabelEdited = new EventEmitter();
+        // ================================================================
+        // Label Editing State
+        // ================================================================
+        /** The cluster ID currently being edited, or null if none. */
+        this.EditingClusterId = null;
+        /** The draft label text during editing. */
+        this.EditingLabelDraft = '';
+        // ================================================================
+        // Internal State
+        // ================================================================
+        /** SVG viewBox parameters: [minX, minY, width, height]. */
+        this._viewBox = [0, 0, 1000, 700];
+        /** Cached viewBox string for template binding (avoids NG0100 on recalc). */
+        this.ViewBoxString = '0 0 1000 700';
+        /** Currently hovered point (null when idle). */
+        this.HoveredPoint = null;
+        /** Screen-space tooltip X position. */
+        this.TooltipX = 0;
+        /** Screen-space tooltip Y position. */
+        this.TooltipY = 0;
+        /** Currently highlighted (single-clicked) point key. */
+        this.HighlightedKey = null;
+        /** Background grid lines for visual orientation. */
+        this.HorizontalGridLines = [175, 350, 525];
+        /** Background vertical grid lines. */
+        this.VerticalGridLines = [250, 500, 750];
+        /** Computed cluster centroids used for radial glow effects. */
+        this.ClusterCentroids = [];
+        /** Filtered metadata entries for the tooltip (computed on hover). */
+        this.TooltipEntries = [];
+        // ================================================================
+        // Detail Panel State
+        // ================================================================
+        /** The currently selected point shown in the detail panel. */
+        this.SelectedPoint = null;
+        /** Whether the detail panel is visible. */
+        this.ShowDetailPanel = false;
+        /** Metadata entries for the detail panel (computed on selection). */
+        this.DetailEntries = [];
+        /** Cluster members for the selected point's cluster. */
+        this.ClusterMembers = [];
+        /** Whether the cluster members list is expanded. */
+        this.ClusterMembersExpanded = true;
+        // Pan/zoom state
+        this.isPanning = false;
+        this.panStartX = 0;
+        this.panStartY = 0;
+        this.panStartViewBox = [0, 0, 1000, 700];
+        this.boundOnMouseMove = null;
+        this.boundOnMouseUp = null;
+        /** Default viewBox dimensions used for zoom-limit calculations. */
+        this.defaultWidth = 1000;
+        this.defaultHeight = 700;
+    }
+    /** Start inline editing for a cluster label. */
+    StartLabelEdit(cluster, event) {
+        event.stopPropagation();
+        this.EditingClusterId = cluster.Id;
+        this.EditingLabelDraft = cluster.Label;
+        this.cdr.detectChanges();
+    }
+    /** Commit the edited label. */
+    CommitLabelEdit(cluster) {
+        const oldLabel = cluster.Label;
+        const newLabel = this.EditingLabelDraft.trim();
+        if (newLabel.length > 0 && newLabel !== oldLabel) {
+            cluster.Label = newLabel;
+            this.LabelEdited.emit({ ClusterId: cluster.Id, OldLabel: oldLabel, NewLabel: newLabel });
+        }
+        this.EditingClusterId = null;
+        this.cdr.detectChanges();
+    }
+    /** Cancel editing. */
+    CancelLabelEdit() {
+        this.EditingClusterId = null;
+        this.cdr.detectChanges();
+    }
+    /** Handle keydown in the edit input. */
+    OnLabelEditKeydown(event, cluster) {
+        if (event.key === 'Enter') {
+            this.CommitLabelEdit(cluster);
+        }
+        else if (event.key === 'Escape') {
+            this.CancelLabelEdit();
+        }
+    }
+    get ViewBox() {
+        return this._viewBox;
+    }
+    set ViewBox(value) {
+        this._viewBox = value;
+        this.ViewBoxString = value.join(' ');
+    }
+    /** Get the current viewport transform for saving/restoring. */
+    GetViewportTransform() {
+        return {
+            TranslateX: this.ViewBox[0],
+            TranslateY: this.ViewBox[1],
+            Scale: this.defaultWidth / this.ViewBox[2],
+        };
+    }
+    /** Restore a previously saved viewport transform. */
+    SetViewportTransform(vt) {
+        const width = this.defaultWidth / vt.Scale;
+        const height = this.defaultHeight / vt.Scale;
+        this.ViewBox = [vt.TranslateX, vt.TranslateY, width, height];
+    }
+    // ================================================================
+    // Lifecycle
+    // ================================================================
+    ngAfterViewInit() {
+        this.boundOnMouseMove = this.onMouseMove.bind(this);
+        this.boundOnMouseUp = this.onMouseUp.bind(this);
+        document.addEventListener('mousemove', this.boundOnMouseMove);
+        document.addEventListener('mouseup', this.boundOnMouseUp);
+    }
+    ngOnDestroy() {
+        if (this.boundOnMouseMove)
+            document.removeEventListener('mousemove', this.boundOnMouseMove);
+        if (this.boundOnMouseUp)
+            document.removeEventListener('mouseup', this.boundOnMouseUp);
+    }
+    ngOnChanges(changes) {
+        this.computeCentroids();
+        // Emit AfterClusteringComplete when new data arrives
+        if ((changes['Points'] || changes['Clusters']) && this.Points.length > 0 && this.Clusters.length > 0) {
+            this.AfterClusteringComplete.emit({
+                Points: this.Points,
+                Clusters: this.Clusters,
+                Metrics: {
+                    SilhouetteScore: 0,
+                    ClusterCount: this.Clusters.length,
+                    ComputationTimeMs: 0,
+                    RecordCount: this.Points.length,
+                    OutlierCount: this.Points.filter(p => p.ClusterId < 0).length,
+                },
+                Config: {
+                    EntityName: '',
+                    EntityDocumentID: '',
+                    Algorithm: 'kmeans',
+                    K: this.Clusters.length,
+                    Epsilon: 0,
+                    MinPoints: 0,
+                    DistanceMetric: 'cosine',
+                    MaxRecords: this.Points.length,
+                    Filter: '',
+                },
+            });
+        }
+    }
+    // ================================================================
+    // Template Helpers
+    // ================================================================
+    /**
+     * Returns the current SVG `viewBox` as a space-separated string.
+     *
+     * @returns e.g. `"0 0 1000 700"`
+     */
+    GetViewBoxString() {
+        return this.ViewBox.join(' ');
+    }
+    /**
+     * Resolve the display color for a given point based on its cluster
+     * assignment and the active `ColorPalette`.
+     *
+     * @param point  The point to colorize.
+     * @returns CSS color string.
+     */
+    GetPointColor(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];
+    }
+    /**
+     * Compute the SVG radius for a data point.
+     *
+     * Selected points use the larger `HighlightRadius`; all others use `DotRadius`.
+     *
+     * @param point  The point to size.
+     * @returns Radius in SVG units.
+     */
+    GetPointRadius(point) {
+        if (this.SelectedPointIds.has(point.VectorKey)) {
+            return this.HighlightRadius;
+        }
+        return this.DotRadius;
+    }
+    /**
+     * Compute the fill opacity for a data point.
+     *
+     * Non-hovered points are dimmed when another point is hovered.
+     *
+     * @param point  The point to evaluate.
+     * @returns Opacity value between 0 and 1.
+     */
+    GetPointOpacity(point) {
+        if (this.HoveredPoint && this.HoveredPoint.VectorKey !== point.VectorKey) {
+            return this.DotOpacity * 0.5;
+        }
+        return this.DotOpacity;
+    }
+    /**
+     * Handle mouseenter on a data point: show tooltip, fire hover events.
+     *
+     * @param point  The hovered point.
+     * @param event  The native mouse event (used for tooltip positioning).
+     */
+    OnPointMouseEnter(point, event) {
+        const cancelable = { Data: point, Cancel: false };
+        this.BeforePointHover.emit(cancelable);
+        if (cancelable.Cancel)
+            return;
+        this.HoveredPoint = point;
+        this.TooltipX = event.clientX + 16;
+        this.TooltipY = event.clientY - 10;
+        this.computeTooltipEntries(point);
+        this.PointHovered.emit(point);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle mouseleave on a data point: hide tooltip, emit null hover.
+     */
+    OnPointMouseLeave() {
+        this.HoveredPoint = null;
+        this.TooltipEntries = [];
+        this.PointHovered.emit(null);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle click on a data point: fires `BeforePointClick`, toggles
+     * selection, opens the detail panel, then fires `PointClicked` and
+     * `SelectionChanged`.
+     *
+     * @param point  The clicked point.
+     */
+    OnPointClick(point) {
+        const cancelable = { Data: point, Cancel: false };
+        this.BeforePointClick.emit(cancelable);
+        if (cancelable.Cancel)
+            return;
+        this.HighlightedKey = point.VectorKey;
+        // Toggle selection
+        const newSelection = new Set(this.SelectedPointIds);
+        if (newSelection.has(point.VectorKey)) {
+            newSelection.delete(point.VectorKey);
+        }
+        else {
+            newSelection.add(point.VectorKey);
+        }
+        this.SelectedPointIds = newSelection;
+        this.SelectionChanged.emit(newSelection);
+        // Open detail panel for the clicked point
+        this.selectPointForDetail(point);
+        this.PointClicked.emit(point);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Whether the given point is the currently highlighted (last-clicked) point.
+     *
+     * @param point  The point to check.
+     * @returns `true` if highlighted.
+     */
+    IsHighlighted(point) {
+        return this.HighlightedKey === point.VectorKey;
+    }
+    /**
+     * Whether the given point is in the current selection set.
+     *
+     * @param point  The point to check.
+     * @returns `true` if selected.
+     */
+    IsSelected(point) {
+        return this.SelectedPointIds.has(point.VectorKey);
+    }
+    /**
+     * Handle mouse wheel events for zooming.
+     *
+     * Fires `BeforeZoom` and `ViewportChanged`.  Respects `EnableZoom`,
+     * `MinZoom`, and `MaxZoom` constraints.
+     *
+     * @param event  The native wheel event.
+     */
+    OnWheel(event) {
+        event.preventDefault();
+        if (!this.EnableZoom)
+            return;
+        const zoomFactor = event.deltaY > 0 ? 1.1 : 0.9;
+        const [minX, minY, width, height] = this.ViewBox;
+        const minWidth = this.defaultWidth * this.MinZoom;
+        const maxWidth = this.defaultWidth * this.MaxZoom;
+        const minHeight = this.defaultHeight * this.MinZoom;
+        const maxHeight = this.defaultHeight * this.MaxZoom;
+        const newWidth = Math.max(minWidth, Math.min(maxWidth, width * zoomFactor));
+        const newHeight = Math.max(minHeight, Math.min(maxHeight, height * zoomFactor));
+        const centerX = minX + width / 2;
+        const centerY = minY + height / 2;
+        const proposed = {
+            MinX: centerX - newWidth / 2,
+            MinY: centerY - newHeight / 2,
+            Width: newWidth,
+            Height: newHeight,
+        };
+        const cancelable = { Data: proposed, Cancel: false };
+        this.BeforeZoom.emit(cancelable);
+        if (cancelable.Cancel)
+            return;
+        this.ViewBox = [proposed.MinX, proposed.MinY, proposed.Width, proposed.Height];
+        this.ViewportChanged.emit(proposed);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Start panning on left-mousedown.
+     *
+     * @param event  The native mouse event.
+     */
+    OnMouseDown(event) {
+        if (event.button !== 0 || !this.EnablePan)
+            return;
+        this.isPanning = true;
+        this.panStartX = event.clientX;
+        this.panStartY = event.clientY;
+        this.panStartViewBox = [...this.ViewBox];
+    }
+    /**
+     * Handle a click on a cluster legend item.
+     *
+     * @param cluster  The cluster that was clicked.
+     */
+    OnClusterLegendClick(cluster) {
+        this.ClusterSelected.emit({
+            ClusterId: cluster.Id,
+            Label: cluster.Label,
+            Color: cluster.Color,
+            MemberCount: cluster.MemberCount,
+        });
+    }
+    /**
+     * Resolve the human-readable label for a point's cluster.
+     *
+     * @param point  The point to look up.
+     * @returns Cluster label string, or `"Outlier"` for noise points.
+     */
+    GetClusterLabel(point) {
+        if (point.ClusterId < 0)
+            return 'Outlier';
+        const cluster = this.Clusters.find(c => c.Id === point.ClusterId);
+        return cluster?.Label ?? `Cluster ${point.ClusterId + 1}`;
+    }
+    /** Get the label for a cluster by ID (used for SVG text labels on the chart). */
+    GetClusterLabelById(clusterId) {
+        const cluster = this.Clusters.find(c => c.Id === clusterId);
+        return cluster?.Label ?? '';
+    }
+    /** @internal TrackBy function for point loops. */
+    TrackPointBy(_index, point) {
+        return point.VectorKey;
+    }
+    /** @internal TrackBy function for cluster loops. */
+    TrackClusterBy(_index, cluster) {
+        return cluster.Id;
+    }
+    /** @internal TrackBy function for centroid loops. */
+    TrackCentroidBy(_index, centroid) {
+        return centroid.ClusterId;
+    }
+    // ================================================================
+    // Public API Methods
+    // ================================================================
+    /**
+     * Animate the viewport to center on a specific cluster's centroid.
+     *
+     * The zoom level is adjusted so that all cluster members are visible
+     * with some padding.
+     *
+     * @param clusterId  The numeric ID of the cluster to zoom into.
+     *
+     * @example
+     * ```typescript
+     * @ViewChild(ClusterScatterComponent) scatter!: ClusterScatterComponent;
+     * this.scatter.ZoomToCluster(2);
+     * ```
+     */
+    ZoomToCluster(clusterId) {
+        const members = this.Points.filter(p => p.ClusterId === clusterId);
+        if (members.length === 0)
+            return;
+        const bounds = this.computeBounds(members);
+        const padding = 80;
+        const proposed = {
+            MinX: bounds.minX - padding,
+            MinY: bounds.minY - padding,
+            Width: (bounds.maxX - bounds.minX) + padding * 2,
+            Height: (bounds.maxY - bounds.minY) + padding * 2,
+        };
+        // Ensure minimum dimensions
+        if (proposed.Width < 200) {
+            const cx = proposed.MinX + proposed.Width / 2;
+            proposed.Width = 200;
+            proposed.MinX = cx - 100;
+        }
+        if (proposed.Height < 140) {
+            const cy = proposed.MinY + proposed.Height / 2;
+            proposed.Height = 140;
+            proposed.MinY = cy - 70;
+        }
+        this.ViewBox = [proposed.MinX, proposed.MinY, proposed.Width, proposed.Height];
+        this.ViewportChanged.emit(proposed);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Reset the viewport to the default zoom level (full view).
+     *
+     * @example
+     * ```typescript
+     * this.scatter.ResetZoom();
+     * ```
+     */
+    ResetZoom() {
+        const proposed = {
+            MinX: 0,
+            MinY: 0,
+            Width: this.defaultWidth,
+            Height: this.defaultHeight,
+        };
+        this.ViewBox = [0, 0, this.defaultWidth, this.defaultHeight];
+        this.ViewportChanged.emit(proposed);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Return all points currently visible within the viewport bounds.
+     *
+     * @returns Array of `ClusterPoint` objects whose X/Y fall inside the
+     *          current viewBox.
+     */
+    GetVisiblePoints() {
+        const [minX, minY, width, height] = this.ViewBox;
+        const maxX = minX + width;
+        const maxY = minY + height;
+        return this.Points.filter(p => p.X >= minX && p.X <= maxX && p.Y >= minY && p.Y <= maxY);
+    }
+    /**
+     * Programmatically select points by their `VectorKey` IDs.
+     *
+     * Merges with the existing selection.  Use `ClearSelection()` first
+     * to replace the selection entirely.
+     *
+     * @param ids  Array of `VectorKey` strings to select.
+     *
+     * @example
+     * ```typescript
+     * this.scatter.SelectPoints(['abc-123', 'def-456']);
+     * ```
+     */
+    SelectPoints(ids) {
+        const newSelection = new Set(this.SelectedPointIds);
+        for (const id of ids) {
+            newSelection.add(id);
+        }
+        this.SelectedPointIds = newSelection;
+        this.SelectionChanged.emit(newSelection);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Clear all selected points.
+     */
+    ClearSelection() {
+        this.SelectedPointIds = new Set();
+        this.HighlightedKey = null;
+        this.SelectionChanged.emit(this.SelectedPointIds);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Export the current scatter plot as an SVG string.
+     *
+     * The returned string is a self-contained `<svg>` element that can be
+     * saved to a file or embedded in HTML.
+     *
+     * @returns SVG markup string, or empty string if the SVG element is
+     *          not yet rendered.
+     */
+    ExportSVG() {
+        if (!this.svgRef?.nativeElement)
+            return '';
+        const svgElement = this.svgRef.nativeElement;
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(svgElement);
+    }
+    /**
+     * Visually emphasize all points belonging to a cluster by increasing
+     * their radius and dimming non-members.
+     *
+     * Call `ResetZoom()` or re-assign `Points` to clear the highlight.
+     *
+     * @param clusterId  The numeric cluster ID to emphasize.
+     */
+    HighlightCluster(clusterId) {
+        const memberKeys = this.Points
+            .filter(p => p.ClusterId === clusterId)
+            .map(p => p.VectorKey);
+        this.SelectedPointIds = new Set(memberKeys);
+        this.SelectionChanged.emit(this.SelectedPointIds);
+        this.cdr.detectChanges();
+    }
+    // ================================================================
+    // Detail Panel Methods
+    // ================================================================
+    /**
+     * Close the detail panel.
+     */
+    CloseDetailPanel() {
+        this.ShowDetailPanel = false;
+        this.SelectedPoint = null;
+        this.DetailEntries = [];
+        this.ClusterMembers = [];
+        this.cdr.detectChanges();
+    }
+    /**
+     * Emit the `OpenRecordRequested` event for the currently selected point
+     * (triggered by the "Open Record" button in the detail panel).
+     */
+    OnOpenRecordClick() {
+        if (this.SelectedPoint) {
+            this.OpenRecordRequested.emit(this.SelectedPoint);
+        }
+    }
+    /**
+     * Select a point from the cluster members list, updating the detail
+     * panel and highlighting the point on the chart.
+     *
+     * @param point  The cluster member point to select.
+     */
+    OnClusterMemberClick(point) {
+        this.HighlightedKey = point.VectorKey;
+        this.selectPointForDetail(point);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Toggle the cluster members list expansion state.
+     */
+    ToggleClusterMembers() {
+        this.ClusterMembersExpanded = !this.ClusterMembersExpanded;
+    }
+    /**
+     * Get the color for a cluster by its ID, used in the detail panel.
+     *
+     * @param clusterId  The cluster ID.
+     * @returns CSS color string.
+     */
+    GetClusterColor(clusterId) {
+        if (clusterId < 0)
+            return '#64748b';
+        const cluster = this.Clusters.find(c => c.Id === clusterId);
+        if (cluster?.Color)
+            return cluster.Color;
+        const palette = this.getActivePalette();
+        return palette[clusterId % palette.length];
+    }
+    /**
+     * Return the metadata keys that should be hidden in the detail panel.
+     */
+    get internalMetadataKeys() {
+        return new Set([
+            'Name', 'Entity', 'EntityIcon', 'RecordID',
+            'TemplateID', '__mj_UpdatedAt', '__mj_CreatedAt',
+        ]);
+    }
+    /**
+     * Select a point and populate the detail panel state.
+     */
+    selectPointForDetail(point) {
+        this.SelectedPoint = point;
+        this.ShowDetailPanel = true;
+        this.computeDetailEntries(point);
+        this.computeClusterMembers(point);
+    }
+    /**
+     * Compute the metadata entries for the detail panel, excluding internal fields.
+     * Uses FieldPriority for ordering when available.
+     */
+    computeDetailEntries(point) {
+        const hidden = this.internalMetadataKeys;
+        const raw = Object.entries(point.Metadata)
+            .filter(([key]) => !hidden.has(key))
+            .filter(([, value]) => value != null && String(value).trim() !== '')
+            .map(([Key, Value]) => ({ Key, Value }));
+        this.DetailEntries = this.sortEntriesByPriority(raw);
+    }
+    /**
+     * Compute the list of cluster members for the selected point's cluster.
+     */
+    computeClusterMembers(point) {
+        this.ClusterMembers = this.Points
+            .filter(p => p.ClusterId === point.ClusterId)
+            .sort((a, b) => a.Label.localeCompare(b.Label));
+    }
+    /** @internal TrackBy function for cluster member loops. */
+    TrackMemberBy(_index, point) {
+        return point.VectorKey;
+    }
+    // ================================================================
+    // Private Methods
+    // ================================================================
+    onMouseMove(event) {
+        if (!this.isPanning || !this.svgRef)
+            return;
+        const svg = this.svgRef.nativeElement;
+        const rect = svg.getBoundingClientRect();
+        const scaleX = this.panStartViewBox[2] / rect.width;
+        const scaleY = this.panStartViewBox[3] / rect.height;
+        const dx = (event.clientX - this.panStartX) * scaleX;
+        const dy = (event.clientY - this.panStartY) * scaleY;
+        const proposed = {
+            MinX: this.panStartViewBox[0] - dx,
+            MinY: this.panStartViewBox[1] - dy,
+            Width: this.panStartViewBox[2],
+            Height: this.panStartViewBox[3],
+        };
+        this.ViewBox = [proposed.MinX, proposed.MinY, proposed.Width, proposed.Height];
+        this.ViewportChanged.emit(proposed);
+        this.cdr.detectChanges();
+    }
+    onMouseUp(_event) {
+        this.isPanning = false;
+    }
+    computeCentroids() {
+        if (!this.Points.length || !this.Clusters.length) {
+            this.ClusterCentroids = [];
+            return;
+        }
+        this.ClusterCentroids = this.Clusters.map(cluster => {
+            const members = this.Points.filter(p => p.ClusterId === cluster.Id);
+            if (members.length === 0) {
+                return { ClusterId: cluster.Id, Cx: 500, Cy: 350, R: 80, Color: cluster.Color };
+            }
+            const cx = members.reduce((s, p) => s + p.X, 0) / members.length;
+            const cy = members.reduce((s, p) => s + p.Y, 0) / members.length;
+            const maxDist = Math.max(...members.map(p => Math.sqrt((p.X - cx) ** 2 + (p.Y - cy) ** 2)), 40);
+            return {
+                ClusterId: cluster.Id,
+                Cx: cx,
+                Cy: cy,
+                R: Math.min(maxDist + 30, 200),
+                Color: cluster.Color,
+            };
+        });
+    }
+    /**
+     * Compute the bounding box for a set of points.
+     */
+    computeBounds(points) {
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        for (const p of points) {
+            if (p.X < minX)
+                minX = p.X;
+            if (p.X > maxX)
+                maxX = p.X;
+            if (p.Y < minY)
+                minY = p.Y;
+            if (p.Y > maxY)
+                maxY = p.Y;
+        }
+        return { minX, minY, maxX, maxY };
+    }
+    /**
+     * Resolve the effective color palette (custom override or default).
+     */
+    getActivePalette() {
+        return this.ColorPalette.length > 0 ? this.ColorPalette : CLUSTER_COLORS;
+    }
+    /**
+     * Compute the tooltip entries based on TooltipFields filter.
+     * Uses FieldPriority for ordering when available.
+     */
+    computeTooltipEntries(point) {
+        const entries = Object.entries(point.Metadata);
+        let mapped;
+        if (this.TooltipFields.length > 0) {
+            mapped = entries
+                .filter(([key]) => this.TooltipFields.includes(key))
+                .map(([Key, Value]) => ({ Key, Value }));
+        }
+        else {
+            mapped = entries.map(([Key, Value]) => ({ Key, Value }));
+        }
+        this.TooltipEntries = this.sortEntriesByPriority(mapped);
+    }
+    /**
+     * Sort entries using the FieldPriority ordering.
+     * Fields in FieldPriority come first (in priority order), then remaining fields.
+     */
+    sortEntriesByPriority(entries) {
+        if (this.FieldPriority.length === 0)
+            return entries;
+        const priorityIndex = new Map(this.FieldPriority.map((key, idx) => [key, idx]));
+        return [...entries].sort((a, b) => {
+            const aIdx = priorityIndex.get(a.Key) ?? 99999;
+            const bIdx = priorityIndex.get(b.Key) ?? 99999;
+            return aIdx - bIdx;
+        });
+    }
+    static { this.ɵfac = function ClusterScatterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ClusterScatterComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ClusterScatterComponent, selectors: [["mj-cluster-scatter"]], viewQuery: function ClusterScatterComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } 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) {
+            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.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading && ctx.Points.length === 0 ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Points.length > 0 ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowLegend && ctx.Clusters.length > 0 ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowTooltip && ctx.HoveredPoint ? 5 : -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 }); }
+}
+(() => { (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"] }]
+    }], null, { Points: [{
+            type: Input
+        }], Clusters: [{
+            type: Input
+        }], IsLoading: [{
+            type: Input
+        }], DotRadius: [{
+            type: Input
+        }], DotOpacity: [{
+            type: Input
+        }], HighlightRadius: [{
+            type: Input
+        }], ShowLegend: [{
+            type: Input
+        }], ShowTooltip: [{
+            type: Input
+        }], TooltipFields: [{
+            type: Input
+        }], FieldPriority: [{
+            type: Input
+        }], FieldDisplayNames: [{
+            type: Input
+        }], EntityName: [{
+            type: Input
+        }], ColorPalette: [{
+            type: Input
+        }], EnableZoom: [{
+            type: Input
+        }], EnablePan: [{
+            type: Input
+        }], AnimateTransitions: [{
+            type: Input
+        }], SelectedPointIds: [{
+            type: Input
+        }], MinZoom: [{
+            type: Input
+        }], MaxZoom: [{
+            type: Input
+        }], PointClicked: [{
+            type: Output
+        }], OpenRecordRequested: [{
+            type: Output
+        }], PointHovered: [{
+            type: Output
+        }], BeforePointClick: [{
+            type: Output
+        }], BeforePointHover: [{
+            type: Output
+        }], BeforeZoom: [{
+            type: Output
+        }], AfterClusteringComplete: [{
+            type: Output
+        }], ClusterSelected: [{
+            type: Output
+        }], SelectionChanged: [{
+            type: Output
+        }], ViewportChanged: [{
+            type: Output
+        }], LabelEdited: [{
+            type: Output
+        }], svgRef: [{
+            type: ViewChild,
+            args: ['svgElement', { static: false }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ClusterScatterComponent, { className: "ClusterScatterComponent", filePath: "src/lib/cluster-scatter.component.ts", lineNumber: 64 }); })();
+//# sourceMappingURL=cluster-scatter.component.js.map