intermine/bluegenes-protein-visualizer

BlueGenes Protein Visualizer

BlueGenes Protein Visualizer is a tool made for BlueGenes following BlueGenes Tool API. It can help users (biologists) to visualize protein structures in different types of viewer in 3D. Users can select the PDB id they want to visualize and the visualizer fetches PDBs from the rcsb org. It can also be used as standalone tool to integrate in any web application.

Licence

MIT

To set up locally for development

1. Clone the repo
2. cd bluegenes-protein-visualizer and then npm install to install dependencies.

All of the editable source files for css and js are in src. To bundle for prod, run the following commands:

CSS

Assuming less is installed globally:

npm run less

JS

Assuming webpack is installed globally:

Single build:

npm run build

Applied Coding practices / ESLint Rules:

• indent: use tab (2 space tab) instead of spaces to not get an error.
• linebreak-style: use \n for a newline, if you're on windows, configure it in your editor settings.
• quotes: use single quote instead of double quote.
• semi: use semi colon at end of each statement / expression / function definition.
• comma-dangle: do not use dangling commas i.e. extra comma at the end of object values, function args, etc.). More about this here.
• More pre-configured rules from eslint:recommended you must follow to not get errors here.

Developing:

To serve your code at localhost:3456 and rebuild it every time it changes, run:

npm run dev

bluegenes-protein-visualizer's Issues

Consider using ngl instead of pv

I don't remember if we chose pv over ngl for some specific reason, or we didn't know about ngl.

https://github.com/arose/ngl

NGL seems to be actively developed as opposed to abandoned (which pv is) and is used by RCSB. It uses the standard coloring scheme for secondary structure, and also shows a tooltip when hovering over the strands. I subjectively think the models look prettier as well. [=

If it's not too much work, we might swap out pv for ngl.

Here's a comparison between pv and ngl, respectively, using secondary structure coloring of 5VPZ.

Handle null response to PdbQuery

Sometimes searching for the primaryAccession we receive from intermine doesn't return any results from RCSB's PDB, and the JVA will crash due to passing null data to pv. (The JVA will suddenly disappear while showing the loading indicators.)

Can we show a suitable message when PDB doesn't return any results?
Suggestion: No results found for X in RCSB Protein Data Bank

One protein ID without results you can test with is 20840312.

Change protein selector to a dropdown

Sometimes, when the gene has a lot of proteins, the height of the protein visualizer is too big in BlueGenes. It would be better to have a dropdown to select the protein and a text over it saying something like "Choose a protein to be visualized".

Add description about the protein and link to RCSB page

As discussed, you can get the protein information given a PDB ID from https://www.rcsb.org/pdb/json/describePDB?structureId=1d8d. The link would be just https://www.rcsb.org/structure/1D8D

Make React components usable if installed via NPM

Currently, the react components are not usable if we install the npm package for the tool. This is because JSX is compiled (only under src) using webpack during the build process which is fine so we need to export the "built" react component from our package.

It probably requires to re-configure some webpack configuration. This might be a useful link.

Set default viewer mode correctly

The view defaults to cartoon although the "Select Viewer Mode" dropdown is by default spline. This is confusing; we should have the dropdown show the actual default view cartoon.

Change visualization depending whether it is a Gene or a Protein page

It would be nice to check in the tool if the current page is a Gene or a Protein page, and do the following:

• If it's a Gene page, just do the same thing that's currently doing.
• If it's a Protein page, just show the protein structure of the protein.

For some genes it freezes in "fetching associated PDB ids"

For some genes, the protein visualizer keeps "Fetching associated PDB ids", example: http://bluegenes.apps.intermine.org/#/reportpage/humanmine/Gene/6087400

Explain what the colors mean

Display a link (or legend) explaining what the different colors in the viewer signify.

We would probably have to dig into bio-pv to find this information.
https://pv.readthedocs.io/en/v1.8.1/

Support more color operations

Similar to how we let the user select viewer mode, we should also give the user a dropdown to select color operations.

https://pv.readthedocs.io/en/v1.8.1/coloring.html#available-color-operations

We can start by supporting two color operations:

• uniform (which is default now)
• by secondary structure

According to the documentation I linked above, you can change to by secondary structure by calling pv.color.bySS(), and change back to uniform with pv.color.uniform().

When we have a color legend (#11) we will need to also update the legend based on the currently active color operation. For the new by secondary structure color operation, use the colors listed in these 3 tables.

Use canonical protein's accession instead for PDB query

PDB won't return structures for isoforms, so in that case we should query for the canonical protein instead.

Improve error messages

Instead of

Could not download PDB file, please try again later!

it would be useful to distinguish between the case "PDB has been contacted and there is some kind of communication (try again later)" and "we already know there is no relevant PDB (no 'try again later')".

As suggested by Gos.

Use alphafold instead of RCSB?

This can probably be done in combination with #19 which seems to support it (although not sure what alphafold's public API is like)
https://github.com/nglviewer/ngl/blob/b46c97355e2727d4f162fa27d13f803b05888785/examples/scripts/test/alphafold.js#L4

[easy issue] Add preview.png to root of this repo.

If you would like to pick this issue up, please comment on the issue to let us know you're working on it :)

Task:

Add preview.png to the root of this repository

How to do this

1. Go to the repo README, and follow instructions to clone and install this repository.
2. Run npm run dev and visit http://localhost:3456
3. Capture a screenshot of the application in action! Try to avoid extra/un-needed whitespace, and try to make it square-ish (this doesn't have to be exact).
4. Save it in the root of this repo, commit it, and make a PR 🎉

Context: these previews will be used here: http://bluegenes.apps.intermine.org/default/debug/tool-store - you can look for other repos under intermine to find similar tasks for other bluegenes-* repositories as several tools are missing previews.

What to do if you need help

Mention @yochannah, tweet @yoyehudi, pop by to say hi on chat or if needed email [email protected] <3