/* global NGD:true, $ */
NGD = {
  data: {
    nodes: [],
    links: []
  },
  vis: null // visualisation object
}

$(function () {
  // Init vis canvas
  var container = document.getElementById('canvas')
  var options = {
    edges: {
      smooth: {
        type: 'discrete',
        roundness: 0
      },
      width: 2
    },
    nodes: {
      mass: 5,
      shape: 'dot',
      size: 20
    }
  }
  NGD.vis = new vis.Network(container, {}, options)

  // Load nodes
  $.ajax({
    url: 'data/nodes.json',
    success: (data) => {
      NGD.data.nodes = data
      var tbody = $('#data-nodes table tbody')
      for (var i in data) {
        var item = data[i]
        $('<tr>')
          .append($('<td>').text(item.type))
          .append($('<td>').text(item.key))
          .append($('<td>').text(item.label))
          .appendTo(tbody)
      }
    }
  })

  // Load links
  $.ajax({
    url: 'data/links.json',
    success: (data) => {
      NGD.data.links = data
      var tbody = $('#data-links table tbody')
      for (var i in data) {
        var item = data[i]
        $('<tr>')
          .append($('<td>').text(item.type))
          .append($('<td>').text(item.quo.key + (item.quo.parent ? ' (P)' : '')))
          .append($('<td>').text(item.rel.key ? item.rel.key : 'null'))
          .append($('<td>').text(item.sic.key + (item.sic.parent ? ' (P)' : '')))
          .append($('<td>').text(item.status))
          .appendTo(tbody)
      }
    }
  })

  require(['Parser'], function (p) {
    $('#btnParse').click(() => {
      var input = $('#inputPhrase').val()
      var parser = new p.Parser(NGD.data)
      $('#output').html('')
      parser.parse(input, (err, data) => {
        if (err) {
          $('#output')
            .append($('<h3>').text('Error'))
            .append($('<pre>').addClass('alert-danger').text(err))
        } else {
          for (var i in data) {
            var out = typeof data[i] === 'string' ? data[i] : JSON.stringify(data[i], null, 2)
            $('#output')
              .append($('<h3>').text(i))
              .append($('<pre>').text(out))
          }

          visualise(data.network)
        }
      })
      return false
    })
  })

  /* global vis */
  function visualise (network) {
    var data = network.toVisJS()
    console.log(data)
    NGD.vis.setData(data)
  }
})

@@ -549,32 +549,58 @@
 ta.nodes = data%0A
+      var nodes_dict = %7B%7D%0A
       var tbody 
@@ -689,32 +689,116 @@
 %5Bi%5D%0A        
-$('%3Ctr%3E'
+nodes_dict%5Bitem.key%5D = item.label%0A        $('%3Ctr%3E')%0A          .attr('id', 'node-' + item.key
 )%0A          
@@ -957,28 +957,21 @@
       %7D%0A
+%0A
     
-%7D%0A  %7D)%0A%0A
   // Loa
@@ -978,16 +978,20 @@
 d links%0A
+    
   $.ajax
@@ -985,32 +985,36 @@
 %0A      $.ajax(%7B%0A
+    
     url: 'data/l
@@ -1021,32 +1021,36 @@
 inks.json',%0A    
+  
+  
 success: (data) 
@@ -1046,32 +1046,36 @@
 ss: (data) =%3E %7B%0A
+    
       NGD.data.l
@@ -1088,24 +1088,28 @@
  data%0A      
+ 
+   
 var tbody = 
@@ -1135,32 +1135,36 @@
 e tbody')%0A      
+   
+ 
 for (var i in da
@@ -1169,32 +1169,36 @@
 data) %7B%0A        
+    
 var item = data%5B
@@ -1200,24 +1200,25 @@
 data%5Bi%5D%0A
+%0A
         
 $('%3Ctr%3E'
@@ -1213,145 +1213,515 @@
     
-$('%3Ctr%3E')%0A          .append($('%3Ctd%3E').text(item.type))%0A          .append($('%3Ctd%3E').text(item.quo.key + (item.quo.parent ? ' (P)' : '')))%0A
+    var text = %7B%7D%0A            var fields = %5B'quo', 'rel', 'sic'%5D%0A            for (var f in fields) %7B%0A              var field = fields%5Bf%5D%0A              if (!item%5Bfield%5D.key) %7B%0A                text%5Bfield%5D = '%3Cem%3Enull%3C/em%3E'%0A                continue%0A              %7D%0A              text%5Bfield%5D = item%5Bfield%5D.key%0A              if (item%5Bfield%5D.parent) text%5Bfield%5D += ' (P)'%0A              text%5Bfield%5D += ' %3Cspan class=%22text-muted%22%3E' + nodes_dict%5Bitem%5Bfield%5D.key%5D + '%3C/span%3E'%0A            %7D%0A%0A            $('%3Ctr%3E')%0A    
     
@@ -1748,134 +1748,173 @@
 %3E').
-text
+html
 (item.
-rel.key ? item.rel.key : 'null'))%0A          .append($('%3Ctd%3E').text(item.sic.key + (item.sic.parent ? ' (P)' : '')))%0A
+type))%0A              .append($('%3Ctd%3E').html(text.quo))%0A              .append($('%3Ctd%3E').html(text.rel))%0A              .append($('%3Ctd%3E').html(text.sic))%0A    
     
@@ -1933,28 +1933,28 @@
 d($('%3Ctd%3E').
-text
+html
 (item.status
@@ -1958,32 +1958,36 @@
 tus))%0A          
+  
+  
 .appendTo(tbody)
@@ -1989,25 +1989,48 @@
 body)%0A      
-%7D
+    %7D%0A        %7D%0A      %7D)
 %0A    %7D%0A  %7D)%0A

Include node labels when displaying links in web