add forcegraph to gui

lib/gui.js

@@ -1,21 +1,60 @@
 define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
          "linklist", "nodelist", "simplenodelist", "infobox/main",
-         "proportions" ],
+         "proportions", "forcegraph" ],
 function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
-          Nodelist, SimpleNodelist, Infobox, Proportions) {
+          Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph) {
   return function (config, router) {
     var self = this
     var dataTargets = []
+    var latestData
+    var content
 
     var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
     var sidebar = new Sidebar(document.body)
+
+    function removeContent() {
+      if (!content)
+        return
+
+      router.removeTarget(content)
+      content.destroy()
+      document.body.removeChild(content.div)
+      content = null
+    }
+
+    function addContent(K) {
+      removeContent()
+
+      content = new K(linkScale, sidebar, router)
+      document.body.insertBefore(content.div, document.body.firstChild)
+
+      if (latestData)
+        content.setData(latestData)
+
+      dataTargets.push(content)
+      router.addTarget(content)
+      router.reload()
+    }
+
+    var buttonToggle = document.createElement("button")
+    buttonToggle.classList.add("contenttoggle")
+    buttonToggle.classList.add("next-graph")
+    buttonToggle.onclick = function () {
+      if (content.constructor === Map) {
+        buttonToggle.classList.remove("next-graph")
+        buttonToggle.classList.add("next-map")
+        addContent(ForceGraph)
+      } else {
+        buttonToggle.classList.remove("next-map")
+        buttonToggle.classList.add("next-graph")
+        addContent(Map)
+      }
+    }
+    document.body.appendChild(buttonToggle)
+
     var infobox = new Infobox(config, sidebar, router)
     var tabs = new Tabs()
     var overview = new Container()
-
-    var map = new Map(linkScale, sidebar, router)
-    document.body.insertBefore(map.div, document.body.firstChild)
-
     var meshstats = new Meshstats()
     var newnodeslist = new SimpleNodelist(config, "new", "firstseen", router, "Neue Knoten")
     var lostnodeslist = new SimpleNodelist(config, "lost", "lastseen", router, "Verschwundene Knoten")
@@ -23,7 +62,6 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var linklist = new Linklist(linkScale, router)
     var statistics = new Proportions()
 
-    dataTargets.push(map)
     dataTargets.push(meshstats)
     dataTargets.push(newnodeslist)
     dataTargets.push(lostnodeslist)
@@ -42,9 +80,12 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     tabs.add("Statistiken", statistics)
 
     router.addTarget(infobox)
-    router.addTarget(map)
+
+    addContent(Map)
 
     self.setData = function (data) {
+      latestData = data
+
       dataTargets.forEach(function (d) {
         d.setData(data)
       })

lib/map.js

@@ -65,8 +65,6 @@ define(["leaflet", "moment", "leaflet.label"], function (L, moment) {
 
     var map = L.map(el, options)
 
-    L.control.zoom({ position: "topright" }).addTo(map)
-
     L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {
       subdomains: "1234",
       type: "osm",

scss/main.scss

@@ -9,6 +9,20 @@ $minscreenwidth: 60em;
   paint-order: stroke;
 }
 
+.contenttoggle {
+  position: absolute;
+  top: 0.7em;
+  right: 0.7em;
+}
+
+.contenttoggle.next-graph:after {
+  content: '\f341';
+}
+
+.contenttoggle.next-map:after {
+  content: '\f203';
+}
+
 .tabs {
   list-style: none;
   display: flex;