diff --git a/app/static/index.html b/app/static/index.html
index 028b9d7..4c1c9da 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -4,7 +4,14 @@
Kalzu
+
+
+
diff --git a/app/static/index.js b/app/static/index.js
index ba51167..d9e8b95 100644
--- a/app/static/index.js
+++ b/app/static/index.js
@@ -1,5 +1,5 @@
const linkArc = (d) => {
- const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
+ const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) * 3;
return `
M${d.source.x},${d.source.y}
A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
@@ -131,16 +131,18 @@ const drag = (simulation) => {
// };
const drawChart2 = (data) => {
- const width = window.visualViewport.width;
- const height = window.visualViewport.height - 10;
-
- const colors = Array.from(new Set(data.map((d) => d.traceId)));
+ // Data parsing
const nodes = Array.from(
new Set(data.flatMap((l) => [l.source, l.target])),
(id) => ({ id }),
);
const links = data.map((d) => Object.create(d));
+ // Styles
+ 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
@@ -156,12 +158,12 @@ const drawChart2 = (data) => {
// Canvas settings
const svg = d3
.create("svg")
- .attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("width", width)
.attr("height", height)
+ .attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto; font: 14px monospace;");
- // Per-type markers, as they don't inherit styles.
+ // Pre-type arrowheads, as they don't inherit styles.
svg
.append("defs")
.selectAll("marker")
@@ -171,8 +173,8 @@ const drawChart2 = (data) => {
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -0.5)
- .attr("markerWidth", 6)
- .attr("markerHeight", 6)
+ .attr("markerWidth", 5)
+ .attr("markerHeight", 5)
.attr("orient", "auto")
.append("path")
.attr("fill", color)
@@ -201,25 +203,32 @@ const drawChart2 = (data) => {
.join("g")
.call(drag(simulation));
+ // Node "icon"
node
.append("circle")
.attr("stroke", "white")
.attr("stroke-width", 1.5)
- .attr("r", 4);
+ .attr("r", 5);
+ // Node text
node
.append("text")
.attr("x", 8)
- .attr("y", "0.31em")
+ .attr("y", 4)
.text((d) => (d.id.endsWith("*") ? "*" : d.id))
.clone(true)
.lower()
- .attr("fill", "none")
+ .attr("fill", "black")
.attr("stroke", "white")
- .attr("stroke-width", 3);
+ .attr("stroke-width", 2);
simulation.on("tick", () => {
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})`);
});
@@ -228,7 +237,30 @@ const drawChart2 = (data) => {
return Object.assign(svg.node(), { scales: { color } });
};
-const getId = (hop, prevId, trace) => {
+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;
}
@@ -240,60 +272,71 @@ const getId = (hop, prevId, trace) => {
};
const parseNodesAndLinks = (traces) => {
- const result = {
- nodes: [],
- links: [],
- };
+ const nodes = [];
+ const links = [];
+
+ const colors = Array.from(new Set(traces.map((t) => t.id)));
+ const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
traces.forEach((trace) => {
let prevId = null;
+ let latestNumber = null;
trace.hops.forEach((hop) => {
- const id = getId(hop, prevId, trace);
+ const id = getNodeID(hop, prevId, trace);
// New node
- result.nodes.push({
+ nodes.push({
id: id,
- radius: 8,
- value: hop.name || "name?",
- origin: trace.origin,
+ label: id.endsWith("*") ? "*" : id,
+ x: trace.id,
+ y: hop.number / 2,
+ size: 9,
+ labelSize: 30,
+ color: color(trace.id),
});
if (prevId) {
// New link
- result.links.push({
+ links.push({
+ label: "asd",
source: prevId,
target: id,
traceId: trace.id,
origin: trace.origin,
+ size: 1,
+ color: color(trace.id),
});
}
prevId = id;
+ latestNumber = hop.number;
});
- // Last "destination" node
- result.nodes.push({
+ /**
+ * Last "destination" node, just for candy
+ */
+ nodes.push({
id: trace.id,
- radius: 8,
- value: trace.target,
- origin: trace.origin,
+ label: trace.target,
+ x: trace.id,
+ y: (latestNumber + 1) / 2,
+ size: 8,
+ color: "black",
});
- if (prevId) {
- // New link
- result.links.push({
- source: prevId,
- target: trace.target,
- traceId: trace.id,
- origin: trace.origin,
- });
- }
+ links.push({
+ source: prevId,
+ target: trace.id,
+ });
});
// { id: ip, group: origin, radius: 2 }
// { source: prev.ip, target: ip, value: latency }
- return result;
+ return {
+ nodes,
+ links,
+ };
};
async function main() {
@@ -304,9 +347,11 @@ async function main() {
const data = parseNodesAndLinks(traces);
console.log("Data:", data);
- const chart = drawChart2(data.links);
+ // const chart = drawChart2(data.links);
- container.append(chart);
+ const chart = drawSigma(data);
+
+ // container.append(chart);
}
main();