moltimate / moltimate-frontend Goto Github PK

We should be able to provide the IP & Port of the backend to the frontend at run time so that each of them can be run on independent instances while they are deployed.

List provided by sponsors

Publications (undergraduates with *)

 

1.       Hanson B*, Westin C*, Rosa M*, Grier A, Osipovitch M, MacDonald ML*, Dodge G*, Boli, PM*, Corwin CW*, Kessler H*, McKay T*, Bernstein HJ, Craig PA. Estimation of Protein Function Using Template-Based Alignment of Enzyme Active Sites. BMC Bioinformatics, 15:87 (2014), DOI:10.1186/1471-2105-15-87.

2.       Osipovitch M, Lambrecht M*, Baker C*, Madha S*, Mills JL, Craig PA, Bernstein HJ. Automated protein motif generation in the structure-based protein function prediction tool ProMOL, Journal of Structural and Functional Genomics 16:101-11 (2015) DOI: 10.1007/s10969-015-9199-0.

3.       McKay T*, Hart K*, Horn A*, Kessler H*, Dodge G*, Bardhi K*, Bardhi K*, Mills JL, Bernstein, HJ, Craig PA. Annotation of Proteins of Unknown Function: Initial Enzyme Results, Journal of Structural and Functional Genomics 16:43-54 (2015) DOI: 10.1007/s10969-015-9194-5.

4.       Craig, PA. A survey on faculty perspectives on the transition to a biochemistry course‐based undergraduate research experience laboratory. Biochemistry and Molecular Biology Education 45, 426-436 (2017) DOI: 10.1002/bmb.21060.

5.       Craig PA, Anderson T, Bernstein HJ, Daubner C, Goodman A, Irby SM, Koeppe J, Mills JL, Pikaart M, Ringer McDonald A, O’Handley SF, Roberts R, and Stewart R. Using Protein Function Prediction to Promote Hypothesis-Driven Thinking in Undergraduate Biochemistry Education. The Chemist 91:1-8 (2018).

6.       Craig, PA. Lessons from my undergraduate research students. Journal of Biological Chemistry, 293, 10447-10452, 2018, DOI: 10.1074/jbc.RA118.003722.

In #10 it was identified as an option, this is the implementation of the feature

List provided by sponsors

Funding sources

NSF-DUE 0402408, NIGMS 1R15GM078077, NIGMS 2R15GM078077-02, NIGMS 3R15GM078077-02S1, NSF 1503811, NSF 1709170, Dowling College and RIT.

Coders

RIT: Cameron Baker, Michael Bryan, Cyprian Corwin, Alexander Grier, Brett Hanson, Amanda Hartung, Venkata Kovuri, Shariq Madha, Madolyn MacDonald, Scott Mottarella, Mikhail Osipovitch, Mario Rosa, Charles Westin

Dowling College: Mogjan Asadi, Isaac Asiamah, Darina Boycheva, Richky Chachra, Clarice Chigbo, Georgi Darakev, Nikolay Darakev, Damian Glinojecki, Jonathon Ihm, John Jemilawon, Nan Jia, Kedian Jimenez, Mia Jurivec, Petko Kamburov, Barry LaPierre, Ming Li, Stavros Louris, Gregory McQuillan, Kostadin Mitev, Daniel O'Brian, Stojan Regodic, Matt Rousseau, Paul Sussman, Georgi Todorov, Rohit Tripathi, Peter Zhivkov,.

Testers 

RIT: Eno Akpovwa, Majied Albalwi, Nicole Arroyo, Abdul Bangura, Daniel Bobo, Paule Boli, Sean Bourne, Chantelle Brown, Greg Dodge, Luticha Doucette, Chanelle Francis, Kaitlin Hart, Katrina Henry, Alison Horn, Carly Keenan, MaryEd Kenney, Haeja Kessler, Desiree Matthews, Talia McKay, Victoria McNees, Tananda Richards, Weinishet Tedla-Boyd.

Dowling College: Kethi Bardhi, Kostandina Bardhi, Limone Rosa, Elena Zlateva

Project Oversight
Herbert J. Bernstein,  Jeffrey L. Mills, and Paul A. Craig

Size: M

Upload multiple motifs during the search flow so users can search against their custom motifs.

Currently, search has a button for "Custom" but it does not clarify what type of custom files it accepts.

Since search allows for custom motifs and for custom structures to be included it would make sense to have two buttons with more clear text on each.

Size Estimation: S

Add ESLint to the frontend repo using the Airbnb rules.

Acceptance Criteria:

• ESLint is set up for the repository

In the options for the visualization, it would be helpful to be able to toggle on and off (default off) the full protein structure.

By default when it loads in it should be in the Cartoon style and the active sites should remain in the Ball & Stick style.

• If possible it would be nice to be able to turn on and off the full structure of the motif and the query structures independently.

Using the previously created “Generate Motif” code from Release 2, take input from a controller call and create a motif which is returned as a file on the endpoint.

This should handle the case of a custom PDB file and a standard PDB id.

Acceptance Criteria:

• A motif is created and a file is returned to the user.

Include the rotation matrix for the query protein & the motif protein so that it is easy to replicate the current orientation/alignment in another program, even if it doesn't have superimpose functionality.

• Likely this would go at the bottom of the window
• The display would need to update as the visualization was rotated so that it remains accurate

Currently when we deploy we are using Port 3000, adding a deployment profile that switches the port used to a standard port (80) would make reaching the site easier

Provide a feedback form off of the Splash page for users to fill out about their satisfaction.

Size Estimation: M

Displaying two proteins at the same time in the NGL viewer and filtering the display so that only the correct information from each of the active sites is apart of the presentation.

Acceptance Criteria:

• Two proteins can be displayed in the NGL viewer

This came up during a session with a sponsor. We also want to disable the rotation of a single protein since the value is in their superposition.

nglviewer/ngl#340

We should support testing against:

• Self
• Homolog
• Random
• List? Provide a list of PDB ids which would get tested against in a similar vein to Homolog

Displaying the RMSD values that result from the testing
Visualization

Acceptance Criteria:

• A user is able to test their new motif against itself, its homologs (as defined on the CSA), and another random PDB id.
• A user can see the RMSD (and any other stats, such as possibly Levenstein) associated with the tested alignment

In the cloud deployment we missed hover labels for ngl items. This was when Paul tested on his local machine

Size Estimation: M
Base addition of LiteMol to the project. This can be a set protein loading in every time or it can be "searched" for as it is done in the LiteMol project examples using their controls.

Acceptance Criteria:

• Using the LiteMol library a protein can be loaded in
• LiteMol is added as a React element

The Clear button does not remove the entered PDB ids from the search parameters.

Give the user a button that creates a screenshot of the current visualization and downloads it as a JPEG/PNG.

Expected Behavior

Details of project
Development team
Github repo
Some project history
Funding

Context (Environment)

We need a landing page experience to let people know what we have to offer, and how this project is being funded

Our application should only ever be the size of the window's viewport. Can we please disable scrolling on the page (unless the user is scrolling a side panel such as a form or results) so that all actions are directed at the visualization as zoom or panning commands.

The form interface for Motif Maker, this should take in all of the appropriate inputs to create a custom motif.

Form validation to be confirmed with the sponsor, since this field is rapidly evolving it is unlikely that we will be able to do much form validation because it could become an obstacle to creating motifs in the future

Acceptance Criteria:

• A user is able to fill out a form that will create the correct request to the Backend for creating that motif."

• protein/motif color
• protein visibility
  • Display protein backbone & keep ball and stick representation of active site
• view port background color
• lock rotation/controls

When results are returned (after searching with multiple proteins) it is unclear until after selecting a result entry what query residue is being included in the visualization.

This would group the results by the query protein so that it is easier to look through as a researcher.

Size Estimation: _

Setup UI testing for the project using Selenium.

Acceptance Criteria:

• UI Testing implemented
• Simple UI test added

According to NGL issue 303 and exploring the demo application you can set the view to "Stereo" which appears to match the sponsor's expectations.

If we can easily include all of the view options in our visualization menu that would be a nice plus.

Size Estimation: S

Add Material UI

Acceptance Criteria:

• Material UI is included in the dependencies as apart of the project.

The PDB has a list of visualization options that would be nice to include for the frontend.

Example: 8GCH Visualization Page on the PDB

View Options:

• "Assembly"
• "Structure Style": Changing the style of the protein at large (Default Cartoon)
• "Active Site Style": Changing the style of the active site representation (Default Ball & Stick)
• "Color"
• "Ligand"
• "Quality"
• "Water" Toggle
• "Hydrogens" Toggle
• "Ions" Toggle
• "Clashes" Toggle

Visualization Features

• Screenshot button (#54)
• Center button
• Full Screen
  • This seems a little redundant since our visualization is already pretty large and someone can full screen the page anyways.
• Camera Options
• Background Options
• Focus Slider

• Our interface will end up being pretty different from the PDB interface since we will likely high a bunch of these options under the gear as visualization settings

Example Image:

In Maker Results there are currently options for the following filters, they should also be able to be applied to the results for a search:

• PDB Id (Contains...)
• EC Class (Starts with...)
• RMSD (Max & Min)

Results, after filtering, should still be divided up by the results headers (#55) so that they are with the associated query term.

• It would also be nice to include the number of results that are hidden due to current filters. Such as a small line of grey text at the end of a section saying "X results hidden by filters, click to clear filters).
• We also need a line of text such as "All results hidden by filters, click to clear filters" for when a query has all of its results hidden due to frontend filters.

Size Estimation: S

Add some structure to the ReadMe with initial information

Acceptance Criteria:

• ReadMe contains initial project information

After discussing with the sponsor it would be handy to have an "alignment details" bar across the bottom of the visualization. It should include the following information:

• Protein used in the alignment - Link to PDB entry
• Motif used in the alignment - Link to PDB entry
• EC Number
• RMSD (with space for additional RMSDs to be included; such as RMSD of Carbon Alpha atoms only)
• Residues apart of the alignment for the motif and the alignment (ordered so that they correspond to how they are aligned in the visualization, X aligns with Y so they are next to each other)
  • If a residue has an alternate location it should be listed here
• The header for the Protein and Motif should match the colors in the visualization (instead of being black)
  • This should still be accurate after a user changes the colors in the visualization in the right bubble menu

Empty state behavior (when no active visualization):

• Either hide the block or display a message such as "Details will be available when a visualization is selected"

Acceptance Criteria:

• Details section is apart of the UI and the fields populate dynamically based on the alignment selected.
• Details section displays appropriate behavior when inactive (no alignment being displayed)

Size Estimation: S

We discussed that we were going to use Jasmine for unit testing

Acceptance Criteria:

• Jasmine added to the repository
• An initial test to confirm working

Since we are providing a list of the residues in a list format on the details card, the sponsors would like the ability to hover (or click) on the residues and have them been highlighted.

Highlighting:
We should be able to accomplish this with NGL selection queries and changing the color of the residue accordingly or putting a box around the residue in the visualization.

Hover:

• Add Hover behavior: While hover is active the appropriate residue is "highlighted" in the visualization
• When hover ends, the residue is no longer highlighted

Select:

• On Click residue is "selected" and remains "highlighted" until the residue name is clicked again to de-selected

BLOCKED BY: #5
Size Estimation: S

Configure PRs so that they are required to pass the tests in the repo before they can be merged.

Acceptance Criteria:

• CI is configured to run project tests
• PRs are blocked for code that fails tests

Size: M

Users should be able to show or hide certain features, like NGL Viewer's command console. These preferences should be saved to a cookie so the user doesn't have to repeatedly show or hide the features they like and don't like.

What happens when a negative precision factor is given to the alignment search endpoint currently?

Expected behavior: Throws an error indicating that the precision factor must be positive.

If EC Class is set to "unknown", null, or is blank we need to throw an error for a HOMOLOG to the user, currently, I believe we will call the PDB with whatever is given which could give us inconsistent results.

There are multiple terms or items that are displayed on our interface that are not totally clear on how what they mean to someone who isn't well informed.

Format of following suggestions:

* Item/Term to receive tooltip
  * Suggested location
  * Suggested content, in quotes
  * Context of suggestion (why its needed)

Terms

• RMSD
  • Details panel next to RMSD attribute & inside of popup for filter
  • "Stands for Root-mean-square deviation of atomic positions.\nA lower RMSD indicates a better alignment"
  • Using this for the first time or finding it online isn't going to have all of the context necessary to benefit from what this important number actually means, like someone in a classroom environment might be given.

Search Form

• EC Class
  • Next to form element
  • "Default: none.\nFilter the motifs to only those with a certain EC Class. There are a few motifs with an unknown EC Class and they will always be included in the results."
  • Clarify action taken by filling this out
• Precision
  • Next to form element
  • "Default: 1. Requirements: Must be positive.\nIncreasing the precision factor increases the acceptable distance between a set of atoms when doing an alignment."
  • Clarify action taken by filling out element
• Custom Structure
  • Next to the button (or on hover)
  • "Supports PDB or MMCIF files.\nUpload a custom structure to be included in the alignment. The PDB id will be parsed out of the structure to be included in the response. A custom structure will be listed with any motifs we were able to match to it."
  • Set expectations as to what this does
• Custom Motif
  • Next to the button (or on hover)
  • "Supports MOTIF files.\nCompare custom motifs with PDB structures inputted, as well as any custom structures uploaded. We will list for every query structure if a custom motif found an alignment, or if it did not."

Maker Form

• Motif Structure [This form element needs a title]
  • To the right the title, which would be just above "Standard" / "Custom" toggle
  • "If the protein you are using is available in the RCSB's database we can obtain the structure directly from them. Otherwise, we will need you to provide the structure by selecting "Custom" and uploading the correct PDB or MMCIF file."
  • Its currently unclear what this selection is doing to someone naive to the process.
• Motif Structure "Standard" EC Class
  • To the right of the form element
  • "This is used for finding the protein's homologs. If it is not known, please leave blank and we will set it to 'unknown' in the created motif, we will not be able to run a homolog test, however, you can still compare to a custom list using the List test option and inputting PDB ids."
  • The EC number might not be always known and so we need to make sure that we are clarifying to the user what will happen if they do not include it.
• Active Site Residues [SECTION NAME CHANGE: there is only one active site, but there are multiple residues]
  • To the right of the section header.
  • "List the residues in the active site, minimum three.\nIf there are alternate positions available in the structure for a residue in the active site, please do not indicate an option. At the time of alignment, we will identify the alternative positions and compare them with the structure to find the best alignment."
  • Clarify that there is a hard minimum of three residues so that people are not surprised by an error if they list only two. And clarify that entering alternate position information is not needed.
• Custom Structures
  • To the right of the button
  • "Supports PDB and MMCIF. Include custom structures in your test. These are tested alongside any of the test options selected. The PDB id will be parsed from the structure file and will be the identifier when returned."
  • This clarifies that custom structures will be run along with any test request.

Test Options

(These are to set appropriate expectations for the user about what each option does)

• Self
  • "Test the above motif against its own structure. If it does not find an alignment, there is likely a typo in the entered residues."
• Homolog
  • "Test the above motif against all proteins with the same EC Class, as defined by the PDB."
• Random
  • "Test the above motif against a number of randomly selected proteins from the PDB."
• List
  • "Test the above motif against a list of proteins available on the PDB."

Blocked by: moltimate/moltimate-backend#13
Size Estimation: M

From the UI complete a UI request and display the results.

Acceptance Criteria:

• UI receives user input and makes a request of the backend
• UI receives the results and displays them. (This does not have to be the finalized format of the results if it does not, make a follow-up task)

Size Estimation: S

Make a simple get request of the backend in order to get dummy data back.

Acceptance Criteria:

• A request can be made of the backend while running both on a local machine

Users should be able to select an atom and then select a second atom, which will display a ruler between them.

Looking at the NGL demo app this is possible (Version: 2.0.0-dev.35) when using "test/1blu". Right click an atom to select the first atom and then double right click the second and a dark green dotted line appears with the distance in Å. This seems to match the sponsor expectations. I checked Moltimate on 79c9414 and it doesn't appear to work, it might simply require activating or mapping the mouse click to the function

Appears to be linked to this function measurepick in NGL.

Minimum:

• Right click selects target (atom, distance, bond, etc.)
  • Right clicking a different target changes selection
• Double right clicking another item displays a ruler with distance in Å.

Enhancements:

• Control is included in the controls list (this doesn't seem to be listed as apart of the ui controls in NGL and was discovered by experimentation)
• Currently selected item is referenced somewhere on UI (in the demo it is shown in the bottom left, our left side is rather busy we might want to put this on the bottom right or a top corner)
• Ability to change the color of the ruler in the customization menu (alongside protein/motif color changes)
  • If someone changes the color of their protein or motif then it could make the ruler difficult to see

Current