make linklist.setData idempotent

lib/linklist.js

@@ -1,7 +1,8 @@
-define(["tablesort", "tablesort.numeric"], function (Tablesort) {
+define(["tablesort", "virtual-dom", "tablesort.numeric"],
+  function (Tablesort, V) {
   return function(linkScale, router) {
     var self = this
-    var el
+    var el, tbody, sort
 
     self.render = function (d)  {
       el = document.createElement("div")
@@ -12,64 +13,60 @@ define(["tablesort", "tablesort.numeric"], function (Tablesort) {
       if (data.graph.links.length === 0)
         return
 
-      var h2 = document.createElement("h2")
-      h2.textContent = "Verbindungen"
-      el.appendChild(h2)
+      if (!tbody) {
+        var h2 = document.createElement("h2")
+        h2.textContent = "Verbindungen"
+        el.appendChild(h2)
 
-      var table = document.createElement("table")
-      var thead = document.createElement("thead")
+        var table = document.createElement("table")
+        el.appendChild(table)
 
-      var tr = document.createElement("tr")
-      var th1 = document.createElement("th")
-      th1.textContent = "Knoten"
-      tr.appendChild(th1)
+        var thead = document.createElement("thead")
 
-      var th2 = document.createElement("th")
-      th2.textContent = "TQ"
-      tr.appendChild(th2)
+        var tr = document.createElement("tr")
+        var th1 = document.createElement("th")
+        th1.textContent = "Knoten"
+        tr.appendChild(th1)
 
-      var th3 = document.createElement("th")
-      th3.textContent = "Entfernung"
-      th3.classList.add("sort-default")
-      tr.appendChild(th3)
+        var th2 = document.createElement("th")
+        th2.textContent = "TQ"
+        tr.appendChild(th2)
 
-      thead.appendChild(tr)
+        var th3 = document.createElement("th")
+        th3.textContent = "Entfernung"
+        th3.classList.add("sort-default")
+        tr.appendChild(th3)
 
-      table.appendChild(thead)
+        thead.appendChild(tr)
+        table.appendChild(thead)
 
-      var tbody = document.createElement("tbody")
+        tbody = document.createElement("tbody")
+        tbody.last = V.h("tbody")
+        table.appendChild(tbody)
 
-      data.graph.links.forEach( function (d) {
-        var row = document.createElement("tr")
-        var td1 = document.createElement("td")
-        var a = document.createElement("a")
-        a.textContent = d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname
-        a.href = "#"
-        a.onclick = router.link(d)
-        td1.appendChild(a)
-        row.appendChild(td1)
+        sort = new Tablesort(table)
+      }
 
-        if (d.vpn)
-          td1.appendChild(document.createTextNode(" (VPN)"))
+      var items = data.graph.links.map( function (d) {
+        var name = d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname
+        var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, name)]
 
-        var td2 = document.createElement("td")
-        td2.textContent = showTq(d)
-        td2.style.color = linkScale(d.tq)
-        row.appendChild(td2)
+        if (d.vpn)
+          td1Content.push(" (VPN)")
 
-        var td3 = document.createElement("td")
-        td3.textContent = showDistance(d)
-        td3.setAttribute("data-sort", d.distance !== undefined ? -d.distance : 1)
-        row.appendChild(td3)
+        var td1 = V.h("td", td1Content)
+        var td2 = V.h("td", {style: {color: linkScale(d.tq)}}, showTq(d))
+        var td3 = V.h("td", {attributes: {
+                              "data-sort": d.distance !== undefined ? -d.distance : 1
+                            }}, showDistance(d))
 
-        tbody.appendChild(row)
+        return V.h("tr", [td1, td2, td3])
       })
 
-      table.appendChild(tbody)
-
-      new Tablesort(table)
-
-      el.appendChild(table)
+      var tbodyNew = V.h("tbody", items)
+      tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew))
+      tbody.last = tbodyNew
+      sort.refresh()
     }
   }
 })