@things-factory/integration-ui 9.0.0-beta.20 → 9.0.0-beta.24

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

@@ -1,808 +0,0 @@
-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