@memberjunction/ng-dashboards 5.23.0 → 5.25.0

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

@@ -10,8 +10,9 @@
  * Registered as BaseResourceComponent for the Knowledge Hub application.
  */
 import { OnDestroy, AfterViewInit } from '@angular/core';
+import { Subject } from 'rxjs';
 import { ResourceData } from '@memberjunction/core-entities';
-import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';
 import { ClusterConfig, ClusterConfigPanelEntityOption, ClusterConfigPanelEntityDocOption, ClusterVisualizationResult, ClusterMetrics, ClusterPoint, ClusterLabel, SavedClusterVisualization } from '@memberjunction/ng-clustering';
 import { ClusterScatterComponent } from '@memberjunction/ng-clustering';
 import * as i0 from "@angular/core";
@@ -19,8 +20,8 @@ export declare class ClusterVisualizationResourceComponent extends BaseResourceC
     scatterPlot?: ClusterScatterComponent;
     private cdr;
     private clusteringService;
-    private navigationService;
-    private destroy$;
+    protected navigationService: NavigationService;
+    protected destroy$: Subject<void>;
     /** LLM-generated cluster labels for the current result */
     ClusterLabels: ClusterLabel[];
     GetResourceDisplayName(_data: ResourceData): Promise<string>;
@@ -37,6 +38,10 @@ export declare class ClusterVisualizationResourceComponent extends BaseResourceC
     EntityOptions: ClusterConfigPanelEntityOption[];
     /** Entity document options for the selected entity (shown when 2+) */
     EntityDocOptions: ClusterConfigPanelEntityDocOption[];
+    /** Ordered field keys for prioritized display in scatter tooltip/detail */
+    FieldPriority: string[];
+    /** Map of field names to human-readable display names */
+    FieldDisplayNames: Record<string, string>;
     SavedVisualizations: SavedClusterVisualization[];
     ActiveSavedId: string | null;
     private userSettingEntity;
@@ -78,7 +83,11 @@ export declare class ClusterVisualizationResourceComponent extends BaseResourceC
     private fetchVectorsForEntity;
     /** Parse the JSON metadata string from the vector DB into a record */
     private parseVectorMetadata;
-    /** Build a human-readable label from vector metadata (prefers Name field, falls back to RecordID) */
+    /**
+     * Build a human-readable label from vector metadata using entity field metadata.
+     * Combines all IsNameField fields in Sequence order (e.g., "Sarah Chen" from FirstName + LastName).
+     * Falls back to heuristic field detection when entity metadata isn't available.
+     */
     private buildLabel;
     /**
      * After clustering completes, send sample records per cluster to an LLM for naming.
@@ -87,6 +96,22 @@ export declare class ClusterVisualizationResourceComponent extends BaseResourceC
     private requestClusterLabelsFromLLM;
     /** Build a text block describing sample records per cluster for the LLM prompt */
     private buildClusterDataForPrompt;
+    /**
+     * Handle inline label edits from the scatter component legend.
+     * Updates the ClusterLabels cache and marks the label as user-edited.
+     */
+    OnLabelEdited(event: {
+        ClusterId: number;
+        OldLabel: string;
+        NewLabel: string;
+    }): void;
+    /**
+     * Compute the prioritized field order and display names from entity metadata.
+     * Sets both FieldPriority and FieldDisplayNames.
+     * Returns field names sorted: IsNameField first, then DefaultInView by Sequence,
+     * then remaining fields by Sequence.
+     */
+    private ComputeFieldPriority;
     /** Apply cluster labels to the result's Clusters array (sets the Label property) */
     private applyLabelsToResult;
     /**
@@ -96,6 +121,16 @@ export declare class ClusterVisualizationResourceComponent extends BaseResourceC
     private stripVectorsFromResult;
     /** Load saved visualizations from UserInfoEngine settings */
     private loadSavedVisualizations;
+    /**
+     * Auto-save the current session to localStorage so it can be restored
+     * when the user navigates away and comes back.
+     */
+    private saveLastSession;
+    /**
+     * Restore the last session from localStorage if no saved visualization is active.
+     * This handles the "navigate away and come back" case.
+     */
+    private restoreLastSession;
     /** Persist saved visualizations to UserInfoEngine settings */
     private persistSavedVisualizations;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClusterVisualizationResourceComponent, never>;

package/dist/KnowledgeHub/components/clusters/cluster-visualization-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cluster-visualization-resource.component.d.ts","sourceRoot":"","sources":["../../../../src/KnowledgeHub/components/clusters/cluster-visualization-resource.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cluster-visualization-resource.component.d.ts","sourceRoot":"","sources":["../../../../src/KnowledgeHub/components/clusters/cluster-visualization-resource.component.ts"],"names":[],"mappings":"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"}

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

@@ -29,7 +29,6 @@ import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-clustering";
 const _c0 = ["scatterPlot"];
 const _c1 = () => [];
-const _c2 = () => ["Entity", "Name", "Description"];
 function ClusterVisualizationResourceComponent_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 16);
@@ -103,7 +102,25 @@ function ClusterVisualizationResourceComponent_Conditional_17_Template(rf, ctx)
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r3.ComputationTimeFormatted);
 } }
-const SAVED_CLUSTERS_KEY = 'KnowledgeHub_SavedClusters';
+/**
+ * Build an environment-scoped storage key so cluster data does not bleed
+ * across different database environments that share the same browser.
+ * Uses the GraphQL endpoint origin as the environment fingerprint.
+ */
+function buildEnvScopedKey(base) {
+    try {
+        const origin = Metadata.Provider.ConfigData?.URL;
+        if (origin) {
+            // Use just the origin portion (protocol + host) so path differences don't fragment keys
+            const url = new URL(origin);
+            return `${base}_${url.origin}`;
+        }
+    }
+    catch { /* fall through */ }
+    return base;
+}
+const SAVED_CLUSTERS_BASE_KEY = 'KnowledgeHub_SavedClusters';
+const LAST_SESSION_BASE_KEY = 'KnowledgeHub_LastClusterSession';
 let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceComponent extends BaseResourceComponent {
     scatterPlot;
     cdr = inject(ChangeDetectorRef);
@@ -136,6 +153,10 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
     EntityOptions = [];
     /** Entity document options for the selected entity (shown when 2+) */
     EntityDocOptions = [];
+    /** Ordered field keys for prioritized display in scatter tooltip/detail */
+    FieldPriority = [];
+    /** Map of field names to human-readable display names */
+    FieldDisplayNames = {};
     // Saved visualizations
     SavedVisualizations = [];
     ActiveSavedId = null;
@@ -147,8 +168,17 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
     async ngAfterViewInit() {
         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();
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -179,6 +209,8 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         this.IsRunning = true;
         this.ActiveConfig = config;
         this.ClusterLabels = [];
+        // Auto-hide detail panel from previous visualization
+        this.scatterPlot?.CloseDetailPanel();
         // Update entity doc options if entity changed
         this.updateEntityDocOptions(config.EntityName);
         this.cdr.detectChanges();
@@ -188,9 +220,12 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
             // Run clustering (client-side UMAP + K-Means/DBSCAN)
             this.Result = await this.clusteringService.RunClustering(vectors, config);
             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).
             // Clusters render immediately; labels appear when LLM responds.
             this.requestClusterLabelsFromLLM().catch(err => console.warn('[ClusterVisualization] Background naming failed:', err));
+            // Auto-save session state so it can be restored after navigation
+            this.saveLastSession();
         }
         catch (error) {
             console.error('[ClusterVisualization] Pipeline error:', error);
@@ -242,6 +277,7 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
     }
     /** Select a saved visualization — restore from cache if available, otherwise re-run */
     async OnSelectSaved(saved) {
+        this.scatterPlot?.CloseDetailPanel();
         this.ActiveSavedId = saved.Id;
         this.VisualizationTitle = saved.Name;
         // Reconstruct config
@@ -282,6 +318,7 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
     }
     /** Start a new analysis (clear current) */
     OnNewAnalysis() {
+        this.scatterPlot?.CloseDetailPanel();
         this.ActiveSavedId = null;
         this.Result = null;
         this.ClusterLabels = [];
@@ -399,10 +436,38 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
             return {};
         }
     }
-    /** Build a human-readable label from vector metadata (prefers Name field, falls back to RecordID) */
+    /**
+     * Build a human-readable label from vector metadata using entity field metadata.
+     * Combines all IsNameField fields in Sequence order (e.g., "Sarah Chen" from FirstName + LastName).
+     * Falls back to heuristic field detection when entity metadata isn't available.
+     */
     buildLabel(metadata) {
-        // The vector sync process stores display fields directly in metadata.
-        // Prefer Name, then Title, then Description, then fall back to RecordID.
+        const entityName = metadata['Entity'];
+        if (entityName) {
+            try {
+                const md = new Metadata();
+                const entityInfo = md.Entities.find(e => e.Name === entityName);
+                if (entityInfo) {
+                    // Combine all IsNameField fields in Sequence order
+                    const nameFields = entityInfo.Fields
+                        .filter(f => f.IsNameField)
+                        .sort((a, b) => (a.Sequence ?? 9999) - (b.Sequence ?? 9999));
+                    if (nameFields.length > 0) {
+                        const parts = nameFields
+                            .map(f => metadata[f.Name])
+                            .filter(v => v != null && v.trim() !== '');
+                        if (parts.length > 0)
+                            return parts.join(' ');
+                    }
+                    // Single NameField fallback
+                    if (entityInfo.NameField && metadata[entityInfo.NameField.Name]) {
+                        return metadata[entityInfo.NameField.Name];
+                    }
+                }
+            }
+            catch { /* metadata not available, fall through */ }
+        }
+        // Heuristic fallbacks
         return metadata['Name']
             || metadata['Title']
             || metadata['Description']?.substring(0, 60)
@@ -475,6 +540,62 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         }
         return lines.join('\n');
     }
+    /**
+     * Handle inline label edits from the scatter component legend.
+     * Updates the ClusterLabels cache and marks the label as user-edited.
+     */
+    OnLabelEdited(event) {
+        const existing = this.ClusterLabels.find(l => l.ClusterId === event.ClusterId);
+        if (existing) {
+            existing.Label = event.NewLabel;
+            existing.IsUserEdited = true;
+        }
+        else {
+            this.ClusterLabels.push({
+                ClusterId: event.ClusterId,
+                Label: event.NewLabel,
+                IsUserEdited: true,
+            });
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Compute the prioritized field order and display names from entity metadata.
+     * Sets both FieldPriority and FieldDisplayNames.
+     * Returns field names sorted: IsNameField first, then DefaultInView by Sequence,
+     * then remaining fields by Sequence.
+     */
+    ComputeFieldPriority(entityName) {
+        try {
+            const md = new Metadata();
+            const entityInfo = md.Entities.find(e => e.Name === entityName);
+            if (!entityInfo)
+                return [];
+            const internalKeys = new Set([
+                'ID', 'Entity', 'EntityIcon', 'RecordID', 'TemplateID',
+                '__mj_UpdatedAt', '__mj_CreatedAt',
+            ]);
+            // Build display names map
+            const displayNames = {};
+            for (const f of entityInfo.Fields) {
+                displayNames[f.Name] = f.DisplayNameOrName;
+            }
+            this.FieldDisplayNames = displayNames;
+            return entityInfo.Fields
+                .filter(f => !internalKeys.has(f.Name) && !f.IsVirtual && !f.IsPrimaryKey)
+                .sort((a, b) => {
+                if (a.IsNameField !== b.IsNameField)
+                    return a.IsNameField ? -1 : 1;
+                if (a.DefaultInView !== b.DefaultInView)
+                    return a.DefaultInView ? -1 : 1;
+                return (a.Sequence ?? 9999) - (b.Sequence ?? 9999);
+            })
+                .map(f => f.Name);
+        }
+        catch {
+            return [];
+        }
+    }
     /** Apply cluster labels to the result's Clusters array (sets the Label property) */
     applyLabelsToResult() {
         if (!this.Result || this.ClusterLabels.length === 0)
@@ -502,8 +623,9 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
     /** Load saved visualizations from UserInfoEngine settings */
     loadSavedVisualizations() {
         try {
+            const key = buildEnvScopedKey(SAVED_CLUSTERS_BASE_KEY);
             const engine = UserInfoEngine.Instance;
-            const setting = engine.UserSettings.find(s => s.Setting === SAVED_CLUSTERS_KEY);
+            const setting = engine.UserSettings.find(s => s.Setting === key);
             if (setting?.Value) {
                 this.userSettingEntity = setting;
                 this.SavedVisualizations = JSON.parse(setting.Value);
@@ -515,6 +637,57 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         }
         this.cdr.detectChanges();
     }
+    /**
+     * Auto-save the current session to localStorage so it can be restored
+     * when the user navigates away and comes back.
+     */
+    saveLastSession() {
+        if (!this.Result)
+            return;
+        try {
+            const session = {
+                Result: this.stripVectorsFromResult(this.Result),
+                ClusterLabels: this.ClusterLabels,
+                Config: this.ActiveConfig,
+                Title: this.VisualizationTitle,
+                Viewport: this.scatterPlot?.GetViewportTransform() ?? null,
+            };
+            localStorage.setItem(buildEnvScopedKey(LAST_SESSION_BASE_KEY), JSON.stringify(session));
+        }
+        catch {
+            // localStorage quota exceeded or not available — non-critical
+        }
+    }
+    /**
+     * Restore the last session from localStorage if no saved visualization is active.
+     * This handles the "navigate away and come back" case.
+     */
+    restoreLastSession() {
+        if (this.Result || this.ActiveSavedId)
+            return; // Already showing something
+        try {
+            const raw = localStorage.getItem(buildEnvScopedKey(LAST_SESSION_BASE_KEY));
+            if (!raw)
+                return;
+            const session = JSON.parse(raw);
+            this.Result = session.Result;
+            this.ClusterLabels = session.ClusterLabels ?? [];
+            this.ActiveConfig = session.Config;
+            this.VisualizationTitle = session.Title ?? 'Restored Session';
+            this.FieldPriority = this.ComputeFieldPriority(session.Config.EntityName);
+            this.applyLabelsToResult();
+            this.cdr.detectChanges();
+            // Restore viewport after a tick to let the scatter component render
+            if (session.Viewport) {
+                setTimeout(() => {
+                    this.scatterPlot?.SetViewportTransform(session.Viewport);
+                }, 50);
+            }
+        }
+        catch {
+            localStorage.removeItem(buildEnvScopedKey(LAST_SESSION_BASE_KEY));
+        }
+    }
     /** Persist saved visualizations to UserInfoEngine settings */
     async persistSavedVisualizations() {
         try {
@@ -523,15 +696,16 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
             if (!userId)
                 return;
             if (!this.userSettingEntity) {
+                const key = buildEnvScopedKey(SAVED_CLUSTERS_BASE_KEY);
                 const engine = UserInfoEngine.Instance;
-                const existing = engine.UserSettings.find(s => s.Setting === SAVED_CLUSTERS_KEY);
+                const existing = engine.UserSettings.find(s => s.Setting === key);
                 if (existing) {
                     this.userSettingEntity = existing;
                 }
                 else {
                     this.userSettingEntity = await md.GetEntityObject('MJ: User Settings');
                     this.userSettingEntity.UserID = userId;
-                    this.userSettingEntity.Setting = SAVED_CLUSTERS_KEY;
+                    this.userSettingEntity.Setting = buildEnvScopedKey(SAVED_CLUSTERS_BASE_KEY);
                 }
             }
             this.userSettingEntity.Value = JSON.stringify(this.SavedVisualizations);
@@ -547,7 +721,7 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scatterPlot = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 22, vars: 14, consts: [["scatterPlot", ""], [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, "new-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "main-area"], [1, "topbar"], [1, "topbar-title"], [1, "scatter-area"], [3, "PointClicked", "PointHovered", "OpenRecordRequested", "Points", "Clusters", "IsLoading", "TooltipFields"], [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) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 22, vars: 13, consts: [["scatterPlot", ""], [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, "new-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [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, "div", 1)(1, "div", 2)(2, "div", 3)(3, "h2");
             i0.ɵɵelement(4, "i", 4);
@@ -568,7 +742,7 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
             i0.ɵɵconditionalCreate(17, ClusterVisualizationResourceComponent_Conditional_17_Template, 20, 6);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(18, "div", 13)(19, "mj-cluster-scatter", 14, 0);
-            i0.ɵɵlistener("PointClicked", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_PointClicked_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPointClicked($event)); })("PointHovered", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_PointHovered_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPointHovered($event)); })("OpenRecordRequested", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_OpenRecordRequested_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnOpenRecord($event)); });
+            i0.ɵɵlistener("PointClicked", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_PointClicked_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPointClicked($event)); })("PointHovered", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_PointHovered_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPointHovered($event)); })("OpenRecordRequested", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_OpenRecordRequested_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnOpenRecord($event)); })("LabelEdited", function ClusterVisualizationResourceComponent_Template_mj_cluster_scatter_LabelEdited_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnLabelEdited($event)); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(21, "mj-cluster-config-panel", 15);
             i0.ɵɵlistener("RunClustering", function ClusterVisualizationResourceComponent_Template_mj_cluster_config_panel_RunClustering_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnRunClustering($event)); })("SaveVisualization", function ClusterVisualizationResourceComponent_Template_mj_cluster_config_panel_SaveVisualization_21_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnSaveVisualization()); });
@@ -583,7 +757,7 @@ let ClusterVisualizationResourceComponent = class ClusterVisualizationResourceCo
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.HasResult ? 17 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("Points", (ctx.Result == null ? null : ctx.Result.Points) ?? i0.ɵɵpureFunction0(11, _c1))("Clusters", (ctx.Result == null ? null : ctx.Result.Clusters) ?? i0.ɵɵpureFunction0(12, _c1))("IsLoading", ctx.IsRunning)("TooltipFields", i0.ɵɵpureFunction0(13, _c2));
+            i0.ɵɵproperty("Points", (ctx.Result == null ? null : ctx.Result.Points) ?? i0.ɵɵpureFunction0(11, _c1))("Clusters", (ctx.Result == null ? null : ctx.Result.Clusters) ?? i0.ɵɵpureFunction0(12, _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.ClusterScatterComponent, i1.ClusterConfigPanelComponent], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    width: 100%;\n    height: 100%;\n}\n\n.cluster-viz-container[_ngcontent-%COMP%] {\n    display: flex;\n    width: 100%;\n    height: 100%;\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}"] });
@@ -594,12 +768,12 @@ ClusterVisualizationResourceComponent = __decorate([
 export { ClusterVisualizationResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ClusterVisualizationResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-cluster-visualization-resource', template: "<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        <button class=\"new-btn\" (click)=\"OnNewAnalysis()\">\n            <i class=\"fa-solid fa-plus\"></i> New Cluster Analysis\n        </button>\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                [TooltipFields]=\"['Entity', 'Name', 'Description']\"\n                (PointClicked)=\"OnPointClicked($event)\"\n                (PointHovered)=\"OnPointHovered($event)\"\n                (OpenRecordRequested)=\"OnOpenRecord($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", styles: [":host {\n    display: flex;\n    width: 100%;\n    height: 100%;\n}\n\n.cluster-viz-container {\n    display: flex;\n    width: 100%;\n    height: 100%;\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: "<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        <button class=\"new-btn\" (click)=\"OnNewAnalysis()\">\n            <i class=\"fa-solid fa-plus\"></i> New Cluster Analysis\n        </button>\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", styles: [":host {\n    display: flex;\n    width: 100%;\n    height: 100%;\n}\n\n.cluster-viz-container {\n    display: flex;\n    width: 100%;\n    height: 100%;\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"] }]
     }], null, { scatterPlot: [{
             type: ViewChild,
             args: ['scatterPlot']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ClusterVisualizationResourceComponent, { className: "ClusterVisualizationResourceComponent", filePath: "src/KnowledgeHub/components/clusters/cluster-visualization-resource.component.ts", lineNumber: 44 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ClusterVisualizationResourceComponent, { className: "ClusterVisualizationResourceComponent", filePath: "src/KnowledgeHub/components/clusters/cluster-visualization-resource.component.ts", lineNumber: 63 }); })();
 /** Tree-shaking prevention */
 export function LoadClusterVisualizationResource() {
     // Prevents tree-shaking of the component