@memberjunction/ng-graph-view 0.0.0 → 6.1.0-edge.4

package/dist/lib/components/graph-view.component.js

@@ -0,0 +1,1285 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
+import * as d3 from 'd3';
+import { BeforeNodeSelectEventArgs, NodeSelectedEventArgs, BeforeEdgeSelectEventArgs, EdgeSelectedEventArgs, BeforeHopExpandEventArgs, HopExpandedEventArgs, BeforeLayoutChangeEventArgs, LayoutChangedEventArgs, BeforeNodeNavigateEventArgs, NodeNavigatedEventArgs, ViewportTransformEventArgs } from '../events/graph-events';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _c0 = ["wrapper"];
+const _c1 = ["svgCanvas"];
+const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.Category;
+function GraphViewComponent_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "div", 10);
+    i0.ɵɵelementStart(1, "div", 23);
+    i0.ɵɵelement(2, "i", 24);
+    i0.ɵɵelementStart(3, "input", 25);
+    i0.ɵɵtwoWayListener("ngModelChange", function GraphViewComponent_Conditional_2_Conditional_20_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.SearchQuery, $event) || (ctx_r2.SearchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function GraphViewComponent_Conditional_2_Conditional_20_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SearchNodes($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.SearchQuery);
+} }
+function GraphViewComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "span", 8);
+    i0.ɵɵelement(2, "i", 9);
+    i0.ɵɵtext(3, " Network Graph ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "div", 10);
+    i0.ɵɵelementStart(5, "button", 11);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetLayoutMode("force")); });
+    i0.ɵɵelement(6, "i", 12);
+    i0.ɵɵtext(7, " Force ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 13);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_2_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetLayoutMode("circular")); });
+    i0.ɵɵelement(9, "i", 14);
+    i0.ɵɵtext(10, " Circular ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(11, "div", 10);
+    i0.ɵɵelementStart(12, "button", 15);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_2_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomIn()); });
+    i0.ɵɵelement(13, "i", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 17);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ZoomOut()); });
+    i0.ɵɵelement(15, "i", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 19);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_2_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.FitToView()); });
+    i0.ɵɵelement(17, "i", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 21);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_2_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Rearrange()); });
+    i0.ɵɵelement(19, "i", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(20, GraphViewComponent_Conditional_2_Conditional_20_Template, 4, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("active", ctx_r2.LayoutMode === "force");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r2.LayoutMode === "circular");
+    i0.ɵɵadvance(12);
+    i0.ɵɵconditional(ctx_r2.Searchable ? 20 : -1);
+} }
+function GraphViewComponent_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "div", 27);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cat_r5 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", cat_r5.Color);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", cat_r5.Label, " ");
+} }
+function GraphViewComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵrepeaterCreate(1, GraphViewComponent_Conditional_3_For_2_Template, 3, 3, "div", 26, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.ActiveCategories);
+} }
+function GraphViewComponent_Conditional_4_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵtext(1, "Current Record");
+    i0.ɵɵelementEnd();
+} }
+function GraphViewComponent_Conditional_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_4_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(ctx_r2.SelectedNode)); });
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵtext(2, " Open Entity Form ");
+    i0.ɵɵelementEnd();
+} }
+function GraphViewComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 28)(2, "span", 29);
+    i0.ɵɵtext(3, "Node Inspector");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 30);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_4_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ClearSelection()); });
+    i0.ɵɵelement(5, "i", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 32)(7, "div", 33);
+    i0.ɵɵelement(8, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 34)(10, "div", 35);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 36)(13, "span", 37);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(15, GraphViewComponent_Conditional_4_Conditional_15_Template, 2, 0, "span", 38);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "div", 39);
+    i0.ɵɵtext(17, " Direct Connected Edges: ");
+    i0.ɵɵelementStart(18, "strong");
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 40);
+    i0.ɵɵconditionalCreate(21, GraphViewComponent_Conditional_4_Conditional_21_Template, 3, 0, "button", 41);
+    i0.ɵɵelementStart(22, "button", 42);
+    i0.ɵɵlistener("click", function GraphViewComponent_Conditional_4_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ExpandHops(ctx_r2.SelectedNode.ID, 1)); });
+    i0.ɵɵelement(23, "i", 43);
+    i0.ɵɵtext(24, " Expand 1-Hop Neighbors ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵstyleProp("background", ctx_r2.GetNodeColor(ctx_r2.SelectedNode));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.GetNodeIcon(ctx_r2.SelectedNode));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.SelectedNode.Label, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.SelectedNode.Sublabel || ctx_r2.SelectedNode.Category, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsFocalNode(ctx_r2.SelectedNode) ? 15 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.GetNodeEdgeCount(ctx_r2.SelectedNode.ID));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r2.IsFocalNode(ctx_r2.SelectedNode) ? 21 : -1);
+} }
+function GraphViewComponent_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "g")(1, "line", 46);
+    i0.ɵɵlistener("click", function GraphViewComponent_For_9_Template_line_click_1_listener($event) { const edge_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnEdgeClick(edge_r9, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "text", 47);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const edge_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("is-highlighted", ctx_r2.IsEdgeHighlighted(edge_r9));
+    i0.ɵɵattribute("x1", ctx_r2.GetNodeX(edge_r9.SourceID))("y1", ctx_r2.GetNodeY(edge_r9.SourceID))("x2", ctx_r2.GetNodeX(edge_r9.TargetID))("y2", ctx_r2.GetNodeY(edge_r9.TargetID));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", (ctx_r2.GetNodeX(edge_r9.SourceID) + ctx_r2.GetNodeX(edge_r9.TargetID)) / 2)("y", (ctx_r2.GetNodeY(edge_r9.SourceID) + ctx_r2.GetNodeY(edge_r9.TargetID)) / 2 - 4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", edge_r9.Label, " ");
+} }
+function GraphViewComponent_For_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "circle", 49);
+} }
+function GraphViewComponent_For_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "circle", 50);
+} }
+function GraphViewComponent_For_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "text", 53);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r11 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("y", (node_r11.Radius || 26) + 28);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.TruncateLabel(node_r11.Sublabel, 20), " ");
+} }
+function GraphViewComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "g", 48);
+    i0.ɵɵlistener("mousedown", function GraphViewComponent_For_11_Template_g_mousedown_0_listener($event) { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnNodeMouseDown(node_r11, $event)); })("click", function GraphViewComponent_For_11_Template_g_click_0_listener($event) { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnNodeClick(node_r11, $event)); })("dblclick", function GraphViewComponent_For_11_Template_g_dblclick_0_listener() { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(node_r11)); });
+    i0.ɵɵconditionalCreate(1, GraphViewComponent_For_11_Conditional_1_Template, 1, 0, ":svg:circle", 49)(2, GraphViewComponent_For_11_Conditional_2_Template, 1, 0, ":svg:circle", 50);
+    i0.ɵɵelement(3, "circle", 51)(4, "circle");
+    i0.ɵɵelementStart(5, "text", 52);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, GraphViewComponent_For_11_Conditional_7_Template, 2, 2, ":svg:text", 53);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r11 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("transform", "translate(" + (node_r11.X || 0) + "," + (node_r11.Y || 0) + ")");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsNodeSelected(node_r11) ? 1 : ctx_r2.IsFocalNode(node_r11) ? 2 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("r", node_r11.Radius || 26)("stroke", ctx_r2.GetNodeColor(node_r11));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("r", (node_r11.Radius || 26) - 8)("fill", ctx_r2.GetNodeColor(node_r11));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("y", (node_r11.Radius || 26) + 16);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.TruncateLabel(node_r11.Label, 18), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r11.Sublabel ? 7 : -1);
+} }
+export const DEFAULT_GRAPH_CATEGORIES = [
+    { Category: 'person', Label: 'Person', Color: '#10b981', IconClass: 'fa-solid fa-user' },
+    { Category: 'organization', Label: 'Organization', Color: '#38bdf8', IconClass: 'fa-solid fa-building' },
+    { Category: 'committee', Label: 'Committee', Color: '#8b5cf6', IconClass: 'fa-solid fa-landmark' },
+    { Category: 'account', Label: 'Holding / Account', Color: '#f59e0b', IconClass: 'fa-solid fa-building-flag' },
+    { Category: 'asset', Label: 'Asset', Color: '#ec4899', IconClass: 'fa-solid fa-gem' },
+    { Category: 'group', Label: 'Group', Color: '#06b6d4', IconClass: 'fa-solid fa-users' },
+    { Category: 'custom', Label: 'Custom', Color: '#64748b', IconClass: 'fa-solid fa-circle-nodes' }
+];
+const DYNAMIC_CATEGORY_PALETTE = [
+    '#10b981', '#38bdf8', '#8b5cf6', '#f59e0b', '#ec4899',
+    '#06b6d4', '#84cc16', '#f43f5e', '#a855f7', '#14b8a6'
+];
+const GRAPH_VIEW_CSS = `
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background: var(--mj-bg-surface-sunken, #0b1220);
+    border-radius: var(--mj-radius-lg, 12px);
+    border: 1px solid var(--mj-border-default, #223254);
+    user-select: none;
+}
+
+.mj-graph-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.mj-graph-svg-canvas {
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+}
+
+.mj-graph-svg-canvas.is-panning {
+    cursor: grabbing;
+}
+
+/* Floating Toolbar */
+.mj-graph-toolbar {
+    position: absolute;
+    top: 14px;
+    left: 14px;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(20, 31, 54, 0.88);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--mj-border-default, #223254);
+    padding: 6px 12px;
+    border-radius: var(--mj-radius-lg, 10px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.mj-graph-tool-btn {
+    background: var(--mj-bg-surface-elevated, #1a2744);
+    border: 1px solid var(--mj-border-default, #223254);
+    color: var(--mj-text-primary, #f8fafc);
+    border-radius: 6px;
+    padding: 5px 10px;
+    font-size: 11.5px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.15s ease;
+}
+
+.mj-graph-tool-btn:hover {
+    border-color: var(--mj-brand-primary, #38bdf8);
+    background: var(--mj-border-hover, #334876);
+}
+
+.mj-graph-tool-btn.active {
+    background: var(--mj-brand-primary, #38bdf8);
+    color: #090e1a;
+    border-color: var(--mj-brand-primary, #38bdf8);
+}
+
+.mj-graph-separator {
+    width: 1px;
+    height: 18px;
+    background: var(--mj-border-default, #223254);
+}
+
+.mj-graph-search-input {
+    background: var(--mj-bg-surface-sunken, #090e1a);
+    border: 1px solid var(--mj-border-default, #223254);
+    border-radius: 6px;
+    color: var(--mj-text-primary, #f8fafc);
+    padding: 4px 8px 4px 24px;
+    font-size: 11.5px;
+    width: 150px;
+}
+
+.mj-graph-search-input:focus {
+    outline: none;
+    border-color: var(--mj-brand-primary, #38bdf8);
+    width: 190px;
+}
+
+/* Floating Legend */
+.mj-graph-legend {
+    position: absolute;
+    bottom: 14px;
+    left: 14px;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(20, 31, 54, 0.88);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--mj-border-default, #223254);
+    padding: 6px 14px;
+    border-radius: var(--mj-radius-lg, 10px);
+    font-size: 11.5px;
+    color: var(--mj-text-secondary, #94a3b8);
+}
+
+.mj-graph-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.mj-graph-legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+/* Inspector Drawer */
+.mj-graph-inspector {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 300px;
+    max-height: calc(100% - 28px);
+    background: rgba(20, 31, 54, 0.95);
+    backdrop-filter: blur(14px);
+    border: 1px solid var(--mj-border-default, #223254);
+    border-radius: var(--mj-radius-lg, 12px);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    z-index: 25;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    animation: mjGraphSlide 0.2s ease;
+}
+
+.mj-graph-inspector-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mj-graph-inspector-title {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--mj-text-muted, #64748b);
+}
+
+.mj-graph-inspector-close {
+    background: none;
+    border: none;
+    color: var(--mj-text-muted, #64748b);
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.mj-graph-inspector-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: var(--mj-bg-surface, #111a2e);
+    border: 1px solid var(--mj-border-default, #223254);
+    border-radius: 8px;
+    padding: 10px 12px;
+}
+
+.mj-graph-inspector-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    color: #fff;
+    flex-shrink: 0;
+}
+
+.mj-graph-inspector-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 4px;
+}
+
+/* SVG Rendering Elements */
+.mj-edge-path {
+    stroke: var(--mj-border-hover, #2d416b);
+    stroke-width: 2;
+    fill: none;
+    transition: stroke 0.2s ease;
+}
+
+.mj-edge-path.is-highlighted {
+    stroke: var(--mj-brand-primary, #38bdf8);
+    stroke-width: 3;
+}
+
+.mj-edge-text {
+    font-size: 10px;
+    font-weight: 500;
+    fill: var(--mj-text-muted, #64748b);
+    text-anchor: middle;
+    pointer-events: none;
+    paint-order: stroke;
+    stroke: var(--mj-bg-surface-sunken, #0b1220);
+    stroke-width: 3px;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+}
+
+.mj-node-group {
+    cursor: pointer;
+    transition: transform 0.1s ease;
+}
+
+.mj-node-group:hover .mj-node-circle {
+    filter: drop-shadow(0 0 10px var(--mj-brand-primary, #38bdf8));
+}
+
+.mj-node-circle {
+    transition: all 0.2s ease;
+}
+
+.mj-node-label {
+    font-size: 11px;
+    font-weight: 700;
+    fill: var(--mj-text-primary, #f8fafc);
+    text-anchor: middle;
+    pointer-events: none;
+}
+
+.mj-node-sublabel {
+    font-size: 9.5px;
+    font-weight: 500;
+    fill: var(--mj-text-secondary, #94a3b8);
+    text-anchor: middle;
+    pointer-events: none;
+}
+
+@keyframes mjGraphSlide {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+`;
+/**
+ * `<mj-graph-view>` — Interactive network and entity relationship graph visualization.
+ *
+ * Supports force-directed dynamic layout, multi-category entity badges, hop-expansion,
+ * zoom/pan controls, inspector drawer, search filters, and cancelable Before/After event pairs.
+ */
+export class GraphViewComponent {
+    cdr = inject(ChangeDetectorRef);
+    WrapperRef;
+    CanvasRef;
+    // ── Inputs ────────────────────────────────────────────────────────
+    Nodes = [];
+    Edges = [];
+    Categories = DEFAULT_GRAPH_CATEGORIES;
+    LayoutMode = 'force';
+    MaxHopDistance = 2;
+    SelectedNodeId;
+    FocalNodeId;
+    AutoOpenInspector = false;
+    ShowToolbar = true;
+    ShowLegend = true;
+    ShowInspector = true;
+    Searchable = true;
+    AutoFitOnLoad = true;
+    Physics = {
+        Repulsion: -500,
+        LinkDistance: 130,
+        Gravity: 0.05,
+        Damping: 0.88,
+        MaxIterations: 200
+    };
+    // ── Cancelable Before/After Outputs ────────────────────────────────
+    BeforeNodeSelect = new EventEmitter();
+    NodeSelected = new EventEmitter();
+    BeforeEdgeSelect = new EventEmitter();
+    EdgeSelected = new EventEmitter();
+    BeforeHopExpand = new EventEmitter();
+    HopExpanded = new EventEmitter();
+    BeforeLayoutChange = new EventEmitter();
+    LayoutChanged = new EventEmitter();
+    BeforeNodeNavigate = new EventEmitter();
+    NodeNavigated = new EventEmitter();
+    ViewportTransform = new EventEmitter();
+    // ── Internal State ────────────────────────────────────────────────
+    FilteredNodes = [];
+    SelectedNode = null;
+    SelectedEdge = null;
+    SearchQuery = '';
+    Scale = 1.0;
+    PanX = 200;
+    PanY = 150;
+    IsPanning = false;
+    panStartX = 0;
+    panStartY = 0;
+    draggedNode = null;
+    simulation = null;
+    ngOnInit() {
+        this.InitializePositions();
+        this.ApplyFilters();
+        this.SimulatePhysics();
+    }
+    ngOnChanges(changes) {
+        if (changes['Nodes'] || changes['Edges']) {
+            this.InitializePositions();
+            this.ApplyFilters();
+            this.SimulatePhysics();
+        }
+        if (changes['SelectedNodeId'] && this.SelectedNodeId) {
+            const found = this.Nodes.find(n => UUIDsEqual(n.ID, this.SelectedNodeId));
+            if (found && this.AutoOpenInspector) {
+                this.SelectedNode = found;
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.simulation) {
+            this.simulation.stop();
+            this.simulation = null;
+        }
+    }
+    // ── Positioning & D3 Physics Engine ──────────────────────────────────
+    InitializePositions() {
+        const cx = this.GetContainerWidth() / 2 || 400;
+        const cy = this.GetContainerHeight() / 2 || 250;
+        const count = this.Nodes.length || 1;
+        this.Nodes.forEach((node, idx) => {
+            if (node.x === undefined || node.y === undefined) {
+                if (node.X !== undefined && node.Y !== undefined) {
+                    node.x = node.X;
+                    node.y = node.Y;
+                }
+                else {
+                    const angle = (idx / count) * 2 * Math.PI;
+                    const r = 100 + Math.random() * 60;
+                    node.x = cx + r * Math.cos(angle);
+                    node.y = cy + r * Math.sin(angle);
+                    node.X = node.x;
+                    node.Y = node.y;
+                }
+                node.vx = 0;
+                node.vy = 0;
+                node.VX = 0;
+                node.VY = 0;
+            }
+        });
+    }
+    SimulatePhysics() {
+        if (this.LayoutMode === 'circular') {
+            this.ApplyCircularLayout();
+            if (this.AutoFitOnLoad) {
+                this.AutoFitToView();
+            }
+            this.cdr.markForCheck();
+            return;
+        }
+        if (this.simulation) {
+            this.simulation.stop();
+            this.simulation = null;
+        }
+        const cx = this.GetContainerWidth() / 2 || 400;
+        const cy = this.GetContainerHeight() / 2 || 250;
+        // Resolve endpoints to node objects so a case-skewed UUID or dangling
+        // edge cannot throw "node not found" out of ngOnInit. Raw-string
+        // .id(d => d.ID) compared with ===, which UUIDsEqual elsewhere
+        // deliberately does not.
+        const nodeById = new Map();
+        for (const node of this.Nodes) {
+            const key = NormalizeUUID(node.ID);
+            if (key) {
+                nodeById.set(key, node);
+            }
+        }
+        const links = [];
+        for (const edge of this.Edges) {
+            const source = nodeById.get(NormalizeUUID(edge.SourceID));
+            const target = nodeById.get(NormalizeUUID(edge.TargetID));
+            if (source && target) {
+                links.push({ source, target });
+            }
+        }
+        this.simulation = d3.forceSimulation(this.Nodes)
+            .force('link', d3.forceLink(links)
+            .distance(this.Physics.LinkDistance || 120))
+            .force('charge', d3.forceManyBody()
+            .strength(this.Physics.Repulsion || -450)
+            .distanceMax(700))
+            .force('collide', d3.forceCollide((d) => (d.Radius || 26) + 16).iterations(2))
+            .force('center', d3.forceCenter(cx, cy));
+        // Headless Pre-Warming: run 80 ticks synchronously in memory so the SVG renders resting immediately
+        this.simulation.stop();
+        for (let i = 0; i < 90; ++i) {
+            this.simulation.tick();
+        }
+        this.SyncCoordinates();
+        // Auto-center & fit into view
+        if (this.AutoFitOnLoad) {
+            this.AutoFitToView();
+        }
+        // Attach live tick handler for interactive drag & drop
+        this.simulation.on('tick', () => {
+            this.SyncCoordinates();
+            this.cdr.markForCheck();
+        });
+        this.cdr.markForCheck();
+    }
+    SyncCoordinates() {
+        for (const n of this.Nodes) {
+            n.X = n.x;
+            n.Y = n.y;
+            n.VX = n.vx;
+            n.VY = n.vy;
+        }
+    }
+    ApplyCircularLayout() {
+        const cx = this.GetContainerWidth() / 2 || 400;
+        const cy = this.GetContainerHeight() / 2 || 250;
+        const r = Math.min(cx, cy) * 0.7 || 160;
+        const count = this.Nodes.length || 1;
+        this.Nodes.forEach((node, idx) => {
+            const angle = (idx / count) * 2 * Math.PI;
+            node.x = cx + r * Math.cos(angle);
+            node.y = cy + r * Math.sin(angle);
+            node.X = node.x;
+            node.Y = node.y;
+        });
+    }
+    // ── Public Programmatic Methods ───────────────────────────────────
+    ZoomIn() {
+        this.Scale = Math.min(this.Scale * 1.2, 3.0);
+        this.EmitViewport();
+    }
+    ZoomOut() {
+        this.Scale = Math.max(this.Scale / 1.2, 0.3);
+        this.EmitViewport();
+    }
+    FitToView() {
+        this.AutoFitToView(40);
+    }
+    AutoFitToView(padding = 40) {
+        if (!this.Nodes || this.Nodes.length === 0)
+            return;
+        const width = this.GetContainerWidth() || 800;
+        const height = this.GetContainerHeight() || 420;
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        for (const n of this.Nodes) {
+            const nx = n.x ?? n.X ?? 0;
+            const ny = n.y ?? n.Y ?? 0;
+            const r = (n.Radius || 26) + 20; // include badge & labels
+            if (nx - r < minX)
+                minX = nx - r;
+            if (nx + r > maxX)
+                maxX = nx + r;
+            if (ny - r < minY)
+                minY = ny - r;
+            if (ny + r > maxY)
+                maxY = ny + r;
+        }
+        if (!isFinite(minX) || !isFinite(maxX) || !isFinite(minY) || !isFinite(maxY))
+            return;
+        const bboxW = Math.max(maxX - minX, 100);
+        const bboxH = Math.max(maxY - minY, 100);
+        const scaleX = (width - padding * 2) / bboxW;
+        const scaleY = (height - padding * 2) / bboxH;
+        const targetScale = Math.min(Math.max(Math.min(scaleX, scaleY), 0.4), 1.25);
+        this.Scale = targetScale;
+        this.PanX = (width - (minX + maxX) * this.Scale) / 2;
+        this.PanY = (height - (minY + maxY) * this.Scale) / 2;
+        this.EmitViewport();
+        this.cdr.markForCheck();
+    }
+    Rearrange() {
+        this.InitializePositions();
+        this.SimulatePhysics();
+    }
+    SetLayoutMode(mode) {
+        const beforeEvent = new BeforeLayoutChangeEventArgs(mode, this.LayoutMode);
+        this.BeforeLayoutChange.emit(beforeEvent);
+        if (beforeEvent.Cancel)
+            return;
+        const prev = this.LayoutMode;
+        this.LayoutMode = mode;
+        this.SimulatePhysics();
+        this.LayoutChanged.emit(new LayoutChangedEventArgs(mode, prev));
+    }
+    SelectNode(id) {
+        const node = this.Nodes.find(n => UUIDsEqual(n.ID, id));
+        if (node)
+            this.OnNodeClick(node, new MouseEvent('click'));
+    }
+    ClearSelection() {
+        this.SelectedNode = null;
+        this.SelectedEdge = null;
+        this.cdr.markForCheck();
+    }
+    SearchNodes(query) {
+        this.SearchQuery = query;
+        this.ApplyFilters();
+    }
+    ExpandHops(nodeId, depth) {
+        const node = this.Nodes.find(n => UUIDsEqual(n.ID, nodeId));
+        if (!node)
+            return;
+        const beforeEvent = new BeforeHopExpandEventArgs(node, (node.HopDistance || 0) + depth, node.HopDistance || 0);
+        this.BeforeHopExpand.emit(beforeEvent);
+        if (beforeEvent.Cancel)
+            return;
+        // Fire after event for host listener to fetch incremental relations
+        this.HopExpanded.emit(new HopExpandedEventArgs(node, [], [], (node.HopDistance || 0) + depth));
+    }
+    // ── Event Handlers ────────────────────────────────────────────────
+    OnNodeClick(node, event) {
+        event.stopPropagation();
+        const beforeEvent = new BeforeNodeSelectEventArgs(node, this.SelectedNode);
+        this.BeforeNodeSelect.emit(beforeEvent);
+        if (beforeEvent.Cancel)
+            return;
+        const prev = this.SelectedNode;
+        this.SelectedNode = node;
+        this.SelectedEdge = null;
+        this.NodeSelected.emit(new NodeSelectedEventArgs(node, prev));
+        this.cdr.markForCheck();
+    }
+    OnEdgeClick(edge, event) {
+        event.stopPropagation();
+        const src = this.Nodes.find(n => UUIDsEqual(n.ID, edge.SourceID)) || null;
+        const tgt = this.Nodes.find(n => UUIDsEqual(n.ID, edge.TargetID)) || null;
+        const beforeEvent = new BeforeEdgeSelectEventArgs(edge, src, tgt);
+        this.BeforeEdgeSelect.emit(beforeEvent);
+        if (beforeEvent.Cancel)
+            return;
+        this.SelectedEdge = edge;
+        this.EdgeSelected.emit(new EdgeSelectedEventArgs(edge, src, tgt));
+        this.cdr.markForCheck();
+    }
+    NavigateToEntity(node) {
+        // Focal-node dblclick must not navigate away from the record this
+        // graph is illustrating — the inspector already hides the navigate
+        // button for the same reason.
+        if (this.IsFocalNode(node)) {
+            return;
+        }
+        const rawId = this.stripCategoryPrefix(String(node.Data?.['ID'] || node.ID));
+        const entityName = String(node.Data?.['EntityName'] || (node.Category === 'person' ? 'MJ_BizApps_Common: People' : 'MJ_BizApps_Common: Organizations'));
+        const beforeEvent = new BeforeNodeNavigateEventArgs(node, entityName, rawId);
+        this.BeforeNodeNavigate.emit(beforeEvent);
+        if (beforeEvent.Cancel)
+            return;
+        // Hosts navigate. This widget is L1 and must not import Explorer's
+        // NavigationService — emit the intent and let the surface open the record.
+        this.NodeNavigated.emit(new NodeNavigatedEventArgs(node, entityName, rawId));
+    }
+    // ── Mouse Drag & Pan Handlers ─────────────────────────────────────
+    OnCanvasMouseDown(event) {
+        if (event.target === this.CanvasRef.nativeElement || event.target.tagName === 'svg') {
+            this.IsPanning = true;
+            this.panStartX = event.clientX - this.PanX;
+            this.panStartY = event.clientY - this.PanY;
+        }
+    }
+    OnCanvasMouseMove(event) {
+        if (this.IsPanning) {
+            this.PanX = event.clientX - this.panStartX;
+            this.PanY = event.clientY - this.panStartY;
+            this.EmitViewport();
+            this.cdr.markForCheck();
+        }
+        else if (this.draggedNode) {
+            const coords = this.GetCanvasRelativeCoords(event);
+            this.draggedNode.fx = coords.x;
+            this.draggedNode.fy = coords.y;
+            this.draggedNode.x = coords.x;
+            this.draggedNode.y = coords.y;
+            this.draggedNode.X = coords.x;
+            this.draggedNode.Y = coords.y;
+            this.cdr.markForCheck();
+        }
+    }
+    OnCanvasMouseUp(_event) {
+        this.IsPanning = false;
+        if (this.draggedNode) {
+            this.draggedNode.fx = null;
+            this.draggedNode.fy = null;
+            this.draggedNode = null;
+            if (this.simulation) {
+                this.simulation.alphaTarget(0);
+            }
+        }
+    }
+    OnCanvasWheel(event) {
+        event.preventDefault();
+        const delta = event.deltaY > 0 ? 0.9 : 1.1;
+        this.Scale = Math.min(Math.max(this.Scale * delta, 0.3), 3.0);
+        this.EmitViewport();
+        this.cdr.markForCheck();
+    }
+    OnNodeMouseDown(node, event) {
+        event.stopPropagation();
+        this.draggedNode = node;
+        node.fx = node.x ?? node.X;
+        node.fy = node.y ?? node.Y;
+        if (this.simulation) {
+            this.simulation.alphaTarget(0.3).restart();
+        }
+    }
+    EmitViewport() {
+        this.ViewportTransform.emit(new ViewportTransformEventArgs({ Scale: this.Scale, PanX: this.PanX, PanY: this.PanY }));
+        this.cdr.markForCheck();
+    }
+    GetCanvasRelativeCoords(event) {
+        const canvas = this.CanvasRef?.nativeElement;
+        if (!canvas) {
+            return {
+                x: (event.clientX - this.PanX) / this.Scale,
+                y: (event.clientY - this.PanY) / this.Scale
+            };
+        }
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        return {
+            x: (mouseX - this.PanX) / this.Scale,
+            y: (mouseY - this.PanY) / this.Scale
+        };
+    }
+    GetContainerWidth() {
+        return this.CanvasRef?.nativeElement?.clientWidth || this.WrapperRef?.nativeElement?.clientWidth || 800;
+    }
+    GetContainerHeight() {
+        return this.CanvasRef?.nativeElement?.clientHeight || this.WrapperRef?.nativeElement?.clientHeight || 420;
+    }
+    // ── Helpers ───────────────────────────────────────────────────────
+    ApplyFilters() {
+        const q = this.SearchQuery.trim().toLowerCase();
+        this.FilteredNodes = this.Nodes.filter(n => {
+            return !q || n.Label.toLowerCase().includes(q) || (n.Sublabel && n.Sublabel.toLowerCase().includes(q));
+        });
+        this.cdr.markForCheck();
+    }
+    GetNodeX(id) {
+        const node = this.Nodes.find(n => UUIDsEqual(n.ID, id));
+        return node ? (node.X ?? node.x ?? 0) : 0;
+    }
+    GetNodeY(id) {
+        const node = this.Nodes.find(n => UUIDsEqual(n.ID, id));
+        return node ? (node.Y ?? node.y ?? 0) : 0;
+    }
+    GetCategoryConfig(category) {
+        const key = String(category || '').toLowerCase();
+        const found = this.Categories?.find(c => c.Category.toLowerCase() === key);
+        if (found)
+            return found;
+        const builtin = DEFAULT_GRAPH_CATEGORIES.find(c => c.Category.toLowerCase() === key);
+        if (builtin)
+            return builtin;
+        // Deterministic palette hash for arbitrary consumer-defined categories
+        const hash = Math.abs(key.split('').reduce((acc, ch) => ((acc << 5) - acc) + ch.charCodeAt(0), 0));
+        const fallbackColor = DYNAMIC_CATEGORY_PALETTE[hash % DYNAMIC_CATEGORY_PALETTE.length];
+        const formattedLabel = category ? category.charAt(0).toUpperCase() + category.slice(1) : 'Item';
+        return {
+            Category: category || 'custom',
+            Label: formattedLabel,
+            Color: fallbackColor,
+            IconClass: 'fa-solid fa-circle-dot'
+        };
+    }
+    get ActiveCategories() {
+        const present = new Set();
+        for (const n of this.Nodes) {
+            if (n.Category)
+                present.add(n.Category.toLowerCase());
+        }
+        const result = [];
+        for (const catKey of present) {
+            result.push(this.GetCategoryConfig(catKey));
+        }
+        return result;
+    }
+    GetCategoryLabel(category) {
+        return this.GetCategoryConfig(category).Label;
+    }
+    GetNodeColor(node) {
+        return node.Color ?? this.GetCategoryConfig(node.Category).Color;
+    }
+    GetNodeIcon(node) {
+        return node.IconClass ?? this.GetCategoryConfig(node.Category).IconClass ?? 'fa-solid fa-circle-dot';
+    }
+    GetNodeEdgeCount(id) {
+        return this.Edges.filter(e => UUIDsEqual(e.SourceID, id) || UUIDsEqual(e.TargetID, id)).length;
+    }
+    IsEdgeHighlighted(edge) {
+        return UUIDsEqual(this.SelectedEdge?.ID, edge.ID) ||
+            UUIDsEqual(this.SelectedNode?.ID, edge.SourceID) ||
+            UUIDsEqual(this.SelectedNode?.ID, edge.TargetID);
+    }
+    /**
+     * Whether this node is the selected one. Exists as a method because the template cannot call
+     * an imported function directly, and the comparison must go through UUIDsEqual rather than ===.
+     */
+    IsNodeSelected(node) {
+        return UUIDsEqual(this.SelectedNode?.ID, node.ID);
+    }
+    TruncateLabel(text, maxLen) {
+        if (!text)
+            return '';
+        return text.length > maxLen ? text.substring(0, maxLen - 1) + '…' : text;
+    }
+    IsFocalNode(node) {
+        if (!node || !this.FocalNodeId)
+            return false;
+        const focalClean = this.stripCategoryPrefix(this.FocalNodeId).toLowerCase();
+        const nodeClean = this.stripCategoryPrefix(node.ID).toLowerCase();
+        const dataClean = node.Data?.['ID'] ? String(node.Data['ID']).toLowerCase() : '';
+        return UUIDsEqual(node.ID, this.FocalNodeId) || nodeClean === focalClean || dataClean === focalClean;
+    }
+    /**
+     * Hosts prefix node IDs with `{category}:`. Categories are dynamic
+     * (`organization`, `asset`, `group`, plus caller keys), so strip any
+     * known-category prefix rather than a hardcoded subset.
+     */
+    stripCategoryPrefix(id) {
+        const idx = id.indexOf(':');
+        if (idx <= 0) {
+            return id;
+        }
+        const prefix = id.slice(0, idx).toLowerCase();
+        const known = this.Categories?.some(c => c.Category.toLowerCase() === prefix) ||
+            DEFAULT_GRAPH_CATEGORIES.some(c => c.Category.toLowerCase() === prefix);
+        return known ? id.slice(idx + 1) : id;
+    }
+    static ɵfac = function GraphViewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GraphViewComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GraphViewComponent, selectors: [["mj-graph-view"]], viewQuery: function GraphViewComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 7)(_c1, 7);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.WrapperRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CanvasRef = _t.first);
+        } }, inputs: { Nodes: "Nodes", Edges: "Edges", Categories: "Categories", LayoutMode: "LayoutMode", MaxHopDistance: "MaxHopDistance", SelectedNodeId: "SelectedNodeId", FocalNodeId: "FocalNodeId", AutoOpenInspector: "AutoOpenInspector", ShowToolbar: "ShowToolbar", ShowLegend: "ShowLegend", ShowInspector: "ShowInspector", Searchable: "Searchable", AutoFitOnLoad: "AutoFitOnLoad", Physics: "Physics" }, outputs: { BeforeNodeSelect: "BeforeNodeSelect", NodeSelected: "NodeSelected", BeforeEdgeSelect: "BeforeEdgeSelect", EdgeSelected: "EdgeSelected", BeforeHopExpand: "BeforeHopExpand", HopExpanded: "HopExpanded", BeforeLayoutChange: "BeforeLayoutChange", LayoutChanged: "LayoutChanged", BeforeNodeNavigate: "BeforeNodeNavigate", NodeNavigated: "NodeNavigated", ViewportTransform: "ViewportTransform" }, features: [i0.ɵɵNgOnChangesFeature], decls: 12, vars: 6, consts: [["wrapper", ""], ["svgCanvas", ""], [1, "mj-graph-wrapper"], [1, "mj-graph-toolbar"], [1, "mj-graph-legend"], [1, "mj-graph-inspector"], [1, "mj-graph-svg-canvas", 3, "mousedown", "mousemove", "mouseup", "mouseleave", "wheel"], [1, "mj-node-group"], [2, "font-size", "12px", "font-weight", "700", "color", "#fff", "display", "flex", "align-items", "center", "gap", "6px"], [1, "fa-solid", "fa-circle-nodes", 2, "color", "var(--mj-brand-primary)"], [1, "mj-graph-separator"], ["type", "button", "title", "Force-Directed Physics", 1, "mj-graph-tool-btn", 3, "click"], [1, "fa-solid", "fa-atom"], ["type", "button", "title", "Circular Layout", 1, "mj-graph-tool-btn", 3, "click"], [1, "fa-solid", "fa-circle-notch"], ["type", "button", "title", "Zoom In", 1, "mj-graph-tool-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["type", "button", "title", "Zoom Out", 1, "mj-graph-tool-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-minus"], ["type", "button", "title", "Fit View", 1, "mj-graph-tool-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["type", "button", "title", "Re-simulate Physics", 1, "mj-graph-tool-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [2, "position", "relative"], [1, "fa-solid", "fa-magnifying-glass", 2, "position", "absolute", "left", "8px", "top", "50%", "transform", "translateY(-50%)", "font-size", "10px", "color", "var(--mj-text-muted)"], ["placeholder", "Search graph nodes...", 1, "mj-graph-search-input", 3, "ngModelChange", "ngModel"], [1, "mj-graph-legend-item"], [1, "mj-graph-legend-dot"], [1, "mj-graph-inspector-header"], [1, "mj-graph-inspector-title"], ["type", "button", 1, "mj-graph-inspector-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mj-graph-inspector-card"], [1, "mj-graph-inspector-avatar"], [2, "overflow", "hidden", "flex", "1"], [2, "font-size", "13px", "font-weight", "700", "color", "#fff", "text-overflow", "ellipsis", "overflow", "hidden", "white-space", "nowrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "margin-top", "3px"], [2, "font-size", "11px", "color", "var(--mj-text-secondary)"], [2, "font-size", "10px", "padding", "1px 6px", "border-radius", "9999px", "background", "rgba(56, 189, 248, 0.15)", "color", "#38bdf8", "font-weight", "600", "border", "1px solid rgba(56, 189, 248, 0.3)"], [2, "font-size", "11.5px", "color", "var(--mj-text-secondary)", "line-height", "1.45"], [1, "mj-graph-inspector-actions"], ["type", "button", 1, "mj-graph-tool-btn", "active", 2, "justify-content", "center", "width", "100%"], ["type", "button", 1, "mj-graph-tool-btn", 2, "justify-content", "center", "width", "100%", 3, "click"], [1, "fa-solid", "fa-circle-nodes"], ["type", "button", 1, "mj-graph-tool-btn", "active", 2, "justify-content", "center", "width", "100%", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "mj-edge-path", 3, "click"], [1, "mj-edge-text"], [1, "mj-node-group", 3, "mousedown", "click", "dblclick"], ["r", "36", "fill", "rgba(56, 189, 248, 0.2)", "stroke", "#38bdf8", "stroke-width", "2"], ["r", "34", "fill", "none", "stroke", "rgba(56, 189, 248, 0.45)", "stroke-width", "2", "stroke-dasharray", "4 3"], ["fill", "#141f36", "stroke-width", "3", 1, "mj-node-circle"], [1, "mj-node-label"], [1, "mj-node-sublabel"]], template: function GraphViewComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2, 0);
+            i0.ɵɵconditionalCreate(2, GraphViewComponent_Conditional_2_Template, 21, 5, "div", 3);
+            i0.ɵɵconditionalCreate(3, GraphViewComponent_Conditional_3_Template, 3, 0, "div", 4);
+            i0.ɵɵconditionalCreate(4, GraphViewComponent_Conditional_4_Template, 25, 9, "div", 5);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(5, "svg", 6, 1);
+            i0.ɵɵlistener("mousedown", function GraphViewComponent_Template_svg_mousedown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCanvasMouseDown($event)); })("mousemove", function GraphViewComponent_Template_svg_mousemove_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCanvasMouseMove($event)); })("mouseup", function GraphViewComponent_Template_svg_mouseup_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCanvasMouseUp($event)); })("mouseleave", function GraphViewComponent_Template_svg_mouseleave_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCanvasMouseUp($event)); })("wheel", function GraphViewComponent_Template_svg_wheel_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCanvasWheel($event)); });
+            i0.ɵɵelementStart(7, "g");
+            i0.ɵɵrepeaterCreate(8, GraphViewComponent_For_9_Template, 4, 9, ":svg:g", null, _forTrack0);
+            i0.ɵɵrepeaterCreate(10, GraphViewComponent_For_11_Template, 8, 9, ":svg:g", 7, _forTrack0);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.ShowToolbar ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowLegend && ctx.ActiveCategories.length > 0 ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowInspector && ctx.SelectedNode ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("is-panning", ctx.IsPanning);
+            i0.ɵɵadvance(2);
+            i0.ɵɵattribute("transform", "translate(" + ctx.PanX + "," + ctx.PanY + ") scale(" + ctx.Scale + ")");
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.Edges);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.FilteredNodes);
+        } }, dependencies: [CommonModule, FormsModule, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["[_nghost-%COMP%] {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    border-radius: var(--mj-radius-lg, 12px);\n    border: 1px solid var(--mj-border-default, #223254);\n    user-select: none;\n}\n\n.mj-graph-wrapper[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.mj-graph-svg-canvas[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    cursor: grab;\n}\n\n.mj-graph-svg-canvas.is-panning[_ngcontent-%COMP%] {\n    cursor: grabbing;\n}\n\n\n\n.mj-graph-toolbar[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 14px;\n    left: 14px;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: rgba(20, 31, 54, 0.88);\n    backdrop-filter: blur(10px);\n    border: 1px solid var(--mj-border-default, #223254);\n    padding: 6px 12px;\n    border-radius: var(--mj-radius-lg, 10px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n}\n\n.mj-graph-tool-btn[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border: 1px solid var(--mj-border-default, #223254);\n    color: var(--mj-text-primary, #f8fafc);\n    border-radius: 6px;\n    padding: 5px 10px;\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s ease;\n}\n\n.mj-graph-tool-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    background: var(--mj-border-hover, #334876);\n}\n\n.mj-graph-tool-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: #090e1a;\n    border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.mj-graph-separator[_ngcontent-%COMP%] {\n    width: 1px;\n    height: 18px;\n    background: var(--mj-border-default, #223254);\n}\n\n.mj-graph-search-input[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken, #090e1a);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 6px;\n    color: var(--mj-text-primary, #f8fafc);\n    padding: 4px 8px 4px 24px;\n    font-size: 11.5px;\n    width: 150px;\n}\n\n.mj-graph-search-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary, #38bdf8);\n    width: 190px;\n}\n\n\n\n.mj-graph-legend[_ngcontent-%COMP%] {\n    position: absolute;\n    bottom: 14px;\n    left: 14px;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: rgba(20, 31, 54, 0.88);\n    backdrop-filter: blur(10px);\n    border: 1px solid var(--mj-border-default, #223254);\n    padding: 6px 14px;\n    border-radius: var(--mj-radius-lg, 10px);\n    font-size: 11.5px;\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.mj-graph-legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.mj-graph-legend-dot[_ngcontent-%COMP%] {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n}\n\n\n\n.mj-graph-inspector[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 300px;\n    max-height: calc(100% - 28px);\n    background: rgba(20, 31, 54, 0.95);\n    backdrop-filter: blur(14px);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-lg, 12px);\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    z-index: 25;\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    animation: _ngcontent-%COMP%_mjGraphSlide 0.2s ease;\n}\n\n.mj-graph-inspector-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.mj-graph-inspector-title[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-graph-inspector-close[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.mj-graph-inspector-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: var(--mj-bg-surface, #111a2e);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 8px;\n    padding: 10px 12px;\n}\n\n.mj-graph-inspector-avatar[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    color: #fff;\n    flex-shrink: 0;\n}\n\n.mj-graph-inspector-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n\n\n.mj-edge-path[_ngcontent-%COMP%] {\n    stroke: var(--mj-border-hover, #2d416b);\n    stroke-width: 2;\n    fill: none;\n    transition: stroke 0.2s ease;\n}\n\n.mj-edge-path.is-highlighted[_ngcontent-%COMP%] {\n    stroke: var(--mj-brand-primary, #38bdf8);\n    stroke-width: 3;\n}\n\n.mj-edge-text[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 500;\n    fill: var(--mj-text-muted, #64748b);\n    text-anchor: middle;\n    pointer-events: none;\n    paint-order: stroke;\n    stroke: var(--mj-bg-surface-sunken, #0b1220);\n    stroke-width: 3px;\n    stroke-linecap: butt;\n    stroke-linejoin: miter;\n}\n\n.mj-node-group[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: transform 0.1s ease;\n}\n\n.mj-node-group[_ngcontent-%COMP%]:hover   .mj-node-circle[_ngcontent-%COMP%] {\n    filter: drop-shadow(0 0 10px var(--mj-brand-primary, #38bdf8));\n}\n\n.mj-node-circle[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}\n\n.mj-node-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    fill: var(--mj-text-primary, #f8fafc);\n    text-anchor: middle;\n    pointer-events: none;\n}\n\n.mj-node-sublabel[_ngcontent-%COMP%] {\n    font-size: 9.5px;\n    font-weight: 500;\n    fill: var(--mj-text-secondary, #94a3b8);\n    text-anchor: middle;\n    pointer-events: none;\n}\n\n@keyframes _ngcontent-%COMP%_mjGraphSlide {\n    from { opacity: 0; transform: translateX(20px); }\n    to { opacity: 1; transform: translateX(0); }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GraphViewComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-graph-view', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="mj-graph-wrapper" #wrapper>
+            <!-- 1. Floating Action Toolbar -->
+            @if (ShowToolbar) {
+                <div class="mj-graph-toolbar">
+                    <span style="font-size: 12px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px;">
+                        <i class="fa-solid fa-circle-nodes" style="color: var(--mj-brand-primary);"></i>
+                        Network Graph
+                    </span>
+
+                    <div class="mj-graph-separator"></div>
+
+                    <!-- Layout Mode Selector -->
+                    <button
+                        type="button"
+                        class="mj-graph-tool-btn"
+                        [class.active]="LayoutMode === 'force'"
+                        (click)="SetLayoutMode('force')"
+                        title="Force-Directed Physics">
+                        <i class="fa-solid fa-atom"></i> Force
+                    </button>
+                    <button
+                        type="button"
+                        class="mj-graph-tool-btn"
+                        [class.active]="LayoutMode === 'circular'"
+                        (click)="SetLayoutMode('circular')"
+                        title="Circular Layout">
+                        <i class="fa-solid fa-circle-notch"></i> Circular
+                    </button>
+
+                    <div class="mj-graph-separator"></div>
+
+                    <!-- Zoom Controls -->
+                    <button type="button" class="mj-graph-tool-btn" (click)="ZoomIn()" title="Zoom In">
+                        <i class="fa-solid fa-magnifying-glass-plus"></i>
+                    </button>
+                    <button type="button" class="mj-graph-tool-btn" (click)="ZoomOut()" title="Zoom Out">
+                        <i class="fa-solid fa-magnifying-glass-minus"></i>
+                    </button>
+                    <button type="button" class="mj-graph-tool-btn" (click)="FitToView()" title="Fit View">
+                        <i class="fa-solid fa-expand"></i>
+                    </button>
+                    <button type="button" class="mj-graph-tool-btn" (click)="Rearrange()" title="Re-simulate Physics">
+                        <i class="fa-solid fa-arrows-rotate"></i>
+                    </button>
+
+                    @if (Searchable) {
+                        <div class="mj-graph-separator"></div>
+                        <div style="position: relative;">
+                            <i class="fa-solid fa-magnifying-glass" style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--mj-text-muted);"></i>
+                            <input
+                                class="mj-graph-search-input"
+                                [(ngModel)]="SearchQuery"
+                                (ngModelChange)="SearchNodes($event)"
+                                placeholder="Search graph nodes..." />
+                        </div>
+                    }
+                </div>
+            }
+
+            <!-- 2. Floating Dynamic Category Legend -->
+            @if (ShowLegend && ActiveCategories.length > 0) {
+                <div class="mj-graph-legend">
+                    @for (cat of ActiveCategories; track cat.Category) {
+                        <div class="mj-graph-legend-item">
+                            <div class="mj-graph-legend-dot" [style.background]="cat.Color"></div>
+                            {{ cat.Label }}
+                        </div>
+                    }
+                </div>
+            }
+
+            <!-- 3. Selected Node Inspector Drawer -->
+            @if (ShowInspector && SelectedNode) {
+                <div class="mj-graph-inspector">
+                    <div class="mj-graph-inspector-header">
+                        <span class="mj-graph-inspector-title">Node Inspector</span>
+                        <button class="mj-graph-inspector-close" type="button" (click)="ClearSelection()">
+                            <i class="fa-solid fa-xmark"></i>
+                        </button>
+                    </div>
+
+                    <div class="mj-graph-inspector-card">
+                        <div class="mj-graph-inspector-avatar" [style.background]="GetNodeColor(SelectedNode)">
+                            <i [class]="GetNodeIcon(SelectedNode)"></i>
+                        </div>
+                        <div style="overflow: hidden; flex: 1;">
+                            <div style="font-size: 13px; font-weight: 700; color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
+                                {{ SelectedNode.Label }}
+                            </div>
+                            <div style="display: flex; align-items: center; gap: 6px; margin-top: 3px;">
+                                <span style="font-size: 11px; color: var(--mj-text-secondary);">
+                                    {{ SelectedNode.Sublabel || SelectedNode.Category }}
+                                </span>
+                                @if (IsFocalNode(SelectedNode)) {
+                                    <span style="font-size: 10px; padding: 1px 6px; border-radius: 9999px; background: rgba(56, 189, 248, 0.15); color: #38bdf8; font-weight: 600; border: 1px solid rgba(56, 189, 248, 0.3);">Current Record</span>
+                                }
+                            </div>
+                        </div>
+                    </div>
+
+                    <div style="font-size: 11.5px; color: var(--mj-text-secondary); line-height: 1.45;">
+                        Direct Connected Edges: <strong>{{ GetNodeEdgeCount(SelectedNode.ID) }}</strong>
+                    </div>
+
+                    <div class="mj-graph-inspector-actions">
+                        @if (!IsFocalNode(SelectedNode)) {
+                            <button
+                                type="button"
+                                class="mj-graph-tool-btn active"
+                                style="justify-content: center; width: 100%;"
+                                (click)="NavigateToEntity(SelectedNode)">
+                                <i class="fa-solid fa-arrow-up-right-from-square"></i> Open Entity Form
+                            </button>
+                        }
+                        <button
+                            type="button"
+                            class="mj-graph-tool-btn"
+                            style="justify-content: center; width: 100%;"
+                            (click)="ExpandHops(SelectedNode.ID, 1)">
+                            <i class="fa-solid fa-circle-nodes"></i> Expand 1-Hop Neighbors
+                        </button>
+                    </div>
+                </div>
+            }
+
+            <!-- 4. Interactive SVG Graph Canvas -->
+            <svg
+                #svgCanvas
+                class="mj-graph-svg-canvas"
+                [class.is-panning]="IsPanning"
+                (mousedown)="OnCanvasMouseDown($event)"
+                (mousemove)="OnCanvasMouseMove($event)"
+                (mouseup)="OnCanvasMouseUp($event)"
+                (mouseleave)="OnCanvasMouseUp($event)"
+                (wheel)="OnCanvasWheel($event)">
+
+                <g [attr.transform]="'translate(' + PanX + ',' + PanY + ') scale(' + Scale + ')'">
+                    <!-- Edges Layer -->
+                    @for (edge of Edges; track edge.ID) {
+                        <g>
+                            <line
+                                class="mj-edge-path"
+                                [class.is-highlighted]="IsEdgeHighlighted(edge)"
+                                [attr.x1]="GetNodeX(edge.SourceID)"
+                                [attr.y1]="GetNodeY(edge.SourceID)"
+                                [attr.x2]="GetNodeX(edge.TargetID)"
+                                [attr.y2]="GetNodeY(edge.TargetID)"
+                                (click)="OnEdgeClick(edge, $event)">
+                            </line>
+                            <text
+                                class="mj-edge-text"
+                                [attr.x]="(GetNodeX(edge.SourceID) + GetNodeX(edge.TargetID)) / 2"
+                                [attr.y]="(GetNodeY(edge.SourceID) + GetNodeY(edge.TargetID)) / 2 - 4">
+                                {{ edge.Label }}
+                            </text>
+                        </g>
+                    }
+
+                    <!-- Nodes Layer -->
+                    @for (node of FilteredNodes; track node.ID) {
+                        <g
+                            class="mj-node-group"
+                            [attr.transform]="'translate(' + (node.X || 0) + ',' + (node.Y || 0) + ')'"
+                            (mousedown)="OnNodeMouseDown(node, $event)"
+                            (click)="OnNodeClick(node, $event)"
+                            (dblclick)="NavigateToEntity(node)">
+
+                            <!-- Outer Selection / Focal Halo -->
+                            @if (IsNodeSelected(node)) {
+                                <circle r="36" fill="rgba(56, 189, 248, 0.2)" stroke="#38bdf8" stroke-width="2"></circle>
+                            } @else if (IsFocalNode(node)) {
+                                <circle r="34" fill="none" stroke="rgba(56, 189, 248, 0.45)" stroke-width="2" stroke-dasharray="4 3"></circle>
+                            }
+
+                            <!-- Node Body Circle -->
+                            <circle
+                                class="mj-node-circle"
+                                [attr.r]="node.Radius || 26"
+                                fill="#141f36"
+                                [attr.stroke]="GetNodeColor(node)"
+                                stroke-width="3">
+                            </circle>
+
+                            <!-- Node Icon Center -->
+                            <circle [attr.r]="(node.Radius || 26) - 8" [attr.fill]="GetNodeColor(node)"></circle>
+
+                            <!-- Labels -->
+                            <text class="mj-node-label" [attr.y]="(node.Radius || 26) + 16">
+                                {{ TruncateLabel(node.Label, 18) }}
+                            </text>
+                            @if (node.Sublabel) {
+                                <text class="mj-node-sublabel" [attr.y]="(node.Radius || 26) + 28">
+                                    {{ TruncateLabel(node.Sublabel, 20) }}
+                                </text>
+                            }
+                        </g>
+                    }
+                </g>
+            </svg>
+        </div>
+    `, styles: ["\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    border-radius: var(--mj-radius-lg, 12px);\n    border: 1px solid var(--mj-border-default, #223254);\n    user-select: none;\n}\n\n.mj-graph-wrapper {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.mj-graph-svg-canvas {\n    width: 100%;\n    height: 100%;\n    cursor: grab;\n}\n\n.mj-graph-svg-canvas.is-panning {\n    cursor: grabbing;\n}\n\n/* Floating Toolbar */\n.mj-graph-toolbar {\n    position: absolute;\n    top: 14px;\n    left: 14px;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: rgba(20, 31, 54, 0.88);\n    backdrop-filter: blur(10px);\n    border: 1px solid var(--mj-border-default, #223254);\n    padding: 6px 12px;\n    border-radius: var(--mj-radius-lg, 10px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n}\n\n.mj-graph-tool-btn {\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border: 1px solid var(--mj-border-default, #223254);\n    color: var(--mj-text-primary, #f8fafc);\n    border-radius: 6px;\n    padding: 5px 10px;\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s ease;\n}\n\n.mj-graph-tool-btn:hover {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    background: var(--mj-border-hover, #334876);\n}\n\n.mj-graph-tool-btn.active {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: #090e1a;\n    border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.mj-graph-separator {\n    width: 1px;\n    height: 18px;\n    background: var(--mj-border-default, #223254);\n}\n\n.mj-graph-search-input {\n    background: var(--mj-bg-surface-sunken, #090e1a);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 6px;\n    color: var(--mj-text-primary, #f8fafc);\n    padding: 4px 8px 4px 24px;\n    font-size: 11.5px;\n    width: 150px;\n}\n\n.mj-graph-search-input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary, #38bdf8);\n    width: 190px;\n}\n\n/* Floating Legend */\n.mj-graph-legend {\n    position: absolute;\n    bottom: 14px;\n    left: 14px;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: rgba(20, 31, 54, 0.88);\n    backdrop-filter: blur(10px);\n    border: 1px solid var(--mj-border-default, #223254);\n    padding: 6px 14px;\n    border-radius: var(--mj-radius-lg, 10px);\n    font-size: 11.5px;\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.mj-graph-legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.mj-graph-legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n}\n\n/* Inspector Drawer */\n.mj-graph-inspector {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 300px;\n    max-height: calc(100% - 28px);\n    background: rgba(20, 31, 54, 0.95);\n    backdrop-filter: blur(14px);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-lg, 12px);\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    z-index: 25;\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    animation: mjGraphSlide 0.2s ease;\n}\n\n.mj-graph-inspector-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.mj-graph-inspector-title {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-graph-inspector-close {\n    background: none;\n    border: none;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.mj-graph-inspector-card {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: var(--mj-bg-surface, #111a2e);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 8px;\n    padding: 10px 12px;\n}\n\n.mj-graph-inspector-avatar {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    color: #fff;\n    flex-shrink: 0;\n}\n\n.mj-graph-inspector-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 4px;\n}\n\n/* SVG Rendering Elements */\n.mj-edge-path {\n    stroke: var(--mj-border-hover, #2d416b);\n    stroke-width: 2;\n    fill: none;\n    transition: stroke 0.2s ease;\n}\n\n.mj-edge-path.is-highlighted {\n    stroke: var(--mj-brand-primary, #38bdf8);\n    stroke-width: 3;\n}\n\n.mj-edge-text {\n    font-size: 10px;\n    font-weight: 500;\n    fill: var(--mj-text-muted, #64748b);\n    text-anchor: middle;\n    pointer-events: none;\n    paint-order: stroke;\n    stroke: var(--mj-bg-surface-sunken, #0b1220);\n    stroke-width: 3px;\n    stroke-linecap: butt;\n    stroke-linejoin: miter;\n}\n\n.mj-node-group {\n    cursor: pointer;\n    transition: transform 0.1s ease;\n}\n\n.mj-node-group:hover .mj-node-circle {\n    filter: drop-shadow(0 0 10px var(--mj-brand-primary, #38bdf8));\n}\n\n.mj-node-circle {\n    transition: all 0.2s ease;\n}\n\n.mj-node-label {\n    font-size: 11px;\n    font-weight: 700;\n    fill: var(--mj-text-primary, #f8fafc);\n    text-anchor: middle;\n    pointer-events: none;\n}\n\n.mj-node-sublabel {\n    font-size: 9.5px;\n    font-weight: 500;\n    fill: var(--mj-text-secondary, #94a3b8);\n    text-anchor: middle;\n    pointer-events: none;\n}\n\n@keyframes mjGraphSlide {\n    from { opacity: 0; transform: translateX(20px); }\n    to { opacity: 1; transform: translateX(0); }\n}\n"] }]
+    }], null, { WrapperRef: [{
+            type: ViewChild,
+            args: ['wrapper', { static: true }]
+        }], CanvasRef: [{
+            type: ViewChild,
+            args: ['svgCanvas', { static: true }]
+        }], Nodes: [{
+            type: Input
+        }], Edges: [{
+            type: Input
+        }], Categories: [{
+            type: Input
+        }], LayoutMode: [{
+            type: Input
+        }], MaxHopDistance: [{
+            type: Input
+        }], SelectedNodeId: [{
+            type: Input
+        }], FocalNodeId: [{
+            type: Input
+        }], AutoOpenInspector: [{
+            type: Input
+        }], ShowToolbar: [{
+            type: Input
+        }], ShowLegend: [{
+            type: Input
+        }], ShowInspector: [{
+            type: Input
+        }], Searchable: [{
+            type: Input
+        }], AutoFitOnLoad: [{
+            type: Input
+        }], Physics: [{
+            type: Input
+        }], BeforeNodeSelect: [{
+            type: Output
+        }], NodeSelected: [{
+            type: Output
+        }], BeforeEdgeSelect: [{
+            type: Output
+        }], EdgeSelected: [{
+            type: Output
+        }], BeforeHopExpand: [{
+            type: Output
+        }], HopExpanded: [{
+            type: Output
+        }], BeforeLayoutChange: [{
+            type: Output
+        }], LayoutChanged: [{
+            type: Output
+        }], BeforeNodeNavigate: [{
+            type: Output
+        }], NodeNavigated: [{
+            type: Output
+        }], ViewportTransform: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GraphViewComponent, { className: "GraphViewComponent", filePath: "src/lib/components/graph-view.component.ts", lineNumber: 534 }); })();
+//# sourceMappingURL=graph-view.component.js.map