DataView Page

[Kohze]

In this issue we list all functionalities and ideas regarding the "DataView" page, which displays among others the D3.js plot. Suggestions or screenshots of comparable websites and other ideas are welcome.

Plot Related:

• [x] D3.js native plot integrated
• [x] Toggle unknowns / text annoation
• [x] Add profile plot
• [x] Add D3.js point callback functionality (to make points clickable)
• [x] Add/delete organelle coloring
• [x] D3.js gradient coloring based on table value
• [x] D3.js gradient scaling based on table value
• [x] D3.js gradient transparency based on table value
• [x] Toggle one/multiple plots

Table Related

• [x] Table integrated
• [x] Click on table entry highlights point
• [x] Sort table on specific column
• [x] Make column sizing flexible
• [ ] Add delete columns

API related:

• [ x] Add uniprot API (or other)

Other:

• [ x] Add metadata display
• [x] Add point annotation
• [x] Add save functionality

[lgatto]

It would also be useful to be able to visualise several data sets side by side. I could think of a way to select (up to 3 or 4) data sets in the Dataset page by a long click on one data set, which then activates the possibility to select more (similar to google photos), or with a shift + click. That would then start the DataView page with 2, 3, 4 PCA plots (t-SNE could also be supported, but see below; profiles plot too, which would be trivial) and the selection of a protein on one plot triggers the selection of that same protein on the other plots.

In the background, this however requires to make sure that

1. the intersection between feature names is not empty (which would be the case if the data used different protein identifiers, or came from different species)
2. keep only proteins that are present in all data sets
3. remap data sets in the same space, to make to plots comparable. This is available in pRoloc:::remap for PCA. Such a functionality is not available in Rtsne, and it's unclear if it will become available in the near future.

[Kohze]

We should probably then add a multiView class that produces a page specificly optimized for the comparison of multiple datasets.

[lgatto]

Next time we discuss, let's build some mock ups (with pen and paper) to make these ideas more concrete.

[Kohze]

Some first tries with the Profile plot - the pictures below show a d3.js native approach (other than the react native d3 plot we have with the scatter plot). The advantage is that we have there a filtering functionality on each axis ( https://bl.ocks.org/jasondavies/1341281 ). In case we dont need the filtering we should go for a react native approach as the performance is better (and only updates a point when it really changes).

In filter mode: (filtered by the two light grey boxes)