forked from MrKalzu/traceroute_map
TEMP: Working data pipeline & rendering
This commit is contained in:
ryyst committed
1 parent
f1c3cf8758
commit
964e9b3806
8 files changed
+460
-207
No files matched your search
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
// https://d3js.org v7.9.0 Copyright 2010-2023 Mike Bostock
|
||||
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";function n(t,n){return null==t||null==n?NaN:t<n?-1:t>n?1:t>=n?0:NaN}function e(t,n){return null==t||null==n?NaN:n<t?-1:n>t?1:n>=t?0:NaN}function r(t){let r,o,a;function u(t,n,e=0,i=t.length){if(e<i){if(0!==r(n,n))return i;do{const r=e+i>>>1;o(t[r],n)<0?e=r+1:i=r}while(e<i)}return e}return 2!==t.length?(r=n,o=(e,r)=>n(t(e),r),a=(n,e)=>t(n)-e):(r=t===n||t===e?t:i,o=t,a=t),{left:u,center:function(t,n,e=0,r=t.length){const i=u(t,n,e,r-1);return i>e&&a(t[i-1],n)>-a(t[i],n)?i-1:i},right:function(t,n,e=0,i=t.length){if(e<i){if(0!==r(n,n))return i;do{const r=e+i>>>1;o(t[r],n)<=0?e=r+1:i=r}while(e<i)}return e}}}function i(){return 0}function o(t){return null===t?NaN:+t}const a=r(n),u=a.right,c=a.left,f=r(o).center;var s=u;const l=d(y),h=d((function(t){const n=y(t);return(t,e,r,i,o)=>{n(t,e,(r<<=2)+0,(i<<=2)+0,o<<=2),n(t,e,r+1,i+1,o),n(t,e,r+2,i+2,o),n(t,e,r+3,i+3,o)}}));function d(t){return function(n,e,r=e){if(!((e=+e)>=0))throw new RangeError("invalid rx");if(!((r=+r)>=0))throw new RangeError("invalid ry");let{data:i,width:o,height:a}=n;if(!((o=Math.floor(o))>=0))throw new RangeError("invalid width");if(!((a=Math.floor(void 0!==a?a:i.length/o))>=0))throw new RangeError("invalid height");if(!o||!a||!e&&!r)return n;const u=e&&t(e),c=r&&t(r),f=i.slice();return u&&c?(p(u,f,i,o,a),p(u,i,f,o,a),p(u,f,i,o,a),g(c,i,f,o,a),g(c,f,i,o,a),g(c,i,f,o,a)):u?(p(u,i,f,o,a),p(u,f,i,o,a),p(u,i,f,o,a)):c&&(g(c,i,f,o,a),g(c,f,i,o,a),g(c,i,f,o,a)),n}}function p(t,n,e,r,i){for(let o=0,a=r*i;o<a;)t(n,e,o,o+=r,1)}function g(t,n,e,r,i){for(let o=0,a=r*i;o<r;++o)t(n,e,o,o+a,r)}function y(t){const n=Math.floor(t);if(n===t)return function(t){const n=2*t+1;return(e,r,i,o,a)=>{if(!((o-=a)>=i))return;let u=t*r[i];const c=a*t;for(let t=i,n=i+c;t<n;t+=a)u+=r[Math.min(o,t)];for(let t=i,f=o;t<=f;t+=a)u+=r[Math.min(o,t+c)],e[t]=u/n,u-=r[Math.max(i,t-c)]}}(t);const e=t-n,r=2*t+1;return(t,i,o,a,u)=>{if(!((a-=u)>=o))return;let c=n*i[o];const f=u*n,s=f+u;for(let t=o,n=o+f;t<n;t+=u)c+=i[Math.min(a,t)];for(let n=o,l=a;n<=l;n+=u)c+=i[Math.min(a,n+f)],t[n]=(c+e*(i[Math.max(o,n-s)]+i[Math.min(a,n+s)]))/r,c-=i[Math.max(o,n-f)]}}function v(t,n){let e=0;if(void 0===n)for(let n of t)null!=n&&(n=+n)>=n&&++e;else{let r=-1;for(let i of t)null!=(i=n(i,++r,t))&&(i=+i)>=i&&++e}return e}function _(t){return 0|t.length}function b(t){return!(t>0)}function m(t){return"object"!=typeof t||"length"in t?t:Array.from(t)}function x(t,n){let e,r=0,i=0,o=0;if(void 0===n)for(let n of t)null!=n&&(n=+n)>=n&&(e=n-i,i+=e/++r,o+=e*(n-i));else{let a=-1;for(let u of t)null!=(u=n(u,++a,t))&&(u=+u)>=u&&(e=u-i,i+=e/++r,o+=e*(u-i))}if(r>1)return o/(r-1)}function w(t,n){const e=x(t,n);return e?Math.sqrt(e):e}function M(t,n){let e,r;if(void 0===n)for(const n of t)null!=n&&(void 0===e?n>=n&&(e=r=n):(e>n&&(e=n),r<n&&(r=n)));else{let i=-1;for(let o of t)null!=(o=n(o,++i,t))&&(void 0===e?o>=o&&(e=r=o):(e>o&&(e=o),r<o&&(r=o)))}return[e,r]}class T{constructor(){this._partials=new Float64Array(32),this._n=0}add(t){const n=this._partials;let e=0;for(let r=0;r<this._n&&r<32;r++){const i=n[r],o=t+i,a=Math.abs(t)<Math.abs(i)?t-(o-i):i-(o-t);a&&(n[e++]=a),t=o}return n[e]=t,this._n=e+1,this}valueOf(){const t=this._partials;let n,e,r,i=this._n,o=0;if(i>0){for(o=t[--i];i>0&&(n=o,e=t[--i],o=n+e,r=e-(o-n),!r););i>0&&(r<0&&t[i-1]<0||r>0&&t[i-1]>0)&&(e=2*r,n=o+e,e==n-o&&(o=n))}return o}}class InternMap extends Map{constructor(t,n=N){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:n}}),null!=t)for(const[n,e]of t)this.set(n,e)}get(t){return super.get(A(this,t))}has(t){return super.has(A(this,t))}set(t,n){return super.set(S(this,t),n)}delete(t){return super.delete(E(this,t))}}class InternSet extends Set{constructor(t,n=N){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:n}}),null!=t)for(const n of t)this.add(n)}has(t){return super.has(A(this,t))}add(t){return super.add(S(this,t))}delete(t){return super.delete(E(this,t))}}function A({_intern:t,_key:n},e){const r=n(e);return t.has(r)?t.get(r):e}function S({_intern:t,_key:n},e){const r=n(e);return t.has(r)?t.get(r):(t.set(r,e),e)}function E({_intern:t,_key:n},e){const r=n(e);return t.has(r)&&(e=t.get(r),t.delete(r)),e}function N(t){return null!==t&&"object"==typeof t?t.valueOf():t}function k(t){return t}function C(t,...n){return F(t,k,k,n)}function P(t,...n){return F(t,Array.from,k,n)}function z(t,n){for(let e=1,r=n.length;e<r;++e)t=t.flatMap((t=>t.pop().map((([n,e])=>[...t,n,e]))));return t}function $(t,n,...e){return F(t,k,n,e)}function D(t,n,...e){return F(t,Array.from,n,e)}function R(t){if(1!==t.length)throw new Error("duplicate key");return t[0]}function F(t,n,e,r){return function t(i,o){if(o>=r.length)return e(i);const a=new InternMap,u=r[o++];let c=-1;for(const t of i){Line truncated
|
||||
+4
-46
@@ -4,53 +4,11 @@
|
||||
<title>Kalzu</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js" integrity="sha512-iiPEYww3QXZU5C795JnnINBRNgHqDnRHs9mA7aJoqx4pNE4u3CknCDGmePHFoHtKR/6C9aIcRFa+HJ6obtlteQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js" integrity="sha512-tjMBhL9fLMcqoccPOwpRiIQIOAyUh18lWUlUvE10zvG1UNMfxUC4qSERmUq+VF30iavIyqs/q6fSP2o475FAUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="/static/d3.v7.min.js"></script>
|
||||
</head>
|
||||
<body style="background: lightgrey">
|
||||
<div id="container" style="width: 97%; height: 95vh; background: white; margin: auto; margin-top: 32px"></div>
|
||||
<script>
|
||||
|
||||
const hops = [
|
||||
["_gateway", "(192.168.0.1) 0.549 ms"],
|
||||
["83-148-246-178.static.lounea.fi", "(83.148.246.178) 1.200 ms"],
|
||||
["*"],
|
||||
["*"],
|
||||
["*"],
|
||||
["86-60-254-198.static.lounea.fi", "(86.60.254.198) 3.719 ms"],
|
||||
["72.14.194.142", " (72.14.194.142) 3.716 ms"],
|
||||
["142.251.53.71", " (142.251.53.71) 3.704 ms"],
|
||||
["142.250.229.87", " (142.250.229.87) 4.603 ms"],
|
||||
["mad06s09-in-f142.1e100.net", " (216.58.210.142) 3.700 ms"],
|
||||
];
|
||||
|
||||
console.log("Hops!", hops)
|
||||
|
||||
|
||||
// Create a graphology graph
|
||||
const graph = new graphology.Graph();
|
||||
|
||||
hops.forEach((hop, i) => {
|
||||
const [ label, extra ] = hop;
|
||||
|
||||
const size = i === 0 ? 15 : 10;
|
||||
const color = "green"
|
||||
|
||||
graph.addNode(i, { label, x: 0, y: i, size, color });
|
||||
if (i > 0) {
|
||||
|
||||
graph.addEdge(i, i-1, { size: 2, color: "purple" });
|
||||
}
|
||||
});
|
||||
|
||||
// graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
|
||||
// graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
|
||||
// graph.addEdge("1", "2", { size: 5, color: "purple" });
|
||||
|
||||
// Instantiate sigma.js and render the graph
|
||||
const sigmaInstance = new Sigma(graph, document.getElementById("container"));
|
||||
</script>
|
||||
<body style="background: #EEE">
|
||||
<div id="container"></div>
|
||||
<script src="/static/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -0,0 +1,308 @@
|
||||
const linkArc = (d) => {
|
||||
const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
|
||||
return `
|
||||
M${d.source.x},${d.source.y}
|
||||
A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
|
||||
`;
|
||||
};
|
||||
|
||||
const drag = (simulation) => {
|
||||
function dragstarted(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
}
|
||||
|
||||
function dragged(event, d) {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
}
|
||||
|
||||
function dragended(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
}
|
||||
|
||||
return d3
|
||||
.drag()
|
||||
.on("start", dragstarted)
|
||||
.on("drag", dragged)
|
||||
.on("end", dragended);
|
||||
};
|
||||
|
||||
const drawChart = (data) => {
|
||||
// Specify the dimensions of the chart.
|
||||
const width = 1600;
|
||||
const height = 1200;
|
||||
|
||||
// Specify the color scale.
|
||||
const color = d3.scaleOrdinal(d3.schemeCategory10);
|
||||
|
||||
// The force simulation mutates links and nodes, so create a copy
|
||||
// so that re-evaluating this cell produces the same result.
|
||||
const links = data.links.map((d) => ({ ...d }));
|
||||
const nodes = data.nodes.map((d) => ({ ...d }));
|
||||
|
||||
// Create a simulation with several forces.
|
||||
const simulation = d3
|
||||
.forceSimulation(nodes)
|
||||
.force(
|
||||
"link",
|
||||
d3.forceLink(links).id((d) => d.id),
|
||||
)
|
||||
.force("charge", d3.forceManyBody())
|
||||
.force("x", d3.forceX())
|
||||
.force("y", d3.forceY());
|
||||
|
||||
// Create the SVG container.
|
||||
const svg = d3
|
||||
.create("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
||||
.attr("style", "max-width: 100%; height: auto;");
|
||||
|
||||
// Add a line for each link, and a circle for each node.
|
||||
const link = svg
|
||||
.append("g")
|
||||
.attr("stroke", "#999")
|
||||
.attr("stroke-opacity", 0.6)
|
||||
.selectAll("line")
|
||||
.data(links)
|
||||
.join("line")
|
||||
.attr("stroke-width", 1); // (d) => Math.sqrt(d.value));
|
||||
|
||||
const node = svg
|
||||
.append("g")
|
||||
.attr("stroke", "#fff")
|
||||
.attr("stroke-width", 1.5)
|
||||
.selectAll("circle")
|
||||
.data(nodes)
|
||||
.join("circle")
|
||||
.attr("r", 5)
|
||||
.attr("fill", (d) => color(d.group));
|
||||
|
||||
node.append("title").text((d) => d.id);
|
||||
|
||||
// Add a drag behavior.
|
||||
node.call(
|
||||
d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended),
|
||||
);
|
||||
|
||||
// Set the position attributes of links and nodes each time the simulation ticks.
|
||||
simulation.on("tick", () => {
|
||||
link
|
||||
.attr("x1", (d) => d.source.x)
|
||||
.attr("y1", (d) => d.source.y)
|
||||
.attr("x2", (d) => d.target.x)
|
||||
.attr("y2", (d) => d.target.y);
|
||||
|
||||
node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
|
||||
});
|
||||
|
||||
// Reheat the simulation when drag starts, and fix the subject position.
|
||||
function dragstarted(event) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
event.subject.fx = event.subject.x;
|
||||
event.subject.fy = event.subject.y;
|
||||
}
|
||||
|
||||
// Update the subject (dragged node) position during drag.
|
||||
function dragged(event) {
|
||||
event.subject.fx = event.x;
|
||||
event.subject.fy = event.y;
|
||||
}
|
||||
|
||||
// Restore the target alpha so the simulation cools after dragging ends.
|
||||
// Unfix the subject position now that it’s no longer being dragged.
|
||||
function dragended(event) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
event.subject.fx = null;
|
||||
event.subject.fy = null;
|
||||
}
|
||||
|
||||
// When this cell is re-run, stop the previous simulation. (This doesn’t
|
||||
// really matter since the target alpha is zero and the simulation will
|
||||
// stop naturally, but it’s a good practice.)
|
||||
// invalidation.then(() => simulation.stop());
|
||||
|
||||
return svg.node();
|
||||
};
|
||||
|
||||
const drawChart2 = (data) => {
|
||||
const width = 1600;
|
||||
const height = 1200;
|
||||
const types = Array.from(new Set(data.map((d) => d.type)));
|
||||
const nodes = Array.from(
|
||||
new Set(data.flatMap((l) => [l.source, l.target])),
|
||||
(id) => ({ id }),
|
||||
);
|
||||
const links = data.map((d) => Object.create(d));
|
||||
|
||||
const color = d3.scaleOrdinal(types, d3.schemeCategory10);
|
||||
|
||||
const simulation = d3
|
||||
.forceSimulation(nodes)
|
||||
.force(
|
||||
"link",
|
||||
d3.forceLink(links).id((d) => d.id),
|
||||
)
|
||||
.force("charge", d3.forceManyBody().strength(-400))
|
||||
.force("x", d3.forceX())
|
||||
.force("y", d3.forceY());
|
||||
|
||||
const svg = d3
|
||||
.create("svg")
|
||||
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;");
|
||||
|
||||
// Per-type markers, as they don't inherit styles.
|
||||
svg
|
||||
.append("defs")
|
||||
.selectAll("marker")
|
||||
.data(types)
|
||||
.join("marker")
|
||||
.attr("id", (d) => `arrow-${d}`)
|
||||
.attr("viewBox", "0 -5 10 10")
|
||||
.attr("refX", 15)
|
||||
.attr("refY", -0.5)
|
||||
.attr("markerWidth", 6)
|
||||
.attr("markerHeight", 6)
|
||||
.attr("orient", "auto")
|
||||
.append("path")
|
||||
.attr("fill", color)
|
||||
.attr("d", "M0,-5L10,0L0,5");
|
||||
|
||||
const link = svg
|
||||
.append("g")
|
||||
.attr("fill", "none")
|
||||
.attr("stroke-width", 1.5)
|
||||
.selectAll("path")
|
||||
.data(links)
|
||||
.join("path")
|
||||
.attr("stroke", (d) => color(d.type))
|
||||
.attr("marker-end", (d) => `url(${new URL(`#arrow-${d.type}`, location)})`);
|
||||
|
||||
const node = svg
|
||||
.append("g")
|
||||
.attr("fill", "currentColor")
|
||||
.attr("stroke-linecap", "round")
|
||||
.attr("stroke-linejoin", "round")
|
||||
.selectAll("g")
|
||||
.data(nodes)
|
||||
.join("g")
|
||||
.call(drag(simulation));
|
||||
|
||||
node
|
||||
.append("circle")
|
||||
.attr("stroke", "white")
|
||||
.attr("stroke-width", 1.5)
|
||||
.attr("r", 4);
|
||||
|
||||
node
|
||||
.append("text")
|
||||
.attr("x", 8)
|
||||
.attr("y", "0.31em")
|
||||
.text((d) => (d.id.endsWith("*") ? "*" : d.id))
|
||||
.clone(true)
|
||||
.lower()
|
||||
.attr("fill", "none")
|
||||
.attr("stroke", "white")
|
||||
.attr("stroke-width", 3);
|
||||
|
||||
simulation.on("tick", () => {
|
||||
link.attr("d", linkArc);
|
||||
node.attr("transform", (d) => `translate(${d.x},${d.y})`);
|
||||
});
|
||||
|
||||
// invalidation.then(() => simulation.stop());
|
||||
|
||||
return Object.assign(svg.node(), { scales: { color } });
|
||||
};
|
||||
|
||||
const parseNodesAndLinks = (traces) => {
|
||||
const result = {
|
||||
nodes: [],
|
||||
links: [],
|
||||
};
|
||||
|
||||
traces.forEach((trace) => {
|
||||
let prevId = null;
|
||||
|
||||
const getId = (hop) => {
|
||||
if (prevId === null) {
|
||||
return trace.origin;
|
||||
}
|
||||
if (hop.name === "*") {
|
||||
return `${trace.id}-${hop.number}-*`;
|
||||
}
|
||||
|
||||
return hop.ip;
|
||||
};
|
||||
|
||||
trace.hops.forEach((hop) => {
|
||||
const id = getId(hop);
|
||||
|
||||
// New node
|
||||
result.nodes.push({
|
||||
id: id,
|
||||
group: trace.origin,
|
||||
radius: 8,
|
||||
value: hop.name || "name?",
|
||||
origin: trace.origin,
|
||||
});
|
||||
|
||||
if (prevId) {
|
||||
// New link
|
||||
result.links.push({
|
||||
source: prevId,
|
||||
target: id,
|
||||
type: trace.origin,
|
||||
group: trace.origin,
|
||||
});
|
||||
}
|
||||
|
||||
prevId = id;
|
||||
});
|
||||
|
||||
// Last "destination" node
|
||||
result.nodes.push({
|
||||
id: trace.id,
|
||||
group: trace.origin,
|
||||
radius: 8,
|
||||
value: trace.target,
|
||||
});
|
||||
|
||||
if (prevId) {
|
||||
// New link
|
||||
result.links.push({
|
||||
source: prevId,
|
||||
target: trace.target,
|
||||
type: trace.origin,
|
||||
group: trace.origin,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// { id: ip, group: origin, radius: 2 }
|
||||
// { source: prev.ip, target: ip, value: latency }
|
||||
return result;
|
||||
};
|
||||
|
||||
async function main() {
|
||||
const response = await fetch("/trace/");
|
||||
const traces = await response.json();
|
||||
|
||||
console.log("Traces:", traces);
|
||||
const data = parseNodesAndLinks(traces);
|
||||
|
||||
console.log("Data:", data);
|
||||
const chart = drawChart2(data.links);
|
||||
|
||||
container.append(chart);
|
||||
}
|
||||
|
||||
main();
|
||||
Reference in new issue
Block a user