Merge commit '8f634b4ba2b2c2ebb3d6337ad3df1270e7fd8328'

lib/datadistributor.js

@@ -0,0 +1,80 @@
+define(["filters/nodefilter"], function (NodeFilter) {
+  return function () {
+    var targets = []
+    var filterObservers = []
+    var filters = []
+    var filteredData
+    var data
+
+    function remove(d) {
+      targets = targets.filter( function (e) { return d !== e } )
+    }
+
+    function add(d) {
+      targets.push(d)
+
+      if (filteredData !== undefined)
+        d.setData(filteredData)
+    }
+
+    function setData(d) {
+      data = d
+      refresh()
+    }
+
+    function refresh() {
+      if (data === undefined)
+        return
+
+      var filter = filters.reduce( function (a, f) {
+        return function (d) {
+          return a(d) && f.run(d)
+        }
+      }, function () { return true })
+
+      filteredData = new NodeFilter(filter)(data)
+
+      targets.forEach( function (t) {
+        t.setData(filteredData)
+      })
+    }
+
+    function notifyObservers() {
+      filterObservers.forEach( function (d) {
+        d.filtersChanged(filters)
+      })
+    }
+
+    function addFilter(d) {
+      filters.push(d)
+      notifyObservers()
+      d.setRefresh(refresh)
+      refresh()
+    }
+
+    function removeFilter(d) {
+      filters = filters.filter( function (e) { return d !== e } )
+      notifyObservers()
+      refresh()
+    }
+
+    function watchFilters(d) {
+      filterObservers.push(d)
+
+      d.filtersChanged(filters)
+
+      return function () {
+        filterObservers = filterObservers.filter( function (e) { return d !== e })
+      }
+    }
+
+    return { add: add,
+             remove: remove,
+             setData: setData,
+             addFilter: addFilter,
+             removeFilter: removeFilter,
+             watchFilters: watchFilters,
+             refresh: refresh
+           }
+  }
+})

lib/filters/filtergui.js

@@ -0,0 +1,40 @@
+define([], function () {
+  return function (distributor) {
+    var container = document.createElement("ul")
+    container.classList.add("filters")
+    var div = document.createElement("div")
+
+    function render(el) {
+      el.appendChild(div)
+    }
+
+    function filtersChanged(filters) {
+      while (container.firstChild)
+        container.removeChild(container.firstChild)
+
+      filters.forEach( function (d) {
+        var li = document.createElement("li")
+        var div = document.createElement("div")
+        container.appendChild(li)
+        li.appendChild(div)
+        d.render(div)
+
+        var button = document.createElement("button")
+        button.textContent = ""
+        button.onclick = function () {
+          distributor.removeFilter(d)
+        }
+        li.appendChild(button)
+      })
+
+      if (container.parentNode === div && filters.length === 0)
+        div.removeChild(container)
+      else if (filters.length > 0)
+        div.appendChild(container)
+    }
+
+    return { render: render,
+             filtersChanged: filtersChanged
+           }
+  }
+})

lib/filters/genericnode.js

@@ -0,0 +1,52 @@
+define([], function () {
+  return function (name, key, value, f) {
+    var negate = false
+    var refresh
+
+    var label = document.createElement("label")
+    var strong = document.createElement("strong")
+    label.textContent = name + " "
+    label.appendChild(strong)
+
+    function run(d) {
+      var o = dictGet(d, key.slice(0))
+
+      if (f)
+        o = f(o)
+
+      return o === value ? !negate : negate
+    }
+
+    function setRefresh(f) {
+      refresh = f
+    }
+
+    function draw(el) {
+      if (negate)
+        el.parentNode.classList.add("not")
+      else
+        el.parentNode.classList.remove("not")
+
+      strong.textContent = (negate ? "¬" : "" ) + value
+    }
+
+    function render(el) {
+      el.appendChild(label)
+      draw(el)
+
+      label.onclick = function () {
+        negate = !negate
+
+        draw(el)
+
+        if (refresh)
+          refresh()
+      }
+    }
+
+    return { run: run,
+             setRefresh: setRefresh,
+             render: render
+           }
+  }
+})

lib/filters/nodefilter.js

@@ -0,0 +1,33 @@
+define([], function () {
+  return function (filter) {
+    return function (data) {
+      var n = Object.create(data)
+      n.nodes = {}
+
+      for (var key in data.nodes) {
+        n.nodes[key] = data.nodes[key].filter(filter)
+      }
+
+      var filteredIds = new Set()
+
+      n.graph = {}
+      n.graph.nodes = data.graph.nodes.filter( function (d) {
+        if (!d.node)
+          return true
+
+        var r = filter(d.node)
+
+        if (r)
+          filteredIds.add(d.id)
+
+        return r
+      })
+
+      n.graph.links = data.graph.links.filter( function (d) {
+        return filteredIds.has(d.source.id) && filteredIds.has(d.target.id)
+      })
+
+      return n
+    }
+  }
+})

lib/gui.js

@@ -1,13 +1,12 @@
 define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
          "legend", "linklist", "nodelist", "simplenodelist", "infobox/main",
-         "proportions", "forcegraph", "title", "about" ],
+         "proportions", "forcegraph", "title", "about", "datadistributor",
+         "filters/filtergui" ],
 function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
           Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
-          Title, About) {
+          Title, About, DataDistributor, FilterGUI) {
   return function (config, router) {
     var self = this
-    var dataTargets = []
-    var latestData
     var content
     var contentDiv
 
@@ -17,16 +16,17 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
     var buttons = document.createElement("div")
     buttons.classList.add("buttons")
 
-    function dataTargetRemove(d) {
-      dataTargets = dataTargets.filter( function (e) { return d !== e })
-    }
+    var fanout = new DataDistributor()
+    var fanoutUnfiltered = new DataDistributor()
+    fanoutUnfiltered.add(fanout)
 
     function removeContent() {
       if (!content)
         return
 
       router.removeTarget(content)
-      dataTargetRemove(content)
+      fanout.remove(content)
+
       content.destroy()
 
       content = null
@@ -38,10 +38,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
       content = new K(config, linkScale, sidebar.getWidth, router, buttons)
       content.render(contentDiv)
 
-      if (latestData)
-        content.setData(latestData)
-
-      dataTargets.push(content)
+      fanout.add(content)
       router.addTarget(content)
     }
 
@@ -82,15 +79,15 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
     var lostnodeslist = new SimpleNodelist("lost", "lastseen", router, "Verschwundene Knoten")
     var nodelist = new Nodelist(router)
     var linklist = new Linklist(linkScale, router)
-    var statistics = new Proportions(config)
+    var statistics = new Proportions(config, fanout)
     var about = new About()
 
-    dataTargets.push(meshstats)
-    dataTargets.push(newnodeslist)
-    dataTargets.push(lostnodeslist)
-    dataTargets.push(nodelist)
-    dataTargets.push(linklist)
-    dataTargets.push(statistics)
+    fanoutUnfiltered.add(meshstats)
+    fanoutUnfiltered.add(newnodeslist)
+    fanoutUnfiltered.add(lostnodeslist)
+    fanout.add(nodelist)
+    fanout.add(linklist)
+    fanout.add(statistics)
 
     sidebar.add(header)
     header.add(meshstats)
@@ -99,6 +96,10 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
     overview.add(newnodeslist)
     overview.add(lostnodeslist)
 
+    var filterGUI = new FilterGUI(fanout)
+    fanout.watchFilters(filterGUI)
+    header.add(filterGUI)
+
     sidebar.add(tabs)
     tabs.add("Aktuelles", overview)
     tabs.add("Knoten", nodelist)
@@ -114,13 +115,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
 
     router.view("m")
 
-    self.setData = function (data) {
-      latestData = data
-
-      dataTargets.forEach(function (d) {
-        d.setData(data)
-      })
-    }
+    self.setData = fanoutUnfiltered.setData
 
     return self
   }

lib/proportions.js

@@ -1,7 +1,7 @@
-define(["chroma-js", "virtual-dom", "numeral-intl", "vercomp" ],
-  function (Chroma, V, numeral, vercomp) {
+define(["chroma-js", "virtual-dom", "numeral-intl", "filters/genericnode", "vercomp" ],
+  function (Chroma, V, numeral, Filter, vercomp) {
 
-  return function (config) {
+  return function (config, filterManager) {
     var self = this
     var scale = Chroma.scale("YlGnBu").mode("lab")
 
@@ -68,10 +68,18 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "vercomp" ],
         dict[v] = 1 + (v in dict ? dict[v] : 0)
       })
 
-      return Object.keys(dict).map(function (d) { return [d, dict[d]] })
+      return Object.keys(dict).map(function (d) { return [d, dict[d], key, f] })
     }
 
-    function fillTable(table, data) {
+    function addFilter(filter) {
+      return function () {
+        filterManager.addFilter(filter)
+
+        return false
+      }
+    }
+
+    function fillTable(name, table, data) {
       if (!table.last)
         table.last = V.h("table")
 
@@ -86,7 +94,11 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "vercomp" ],
         var c1 = Chroma.contrast(scale(v), "white")
         var c2 = Chroma.contrast(scale(v), "black")
 
-        var th = V.h("th", d[0])
+        var filter = new Filter(name, d[2], d[0], d[3])
+
+        var a = V.h("a", { href: "#", onclick: addFilter(filter) }, d[0])
+
+        var th = V.h("th", a)
         var td = V.h("td", V.h("span", {style: {
                                          width: Math.round(v * 100) + "%",
                                          backgroundColor: scale(v).hex(),
@@ -127,11 +139,11 @@ define(["chroma-js", "virtual-dom", "numeral-intl", "vercomp" ],
           return "(deaktiviert)"
       })
 
-      fillTable(statusTable, statusDict.sort(function (a, b) { return b[1] - a[1] }))
-      fillTable(fwTable, fwDict.sort(function (a, b) { return vercomp(b[0], a[0]) }))
-      fillTable(hwTable, hwDict.sort(function (a, b) { return b[1] - a[1] }))
-      fillTable(geoTable, geoDict.sort(function (a, b) { return b[1] - a[1] }))
-      fillTable(autoTable, autoDict.sort(function (a, b) { return b[1] - a[1] }))
+      fillTable("Status", statusTable, statusDict.sort(function (a, b) { return b[1] - a[1] }))
+      fillTable("Firmware", fwTable, fwDict.sort(function (a, b) { return vercomp(b[0], a[0]) }))
+      fillTable("Hardware", hwTable, hwDict.sort(function (a, b) { return b[1] - a[1] }))
+      fillTable("Koordinaten", geoTable, geoDict.sort(function (a, b) { return b[1] - a[1] }))
+      fillTable("Autom. Updates", autoTable, autoDict.sort(function (a, b) { return b[1] - a[1] }))
     }
 
     self.render = function (el) {

scss/_filters.scss

@@ -0,0 +1,53 @@
+.filters {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: Roboto;
+  font-size: 0.83em;
+  font-weight: bold;
+  padding: 0 6pt 6pt !important;
+
+  li  {
+    border-radius: 20pt;
+    display: flex;
+    padding: 0pt 0 0pt 8pt;
+    margin: 3pt;
+    align-items: center;
+    background: #009ee0;
+    color: rgba(255, 255, 255, 0.8);
+
+    label {
+      cursor: pointer;
+
+      strong {
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+
+    &.not {
+      background: #dc0067;
+    }
+
+    button {
+      box-shadow: none;
+      margin: 2pt;
+      padding: 0;
+      width: 18pt;
+      height: 18pt;
+      background: rgba(255, 255, 255, 0.0);
+      font-size: 12pt;
+      vertical-align: middle;
+      color: rgba(255, 255, 255, 0.8);
+
+      &:hover {
+        box-shadow: none !important;
+        color: #dc0067;
+        background: rgba(255, 255, 255, 0.9);
+      }
+
+      &:active {
+        box-shadow: none;
+      }
+    }
+  }
+}

scss/main.scss

@@ -3,6 +3,7 @@
 @import '_base';
 @import '_leaflet';
 @import '_leaflet.label';
+@import '_filters';
 
 $minscreenwidth: 630pt;
 $sidebarwidth: 420pt;