This is a story of collaboration, both within the VEuPathDB organization and to some degree outside of it. In the end I think we collectively produced something both functional and fairly pretty. I even got to learn something new!
Background
This project was for a website called OrthoMCL.org, which is a database of what we call ‘ortho groups’, which are essentially a list or collection of related proteins. Each ortho group has a record page where you can learn about the proteins in it. The objective was to replace the following network diagram from ortho group record pages, which we called the ‘Cluster Graph’ with something more functional and usable.
It was suggested that the something we replace the cluster graph with should be a tree view of the relatedness of the proteins in an ortho group. The difficulty with that was that we struggled to find a light-weight javascript library for constructing trees that had the features we wanted. Eventually someone on the team found the CDC’s TidyTree which wasn’t feature complete but was a good start at a light-weight option built with d3.
Development
My role became to fork TidyTree and add features to it that we needed. Those features included allowing the leaves of the tree to be spaced equidistant to each other and to be able to arbitrarily color leaves and their associated branches. I got to learn some d3 and made several Pull Requests to the CDC. Most of those Pull Requests were eventually merged, though occasionally with some modifications from the maintainer.
I was also responsible for developing a simple Java REST service that could, given an ortho group ID, retrieve the appropriate newick file and stream its contents to the client. Additionally, I produced the mock-ups and led conversation where specifications and minimum requirements were determined. It was decided this tree would be aligned with a table that would provide more information for the tree leaves/ proteins.
Result
From the components and specifications I had provided, another team member took my TidyTree fork and Java service and produced what we called a tree-table component. They then worked it into the existing ortho group record pages, finally replacing the cluster graph. A screenshot of an example ortho group can be seen below.
The TidyTree component can be seen along the left edge of the table.
