From f77aabd37dee6ccf03d1d5fe110c7b9a9a373bc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milan=20P=C3=A4ssler?= Date: Thu, 18 Feb 2016 19:26:05 +0000 Subject: [PATCH] redo link type handling --- .gitignore | 2 +- lib/forcegraph.js | 20 ++++++++++---------- lib/infobox/link.js | 2 +- lib/infobox/node.js | 24 ++++++++++++++++-------- lib/linklist.js | 14 +++++++++----- lib/main.js | 10 +++++++++- lib/map.js | 2 +- scss/main.scss | 26 ++++++++++++++++++++------ 8 files changed, 67 insertions(+), 33 deletions(-) diff --git a/.gitignore b/.gitignore index 71c8c6f..1f46137 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ bower_components/ node_modules/ build/ .sass-cache/ -config.js +config.json diff --git a/lib/forcegraph.js b/lib/forcegraph.js index d5a2baf..cc8d222 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -213,7 +213,7 @@ define(["d3"], function (d3) { function drawLabel(d) { var neighbours = d.neighbours.filter(function (d) { - return !d.link.o.vpn + return !d.link.o.type === "VPN" }) var sum = neighbours.reduce(function (a, b) { @@ -244,8 +244,7 @@ define(["d3"], function (d3) { return (d.source.x > screenRect.left && d.source.x < screenRect.right && d.source.y > screenRect.top && d.source.y < screenRect.bottom) || (d.target.x > screenRect.left && d.target.x < screenRect.right && - d.target.y > screenRect.top && d.target.y < screenRect.bottom) || - d.o.vpn + d.target.y > screenRect.top && d.target.y < screenRect.bottom) } function visibleNodes(d) { @@ -316,6 +315,7 @@ define(["d3"], function (d3) { var uplinkColor = "#5BAAEB" var highlightColor = "rgba(252, 227, 198, 0.15)" var nodeRadius = 6 + var cableColor = "#50B0F0" // -- draw links -- ctx.save() @@ -329,9 +329,9 @@ define(["d3"], function (d3) { ctx.beginPath() ctx.moveTo(d.source.x + dx * nodeRadius, d.source.y + dy * nodeRadius) ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius) - ctx.strokeStyle = d.color - ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8 - ctx.lineWidth = d.o.vpn ? 1.5 : 2.5 + ctx.strokeStyle = d.o.type === "Kabel" ? cableColor : d.color + ctx.globalAlpha = d.o.type === "VPN" ? 0.1 : 0.8 + ctx.lineWidth = d.o.type === "VPN" ? 1.5 : 2.5 ctx.stroke() }) @@ -516,7 +516,7 @@ define(["d3"], function (d3) { } var links = intLinks.filter(function (d) { - return !d.o.vpn + return !d.o.type === "VPN" }).filter(function (d) { return distanceLink(e, d.source, d.target) < LINE_RADIUS }) @@ -577,13 +577,13 @@ define(["d3"], function (d3) { .charge(-250) .gravity(0.1) .linkDistance(function (d) { - if (d.o.vpn) + if (d.o.type === "VPN") return 0 else return LINK_DISTANCE }) .linkStrength(function (d) { - if (d.o.vpn) + if (d.o.type === "VPN") return 0 else return Math.max(0.5, 1 / d.o.tq) @@ -637,7 +637,7 @@ define(["d3"], function (d3) { e.source = newNodesDict[d.source.id] e.target = newNodesDict[d.target.id] - if (d.vpn) + if (d.type === "VPN") e.color = "rgba(255, 255, 255, " + (0.6 / d.tq) + ")" else e.color = linkScale(d.tq).hex() diff --git a/lib/infobox/link.js b/lib/infobox/link.js index 15bff1f..acbb432 100644 --- a/lib/infobox/link.js +++ b/lib/infobox/link.js @@ -19,7 +19,7 @@ define(function () { attributeEntry(attributes, "TQ", showTq(d)) attributeEntry(attributes, "Entfernung", showDistance(d)) - attributeEntry(attributes, "VPN", d.vpn ? "ja" : null) + attributeEntry(attributes, "Typ", d.type) var hw1 = dictGet(d.source.node.nodeinfo, ["hardware", "model"]) var hw2 = dictGet(d.target.node.nodeinfo, ["hardware", "model"]) attributeEntry(attributes, "Hardware", (hw1 != null ? hw1 : "unbekannt") + " – " + (hw2 != null ? hw2 : "unbekannt")) diff --git a/lib/infobox/node.js b/lib/infobox/node.js index 9f88f4e..98e7dff 100644 --- a/lib/infobox/node.js +++ b/lib/infobox/node.js @@ -246,9 +246,13 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"], tr.appendChild(th3) var th4 = document.createElement("th") - th4.textContent = "Entfernung" + th4.textContent = "Typ" tr.appendChild(th4) + var th5 = document.createElement("th") + th5.textContent = "Entfernung" + tr.appendChild(th5) + thead.appendChild(tr) table.appendChild(thead) @@ -269,11 +273,6 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"], a1.onclick = router.node(d.node) td2.appendChild(a1) - if (d.link.vpn) - td1.appendChild(document.createTextNode(" (VPN)")) - if (d.link.cable) - td1.appendChild(document.createTextNode(" (Kabel)")) - if (has_location(d.node)) { var span = document.createElement("span") span.classList.add("icon") @@ -294,16 +293,25 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"], var td4 = document.createElement("td") var a3 = document.createElement("a") a3.href = "#" - a3.textContent = showDistance(d.link) + a3.textContent = d.link.type a3.onclick = router.link(d.link) td4.appendChild(a3) - td4.setAttribute("data-sort", d.link.distance !== undefined ? -d.link.distance : 1) tr.appendChild(td4) + var td5 = document.createElement("td") + var a4 = document.createElement("a") + a4.href = "#" + a4.textContent = showDistance(d.link) + a4.onclick = router.link(d.link) + td5.appendChild(a4) + td5.setAttribute("data-sort", d.link.distance !== undefined ? -d.link.distance : 1) + tr.appendChild(td5) + tbody.appendChild(tr) }) table.appendChild(tbody) + table.className = "node-links" new Tablesort(table) diff --git a/lib/linklist.js b/lib/linklist.js index 1484721..e195dde 100644 --- a/lib/linklist.js +++ b/lib/linklist.js @@ -13,6 +13,12 @@ define(["sorttable", "virtual-dom"], function (SortTable, V) { sort: function (a, b) { return a.tq - b.tq}, reverse: true }, + { name: "Typ", + sort: function (a, b) { + return a.type.localeCompare(b.type) + }, + reverse: false + }, { name: "Entfernung", sort: function (a, b) { return (a.distance === undefined ? -1 : a.distance) - @@ -27,14 +33,12 @@ define(["sorttable", "virtual-dom"], function (SortTable, V) { function renderRow(d) { var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, linkName(d))] - if (d.vpn) - td1Content.push(" (VPN)") - var td1 = V.h("td", td1Content) var td2 = V.h("td", {style: {color: linkScale(d.tq).hex()}}, showTq(d)) - var td3 = V.h("td", showDistance(d)) + var td3 = V.h("td", d.type) + var td4 = V.h("td", showDistance(d)) - return V.h("tr", [td1, td2, td3]) + return V.h("tr", [td1, td2, td3, td4]) } this.render = function (d) { diff --git a/lib/main.js b/lib/main.js index acfbd58..3292449 100644 --- a/lib/main.js +++ b/lib/main.js @@ -102,10 +102,18 @@ function (moment, Router, L, GUI, numeral) { links.forEach( function (d) { d.source.node.neighbours.push({ node: d.target.node, link: d, incoming: false }) d.target.node.neighbours.push({ node: d.source.node, link: d, incoming: true }) - if (!d.vpn) { + if (!d.type === "tunnel") { d.source.node.meshlinks = d.source.node.meshlinks ? d.source.node.meshlinks + 1 : 1 d.target.node.meshlinks = d.target.node.meshlinks ? d.target.node.meshlinks + 1 : 1 } + if (d.type === "tunnel") + d.type = "VPN" + else if (d.type === "wireless") + d.type = "Wifi" + else if (d.type === "other") + d.type = "Kabel" + else + d.type = "NaN" }) links.sort( function (a, b) { diff --git a/lib/map.js b/lib/map.js index ea40998..0218db4 100644 --- a/lib/map.js +++ b/lib/map.js @@ -129,7 +129,7 @@ define(["map/clientlayer", "map/labelslayer", function addLinksToMap(dict, linkScale, graph, router) { graph = graph.filter( function (d) { - return "distance" in d && !d.vpn + return "distance" in d && !d.type === "VPN" }) var lines = graph.map( function (d) { diff --git a/scss/main.scss b/scss/main.scss index 8031907..17e3bc1 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -237,16 +237,24 @@ table { font-weight: bold; } -.sidebar table th:nth-child(2), -.sidebar table td:nth-child(2) { +.sidebar table:not(.node-links) th:first-child, +.sidebar table:not(.node-links) td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - width: 60%; + width: 50%; } -.sidebar table th:first-child, -.sidebar table td:first-child { +.sidebar table.node-links th:nth-child(2), +.sidebar table.node-links td:nth-child(2) { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 45%; +} + +.sidebar table.node-links th:first-child, +.sidebar table.node-links td:first-child { width: 1.5em; } @@ -304,7 +312,13 @@ table { text-align: left; } -.sidebar td:not(:nth-child(-n+2)), .sidebar th:not(:nth-child(-n+2)) { +.sidebar table:not(.node-links) td:not(:first-child), +.sidebar table:not(.node-links) th:not(:first-child) { + text-align: right; +} + +.sidebar table.node-links td:not(:nth-child(-n+2)), +.sidebar table.node-links th:not(:nth-child(-n+2)) { text-align: right; }