made with Svelte

GitHub Visualizer

Visualise your GitHub commits in real time

Visit Site

Description

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"

Creator

Jo Franchetti
@thisisjofrank


Social Media Links

ClassroomIO Open-source Learning Management System
icon-eye-dark Created with Sketch. 464
Readability Evaluator Text Readability Scorer
icon-eye-dark Created with Sketch. 852
Sentry for Svelte Svelte Error & Performance Monitoring
🧑 Sponsored by Friends
We’re hosting on Digital Ocean! πŸ’™ Try it today and get a free $100 credit.
YAW Plan Workout Planner with Rest & Exercise Timers
icon-eye-dark Created with Sketch. 794
TypingKit Typing Practice App
icon-eye-dark Created with Sketch. 1.038