GSoC Week 5: Live

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.

We are live!

I am excited to say that the first iteration of the Pathway Presenter is live! Access it at pathwaypresenter.jcbwndsr.com. Please feel free to try it out and comment any bugs/feature requests you find here or email me. Note, that everything you create is stored locally (for now) so you can't access it on different machines.

Not having anything else on my mind has lead to a pretty productive week. I have now wrapped up my thesis, given my defence, and have officially graduated from the Maastricht Science Programme :) So, for most of the week the only thing on my mind has been this project, allowing me to concentrate on the problems at hand.

All of the features that we initially decided were needed for the MVP are implemented in the online version so I'm quite ahead of schedule and have time to perform other tasks. I'm very pleased with how the product looks (apart from the colours) and even happier that it's got this far in the first month of GSoC.

What's it built with?

Here's a quick technical outline of how the Pathway Presenter functions and the technologies it was built with.

The UI is built with React and the Material UI component library. These two tools have been largely responsible for the rapid development of this project. I have also used create-react-app to bootstrap everything, as well as Jest and Enzyme for unit testing. Finally Pvjs renders the pathway diagrams in the presentations and Pathway Presenter uses the "Manipulation API" to perform zooming, highlighting and hiding.

The presentations are stored in JSON format in LocalStorage for the purposes of the MVP. Eventually, there persistence wil be integrated into the WikiPathways database. The presentation data looks something like:

{
    "id": "45573092-6ba0-4dbe-9b42-f7a0ec6c16cd",
    "title": "The TCA Cycle",
    "wpId": "WP78",
    "version": "0",
    "authorName": "Jacob Windsor",
    "slides": [{
        "title": "S-malate -> oxaloacetate",
        "targets": [{
            "entityId": "fd8f9",
            "textContent": "MDH2",
            "hidden": false,
            "zoomed": true,
            "panned": true,
            "highlighted": true,
            "highlightedColor": "red"
        }, {
            "entityId": "c53f3",
            "textContent": "(S)-malate",
            "hidden": false,
            "zoomed": true,
            "panned": true,
            "highlighted": true,
            "highlightedColor": "green"
        }, {
            "entityId": "a39f2",
            "textContent": "oxaloacetate",
            "hidden": false,
            "zoomed": true,
            "panned": true,
            "highlighted": true,
            "highlightedColor": "yellow"
        }],
        "id": "d65ef64b-8ef7-4bd1-98f1-fe4b60e6e997"
    }, {
        "title": "",
        "targets": [{
            "entityId": "f21aa",
            "textContent": "Fatty Acid Synthesis",
            "hidden": true,
            "zoomed": false,
            "panned": false,
            "highlighted": false,
            "highlightedColor": null
        }, {
            "entityId": "e95eb",
            "textContent": "citrate",
            "hidden": true,
            "zoomed": false,
            "panned": false,
            "highlighted": false,
            "highlightedColor": null
        }, {
            "entityId": "b96da",
            "textContent": "D-threo-Isocitrate",
            "hidden": false,
            "zoomed": false,
            "panned": true,
            "highlighted": true,
            "highlightedColor": "green"
        }, {
            "entityId": "bdef5",
            "textContent": "ACO2",
            "hidden": false,
            "zoomed": false,
            "panned": true,
            "highlighted": true,
            "highlightedColor": "yellow"
        }],
        "id": "c0fd4987-cb44-4e53-9c12-af2ff140bd2e"
    }]
}

What's next?

The new version of Pvjs is still in beta and needs to be brought into production. There are a few regression errors that need to be fixed so it at least has the same functionality as the old version (currently on WikiPathways). This should be the next step from now on. After this, animation of the Manipulation API (zooming in particular) should be implemented into Pvjs and then the Pathway Presenter. We will also discuss other features for the Pathway Presenter such as the inclusion of text boxes on slides. Furthermore, we need a method to generate static images of the slides for the previews and also exporting them to other formats (PDF, JPEG, etc.).

Thanks for reading and, as always, please comment if you have any suggestions or just want to say hi!

Jacob Windsor

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

Maastricht, Netherlands