MrKalzu/traceroute_map
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

http-rewrite #1

Merged
MrKalzu merged 5 commits from ryyst/traceroute_map:http-rewrite into master 2024-06-02 19:21:29 +03:00
Conversation 1 Commits 5 Files Changed 15 +129 -126
2 changed files with 129 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 83acd47845 - Show all commits

3
app/static/index.html
View File

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/d3.v7.min.js"></script> <script src="/static/d3.v7.min.js"></script>
</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>

250
app/static/index.js
View File

@ -31,116 +31,117 @@ 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) => {
const width = 1600; const width = window.visualViewport.width;
const height = 1200; const height = window.visualViewport.height - 10;
const types = Array.from(new Set(data.map((d) => d.type)));
const colors = Array.from(new Set(data.map((d) => d.traceId)));
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));
const color = d3.scaleOrdinal(types, d3.schemeCategory10); const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
const simulation = d3 const simulation = d3
.forceSimulation(nodes) .forceSimulation(nodes)
@ -152,18 +153,19 @@ 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("viewBox", [-width / 2, -height / 2, width, height])
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;"); .attr("style", "max-width: 100%; height: auto; font: 14px monospace;");
// Per-type markers, 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(types) .data(colors)
.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")
@ -183,8 +185,11 @@ const drawChart2 = (data) => {
.selectAll("path") .selectAll("path")
.data(links) .data(links)
.join("path") .join("path")
.attr("stroke", (d) => color(d.type)) .attr("stroke", (d) => color(d.traceId))
.attr("marker-end", (d) => `url(${new URL(`#arrow-${d.type}`, location)})`); .attr(
"marker-end",
(d) => `url(${new URL(`#arrow-${d.traceId}`, location)})`,
);
const node = svg const node = svg
.append("g") .append("g")
@ -223,16 +228,7 @@ const drawChart2 = (data) => {
return Object.assign(svg.node(), { scales: { color } }); return Object.assign(svg.node(), { scales: { color } });
}; };
const parseNodesAndLinks = (traces) => { const getId = (hop, prevId, trace) => {
const result = {
nodes: [],
links: [],
};
traces.forEach((trace) => {
let prevId = null;
const getId = (hop) => {
if (prevId === null) { if (prevId === null) {
return trace.origin; return trace.origin;
} }
@ -243,13 +239,21 @@ const parseNodesAndLinks = (traces) => {
return hop.ip; return hop.ip;
}; };
const parseNodesAndLinks = (traces) => {
const result = {
nodes: [],
links: [],
};
traces.forEach((trace) => {
let prevId = null;
trace.hops.forEach((hop) => { trace.hops.forEach((hop) => {
const id = getId(hop); const id = getId(hop, prevId, trace);
// New node // New node
result.nodes.push({ result.nodes.push({
id: id, id: id,
group: trace.origin,
radius: 8, radius: 8,
value: hop.name || "name?", value: hop.name || "name?",
origin: trace.origin, origin: trace.origin,
@ -260,8 +264,8 @@ const parseNodesAndLinks = (traces) => {
result.links.push({ result.links.push({
source: prevId, source: prevId,
target: id, target: id,
type: trace.origin, traceId: trace.id,
group: trace.origin, origin: trace.origin,
}); });
} }
@ -271,9 +275,9 @@ const parseNodesAndLinks = (traces) => {
// Last "destination" node // Last "destination" node
result.nodes.push({ result.nodes.push({
id: trace.id, id: trace.id,
group: trace.origin,
radius: 8, radius: 8,
value: trace.target, value: trace.target,
origin: trace.origin,
}); });
if (prevId) { if (prevId) {
@ -281,8 +285,8 @@ const parseNodesAndLinks = (traces) => {
result.links.push({ result.links.push({
source: prevId, source: prevId,
target: trace.target, target: trace.target,
type: trace.origin, traceId: trace.id,
group: trace.origin, origin: trace.origin,
}); });
} }
}); });