@things-factory/integration-ui 9.0.0-beta.7 → 9.0.0-beta.70

package/client/analysis/graph-viewer-old.ts

@@ -1,1097 +0,0 @@
-import * as d3 from 'd3'
-
-export class GraphViewer {
-  public simulation
-
-  private container
-  private info
-  private node
-  private nodes
-  private relationship
-  private relationshipOutline
-  private relationshipOverlay
-  private relationshipText
-  private relationships
-  private selector
-  private svg
-  private svgNodes
-  private svgRelationships
-  private svgScale
-  private svgTranslate: any
-  private classes2colors = {}
-  private justLoaded = false
-  private numClasses = 0
-  private options = {
-    arrowSize: 4,
-    colors: this.colors(),
-    highlight: undefined,
-    infoPanel: true,
-    minCollision: undefined,
-    graphData: undefined,
-    dataUrl: undefined,
-    nodeOutlineFillColor: undefined,
-    nodeRadius: 25,
-    relationshipColor: '#a5abb6',
-    zoomFit: false
-  } as any
-
-  constructor(_selector: any, _options: any) {
-    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?: any) {
-    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: [] as any[],
-      relationships: [] as any[]
-    }
-
-    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: [] as any[],
-        relationships: [] as any[]
-      },
-      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 (this, 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?: any) {
-    var center = { x: 0, y: 0 },
-      vector = this.unitaryVector(source, target, newLength)
-
-    return this.rotatePoint(center, vector, 90)
-  }
-
-  unitaryVector(source, target, newLength?: any) {
-    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 + ')'
-    )
-  }
-}