@memberjunction/ng-dashboards 5.38.0 → 5.40.0

package/dist/KnowledgeHub/components/clusters/cluster-visualization-resource.component.js

@@ -15,93 +15,176 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  *
  * Registered as BaseResourceComponent for the Knowledge Hub application.
  */
-import { Component, ChangeDetectorRef, inject, ViewChild } from '@angular/core';
+import { Component, ChangeDetectorRef, inject, ViewChild, Input, Output, EventEmitter } from '@angular/core';
 import { Subject } from 'rxjs';
 import { CompositeKey, Metadata } from '@memberjunction/core';
 import { UserInfoEngine, KnowledgeHubMetadataEngine } from '@memberjunction/core-entities';
 import { RegisterClass } from '@memberjunction/global';
-import { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';
+import { BaseResourceComponent, NavigationService, ActivityService } from '@memberjunction/ng-shared';
 import { GraphQLAIClient } from '@memberjunction/graphql-dataprovider';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { DefaultClusterConfig, } from '@memberjunction/ng-clustering';
 import { ClusteringService } from '@memberjunction/ng-clustering';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-ui-components";
-import * as i2 from "@memberjunction/ng-clustering";
+import * as i1 from "@angular/common";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-clustering";
 const _c0 = ["scatterPlot"];
 const _c1 = () => [];
-function ClusterVisualizationResourceComponent_For_15_Template(rf, ctx) { if (rf & 1) {
+function ClusterVisualizationResourceComponent_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ClusterVisualizationResourceComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ClusterVisualizationResourceComponent_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 2);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const clusterBody_r1 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", clusterBody_r1);
+} }
+function ClusterVisualizationResourceComponent_Conditional_1_ng_container_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ClusterVisualizationResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵlistener("click", function ClusterVisualizationResourceComponent_For_15_Template_div_click_0_listener() { const saved_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnSelectSaved(saved_r3)); });
-    i0.ɵɵelementStart(1, "div", 20);
+    i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 3)(2, "div", 4)(3, "button", 5);
+    i0.ɵɵlistener("click", function ClusterVisualizationResourceComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnNewAnalysis()); });
+    i0.ɵɵelement(4, "i", 6);
+    i0.ɵɵelementStart(5, "span", 7);
+    i0.ɵɵtext(6, "New Analysis");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(7, "mj-page-body", 8);
+    i0.ɵɵtemplate(8, ClusterVisualizationResourceComponent_Conditional_1_ng_container_8_Template, 1, 0, "ng-container", 2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const clusterBody_r1 = i0.ɵɵreference(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("Flex", true)("Padding", false);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", clusterBody_r1);
+} }
+function ClusterVisualizationResourceComponent_ng_template_2_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵlistener("click", function ClusterVisualizationResourceComponent_ng_template_2_For_8_Template_div_click_0_listener() { const saved_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnSelectSaved(saved_r6)); });
+    i0.ɵɵelementStart(1, "div", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 21)(4, "span");
+    i0.ɵɵelementStart(3, "div", 25)(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 22);
-    i0.ɵɵlistener("click", function ClusterVisualizationResourceComponent_For_15_Template_button_click_8_listener($event) { const saved_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnDeleteSaved(saved_r3, $event)); });
-    i0.ɵɵelement(9, "i", 23);
+    i0.ɵɵelementStart(8, "button", 26);
+    i0.ɵɵlistener("click", function ClusterVisualizationResourceComponent_ng_template_2_For_8_Template_button_click_8_listener($event) { const saved_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnDeleteSaved(saved_r6, $event)); });
+    i0.ɵɵelement(9, "i", 27);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const saved_r3 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("active", ctx_r3.IsActiveSaved(saved_r3));
+    const saved_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r2.IsActiveSaved(saved_r6));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(saved_r3.Name);
+    i0.ɵɵtextInterpolate(saved_r6.Name);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(saved_r3.EntityName);
+    i0.ɵɵtextInterpolate(saved_r6.EntityName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r3.FormatDate(saved_r3.CreatedAt));
+    i0.ɵɵtextInterpolate(ctx_r2.FormatDate(saved_r6.CreatedAt));
 } }
-function ClusterVisualizationResourceComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "i", 24);
+function ClusterVisualizationResourceComponent_ng_template_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No saved visualizations yet");
     i0.ɵɵelementEnd()();
 } }
-function ClusterVisualizationResourceComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "i", 26);
+function ClusterVisualizationResourceComponent_ng_template_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵelement(1, "i", 30);
     i0.ɵɵtext(2, " Records: ");
-    i0.ɵɵelementStart(3, "span", 27);
+    i0.ɵɵelementStart(3, "span", 31);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 25);
-    i0.ɵɵelement(6, "i", 28);
+    i0.ɵɵelementStart(5, "div", 29);
+    i0.ɵɵelement(6, "i", 32);
     i0.ɵɵtext(7, " Clusters: ");
-    i0.ɵɵelementStart(8, "span", 27);
+    i0.ɵɵelementStart(8, "span", 31);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 25);
-    i0.ɵɵelement(11, "i", 29);
+    i0.ɵɵelementStart(10, "div", 29);
+    i0.ɵɵelement(11, "i", 33);
     i0.ɵɵtext(12, " Silhouette: ");
-    i0.ɵɵelementStart(13, "span", 27);
+    i0.ɵɵelementStart(13, "span", 31);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 25);
-    i0.ɵɵelement(16, "i", 30);
+    i0.ɵɵelementStart(15, "div", 29);
+    i0.ɵɵelement(16, "i", 34);
     i0.ɵɵtext(17, " Computed: ");
-    i0.ɵɵelementStart(18, "span", 27);
+    i0.ɵɵelementStart(18, "span", 31);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r3.Result.Metrics.RecordCount);
+    i0.ɵɵtextInterpolate(ctx_r2.Result.Metrics.RecordCount);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r3.Result.Metrics.ClusterCount);
+    i0.ɵɵtextInterpolate(ctx_r2.Result.Metrics.ClusterCount);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("good", ctx_r3.IsSilhouetteGood);
+    i0.ɵɵclassProp("good", ctx_r2.IsSilhouetteGood);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r3.SilhouetteScoreFormatted, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.SilhouetteScoreFormatted, " ");
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r3.ComputationTimeFormatted);
+    i0.ɵɵtextInterpolate(ctx_r2.ComputationTimeFormatted);
+} }
+function ClusterVisualizationResourceComponent_ng_template_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.RunError);
+} }
+function ClusterVisualizationResourceComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "div", 11)(3, "h2");
+    i0.ɵɵelement(4, "i", 12);
+    i0.ɵɵtext(5, " Saved Visualizations");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 13);
+    i0.ɵɵrepeaterCreate(7, ClusterVisualizationResourceComponent_ng_template_2_For_8_Template, 10, 5, "div", 14, i0.ɵɵcomponentInstance().TrackSavedBy, true);
+    i0.ɵɵconditionalCreate(9, ClusterVisualizationResourceComponent_ng_template_2_Conditional_9_Template, 4, 0, "div", 15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 16)(11, "div", 17)(12, "div", 18);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(14, ClusterVisualizationResourceComponent_ng_template_2_Conditional_14_Template, 20, 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 19)(16, "mj-cluster-scatter", 20, 1);
+    i0.ɵɵlistener("PointClicked", function ClusterVisualizationResourceComponent_ng_template_2_Template_mj_cluster_scatter_PointClicked_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPointClicked($event)); })("PointHovered", function ClusterVisualizationResourceComponent_ng_template_2_Template_mj_cluster_scatter_PointHovered_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnPointHovered($event)); })("OpenRecordRequested", function ClusterVisualizationResourceComponent_ng_template_2_Template_mj_cluster_scatter_OpenRecordRequested_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnOpenRecord($event)); })("LabelEdited", function ClusterVisualizationResourceComponent_ng_template_2_Template_mj_cluster_scatter_LabelEdited_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnLabelEdited($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(18, ClusterVisualizationResourceComponent_ng_template_2_Conditional_18_Template, 4, 1, "div", 21);
+    i0.ɵɵelementStart(19, "mj-cluster-config-panel", 22);
+    i0.ɵɵlistener("RunClustering", function ClusterVisualizationResourceComponent_ng_template_2_Template_mj_cluster_config_panel_RunClustering_19_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnRunClustering($event)); })("DimensionsChanged", function ClusterVisualizationResourceComponent_ng_template_2_Template_mj_cluster_config_panel_DimensionsChanged_19_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDimensionsChanged($event)); })("SaveVisualization", function ClusterVisualizationResourceComponent_ng_template_2_Template_mj_cluster_config_panel_SaveVisualization_19_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSaveVisualization()); });
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵrepeater(ctx_r2.SavedVisualizations);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.SavedVisualizations.length === 0 ? 9 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.VisualizationTitle);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.HasResult ? 14 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Points", (ctx_r2.Result == null ? null : ctx_r2.Result.Points) ?? i0.ɵɵpureFunction0(14, _c1))("Clusters", (ctx_r2.Result == null ? null : ctx_r2.Result.Clusters) ?? i0.ɵɵpureFunction0(15, _c1))("IsLoading", ctx_r2.IsRunning)("ColorBy", ctx_r2.ActiveConfig.ColorBy ?? "cluster")("EntityName", ctx_r2.ActiveConfig.EntityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.RunError ? 18 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("IsRunning", ctx_r2.IsRunning)("Metrics", ctx_r2.Metrics)("EntityOptions", ctx_r2.EntityOptions)("EntityDocOptions", ctx_r2.EntityDocOptions)("AllEntityDocOptions", ctx_r2.AllEntityDocOptions);
 } }
 /**
  * Build an environment-scoped storage key so cluster data does not bleed
@@ -126,10 +209,20 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
     scatterPlot;
     cdr = inject(ChangeDetectorRef);
     clusteringService = inject(ClusteringService);
+    activityService = inject(ActivityService);
     navigationService = inject(NavigationService);
     destroy$ = new Subject();
     /** LLM-generated cluster labels for the current result */
     ClusterLabels = [];
+    /**
+     * When true, this component is embedded inside the Visualize host surface.
+     * In that case the host owns the resource lifecycle (NotifyLoadComplete,
+     * agent context) and record navigation, so this component suppresses those
+     * and instead emits open-record intents via {@link OpenRecordRequested}.
+     */
+    Embedded = false;
+    /** Emitted (only when Embedded) to ask the host to open an entity record. */
+    OpenRecordRequested = new EventEmitter();
     // ================================================================
     // Resource overrides
     // ================================================================
@@ -154,6 +247,10 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
     EntityOptions = [];
     /** Entity document options for the selected entity (shown when 2+) */
     EntityDocOptions = [];
+    /** All entity documents across entities (for the multi-entity source selector) */
+    AllEntityDocOptions = [];
+    /** User-facing error from the last run (e.g. multi-entity embedding mismatch) */
+    RunError = null;
     /** Ordered field keys for prioritized display in scatter tooltip/detail */
     FieldPriority = [];
     /** Map of field names to human-readable display names */
@@ -170,13 +267,17 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         await this.loadEntityOptions();
         this.loadSavedVisualizations();
         this.restoreLastSession();
-        this.navigationService.SetAgentContext(this, {
-            IsVisualizationLoaded: !!this.Result,
-            VisualizationTitle: this.VisualizationTitle || null,
-            ClusterCount: this.Result?.Clusters?.length ?? 0,
-            TotalPoints: this.Result?.Points?.length ?? 0,
-        });
-        this.NotifyLoadComplete();
+        // When embedded in the Visualize host, the host owns agent context +
+        // the resource load lifecycle; skip them here to avoid double-reporting.
+        if (!this.Embedded) {
+            this.navigationService.SetAgentContext(this, {
+                IsVisualizationLoaded: !!this.Result,
+                VisualizationTitle: this.VisualizationTitle || null,
+                ClusterCount: this.Result?.Clusters?.length ?? 0,
+                TotalPoints: this.Result?.Points?.length ?? 0,
+            });
+            this.NotifyLoadComplete();
+        }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -210,16 +311,22 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         this.IsRunning = true;
         this.ActiveConfig = config;
         this.ClusterLabels = [];
+        this.RunError = null;
         // Auto-hide detail panel from previous visualization
         this.scatterPlot?.CloseDetailPanel();
         // Update entity doc options if entity changed
         this.updateEntityDocOptions(config.EntityName);
         this.cdr.detectChanges();
+        const activityID = this.activityService.Start('Cluster analysis', {
+            icon: 'fa-solid fa-circle-nodes',
+            detail: `${config.EntityName || 'Multiple sources'} · ${config.Algorithm === 'kmeans' ? 'K-Means' : 'DBSCAN'}`,
+        });
         try {
             // Fetch vectors from the vector database
             const vectors = await this.fetchVectorsForEntity(config);
             // Run clustering (client-side UMAP + K-Means/DBSCAN)
             this.Result = await this.clusteringService.RunClustering(vectors, config);
+            this.activityService.Complete(activityID, 'success', `${this.Result.Points.length} points · ${this.Result.Clusters.length} clusters`);
             this.VisualizationTitle = `${config.EntityName} — ${config.Algorithm === 'kmeans' ? 'K-Means' : 'DBSCAN'}`;
             this.FieldPriority = this.ComputeFieldPriority(config.EntityName);
             // Fire LLM cluster naming in the background (non-blocking).
@@ -231,12 +338,25 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         catch (error) {
             console.error('[ClusterVisualization] Pipeline error:', error);
             this.Result = null;
+            this.RunError = error instanceof Error ? error.message : String(error);
+            this.activityService.Complete(activityID, 'error', this.RunError);
         }
         finally {
             this.IsRunning = false;
             this.cdr.detectChanges();
         }
     }
+    /**
+     * Re-run when the user flips 2D⇄3D so the projection updates immediately.
+     * A 3D layout needs a Z coordinate that only a fresh projection produces, so
+     * toggling alone wouldn't change the existing plot.
+     */
+    OnDimensionsChanged(dims) {
+        this.ActiveConfig = { ...this.ActiveConfig, Dimensions: dims };
+        if (this.Result && this.Result.Points.length > 0 && !this.IsRunning) {
+            void this.OnRunClustering(this.ActiveConfig);
+        }
+    }
     /** Handle point click — log for now */
     OnPointClicked(_point) {
         // Detail panel is handled by the scatter component internally
@@ -251,6 +371,11 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         const recordID = point.Metadata?.['RecordID'];
         if (!entityName || !recordID)
             return;
+        // When embedded, defer navigation to the host (shared drilldown owner).
+        if (this.Embedded) {
+            this.OpenRecordRequested.emit({ EntityName: entityName, RecordID: recordID });
+            return;
+        }
         const compositeKey = new CompositeKey();
         compositeKey.SimpleLoadFromURLSegment(recordID);
         this.navigationService.OpenEntityRecord(entityName, compositeKey);
@@ -354,6 +479,16 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
             if (entityNames.length > 0) {
                 this.EntityOptions = entityNames.map(name => ({ Name: name }));
             }
+            // Build the cross-entity document list that powers the multi-entity
+            // source selector (each option tagged with its owning entity).
+            const allDocs = [];
+            for (const name of entityNames) {
+                const docs = engine.GetEntityDocumentsForEntity(name).filter(d => d.Status === 'Active');
+                for (const d of docs) {
+                    allDocs.push({ ID: d.ID, Name: d.Name, EntityName: name });
+                }
+            }
+            this.AllEntityDocOptions = allDocs;
             // Set default entity if config is blank
             if (this.EntityOptions.length > 0 && !this.ActiveConfig.EntityName) {
                 this.ActiveConfig.EntityName = this.EntityOptions[0].Name;
@@ -390,44 +525,66 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
      * that match the requested entity.
      */
     async fetchVectorsForEntity(config) {
-        // Use the selected entity document, or fall back to first active one
-        let entityDocID = config.EntityDocumentID;
-        if (!entityDocID) {
-            const engine = KnowledgeHubMetadataEngine.Instance;
-            const entityDocs = engine.GetEntityDocumentsForEntity(config.EntityName)
-                .filter(d => d.Status === 'Active');
-            if (entityDocs.length === 0) {
-                return [];
-            }
-            entityDocID = entityDocs[0].ID;
+        const docIDs = this.resolveDocIDs(config);
+        if (docIDs.length === 0) {
+            return [];
         }
-        // Fetch vectors + metadata directly from the vector database (Pinecone)
+        const isMulti = docIDs.length > 1;
+        const docEntityMap = new Map(this.AllEntityDocOptions.map(d => [d.ID, d.EntityName ?? '']));
         const provider = this.ProviderToUse;
         const aiClient = new GraphQLAIClient(provider);
-        const result = await aiClient.FetchEntityVectors({
-            entityDocumentID: entityDocID,
-            maxRecords: config.MaxRecords,
-            filter: config.Filter || undefined,
-        });
-        if (!result.Success || result.Results.length === 0) {
-            return [];
-        }
-        // Convert vector DB results to ClusterInputVector format
         const vectors = [];
-        for (const item of result.Results) {
-            if (!item.Values || item.Values.length === 0)
-                continue;
-            const metadata = this.parseVectorMetadata(item.Metadata);
-            const label = this.buildLabel(metadata);
-            vectors.push({
-                Key: item.ID,
-                Label: label,
-                Vector: item.Values,
-                Metadata: metadata,
+        let expectedLen = -1;
+        for (const docID of docIDs) {
+            const result = await aiClient.FetchEntityVectors({
+                entityDocumentID: docID,
+                maxRecords: config.MaxRecords,
+                filter: config.Filter || undefined,
             });
+            if (!result.Success || result.Results.length === 0)
+                continue;
+            for (const item of result.Results) {
+                if (!item.Values || item.Values.length === 0)
+                    continue;
+                // Hard-block multi-entity embedding mismatches: vectors of different
+                // dimensionalities live in different spaces and aren't co-clusterable.
+                if (isMulti) {
+                    if (expectedLen === -1) {
+                        expectedLen = item.Values.length;
+                    }
+                    else if (item.Values.length !== expectedLen) {
+                        throw new Error('The selected documents use different embedding models (vector sizes differ), ' +
+                            'so their points are not comparable. Pick documents that share the same embedding model.');
+                    }
+                }
+                const metadata = this.parseVectorMetadata(item.Metadata);
+                // Ensure each point knows its source entity for color-by-entity.
+                if (isMulti && !metadata['EntityName']) {
+                    metadata['EntityName'] = docEntityMap.get(docID) ?? metadata['Entity'] ?? '';
+                }
+                const label = this.buildLabel(metadata);
+                vectors.push({
+                    Key: item.ID,
+                    Label: label,
+                    Vector: item.Values,
+                    Metadata: metadata,
+                });
+            }
         }
         return vectors;
     }
+    /** Resolve which entity-document IDs to source vectors from for a run. */
+    resolveDocIDs(config) {
+        if (config.EntityDocumentIDs && config.EntityDocumentIDs.length > 0) {
+            return config.EntityDocumentIDs;
+        }
+        if (config.EntityDocumentID) {
+            return [config.EntityDocumentID];
+        }
+        const engine = KnowledgeHubMetadataEngine.Instance;
+        const docs = engine.GetEntityDocumentsForEntity(config.EntityName).filter(d => d.Status === 'Active');
+        return docs.length > 0 ? [docs[0].ID] : [];
+    }
     /** Parse the JSON metadata string from the vector DB into a record */
     parseVectorMetadata(metadataJson) {
         try {
@@ -724,48 +881,12 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scatterPlot = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 26, vars: 15, consts: [["scatterPlot", ""], ["Title", "Cluster Visualization", "Icon", "fa-solid fa-circle-nodes", "Subtitle", "Explore semantic clusters in your knowledge base"], ["actions", ""], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], [3, "Flex", "Padding"], [1, "cluster-viz-container"], [1, "sidebar"], [1, "sidebar-header"], [1, "fa-solid", "fa-circle-nodes"], [1, "saved-list"], [1, "saved-item", 3, "active"], [1, "no-saved"], [1, "main-area"], [1, "topbar"], [1, "topbar-title"], [1, "scatter-area"], [3, "PointClicked", "PointHovered", "OpenRecordRequested", "LabelEdited", "Points", "Clusters", "IsLoading", "EntityName"], [3, "RunClustering", "SaveVisualization", "IsRunning", "Metrics", "EntityOptions", "EntityDocOptions"], [1, "saved-item", 3, "click"], [1, "saved-name"], [1, "saved-meta"], ["title", "Delete", 1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-bookmark"], [1, "metric"], [1, "fa-solid", "fa-circle-dot"], [1, "metric-value"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-clock"]], template: function ClusterVisualizationResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 1)(2, "div", 2)(3, "button", 3);
-            i0.ɵɵlistener("click", function ClusterVisualizationResourceComponent_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnNewAnalysis()); });
-            i0.ɵɵelement(4, "i", 4);
-            i0.ɵɵtext(5, " New Analysis ");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(6, "mj-page-body", 5)(7, "div", 6)(8, "div", 7)(9, "div", 8)(10, "h2");
-            i0.ɵɵelement(11, "i", 9);
-            i0.ɵɵtext(12, " Saved Clusters");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(13, "div", 10);
-            i0.ɵɵrepeaterCreate(14, ClusterVisualizationResourceComponent_For_15_Template, 10, 5, "div", 11, ctx.TrackSavedBy, true);
-            i0.ɵɵconditionalCreate(16, ClusterVisualizationResourceComponent_Conditional_16_Template, 4, 0, "div", 12);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(17, "div", 13)(18, "div", 14)(19, "div", 15);
-            i0.ɵɵtext(20);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(21, ClusterVisualizationResourceComponent_Conditional_21_Template, 20, 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "div", 16)(23, "mj-cluster-scatter", 17, 0);
-            i0.ɵɵlistener("PointClicked", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_PointClicked_23_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPointClicked($event)); })("PointHovered", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_PointHovered_23_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPointHovered($event)); })("OpenRecordRequested", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_OpenRecordRequested_23_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnOpenRecord($event)); })("LabelEdited", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_LabelEdited_23_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnLabelEdited($event)); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "mj-cluster-config-panel", 18);
-            i0.ɵɵlistener("RunClustering", function ClusterVisualizationResourceComponent_Template_mj_cluster_config_panel_RunClustering_25_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnRunClustering($event)); })("SaveVisualization", function ClusterVisualizationResourceComponent_Template_mj_cluster_config_panel_SaveVisualization_25_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnSaveVisualization()); });
-            i0.ɵɵelementEnd()()()()()();
+        } }, inputs: { Embedded: "Embedded" }, outputs: { OpenRecordRequested: "OpenRecordRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 1, consts: [["clusterBody", ""], ["scatterPlot", ""], [4, "ngTemplateOutlet"], ["Title", "Cluster Visualization", "Icon", "fa-solid fa-circle-nodes", "Subtitle", "Explore semantic clusters in your knowledge base"], ["actions", ""], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "action-btn-label"], [3, "Flex", "Padding"], [1, "cluster-viz-container"], [1, "sidebar"], [1, "sidebar-header"], [1, "fa-solid", "fa-circle-nodes"], [1, "saved-list"], [1, "saved-item", 3, "active"], [1, "no-saved"], [1, "main-area"], [1, "topbar"], [1, "topbar-title"], [1, "scatter-area"], [3, "PointClicked", "PointHovered", "OpenRecordRequested", "LabelEdited", "Points", "Clusters", "IsLoading", "ColorBy", "EntityName"], [1, "cluster-run-error"], [3, "RunClustering", "DimensionsChanged", "SaveVisualization", "IsRunning", "Metrics", "EntityOptions", "EntityDocOptions", "AllEntityDocOptions"], [1, "saved-item", 3, "click"], [1, "saved-name"], [1, "saved-meta"], ["title", "Delete", 1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-bookmark"], [1, "metric"], [1, "fa-solid", "fa-circle-dot"], [1, "metric-value"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-chart-line"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-triangle-exclamation"]], template: function ClusterVisualizationResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ClusterVisualizationResourceComponent_Conditional_0_Template, 1, 1, "ng-container")(1, ClusterVisualizationResourceComponent_Conditional_1_Template, 9, 3, "mj-page-layout");
+            i0.ɵɵtemplate(2, ClusterVisualizationResourceComponent_ng_template_2_Template, 20, 16, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            i0.ɵɵadvance(6);
-            i0.ɵɵproperty("Flex", true)("Padding", false);
-            i0.ɵɵadvance(8);
-            i0.ɵɵrepeater(ctx.SavedVisualizations);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.SavedVisualizations.length === 0 ? 16 : -1);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.VisualizationTitle);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.HasResult ? 21 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("Points", (ctx.Result == null ? null : ctx.Result.Points) ?? i0.ɵɵpureFunction0(13, _c1))("Clusters", (ctx.Result == null ? null : ctx.Result.Clusters) ?? i0.ɵɵpureFunction0(14, _c1))("IsLoading", ctx.IsRunning)("EntityName", ctx.ActiveConfig.EntityName);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("IsRunning", ctx.IsRunning)("Metrics", ctx.Metrics)("EntityOptions", ctx.EntityOptions)("EntityDocOptions", ctx.EntityDocOptions);
-        } }, dependencies: [i1.MJButtonDirective, i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageBodyComponent, i2.ClusterScatterComponent, i2.ClusterConfigPanelComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n.cluster-viz-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n\n\n\n\n\n.sidebar[_ngcontent-%COMP%] {\n    width: 260px;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n}\n\n.sidebar-header[_ngcontent-%COMP%] {\n    padding: 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    color: var(--mj-text-primary);\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.saved-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 12px;\n}\n\n.saved-item[_ngcontent-%COMP%] {\n    padding: 12px 14px;\n    border-radius: 8px;\n    cursor: pointer;\n    margin-bottom: 4px;\n    transition: background 0.15s;\n    position: relative;\n}\n\n.saved-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.saved-item.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.saved-name[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 500;\n    margin-bottom: 3px;\n    color: var(--mj-text-primary);\n    padding-right: 20px;\n}\n\n.saved-meta[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    display: flex;\n    gap: 10px;\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background: none;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.7rem;\n    padding: 2px 4px;\n    opacity: 0;\n    transition: opacity 0.15s, color 0.15s;\n}\n\n.saved-item[_ngcontent-%COMP%]:hover   .delete-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-status-error);\n}\n\n.no-saved[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    text-align: center;\n}\n\n.no-saved[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.no-saved[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    margin: 0;\n}\n\n.new-btn[_ngcontent-%COMP%] {\n    margin: 12px;\n    padding: 10px;\n    border: 1px dashed var(--mj-border-strong);\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n\n.new-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.main-area[_ngcontent-%COMP%] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n\n\n.topbar[_ngcontent-%COMP%] {\n    height: 48px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    padding: 0 20px;\n    gap: 24px;\n    flex-shrink: 0;\n}\n\n.topbar-title[_ngcontent-%COMP%] {\n    font-size: 0.9rem;\n    font-weight: 600;\n    margin-right: auto;\n    color: var(--mj-text-primary);\n}\n\n.metric[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.metric[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.metric-value.good[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n.scatter-area[_ngcontent-%COMP%] {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n}"] });
+            i0.ɵɵconditional(ctx.Embedded ? 0 : 1);
+        } }, dependencies: [i1.NgTemplateOutlet, i2.MJButtonDirective, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageBodyComponent, i3.ClusterScatterComponent, i3.ClusterConfigPanelComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n.cluster-viz-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    \n\n\n\n\n\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n}\n\n\n\n\n\n\n.sidebar[_ngcontent-%COMP%] {\n    width: 260px;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n}\n\n.sidebar-header[_ngcontent-%COMP%] {\n    padding: 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    color: var(--mj-text-primary);\n}\n\n.sidebar-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.saved-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 12px;\n}\n\n.saved-item[_ngcontent-%COMP%] {\n    padding: 12px 14px;\n    border-radius: 8px;\n    cursor: pointer;\n    margin-bottom: 4px;\n    transition: background 0.15s;\n    position: relative;\n}\n\n.saved-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.saved-item.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.saved-name[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 500;\n    margin-bottom: 3px;\n    color: var(--mj-text-primary);\n    padding-right: 20px;\n}\n\n.saved-meta[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    display: flex;\n    gap: 10px;\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background: none;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.7rem;\n    padding: 2px 4px;\n    opacity: 0;\n    transition: opacity 0.15s, color 0.15s;\n}\n\n.saved-item[_ngcontent-%COMP%]:hover   .delete-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-status-error);\n}\n\n.no-saved[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    text-align: center;\n}\n\n.no-saved[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.no-saved[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    margin: 0;\n}\n\n.new-btn[_ngcontent-%COMP%] {\n    margin: 12px;\n    padding: 10px;\n    border: 1px dashed var(--mj-border-strong);\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n\n.new-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.main-area[_ngcontent-%COMP%] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n\n\n.topbar[_ngcontent-%COMP%] {\n    height: 48px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    padding: 0 20px;\n    gap: 24px;\n    flex-shrink: 0;\n}\n\n.topbar-title[_ngcontent-%COMP%] {\n    font-size: 0.9rem;\n    font-weight: 600;\n    margin-right: auto;\n    color: var(--mj-text-primary);\n}\n\n.metric[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.metric[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.metric-value.good[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n.cluster-run-error[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    max-width: 70%;\n    padding: 10px 14px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    color: var(--mj-status-error-text);\n    border-radius: 8px;\n    font-size: 0.82rem;\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n\n\n.scatter-area[_ngcontent-%COMP%] {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n}\n\n\n\n.scatter-area[_ngcontent-%COMP%]    > mj-cluster-scatter[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    display: block;\n    overflow: hidden;\n}\n\n\n\n\n\n\n.scatter-area[_ngcontent-%COMP%]    > mj-cluster-config-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 10;\n}\n.scatter-area[_ngcontent-%COMP%]     .config-panel {\n    pointer-events: auto;\n    max-height: calc(100% - 24px);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n}"] });
 };
 ClusterVisualizationResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'ClusterVisualizationResource')
@@ -773,10 +894,14 @@ ClusterVisualizationResourceComponent = __decorate([
 export { ClusterVisualizationResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ClusterVisualizationResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-cluster-visualization-resource', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Cluster Visualization\"\n    Icon=\"fa-solid fa-circle-nodes\"\n    Subtitle=\"Explore semantic clusters in your knowledge base\">\n    <div actions>\n      <button mjButton variant=\"primary\" size=\"sm\" (click)=\"OnNewAnalysis()\">\n        <i class=\"fa-solid fa-plus\"></i> New Analysis\n      </button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\">\n<div class=\"cluster-viz-container\">\n    <!-- Left Sidebar: Saved Visualizations -->\n    <div class=\"sidebar\">\n        <div class=\"sidebar-header\">\n            <h2><i class=\"fa-solid fa-circle-nodes\"></i> Saved Clusters</h2>\n        </div>\n        <div class=\"saved-list\">\n            @for (saved of SavedVisualizations; track TrackSavedBy($index, saved)) {\n                <div class=\"saved-item\"\n                     [class.active]=\"IsActiveSaved(saved)\"\n                     (click)=\"OnSelectSaved(saved)\">\n                    <div class=\"saved-name\">{{ saved.Name }}</div>\n                    <div class=\"saved-meta\">\n                        <span>{{ saved.EntityName }}</span>\n                        <span>{{ FormatDate(saved.CreatedAt) }}</span>\n                    </div>\n                    <button class=\"delete-btn\"\n                            title=\"Delete\"\n                            (click)=\"OnDeleteSaved(saved, $event)\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n            }\n\n            @if (SavedVisualizations.length === 0) {\n                <div class=\"no-saved\">\n                    <i class=\"fa-solid fa-bookmark\"></i>\n                    <p>No saved visualizations yet</p>\n                </div>\n            }\n        </div>\n    </div>\n\n    <!-- Main Area -->\n    <div class=\"main-area\">\n        <!-- Top metrics bar -->\n        <div class=\"topbar\">\n            <div class=\"topbar-title\">{{ VisualizationTitle }}</div>\n            @if (HasResult) {\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-circle-dot\"></i>\n                    Records: <span class=\"metric-value\">{{ Result!.Metrics.RecordCount }}</span>\n                </div>\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Clusters: <span class=\"metric-value\">{{ Result!.Metrics.ClusterCount }}</span>\n                </div>\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-chart-line\"></i>\n                    Silhouette:\n                    <span class=\"metric-value\" [class.good]=\"IsSilhouetteGood\">\n                        {{ SilhouetteScoreFormatted }}\n                    </span>\n                </div>\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    Computed: <span class=\"metric-value\">{{ ComputationTimeFormatted }}</span>\n                </div>\n            }\n        </div>\n\n        <!-- Scatter plot area -->\n        <div class=\"scatter-area\">\n            <mj-cluster-scatter\n                #scatterPlot\n                [Points]=\"Result?.Points ?? []\"\n                [Clusters]=\"Result?.Clusters ?? []\"\n                [IsLoading]=\"IsRunning\"\n                [EntityName]=\"ActiveConfig.EntityName\"\n                (PointClicked)=\"OnPointClicked($event)\"\n                (PointHovered)=\"OnPointHovered($event)\"\n                (OpenRecordRequested)=\"OnOpenRecord($event)\"\n                (LabelEdited)=\"OnLabelEdited($event)\">\n            </mj-cluster-scatter>\n\n            <!-- Floating config panel -->\n            <mj-cluster-config-panel\n                [IsRunning]=\"IsRunning\"\n                [Metrics]=\"Metrics\"\n                [EntityOptions]=\"EntityOptions\"\n                [EntityDocOptions]=\"EntityDocOptions\"\n                (RunClustering)=\"OnRunClustering($event)\"\n                (SaveVisualization)=\"OnSaveVisualization()\">\n            </mj-cluster-config-panel>\n        </div>\n    </div>\n</div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: [":host {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n.cluster-viz-container {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n/* ============================================================\n   Left Sidebar\n   ============================================================ */\n\n.sidebar {\n    width: 260px;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n}\n\n.sidebar-header {\n    padding: 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sidebar-header h2 {\n    font-size: 0.95rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    color: var(--mj-text-primary);\n}\n\n.sidebar-header h2 i {\n    color: var(--mj-brand-primary);\n}\n\n.saved-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 12px;\n}\n\n.saved-item {\n    padding: 12px 14px;\n    border-radius: 8px;\n    cursor: pointer;\n    margin-bottom: 4px;\n    transition: background 0.15s;\n    position: relative;\n}\n\n.saved-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.saved-item.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.saved-name {\n    font-size: 0.85rem;\n    font-weight: 500;\n    margin-bottom: 3px;\n    color: var(--mj-text-primary);\n    padding-right: 20px;\n}\n\n.saved-meta {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    display: flex;\n    gap: 10px;\n}\n\n.delete-btn {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background: none;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.7rem;\n    padding: 2px 4px;\n    opacity: 0;\n    transition: opacity 0.15s, color 0.15s;\n}\n\n.saved-item:hover .delete-btn {\n    opacity: 1;\n}\n\n.delete-btn:hover {\n    color: var(--mj-status-error);\n}\n\n.no-saved {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    text-align: center;\n}\n\n.no-saved i {\n    font-size: 1.5rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.no-saved p {\n    font-size: 0.8rem;\n    margin: 0;\n}\n\n.new-btn {\n    margin: 12px;\n    padding: 10px;\n    border: 1px dashed var(--mj-border-strong);\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n\n.new-btn:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n/* ============================================================\n   Main Area\n   ============================================================ */\n\n.main-area {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n/* Top bar */\n.topbar {\n    height: 48px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    padding: 0 20px;\n    gap: 24px;\n    flex-shrink: 0;\n}\n\n.topbar-title {\n    font-size: 0.9rem;\n    font-weight: 600;\n    margin-right: auto;\n    color: var(--mj-text-primary);\n}\n\n.metric {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.metric i {\n    font-size: 0.7rem;\n}\n\n.metric-value {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.metric-value.good {\n    color: var(--mj-status-success);\n}\n\n/* Scatter area */\n.scatter-area {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-cluster-visualization-resource', template: "@if (Embedded) {\n  <ng-container *ngTemplateOutlet=\"clusterBody\"></ng-container>\n} @else {\n<mj-page-layout>\n  <mj-page-header\n    Title=\"Cluster Visualization\"\n    Icon=\"fa-solid fa-circle-nodes\"\n    Subtitle=\"Explore semantic clusters in your knowledge base\">\n    <div actions>\n      <button mjButton variant=\"primary\" size=\"sm\" (click)=\"OnNewAnalysis()\">\n        <i class=\"fa-solid fa-plus\"></i> <span class=\"action-btn-label\">New Analysis</span>\n      </button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\">\n    <ng-container *ngTemplateOutlet=\"clusterBody\"></ng-container>\n  </mj-page-body>\n</mj-page-layout>\n}\n\n<ng-template #clusterBody>\n<div class=\"cluster-viz-container\">\n    <!-- Left Sidebar: Saved Visualizations -->\n    <div class=\"sidebar\">\n        <div class=\"sidebar-header\">\n            <h2><i class=\"fa-solid fa-circle-nodes\"></i> Saved Visualizations</h2>\n        </div>\n        <div class=\"saved-list\">\n            @for (saved of SavedVisualizations; track TrackSavedBy($index, saved)) {\n                <div class=\"saved-item\"\n                     [class.active]=\"IsActiveSaved(saved)\"\n                     (click)=\"OnSelectSaved(saved)\">\n                    <div class=\"saved-name\">{{ saved.Name }}</div>\n                    <div class=\"saved-meta\">\n                        <span>{{ saved.EntityName }}</span>\n                        <span>{{ FormatDate(saved.CreatedAt) }}</span>\n                    </div>\n                    <button class=\"delete-btn\"\n                            title=\"Delete\"\n                            (click)=\"OnDeleteSaved(saved, $event)\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n            }\n\n            @if (SavedVisualizations.length === 0) {\n                <div class=\"no-saved\">\n                    <i class=\"fa-solid fa-bookmark\"></i>\n                    <p>No saved visualizations yet</p>\n                </div>\n            }\n        </div>\n    </div>\n\n    <!-- Main Area -->\n    <div class=\"main-area\">\n        <!-- Top metrics bar -->\n        <div class=\"topbar\">\n            <div class=\"topbar-title\">{{ VisualizationTitle }}</div>\n            @if (HasResult) {\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-circle-dot\"></i>\n                    Records: <span class=\"metric-value\">{{ Result!.Metrics.RecordCount }}</span>\n                </div>\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Clusters: <span class=\"metric-value\">{{ Result!.Metrics.ClusterCount }}</span>\n                </div>\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-chart-line\"></i>\n                    Silhouette:\n                    <span class=\"metric-value\" [class.good]=\"IsSilhouetteGood\">\n                        {{ SilhouetteScoreFormatted }}\n                    </span>\n                </div>\n                <div class=\"metric\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    Computed: <span class=\"metric-value\">{{ ComputationTimeFormatted }}</span>\n                </div>\n            }\n        </div>\n\n        <!-- Scatter plot area -->\n        <div class=\"scatter-area\">\n            <mj-cluster-scatter\n                #scatterPlot\n                [Points]=\"Result?.Points ?? []\"\n                [Clusters]=\"Result?.Clusters ?? []\"\n                [IsLoading]=\"IsRunning\"\n                [ColorBy]=\"ActiveConfig.ColorBy ?? 'cluster'\"\n                [EntityName]=\"ActiveConfig.EntityName\"\n                (PointClicked)=\"OnPointClicked($event)\"\n                (PointHovered)=\"OnPointHovered($event)\"\n                (OpenRecordRequested)=\"OnOpenRecord($event)\"\n                (LabelEdited)=\"OnLabelEdited($event)\">\n            </mj-cluster-scatter>\n\n            <!-- Run error banner (e.g. multi-entity embedding mismatch) -->\n            @if (RunError) {\n                <div class=\"cluster-run-error\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    <span>{{ RunError }}</span>\n                </div>\n            }\n\n            <!-- Floating config panel -->\n            <mj-cluster-config-panel\n                [IsRunning]=\"IsRunning\"\n                [Metrics]=\"Metrics\"\n                [EntityOptions]=\"EntityOptions\"\n                [EntityDocOptions]=\"EntityDocOptions\"\n                [AllEntityDocOptions]=\"AllEntityDocOptions\"\n                (RunClustering)=\"OnRunClustering($event)\"\n                (DimensionsChanged)=\"OnDimensionsChanged($event)\"\n                (SaveVisualization)=\"OnSaveVisualization()\">\n            </mj-cluster-config-panel>\n        </div>\n    </div>\n</div>\n</ng-template>\n", styles: [":host {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n.cluster-viz-container {\n    display: flex;\n    flex: 1;\n    /* height:100% so we fill the host whether the parent is a flex container\n       (non-embedded, inside mj-page-body[Flex]) OR a plain block host\n       (embedded inside Visualize, where :host is display:block and flex:1\n       would otherwise be ignored, collapsing the area and clipping the\n       floating config panel). */\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n}\n\n/* ============================================================\n   Left Sidebar\n   ============================================================ */\n\n.sidebar {\n    width: 260px;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n}\n\n.sidebar-header {\n    padding: 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sidebar-header h2 {\n    font-size: 0.95rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    color: var(--mj-text-primary);\n}\n\n.sidebar-header h2 i {\n    color: var(--mj-brand-primary);\n}\n\n.saved-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 12px;\n}\n\n.saved-item {\n    padding: 12px 14px;\n    border-radius: 8px;\n    cursor: pointer;\n    margin-bottom: 4px;\n    transition: background 0.15s;\n    position: relative;\n}\n\n.saved-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.saved-item.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.saved-name {\n    font-size: 0.85rem;\n    font-weight: 500;\n    margin-bottom: 3px;\n    color: var(--mj-text-primary);\n    padding-right: 20px;\n}\n\n.saved-meta {\n    font-size: 0.7rem;\n    color: var(--mj-text-muted);\n    display: flex;\n    gap: 10px;\n}\n\n.delete-btn {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background: none;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    font-size: 0.7rem;\n    padding: 2px 4px;\n    opacity: 0;\n    transition: opacity 0.15s, color 0.15s;\n}\n\n.saved-item:hover .delete-btn {\n    opacity: 1;\n}\n\n.delete-btn:hover {\n    color: var(--mj-status-error);\n}\n\n.no-saved {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    text-align: center;\n}\n\n.no-saved i {\n    font-size: 1.5rem;\n    margin-bottom: 8px;\n    opacity: 0.4;\n}\n\n.no-saved p {\n    font-size: 0.8rem;\n    margin: 0;\n}\n\n.new-btn {\n    margin: 12px;\n    padding: 10px;\n    border: 1px dashed var(--mj-border-strong);\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n\n.new-btn:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n/* ============================================================\n   Main Area\n   ============================================================ */\n\n.main-area {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n/* Top bar */\n.topbar {\n    height: 48px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    padding: 0 20px;\n    gap: 24px;\n    flex-shrink: 0;\n}\n\n.topbar-title {\n    font-size: 0.9rem;\n    font-weight: 600;\n    margin-right: auto;\n    color: var(--mj-text-primary);\n}\n\n.metric {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.metric i {\n    font-size: 0.7rem;\n}\n\n.metric-value {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.metric-value.good {\n    color: var(--mj-status-success);\n}\n\n/* Run error banner */\n.cluster-run-error {\n    position: absolute;\n    top: 12px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    max-width: 70%;\n    padding: 10px 14px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    color: var(--mj-status-error-text);\n    border-radius: 8px;\n    font-size: 0.82rem;\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n/* Scatter area */\n.scatter-area {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n}\n\n/* The scatter SVG / empty-state should fill and be clipped to the area \u2026 */\n.scatter-area > mj-cluster-scatter {\n    position: absolute;\n    inset: 0;\n    display: block;\n    overflow: hidden;\n}\n\n/* \u2026 but the floating Configuration panel must never be clipped by the area's\n   overflow. Constrain its height to the visible area and let its own body scroll\n   when the Filter (Optional) section makes it tall. (Panel lives in the generic\n   ng-clustering package; we only adjust its containment from here.) */\n.scatter-area > mj-cluster-config-panel {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 10;\n}\n.scatter-area ::ng-deep .config-panel {\n    pointer-events: auto;\n    max-height: calc(100% - 24px);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n}\n"] }]
     }], null, { scatterPlot: [{
             type: ViewChild,
             args: ['scatterPlot']
+        }], Embedded: [{
+            type: Input
+        }], OpenRecordRequested: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ClusterVisualizationResourceComponent, { className: "ClusterVisualizationResourceComponent", filePath: "src/KnowledgeHub/components/clusters/cluster-visualization-resource.component.ts", lineNumber: 63 }); })();
 /** Tree-shaking prevention */