forked from MrKalzu/traceroute_map
Compare commits
2 Commits
http-rewri
...
master
Author | SHA1 | Date | |
---|---|---|---|
|
b7eda04c04 | ||
3e7e66eb03 |
23
README.md
23
README.md
@ -2,37 +2,20 @@
|
|||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|
||||||
### Backend
|
|
||||||
|
|
||||||
Pre-requisites: `pipenv`, or whichever venv manager you prefer
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# Install all dependencies. `pipenv` was used previously:
|
# Install all dependencies. `pipenv` was used previously:
|
||||||
pipenv --python 3.11
|
pipenv --python 3.11
|
||||||
pipenv install
|
pipenv install
|
||||||
|
pipenv shell
|
||||||
|
|
||||||
# Start dev server
|
# Start dev server
|
||||||
pipenv shell
|
|
||||||
fastapi dev app/main.py
|
fastapi dev app/main.py
|
||||||
|
|
||||||
# Start posting data to the tracing endpoint:
|
# Start posting data to the tracing endpoint:
|
||||||
traceroute git.rauhala.info -q1 | http POST localhost:8000/trace/MYHOSTNAME
|
traceroute git.rauhala.info -q1 | http POST localhost:8000/trace/MYHOSTNAME
|
||||||
```
|
or, with curl:
|
||||||
|
traceroute tuoppi.dy.fi -q1 | curl -X POST http://localhost:8000/trace/MYHOSTNAME --data-binary @-
|
||||||
|
|
||||||
### Frontend
|
|
||||||
|
|
||||||
Pre-requisites: `nvm`, `tsc` / `typescript`
|
|
||||||
|
|
||||||
```sh
|
|
||||||
# Install latest npm version with node version manager:
|
|
||||||
nvm install 22
|
|
||||||
|
|
||||||
# Install project packages:
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# Regular usage, activate project node version & start TS compiler in watch mode:
|
|
||||||
nvm use
|
|
||||||
tsc -w
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## URLs of interest
|
## URLs of interest
|
||||||
|
95
app/collector.py
Executable file
95
app/collector.py
Executable file
@ -0,0 +1,95 @@
|
|||||||
|
import json
|
||||||
|
import uuid
|
||||||
|
import hashlib
|
||||||
|
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
from .db import Database
|
||||||
|
|
||||||
|
|
||||||
|
def parse_traceroute_output(data: str, origin: str):
|
||||||
|
lines = data.strip().split("\n")
|
||||||
|
target = lines[0].split()[2]
|
||||||
|
|
||||||
|
created = datetime.now().isoformat()
|
||||||
|
|
||||||
|
trace = {"target": target, "created": created, "origin": origin, "hops": []}
|
||||||
|
|
||||||
|
prev_latency = 0
|
||||||
|
|
||||||
|
for line in lines[1:]:
|
||||||
|
hop_info = line.split()
|
||||||
|
print("LINE:", hop_info)
|
||||||
|
try:
|
||||||
|
number, name, ip, latency, _ = hop_info
|
||||||
|
hop = {
|
||||||
|
"created": created,
|
||||||
|
"number": number,
|
||||||
|
"name": name,
|
||||||
|
"ip": ip.strip("()"),
|
||||||
|
"latency": float(latency),
|
||||||
|
}
|
||||||
|
except ValueError:
|
||||||
|
number, name = hop_info
|
||||||
|
hop = {
|
||||||
|
"created": created,
|
||||||
|
"number": number,
|
||||||
|
"name": name,
|
||||||
|
"ip": None,
|
||||||
|
"latency": None,
|
||||||
|
}
|
||||||
|
|
||||||
|
trace["hops"].append(hop)
|
||||||
|
|
||||||
|
return trace
|
||||||
|
|
||||||
|
|
||||||
|
def store_traceroute(trace):
|
||||||
|
db = Database()
|
||||||
|
|
||||||
|
# hops_json = json.dumps(trace['hops'])
|
||||||
|
|
||||||
|
path_ids = {}
|
||||||
|
|
||||||
|
previous_hop_ip = None
|
||||||
|
previous_hop_latency = None
|
||||||
|
for hop in trace["hops"]:
|
||||||
|
hop_number = hop["number"]
|
||||||
|
hop_name = hop.get("name")
|
||||||
|
hop_ip = hop.get("ip")
|
||||||
|
hop_latency = hop.get("latency")
|
||||||
|
link_id = None
|
||||||
|
|
||||||
|
# insert links and get their id's
|
||||||
|
if previous_hop_ip:
|
||||||
|
link_id = db.create_link(previous_hop_ip, hop_ip)
|
||||||
|
path_ids[hop_number] = link_id
|
||||||
|
|
||||||
|
previous_hop_ip = hop_ip
|
||||||
|
|
||||||
|
# Save hop details
|
||||||
|
db.create_hop(hop_name, hop_ip, hop_latency)
|
||||||
|
|
||||||
|
# calculate link latency if possible and store it
|
||||||
|
if link_id and previous_hop_latency:
|
||||||
|
link_latency = hop_latency - previous_hop_latency
|
||||||
|
db.create_latency(link_id, trace["created"], link_latency)
|
||||||
|
|
||||||
|
# make entry to "Paths" table
|
||||||
|
if path_ids:
|
||||||
|
json_path_ids = json.dumps(path_ids)
|
||||||
|
db.create_path(node, trace["target"], json_path_ids)
|
||||||
|
|
||||||
|
db.end()
|
||||||
|
|
||||||
|
|
||||||
|
def generate_node_id():
|
||||||
|
mac = uuid.getnode()
|
||||||
|
mac_str = ":".join(
|
||||||
|
["{:02x}".format((mac >> ele) & 0xFF) for ele in range(0, 8 * 6, 8)][::-1]
|
||||||
|
)
|
||||||
|
|
||||||
|
# Hash the MAC address using SHA-256 to generate a unique ID
|
||||||
|
unique_id = hashlib.sha256(mac_str.encode()).hexdigest()
|
||||||
|
|
||||||
|
return unique_id
|
119
app/db.py
119
app/db.py
@ -25,24 +25,19 @@ class Database:
|
|||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
created TEXT NOT NULL,
|
created TEXT NOT NULL,
|
||||||
origin TEXT NOT NULL,
|
origin TEXT NOT NULL,
|
||||||
target TEXT NOT NULL,
|
target TEXT NOT NULL
|
||||||
unparsed TEXT NOT NULL
|
|
||||||
);
|
);
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS Nodes (
|
CREATE TABLE IF NOT EXISTS Hops (
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
trace_id INTEGER,
|
||||||
created TEXT NOT NULL,
|
created TEXT NOT NULL,
|
||||||
|
number INTEGER NOT NULL,
|
||||||
name TEXT,
|
name TEXT,
|
||||||
ip TEXT,
|
ip TEXT,
|
||||||
latency_ms REAL NOT NULL,
|
latency TEXT,
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS Links (
|
FOREIGN KEY(trace_id) REFERENCES Traces(id)
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
created TEXT NOT NULL,
|
|
||||||
source TEXT NOT NULL,
|
|
||||||
target TEXT NOT NULL,
|
|
||||||
latency_ms REAL NOT NULL,
|
|
||||||
);
|
);
|
||||||
"""
|
"""
|
||||||
)
|
)
|
||||||
@ -53,7 +48,6 @@ class Database:
|
|||||||
self.conn.commit()
|
self.conn.commit()
|
||||||
self.conn.close()
|
self.conn.close()
|
||||||
|
|
||||||
# TODO
|
|
||||||
def list_traces(self):
|
def list_traces(self):
|
||||||
# TODO: time filter
|
# TODO: time filter
|
||||||
result = []
|
result = []
|
||||||
@ -65,12 +59,7 @@ class Database:
|
|||||||
trace = dict(t)
|
trace = dict(t)
|
||||||
|
|
||||||
self.cursor.execute(
|
self.cursor.execute(
|
||||||
"""
|
"SELECT number, name, ip, latency FROM Hops WHERE trace_id = ? ORDER BY number ASC",
|
||||||
SELECT number, name, ip, latency, link_latency
|
|
||||||
FROM Hops
|
|
||||||
WHERE trace_id = ?
|
|
||||||
ORDER BY number ASC
|
|
||||||
""",
|
|
||||||
(trace["id"],),
|
(trace["id"],),
|
||||||
)
|
)
|
||||||
hops = self.cursor.fetchall()
|
hops = self.cursor.fetchall()
|
||||||
@ -80,7 +69,6 @@ class Database:
|
|||||||
|
|
||||||
return result
|
return result
|
||||||
|
|
||||||
# TODO
|
|
||||||
def create_trace(self, trace):
|
def create_trace(self, trace):
|
||||||
self.cursor.execute(
|
self.cursor.execute(
|
||||||
"INSERT OR IGNORE INTO Traces (created, origin, target) VALUES (?, ?, ?)",
|
"INSERT OR IGNORE INTO Traces (created, origin, target) VALUES (?, ?, ?)",
|
||||||
@ -90,15 +78,14 @@ class Database:
|
|||||||
|
|
||||||
for hop in trace["hops"]:
|
for hop in trace["hops"]:
|
||||||
self.cursor.execute(
|
self.cursor.execute(
|
||||||
"INSERT OR IGNORE INTO Hops (trace_id, created, number, name, ip, latency, link_latency) VALUES (?, ?, ?, ?, ?, ?, ?)",
|
"INSERT OR IGNORE INTO Hops (trace_id, created, number, name, ip, latency) VALUES (?, ?, ?, ?, ?, ?)",
|
||||||
(
|
(
|
||||||
trace_id,
|
trace_id,
|
||||||
hop["created"], # TODO: trace.created
|
hop["created"],
|
||||||
hop["number"],
|
hop["number"],
|
||||||
hop["name"],
|
hop["name"],
|
||||||
hop["ip"],
|
hop["ip"],
|
||||||
hop["latency"],
|
hop["latency"],
|
||||||
hop["link_latency"],
|
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -110,8 +97,96 @@ class Database:
|
|||||||
(name, ip, latency),
|
(name, ip, latency),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
def create_latency(self, link_id, timestamp, link_latency):
|
||||||
|
self.cursor.execute(
|
||||||
|
"INSERT INTO Latency (link_id, timestamp, latency_ms) VALUES (?, ?, ?)",
|
||||||
|
(link_id, timestamp, link_latency),
|
||||||
|
)
|
||||||
|
|
||||||
|
def create_path(self, node, target, json):
|
||||||
|
self.cursor.execute(
|
||||||
|
"INSERT OR IGNORE INTO Paths (node, target, hops_json) VALUES (?, ?, ?)",
|
||||||
|
(node, target, json),
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
def ensure_table_setup():
|
def ensure_table_setup():
|
||||||
db = Database()
|
db = Database()
|
||||||
db.create_tables()
|
db.create_tables()
|
||||||
db.end()
|
db.end()
|
||||||
|
|
||||||
|
|
||||||
|
####################################################################
|
||||||
|
####################################################################
|
||||||
|
####################################################################
|
||||||
|
####################################################################
|
||||||
|
|
||||||
|
|
||||||
|
def with_connection(func):
|
||||||
|
@wraps(func)
|
||||||
|
def wrapped(*args, **kwargs):
|
||||||
|
conn = sqlite3.connect(DB_FILE)
|
||||||
|
cursor = conn.cursor()
|
||||||
|
|
||||||
|
result = func(cursor, *args, **kwargs)
|
||||||
|
|
||||||
|
conn.commit()
|
||||||
|
conn.close()
|
||||||
|
|
||||||
|
return result
|
||||||
|
|
||||||
|
return wrapped
|
||||||
|
|
||||||
|
|
||||||
|
@with_connection
|
||||||
|
def init_db(cursor: Cursor):
|
||||||
|
cursor.executescript(
|
||||||
|
"""
|
||||||
|
CREATE TABLE IF NOT EXISTS Links (
|
||||||
|
id INTEGER PRIMARY KEY,
|
||||||
|
source_ip TEXT NOT NULL,
|
||||||
|
destination_ip TEXT NOT NULL,
|
||||||
|
UNIQUE(source_ip, destination_ip)
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS Paths (
|
||||||
|
id INTEGER PRIMARY KEY,
|
||||||
|
node TEXT NOT NULL,
|
||||||
|
target TEXT NOT NULL,
|
||||||
|
hops_json TEXT NOT NULL,
|
||||||
|
UNIQUE(node, target, hops_json)
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS Latency (
|
||||||
|
id INTEGER PRIMARY KEY,
|
||||||
|
link_id INTEGER NOT NULL,
|
||||||
|
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
latency_ms REAL NOT NULL,
|
||||||
|
FOREIGN KEY (link_id) REFERENCES Links(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS HopDetails (
|
||||||
|
id INTEGER PRIMARY KEY,
|
||||||
|
hop_name TEXT,
|
||||||
|
hop_ip TEXT,
|
||||||
|
hop_latency TEXT
|
||||||
|
);
|
||||||
|
"""
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
@with_connection
|
||||||
|
def insert_hop(cursor: Cursor, previous_hop_ip: str, hop_ip: str):
|
||||||
|
"""Insert a new hop and return related Link id"""
|
||||||
|
|
||||||
|
cursor.execute(
|
||||||
|
"INSERT OR IGNORE INTO Links (source_ip, destination_ip) VALUES (?, ?)",
|
||||||
|
(previous_hop_ip, hop_ip),
|
||||||
|
)
|
||||||
|
|
||||||
|
cursor.execute(
|
||||||
|
"SELECT id FROM Links WHERE source_ip = ? AND destination_ip = ?",
|
||||||
|
(previous_hop_ip, hop_ip),
|
||||||
|
)
|
||||||
|
|
||||||
|
return cursor.fetchone()
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
from fastapi import Request, FastAPI
|
from fastapi import Request, FastAPI
|
||||||
from fastapi.staticfiles import StaticFiles
|
from fastapi.staticfiles import StaticFiles
|
||||||
|
|
||||||
from .parser import parse_traceroute_output
|
from .collector import parse_traceroute_output, store_traceroute
|
||||||
from .db import Database, ensure_table_setup
|
from .db import Database, ensure_table_setup
|
||||||
|
|
||||||
from pprint import pprint as print
|
from pprint import pprint as print
|
||||||
|
119
app/parser.py
119
app/parser.py
@ -1,119 +0,0 @@
|
|||||||
import json
|
|
||||||
import uuid
|
|
||||||
import hashlib
|
|
||||||
|
|
||||||
from datetime import datetime
|
|
||||||
|
|
||||||
from .db import Database
|
|
||||||
|
|
||||||
|
|
||||||
def parse_node(hop_info: list[str], target, origin):
|
|
||||||
try:
|
|
||||||
# Regular lines.
|
|
||||||
number, name, ip, latency, _ = hop_info
|
|
||||||
latency = float(latency)
|
|
||||||
ip = (ip.strip("()"),)
|
|
||||||
return {
|
|
||||||
"render_id": ip,
|
|
||||||
"hop_number": number,
|
|
||||||
"name": name,
|
|
||||||
"ip": ip,
|
|
||||||
"latency_ms": latency,
|
|
||||||
}
|
|
||||||
except ValueError:
|
|
||||||
# Asterisks, no data found for hop.
|
|
||||||
number, name = hop_info
|
|
||||||
return {
|
|
||||||
"render_id": f"{origin}-{target}-{number}",
|
|
||||||
"hop_number": number,
|
|
||||||
"name": name,
|
|
||||||
"ip": None,
|
|
||||||
"latency_ms": None,
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
def parse_link(node, prev_node):
|
|
||||||
latency = (
|
|
||||||
node["latency"] - prev_node["latency"]
|
|
||||||
if prev_node is not None
|
|
||||||
else node["latency"]
|
|
||||||
)
|
|
||||||
return {
|
|
||||||
"source": prev_node.get("render_id"),
|
|
||||||
"target": node["render_id"],
|
|
||||||
"latency_ms": latency,
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
def parse_traceroute_output(data: str, origin: str):
|
|
||||||
# TODO: data validation
|
|
||||||
|
|
||||||
lines = data.strip().split("\n")
|
|
||||||
target = lines[0].split()[2]
|
|
||||||
|
|
||||||
created = datetime.now().isoformat()
|
|
||||||
|
|
||||||
trace = {"target": target, "created": created, "origin": origin, "hops": []}
|
|
||||||
|
|
||||||
prev_node = None
|
|
||||||
|
|
||||||
for line in lines[1:]:
|
|
||||||
hop_info = line.split()
|
|
||||||
print("LINE:", hop_info)
|
|
||||||
|
|
||||||
node = parse_node(hop_info, target, origin)
|
|
||||||
link = parse_link(node, prev_node)
|
|
||||||
|
|
||||||
trace["nodes"].append(node)
|
|
||||||
trace["links"].append(link)
|
|
||||||
|
|
||||||
prev_node = node
|
|
||||||
|
|
||||||
return trace
|
|
||||||
|
|
||||||
|
|
||||||
# def store_traceroute(trace):
|
|
||||||
# # hops_json = json.dumps(trace['hops'])
|
|
||||||
#
|
|
||||||
# path_ids = {}
|
|
||||||
#
|
|
||||||
# previous_hop_ip = None
|
|
||||||
# previous_hop_latency = None
|
|
||||||
# for hop in trace["hops"]:
|
|
||||||
# hop_number = hop["number"]
|
|
||||||
# hop_name = hop.get("name")
|
|
||||||
# hop_ip = hop.get("ip")
|
|
||||||
# hop_latency = hop.get("latency")
|
|
||||||
# link_id = None
|
|
||||||
#
|
|
||||||
# # insert links and get their id's
|
|
||||||
# if previous_hop_ip:
|
|
||||||
# link_id = db.create_link(previous_hop_ip, hop_ip)
|
|
||||||
# path_ids[hop_number] = link_id
|
|
||||||
#
|
|
||||||
# previous_hop_ip = hop_ip
|
|
||||||
#
|
|
||||||
# # Save hop details
|
|
||||||
# db.create_hop(hop_name, hop_ip, hop_latency)
|
|
||||||
#
|
|
||||||
# # calculate link latency if possible and store it
|
|
||||||
# if link_id and previous_hop_latency:
|
|
||||||
# link_latency = hop_latency - previous_hop_latency
|
|
||||||
# db.create_latency(link_id, trace["created"], link_latency)
|
|
||||||
#
|
|
||||||
# # make entry to "Paths" table
|
|
||||||
# if path_ids:
|
|
||||||
# json_path_ids = json.dumps(path_ids)
|
|
||||||
# db.create_path(node, trace["target"], json_path_ids)
|
|
||||||
|
|
||||||
|
|
||||||
# def generate_node_id():
|
|
||||||
# mac = uuid.getnode()
|
|
||||||
# mac_str = ":".join(
|
|
||||||
# ["{:02x}".format((mac >> ele) & 0xFF) for ele in range(0, 8 * 6, 8)][::-1]
|
|
||||||
# )
|
|
||||||
#
|
|
||||||
# # Hash the MAC address using SHA-256 to generate a unique ID
|
|
||||||
# unique_id = hashlib.sha256(mac_str.encode()).hexdigest()
|
|
||||||
#
|
|
||||||
# return unique_id
|
|
@ -1,184 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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,6 +4,9 @@
|
|||||||
<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>
|
||||||
<style>
|
<style>
|
||||||
#container {
|
#container {
|
||||||
height: 95vh;
|
height: 95vh;
|
||||||
|
@ -1,43 +1,36 @@
|
|||||||
"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 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) * 3;
|
||||||
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}
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const drag = (simulation) => {
|
const drag = (simulation) => {
|
||||||
function dragstarted(event, d) {
|
function dragstarted(event, d) {
|
||||||
if (!event.active)
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||||
simulation.alphaTarget(0.3).restart();
|
d.fx = d.x;
|
||||||
d.fx = d.x;
|
d.fy = d.y;
|
||||||
d.fy = d.y;
|
}
|
||||||
}
|
|
||||||
function dragged(event, d) {
|
function dragged(event, d) {
|
||||||
d.fx = event.x;
|
d.fx = event.x;
|
||||||
d.fy = event.y;
|
d.fy = event.y;
|
||||||
}
|
}
|
||||||
function dragended(event, d) {
|
|
||||||
if (!event.active)
|
function dragended(event, d) {
|
||||||
simulation.alphaTarget(0);
|
if (!event.active) simulation.alphaTarget(0);
|
||||||
d.fx = null;
|
d.fx = null;
|
||||||
d.fy = null;
|
d.fy = null;
|
||||||
}
|
}
|
||||||
return d3
|
|
||||||
.drag()
|
return d3
|
||||||
.on("start", dragstarted)
|
.drag()
|
||||||
.on("drag", dragged)
|
.on("start", dragstarted)
|
||||||
.on("end", dragended);
|
.on("drag", dragged)
|
||||||
|
.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;
|
||||||
@ -136,284 +129,229 @@ const drag = (simulation) => {
|
|||||||
//
|
//
|
||||||
// return svg.node();
|
// return svg.node();
|
||||||
// };
|
// };
|
||||||
// const drawChart2 = (data) => {
|
|
||||||
// // Data parsing
|
const drawChart2 = (data) => {
|
||||||
// const nodes = Array.from(
|
// Data parsing
|
||||||
// new Set(data.flatMap((l) => [l.source, l.target])),
|
const nodes = Array.from(
|
||||||
// (id) => ({ id }),
|
new Set(data.flatMap((l) => [l.source, l.target])),
|
||||||
// );
|
(id) => ({ id }),
|
||||||
// const links = data.map((d) => Object.create(d));
|
);
|
||||||
//
|
const links = data.map((d) => Object.create(d));
|
||||||
// // Styles
|
|
||||||
// const width = window.visualViewport.width;
|
// Styles
|
||||||
// const height = window.visualViewport.height - 10;
|
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 colors = Array.from(new Set(data.map((d) => d.traceId)));
|
||||||
//
|
const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
|
||||||
// const simulation = d3
|
|
||||||
// .forceSimulation(nodes)
|
const simulation = d3
|
||||||
// .force(
|
.forceSimulation(nodes)
|
||||||
// "link",
|
.force(
|
||||||
// d3.forceLink(links).id((d) => d.id),
|
"link",
|
||||||
// )
|
d3.forceLink(links).id((d) => d.id),
|
||||||
// .force("charge", d3.forceManyBody().strength(-400))
|
)
|
||||||
// .force("x", d3.forceX())
|
.force("charge", d3.forceManyBody().strength(-400))
|
||||||
// .force("y", d3.forceY());
|
.force("x", d3.forceX())
|
||||||
//
|
.force("y", d3.forceY());
|
||||||
// // Canvas settings
|
|
||||||
// const svg = d3
|
// Canvas settings
|
||||||
// .create("svg")
|
const svg = d3
|
||||||
// .attr("width", width)
|
.create("svg")
|
||||||
// .attr("height", height)
|
.attr("width", width)
|
||||||
// .attr("viewBox", [-width / 2, -height / 2, width, height])
|
.attr("height", height)
|
||||||
// .attr("style", "max-width: 100%; height: auto; font: 14px monospace;");
|
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
||||||
//
|
.attr("style", "max-width: 100%; height: auto; font: 14px monospace;");
|
||||||
// // Pre-type arrowheads, as they don't inherit styles.
|
|
||||||
// svg
|
// Pre-type arrowheads, as they don't inherit styles.
|
||||||
// .append("defs")
|
svg
|
||||||
// .selectAll("marker")
|
.append("defs")
|
||||||
// .data(colors)
|
.selectAll("marker")
|
||||||
// .join("marker")
|
.data(colors)
|
||||||
// .attr("id", (d) => `arrow-${d}`)
|
.join("marker")
|
||||||
// .attr("viewBox", "0 -5 10 10")
|
.attr("id", (d) => `arrow-${d}`)
|
||||||
// .attr("refX", 15)
|
.attr("viewBox", "0 -5 10 10")
|
||||||
// .attr("refY", -0.5)
|
.attr("refX", 15)
|
||||||
// .attr("markerWidth", 5)
|
.attr("refY", -0.5)
|
||||||
// .attr("markerHeight", 5)
|
.attr("markerWidth", 5)
|
||||||
// .attr("orient", "auto")
|
.attr("markerHeight", 5)
|
||||||
// .append("path")
|
.attr("orient", "auto")
|
||||||
// .attr("fill", color)
|
.append("path")
|
||||||
// .attr("d", "M0,-5L10,0L0,5");
|
.attr("fill", color)
|
||||||
//
|
.attr("d", "M0,-5L10,0L0,5");
|
||||||
// const link = svg
|
|
||||||
// .append("g")
|
const link = svg
|
||||||
// .attr("fill", "none")
|
.append("g")
|
||||||
// .attr("stroke-width", 1.5)
|
.attr("fill", "none")
|
||||||
// .selectAll("path")
|
.attr("stroke-width", 1.5)
|
||||||
// .data(links)
|
.selectAll("path")
|
||||||
// .join("path")
|
.data(links)
|
||||||
// .attr("stroke", (d) => color(d.traceId))
|
.join("path")
|
||||||
// .attr(
|
.attr("stroke", (d) => color(d.traceId))
|
||||||
// "marker-end",
|
.attr(
|
||||||
// (d) => `url(${new URL(`#arrow-${d.traceId}`, location)})`,
|
"marker-end",
|
||||||
// );
|
(d) => `url(${new URL(`#arrow-${d.traceId}`, location)})`,
|
||||||
//
|
);
|
||||||
// const node = svg
|
|
||||||
// .append("g")
|
const node = svg
|
||||||
// .attr("fill", "currentColor")
|
.append("g")
|
||||||
// .attr("stroke-linecap", "round")
|
.attr("fill", "currentColor")
|
||||||
// .attr("stroke-linejoin", "round")
|
.attr("stroke-linecap", "round")
|
||||||
// .selectAll("g")
|
.attr("stroke-linejoin", "round")
|
||||||
// .data(nodes)
|
.selectAll("g")
|
||||||
// .join("g")
|
.data(nodes)
|
||||||
// .call(drag(simulation));
|
.join("g")
|
||||||
//
|
.call(drag(simulation));
|
||||||
// // Node "icon"
|
|
||||||
// node
|
// Node "icon"
|
||||||
// .append("circle")
|
node
|
||||||
// .attr("stroke", "white")
|
.append("circle")
|
||||||
// .attr("stroke-width", 1.5)
|
.attr("stroke", "white")
|
||||||
// .attr("r", 5);
|
.attr("stroke-width", 1.5)
|
||||||
//
|
.attr("r", 5);
|
||||||
// // Node text
|
|
||||||
// node
|
// Node text
|
||||||
// .append("text")
|
node
|
||||||
// .attr("x", 8)
|
.append("text")
|
||||||
// .attr("y", 4)
|
.attr("x", 8)
|
||||||
// .text((d) => (d.id.endsWith("*") ? "*" : d.id))
|
.attr("y", 4)
|
||||||
// .clone(true)
|
.text((d) => (d.id.endsWith("*") ? "*" : d.id))
|
||||||
// .lower()
|
.clone(true)
|
||||||
// .attr("fill", "black")
|
.lower()
|
||||||
// .attr("stroke", "white")
|
.attr("fill", "black")
|
||||||
// .attr("stroke-width", 2);
|
.attr("stroke", "white")
|
||||||
//
|
.attr("stroke-width", 2);
|
||||||
// simulation.on("tick", () => {
|
|
||||||
// link.attr("d", linkArc);
|
simulation.on("tick", () => {
|
||||||
// // link
|
link.attr("d", linkArc);
|
||||||
// // .attr("x1", (d) => d.source.x)
|
// link
|
||||||
// // .attr("y1", (d) => d.source.y)
|
// .attr("x1", (d) => d.source.x)
|
||||||
// // .attr("x2", (d) => d.target.x)
|
// .attr("y1", (d) => d.source.y)
|
||||||
// // .attr("y2", (d) => d.target.y);
|
// .attr("x2", (d) => d.target.x)
|
||||||
// node.attr("transform", (d) => `translate(${d.x},${d.y})`);
|
// .attr("y2", (d) => d.target.y);
|
||||||
// });
|
node.attr("transform", (d) => `translate(${d.x},${d.y})`);
|
||||||
//
|
});
|
||||||
// // invalidation.then(() => simulation.stop());
|
|
||||||
//
|
// invalidation.then(() => simulation.stop());
|
||||||
// return Object.assign(svg.node(), {
|
|
||||||
// scales: { color },
|
return Object.assign(svg.node(), { scales: { color } });
|
||||||
// });
|
};
|
||||||
// };
|
|
||||||
const state = {};
|
|
||||||
const drawSigma = (data) => {
|
const drawSigma = (data) => {
|
||||||
// Create a graphology graph
|
// Create a graphology graph
|
||||||
const graph = new graphology.MultiDirectedGraph();
|
const graph = new graphology.MultiDirectedGraph();
|
||||||
const setHoveredNode = (node) => {
|
|
||||||
if (node) {
|
data.nodes.forEach((n, i) => {
|
||||||
const props = graph.getNodeAttributes(node);
|
console.log("Node:", n);
|
||||||
state.hoveredNode = node;
|
try {
|
||||||
state.hoveredTrace = props.traceId;
|
graph.addNode(n.id, n);
|
||||||
// Compute the partial that we need to re-render to optimize the refresh
|
} catch (e) {
|
||||||
const nodes = graph.filterNodes((n) => {
|
console.log("Node add:", e);
|
||||||
const np = graph.getNodeAttributes(n);
|
}
|
||||||
return np.traceId === state.hoveredTrace;
|
});
|
||||||
});
|
|
||||||
const nodesIndex = new Set(nodes);
|
data.links.forEach((l, i) => {
|
||||||
const edges = graph.filterEdges((e) => graph.extremities(e).some((n) => nodesIndex.has(n)));
|
graph.addEdge(l.source, l.target, l);
|
||||||
// Refresh rendering
|
});
|
||||||
renderer.refresh({
|
|
||||||
partialGraph: {
|
// Instantiate sigma.js and render the graph
|
||||||
nodes,
|
const renderer = new Sigma(graph, document.getElementById("container"), {
|
||||||
edges,
|
labelThreshold: -10000,
|
||||||
},
|
});
|
||||||
// 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) => {
|
const getNodeID = (hop, prevId, trace) => {
|
||||||
if (prevId === null) {
|
if (prevId === null) {
|
||||||
return trace.origin;
|
return trace.origin;
|
||||||
}
|
}
|
||||||
if (hop.name === "*") {
|
if (hop.name === "*") {
|
||||||
return `${trace.target}-${hop.number}-*`;
|
return `${trace.id}-${hop.number}-*`;
|
||||||
//return `${trace.id}-${hop.number}-*`;
|
}
|
||||||
}
|
|
||||||
return hop.ip;
|
return hop.ip;
|
||||||
};
|
};
|
||||||
|
|
||||||
const parseNodesAndLinks = (traces) => {
|
const parseNodesAndLinks = (traces) => {
|
||||||
const nodes = [];
|
const nodes = [];
|
||||||
const links = [];
|
const links = [];
|
||||||
const colors = Array.from(new Set(traces.map((t) => t.id)));
|
|
||||||
const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
|
const colors = Array.from(new Set(traces.map((t) => t.id)));
|
||||||
traces.forEach((trace) => {
|
const color = d3.scaleOrdinal(colors, d3.schemeCategory10);
|
||||||
let prevId = null;
|
|
||||||
let latestNumber = null;
|
traces.forEach((trace) => {
|
||||||
trace.hops.forEach((hop) => {
|
let prevId = null;
|
||||||
const id = getNodeID(hop, prevId, trace);
|
let latestNumber = null;
|
||||||
// New node
|
|
||||||
nodes.push({
|
trace.hops.forEach((hop) => {
|
||||||
id: id,
|
const id = getNodeID(hop, prevId, trace);
|
||||||
label: id.endsWith("*") ? "*" : id,
|
|
||||||
x: trace.id,
|
// New node
|
||||||
y: hop.number / 2,
|
nodes.push({
|
||||||
traceId: trace.id,
|
id: id,
|
||||||
size: 9,
|
label: id.endsWith("*") ? "*" : id,
|
||||||
labelSize: 30,
|
x: trace.id,
|
||||||
color: color(trace.id),
|
y: hop.number / 2,
|
||||||
});
|
size: 9,
|
||||||
if (prevId) {
|
labelSize: 30,
|
||||||
// New link
|
color: color(trace.id),
|
||||||
links.push({
|
});
|
||||||
label: hop.link_latency,
|
|
||||||
source: prevId,
|
if (prevId) {
|
||||||
target: id,
|
// New link
|
||||||
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({
|
links.push({
|
||||||
label: "-",
|
label: "asd",
|
||||||
size: 8,
|
source: prevId,
|
||||||
traceId: trace.id,
|
target: id,
|
||||||
source: prevId,
|
traceId: trace.id,
|
||||||
target: trace.id,
|
origin: trace.origin,
|
||||||
|
size: 1,
|
||||||
|
color: color(trace.id),
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
prevId = id;
|
||||||
|
latestNumber = hop.number;
|
||||||
});
|
});
|
||||||
// { id: ip, group: origin, radius: 2 }
|
|
||||||
// { source: prev.ip, target: ip, value: latency }
|
/**
|
||||||
return {
|
* Last "destination" node, just for candy
|
||||||
nodes,
|
*/
|
||||||
links,
|
nodes.push({
|
||||||
};
|
id: trace.id,
|
||||||
|
label: trace.target,
|
||||||
|
x: trace.id,
|
||||||
|
y: (latestNumber + 1) / 2,
|
||||||
|
size: 8,
|
||||||
|
color: "black",
|
||||||
|
});
|
||||||
|
|
||||||
|
links.push({
|
||||||
|
source: prevId,
|
||||||
|
target: trace.id,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// { id: ip, group: origin, radius: 2 }
|
||||||
|
// { source: prev.ip, target: ip, value: latency }
|
||||||
|
return {
|
||||||
|
nodes,
|
||||||
|
links,
|
||||||
|
};
|
||||||
};
|
};
|
||||||
function main() {
|
|
||||||
return __awaiter(this, void 0, void 0, function* () {
|
async function main() {
|
||||||
const response = yield fetch("/trace/");
|
const response = await fetch("/trace/");
|
||||||
const traces = yield response.json();
|
const traces = await response.json();
|
||||||
console.log("Traces:", traces);
|
|
||||||
const data = parseNodesAndLinks(traces);
|
console.log("Traces:", traces);
|
||||||
console.log("Data:", data);
|
const data = parseNodesAndLinks(traces);
|
||||||
// const chart = drawChart2(data.links);
|
|
||||||
const chart = drawSigma(data);
|
console.log("Data:", data);
|
||||||
// container.append(chart);
|
// const chart = drawChart2(data.links);
|
||||||
});
|
|
||||||
|
const chart = drawSigma(data);
|
||||||
|
|
||||||
|
// container.append(chart);
|
||||||
}
|
}
|
||||||
|
|
||||||
main();
|
main();
|
||||||
|
@ -1,240 +0,0 @@
|
|||||||
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();
|
|
@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es2016",
|
|
||||||
"module": "commonjs",
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"strict": true,
|
|
||||||
"skipLibCheck": true
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user