GSoC'25 idea: Traceroute visualization (continuation of GSoC'24)

[dpgiakatos]

Operators would like to have a better way to visualize latency increases in upstream networks. We have a lot of traceroute data from RIPE Atlas but we miss a good visualization to show traceroute details. The goal of this project is to design and implement a page on IHR to visualize traceroute results from RIPE Atlas. There is some good tools to get inspired from (tracemon and thousand eyes path visualization, having our own would be great so we can integrate it with other tools (e.g. IYP, AS Hegemony).

Expected results:

• Create a VueJS component that fetch traceroute results from RIPE Atlas
• Display the results in intuitive graphs, showing the IP paths and corresponding RTT values
• Integrate with IYP data

Knowledge Prerequisite:

• Be familiar with existing traceroute code
• Good understanding of traceroute
• Javascript
• VueJS
• Visualization library (i.e. Plotly or D3.js)

Resources:

• https://www.ihr.live/en/traceroute-monitor
• https://github.com/InternetHealthReport/ihr-website/blob/master/src/views/TracerouteVisualizationTool.vue
• https://atlas.ripe.net/
• https://labs.ripe.net/author/massimo_candela/tracemon-network-debugging-made-easy/

Old discussion page:
https://github.com/orgs/InternetHealthReport/discussions/21

[vara-prasad-07]

Hi @dpgiakatos,

I’ve been exploring the Traceroute Visualization project and have reviewed the discussions and resources. However, I have a couple of questions.

You mentioned integrating the IYP data in the expected results.

1. Why do we want to integrate the IYP data?
2. Should the AS (Autonomous Systems) information from the IYP API be displayed as an overlay on the traceroute graph, or should it be presented in a separate view?

Thank you!

[dpgiakatos]

We are not mentioning about integrating the IYP browser, but rather with IYP data. To answer your questions:

1. IYP is a database and we want to integrate this data with the traceroute tool
2. As an overlay

For this project, the most important thing is to understand its code; the traceroute components are many.

[vara-prasad-07]

Thank you, @dpgiakatos, for answering my questions. As you mentioned, there are many traceout components in the codebase. To start, I need to gain a deeper understanding of the codebase and create a plan for the demonstration.

[OmPals]

Hello,
Confirming what I have understood from the problem statement and the discussions:
IHR website already have a traceroute vizualizer at /en/traceroute-monitor, which accepts a RIPE Atlas measurement ID and plots a traceroute with AS and IPs and a few more details. Uses Dagre to plot. I believe that IYP must be having many more data-points than just ASNs and IPs. I also think that the enhanced traceroute visualizer might not just be limited to a network graph but may include some different charts as well to visualize a history of movements in traceroute measurements.

I see possible directions to get started from here are:

1. Understanding the existing codebase of traceroute visualizer, so that the similar existing visualizer can be built with other plotting library.
2. Choosing one from D3.js or Plotly (or some other) and explore it all to be prepared for any creative work
3. Explore IYP Graph database to list down potential data points that can be helpful to operators.

If you have any pointers please let me know.
Thank you,
Om

[OmPals]

Hello @dpgiakatos ,
I used the traceroute-monitor tool with the measurement ids you have provided. I went through the code-base to understand how the directed graph is defined, layout and rendered.
Since the first step of this project requires to stabilize the existing functionality, I am going through all the features it provides and study the list of analysis performed using the traceroute.

[dpgiakatos]

Honestly, I don't know how ChatGPT (or other LLMs) can help you. If you don't know this domain, how can you validate that the response is true? If you haven't used Atlas, how can you understand what's going on and why we use Atlas to visualize the traceroute?

As an organization (and not just our organization), we have added this notice: https://github.com/InternetHealthReport/gsoc

[OmPals]

I understand. I have been referring to Atlas docs since then.
I wanted to know how the operators analyze looking at the traceroute visualization to get some better idea.
I promise to follow the rules and not to rely on AI. Apologies.

[OmPals]

Hello @dpgiakatos

The TracerouteChart component uses VNetworkGraph to plot the network graph. I checked whether the users of it are facing performance issues or not.

There are some issues related to performance.

• Performance issues for over 200 nodes. Link
• Reason for performance issues (mainly because it is SVG based). Link
• Suggests cytoscape wrapper for vue.js. Link

Before drafting a proposal, I wanted to ask whether this is a proper direction to think into? ie. replacing the existing usage of v-network-graph with a webGL based renderer.

[dpgiakatos]

Hi, we used v-network-graph because this library is being used on our network report pages. If there are performance issues, we can consider changing it.

[viahwajeety8055]

Hi @dpgiakatos,

I have been reviewing the Traceroute Visualization project, and I have some doubts after going through it.
Based on the title, my understanding is that this feature has already been developed, and now only we have to fix all the bugs and ensure its stability. Do we have documentation available so that I can review it and understand the details better.

[dpgiakatos]

Sadly, there is no documentation available for this tool, which is why the difficulty level is considered hard. Thanks.