Visualise your GitHub commits in real time
"Have you ever wanted to see the work of your entire engineering organization in a visualization as it happens? With this GitHub visualiser, you can! Using GitHub webhooks and Ably's serverless websockets and built with Svelte, VisJS and Netlify serverless functions.
I chose to build the GitHub Visualizer with Svelte because of its simple approach to state management, readable syntax, small size and speed. The app consists of two Svelte components; one that subscribes to an Ably channel and keeps GitHub commit history stored as a variable in the application, and another that can render the GitHub commit history as a "force directed graph".
GitHub offers webhooks which allow integrations to subscribe to events on github.com. Triggering an event by, for example, pushing a commit, will send an HTTP POST payload to a URL configured in your GitHub account. Webhooks can be installed for an entire organization, or per repository, which means that I can get commit data in realtime over HTTP. The next task is setting up a hosting provider to accept the webhook data and provide a callback.
The GitHub Visualizer is hosted on Netlify. Their serverless functions can be bundled with a web application, and are version controlled, built and deployed along with the rest of the app. By binding a serverless function to the web application I could set up that function as the target of a GitHub webhook. Once the data arrives from GitHub I could publish it to the UI using Ably's pub/sub platform.
When a message arrives from Ably, it is pushed to the history variable. Svelte has built in support for reactive variable assignment, which means that when a new value is assigned to that variable, the change will be immediately reflected in the UI.
I used VisJS to graph the data. The VisJS "network component" was exactly what I needed to display a complex diagram of “nodes” and their connecting lines, called “edges”.
When a message arrives the Svelte code will:
- Get the currently displayed nodes
- Find any nodes from incoming messages that are in the data structure that haven't yet been rendered
- Add those nodes to the force directed graph
- Add new edges to the graph to join the added nodes
- Remove any nodes that aren't in the data structure any more"