Improve netjsongraph.js for its new release: Project Report
The incredible five-month journey of Google Summer of Code is nearing its end. Federico Capaono and Moritz Warning, my incredible project mentors, have guided me while I worked on my GSoC project with OpenWISP.
About OpenWISP
OpenWISP is a modular network management system built on top of OpenWRT (but designed to allow supporting multiple embedded operating systems) that allows managing and automating several aspects of IT network deployment, monitoring, and management.
About the Project
netjsongraph.js is a JavaScript library used to build powerful and interoperable network topology visualizations using the NetJSON NetworkGraph format.
The goal of this project is to improve the new version of the netjsongraph.js visualization library, which has not been released yet and is available in the gsoc2019 branch of netjsongraph.js on GitHub. It aims to improve the geographic map feature by revamping the UI, fixing the zoom animation, implementing a clustering feature to the nodes on the map, adding support to GeoJSON, loading more data based on the geographic extent, and adding narrow screen support.
Important Development Milestones
Improved User Interface
A sidebar is created to serve all the information about the network such as the metadata information and information about the nodes and links. The weird zoom lag which was present in the previous version is also fixed. This new UI is responsive and friendly to narrow screens.
Related work:
- [change] Improve the UI of logical and geo map #113
- [change] Add support for narrow screens #115
- [change] Improve indoor map example #149
- [change] Fix zoom animation #120
Implementing clustering feature
The main motive of this feature is to reduce the cluttering of nodes. The multiple overlapping nodes in an area are grouped as one cluster. You can easily customize the area covered by the cluster. The cluster will expand when it is clicked and also when the map zoom increases. It is also possible to cluster the nodes based on certain properties of the data.
Related work:
Loading more data based on the geographic extent
The maximum number of nodes that can be loaded to the map is set to 10000 by default. It is also possible to load data in a paginated manner. The objective of this feature is to load more data without causing stress to the browser. When more points are present than the configured maximum limit and the map is zoomed more than a specific level, more data is loaded from the API based on the current geographic extent.
Related work:
- [feature] Load more data by specifying geographic extent #118
- [feature] Allow loading more devices using pagination #117
Support for GeoJSON data
In addition to the NetJSON data, I have added support for GeoJSON data. With this, the geographic map can load GeoJSON features.
Related work:
Integrating the library with other OpenWISP modules
We can understand the shortcomings and areas of improvement only when the library is used in a real-world project. I integrated the library with OpenWISP Monitoring and OpenWISP Network Topology to test whether the library works as intended. The map dashboard in OpenWISP Monitoring and the topology visualizer in OpenWISP Network Topology uses netjsongraph.js. I have also worked on providing real-time updates to the topology visualizer in OpenWISP Network Topology.
Related work:
Other significant works
- [change] Show node labels only after a suitable zoom level #148
- [change] Show element info on hover #130
- [docs] Add an index page which contains links to all examples #125
- [ci] Setup github actions CI for gsoc22 branch #123
The Experience
For me, the GSoC experience was jam-packed with learning opportunities. Being chosen for the GSoC as a sophomore brought me immense joy. Working with awesome experienced developers taught me a lot of good coding practices that should be followed in software development and open source. During this period, I learned to manage my time properly. I would like to express my sincere gratitude to my mentors Federico Capaono and Moritz Warning. They were very friendly, helpful, and supportive throughout the program.
What’s Next?
I will prepare the library for the upcoming release by improving docs and development setup. I will continue solving bugs and adding more features to netjsongraph.js.