@memberjunction/ng-dashboards 2.42.0

package/dist/EntityAdmin/components/erd-diagram.component.js

@@ -0,0 +1,618 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import * as d3 from 'd3';
+import * as i0 from "@angular/core";
+const _c0 = ["erdContainer"];
+export class ERDDiagramComponent {
+    constructor() {
+        this.filteredEntities = [];
+        this.allEntityFields = [];
+        this.isRefreshingERD = false;
+        this.selectedEntityId = null;
+        this.entitySelected = new EventEmitter();
+        this.entityDeselected = new EventEmitter();
+        this.refreshERD = new EventEmitter();
+        this.nodes = [];
+        this.links = [];
+        this.lastKnownSize = { width: 0, height: 0 };
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.setupERD();
+        }, 100);
+        // Add resize observer to handle container size changes
+        this.setupResizeObserver();
+    }
+    ngOnChanges(changes) {
+        if (changes['filteredEntities'] && !changes['filteredEntities'].firstChange) {
+            this.setupERD();
+        }
+        if (changes['selectedEntityId'] && !changes['selectedEntityId'].firstChange) {
+            this.updateSelectionHighlighting();
+        }
+    }
+    ngOnDestroy() {
+        if (this.simulation) {
+            this.simulation.stop();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+    }
+    zoomIn() {
+        if (this.zoom) {
+            this.svg.transition().duration(300).call(this.zoom.scaleBy, 1.5);
+        }
+    }
+    zoomOut() {
+        if (this.zoom) {
+            this.svg.transition().duration(300).call(this.zoom.scaleBy, 0.67);
+        }
+    }
+    resetZoom() {
+        if (this.zoom) {
+            this.svg.transition().duration(500).call(this.zoom.transform, d3.zoomIdentity);
+        }
+    }
+    setupERD() {
+        var _a;
+        if (!((_a = this.erdContainer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            return;
+        }
+        this.clearVisualization();
+        this.createNodes();
+        this.createLinks();
+        this.createVisualization();
+    }
+    resizeSVG() {
+        var _a;
+        if (!this.svg || !((_a = this.erdContainer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            return;
+        }
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth || 800;
+        const height = container.clientHeight || 600;
+        // Prevent resize loops by checking if size actually changed
+        if (Math.abs(this.lastKnownSize.width - width) < 5 &&
+            Math.abs(this.lastKnownSize.height - height) < 5) {
+            return;
+        }
+        this.lastKnownSize = { width, height };
+        // Use CSS for sizing instead of SVG attributes to prevent feedback loops
+        const svgElement = this.svg.node();
+        if (svgElement) {
+            svgElement.style.width = '100%';
+            svgElement.style.height = '100%';
+        }
+        // Set viewBox instead of width/height attributes
+        this.svg.attr('viewBox', `0 0 ${width} ${height}`);
+        // Update simulation center force
+        if (this.simulation) {
+            this.simulation.force('center', d3.forceCenter(width / 2, height / 2));
+            this.simulation.alpha(0.3).restart();
+        }
+    }
+    triggerResize() {
+        // Manual resize trigger for external components (like splitter layout changes)
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+        this.resizeTimeout = window.setTimeout(() => {
+            this.resizeSVG();
+        }, 100);
+    }
+    setupResizeObserver() {
+        var _a;
+        if (!((_a = this.erdContainer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver((entries) => {
+            // Debounce resize events to prevent feedback loops
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = window.setTimeout(() => {
+                var _a;
+                // Double-check that container size actually changed
+                const container = (_a = this.erdContainer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+                if (!container)
+                    return;
+                const newWidth = container.clientWidth;
+                const newHeight = container.clientHeight;
+                // Only resize if there's a meaningful size change
+                if (Math.abs(this.lastKnownSize.width - newWidth) >= 5 ||
+                    Math.abs(this.lastKnownSize.height - newHeight) >= 5) {
+                    requestAnimationFrame(() => {
+                        this.resizeSVG();
+                    });
+                }
+            }, 50);
+        });
+        this.resizeObserver.observe(this.erdContainer.nativeElement);
+    }
+    clearVisualization() {
+        if (this.simulation) {
+            this.simulation.stop();
+        }
+        d3.select(this.erdContainer.nativeElement).selectAll('*').remove();
+    }
+    createNodes() {
+        this.nodes = this.filteredEntities.map(entity => {
+            const entityFields = this.allEntityFields.filter(f => f.EntityID === entity.ID);
+            const primaryKeys = entityFields.filter(f => f.IsPrimaryKey);
+            const foreignKeys = entityFields.filter(f => f.RelatedEntityID && !f.IsPrimaryKey);
+            const fieldCount = Math.max(1, primaryKeys.length + foreignKeys.length);
+            const baseHeight = 60;
+            const fieldHeight = 20;
+            const maxHeight = 300;
+            const calculatedHeight = Math.min(baseHeight + (fieldCount * fieldHeight), maxHeight);
+            return {
+                id: entity.ID,
+                name: entity.Name || entity.SchemaName || 'Unknown',
+                entity: entity,
+                width: 180,
+                height: calculatedHeight,
+                primaryKeys: primaryKeys,
+                foreignKeys: foreignKeys
+            };
+        });
+    }
+    createLinks() {
+        this.links = [];
+        const entityMap = new Map(this.nodes.map(node => [node.id, node]));
+        this.allEntityFields.forEach(field => {
+            if (field.RelatedEntityID && !field.IsPrimaryKey) {
+                const sourceNode = entityMap.get(field.EntityID);
+                const targetNode = entityMap.get(field.RelatedEntityID);
+                if (sourceNode && targetNode) {
+                    const isSelfReference = field.EntityID === field.RelatedEntityID;
+                    // Find target field (primary key in target entity)
+                    const targetField = targetNode.primaryKeys.find(pk => pk.Name === field.RelatedEntityFieldName);
+                    this.links.push({
+                        source: sourceNode,
+                        target: targetNode,
+                        field: field,
+                        sourceField: field,
+                        targetField: targetField,
+                        isSelfReference: isSelfReference
+                    });
+                }
+            }
+        });
+    }
+    createVisualization() {
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth || 800;
+        const height = container.clientHeight || 600;
+        // Set initial known size
+        this.lastKnownSize = { width, height };
+        // Create zoom behavior
+        this.zoom = d3.zoom().on('zoom', (event) => {
+            this.svg.select('.chart-area').attr('transform', event.transform);
+        });
+        // Create SVG with CSS-based sizing
+        this.svg = d3
+            .select(container)
+            .append('svg')
+            .attr('viewBox', `0 0 ${width} ${height}`)
+            .style('width', '100%')
+            .style('height', '100%')
+            .style('position', 'absolute')
+            .style('top', '0')
+            .style('left', '0')
+            .call(this.zoom)
+            .on('click', (event) => {
+            // Deselect entity when clicking on background
+            if (event.target === event.currentTarget) {
+                this.entityDeselected.emit();
+                this.clearAllHighlighting();
+            }
+        });
+        const chartArea = this.svg.append('g').attr('class', 'chart-area');
+        // Define arrow marker for directional links
+        this.svg
+            .append('defs')
+            .selectAll('marker')
+            .data(['end-arrow'])
+            .enter()
+            .append('marker')
+            .attr('id', 'end-arrow')
+            .attr('viewBox', '0 -5 10 10')
+            .attr('refX', 8)
+            .attr('refY', 0)
+            .attr('markerWidth', 6)
+            .attr('markerHeight', 6)
+            .attr('orient', 'auto')
+            .append('path')
+            .attr('d', 'M0,-5L10,0L0,5')
+            .attr('fill', '#666');
+        // Create force simulation with dynamic distance based on rectangle sizes
+        this.simulation = d3
+            .forceSimulation(this.nodes)
+            .force('link', d3
+            .forceLink(this.links)
+            .id((d) => d.id)
+            .distance((d) => {
+            const sourceNode = d.source;
+            const targetNode = d.target;
+            const sourceSize = Math.max(sourceNode.width, sourceNode.height);
+            const targetSize = Math.max(targetNode.width, targetNode.height);
+            return (sourceSize + targetSize) / 2 + 80;
+        }))
+            .force('charge', d3.forceManyBody().strength(-800))
+            .force('center', d3.forceCenter(width / 2, height / 2))
+            .force('collision', d3.forceCollide().radius((d) => {
+            const node = d;
+            return Math.max(node.width, node.height) / 2 + 20;
+        }));
+        // Create links with arrows
+        const link = chartArea.selectAll('.link').data(this.links).enter().append('g').attr('class', 'link-group');
+        // Add the link line
+        link
+            .append('path')
+            .attr('class', 'link')
+            .attr('stroke', '#666')
+            .attr('stroke-opacity', 0.8)
+            .attr('stroke-width', 2)
+            .attr('fill', 'none')
+            .attr('marker-end', (d) => (d.isSelfReference ? 'none' : 'url(#end-arrow)'));
+        // Add labels for foreign key relationships
+        link
+            .append('text')
+            .attr('class', 'link-label')
+            .attr('font-size', '10px')
+            .attr('fill', '#666')
+            .attr('text-anchor', 'middle')
+            .text((d) => d.sourceField.Name || '');
+        // Create entity rectangle nodes
+        const node = chartArea
+            .selectAll('.node')
+            .data(this.nodes)
+            .enter()
+            .append('g')
+            .attr('class', 'node')
+            .style('cursor', 'pointer')
+            .call(d3
+            .drag()
+            .on('start', (event, d) => this.dragstarted(event, d))
+            .on('drag', (event, d) => this.dragged(event, d))
+            .on('end', (event, d) => this.dragended(event, d)));
+        // Add main rectangle for entity
+        node
+            .append('rect')
+            .attr('class', 'entity-rect')
+            .attr('width', (d) => d.width)
+            .attr('height', (d) => d.height)
+            .attr('x', (d) => -d.width / 2)
+            .attr('y', (d) => -d.height / 2)
+            .attr('fill', '#f8f9fa')
+            .attr('stroke', '#333')
+            .attr('stroke-width', 2)
+            .attr('rx', 4);
+        // Add entity header
+        node
+            .append('rect')
+            .attr('class', 'entity-header')
+            .attr('width', (d) => d.width)
+            .attr('height', 30)
+            .attr('x', (d) => -d.width / 2)
+            .attr('y', (d) => -d.height / 2)
+            .attr('fill', '#007bff')
+            .attr('rx', 4);
+        // Add entity header bottom border (to make only top rounded)
+        node
+            .append('rect')
+            .attr('class', 'entity-header-bottom')
+            .attr('width', (d) => d.width)
+            .attr('height', 15)
+            .attr('x', (d) => -d.width / 2)
+            .attr('y', (d) => -d.height / 2 + 15)
+            .attr('fill', '#007bff');
+        // Add entity name in header
+        node
+            .append('text')
+            .attr('class', 'entity-name')
+            .attr('text-anchor', 'middle')
+            .attr('y', (d) => -d.height / 2 + 20)
+            .attr('font-size', '12px')
+            .attr('font-weight', 'bold')
+            .attr('fill', 'white')
+            .text((d) => d.name);
+        // Add primary key fields and foreign key fields
+        node.each(function (d) {
+            const group = d3.select(this);
+            let currentY = -d.height / 2 + 40;
+            // Add primary keys
+            d.primaryKeys.forEach((pk) => {
+                const fieldGroup = group.append('g').attr('class', 'field-group primary-key');
+                fieldGroup
+                    .append('rect')
+                    .attr('class', 'field-bg')
+                    .attr('x', -d.width / 2 + 2)
+                    .attr('y', currentY - 15)
+                    .attr('width', d.width - 4)
+                    .attr('height', 18)
+                    .attr('fill', '#fff3cd');
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-icon')
+                    .attr('x', -d.width / 2 + 8)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '10px')
+                    .attr('fill', '#856404')
+                    .text('🔑');
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-name')
+                    .attr('x', -d.width / 2 + 25)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '11px')
+                    .attr('font-weight', 'bold')
+                    .attr('fill', '#856404')
+                    .text(pk.Name || '');
+                currentY += 20;
+            });
+            // Add foreign key fields
+            d.foreignKeys.forEach((fk) => {
+                const fieldGroup = group.append('g').attr('class', 'field-group foreign-key');
+                fieldGroup
+                    .append('rect')
+                    .attr('class', 'field-bg')
+                    .attr('x', -d.width / 2 + 2)
+                    .attr('y', currentY - 15)
+                    .attr('width', d.width - 4)
+                    .attr('height', 18)
+                    .attr('fill', '#cce5ff');
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-icon')
+                    .attr('x', -d.width / 2 + 8)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '10px')
+                    .attr('fill', '#004085')
+                    .text('🔗');
+                fieldGroup
+                    .append('text')
+                    .attr('class', 'field-name')
+                    .attr('x', -d.width / 2 + 25)
+                    .attr('y', currentY - 2)
+                    .attr('font-size', '11px')
+                    .attr('fill', '#004085')
+                    .text(fk.Name || '');
+                currentY += 20;
+            });
+        });
+        // Add click handler for entity selection
+        node
+            .on('click', (event, d) => {
+            event.stopPropagation();
+            // Check if this entity is already selected
+            if (this.selectedEntityId === d.entity.ID) {
+                // If clicking on the selected entity, deselect it
+                this.entityDeselected.emit();
+            }
+            else {
+                // Select the new entity
+                this.entitySelected.emit(d.entity);
+                // Check if entity is too small and needs auto-zoom
+                const currentTransform = d3.zoomTransform(this.svg.node());
+                const currentRenderedWidth = d.width * currentTransform.k;
+                const shouldAutoZoom = currentRenderedWidth < 20;
+                if (shouldAutoZoom) {
+                    this.zoomToEntity(d.entity.ID);
+                }
+            }
+            // Update visual selection state
+            this.updateSelectionHighlighting();
+        })
+            .append('title')
+            .text((d) => `${d.name}\nPrimary Keys: ${d.primaryKeys.length}\nForeign Keys: ${d.foreignKeys.length}`);
+        // Update positions on simulation tick
+        this.simulation.on('tick', () => {
+            // Update link positions with proper rectangle edge connections
+            link.select('path').attr('d', (d) => {
+                const source = d.source;
+                const target = d.target;
+                if (d.isSelfReference) {
+                    // Handle self-referencing relationships with a loop
+                    const loopSize = 30;
+                    return `M ${source.x + source.width / 2} ${source.y}
+                  Q ${source.x + source.width / 2 + loopSize} ${source.y - loopSize}
+                    ${source.x} ${source.y - source.height / 2}`;
+                }
+                else {
+                    // Calculate connection points with 90-degree routing
+                    const sourceConnectPoint = this.getSourceConnectionPoint(source, target, d.sourceField);
+                    const targetConnectPoint = this.getTargetConnectionPoint(target, d.targetField);
+                    return this.createOrthogonalPath(sourceConnectPoint, targetConnectPoint);
+                }
+            });
+            // Update link labels
+            link.select('text').attr('transform', (d) => {
+                if (d.isSelfReference) {
+                    const source = d.source;
+                    return `translate(${source.x + source.width / 2 + 15}, ${source.y - source.height / 2 - 10})`;
+                }
+                else {
+                    const source = d.source;
+                    const target = d.target;
+                    const midX = (source.x + target.x) / 2;
+                    const midY = (source.y + target.y) / 2;
+                    return `translate(${midX}, ${midY - 8})`;
+                }
+            });
+            node.attr('transform', (d) => `translate(${d.x},${d.y})`);
+        });
+    }
+    getSourceConnectionPoint(sourceNode, _targetNode, field) {
+        // Always connect from the right edge for source connections
+        let connectY = sourceNode.y;
+        // If we have field information, connect near the foreign key field
+        if (field) {
+            const fkIndex = sourceNode.foreignKeys.findIndex((fk) => fk.ID === field.ID);
+            if (fkIndex >= 0) {
+                const fieldY = -sourceNode.height / 2 + 40 + sourceNode.primaryKeys.length * 20 + fkIndex * 20;
+                connectY = sourceNode.y + fieldY + 10;
+            }
+        }
+        return {
+            x: sourceNode.x + sourceNode.width / 2,
+            y: connectY,
+        };
+    }
+    getTargetConnectionPoint(targetNode, targetField) {
+        // Always connect to the left edge of target
+        let connectY = targetNode.y - targetNode.height / 2 + 40; // Default to primary key area
+        // If we have target field information, connect near the specific primary key field
+        if (targetField && targetField.IsPrimaryKey) {
+            const pkIndex = targetNode.primaryKeys.findIndex((pk) => pk.ID === targetField.ID);
+            if (pkIndex >= 0) {
+                const fieldY = -targetNode.height / 2 + 40 + pkIndex * 20;
+                connectY = targetNode.y + fieldY + 10;
+            }
+        }
+        return {
+            x: targetNode.x - targetNode.width / 2,
+            y: connectY,
+        };
+    }
+    createOrthogonalPath(source, target) {
+        // Ensure right-to-left connection with proper orthogonal routing
+        const dx = target.x - source.x;
+        // Calculate midpoint for orthogonal routing
+        let midX;
+        if (dx > 0) {
+            // Target is to the right of source - use 70% of distance for turn point
+            midX = source.x + dx * 0.7;
+        }
+        else {
+            // Target is to the left of source - create wider arc for better visibility
+            midX = source.x + Math.max(dx * 0.3, -50); // Don't go too far left
+        }
+        // Create clean orthogonal path
+        return `M ${source.x} ${source.y}
+            L ${midX} ${source.y}
+            L ${midX} ${target.y}
+            L ${target.x} ${target.y}`;
+    }
+    clearAllHighlighting() {
+        if (!this.svg)
+            return;
+        this.svg.selectAll('.node')
+            .classed('selected', false)
+            .classed('relationship-connected', false)
+            .classed('entity-connections-highlighted', false);
+        this.svg.selectAll('.entity-rect')
+            .classed('highlighted', false)
+            .classed('relationship-highlighted', false)
+            .classed('connection-highlighted', false)
+            .style('stroke', '#333')
+            .style('stroke-width', '2px')
+            .style('filter', null);
+        this.svg.selectAll('.link-group')
+            .classed('highlighted', false);
+        this.svg.selectAll('.link')
+            .classed('highlighted', false);
+        this.svg.selectAll('.link-label')
+            .classed('highlighted', false);
+    }
+    updateSelectionHighlighting() {
+        if (!this.svg)
+            return;
+        // Clear existing selections
+        this.clearAllHighlighting();
+        // Highlight selected entity if any
+        if (this.selectedEntityId) {
+            this.svg.selectAll('.node')
+                .filter((d) => d.id === this.selectedEntityId)
+                .classed('selected', true)
+                .select('.entity-rect')
+                .style('stroke', '#4CAF50')
+                .style('stroke-width', '4px')
+                .style('filter', 'drop-shadow(0 0 8px rgba(76, 175, 80, 0.6))');
+        }
+    }
+    zoomToEntity(entityId) {
+        const node = this.nodes.find(n => n.id === entityId);
+        if (!node || !this.zoom)
+            return;
+        const container = this.erdContainer.nativeElement;
+        const width = container.clientWidth;
+        const height = container.clientHeight;
+        const scale = 1.5;
+        const x = width / 2 - (node.x || 0) * scale;
+        const y = height / 2 - (node.y || 0) * scale;
+        this.svg.transition().duration(750).call(this.zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale));
+    }
+    dragstarted(event, d) {
+        if (!event.active)
+            this.simulation.alphaTarget(0.3).restart();
+        d.fx = d.x;
+        d.fy = d.y;
+    }
+    dragged(event, d) {
+        d.fx = event.x;
+        d.fy = event.y;
+    }
+    dragended(event, d) {
+        if (!event.active)
+            this.simulation.alphaTarget(0);
+        d.fx = null;
+        d.fy = null;
+    }
+}
+ERDDiagramComponent.ɵfac = function ERDDiagramComponent_Factory(t) { return new (t || ERDDiagramComponent)(); };
+ERDDiagramComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ERDDiagramComponent, selectors: [["mj-erd-diagram"]], viewQuery: function ERDDiagramComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.erdContainer = _t.first);
+    } }, inputs: { filteredEntities: "filteredEntities", allEntityFields: "allEntityFields", isRefreshingERD: "isRefreshingERD", selectedEntityId: "selectedEntityId" }, outputs: { entitySelected: "entitySelected", entityDeselected: "entityDeselected", refreshERD: "refreshERD" }, features: [i0.ɵɵNgOnChangesFeature], decls: 15, vars: 0, consts: [["erdContainer", ""], [1, "erd-section"], [1, "section-header"], [1, "erd-controls"], ["title", "Zoom In", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom Out", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset Zoom", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Refresh Diagram", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "erd-container"]], template: function ERDDiagramComponent_Template(rf, ctx) { if (rf & 1) {
+        const _r1 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h3");
+        i0.ɵɵtext(3, "Entity Relationship Diagram");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "div", 3)(5, "button", 4);
+        i0.ɵɵlistener("click", function ERDDiagramComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.zoomIn()); });
+        i0.ɵɵelement(6, "span", 5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(7, "button", 6);
+        i0.ɵɵlistener("click", function ERDDiagramComponent_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.zoomOut()); });
+        i0.ɵɵelement(8, "span", 7);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "button", 8);
+        i0.ɵɵlistener("click", function ERDDiagramComponent_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.resetZoom()); });
+        i0.ɵɵelement(10, "span", 9);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(11, "button", 10);
+        i0.ɵɵlistener("click", function ERDDiagramComponent_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setupERD()); });
+        i0.ɵɵelement(12, "span", 11);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelement(13, "div", 12, 0);
+        i0.ɵɵelementEnd();
+    } }, styles: [".erd-section[_ngcontent-%COMP%] {\n  background: white;\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e0e0e0;\n  \n  h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n  }\n}\n\n.erd-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  cursor: pointer;\n  font-size: 12px;\n  \n  &:hover {\n    background-color: #f0f0f0;\n  }\n}\n\n.erd-container[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  background-color: #fafafa;\n  overflow: hidden;\n  min-height: 400px;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  \n  svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100% !important;\n    height: 100% !important;\n    max-width: 100%;\n    max-height: 100%;\n    box-sizing: border-box;\n  }\n}\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(250, 250, 250, 0.95);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n  \n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n  \n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n  \n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n//   SVG   visualization   styles\n[_nghost-%COMP%]     {\n  .erd-container svg {\n    .node .entity-rect.highlighted {\n      stroke: #ff9800 !important;\n      stroke-width: 4px !important;\n      filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));\n      animation: pulse 1s ease-in-out infinite alternate;\n    }\n    \n    .node.selected {\n      .entity-rect {\n        stroke: #2196f3 !important;\n        stroke-width: 4px !important;\n        filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n        fill: #f3f8ff !important;\n        animation: selectedPulse 2s ease-in-out infinite alternate;\n      }\n      \n      .entity-header {\n        fill: #2196f3 !important;\n      }\n      \n      .entity-header-bottom {\n        fill: #2196f3 !important;\n      }\n      \n      .entity-name {\n        fill: white !important;\n        font-weight: bold !important;\n      }\n    }\n    \n    @keyframes selectedPulse {\n      0% { \n        stroke-width: 4px;\n        filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n      }\n      100% { \n        stroke-width: 5px;\n        filter: drop-shadow(0 0 16px rgba(33, 150, 243, 1));\n      }\n    }\n    \n    .node.relationship-connected {\n      .entity-rect.relationship-highlighted {\n        stroke: #ff6b35 !important;\n        stroke-width: 3px !important;\n        filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n        animation: entityPulse 1.5s ease-in-out infinite alternate;\n      }\n      \n      .entity-header {\n        fill: #ff6b35 !important;\n      }\n      \n      .entity-header-bottom {\n        fill: #ff6b35 !important;\n      }\n    }\n    \n    .node.entity-connections-highlighted {\n      .entity-rect.connection-highlighted {\n        stroke: #9b59b6 !important;\n        stroke-width: 3px !important;\n        filter: drop-shadow(0 0 6px rgba(155, 89, 182, 0.5));\n        opacity: 0.9;\n      }\n      \n      .entity-header {\n        fill: #9b59b6 !important;\n        opacity: 0.8;\n      }\n      \n      .entity-header-bottom {\n        fill: #9b59b6 !important;\n        opacity: 0.8;\n      }\n    }\n    \n    .link-group {\n      .link {\n        stroke-width: 2px;\n        transition: all 0.2s ease;\n        cursor: pointer;\n        \n        &:hover {\n          stroke-width: 3px;\n          stroke: #ff6b35;\n          opacity: 1;\n        }\n        \n        &.highlighted {\n          stroke: #ff6b35 !important;\n          stroke-width: 4px !important;\n          opacity: 1 !important;\n          filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n          animation: linkPulse 1.5s ease-in-out infinite alternate;\n        }\n      }\n      \n      .link-label {\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        opacity: 0.8;\n        pointer-events: none;\n        transition: opacity 0.2s ease;\n        \n        &.highlighted {\n          opacity: 1;\n          font-weight: bold;\n          fill: #ff6b35;\n        }\n      }\n      \n      &.highlighted {\n        z-index: 10;\n      }\n    }\n    \n    .field-group {\n      .field-bg {\n        transition: fill 0.2s;\n      }\n      \n      &:hover .field-bg {\n        fill: #e3f2fd !important;\n      }\n    }\n    \n    @keyframes pulse {\n      0% { stroke-width: 4px; }\n      100% { stroke-width: 6px; }\n    }\n    \n    @keyframes linkPulse {\n      0% { \n        stroke-width: 4px; \n        filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n      }\n      100% { \n        stroke-width: 5px; \n        filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.8));\n      }\n    }\n    \n    @keyframes entityPulse {\n      0% { \n        stroke-width: 3px; \n        filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n      }\n      100% { \n        stroke-width: 4px; \n        filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.7));\n      }\n    }\n  }\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDDiagramComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-erd-diagram', template: "<div class=\"erd-section\">\n  <div class=\"section-header\">\n    <h3>Entity Relationship Diagram</h3>\n    <div class=\"erd-controls\">\n      <button class=\"control-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n        <span class=\"fa-solid fa-search-plus\"></span>\n      </button>\n      <button class=\"control-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n        <span class=\"fa-solid fa-search-minus\"></span>\n      </button>\n      <button class=\"control-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom\">\n        <span class=\"fa-solid fa-expand\"></span>\n      </button>\n      <button class=\"control-btn\" (click)=\"setupERD()\" title=\"Refresh Diagram\">\n        <span class=\"fa-solid fa-refresh\"></span>\n      </button>\n    </div>\n  </div>\n  <div class=\"erd-container\" #erdContainer></div>\n</div>", styles: [".erd-section {\n  background: white;\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e0e0e0;\n  \n  h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n  }\n}\n\n.erd-controls {\n  display: flex;\n  gap: 8px;\n}\n\n.control-btn {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  cursor: pointer;\n  font-size: 12px;\n  \n  &:hover {\n    background-color: #f0f0f0;\n  }\n}\n\n.erd-container {\n  flex: 1;\n  position: relative;\n  background-color: #fafafa;\n  overflow: hidden;\n  min-height: 400px;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  \n  svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100% !important;\n    height: 100% !important;\n    max-width: 100%;\n    max-height: 100%;\n    box-sizing: border-box;\n  }\n}\n\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(250, 250, 250, 0.95);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n  \n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n  \n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n  \n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n.control-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n// SVG visualization styles\n:host ::ng-deep {\n  .erd-container svg {\n    .node .entity-rect.highlighted {\n      stroke: #ff9800 !important;\n      stroke-width: 4px !important;\n      filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));\n      animation: pulse 1s ease-in-out infinite alternate;\n    }\n    \n    .node.selected {\n      .entity-rect {\n        stroke: #2196f3 !important;\n        stroke-width: 4px !important;\n        filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n        fill: #f3f8ff !important;\n        animation: selectedPulse 2s ease-in-out infinite alternate;\n      }\n      \n      .entity-header {\n        fill: #2196f3 !important;\n      }\n      \n      .entity-header-bottom {\n        fill: #2196f3 !important;\n      }\n      \n      .entity-name {\n        fill: white !important;\n        font-weight: bold !important;\n      }\n    }\n    \n    @keyframes selectedPulse {\n      0% { \n        stroke-width: 4px;\n        filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n      }\n      100% { \n        stroke-width: 5px;\n        filter: drop-shadow(0 0 16px rgba(33, 150, 243, 1));\n      }\n    }\n    \n    .node.relationship-connected {\n      .entity-rect.relationship-highlighted {\n        stroke: #ff6b35 !important;\n        stroke-width: 3px !important;\n        filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n        animation: entityPulse 1.5s ease-in-out infinite alternate;\n      }\n      \n      .entity-header {\n        fill: #ff6b35 !important;\n      }\n      \n      .entity-header-bottom {\n        fill: #ff6b35 !important;\n      }\n    }\n    \n    .node.entity-connections-highlighted {\n      .entity-rect.connection-highlighted {\n        stroke: #9b59b6 !important;\n        stroke-width: 3px !important;\n        filter: drop-shadow(0 0 6px rgba(155, 89, 182, 0.5));\n        opacity: 0.9;\n      }\n      \n      .entity-header {\n        fill: #9b59b6 !important;\n        opacity: 0.8;\n      }\n      \n      .entity-header-bottom {\n        fill: #9b59b6 !important;\n        opacity: 0.8;\n      }\n    }\n    \n    .link-group {\n      .link {\n        stroke-width: 2px;\n        transition: all 0.2s ease;\n        cursor: pointer;\n        \n        &:hover {\n          stroke-width: 3px;\n          stroke: #ff6b35;\n          opacity: 1;\n        }\n        \n        &.highlighted {\n          stroke: #ff6b35 !important;\n          stroke-width: 4px !important;\n          opacity: 1 !important;\n          filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n          animation: linkPulse 1.5s ease-in-out infinite alternate;\n        }\n      }\n      \n      .link-label {\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        opacity: 0.8;\n        pointer-events: none;\n        transition: opacity 0.2s ease;\n        \n        &.highlighted {\n          opacity: 1;\n          font-weight: bold;\n          fill: #ff6b35;\n        }\n      }\n      \n      &.highlighted {\n        z-index: 10;\n      }\n    }\n    \n    .field-group {\n      .field-bg {\n        transition: fill 0.2s;\n      }\n      \n      &:hover .field-bg {\n        fill: #e3f2fd !important;\n      }\n    }\n    \n    @keyframes pulse {\n      0% { stroke-width: 4px; }\n      100% { stroke-width: 6px; }\n    }\n    \n    @keyframes linkPulse {\n      0% { \n        stroke-width: 4px; \n        filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n      }\n      100% { \n        stroke-width: 5px; \n        filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.8));\n      }\n    }\n    \n    @keyframes entityPulse {\n      0% { \n        stroke-width: 3px; \n        filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n      }\n      100% { \n        stroke-width: 4px; \n        filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.7));\n      }\n    }\n  }\n}"] }]
+    }], null, { erdContainer: [{
+            type: ViewChild,
+            args: ['erdContainer', { static: false }]
+        }], filteredEntities: [{
+            type: Input
+        }], allEntityFields: [{
+            type: Input
+        }], isRefreshingERD: [{
+            type: Input
+        }], selectedEntityId: [{
+            type: Input
+        }], entitySelected: [{
+            type: Output
+        }], entityDeselected: [{
+            type: Output
+        }], refreshERD: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDDiagramComponent, { className: "ERDDiagramComponent", filePath: "src/EntityAdmin/components/erd-diagram.component.ts", lineNumber: 33 }); })();
+//# sourceMappingURL=erd-diagram.component.js.map