@things-factory/integration-ui 7.0.31 → 7.0.35

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

@@ -0,0 +1,1097 @@
+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 + ')'
+    )
+  }
+}