@things-factory/integration-ui 7.0.33 → 7.0.35

package/dist-client/analysis/graph-viewer.js

@@ -1,26 +1,15 @@
 import * as d3 from 'd3';
 export class GraphViewer {
     constructor(_selector, _options) {
-        this.classes2colors = {};
-        this.justLoaded = false;
-        this.numClasses = 0;
-        this.options = {
-            arrowSize: 4,
-            colors: this.colors(),
-            highlight: undefined,
-            infoPanel: true,
-            minCollision: undefined,
-            graphData: undefined,
-            dataUrl: undefined,
-            nodeOutlineFillColor: undefined,
-            nodeRadius: 25,
-            relationshipColor: '#a5abb6',
-            zoomFit: false
-        };
-        this.init(_selector, _options);
+        this.nodes = [];
+        this.relationships = [];
+        this.needZoomFit = true;
+        this.options = Object.assign({ arrowSize: 4, colors: this.colors(), highlight: undefined, infoPanel: true, minCollision: undefined, graphData: undefined, dataUrl: undefined, nodeOutlineFillColor: undefined, nodeRadius: 25, relationshipColor: '#a5abb6', zoomFit: false, classes2colors: {}, numClasses: 0 }, _options);
+        this.init(_selector);
     }
-    appendGraph(container) {
-        this.svg = container
+    init(selector) {
+        this.svg = d3
+            .select(selector)
             .append('svg')
             .attr('width', '100%')
             .attr('height', '100%')
@@ -37,91 +26,145 @@ export class GraphViewer {
             this.svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')');
         }))
             .on('dblclick.zoom', null)
-            .append('g')
+            .append('g') // 그룹 요소 추가
             .attr('width', '100%')
             .attr('height', '100%');
-        this.svgRelationships = this.svg.append('g').attr('class', 'relationships');
+        // Define arrow markers for graph links
+        this.svg
+            .append('defs')
+            .append('marker')
+            .attr('id', 'arrow')
+            .attr('viewBox', '0 -5 10 10')
+            .attr('refX', 10)
+            .attr('refY', 0)
+            .attr('markerWidth', 6)
+            .attr('markerHeight', 6)
+            .attr('orient', 'auto')
+            .append('path')
+            .attr('d', 'M0,-5L10,0L0,5')
+            .attr('fill', this.options.relationshipColor);
         this.svgNodes = this.svg.append('g').attr('class', 'nodes');
+        this.svgRelationships = this.svg.append('g').attr('class', 'relationships');
+        this.simulation = this.initSimulation();
+        if (this.options.graphData) {
+            this.updateWithGraphData(this.options.graphData);
+        }
     }
-    appendImageToNode(node) {
-        return node
-            .append('image')
-            .attr('height', d => {
-            return this.icon(d) ? '24px' : '30px';
-        })
-            .attr('x', d => {
-            return this.icon(d) ? '5px' : '-15px';
-        })
-            .attr('xlink:href', d => {
-            return this.image(d);
+    initSimulation() {
+        const x = this.svg.node().parentElement.parentElement.clientWidth / 2;
+        const y = this.svg.node().parentElement.parentElement.clientHeight / 2;
+        var simulation = d3
+            .forceSimulation()
+            .force('collide', d3
+            .forceCollide()
+            .radius(d => {
+            return this.options.minCollision;
         })
-            .attr('y', d => {
-            return this.icon(d) ? '5px' : '-16px';
+            .iterations(2))
+            .force('charge', d3.forceManyBody())
+            .force('link', d3.forceLink().id(d => {
+            return d.id;
+        }))
+            .force('center', d3.forceCenter(x, y))
+            .on('tick', () => {
+            this.tick();
         })
-            .attr('width', d => {
-            return this.icon(d) ? '24px' : '30px';
+            .on('end', () => {
+            if (this.options.zoomFit && this.needZoomFit) {
+                this.needZoomFit = false;
+                this.zoomFit();
+            }
         });
+        return simulation;
     }
-    appendInfoPanel(container) {
-        return container.append('div').attr('class', 'graph-info');
-    }
-    appendInfoElement(cls, isNode, property, value) {
-        var elem = this.info.append('a');
-        elem
-            .attr('href', '#')
-            .attr('class', cls)
-            .html('<strong>' + property + '</strong>' + (value ? ': ' + value : ''));
-        if (!value) {
-            elem
-                .style('background-color', d => {
-                return this.options.nodeOutlineFillColor
-                    ? this.options.nodeOutlineFillColor
-                    : isNode
-                        ? this.class2color(property)
-                        : this.defaultColor();
-            })
-                .style('border-color', d => {
-                return this.options.nodeOutlineFillColor
-                    ? this.class2darkenColor(this.options.nodeOutlineFillColor)
-                    : isNode
-                        ? this.class2darkenColor(property)
-                        : this.defaultDarkenColor();
-            })
-                .style('color', d => {
-                return this.options.nodeOutlineFillColor ? this.class2darkenColor(this.options.nodeOutlineFillColor) : '#fff';
-            });
-        }
+    tick() {
+        this.svgNodes.selectAll('.node').attr('transform', (d) => `translate(${d.x}, ${d.y})`);
+        this.svgRelationships
+            .selectAll('.relationship')
+            .attr('x1', (d) => this.calculateIntersection(d.source, d.target).x1)
+            .attr('y1', (d) => this.calculateIntersection(d.source, d.target).y1)
+            .attr('x2', (d) => this.calculateIntersection(d.source, d.target).x2)
+            .attr('y2', (d) => this.calculateIntersection(d.source, d.target).y2);
+        this.svgRelationships.selectAll('.relationship-text').attr('transform', (d) => {
+            const midX = (this.calculateIntersection(d.source, d.target).x1 + this.calculateIntersection(d.source, d.target).x2) / 2;
+            const midY = (this.calculateIntersection(d.source, d.target).y1 + this.calculateIntersection(d.source, d.target).y2) / 2;
+            return `translate(${midX}, ${midY})`;
+        });
     }
-    appendInfoElementClass(cls, node) {
-        this.appendInfoElement(cls, true, node);
+    calculateIntersection(source, target) {
+        const dx = target.x - source.x;
+        const dy = target.y - source.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const ratio = (distance - this.options.nodeRadius) / distance;
+        const x1 = source.x + dx * (this.options.nodeRadius / distance);
+        const y1 = source.y + dy * (this.options.nodeRadius / distance);
+        const x2 = target.x - dx * (this.options.nodeRadius / distance);
+        const y2 = target.y - dy * (this.options.nodeRadius / distance);
+        return { x1, y1, x2, y2 };
     }
-    appendInfoElementProperty(cls, property, value) {
-        this.appendInfoElement(cls, false, property, value);
+    colors() {
+        return [
+            '#68bdf6', // light blue
+            '#6dce9e', // green #1
+            '#faafc2', // light pink
+            '#f2baf6', // purple
+            '#ff928c', // light red
+            '#fcea7e', // light yellow
+            '#ffc766', // light orange
+            '#405f9e', // navy blue
+            '#a5abb6', // dark gray
+            '#78cecb', // green #2,
+            '#b88cbb', // dark purple
+            '#ced2d9', // light gray
+            '#e84646', // dark red
+            '#fa5f86', // dark pink
+            '#ffab1a', // dark orange
+            '#fcda19', // dark yellow
+            '#797b80', // black
+            '#c9d96f', // pistachio
+            '#47991f', // green #3
+            '#70edee', // turquoise
+            '#ff75ea' // pink
+        ];
     }
-    appendInfoElementRelationship(cls, relationship) {
-        this.appendInfoElement(cls, false, relationship);
+    updateWithGraphData(graphData) {
+        this.nodes = graphData.results[0].data[0].graph.nodes;
+        this.relationships = graphData.results[0].data[0].graph.relationships;
+        this.relationships.forEach(rel => {
+            const sourceNode = this.nodes.find(node => node.id === rel.startNode);
+            const targetNode = this.nodes.find(node => node.id === rel.endNode);
+            if (!sourceNode || !targetNode) {
+                console.warn(`Node not found for relationship: ${rel.id}`);
+                return;
+            }
+            rel.source = sourceNode;
+            rel.target = targetNode;
+        });
+        this.updateNodesAndRelationships();
+    }
+    updateNodesAndRelationships() {
+        this.needZoomFit = true;
+        this.svgNodes.selectAll('.node').remove();
+        this.svgRelationships.selectAll('.relationship').remove();
+        this.svgRelationships.selectAll('.relationship-text').remove();
+        this.appendNodesToGraph();
+        this.appendRelationshipsToGraph();
+        this.simulation.nodes(this.nodes);
+        this.simulation.force('link').links(this.relationships);
+        // 시뮬레이션을 강제로 재시작하여 레이아웃이 적절히 재정렬되도록 함
+        this.simulation.alpha(1).restart();
     }
-    appendNode() {
-        return this.node
+    appendNodesToGraph() {
+        const nodeEnter = this.svgNodes
+            .selectAll('.node')
+            .data(this.nodes, (d) => d.id)
             .enter()
             .append('g')
             .attr('class', d => {
             var highlight, i, classes = 'node', label = d.labels[0];
-            if (this.icon(d)) {
+            if (d.icon) {
                 classes += ' node-icon';
             }
-            if (this.image(d)) {
-                classes += ' node-image';
-            }
-            if (this.options.highlight) {
-                for (i = 0; i < this.options.highlight.length; i++) {
-                    highlight = this.options.highlight[i];
-                    if (d.labels[0] === highlight.class && d.properties[highlight.property] === highlight.value) {
-                        classes += ' node-highlighted';
-                        break;
-                    }
-                }
-            }
             return classes;
         })
             .on('click', (event, d) => {
@@ -137,665 +180,102 @@ export class GraphViewer {
             }
         })
             .on('mouseenter', (event, d) => {
-            if (this.info) {
-                this.updateInfo(d);
-            }
-            if (typeof this.options.onNodeMouseEnter === 'function') {
-                this.options.onNodeMouseEnter(d);
-            }
+            event.target.dispatchEvent(new CustomEvent('node-mouseenter', {
+                detail: d,
+                bubbles: true
+            }));
         })
             .on('mouseleave', (event, d) => {
-            if (this.info) {
-                this.clearInfo();
-            }
-            if (typeof this.options.onNodeMouseLeave === 'function') {
-                this.options.onNodeMouseLeave(d);
-            }
+            event.target.dispatchEvent(new CustomEvent('node-mouseleave', {
+                detail: d,
+                bubbles: true
+            }));
         })
             .call(d3
             .drag()
             .on('start', this.dragStarted.bind(this))
             .on('drag', this.dragged.bind(this))
             .on('end', this.dragEnded.bind(this)));
-    }
-    appendNodeToGraph() {
-        var n = this.appendNode();
-        this.appendRingToNode(n);
-        // this.appendBoxToNode(n)
-        this.appendOutlineToNode(n);
-        if (this.options.icons) {
-            this.appendTextToNode(n);
-        }
-        if (this.options.images) {
-            this.appendImageToNode(n);
-        }
-        return n;
-    }
-    appendOutlineToNode(node) {
-        const outline = node
+        nodeEnter
             .append('circle')
             .attr('class', 'outline')
             .attr('r', this.options.nodeRadius)
-            .style('fill', d => {
-            return this.options.nodeOutlineFillColor ? this.options.nodeOutlineFillColor : this.class2color(d.labels[0]);
-        })
-            .style('stroke', d => {
-            return this.options.nodeOutlineFillColor
-                ? this.class2darkenColor(this.options.nodeOutlineFillColor)
-                : this.class2darkenColor(d.labels[0]);
-        })
-            .append('title')
-            .text(d => {
-            return this.toString(d);
-        });
-        node
+            .style('fill', d => this.class2color(d.labels[0]))
+            .style('stroke', d => this.class2darkenColor(d.labels[0]))
+            .style('stroke-width', 2);
+        nodeEnter
             .append('text')
-            .attr('class', 'node-text')
+            .attr('class', 'text icon')
             .attr('x', 0)
-            .attr('y', 52)
-            .attr('text-anchor', 'middle') // 텍스트 중앙 정렬
-            .attr('fill', 'black') // 텍스트 색상을 검은색으로 변경
-            .text(d => d.text);
-        return outline;
-    }
-    appendBoxToNode(node) {
-        const rect = node
-            .append('rect')
-            .attr('class', 'node-rect')
-            .attr('width', 160) // 사각형의 너비
-            .attr('height', 30) // 사각형의 높이
-            .attr('x', -80) // 사각형의 중심을 기준으로 x 위치 조정
-            .attr('y', -15) // 사각형의 중심을 기준으로 y 위치 조정
-            .style('fill', d => {
-            return this.options.nodeOutlineFillColor ? this.options.nodeOutlineFillColor : this.class2color(d.labels[0]);
-        })
-            .style('stroke', d => {
-            return this.options.nodeOutlineFillColor
-                ? this.class2darkenColor(this.options.nodeOutlineFillColor)
-                : this.class2darkenColor(d.labels[0]);
-        })
-            .append('title')
-            .text(d => {
-            return this.toString(d);
-        });
-        node
-            .append('text')
-            .attr('class', 'node-text')
-            .attr('x', 0)
-            .attr('y', 4)
-            .attr('text-anchor', 'middle') // 텍스트 중앙 정렬
-            .attr('fill', 'black') // 텍스트 색상을 검은색으로 변경
-            .text(d => d.text);
-        return rect;
-    }
-    appendRingToNode(node) {
-        return node
-            .append('circle')
-            .attr('class', 'ring')
-            .attr('r', this.options.nodeRadius * 1.16)
-            .append('title')
-            .text(d => {
-            return this.toString(d);
-        });
-    }
-    appendTextToNode(node) {
-        return node
-            .append('text')
-            .attr('fill', '#ffffff')
-            .attr('pointer-events', 'none')
+            .attr('y', 0)
             .attr('text-anchor', 'middle')
-            .attr('y', '24px')
+            .attr('dominant-baseline', 'central')
             .attr('font-family', 'Material Symbols Outlined')
-            .attr('font-size', '48px')
+            .attr('font-size', '24px')
+            .attr('fill', '#000')
+            .text(d => this.getNodeIcon(d));
+        nodeEnter
+            .append('text')
+            .attr('dy', 40)
             .attr('text-anchor', 'middle')
-            .attr('alignment-baseline', 'top')
-            .text(d => this.icon(d));
+            .text(d => d.properties.name || d.id);
     }
-    appendRelationship() {
-        return this.relationship
+    stickNode(event, d) {
+        d.fx = event.x;
+        d.fy = event.y;
+    }
+    appendRelationshipsToGraph() {
+        const relationshipEnter = this.svgRelationships
+            .selectAll('.relationship')
+            .data(this.relationships.filter(rel => rel.source && rel.target), d => d.id)
             .enter()
             .append('g')
+            .attr('class', 'relationship-group');
+        relationshipEnter
+            .append('line')
             .attr('class', 'relationship')
-            .on('dblclick', (event, d) => {
-            if (typeof this.options.onRelationshipDoubleClick === 'function') {
-                this.options.onRelationshipDoubleClick(d);
-            }
-        })
-            .on('mouseenter', (event, d) => {
-            if (this.info) {
-                this.updateInfo(d);
-            }
-        });
-    }
-    appendOutlineToRelationship(r) {
-        return r.append('path').attr('class', 'outline').attr('fill', '#a5abb6').attr('stroke', 'none');
-    }
-    appendOverlayToRelationship(r) {
-        return r.append('path').attr('class', 'overlay');
-    }
-    appendTextToRelationship(r) {
-        return r
+            .style('stroke', this.options.relationshipColor)
+            .style('stroke-width', 2)
+            .attr('marker-end', 'url(#arrow)');
+        relationshipEnter
             .append('text')
-            .attr('class', 'text')
+            .attr('class', 'relationship-text')
             .attr('fill', '#000000')
             .attr('font-size', '8px')
             .attr('pointer-events', 'none')
             .attr('text-anchor', 'middle')
-            .text(d => {
-            return d.type;
-        });
+            .text(d => d.type);
     }
-    appendRelationshipToGraph() {
-        var relationship = this.appendRelationship(), text = this.appendTextToRelationship(relationship), outline = this.appendOutlineToRelationship(relationship), overlay = this.appendOverlayToRelationship(relationship);
-        return {
-            outline: outline,
-            overlay: overlay,
-            relationship: relationship,
-            text: text
-        };
+    getNodeIcon(d) {
+        return d.icon || '';
     }
     class2color(cls) {
-        var color = this.classes2colors[cls];
-        if (!color) {
-            //            color = this.options.colors[Math.min(numClasses, this.options.colors.length - 1)];
-            color = this.options.colors[this.numClasses % this.options.colors.length];
-            this.classes2colors[cls] = color;
-            this.numClasses++;
+        if (!this.options.classes2colors[cls]) {
+            this.options.classes2colors[cls] = this.options.colors[this.options.numClasses % this.options.colors.length];
+            this.options.numClasses++;
         }
-        return color;
+        return this.options.classes2colors[cls];
     }
     class2darkenColor(cls) {
         return d3.rgb(this.class2color(cls)).darker(1);
     }
-    clearInfo() {
-        this.info.html('');
-    }
-    color() {
-        return this.options.colors[(this.options.colors.length * Math.random()) << 0];
-    }
-    colors() {
-        // d3.schemeCategory10,
-        // d3.schemeCategory20,
-        return [
-            '#68bdf6', // light blue
-            '#6dce9e', // green #1
-            '#faafc2', // light pink
-            '#f2baf6', // purple
-            '#ff928c', // light red
-            '#fcea7e', // light yellow
-            '#ffc766', // light orange
-            '#405f9e', // navy blue
-            '#a5abb6', // dark gray
-            '#78cecb', // green #2,
-            '#b88cbb', // dark purple
-            '#ced2d9', // light gray
-            '#e84646', // dark red
-            '#fa5f86', // dark pink
-            '#ffab1a', // dark orange
-            '#fcda19', // dark yellow
-            '#797b80', // black
-            '#c9d96f', // pistacchio
-            '#47991f', // green #3
-            '#70edee', // turquoise
-            '#ff75ea' // pink
-        ];
-    }
-    contains(array, id) {
-        var filter = array.filter(function (elem) {
-            return elem.id === id;
-        });
-        return filter.length > 0;
-    }
-    defaultColor() {
-        return this.options.relationshipColor;
-    }
-    defaultDarkenColor() {
-        return d3.rgb(this.options.colors[this.options.colors.length - 1]).darker(1);
-    }
-    dragEnded(event, d) {
-        if (!event.active) {
-            this.simulation.alphaTarget(0);
-        }
-        if (typeof this.options.onNodeDragEnd === 'function') {
-            this.options.onNodeDragEnd(d);
-        }
-    }
-    dragged(event, d) {
-        this.stickNode(event, d);
-    }
     dragStarted(event, d) {
-        if (!event.active) {
+        if (!event.active)
             this.simulation.alphaTarget(0.3).restart();
-        }
         d.fx = d.x;
         d.fy = d.y;
-        if (typeof this.options.onNodeDragStart === 'function') {
-            this.options.onNodeDragStart(d);
-        }
-    }
-    extend(obj1, obj2) {
-        var obj = {};
-        this.merge(obj, obj1);
-        this.merge(obj, obj2);
-        return obj;
-    }
-    icon(d) {
-        return d.icon;
-    }
-    image(d) {
-        var i, imagesForLabel, img, imgLevel, label, labelPropertyValue, property, value;
-        if (this.options.images) {
-            imagesForLabel = this.options.imageMap[d.labels[0]];
-            if (imagesForLabel) {
-                imgLevel = 0;
-                for (i = 0; i < imagesForLabel.length; i++) {
-                    labelPropertyValue = imagesForLabel[i].split('|');
-                    switch (labelPropertyValue.length) {
-                        case 3:
-                            value = labelPropertyValue[2];
-                        /* falls through */
-                        case 2:
-                            property = labelPropertyValue[1];
-                        /* falls through */
-                        case 1:
-                            label = labelPropertyValue[0];
-                    }
-                    if (d.labels[0] === label &&
-                        (!property || d.properties[property] !== undefined) &&
-                        (!value || d.properties[property] === value)) {
-                        if (labelPropertyValue.length > imgLevel) {
-                            img = this.options.images[imagesForLabel[i]];
-                            imgLevel = labelPropertyValue.length;
-                        }
-                    }
-                }
-            }
-        }
-        return img;
     }
-    init(_selector, _options) {
-        this.merge(this.options, _options);
-        if (this.options.icons) {
-            this.options.showIcons = true;
-        }
-        if (!this.options.minCollision) {
-            this.options.minCollision = this.options.nodeRadius * 2;
-        }
-        this.selector = _selector;
-        this.container = d3.select(this.selector);
-        // this.container.attr('class', 'graph-container').html('')
-        if (this.options.infoPanel) {
-            this.info = this.appendInfoPanel(this.container);
-        }
-        this.appendGraph(this.container);
-        this.simulation = this.initSimulation();
-        if (this.options.graphData) {
-            this.loadGraphData();
-        }
-        else if (this.options.dataUrl) {
-            this.loadGraphDataFromUrl(this.options.dataUrl);
-        }
-        else {
-            console.error('Error: both graphData and dataUrl are empty!');
-        }
-    }
-    initSimulation() {
-        const x = this.svg.node().parentElement.parentElement.clientWidth / 2;
-        const y = this.svg.node().parentElement.parentElement.clientHeight / 2;
-        var simulation = d3
-            .forceSimulation()
-            .force('collide', d3
-            .forceCollide()
-            .radius(d => {
-            return this.options.minCollision;
-        })
-            .iterations(2))
-            .force('charge', d3.forceManyBody())
-            .force('link', d3.forceLink().id(d => {
-            return d.id;
-        }))
-            .force('center', d3.forceCenter(x, y))
-            .on('tick', () => {
-            this.tick();
-        })
-            .on('end', () => {
-            if (this.options.zoomFit && !this.justLoaded) {
-                this.justLoaded = true;
-                this.zoomFit(2);
-            }
-        });
-        return simulation;
-    }
-    loadGraphData() {
-        this.nodes = [];
-        this.relationships = [];
-        this.updateWithGraphData(this.options.graphData);
-    }
-    loadGraphDataFromUrl(dataUrl) {
-        this.nodes = [];
-        this.relationships = [];
-        d3.json(dataUrl, (error, data) => {
-            if (error) {
-                throw error;
-            }
-            this.updateWithGraphData(data);
-        });
-    }
-    merge(target, source) {
-        Object.keys(source).forEach(property => {
-            target[property] = source[property];
-        });
-    }
-    graphDataToD3Data(data) {
-        var graph = {
-            nodes: [],
-            relationships: []
-        };
-        data.results.forEach(result => {
-            result.data.forEach(data => {
-                data.graph.nodes.forEach(node => {
-                    if (!this.contains(graph.nodes, node.id)) {
-                        graph.nodes.push(node);
-                    }
-                });
-                data.graph.relationships.forEach(function (relationship) {
-                    relationship.source = relationship.startNode;
-                    relationship.target = relationship.endNode;
-                    graph.relationships.push(relationship);
-                });
-                data.graph.relationships.sort(function (a, b) {
-                    if (a.source > b.source) {
-                        return 1;
-                    }
-                    else if (a.source < b.source) {
-                        return -1;
-                    }
-                    else {
-                        if (a.target > b.target) {
-                            return 1;
-                        }
-                        if (a.target < b.target) {
-                            return -1;
-                        }
-                        else {
-                            return 0;
-                        }
-                    }
-                });
-                for (var i = 0; i < data.graph.relationships.length; i++) {
-                    if (i !== 0 &&
-                        data.graph.relationships[i].source === data.graph.relationships[i - 1].source &&
-                        data.graph.relationships[i].target === data.graph.relationships[i - 1].target) {
-                        data.graph.relationships[i].linknum = data.graph.relationships[i - 1].linknum + 1;
-                    }
-                    else {
-                        data.graph.relationships[i].linknum = 1;
-                    }
-                }
-            });
-        });
-        return graph;
-    }
-    randomD3Data(d, maxNodesToGenerate) {
-        var data = {
-            nodes: [],
-            relationships: []
-        }, i, label, node, numNodes = ((maxNodesToGenerate * Math.random()) << 0) + 1, relationship, s = this.size();
-        for (i = 0; i < numNodes; i++) {
-            label = this.randomLabel();
-            node = {
-                id: s.nodes + 1 + i,
-                labels: [label],
-                properties: {
-                    random: label
-                },
-                x: d.x,
-                y: d.y
-            };
-            data.nodes[data.nodes.length] = node;
-            relationship = {
-                id: s.relationships + 1 + i,
-                type: label.toUpperCase(),
-                startNode: d.id,
-                endNode: s.nodes + 1 + i,
-                properties: {
-                    from: Date.now()
-                },
-                source: d.id,
-                target: s.nodes + 1 + i,
-                linknum: s.relationships + 1 + i
-            };
-            data.relationships[data.relationships.length] = relationship;
-        }
-        return data;
-    }
-    randomLabel() {
-        var icons = Object.keys(this.options.iconMap);
-        return icons[(icons.length * Math.random()) << 0];
-    }
-    rotate(cx, cy, x, y, angle) {
-        var radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians), nx = cos * (x - cx) + sin * (y - cy) + cx, ny = cos * (y - cy) - sin * (x - cx) + cy;
-        return { x: nx, y: ny };
-    }
-    rotatePoint(c, p, angle) {
-        return this.rotate(c.x, c.y, p.x, p.y, angle);
-    }
-    rotation(source, target) {
-        return (Math.atan2(target.y - source.y, target.x - source.x) * 180) / Math.PI;
-    }
-    size() {
-        return {
-            nodes: this.nodes.length,
-            relationships: this.relationships.length
-        };
-    }
-    stickNode(event, d) {
+    dragged(event, d) {
         d.fx = event.x;
         d.fy = event.y;
     }
-    tick() {
-        this.tickNodes();
-        this.tickRelationships();
-    }
-    tickNodes() {
-        if (this.node) {
-            this.node.attr('transform', d => {
-                return 'translate(' + d.x + ', ' + d.y + ')';
-            });
-        }
-    }
-    tickRelationships() {
-        if (this.relationship) {
-            this.relationship.attr('transform', d => {
-                var angle = this.rotation(d.source, d.target);
-                return 'translate(' + d.source.x + ', ' + d.source.y + ') rotate(' + angle + ')';
-            });
-            this.tickRelationshipsTexts();
-            this.tickRelationshipsOutlines();
-            this.tickRelationshipsOverlays();
-        }
-    }
-    tickRelationshipsOutlines() {
-        const self = this;
-        this.relationship.each(function (relationship) {
-            var rel = d3.select(this);
-            var outline = rel.select('.outline'), text = rel.select('.text'), bbox = text.node().getBBox(), padding = 3;
-            outline.attr('d', d => {
-                var center = { x: 0, y: 0 }, angle = self.rotation(d.source, d.target), textBoundingBox = text.node().getBBox(), textPadding = 5, u = self.unitaryVector(d.source, d.target), textMargin = {
-                    x: (d.target.x - d.source.x - (textBoundingBox.width + textPadding) * u.x) * 0.5,
-                    y: (d.target.y - d.source.y - (textBoundingBox.width + textPadding) * u.y) * 0.5
-                }, n = self.unitaryNormalVector(d.source, d.target), rotatedPointA1 = self.rotatePoint(center, { x: 0 + (self.options.nodeRadius + 1) * u.x - n.x, y: 0 + (self.options.nodeRadius + 1) * u.y - n.y }, angle), rotatedPointB1 = self.rotatePoint(center, { x: textMargin.x - n.x, y: textMargin.y - n.y }, angle), rotatedPointC1 = self.rotatePoint(center, { x: textMargin.x, y: textMargin.y }, angle), rotatedPointD1 = self.rotatePoint(center, { x: 0 + (self.options.nodeRadius + 1) * u.x, y: 0 + (self.options.nodeRadius + 1) * u.y }, angle), rotatedPointA2 = self.rotatePoint(center, { x: d.target.x - d.source.x - textMargin.x - n.x, y: d.target.y - d.source.y - textMargin.y - n.y }, angle), rotatedPointB2 = self.rotatePoint(center, {
-                    x: d.target.x - d.source.x - (self.options.nodeRadius + 1) * u.x - n.x - u.x * self.options.arrowSize,
-                    y: d.target.y - d.source.y - (self.options.nodeRadius + 1) * u.y - n.y - u.y * self.options.arrowSize
-                }, angle), rotatedPointC2 = self.rotatePoint(center, {
-                    x: d.target.x -
-                        d.source.x -
-                        (self.options.nodeRadius + 1) * u.x -
-                        n.x +
-                        (n.x - u.x) * self.options.arrowSize,
-                    y: d.target.y -
-                        d.source.y -
-                        (self.options.nodeRadius + 1) * u.y -
-                        n.y +
-                        (n.y - u.y) * self.options.arrowSize
-                }, angle), rotatedPointD2 = self.rotatePoint(center, {
-                    x: d.target.x - d.source.x - (self.options.nodeRadius + 1) * u.x,
-                    y: d.target.y - d.source.y - (self.options.nodeRadius + 1) * u.y
-                }, angle), rotatedPointE2 = self.rotatePoint(center, {
-                    x: d.target.x - d.source.x - (self.options.nodeRadius + 1) * u.x + (-n.x - u.x) * self.options.arrowSize,
-                    y: d.target.y - d.source.y - (self.options.nodeRadius + 1) * u.y + (-n.y - u.y) * self.options.arrowSize
-                }, angle), rotatedPointF2 = self.rotatePoint(center, {
-                    x: d.target.x - d.source.x - (self.options.nodeRadius + 1) * u.x - u.x * self.options.arrowSize,
-                    y: d.target.y - d.source.y - (self.options.nodeRadius + 1) * u.y - u.y * self.options.arrowSize
-                }, angle), rotatedPointG2 = self.rotatePoint(center, { x: d.target.x - d.source.x - textMargin.x, y: d.target.y - d.source.y - textMargin.y }, angle);
-                return ('M ' +
-                    rotatedPointA1.x +
-                    ' ' +
-                    rotatedPointA1.y +
-                    ' L ' +
-                    rotatedPointB1.x +
-                    ' ' +
-                    rotatedPointB1.y +
-                    ' L ' +
-                    rotatedPointC1.x +
-                    ' ' +
-                    rotatedPointC1.y +
-                    ' L ' +
-                    rotatedPointD1.x +
-                    ' ' +
-                    rotatedPointD1.y +
-                    ' Z M ' +
-                    rotatedPointA2.x +
-                    ' ' +
-                    rotatedPointA2.y +
-                    ' L ' +
-                    rotatedPointB2.x +
-                    ' ' +
-                    rotatedPointB2.y +
-                    ' L ' +
-                    rotatedPointC2.x +
-                    ' ' +
-                    rotatedPointC2.y +
-                    ' L ' +
-                    rotatedPointD2.x +
-                    ' ' +
-                    rotatedPointD2.y +
-                    ' L ' +
-                    rotatedPointE2.x +
-                    ' ' +
-                    rotatedPointE2.y +
-                    ' L ' +
-                    rotatedPointF2.x +
-                    ' ' +
-                    rotatedPointF2.y +
-                    ' L ' +
-                    rotatedPointG2.x +
-                    ' ' +
-                    rotatedPointG2.y +
-                    ' Z');
-            });
-        });
-    }
-    tickRelationshipsOverlays() {
-        this.relationshipOverlay.attr('d', d => {
-            var center = { x: 0, y: 0 }, angle = this.rotation(d.source, d.target), n1 = this.unitaryNormalVector(d.source, d.target), n = this.unitaryNormalVector(d.source, d.target, 50), rotatedPointA = this.rotatePoint(center, { x: 0 - n.x, y: 0 - n.y }, angle), rotatedPointB = this.rotatePoint(center, { x: d.target.x - d.source.x - n.x, y: d.target.y - d.source.y - n.y }, angle), rotatedPointC = this.rotatePoint(center, { x: d.target.x - d.source.x + n.x - n1.x, y: d.target.y - d.source.y + n.y - n1.y }, angle), rotatedPointD = this.rotatePoint(center, { x: 0 + n.x - n1.x, y: 0 + n.y - n1.y }, angle);
-            return ('M ' +
-                rotatedPointA.x +
-                ' ' +
-                rotatedPointA.y +
-                ' L ' +
-                rotatedPointB.x +
-                ' ' +
-                rotatedPointB.y +
-                ' L ' +
-                rotatedPointC.x +
-                ' ' +
-                rotatedPointC.y +
-                ' L ' +
-                rotatedPointD.x +
-                ' ' +
-                rotatedPointD.y +
-                ' Z');
-        });
-    }
-    tickRelationshipsTexts() {
-        this.relationshipText.attr('transform', d => {
-            var angle = (this.rotation(d.source, d.target) + 360) % 360, mirror = angle > 90 && angle < 270, center = { x: 0, y: 0 }, n = this.unitaryNormalVector(d.source, d.target), nWeight = mirror ? 2 : -3, point = {
-                x: (d.target.x - d.source.x) * 0.5 + n.x * nWeight,
-                y: (d.target.y - d.source.y) * 0.5 + n.y * nWeight
-            }, rotatedPoint = this.rotatePoint(center, point, angle);
-            return 'translate(' + rotatedPoint.x + ', ' + rotatedPoint.y + ') rotate(' + (mirror ? 180 : 0) + ')';
-        });
-    }
-    toString(d) {
-        var s = d.labels ? d.labels[0] : d.type;
-        s += ' (<id>: ' + d.id;
-        Object.keys(d.properties).forEach(function (property) {
-            s += ', ' + property + ': ' + JSON.stringify(d.properties[property]);
-        });
-        s += ')';
-        return s;
-    }
-    unitaryNormalVector(source, target, newLength) {
-        var center = { x: 0, y: 0 }, vector = this.unitaryVector(source, target, newLength);
-        return this.rotatePoint(center, vector, 90);
-    }
-    unitaryVector(source, target, newLength) {
-        var length = Math.sqrt(Math.pow(target.x - source.x, 2) + Math.pow(target.y - source.y, 2)) / Math.sqrt(newLength || 1);
-        return {
-            x: (target.x - source.x) / length,
-            y: (target.y - source.y) / length
-        };
-    }
-    updateWithD3Data(d3Data) {
-        this.updateNodesAndRelationships(d3Data.nodes, d3Data.relationships);
-    }
-    updateWithGraphData(graphData) {
-        var d3Data = this.graphDataToD3Data(graphData);
-        this.updateWithD3Data(d3Data);
-    }
-    updateInfo(d) {
-        this.clearInfo();
-        if (d.labels) {
-            this.appendInfoElementClass('class', d.labels[0]);
-        }
-        else {
-            this.appendInfoElementRelationship('class', d.type);
-        }
-        this.appendInfoElementProperty('property', '&lt;id&gt;', d.id);
-        Object.keys(d.properties).forEach(property => {
-            this.appendInfoElementProperty('property', property, JSON.stringify(d.properties[property]));
-        });
-    }
-    updateNodes(n) {
-        Array.prototype.push.apply(this.nodes, n);
-        this.node = this.svgNodes.selectAll('.node').data(this.nodes, d => {
-            return d.id;
-        });
-        var nodeEnter = this.appendNodeToGraph();
-        this.node = nodeEnter.merge(this.node);
-    }
-    updateNodesAndRelationships(n, r) {
-        this.updateRelationships(r);
-        this.updateNodes(n);
-        this.simulation.nodes(this.nodes);
-        this.simulation.force('link').links(this.relationships);
-    }
-    updateRelationships(r) {
-        Array.prototype.push.apply(this.relationships, r);
-        this.relationship = this.svgRelationships.selectAll('.relationship').data(this.relationships, d => {
-            return d.id;
-        });
-        var relationshipEnter = this.appendRelationshipToGraph();
-        this.relationship = relationshipEnter.relationship.merge(this.relationship);
-        this.relationshipOutline = this.svg.selectAll('.relationship .outline');
-        this.relationshipOutline = relationshipEnter.outline.merge(this.relationshipOutline);
-        this.relationshipOverlay = this.svg.selectAll('.relationship .overlay');
-        this.relationshipOverlay = relationshipEnter.overlay.merge(this.relationshipOverlay);
-        this.relationshipText = this.svg.selectAll('.relationship .text');
-        this.relationshipText = relationshipEnter.text.merge(this.relationshipText);
+    dragEnded(event, d) {
+        if (!event.active)
+            this.simulation.alphaTarget(0);
+        d.fx = null;
+        d.fy = null;
     }
-    zoomFit(transitionDuration) {
+    zoomFit() {
         var bounds = this.svg.node().getBBox(), parent = this.svg.node().parentElement.parentElement, fullWidth = parent.clientWidth, fullHeight = parent.clientHeight, width = bounds.width, height = bounds.height, midX = bounds.x + width / 2, midY = bounds.y + height / 2;
         if (width === 0 || height === 0) {
             return; // nothing to fit
@@ -804,5 +284,11 @@ export class GraphViewer {
         this.svgTranslate = [fullWidth / 2 - this.svgScale * midX, fullHeight / 2 - this.svgScale * midY];
         this.svg.attr('transform', 'translate(' + this.svgTranslate[0] + ', ' + this.svgTranslate[1] + ') scale(' + this.svgScale + ')');
     }
+    size() {
+        return {
+            nodes: this.nodes.length,
+            relationships: this.relationships.length
+        };
+    }
 }
 //# sourceMappingURL=graph-viewer.js.map