ryyst/traceroute_map
2
0
Fork 0
forked from MrKalzu/traceroute_map
Code Pull Requests Activity

Compare commits

base: ryyst:f82a95ab8d8581b1956c3fad01384cc106f558aa
Branches Tags
ryyst:master
ryyst:http-rewrite
MrKalzu:ryyst_http_rewrite
MrKalzu:master
MrKalzu:kalzu_testing
..
compare: ryyst:964e9b38064a99090074998ae4a789ce91070781
Branches Tags
ryyst:http-rewrite
ryyst:master
MrKalzu:ryyst_http_rewrite
MrKalzu:master
MrKalzu:kalzu_testing

No commits in common. "f82a95ab8d8581b1956c3fad01384cc106f558aa" and "964e9b38064a99090074998ae4a789ce91070781" have entirely different histories.
f82a95ab8d ... 964e9b3806

2 changed files with 158 additions and 213 deletions
Show Stats Expand all files Collapse all files

10
app/static/index.html
View File

@ -4,17 +4,11 @@
<title>Kalzu</title> <title>Kalzu</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <script src="/static/d3.v7.min.js"></script>
<style>
#container {
height: 95vh;
}
</style>
</head> </head>
<body style="background: #eee"> <body style="background: #EEE">
<div id="container"></div> <div id="container"></div>
<script src="/static/index.js"></script> <script src="/static/index.js"></script>
</body> </body>
</html> </html>
</html>

361
app/static/index.js
View File

@ -1,5 +1,5 @@
const linkArc = (d) => { const linkArc = (d) => {
const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) * 3; const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
return ` return `
M${d.source.x},${d.source.y} M${d.source.x},${d.source.y}
A${r},${r} 0 0,1 ${d.target.x},${d.target.y} A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
@ -31,119 +31,116 @@ const drag = (simulation) => {
.on("end", dragended); .on("end", dragended);
}; };
// const drawChart = (data) => { const drawChart = (data) => {
// // Specify the dimensions of the chart. // Specify the dimensions of the chart.
// const width = 1600; const width = 1600;
// const height = 1200; const height = 1200;
//
// // Specify the color scale. // Specify the color scale.
// const color = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleOrdinal(d3.schemeCategory10);
//
// // The force simulation mutates links and nodes, so create a copy // The force simulation mutates links and nodes, so create a copy
// // so that re-evaluating this cell produces the same result. // so that re-evaluating this cell produces the same result.
// const links = data.links.map((d) => ({ ...d })); const links = data.links.map((d) => ({ ...d }));
// const nodes = data.nodes.map((d) => ({ ...d })); const nodes = data.nodes.map((d) => ({ ...d }));
//
// // Create a simulation with several forces. // Create a simulation with several forces.
// const simulation = d3 const simulation = d3
// .forceSimulation(nodes) .forceSimulation(nodes)
// .force( .force(
// "link", "link",
// d3.forceLink(links).id((d) => d.id), d3.forceLink(links).id((d) => d.id),
// ) )
// .force("charge", d3.forceManyBody()) .force("charge", d3.forceManyBody())
// .force("x", d3.forceX()) .force("x", d3.forceX())
// .force("y", d3.forceY()); .force("y", d3.forceY());
//
// // Create the SVG container. // Create the SVG container.
// const svg = d3 const svg = d3
// .create("svg") .create("svg")
// .attr("width", width) .attr("width", width)
// .attr("height", height) .attr("height", height)
// .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("viewBox", [-width / 2, -height / 2, width, height])
// .attr("style", "max-width: 100%; height: auto;"); .attr("style", "max-width: 100%; height: auto;");
//
// // Add a line for each link, and a circle for each node. // Add a line for each link, and a circle for each node.
// const link = svg const link = svg
// .append("g") .append("g")
// .attr("stroke", "#999") .attr("stroke", "#999")
// .attr("stroke-opacity", 0.6) .attr("stroke-opacity", 0.6)
// .selectAll("line") .selectAll("line")
// .data(links) .data(links)
// .join("line") .join("line")
// .attr("stroke-width", 1); // (d) => Math.sqrt(d.value)); .attr("stroke-width", 1); // (d) => Math.sqrt(d.value));
//
// const node = svg const node = svg
// .append("g") .append("g")
// .attr("stroke", "#fff") .attr("stroke", "#fff")
// .attr("stroke-width", 1.5) .attr("stroke-width", 1.5)
// .selectAll("circle") .selectAll("circle")
// .data(nodes) .data(nodes)
// .join("circle") .join("circle")
// .attr("r", 5) .attr("r", 5)
// .attr("fill", (d) => color(d.group)); .attr("fill", (d) => color(d.group));
//
// node.append("title").text((d) => d.id); node.append("title").text((d) => d.id);
//
// // Add a drag behavior. // Add a drag behavior.
// node.call( node.call(
// d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended), d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended),
// ); );
//
// // Set the position attributes of links and nodes each time the simulation ticks. // Set the position attributes of links and nodes each time the simulation ticks.
// simulation.on("tick", () => { simulation.on("tick", () => {
// link link
// .attr("x1", (d) => d.source.x) .attr("x1", (d) => d.source.x)
// .attr("y1", (d) => d.source.y) .attr("y1", (d) => d.source.y)
// .attr("x2", (d) => d.target.x) .attr("x2", (d) => d.target.x)
// .attr("y2", (d) => d.target.y); .attr("y2", (d) => d.target.y);
//
// node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
// }); });
//
// // Reheat the simulation when drag starts, and fix the subject position. // Reheat the simulation when drag starts, and fix the subject position.
// function dragstarted(event) { function dragstarted(event) {
// if (!event.active) simulation.alphaTarget(0.3).restart(); if (!event.active) simulation.alphaTarget(0.3).restart();
// event.subject.fx = event.subject.x; event.subject.fx = event.subject.x;
// event.subject.fy = event.subject.y; event.subject.fy = event.subject.y;
// } }
//
// // Update the subject (dragged node) position during drag. // Update the subject (dragged node) position during drag.
// function dragged(event) { function dragged(event) {
// event.subject.fx = event.x; event.subject.fx = event.x;
// event.subject.fy = event.y; event.subject.fy = event.y;
// } }
//
// // Restore the target alpha so the simulation cools after dragging ends. // Restore the target alpha so the simulation cools after dragging ends.
// // Unfix the subject position now that it’s no longer being dragged. // Unfix the subject position now that it’s no longer being dragged.
// function dragended(event) { function dragended(event) {
// if (!event.active) simulation.alphaTarget(0); if (!event.active) simulation.alphaTarget(0);
// event.subject.fx = null; event.subject.fx = null;
// event.subject.fy = null; event.subject.fy = null;
// } }
//
// // When this cell is re-run, stop the previous simulation. (This doesn’t // 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 // really matter since the target alpha is zero and the simulation will
// // stop naturally, but it’s a good practice.) // stop naturally, but it’s a good practice.)
// // invalidation.then(() => simulation.stop()); // invalidation.then(() => simulation.stop());
//
// return svg.node(); return svg.node();
// }; };
const drawChart2 = (data) => { const drawChart2 = (data) => {
// Data parsing const width = 1600;
const height = 1200;
const types = Array.from(new Set(data.map((d) => d.type)));
const nodes = Array.from( const nodes = Array.from(
new Set(data.flatMap((l) => [l.source, l.target])), new Set(data.flatMap((l) => [l.source, l.target])),
(id) => ({ id }), (id) => ({ id }),
); );
const links = data.map((d) => Object.create(d)); const links = data.map((d) => Object.create(d));
// Styles const color = d3.scaleOrdinal(types, d3.schemeCategory10);
const width = window.visualViewport.width;
const height = window.visualViewport.height - 10;
const colors = Array.from(new Set(data.map((d) => d.traceId)));
const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
const simulation = d3 const simulation = d3
.forceSimulation(nodes) .forceSimulation(nodes)
@ -155,26 +152,25 @@ const drawChart2 = (data) => {
.force("x", d3.forceX()) .force("x", d3.forceX())
.force("y", d3.forceY()); .force("y", d3.forceY());
// Canvas settings
const svg = d3 const svg = d3
.create("svg") .create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;");
.attr("style", "max-width: 100%; height: auto; font: 14px monospace;");
// Pre-type arrowheads, as they don't inherit styles. // Per-type markers, as they don't inherit styles.
svg svg
.append("defs") .append("defs")
.selectAll("marker") .selectAll("marker")
.data(colors) .data(types)
.join("marker") .join("marker")
.attr("id", (d) => `arrow-${d}`) .attr("id", (d) => `arrow-${d}`)
.attr("viewBox", "0 -5 10 10") .attr("viewBox", "0 -5 10 10")
.attr("refX", 15) .attr("refX", 15)
.attr("refY", -0.5) .attr("refY", -0.5)
.attr("markerWidth", 5) .attr("markerWidth", 6)
.attr("markerHeight", 5) .attr("markerHeight", 6)
.attr("orient", "auto") .attr("orient", "auto")
.append("path") .append("path")
.attr("fill", color) .attr("fill", color)
@ -187,11 +183,8 @@ const drawChart2 = (data) => {
.selectAll("path") .selectAll("path")
.data(links) .data(links)
.join("path") .join("path")
.attr("stroke", (d) => color(d.traceId)) .attr("stroke", (d) => color(d.type))
.attr( .attr("marker-end", (d) => `url(${new URL(`#arrow-${d.type}`, location)})`);
"marker-end",
(d) => `url(${new URL(`#arrow-${d.traceId}`, location)})`,
);
const node = svg const node = svg
.append("g") .append("g")
@ -203,32 +196,25 @@ const drawChart2 = (data) => {
.join("g") .join("g")
.call(drag(simulation)); .call(drag(simulation));
// Node "icon"
node node
.append("circle") .append("circle")
.attr("stroke", "white") .attr("stroke", "white")
.attr("stroke-width", 1.5) .attr("stroke-width", 1.5)
.attr("r", 5); .attr("r", 4);
// Node text
node node
.append("text") .append("text")
.attr("x", 8) .attr("x", 8)
.attr("y", 4) .attr("y", "0.31em")
.text((d) => (d.id.endsWith("*") ? "*" : d.id)) .text((d) => (d.id.endsWith("*") ? "*" : d.id))
.clone(true) .clone(true)
.lower() .lower()
.attr("fill", "black") .attr("fill", "none")
.attr("stroke", "white") .attr("stroke", "white")
.attr("stroke-width", 2); .attr("stroke-width", 3);
simulation.on("tick", () => { simulation.on("tick", () => {
link.attr("d", linkArc); link.attr("d", linkArc);
// 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("transform", (d) => `translate(${d.x},${d.y})`); node.attr("transform", (d) => `translate(${d.x},${d.y})`);
}); });
@ -237,106 +223,73 @@ const drawChart2 = (data) => {
return Object.assign(svg.node(), { scales: { color } }); return Object.assign(svg.node(), { scales: { color } });
}; };
const drawSigma = (data) => {
// Create a graphology graph
const graph = new graphology.MultiDirectedGraph();
data.nodes.forEach((n, i) => {
console.log("Node:", n);
try {
graph.addNode(n.id, n);
} catch (e) {
console.log("Node add:", e);
}
});
data.links.forEach((l, i) => {
graph.addEdge(l.source, l.target, l);
});
// Instantiate sigma.js and render the graph
const renderer = new Sigma(graph, document.getElementById("container"), {
labelThreshold: -10000,
});
};
const getNodeID = (hop, prevId, trace) => {
if (prevId === null) {
return trace.origin;
}
if (hop.name === "*") {
return `${trace.id}-${hop.number}-*`;
}
return hop.ip;
};
const parseNodesAndLinks = (traces) => { const parseNodesAndLinks = (traces) => {
const nodes = []; const result = {
const links = []; nodes: [],
links: [],
const colors = Array.from(new Set(traces.map((t) => t.id))); };
const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
traces.forEach((trace) => { traces.forEach((trace) => {
let prevId = null; let prevId = null;
let latestNumber = 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) => { trace.hops.forEach((hop) => {
const id = getNodeID(hop, prevId, trace); const id = getId(hop);
// New node // New node
nodes.push({ result.nodes.push({
id: id, id: id,
label: id.endsWith("*") ? "*" : id, group: trace.origin,
x: trace.id, radius: 8,
y: hop.number / 2, value: hop.name || "name?",
size: 9, origin: trace.origin,
labelSize: 30,
color: color(trace.id),
}); });
if (prevId) { if (prevId) {
// New link // New link
links.push({ result.links.push({
label: "asd",
source: prevId, source: prevId,
target: id, target: id,
traceId: trace.id, type: trace.origin,
origin: trace.origin, group: trace.origin,
size: 1,
color: color(trace.id),
}); });
} }
prevId = id; prevId = id;
latestNumber = hop.number;
}); });
/** // Last "destination" node
* Last "destination" node, just for candy result.nodes.push({
*/
nodes.push({
id: trace.id, id: trace.id,
label: trace.target, group: trace.origin,
x: trace.id, radius: 8,
y: (latestNumber + 1) / 2, value: trace.target,
size: 8,
color: "black",
}); });
links.push({ if (prevId) {
source: prevId, // New link
target: trace.id, result.links.push({
}); source: prevId,
target: trace.target,
type: trace.origin,
group: trace.origin,
});
}
}); });
// { id: ip, group: origin, radius: 2 } // { id: ip, group: origin, radius: 2 }
// { source: prev.ip, target: ip, value: latency } // { source: prev.ip, target: ip, value: latency }
return { return result;
nodes,
links,
};
}; };
async function main() { async function main() {
@ -347,11 +300,9 @@ async function main() {
const data = parseNodesAndLinks(traces); const data = parseNodesAndLinks(traces);
console.log("Data:", data); console.log("Data:", data);
// const chart = drawChart2(data.links); const chart = drawChart2(data.links);
const chart = drawSigma(data); container.append(chart);
// container.append(chart);
} }
main(); main();