This summer, for three months, I had the chance to work for Epimorphics as an Intern on an internal project to rewrite Qonsole in Vue JS. Qonsole is a project that my mentor, Ian, worked on seven years ago, as a simple console for running SPARQL queries on the web. The goal of this project was to move Qonsole away from JQuery, what it was originally written in and which a lot of JS applications have moved away from, to a Vue JS component that can be imported by simply referencing in package.json and added directly into the code.
With this, we also wanted to review original features, add new functionalities, ensure they could be easily tested, and have good user documentation. My approach to this project is a user experience based one with the basis of creating an intuitive and educational application that will help newcomers get started with RDF and SPARQL.
The first thing I did during the implementation stage was to structure the Vue app into components according to their functionality to improve code reusability and testability. There are two main components, the RDF editor and the SPARQL editor. With the RDF editor, the user can write
.ttl code or alternatively upload local files into the CodeMirror text editor. Then loading the turtle code into an RDF store, courtesy of rdfstore-js. The user can then use the SPARQL editor on the same page to query the stored graph. For the SPARQL editor, the user can edit SPARQL code and use it to query an SPARQL endpoint on the web. As the application got bigger and more cluttered, I decided to use Vuex store to manage the state of the web app and to create a centralised store for all the components, this ensures that the state can be mutated in a predictable way. Since there are multiple components, I modularised the Vuex store to make it more manageable but also in the hopes that in the future, the components can be used independently for various projects.
The biggest improvements of the new Qonsole compared to the old one is the prefix editor and the side-by-side Turtle and SPARQL editors. The prefix editor is no longer a separate tab by itself, but on top of the other editors so new users will not have to switch between the different views, and they can see immediately where and how the code is added. One thing that users of Qonsole struggled with was adding a prefix that is not given and having to access
prefix.cc to find the URL of a prefix. With the new Qonsole, a search bar is provided to allow users to search for prefix URLs given a name against data provided by
Many thanks to Ian, Lizzie and Stuart for their help and support throughout this project. I wish you and Epimorphics all the best and hope to meet you, in person, at some point in the near future.