unipept / unipept-visualizations

Visualisations used by Unipept, packaged for easy reuse in other projects.

Unipept

The Unipept web application supports biodiversity and functional analysis of large and complex metaproteome samples and the analysis of peptidomes.

The 4.0 release of Unipept brings functional analysis to the tool.

An API and command line tool are available for integration in other programs.

Contributing

Found a bug or have an idea for an awesome new feature? File an issue using the github issue tracker or drop us a line at [email protected].

If you're willing to get your hands dirty, you might of course also send us a pull request!

Installation

This application is deployed and fully functional at unipept.ugent.be. If for some reason you wish to run your own instance, you can do so by deploying this rails application and setting up a database. This isn't straightforward and you'll probably want some help, so contact us at [email protected] before you attempt an installation.

Check our Wiki-pages for a variety of different installation guides.

Who made this app?

Unipept is a research project of the computational biology group at Ghent University. If you use this application, please cite:

• Gurdeep Singh et al. (2019) J. Proteome Res. doi:10.1021/acs.jproteome.8b00716
• Mesuere et al. (2018) J. Proteomics doi:10.1016/j.jprot.2017.05.022
• Mesuere et al. (2016) Proteomics doi:10.1002/pmic.201600023
• Mesuere et al. (2016) Bioinformatics doi:10.1093/bioinformatics/btw039
• Mesuere et al. (2015) Proteomics doi:10.1002/pmic.201400361
• Mesuere et al. (2012) J. Proteome Res. doi:10.1021/pr300576s

Current team:

• Bart Mesuere (@bmesuere): Postdoc and lead developer
• Pieter Verschaffelt (@pverscha): PhD student
• Tibo Vande Moortele (@tibvdm): PhD student
• Peter Dawyndt (@pdawyndt): Group leader and PhD supervisor

Other contributions from:

• Felix Van der Jeugt (@ninewise): Master's student 2014 - 2016 and PhD student 2016 - 2022
• Robbert Gurdeep Singh (@beardhatcode): Developer 2017-2018
• Tom Naessens (@silox): Master's student 2014-2015
• Toon Willems (@nudded): Master's student 2013-2014
• Ewan Higgs (@ehiggs): Ghent University HPC team
• Peter Vandamme: PhD co-supervisor of Bart
• Bart Devreese: PhD co-supervisor of Bart

For code contributions, the contributors graph is the place to be.

unipept-visualizations's Issues

Add legend to heatmap visualization

There's no legend available for the heatmap visualization. It would be nice if we could add the option to enable such a legend.

performance bottleneck caused by getComputedTextLength

If there are a lot of matches in a sunburst, getComputedTextLength gets called a lot. Each call forces a re-layout. But this is not necessary because the pie pieces are too small to even see the name.

I have taken a look at the code and i do not immediately see how to fix this. The function is used to precompute all textlengths at first draw.

A heuristic might help (First printing all of [a-zA-Z0-9 -]) and computing only their lengths. To estimate the length of a new word we could just add the values form the map that correspond to the characters in the string.

Original issue by @beardhatcode on Wed Apr 11 2018 at 15:31.

Trimming node lables

There is no option to trim node labels. This causes some overlap issues for long EC and GO names.

example:

In the previous treeview I added the following piece of code to trim the nodes:

            nodeEnter.append("text")
                .attr("x", function (d) {
                    return isLeaf(d) ? -10 : 10;
                })
                .attr("dy", ".35em")
                .attr("text-anchor", function (d) {
                    return isLeaf(d) ? "end" : "start";
                })
                .text(function (d) {
                    return d.name.length > 33 && (d._children || d.children) ? d.name.substring(0,30).trim()+"..." 
: d.name;
                })
                .style("font", "10px sans-serif")
                .style("fill-opacity", 1e-6);

Original issue by calmalak on Mon Jun 27 2016 at 17:34.
Closed by @bmesuere on Mon Jun 27 2016 at 17:57.

migrated issue

migrated issue

Integrate the heatmap visualisation

Heatmap code @ https://github.com/unipept/unipept-heatmap.

The following subtasks need to be completed:

• Merge with unrelated histories
• Integrate heatmap code into the source structure and use tooltips from unitpept-visualisations
• Clean up the code if necessary
• Add and missing documentation
• Add any missing tests

Rename `colorProvider` setting to `nodeFillColor`

There are currently two different option settings for determining the color of a node: nodeFillColor and colorProvider. The colorProvider should be renamed to nodeFillColor and nodeFillColor should be removed in order to avoid confusing our users.

Note that we should also update the documentation and Observable notebook accordingly.

Test NCBI taxonomy in treeview

Original issue by @silox on Tue Oct 28 2014 at 15:00.
Closed by @silox on Tue May 12 2015 at 21:48.

Changing the ColorPalette does not always seem to work

A custom ColorPalette can be set as one of the options to the Sunburst visualization. However, changing this setting does not seem to have effect

Don't fire the tooltip when dragging

Original issue by @silox on Thu Nov 13 2014 at 20:32.

ColorProvider function in TreeView visualization is only called for direct children of root

Users can set a custom colorprovider function in the settings of the TreeView object. The settings describe that this function is called for every node in the tree passed to the TreeView. This is, however, not the case. It is only called for the direct children of the root node.

Tooltip positioning is wrong for fullscreen visualisations

The positioning of the visualisation tooltip in fullscreen is incorrect.

Add option to give selector for tooltip

Now a new tooltip is generated for each treeview, as lot of useless elements are created.

Also, an the generated tooltips do not require an ID, if they are created they can just be referenced to trough a variable

Original issue by @beardhatcode on Sat Jul 07 2018 at 12:31.

Recalculating the treemap results in the treemap being added multiple times

Fix vertical spacing between nodes

Original issue by @silox on Tue Oct 21 2014 at 15:01.
Closed by @silox on Tue May 12 2015 at 21:48.

npm release contains too many files

The npm package probably also contains the example files since npm lists its size as 34.8MB.

migrated issue

problemen met vergroten en initialiseren van van treemap en treeview

Bij het initialiseren van de treemap en treeview ontstaat er een error als ik eerst de treeview dan treemap initialiseer. Dit gebeurd alleen bij de taxa data.

En als ik ze wel in de goede volgorde initialiseer is er een probleem met het vergroten van de treemap waardoor de overlap van de verschillende layers niet goed loopt.

Original issue by calmalak on Wed Oct 05 2016 at 17:03.

Sunburst - make the breadcrumbs optional

Original issue by @bmesuere on Wed Apr 12 2017 at 11:59.

Add configuration option for clustering algorithm

The heatmap visualization performs some kind of clustering on the input data before plotting the data. This algorithm is currently the UPGMA-algorithm, but can actually easily be changed to something else (that adheres to our interface specification). The clustering algorithm that should be used by the visualization should be configurable through the HeatmapSettings object.

Use sans-serif font

Add option to add style to the main svg or make the SVG tag set font-family: sans-serif

https://github.ugent.be/unipept/unipept/pull/623#issuecomment-77880

Original issue by @beardhatcode on Tue Jun 12 2018 at 17:20.
Closed by @bmesuere on Wed Jun 13 2018 at 14:34.

some styles are leaking

We apply a bit of css to style the tooltips, but the selectors might not be strict enough. For example, the font of the hyperlinks on observable changes after calling the treeview.

Aggregating and creating heirachy of pept2lca Json to enable visualisation

I have created the json from pept2lca using the API and would like to visualize it. is there any help available to aggregate and create hierarchy from the json output obtained to the one required for treemap view visualization on D3?
regards

Treeview - convert to class

Original issue by @bmesuere on Wed Apr 12 2017 at 11:59.

Add configuration option for reordering algorithm

We currently use the MOLO reodering algorithm after clustering took place on the heatmap visualization. There are, however, a lot of other different reordering algorithms that exist. We should thus add an extra configuration option to the HeatmapSettings object that can be used to choose which reordering algorithm should be used by the visualization itself.

Reset functionality is missing

The previous version of the unipept-visualizations package had some kind of reset functionality that is missing from the most recent version. The sunburst still has a reset-function, but the treemap and treevisualization lack this functionality (which should be added again).

Given a list of taxon IDs, draw a tree

• basis
• remove nodes with count == 0

Original issue by @silox on Wed Nov 26 2014 at 17:11.
Closed by @silox on Tue May 12 2015 at 21:48.

Set up build and test infrastructure

group small branches in 'other' group

From Peter:

• automatically bundle "other" group (which can be expanded upon request)
  • show at most x children and bundle remaining children in "other",
  • only show children that have a certain abundance, and bundle remaining children in "other"

problems:

• Clicking on other would reveal the real nodes and not show its children. This might be confusing
• The �other� node should stand out visually from normal nodes
• Children are now sorted alphabetically. Expanding an other node might insert new children elsewhere. Sorting by size might fix this.
• Think out an algorithm

Original issue by @bmesuere on Fri Aug 08 2014 at 18:43.

element id is overwritten

When creating a visualisation, an id is assigned to the given element. If the element already had an id, this is overwritten.

Do we still need an id? If so, don't overwrite it if it already has one.

Heatmap crash when no width and height is specified icm with dendrogramEnabled

If no specific values are passed to the width and height properties of the heatmap, and the dendrogramEnabled property is set to true, the heatmap crashes.

Add configuration option for distance metric

The clustering algorithm that's being used by the heatmap visualization needs to compute the distance between two different elements. We should add a configuration option to the HeatmapSettings object that makes it possible to change the distance metric formula that's being used.

handle data without id

If the source data has no id's the visualisation fails. This should be handled in the Node class.

Original issue by @bmesuere on Sat Jul 02 2016 at 14:20.

Implement release mechanism as GitHub action

We should implement a new GitHub action that automatically creates a new release of the visualization package on the GitHub release page (and NPM) whenever a new push to master occurs (and the version number of the package is increased). This way, we can easily track all the different releases that exist for this package and which changes were introduced with each new release of the package.

Implement Treeview (see Unipept Web Components)

Treeview: add slice

Add slice to indicate the percentage of taxons on a node

Original issue by @silox on Wed Nov 26 2014 at 17:11.
Closed by @bmesuere on Wed Oct 28 2015 at 14:54.

`enableAutoExpand` setting breaks the visualization

Setting the enableAutoExpand setting breaks the visualization (can be seen in the following screenshot):

Implement new sample diversity visualization

It would be a very nice addition for our tool to provide support for a new visualization that can be used for visualising the diversity in a sample.

A good example of this visualization can be found in the CAMPI manuscript:

This visualisation shows per sample (or thus per bar) the distribution of how many peptides are annotated with a specific taxon. I propose to expand this Unipept visualization library with the capability of visualising very generic data that supports this. The input could be an object in the following format:

{
    bars: [
        {
             name: "sample",
             items: [],
             counts: []
        }
    ]
}

Port sunburst visualisation to typescript

• Remove jQuery dependency
• Display test data in a d3.js v5 sunburst
• Port colouring
• Port breadcrumbs
• Port tooltips
• Port node labels
• Clean up
• Add remaining documentation
• Add remaining tests
• Add examples

Treemap - convert to class

Original issue by @bmesuere on Wed Apr 12 2017 at 11:59.