All articles

Building a SPARQL query editor in VueJS

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.

Prior to working on this project, I had little to no experience with RDF and SPARQL, and despite having worked with other Javascript frameworks before, using Vue JS was also a first for me. For the first couple of weeks, I spent time researching and learning the Vue JS framework and implementing a simple website simultaneously whilst also reading about the fundamentals of RDF and SPARQL. A couple of weeks into the internship, the other interns and I got the chance to have an Epimorphics staff member, Stuart, teach Linked Data training sessions with us once a week, after which I had a user interview with him. Stuart has had many experiences with SPARQL querying tools and Qonsole and from this interview, we evaluated which features were useful in the original Qonsole, what needed to be improved and features that he would like to see in the future. 

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 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

Overall, this summer has been fulfilling. In the three months, I had the chance to: use a new Javascript framework, that is, in hindsight, challenging but once you get the hang of it, intuitive to use and logical, learn about RDF and Linked Data, and most importantly, experience remote working full-time! Working from home was interesting and having to meet so many people all online made this summer slightly surreal. In the future, I hope to continue to work on this project, hopefully with the help of many others, and improve on it with new features such as including a graphical visualisation of the graph data or text suggestion so learning is made easy for new users.

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.