@things-factory/integration-ui 7.0.33 → 7.0.35

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

@@ -0,0 +1,808 @@
+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);
+    }
+    appendGraph(container) {
+        this.svg = container
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('class', 'graph-viewer')
+            .call(d3.zoom().on('zoom', (event, d) => {
+            var scale = event.transform.k, translate = [event.transform.x, event.transform.y];
+            if (this.svgTranslate) {
+                translate[0] += this.svgTranslate[0];
+                translate[1] += this.svgTranslate[1];
+            }
+            if (this.svgScale) {
+                scale *= this.svgScale;
+            }
+            this.svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')');
+        }))
+            .on('dblclick.zoom', null)
+            .append('g')
+            .attr('width', '100%')
+            .attr('height', '100%');
+        this.svgRelationships = this.svg.append('g').attr('class', 'relationships');
+        this.svgNodes = this.svg.append('g').attr('class', 'nodes');
+    }
+    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);
+        })
+            .attr('y', d => {
+            return this.icon(d) ? '5px' : '-16px';
+        })
+            .attr('width', d => {
+            return this.icon(d) ? '24px' : '30px';
+        });
+    }
+    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';
+            });
+        }
+    }
+    appendInfoElementClass(cls, node) {
+        this.appendInfoElement(cls, true, node);
+    }
+    appendInfoElementProperty(cls, property, value) {
+        this.appendInfoElement(cls, false, property, value);
+    }
+    appendInfoElementRelationship(cls, relationship) {
+        this.appendInfoElement(cls, false, relationship);
+    }
+    appendNode() {
+        return this.node
+            .enter()
+            .append('g')
+            .attr('class', d => {
+            var highlight, i, classes = 'node', label = d.labels[0];
+            if (this.icon(d)) {
+                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) => {
+            d.fx = d.fy = null;
+            if (typeof this.options.onNodeClick === 'function') {
+                this.options.onNodeClick(d);
+            }
+        })
+            .on('dblclick', (event, d) => {
+            this.stickNode(event, d);
+            if (typeof this.options.onNodeDoubleClick === 'function') {
+                this.options.onNodeDoubleClick(d);
+            }
+        })
+            .on('mouseenter', (event, d) => {
+            if (this.info) {
+                this.updateInfo(d);
+            }
+            if (typeof this.options.onNodeMouseEnter === 'function') {
+                this.options.onNodeMouseEnter(d);
+            }
+        })
+            .on('mouseleave', (event, d) => {
+            if (this.info) {
+                this.clearInfo();
+            }
+            if (typeof this.options.onNodeMouseLeave === 'function') {
+                this.options.onNodeMouseLeave(d);
+            }
+        })
+            .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
+            .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
+            .append('text')
+            .attr('class', 'node-text')
+            .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('text-anchor', 'middle')
+            .attr('y', '24px')
+            .attr('font-family', 'Material Symbols Outlined')
+            .attr('font-size', '48px')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'top')
+            .text(d => this.icon(d));
+    }
+    appendRelationship() {
+        return this.relationship
+            .enter()
+            .append('g')
+            .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
+            .append('text')
+            .attr('class', 'text')
+            .attr('fill', '#000000')
+            .attr('font-size', '8px')
+            .attr('pointer-events', 'none')
+            .attr('text-anchor', 'middle')
+            .text(d => {
+            return 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
+        };
+    }
+    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++;
+        }
+        return color;
+    }
+    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) {
+            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) {
+        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);
+    }
+    zoomFit(transitionDuration) {
+        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
+        }
+        this.svgScale = 0.85 / Math.max(width / fullWidth, height / fullHeight);
+        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 + ')');
+    }
+}
+//# sourceMappingURL=graph-viewer-old.js.map