GSoC Done! Pathway Presenter Final Overview

This is the final part in my GSoC series to develop a Pathway Presenter tool.

What is GSoC?

GSoC (or Google Summer of Code) is a global program where students take part in developing open source software for a 3-month project. You can find more about it on the website. My project is part of the National Resource for Network Biology (NRNB), and within that, I was working with the WikiPathways team.

The Project

The idea of my project is to develop a tool for scientists to be able to create and share presentations of the pathways on WikiPathways. In much the same way as you would create a presentation in Powerpoint or Google Slides, a scientist can create a presentation of a biological pathway diagram. In each slide, certain aspects of the pathway are highlighted, panned to, zoomed upon, or hidden. This allows the scientists to present pathways to an audience in an interactive and intuitive manner, allowing the audience to better understand what is being presented.

You can read the full proposal for the project on Figshare.

Current stage

The Pathway Presenter is currently in a pre-integration stage. Crucially, this means that it has not been integrated into WikiPathways yet. I will talk more about this later on but it is worth mentioning up front before you read on.


TLDR: This part is all about the technical details of the Pathway Presenter. If you don't care about that, and just want to see the final product, then skip ahead.

First off, all code is at this Github repo.

This project is highly related to a previous project I did for my bachelor thesis, so I could use a lot of the tools I developed there. The Pathway Presenter needs facilities to programmatically highlight, zoom on, pan to, and hide different diagram parts. I did a lot of this already in my thesis by extending the React version of Pvjs (the JavaScript library that renders diagrams in WikiPathways). All of the documentation is available on npm here but below is a quick example of how you'd use it with React (the way I use it in Pathway Presenter). Note, that you can also use Pvjs without React via a web component.

import React, { Component } from 'react';  
import ReactDom from 'react-dom';  
import Pvjs from '@wikipathways/pvjs';

const container = document.querySelector('#root');

     highlightedEntities={ [{ entityId: 'd8bae', color: 'red' }] }
     panCoordinates={ { x: 0.5, y: 0.2 } }
     hiddenEntities={ ['f86ae'] }

The props (React word for attributes... kind of...) passed into the Pvjs component form the basis of what is need for presentations. The user interface (UI) to control the input to these props is what was needed to be developed for this project, as well as representing and storing the presentation data, and the interface for presenting to an audience.

Presentation Data

Presentations are represented as simple JSON objects that are fairly self explanatory:

    "id": "063e94e6-91c9-4d87-bbd1-0b3d58abeb62",
    "title": "The TCA Cycle",
    "wpId": "WP78",
    "version": 0,
    "authorName": "Fill Bot 2000",
    "slides": [{
        "id": "0cb2cf9a-617e-422a-bd84-7ff2eabe644a",
        "targets": [{
            "entityId": "f8db5",
            "fullEntity": {
            "hidden": false,
            "highlighted": true,
            "highlightedColor": "red"
        }, {
            "entityId": "d9ef6",
        "panCoordinates": {
            "x": -0.15189576413132508,
            "y": -0.44696125601067904
        "zoomLevel": 3.7320605284974957,
        "title": ""
    }, {
        "id": "217143f6-1a8b-4a3e-be39-dae265505870",   

As a summary of each property:

  • id: each presentation has a unique uuid
  • title: A title for the whole presentation
  • wpId: the WikiPathways ID for the pathway used in the presentation
  • version: The WikiPathways version number for the pathway used in the presentation
  • authorName: Author who created the presentation. In future, this should be replaced by the id of the WikiPathways user who created the presentation.
  • slides: Array of slide objects in the presentation
    • id: Each slide has a unique uuid
    • targets: Array of entities in the diagram to target
      • entityId: The ID for the target (given by Pvjs)
      • fullEntity: All of the data for the entity given by Pvjs
      • hidden: Is the entity hidden?
      • highlighted: Is the entity highlighted?
      • highlightedColor: What color is the entity highlighted with?
    • panCoordinates: x and y coordinates that are passed to the Pvjs panCoordinates prop
    • zoomLevel: Passed to the Pvjs zoomLevel prop
    • title: The title for the slide.

Presentation storage

For the purposes of the GSoC project, all data for the presentations is stored in LocalStorage. This means that presentations cannot be shared across different devices and so, they should be persisted in the WikiPathways mySQL database as soon as possible.

The UI

The UI is built upon React, just like Pvjs. Furthermore, it uses the Material UI component library to give a nice Material Design feel. Other than that, the only thing I can say about this here is that there are two major components: the Editor and the Viewer. The former provides the interface for creating and editing pathway presentations, and the latter provides the interface for presenting them to an audience.

If you'd like to work on the Pathway Presenter then there is a developer guide in the README of the repo. I have tried to make this as comprehensive as possible but if you think there is anything missing or have a question then don't hesitate to contact me via email.

The End Product

Start form

Start form

This form is shown to the user upon entry to the application. It allows the user to select (from an autocomplete search box) the pathway presentations they have already created or create a new presentation altogether. One nice feature is the "show me an example" button that will fill in the form with example data and hit submit so the user can see a demonstration of what the form does (thanks Anders).

One thing to note is that this form will probably not exist when the Pathway Presenter is integrated into WikiPathways. Instead of entering this information users would navigate to the pathway entry page and click something like "create a presentation for this pathway", which would then lead them to the editor interface with that pathway already selected.

Editor Interface

Editor interface

This interface is shown once the user has submitted information through the start form. The main content area is the slide preview which is prefilled with the pathway. Most of the controls are fairly self explanatory (add slide button, settings, present, save, etc.) so I'll only go into the more unique ones here.

Highlighting and Hiding

When the user clicks on a node in the diagram they are shown the controls to highlight and hide that node.

Highlighting and hiding

When the "done" button is clicked, a chip is added below the controls to indicate that there is an action (action is the generic word for highlighting and hiding) added to that node. By clicking on the chip, the user can change the highlighting and hiding of that node again. Alternatively, they can delete the action altogether by clicking the cross in the chip.

Panning and Zooming

Simply by positioning the diagram in the desired place and hitting the "lock" button in the lower left corner of the slide preview, the user can position the diagram how they'd like it to show in their slide.

Panning and zooming


Titles are added across the whole slide.


Viewer Interface

When the user hits the "present" button, a new tab opens which shows the presentation to give to an audience. From this interface, the user can go full-screen and flick through the slides using the arrows in the lower right corner or by using their keyboard arrows.

Viewer interface

The black bars you see is due to the fixed 16:9 ratio of the presentation. Furthermore, this is the interface that will be shareable after WikiPathways integration. Each presentation will have a unique public URL that links to the viewer interface. This URL can be used by anyone to view and present the presentation but they cannot edit it without having the correct privileges (i.e. being the creator).

Next Steps

Pre-integration, closed beta, public beta

Currently, the Pathway Presenter is in a pre-integration stage and it will eventually move through two betas before being in production. Pre-integration means that it is not integrated into WikiPathways and is being tested by an internal team. The closed and public betas will occur when the Pathway Presenter is integrated into WikiPathways. The closed beta will be tested by an invite only group of people and the open beta is basically the same as production but with a beta notice so that users know they may experience some bugs.

For the beta stages, certain things need to be carried out:

  • Integrate into WikiPathways
  • Persist data into the WikiPathways mySQL database
  • Integrate the WikiPathways user profiles
  • Give the presentations public, shareable URLs


Thank-you to Egon Willighagen, Alex Pico, and Anders Riutta for mentoring me on this project. Our Monday meetings were extremely useful! I have learnt a lot during the past three months and have really enjoyed working with WikiPathways. I'm excited to see what comes of the Pathway Presenter and hope I can continue contributing to the WikiPathways community for a great deal of time to come.


Jacob Windsor

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

Maastricht, Netherlands