@things-factory/integration-ui 7.0.33 → 7.0.35

package/client/analysis/graph-viewer.ts

@@ -1,46 +1,42 @@
 import * as d3 from 'd3'
+import { Node, Relationship, GraphData } from './graph-data'
 
 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 svg: any
+  private svgNodes: any
+  private svgRelationships: any
+  private nodes: Node[] = []
+  private relationships: Relationship[] = []
+  private needZoomFit = true
+  private options: any
   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
+  private svgTranslate
+
+  public simulation: any
 
   constructor(_selector: any, _options: any) {
-    this.init(_selector, _options)
+    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,
+      classes2colors: {},
+      numClasses: 0,
+      ..._options
+    }
+    this.init(_selector)
   }
 
-  appendGraph(container) {
-    this.svg = container
+  private init(selector: any) {
+    this.svg = d3
+      .select(selector)
       .append('svg')
       .attr('width', '100%')
       .attr('height', '100%')
@@ -63,83 +59,170 @@ export class GraphViewer {
         })
       )
       .on('dblclick.zoom', null)
-      .append('g')
+      .append('g') // 그룹 요소 추가
       .attr('width', '100%')
       .attr('height', '100%')
 
-    this.svgRelationships = this.svg.append('g').attr('class', 'relationships')
+    // Define arrow markers for graph links
+    this.svg
+      .append('defs')
+      .append('marker')
+      .attr('id', 'arrow')
+      .attr('viewBox', '0 -5 10 10')
+      .attr('refX', 10)
+      .attr('refY', 0)
+      .attr('markerWidth', 6)
+      .attr('markerHeight', 6)
+      .attr('orient', 'auto')
+      .append('path')
+      .attr('d', 'M0,-5L10,0L0,5')
+      .attr('fill', this.options.relationshipColor)
 
     this.svgNodes = this.svg.append('g').attr('class', 'nodes')
+    this.svgRelationships = this.svg.append('g').attr('class', 'relationships')
+    this.simulation = this.initSimulation()
+
+    if (this.options.graphData) {
+      this.updateWithGraphData(this.options.graphData)
+    }
   }
 
-  appendImageToNode(node) {
-    return node
-      .append('image')
-      .attr('height', d => {
-        return this.icon(d) ? '24px' : '30px'
-      })
-      .attr('x', d => {
-        return this.icon(d) ? '5px' : '-15px'
-      })
-      .attr('xlink:href', d => {
-        return this.image(d)
-      })
-      .attr('y', d => {
-        return this.icon(d) ? '5px' : '-16px'
+  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()
       })
-      .attr('width', d => {
-        return this.icon(d) ? '24px' : '30px'
+      .on('end', () => {
+        if (this.options.zoomFit && this.needZoomFit) {
+          this.needZoomFit = false
+          this.zoomFit()
+        }
       })
+
+    return simulation
   }
 
-  appendInfoPanel(container) {
-    return container.append('div').attr('class', 'graph-info')
+  private tick() {
+    this.svgNodes.selectAll('.node').attr('transform', (d: any) => `translate(${d.x}, ${d.y})`)
+
+    this.svgRelationships
+      .selectAll('.relationship')
+      .attr('x1', (d: any) => this.calculateIntersection(d.source, d.target).x1)
+      .attr('y1', (d: any) => this.calculateIntersection(d.source, d.target).y1)
+      .attr('x2', (d: any) => this.calculateIntersection(d.source, d.target).x2)
+      .attr('y2', (d: any) => this.calculateIntersection(d.source, d.target).y2)
+
+    this.svgRelationships.selectAll('.relationship-text').attr('transform', (d: any) => {
+      const midX =
+        (this.calculateIntersection(d.source, d.target).x1 + this.calculateIntersection(d.source, d.target).x2) / 2
+      const midY =
+        (this.calculateIntersection(d.source, d.target).y1 + this.calculateIntersection(d.source, d.target).y2) / 2
+      return `translate(${midX}, ${midY})`
+    })
   }
 
-  appendInfoElement(cls, isNode, property, value?: any) {
-    var elem = this.info.append('a')
+  private calculateIntersection(source, target) {
+    const dx = target.x - source.x
+    const dy = target.y - source.y
+    const distance = Math.sqrt(dx * dx + dy * dy)
+    const ratio = (distance - this.options.nodeRadius) / distance
 
-    elem
-      .attr('href', '#')
-      .attr('class', cls)
-      .html('<strong>' + property + '</strong>' + (value ? ': ' + value : ''))
+    const x1 = source.x + dx * (this.options.nodeRadius / distance)
+    const y1 = source.y + dy * (this.options.nodeRadius / distance)
+    const x2 = target.x - dx * (this.options.nodeRadius / distance)
+    const y2 = target.y - dy * (this.options.nodeRadius / distance)
 
-    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'
-        })
-    }
+    return { x1, y1, x2, y2 }
   }
 
-  appendInfoElementClass(cls, node) {
-    this.appendInfoElement(cls, true, node)
+  private colors() {
+    return [
+      '#68bdf6', // light blue
+      '#6dce9e', // green #1
+      '#faafc2', // light pink
+      '#f2baf6', // purple
+      '#ff928c', // light red
+      '#fcea7e', // light yellow
+      '#ffc766', // light orange
+      '#405f9e', // navy blue
+      '#a5abb6', // dark gray
+      '#78cecb', // green #2,
+      '#b88cbb', // dark purple
+      '#ced2d9', // light gray
+      '#e84646', // dark red
+      '#fa5f86', // dark pink
+      '#ffab1a', // dark orange
+      '#fcda19', // dark yellow
+      '#797b80', // black
+      '#c9d96f', // pistachio
+      '#47991f', // green #3
+      '#70edee', // turquoise
+      '#ff75ea' // pink
+    ]
   }
 
-  appendInfoElementProperty(cls, property, value) {
-    this.appendInfoElement(cls, false, property, value)
+  updateWithGraphData(graphData: GraphData) {
+    this.nodes = graphData.results[0].data[0].graph.nodes
+    this.relationships = graphData.results[0].data[0].graph.relationships
+
+    this.relationships.forEach(rel => {
+      const sourceNode = this.nodes.find(node => node.id === rel.startNode)
+      const targetNode = this.nodes.find(node => node.id === rel.endNode)
+
+      if (!sourceNode || !targetNode) {
+        console.warn(`Node not found for relationship: ${rel.id}`)
+        return
+      }
+
+      rel.source = sourceNode
+      rel.target = targetNode
+    })
+
+    this.updateNodesAndRelationships()
   }
 
-  appendInfoElementRelationship(cls, relationship) {
-    this.appendInfoElement(cls, false, relationship)
+  private updateNodesAndRelationships() {
+    this.needZoomFit = true
+
+    this.svgNodes.selectAll('.node').remove()
+    this.svgRelationships.selectAll('.relationship').remove()
+    this.svgRelationships.selectAll('.relationship-text').remove()
+
+    this.appendNodesToGraph()
+    this.appendRelationshipsToGraph()
+
+    this.simulation.nodes(this.nodes)
+    ;(this.simulation.force('link') as d3.ForceLink<Node, Relationship>).links(this.relationships)
+
+    // 시뮬레이션을 강제로 재시작하여 레이아웃이 적절히 재정렬되도록 함
+    this.simulation.alpha(1).restart()
   }
 
-  appendNode() {
-    return this.node
+  private appendNodesToGraph() {
+    const nodeEnter = this.svgNodes
+      .selectAll('.node')
+      .data(this.nodes, (d: any) => d.id)
       .enter()
       .append('g')
       .attr('class', d => {
@@ -148,25 +231,10 @@ export class GraphViewer {
           classes = 'node',
           label = d.labels[0]
 
-        if (this.icon(d)) {
+        if (d.icon) {
           classes += ' node-icon'
         }
 
-        if (this.image(d)) {
-          classes += ' node-image'
-        }
-
-        if (this.options.highlight) {
-          for (i = 0; i < this.options.highlight.length; i++) {
-            highlight = this.options.highlight[i]
-
-            if (d.labels[0] === highlight.class && d.properties[highlight.property] === highlight.value) {
-              classes += ' node-highlighted'
-              break
-            }
-          }
-        }
-
         return classes
       })
       .on('click', (event, d) => {
@@ -184,22 +252,20 @@ export class GraphViewer {
         }
       })
       .on('mouseenter', (event, d) => {
-        if (this.info) {
-          this.updateInfo(d)
-        }
-
-        if (typeof this.options.onNodeMouseEnter === 'function') {
-          this.options.onNodeMouseEnter(d)
-        }
+        event.target.dispatchEvent(
+          new CustomEvent('node-mouseenter', {
+            detail: d,
+            bubbles: true
+          })
+        )
       })
       .on('mouseleave', (event, d) => {
-        if (this.info) {
-          this.clearInfo()
-        }
-
-        if (typeof this.options.onNodeMouseLeave === 'function') {
-          this.options.onNodeMouseLeave(d)
-        }
+        event.target.dispatchEvent(
+          new CustomEvent('node-mouseleave', {
+            detail: d,
+            bubbles: true
+          })
+        )
       })
       .call(
         d3
@@ -208,871 +274,101 @@ export class GraphViewer {
           .on('drag', this.dragged.bind(this))
           .on('end', this.dragEnded.bind(this))
       )
-  }
-
-  appendNodeToGraph() {
-    var n = this.appendNode()
 
-    this.appendRingToNode(n)
-    // this.appendBoxToNode(n)
-    this.appendOutlineToNode(n)
-
-    if (this.options.icons) {
-      this.appendTextToNode(n)
-    }
-
-    if (this.options.images) {
-      this.appendImageToNode(n)
-    }
-
-    return n
-  }
-
-  appendOutlineToNode(node) {
-    const outline = node
+    nodeEnter
       .append('circle')
       .attr('class', 'outline')
       .attr('r', this.options.nodeRadius)
-      .style('fill', d => {
-        return this.options.nodeOutlineFillColor ? this.options.nodeOutlineFillColor : this.class2color(d.labels[0])
-      })
-      .style('stroke', d => {
-        return this.options.nodeOutlineFillColor
-          ? this.class2darkenColor(this.options.nodeOutlineFillColor)
-          : this.class2darkenColor(d.labels[0])
-      })
-      .append('title')
-      .text(d => {
-        return this.toString(d)
-      })
+      .style('fill', d => this.class2color(d.labels[0]))
+      .style('stroke', d => this.class2darkenColor(d.labels[0]))
+      .style('stroke-width', 2)
 
-    node
+    nodeEnter
       .append('text')
-      .attr('class', 'node-text')
+      .attr('class', 'text icon')
       .attr('x', 0)
-      .attr('y', 52)
-      .attr('text-anchor', 'middle') // 텍스트 중앙 정렬
-      .attr('fill', 'black') // 텍스트 색상을 검은색으로 변경
-      .text(d => d.text)
-
-    return outline
-  }
-
-  appendBoxToNode(node) {
-    const rect = node
-      .append('rect')
-      .attr('class', 'node-rect')
-      .attr('width', 160) // 사각형의 너비
-      .attr('height', 30) // 사각형의 높이
-      .attr('x', -80) // 사각형의 중심을 기준으로 x 위치 조정
-      .attr('y', -15) // 사각형의 중심을 기준으로 y 위치 조정
-      .style('fill', d => {
-        return this.options.nodeOutlineFillColor ? this.options.nodeOutlineFillColor : this.class2color(d.labels[0])
-      })
-      .style('stroke', d => {
-        return this.options.nodeOutlineFillColor
-          ? this.class2darkenColor(this.options.nodeOutlineFillColor)
-          : this.class2darkenColor(d.labels[0])
-      })
-      .append('title')
-      .text(d => {
-        return this.toString(d)
-      })
+      .attr('y', 0)
+      .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'central')
+      .attr('font-family', 'Material Symbols Outlined')
+      .attr('font-size', '24px')
+      .attr('fill', '#000')
+      .text(d => this.getNodeIcon(d))
 
-    node
+    nodeEnter
       .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)
-      })
+      .attr('dy', 40)
+      .attr('text-anchor', 'middle')
+      .text(d => d.properties.name || d.id)
   }
 
-  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))
+  stickNode(event: d3.event, d) {
+    d.fx = event.x
+    d.fy = event.y
   }
 
-  appendRelationship() {
-    return this.relationship
+  private appendRelationshipsToGraph() {
+    const relationshipEnter = this.svgRelationships
+      .selectAll('.relationship')
+      .data(
+        this.relationships.filter(rel => rel.source && rel.target),
+        d => d.id
+      )
       .enter()
       .append('g')
-      .attr('class', 'relationship')
-      .on('dblclick', (event, d) => {
-        if (typeof this.options.onRelationshipDoubleClick === 'function') {
-          this.options.onRelationshipDoubleClick(d)
-        }
-      })
-      .on('mouseenter', (event, d) => {
-        if (this.info) {
-          this.updateInfo(d)
-        }
-      })
-  }
+      .attr('class', 'relationship-group')
 
-  appendOutlineToRelationship(r) {
-    return r.append('path').attr('class', 'outline').attr('fill', '#a5abb6').attr('stroke', 'none')
-  }
-
-  appendOverlayToRelationship(r) {
-    return r.append('path').attr('class', 'overlay')
-  }
+    relationshipEnter
+      .append('line')
+      .attr('class', 'relationship')
+      .style('stroke', this.options.relationshipColor)
+      .style('stroke-width', 2)
+      .attr('marker-end', 'url(#arrow)')
 
-  appendTextToRelationship(r) {
-    return r
+    relationshipEnter
       .append('text')
-      .attr('class', 'text')
+      .attr('class', 'relationship-text')
       .attr('fill', '#000000')
       .attr('font-size', '8px')
       .attr('pointer-events', 'none')
       .attr('text-anchor', 'middle')
-      .text(d => {
-        return d.type
-      })
+      .text(d => d.type)
   }
 
-  appendRelationshipToGraph() {
-    var relationship = this.appendRelationship(),
-      text = this.appendTextToRelationship(relationship),
-      outline = this.appendOutlineToRelationship(relationship),
-      overlay = this.appendOverlayToRelationship(relationship)
-
-    return {
-      outline: outline,
-      overlay: overlay,
-      relationship: relationship,
-      text: text
-    }
+  private getNodeIcon(d: Node): string {
+    return d.icon || ''
   }
 
-  class2color(cls) {
-    var color = this.classes2colors[cls]
-
-    if (!color) {
-      //            color = this.options.colors[Math.min(numClasses, this.options.colors.length - 1)];
-      color = this.options.colors[this.numClasses % this.options.colors.length]
-      this.classes2colors[cls] = color
-      this.numClasses++
+  private class2color(cls: string) {
+    if (!this.options.classes2colors[cls]) {
+      this.options.classes2colors[cls] = this.options.colors[this.options.numClasses % this.options.colors.length]
+      this.options.numClasses++
     }
-
-    return color
+    return this.options.classes2colors[cls]
   }
 
-  class2darkenColor(cls) {
+  private class2darkenColor(cls: string) {
     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()
-    }
-
+  private dragStarted(event: any, d: Node) {
+    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) {
+  private dragged(event: any, d: Node) {
     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 + ')'
-      })
-    }
+  private dragEnded(event: any, d: Node) {
+    if (!event.active) this.simulation.alphaTarget(0)
+    d.fx = null
+    d.fy = null
   }
 
-  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) {
+  zoomFit() {
     var bounds = this.svg.node().getBBox(),
       parent = this.svg.node().parentElement.parentElement,
       fullWidth = parent.clientWidth,
@@ -1094,4 +390,11 @@ export class GraphViewer {
       'translate(' + this.svgTranslate[0] + ', ' + this.svgTranslate[1] + ') scale(' + this.svgScale + ')'
     )
   }
+
+  size() {
+    return {
+      nodes: this.nodes.length,
+      relationships: this.relationships.length
+    }
+  }
 }