GSQL Real-Time Editor

A Shareable GSQL Editor that Allows Real-Time Collaboration

Comment

Inspiration

Over the summer, our team explored TigerGraph, utilizing its power to build projects like a Similarity Search Engine, a Gene Mapping System, and a Personalized Patient Dashboard. While we worked on these projects, we often ran into problems while writing queries and wanted to collaborate simultaneously. Screen sharing was a good way to collaborate on these complex projects. However, using such a platform always resulted in various network issues and an extremely slow stream. Screen sharing also prevented us from actively interacting with each other and the program we wrote, which reduced our overall productivity. The only way to interact was to guide the person sharing the screen which was quite ineffective. Our efforts to solve this problem led us to the idea of building a real-time GSQL editor, similar to Google Docs, that allows developers to collaborate simultaneously and write queries with relative ease.

What it does

It is a shareable GSQL editor that allows users to collaborate in real-time when writing queries by simply sharing the box credentials.

How we built it

Web sockets are the core principle behind this app. Sockets are extremely efficient in dealing with real-time data sharing. We used a Flask-SocketIO Python library to build the server backend and a socket.io library with HTML and JavaScript to build the client-side. Sockets are responsible for adding users to specific rooms based on their box credentials and also emitting data to all the users in the room when someone makes a change to the editor.

Challenges we ran into

Initially, we weren't sure how to go about building a real-time editor, but we eventually stumbled upon web sockets. We spent a lot of time tinkering with sockets to learn more about how they worked. The first version was just a simple shareable text editor, without any room access. This was our first roadblock. We spent a lot of time with the socket library to add users to rooms based on their box credentials. We managed to get the rooms working and made requests to the code check endpoint behind every box. Subsequently, we ran into an issue here due to Cross-Origin Resource access. Ultimately, we were able to get all the features to work and it was working as we expected on the localhost. However, we ran into a boatload of problems when attempting to deploy it. First, we had no clue on how to deploy a Flask app. We somehow got it to deploy on Heroku and was excited to see it work. Unfortunately, it only worked on some occasions. In addition to that, we also ran into an XHR Polling issue, and it was impossible to find the solution. After hours of debugging and searching, we were able to add some configurations to the Flask app and got everything to work.

Accomplishments that we are proud of

First of all, we are proud to make a working version of the app. It feels great to build something so helpful and useful for not only us but also for the TigerGraph community. When we began, we weren't sure how to even start. It seemed impossible to make a real-time editor like Google Docs, and we're proud of the fact that we were finally able to build something very similar to it. Moreover, we are excited to continue to work on the app and add more features to it.

What we learned

We learned a lot about network connections and sockets. More importantly, we learned how to share data in real-time between two devices. We also learned how to make secure requests. Learning these concepts sparked many other ideas, and we're excited to build on them. Apart from all the technical skills we learned, we learned to be patient and never give up. For instance, we almost decided to give up and just use the localhost version of our project for the Graphathon submission, but we didn't let our laziness conquer us as we were patient and kept debugging, eventually fixing all of the bugs.

What's next for GSQL Real-Time Editor

Currently, there are some bugs when multiple users edit the same text, we are planning to apply operational transformation and improve the debouncing mechanism to enhance the user experience. We also want to add an install query functionality and allow developers to run them. This would greatly increase the value of the app. In more general terms, we want to continue working on this app to fix any bugs and also keep adding features to make it a more useful application.

Github Repository: https://github.com/rohanshiva/sharable_gsql_editor

Built With

Share this project:

Updates