TEMP
This commit is contained in:
184
app/static/example.js
Normal file
184
app/static/example.js
Normal file
@ -0,0 +1,184 @@
|
||||
/**
|
||||
* This example showcases sigma's reducers, which aim to facilitate dynamically
|
||||
* changing the appearance of nodes and edges, without actually changing the
|
||||
* main graphology data.
|
||||
*/
|
||||
import Graph from "graphology";
|
||||
import Sigma from "sigma";
|
||||
import { Coordinates, EdgeDisplayData, NodeDisplayData } from "sigma/types";
|
||||
|
||||
import { onStoryDown } from "../utils";
|
||||
import data from "./data.json";
|
||||
|
||||
export default () => {
|
||||
// Retrieve some useful DOM elements:
|
||||
const container = document.getElementById("sigma-container") as HTMLElement;
|
||||
const searchInput = document.getElementById("search-input") as HTMLInputElement;
|
||||
const searchSuggestions = document.getElementById("suggestions") as HTMLDataListElement;
|
||||
|
||||
// Instantiate sigma:
|
||||
const graph = new Graph();
|
||||
graph.import(data);
|
||||
const renderer = new Sigma(graph, container);
|
||||
|
||||
// Type and declare internal state:
|
||||
interface State {
|
||||
hoveredNode?: string;
|
||||
searchQuery: string;
|
||||
|
||||
// State derived from query:
|
||||
selectedNode?: string;
|
||||
suggestions?: Set<string>;
|
||||
|
||||
// State derived from hovered node:
|
||||
hoveredNeighbors?: Set<string>;
|
||||
}
|
||||
const state: State = { searchQuery: "" };
|
||||
|
||||
// Feed the datalist autocomplete values:
|
||||
searchSuggestions.innerHTML = graph
|
||||
.nodes()
|
||||
.map((node) => `<option value="${graph.getNodeAttribute(node, "label")}"></option>`)
|
||||
.join("\n");
|
||||
|
||||
// Actions:
|
||||
function setSearchQuery(query: string) {
|
||||
state.searchQuery = query;
|
||||
|
||||
if (searchInput.value !== query) searchInput.value = query;
|
||||
|
||||
if (query) {
|
||||
const lcQuery = query.toLowerCase();
|
||||
const suggestions = graph
|
||||
.nodes()
|
||||
.map((n) => ({ id: n, label: graph.getNodeAttribute(n, "label") as string }))
|
||||
.filter(({ label }) => label.toLowerCase().includes(lcQuery));
|
||||
|
||||
// If we have a single perfect match, them we remove the suggestions, and
|
||||
// we consider the user has selected a node through the datalist
|
||||
// autocomplete:
|
||||
if (suggestions.length === 1 && suggestions[0].label === query) {
|
||||
state.selectedNode = suggestions[0].id;
|
||||
state.suggestions = undefined;
|
||||
|
||||
// Move the camera to center it on the selected node:
|
||||
const nodePosition = renderer.getNodeDisplayData(state.selectedNode) as Coordinates;
|
||||
renderer.getCamera().animate(nodePosition, {
|
||||
duration: 500,
|
||||
});
|
||||
}
|
||||
// Else, we display the suggestions list:
|
||||
else {
|
||||
state.selectedNode = undefined;
|
||||
state.suggestions = new Set(suggestions.map(({ id }) => id));
|
||||
}
|
||||
}
|
||||
// If the query is empty, then we reset the selectedNode / suggestions state:
|
||||
else {
|
||||
state.selectedNode = undefined;
|
||||
state.suggestions = undefined;
|
||||
}
|
||||
|
||||
// Refresh rendering
|
||||
// You can directly call `renderer.refresh()`, but if you need performances
|
||||
// you can provide some options to the refresh method.
|
||||
// In this case, we don't touch the graph data so we can skip its reindexation
|
||||
renderer.refresh({
|
||||
skipIndexation: true,
|
||||
});
|
||||
}
|
||||
function setHoveredNode(node?: string) {
|
||||
if (node) {
|
||||
state.hoveredNode = node;
|
||||
state.hoveredNeighbors = new Set(graph.neighbors(node));
|
||||
}
|
||||
|
||||
// Compute the partial that we need to re-render to optimize the refresh
|
||||
const nodes = graph.filterNodes((n) => n !== state.hoveredNode && !state.hoveredNeighbors?.has(n));
|
||||
const nodesIndex = new Set(nodes);
|
||||
const edges = graph.filterEdges((e) => graph.extremities(e).some((n) => nodesIndex.has(n)));
|
||||
|
||||
if (!node) {
|
||||
state.hoveredNode = undefined;
|
||||
state.hoveredNeighbors = undefined;
|
||||
}
|
||||
|
||||
// Refresh rendering
|
||||
renderer.refresh({
|
||||
partialGraph: {
|
||||
nodes,
|
||||
edges,
|
||||
},
|
||||
// We don't touch the graph data so we can skip its reindexation
|
||||
skipIndexation: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Bind search input interactions:
|
||||
searchInput.addEventListener("input", () => {
|
||||
setSearchQuery(searchInput.value || "");
|
||||
});
|
||||
searchInput.addEventListener("blur", () => {
|
||||
setSearchQuery("");
|
||||
});
|
||||
|
||||
// Bind graph interactions:
|
||||
renderer.on("enterNode", ({ node }) => {
|
||||
setHoveredNode(node);
|
||||
});
|
||||
renderer.on("leaveNode", () => {
|
||||
setHoveredNode(undefined);
|
||||
});
|
||||
|
||||
// Render nodes accordingly to the internal state:
|
||||
// 1. If a node is selected, it is highlighted
|
||||
// 2. If there is query, all non-matching nodes are greyed
|
||||
// 3. If there is a hovered node, all non-neighbor nodes are greyed
|
||||
renderer.setSetting("nodeReducer", (node, data) => {
|
||||
const res: Partial<NodeDisplayData> = { ...data };
|
||||
|
||||
if (state.hoveredNeighbors && !state.hoveredNeighbors.has(node) && state.hoveredNode !== node) {
|
||||
res.label = "";
|
||||
res.color = "#f6f6f6";
|
||||
}
|
||||
|
||||
if (state.selectedNode === node) {
|
||||
res.highlighted = true;
|
||||
} else if (state.suggestions) {
|
||||
if (state.suggestions.has(node)) {
|
||||
res.forceLabel = true;
|
||||
} else {
|
||||
res.label = "";
|
||||
res.color = "#f6f6f6";
|
||||
}
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
|
||||
// Render edges accordingly to the internal state:
|
||||
// 1. If a node is hovered, the edge is hidden if it is not connected to the
|
||||
// node
|
||||
// 2. If there is a query, the edge is only visible if it connects two
|
||||
// suggestions
|
||||
renderer.setSetting("edgeReducer", (edge, data) => {
|
||||
const res: Partial<EdgeDisplayData> = { ...data };
|
||||
|
||||
if (state.hoveredNode && !graph.hasExtremity(edge, state.hoveredNode)) {
|
||||
res.hidden = true;
|
||||
}
|
||||
|
||||
if (
|
||||
state.suggestions &&
|
||||
(!state.suggestions.has(graph.source(edge)) || !state.suggestions.has(graph.target(edge)))
|
||||
) {
|
||||
res.hidden = true;
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
|
||||
onStoryDown(() => {
|
||||
renderer.kill();
|
||||
});
|
||||
};
|
||||
@ -4,9 +4,6 @@
|
||||
<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>
|
||||
<style>
|
||||
#container {
|
||||
height: 95vh;
|
||||
|
||||
@ -1,36 +1,43 @@
|
||||
"use strict";
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
const linkArc = (d) => {
|
||||
const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) * 3;
|
||||
return `
|
||||
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}
|
||||
`;
|
||||
};
|
||||
|
||||
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);
|
||||
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;
|
||||
@ -129,7 +136,6 @@ const drag = (simulation) => {
|
||||
//
|
||||
// return svg.node();
|
||||
// };
|
||||
|
||||
// const drawChart2 = (data) => {
|
||||
// // Data parsing
|
||||
// const nodes = Array.from(
|
||||
@ -238,211 +244,176 @@ const drag = (simulation) => {
|
||||
// scales: { color },
|
||||
// });
|
||||
// };
|
||||
|
||||
const state = {};
|
||||
|
||||
const drawSigma = (data) => {
|
||||
// Create a graphology graph
|
||||
const graph = new graphology.MultiDirectedGraph();
|
||||
|
||||
const setHoveredNode = (node) => {
|
||||
if (node) {
|
||||
const props = graph.getNodeAttributes(node);
|
||||
state.hoveredNode = node;
|
||||
state.hoveredTrace = props.traceId;
|
||||
|
||||
// Compute the partial that we need to re-render to optimize the refresh
|
||||
const nodes = graph.filterNodes((n) => {
|
||||
const np = graph.getNodeAttributes(n);
|
||||
return np.traceId === state.hoveredTrace;
|
||||
});
|
||||
|
||||
console.log("Nämä?", nodes);
|
||||
|
||||
const nodesIndex = new Set(nodes);
|
||||
const edges = graph.filterEdges((e) =>
|
||||
graph.extremities(e).some((n) => nodesIndex.has(n)),
|
||||
);
|
||||
|
||||
// Refresh rendering
|
||||
renderer.refresh({
|
||||
partialGraph: {
|
||||
nodes,
|
||||
edges,
|
||||
},
|
||||
// We don't touch the graph data so we can skip its reindexation
|
||||
skipIndexation: true,
|
||||
});
|
||||
} else {
|
||||
state.hoveredNode = undefined;
|
||||
state.hoveredTrace = undefined;
|
||||
|
||||
// Refresh rendering
|
||||
renderer.refresh({
|
||||
// We don't touch the graph data so we can skip its reindexation
|
||||
skipIndexation: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
data.nodes.forEach((n) => {
|
||||
try {
|
||||
graph.addNode(n.id, n);
|
||||
} catch (e) {
|
||||
// Duplicate node found, which is correct in our data scenario.
|
||||
}
|
||||
});
|
||||
|
||||
data.links.forEach((l) => {
|
||||
graph.addEdge(l.source, l.target, l);
|
||||
});
|
||||
|
||||
// Instantiate sigma.js and render the graph
|
||||
const renderer = new Sigma(graph, document.getElementById("container"), {
|
||||
// labelThreshold: -10000,
|
||||
renderEdgeLabels: true,
|
||||
});
|
||||
|
||||
// Bind graph interactions:
|
||||
renderer.on("enterNode", ({ node }) => {
|
||||
console.log("enter");
|
||||
setHoveredNode(node);
|
||||
});
|
||||
renderer.on("leaveNode", () => {
|
||||
console.log("leave");
|
||||
setHoveredNode(undefined);
|
||||
});
|
||||
|
||||
// Render nodes accordingly to the internal state:
|
||||
// 1. If a node is selected, it is highlighted
|
||||
// 2. If there is query, all non-matching nodes are greyed
|
||||
// 3. If there is a hovered node, all non-neighbor nodes are greyed
|
||||
renderer.setSetting("nodeReducer", (node, data) => {
|
||||
const res = { ...data };
|
||||
const props = graph.getNodeAttributes(node);
|
||||
|
||||
if (state.hoveredTrace && props.traceId !== state.hoveredTrace) {
|
||||
res.label = "";
|
||||
res.color = "#f6f6f6";
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
|
||||
// Render edges accordingly to the internal state:
|
||||
// 1. If a node is hovered, the edge is hidden if it is not connected to the
|
||||
// node
|
||||
// 2. If there is a query, the edge is only visible if it connects two
|
||||
// suggestions
|
||||
renderer.setSetting("edgeReducer", (edge, data) => {
|
||||
const res = { ...data };
|
||||
const props = graph.getEdgeAttributes(edge);
|
||||
|
||||
if (state.hoveredTrace && props.traceId !== state.hoveredTrace) {
|
||||
res.hidden = true;
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
// Create a graphology graph
|
||||
const graph = new graphology.MultiDirectedGraph();
|
||||
const setHoveredNode = (node) => {
|
||||
if (node) {
|
||||
const props = graph.getNodeAttributes(node);
|
||||
state.hoveredNode = node;
|
||||
state.hoveredTrace = props.traceId;
|
||||
// Compute the partial that we need to re-render to optimize the refresh
|
||||
const nodes = graph.filterNodes((n) => {
|
||||
const np = graph.getNodeAttributes(n);
|
||||
return np.traceId === state.hoveredTrace;
|
||||
});
|
||||
const nodesIndex = new Set(nodes);
|
||||
const edges = graph.filterEdges((e) => graph.extremities(e).some((n) => nodesIndex.has(n)));
|
||||
// Refresh rendering
|
||||
renderer.refresh({
|
||||
partialGraph: {
|
||||
nodes,
|
||||
edges,
|
||||
},
|
||||
// We don't touch the graph data so we can skip its reindexation
|
||||
skipIndexation: true,
|
||||
});
|
||||
}
|
||||
else {
|
||||
state.hoveredNode = undefined;
|
||||
state.hoveredTrace = undefined;
|
||||
// Refresh rendering
|
||||
renderer.refresh({
|
||||
// We don't touch the graph data so we can skip its reindexation
|
||||
skipIndexation: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
data.nodes.forEach((n) => {
|
||||
try {
|
||||
graph.addNode(n.id, n);
|
||||
}
|
||||
catch (e) {
|
||||
// Duplicate node found, which is correct in our data scenario.
|
||||
}
|
||||
});
|
||||
data.links.forEach((l) => {
|
||||
graph.addEdge(l.source, l.target, l);
|
||||
});
|
||||
// Instantiate sigma.js and render the graph
|
||||
const renderer = new Sigma(graph, document.getElementById("container"), {
|
||||
// labelThreshold: -10000,
|
||||
renderEdgeLabels: true,
|
||||
});
|
||||
// Bind graph interactions:
|
||||
renderer.on("enterNode", ({ node }) => {
|
||||
console.log("enter:", node);
|
||||
setHoveredNode(node);
|
||||
});
|
||||
renderer.on("leaveNode", () => {
|
||||
setHoveredNode(undefined);
|
||||
});
|
||||
// Render nodes accordingly to the internal state:
|
||||
// 1. If a node is selected, it is highlighted
|
||||
// 2. If there is query, all non-matching nodes are greyed
|
||||
// 3. If there is a hovered node, all non-neighbor nodes are greyed
|
||||
renderer.setSetting("nodeReducer", (node, data) => {
|
||||
const res = Object.assign({}, data);
|
||||
const props = graph.getNodeAttributes(node);
|
||||
if (state.hoveredTrace && props.traceId !== state.hoveredTrace) {
|
||||
res.label = "";
|
||||
res.color = "#f6f6f6";
|
||||
}
|
||||
return res;
|
||||
});
|
||||
// Render edges accordingly to the internal state:
|
||||
// 1. If a node is hovered, the edge is hidden if it is not connected to the
|
||||
// node
|
||||
// 2. If there is a query, the edge is only visible if it connects two
|
||||
// suggestions
|
||||
renderer.setSetting("edgeReducer", (edge, data) => {
|
||||
const res = Object.assign({}, data);
|
||||
const props = graph.getEdgeAttributes(edge);
|
||||
if (state.hoveredTrace && props.traceId !== state.hoveredTrace) {
|
||||
res.hidden = true;
|
||||
}
|
||||
return res;
|
||||
});
|
||||
};
|
||||
|
||||
const getNodeID = (hop, prevId, trace) => {
|
||||
if (prevId === null) {
|
||||
return trace.origin;
|
||||
}
|
||||
if (hop.name === "*") {
|
||||
return `${trace.id}-${hop.number}-*`;
|
||||
}
|
||||
|
||||
return hop.ip;
|
||||
if (prevId === null) {
|
||||
return trace.origin;
|
||||
}
|
||||
if (hop.name === "*") {
|
||||
return `${trace.target}-${hop.number}-*`;
|
||||
//return `${trace.id}-${hop.number}-*`;
|
||||
}
|
||||
return hop.ip;
|
||||
};
|
||||
|
||||
const parseNodesAndLinks = (traces) => {
|
||||
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 = getNodeID(hop, prevId, trace);
|
||||
|
||||
// New node
|
||||
nodes.push({
|
||||
id: id,
|
||||
label: id.endsWith("*") ? "*" : id,
|
||||
x: trace.id,
|
||||
y: hop.number / 2,
|
||||
traceId: trace.id,
|
||||
size: 9,
|
||||
labelSize: 30,
|
||||
color: color(trace.id),
|
||||
});
|
||||
|
||||
if (prevId) {
|
||||
// New link
|
||||
links.push({
|
||||
label: hop.link_latency,
|
||||
source: prevId,
|
||||
target: id,
|
||||
traceId: trace.id,
|
||||
origin: trace.origin,
|
||||
size: 3,
|
||||
color: color(trace.id),
|
||||
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 = getNodeID(hop, prevId, trace);
|
||||
// New node
|
||||
nodes.push({
|
||||
id: id,
|
||||
label: id.endsWith("*") ? "*" : id,
|
||||
x: trace.id,
|
||||
y: hop.number / 2,
|
||||
traceId: trace.id,
|
||||
size: 9,
|
||||
labelSize: 30,
|
||||
color: color(trace.id),
|
||||
});
|
||||
if (prevId) {
|
||||
// New link
|
||||
links.push({
|
||||
label: hop.link_latency,
|
||||
source: prevId,
|
||||
target: id,
|
||||
traceId: trace.id,
|
||||
origin: trace.origin,
|
||||
size: 3,
|
||||
color: color(trace.id),
|
||||
});
|
||||
}
|
||||
prevId = id;
|
||||
latestNumber = hop.number;
|
||||
});
|
||||
/**
|
||||
* Last "destination" node, just for candy
|
||||
*/
|
||||
nodes.push({
|
||||
id: trace.id,
|
||||
label: trace.target,
|
||||
traceId: trace.id,
|
||||
x: trace.id,
|
||||
y: (latestNumber + 1) / 2,
|
||||
size: 8,
|
||||
color: "black",
|
||||
});
|
||||
links.push({
|
||||
label: "-",
|
||||
size: 8,
|
||||
traceId: trace.id,
|
||||
source: prevId,
|
||||
target: trace.id,
|
||||
});
|
||||
}
|
||||
|
||||
prevId = id;
|
||||
latestNumber = hop.number;
|
||||
});
|
||||
|
||||
/**
|
||||
* Last "destination" node, just for candy
|
||||
*/
|
||||
nodes.push({
|
||||
id: trace.id,
|
||||
label: trace.target,
|
||||
traceId: trace.id,
|
||||
x: trace.id,
|
||||
y: (latestNumber + 1) / 2,
|
||||
size: 8,
|
||||
color: "black",
|
||||
});
|
||||
|
||||
links.push({
|
||||
label: "-",
|
||||
size: 8,
|
||||
traceId: trace.id,
|
||||
source: prevId,
|
||||
target: trace.id,
|
||||
});
|
||||
});
|
||||
|
||||
// { id: ip, group: origin, radius: 2 }
|
||||
// { source: prev.ip, target: ip, value: latency }
|
||||
return {
|
||||
nodes,
|
||||
links,
|
||||
};
|
||||
// { id: ip, group: origin, radius: 2 }
|
||||
// { source: prev.ip, target: ip, value: latency }
|
||||
return {
|
||||
nodes,
|
||||
links,
|
||||
};
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
const chart = drawSigma(data);
|
||||
|
||||
// container.append(chart);
|
||||
function main() {
|
||||
return __awaiter(this, void 0, void 0, function* () {
|
||||
const response = yield fetch("/trace/");
|
||||
const traces = yield response.json();
|
||||
console.log("Traces:", traces);
|
||||
const data = parseNodesAndLinks(traces);
|
||||
console.log("Data:", data);
|
||||
// const chart = drawChart2(data.links);
|
||||
const chart = drawSigma(data);
|
||||
// container.append(chart);
|
||||
});
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
240
app/static/index.ts
Normal file
240
app/static/index.ts
Normal file
@ -0,0 +1,240 @@
|
||||
import { MultiDirectedGraph } from "graphology";
|
||||
import Sigma from "sigma";
|
||||
import { Coordinates, EdgeDisplayData, NodeDisplayData } from "sigma/types";
|
||||
|
||||
// Nice soft greens
|
||||
const colors = ["#E8F9C2", "#C0DF81", "#96C832", "#59761E", "#263409"];
|
||||
|
||||
interface Node {
|
||||
id: string;
|
||||
label: string;
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface Link {
|
||||
label: string;
|
||||
size: number;
|
||||
traceId: string;
|
||||
source: string;
|
||||
target: string;
|
||||
}
|
||||
|
||||
interface Data {
|
||||
nodes: Node[];
|
||||
links: Link[];
|
||||
}
|
||||
|
||||
interface State {
|
||||
hoveredTrace: string | null;
|
||||
hoveredNode: string | null;
|
||||
}
|
||||
|
||||
const state: State = {
|
||||
hoveredTrace: null,
|
||||
hoveredNode: null,
|
||||
};
|
||||
|
||||
const drawSigma = (data: Data) => {
|
||||
// Create a graphology graph
|
||||
const graph = new MultiDirectedGraph();
|
||||
|
||||
// Add nodes
|
||||
data.nodes.forEach((n) => {
|
||||
try {
|
||||
graph.addNode(n.id, n);
|
||||
} catch (e) {
|
||||
// Duplicate node found, which is correct in our data scenario.
|
||||
}
|
||||
});
|
||||
|
||||
// Add links
|
||||
data.links.forEach((l) => {
|
||||
graph.addEdge(l.source, l.target, l);
|
||||
});
|
||||
|
||||
const container = document.getElementById("container") as HTMLElement;
|
||||
// Instantiate sigma.js and render the graph
|
||||
const renderer = new Sigma(graph, container, {
|
||||
// labelThreshold: -10000,
|
||||
renderEdgeLabels: true,
|
||||
});
|
||||
|
||||
// Bind graph interactions:
|
||||
renderer.on("enterNode", ({ node }) => {
|
||||
console.log("enter:", node);
|
||||
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
const props = graph.getNodeAttributes(node);
|
||||
state.hoveredNode = node;
|
||||
state.hoveredTrace = props.traceId;
|
||||
|
||||
// Compute the partial that we need to re-render to optimize the refresh
|
||||
const nodes = graph.filterNodes((n) => {
|
||||
const np = graph.getNodeAttributes(n);
|
||||
return np.traceId === state.hoveredTrace;
|
||||
});
|
||||
|
||||
const nodesIndex = new Set(nodes);
|
||||
const edges = graph.filterEdges((e) =>
|
||||
graph.extremities(e).some((n) => nodesIndex.has(n)),
|
||||
);
|
||||
|
||||
// Refresh rendering
|
||||
renderer.refresh({
|
||||
partialGraph: {
|
||||
nodes,
|
||||
edges,
|
||||
},
|
||||
// We don't touch the graph data so we can skip its reindexation
|
||||
skipIndexation: true,
|
||||
});
|
||||
});
|
||||
|
||||
renderer.on("leaveNode", () => {
|
||||
state.hoveredNode = null;
|
||||
state.hoveredTrace = null;
|
||||
|
||||
// Refresh rendering
|
||||
renderer.refresh({
|
||||
// We don't touch the graph data so we can skip its reindexation
|
||||
skipIndexation: true,
|
||||
});
|
||||
});
|
||||
|
||||
// Render nodes accordingly to the internal state:
|
||||
// 1. If a node is selected, it is highlighted
|
||||
// 2. If there is query, all non-matching nodes are greyed
|
||||
// 3. If there is a hovered node, all non-neighbor nodes are greyed
|
||||
renderer.setSetting("nodeReducer", (node, data) => {
|
||||
const res = { ...data };
|
||||
const props = graph.getNodeAttributes(node);
|
||||
|
||||
if (state.hoveredTrace && props.traceId !== state.hoveredTrace) {
|
||||
res.label = "";
|
||||
res.color = "#f6f6f6";
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
|
||||
// Render edges accordingly to the internal state:
|
||||
// 1. If a node is hovered, the edge is hidden if it is not connected to the
|
||||
// node
|
||||
// 2. If there is a query, the edge is only visible if it connects two
|
||||
// suggestions
|
||||
renderer.setSetting("edgeReducer", (edge, data) => {
|
||||
const res = { ...data };
|
||||
const props = graph.getEdgeAttributes(edge);
|
||||
|
||||
if (state.hoveredTrace && props.traceId !== state.hoveredTrace) {
|
||||
res.hidden = true;
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
};
|
||||
|
||||
// const getNodeID = (hop: number, prevId: string, trace) => {
|
||||
// if (prevId === null) {
|
||||
// return trace.origin;
|
||||
// }
|
||||
// if (hop.name === "*") {
|
||||
// return `${trace.target}-${hop.number}-*`;
|
||||
// //return `${trace.id}-${hop.number}-*`;
|
||||
// }
|
||||
//
|
||||
// return hop.ip;
|
||||
// };
|
||||
|
||||
// const parseNodesAndLinks = (traces) => {
|
||||
// const nodes = [];
|
||||
// const links = [];
|
||||
//
|
||||
// const colors = Array.from(new Set(traces.map((t) => t.id)));
|
||||
// // TODO: Replace this with something
|
||||
// const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
|
||||
//
|
||||
// traces.forEach((trace) => {
|
||||
// let prevId = null;
|
||||
// let latestNumber = null;
|
||||
//
|
||||
// trace.hops.forEach((hop) => {
|
||||
// const id = getNodeID(hop, prevId, trace);
|
||||
//
|
||||
// // New node
|
||||
// nodes.push({
|
||||
// id: id,
|
||||
// label: id.endsWith("*") ? "*" : id,
|
||||
// x: trace.id,
|
||||
// y: hop.number / 2,
|
||||
// traceId: trace.id,
|
||||
// size: 9,
|
||||
// labelSize: 30,
|
||||
// color: color(trace.id),
|
||||
// });
|
||||
//
|
||||
// if (prevId) {
|
||||
// // New link
|
||||
// links.push({
|
||||
// label: hop.link_latency,
|
||||
// source: prevId,
|
||||
// target: id,
|
||||
// traceId: trace.id,
|
||||
// origin: trace.origin,
|
||||
// size: 3,
|
||||
// color: color(trace.id),
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// prevId = id;
|
||||
// latestNumber = hop.number;
|
||||
// });
|
||||
//
|
||||
// /**
|
||||
// * Last "destination" node, just for candy
|
||||
// */
|
||||
// nodes.push({
|
||||
// id: trace.id,
|
||||
// label: trace.target,
|
||||
// traceId: trace.id,
|
||||
// x: trace.id,
|
||||
// y: (latestNumber + 1) / 2,
|
||||
// size: 8,
|
||||
// color: "black",
|
||||
// });
|
||||
//
|
||||
// links.push({
|
||||
// label: "-",
|
||||
// size: 8,
|
||||
// traceId: trace.id,
|
||||
// source: prevId,
|
||||
// target: trace.id,
|
||||
// });
|
||||
// });
|
||||
//
|
||||
// // { id: ip, group: origin, radius: 2 }
|
||||
// // { source: prev.ip, target: ip, value: latency }
|
||||
// return {
|
||||
// nodes,
|
||||
// links,
|
||||
// };
|
||||
// };
|
||||
|
||||
async function main() {
|
||||
const response = await fetch("/trace/");
|
||||
const data = await response.json();
|
||||
|
||||
console.log("Traces:", data);
|
||||
|
||||
console.log("Data:", data);
|
||||
|
||||
drawSigma(data);
|
||||
}
|
||||
|
||||
main();
|
||||
Reference in New Issue
Block a user