Collaborative System for Creating/Sharing Biological Icons

[ariutta]

Background

Biological pathways provide intuitive diagrams of the interactions underlying biological processes. For example, the SIDS Susceptibility Pathways shows interactions between metabolites, genes and proteins, such as DDC catalyzing the conversion of L-DOPA to Dopamine (look for the items highlighted in yellow on the lower right). The site WikiPathways is an open, collaborative platform dedicated to drawing and sharing biological pathways. These pathways often use icons to represent items like mitochondria or cardiac myocytes (heart muscle cells). The WikiPathways drawing editor has a limited set of icons built in, but it does not allow pathway authors to create and re-use custom icons. For example, the cardiac myocyte icon is repeated in the SIDS Susceptibility Pathways for mouse and for human, but the only way to re-use the icon is to manually redraw or copy/paste it. Improvements to the icon in one pathway do not appear in the other.

Goal

Build a biological icon library that allows pathway authors to create icons, share them with other WikiPathways’ users and reuse them across pathways. It could work like GitHub for icons, allowing users to create, fork and merge their work, with the best icons rising to the top via a rating system. The library will work as a plugin for the current WikiPathways viewer/editor Pvjs, allowing pathway authors to draw or import new icons. It may have a backend component to store the icons and a front-end component to allow WikiPathways users to view and search for icons. See my comment below for more details.

Links

• This SVG drawing tool has a large number of icons. It might provide some ideas.
• We're currently using this library for our shape generation.
• Another shape library of interest.

Difficulty Level: 3

Prior experience with WikiPathways required. Strong JavaScript skills required, because this project will likely require some refactoring of the existing code for Pvjs. Some backend experience (PHP, Node.js or Python) may be required to create a backend for saving the icons. SVG or Canvas experience a plus.

Technology and Skills

• WikiPathways
• JavaScript
• PHP, Node.js or Python
• SVG or Canvas

Potential Mentors

• Anders Riutta
• Alex Pico
• Kristina Hanspers

Contact

Anders Riutta, Alex Pico, Kristina Hanspers

[maxkfranz]

It would be good to have icon font generation using fontcustom. Icon font generation means the icons can be used well on the web. For example, there is a set of model organism icons from the GeneMANIA project using fontcustom: https://github.com/GeneMANIA/bio-icons

You may want to take some inspiration from the Noun Project, as this project looks like a bio-centric take on it. Though having an embedded editor is great, I suspect people will also want SVG upload (because they use Inkscape, Illustrator, etc.).

[ariutta]

Great suggestions -- thanks @maxkfranz!

One note: some of the icons are multi-colored (e.g., the cardiomyocytes in the SIDS Susceptibility Pathways linked above). The font icons are single colored only, right?

[maxkfranz]

Icon fonts are usually single coloured so you can colour each instance as desired. Fonts definitely also support explicit colourings (with multiple colours), like the emojis used on iOS and Mac. Worst case, you can always use a large SVG sheet for good compatibility across devices/OSes/etc.

[ariutta]

Project Specifications: More Details

This project has some "must haves" and some "nice to haves". The "must haves" are requirements, but the "nice to haves" are not. It is expected that only a few of the "nice to haves" might fit into the scope of a single summer project.

Must have: enable pathway authors to reuse existing external images. As mentioned by @maxkfranz, there is a wealth of existing openly-licensed material that pathway authors would like to reuse. A few examples:

• GeneMANIA project's model organism icons
• Noun Project
• Google Image search: mitochondria ext:svg site:commons.wikimedia.org
• Metabolite icons as described for this project

Must have: the solution must be compatible with both of our viewer/editors: Pvjs (JavaScript) and PathVisio (Java). The icons must be recognized as icons in Pvjs, even after a round-trip of editing in Pvjs, then editing in PathVisio, then again in Pvjs. Note that PathVisio and GPML (the data format used by PathVisio) do not currently support embedding of images, although this is a proposed feature that other developers may add in the future. I see two main options (but you are free to propose alternatives):

1. Add the SVG source of the icon to the GPML as a base64-encoded string in a Comment sub-element of the GPML element that contains the icon (example). In Pvjs, both the element (the ellipse in the example) and its icon must be displayed. In PathVisio, it would be acceptable for just the element, not the icon, to be displayed (in the example, that would be just an empty ellipse). In the future, other developers could add icon support to PathVisio.
2. Create a converter to translate between SVG images and the shape primitives of GPML (lines, arcs, circles, rectangles, etc.). Key issue for this option: how would round-trip editing (Pvjs -> PathVisio -> Pvjs) work?

Must have: the size of an existing SVG image may not match the size of the GPML element that will contain the icon. At a minimum, this project must support some basic functionality to make the icon fit its containing element.

Nice to have: allow authors to crop the icon's SVG source to only show part of it.

Nice to have: pathway authors may sometimes want to resize an icon while maintaining constant values for selected dimensions of sub-parts, e.g., an icon for a double-walled cell compartment might look like two concentric circles, and the radius of the outer circle needs to be able to be changed without changing the thickness of the double-wall. That means the radius of the inner circle would equal the radius of the outer circle minus the constant double-wall thickness:

Radius.innercircle = Radius.outercircle - Thickness.doublewall

Note that handling this feature is not expected as part of the GSoC project, but it's included here to document a use case that may need to be addressed by other developers in the future.

Must have: allow authors to upload SVG images for use as icons.

Nice to have: allow authors to search for existing SVG images online to import for use as icons. This would require developing a search interface for a curated set of image sources like the ones listed above. The interface could allow authors to tag and rate specific images to help other authors find relevant images.

Nice to have: allow pathway authors to draw new icons. As a pathway author is creating a pathway diagram, the author may want to create new icons like the cardiac myocyte referenced above. It would be helpful to allow these authors to enter an "icon creation mode" using a tool like SVG-Edit to give the ability to create attractive new icons.

In the "icon creation mode," a pathway author might want to reuse icons created by other pathway authors, possibly using a model similar to Github, where users can fork existing projects and make pull requests with suggested improvements.

Nice to have: some means of handling changes to the icons. We could set up a dependency management system like NPM so that each icon would have a name and a version. Then one user could create an icon, and another user could add that icon to a specific pathway, which would mark that icon as a versioned dependency for that pathway. If the icon creator later publishes an improvement to the icon, it should be possible for the pathway creator (or any other authorized user) to optionally update the dependency to get the latest version of the icon to display in the pathway.

[ariutta]

Applicants, you may want to review the other Pvjs ideas. Do you see any overlap or a better separation of concerns in terms of implementing the desired functionality? If so, don't feel constrained to a rigid interpretation of this idea. Feel free to use composition (putting together parts from any of the ideas) when drafting your proposal, as long as you keep the scope realistic for a summer project.