GSoC Week 6: Tuning & Tweaking

This post is part of my Google Summer of Code (GSoC) series to develop a "Pathway Presenter" for WikiPathways. You can find other posts in the series here.

Since the first product was finished last week, I spent this week adding some final touches to it, improving user experience (UX), and making sure everything is unit tested extremely thoroughly. I also managed to squeeze in a couple of extra features.

Improving the UX

There have been a few minor changes to the UI/UX but I'll just mention the more major changes here. The side panel has now been tweaked to offer a more intuitive UX. The user flow begins with a nice "empty state" card that instructs the user what to do. After this, the controls appear and the user can add an "action" or choose to cancel. Previously, there was simply a "tick" icon instead of the add/cancel buttons - this was found to be poorly understood by users. We've also changed the name of adding highlights/pans/zooms/hides from "manipulation" to "action".

improved side panel

You may now also change the order of the slides with a simple drag and drop action of the slide previews. This took a lot longer than I thought. I first tried using react-dnd to do this but it proved to be far more complex and powerful than for my needs. In the end, I chose the simpler react-sortable library which was rather quick to implement. You may also notice the new "blue" active slide indicator on the slide preview.

sortabel slide previews

Validation

Form validation is now in place using the brilliant formsy library. Validation is notoriously verbose in React and formsy alleviates some of this verbosity with a simple API. It is even very simple to add custom validators in a functional way :). In Angular you have to use custom validators and dependency injection to create custom validators. With formsy, it is as simple as passing in an object of validator functions:

<FormsyText  
  name="wpId"
  validationErrors={{
    beginsWithWP: 'The WikiPathways ID must begin with WP followed by a number'
  }}
  validations={{
    beginsWithWP: (values, value) => {
      const beginning = value.slice(0, 2);
      const end = value.slice(2);
      return beginning === 'WP' && !isNaN(end);
    }
  }}
/>

validators

Unit Testing

I have used Jest to unit test everything in Pathway Presenter. There are now 47 unit tests in total. That doesn't sound like too much but I have used snapshot testing to remove some of the need for unit testing UI components. With a simple snapshot you can make sure that components did not change without approval, meaning there is little need to check for class names and other DOM attributes. Soon, I will do automated end-to-end testing across browsers using Browser Stack. This will ensure that the UI remains consistent through all of WikiPathways' supported browsers and check for any regression errors.

Dev Treats

I spent this week (and the end of last week) setting up a few "dev treats". We now have automated builds, testing, and deployment to GitHub pages with Travis CI. I also set up ESLint as well as prettier with a pre-commit hook using husky. I was quite adverse to prettier before, I thought that developers should take the time and effort to write clean, well-formatted code. However, I have come to realise the power of prettier. For example, my IDE was by default using 4 spaces for indents, whereas the AirBnB style guide requires only 2 spaces. With prettier, I could change everything to correspond to the style guide in 2 seconds - a task that would have taken me at least an hour. It's great to know that whenever I commit, prettier will make sure that my code conforms to whatever style guide I choose.

That's it for this week! Please do try out the Pathway Presenter here and let me know your thoughts in the comments.

Jacob Windsor

Likes creative computer-based stuff. Web, Science, Typography, Graphics... Trying to combine too many interests into something coherent.

Maastricht, Netherlands