Added curl example to README.

Reviewed-on: MrKalzu/traceroute_map#1

.nvmrc

@@ -1 +0,0 @@
-v22

README.md

@@ -2,37 +2,20 @@
 
 ## Development
 
-### Backend
-
-Pre-requisites: `pipenv`, or whichever venv manager you prefer
-
 ```sh
 # Install all dependencies. `pipenv` was used previously:
 pipenv --python 3.11
 pipenv install
+pipenv shell
 
 # Start dev server
-pipenv shell
 fastapi dev app/main.py
 
 # Start posting data to the tracing endpoint:
 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

app/collector.py

@@ -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

app/db.py

@@ -25,24 +25,19 @@ class Database:
                 id INTEGER PRIMARY KEY AUTOINCREMENT,
                 created 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,
+                trace_id INTEGER,
                 created TEXT NOT NULL,
+                number INTEGER NOT NULL,
                 name 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.close()
 
-    # TODO
     def list_traces(self):
         # TODO: time filter
         result = []
@@ -65,12 +59,7 @@ class Database:
             trace = dict(t)
 
             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"],),
             )
             hops = self.cursor.fetchall()
@@ -80,7 +69,6 @@ class Database:
 
         return result
 
-    # TODO
     def create_trace(self, trace):
         self.cursor.execute(
             "INSERT OR IGNORE INTO Traces (created, origin, target) VALUES (?, ?, ?)",
@@ -90,15 +78,14 @@ class Database:
 
         for hop in trace["hops"]:
             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,
-                    hop["created"],  # TODO: trace.created
+                    hop["created"],
                     hop["number"],
                     hop["name"],
                     hop["ip"],
                     hop["latency"],
-                    hop["link_latency"],
                 ),
             )
 
@@ -110,8 +97,96 @@ class Database:
             (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():
     db = Database()
     db.create_tables()
     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()

app/main.py

@@ -1,7 +1,7 @@
 from fastapi import Request, FastAPI
 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 pprint import pprint as print

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

app/static/example.js

@@ -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();
-  });
-};

app/static/index.html

@@ -4,6 +4,9 @@
     <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;

app/static/index.js

@@ -1,13 +1,3 @@
-"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 `
@@ -15,29 +5,32 @@ const linkArc = (d) => {
     A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
   `;
 };
+
 const drag = (simulation) => {
   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.fy = d.y;
   }
+
   function dragged(event, d) {
     d.fx = event.x;
     d.fy = event.y;
   }
+
   function dragended(event, d) {
-        if (!event.active)
+    if (!event.active) simulation.alphaTarget(0);
-            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;
@@ -136,267 +129,208 @@ const drag = (simulation) => {
 //
 //   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) => {
   // Create a graphology graph
   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;
-            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) {
-        catch (e) {
+      console.log("Node add:", e);
-            // Duplicate node found, which is correct in our data scenario.
     }
   });
-    data.links.forEach((l) => {
+
+  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,
+    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.target}-${hop.number}-*`;
+    return `${trace.id}-${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,
+          label: "asd",
           source: prevId,
           target: id,
           traceId: trace.id,
           origin: trace.origin,
-                    size: 3,
+          size: 1,
           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 {
@@ -404,16 +338,20 @@ const parseNodesAndLinks = (traces) => {
     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("Data:", data);
   // const chart = drawChart2(data.links);
+
   const chart = drawSigma(data);
+
   // container.append(chart);
-    });
 }
+
 main();

app/static/index.ts

@@ -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();

tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true
-  }
-}