intermine/bluegenes-protein-atlas-tissue-expression-visualizer

BlueGenes Protein Atlas Tissue Expression Visualizer

BlueGenes Protein Atlas Tissue Expression Visualizer is a tool made for BlueGenes following BlueGenes Tool API. Visualize protein expression in organ tissue with a heatmap showing overall and cell specific antibody staining values.

Licence

To set up locally for development

1. Clone the repo
2. cd bluegenes-protein-atlas-tissue-expression-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-atlas-tissue-expression-visualizer's Issues

Outreachy applicant's voice

Hi, @AdrianBZG! I am Ksenia, an Outreachy applicant, and I would love to contribute on InterMine projects as a biologist and a beginner developer.

So, I decided to check this repo out, but I couldn't fully test it, because there is no integration of real data and I can't fully see how changes affect the functionality of this expression table.

I’ve found a lot to work on, but firstly is it still relevant?

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.

Odd loading artifact

From usertesting notes: When this viz gets loaded for Humanmine in Firefox, a large black circle is displayed for a moment on slower computers.

This was present on the old report page design, but may occur with the new one as well.

Not working: expecting gene symbol but receiving gene id

The tool is not working in BlueGenes as it expecting a gene symbol but receives a gene id, we can just change the logic to use gene id.

Improve layout of elements when deployed in BlueGenes

Improve layout of elements when deployed in BlueGenes, columns look very close (as discussed).

Support sorting of columns

Similar to the version present on the old webapp (https://www.humanmine.org/humanmine/report.do?id=1062390&trail=%7c1062390), it would be useful to have a small button beside each column which allowed you to sort the rows.

[easy issue] Add preview image to root of the 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

Add a legend showing what the colors mean

A scale of the gradients (white, yellow, orange, red) and a legend indicating what each extremes mean.