GSoC Week 1: Preparing, Learning, Coding

This week I began the Google Summer of Code (GSoC) project to develop a WikiPathways pathway presenter. My main mentor, Egon, has asked that I blog about my progress from week to week. So, this week begins a series of blog posts about my project that I'll publish every Friday.

Preparing

Before I could even begin coding, I needed a clear definition of the problem. Luckily, this was mostly defined in my proposal:

Pathway diagrams are often confusing and their meaning difficult to communicate to others. This can be solved by creating a tool to create dynamic & animated pathway presentations.

However, the problem was still not completely defined so some lengthy Skype calls with my mentors helped hash out the details. Following this, I needed to decide on the technologies to use, i.e. the React vs. Angular war. Since other developers for WikiPathways are more comfortable with React, I decided to go with that despite my prior experience with Angular. Other things to consider were: how to represent and store the presentation associated data, what was the MVP going to look like and how to integrate it into the WikiPathways website.

Learning

Once all of the above was clearly defined, I then began to learn about the technologies I was going to use and the best practices for using them. Of course, learning about React + Redux was the big one since I had only a small amount of experience with both of them. I'm extremely happy that I used Create React App to kickstart everything off since that lifted the pain of getting Webpack, a test runner, a dev server, etc. set up. I also needed to learn about the internal workings of WikiPathways so I could confirm that my ideas for data persistence were appropriate from the get-go. I really want to avoid heavy refactoring in the late stage of this project. So, I asked several WikiPathways team members about their mySQL database, the lucene indexing process, and the web service.

Coding

By Wednesday, it was time to start coding :) With Create React App helping me out, I've spun up a simple working prototype with fairly comprehensive unit testing in just three days! The GIF below shows a simple presentation that uses Pvjs to render and manipulate the diagram on each slide. By clicking the arrows at the bottom or using your keyboard you can flick through the slides. The beginning title slide is optional, as is the title on each individual slide.

The presentations are defined as simple objects that have properties to define what manipulations will happen on each slide. Below is the data that drives the GIF above.

[
    {
        id: '906e47f9-8a16-491c-80ac-0df2dd609260',
        title: 'TCA Cycle',
        authorName: 'Jacob Windsor',
        wpId: 78, // The WikiPathways ID for the pathway
        version: 0,
        description: 'Presentation for the TCA cycle',
        slides: [
            {
                isTitleSlide: true
            },
            {
                id: 'fd68b61c-136c-4e63-b5f6-f020c894c738',
                title: 'This is a title',
                notes: '<p>This can be a normal string.</p><p>Alternatively we can do <strong>HTML</strong></p>',
                targets: [
                    {
                        entityId: 'd9ef6',
                        hidden: false,
                        zoomed: false,
                        panned: true,
                        highlighted: true,
                        highlightedColor: 'red',
                        animateIn: true,
                        animateOut: true,
                        animateInDuration: 200,
                        animateOutDuration: 200,
                    }
                ]
            },
            {
                id: 'fd68b61c-136c-4e63-b5f6-f020c894c7d38',
                targets: [
                    {
                        entityId: 'd9ef6',
                        // ...
                    },
                    {
                        entityId: 'b5f5f',
                        // ...
                    },
                    {
                        entityId: 'a39f2',
                        // ...
                    }
                ]
            }
        ]
    }
]

Next steps

  • Unit test everything!!!! The pathway presenter itself is pretty well unit tested but Pvjs is not :(
  • Animating the manipulations. Fade in/out and zooming/panning transitions are really required so viewers can guage the context of the part they're looking at. Plus it just looks pretty...
  • Editor interface

Track this project on GitHub.

Jacob Windsor

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

Maastricht, Netherlands