Test Sequence Viewer about dash-bio HOT 12 CLOSED

I'm not sure what you mean by this - do you mean that the words themselves should be different colors?

Yes, with a different color/style it would be easier to focus on the results of the sequence-specific information displayed for ‘Accession’, ‘Protein name’ etc.

from dash-bio.

Overall, the apps looks clean and uncluttered - so, that's great! :) Here are a few suggestions to consider:

Header:
The header band does not cover the entire width of the browser. I see it’s set to a width < 100%. Maybe consider changing this for consistency with other apps?
Header text: 1) Enhance contrast and potential bold text, 2) Text is capitalized in this app and not the others. So, maybe consider changing this for consistency with other apps?

Sequence details container (left panel)

1. The information about the sequence length (within the circle) is great. However, it’s not intuitive what this means when you see it initially - maybe consider adding something like ‘chain length’ or similar so the user knows what the number means.

Sequence selection options container (middle panel)

1. The legends for the different options could be bold so they’re distinct
2. The ‘subsequence selected’ section would fit better in the sequence info container (right panel)
3. It’s not obvious what type of input is expected in the ‘coverage tooltip’ – maybe consider adding an example as a place holder?

Sequence info container (right panel)
All text corresponding to information obtained for each new sequence (example: the results for ‘Accession’, ‘Protein name’ etc) could be displayed in distinct color and/or style so it’s easy to focus on the results

from dash-bio.

When you change the preloaded sequence it would seem natural to me that the region selector would be set back to not selecting a region, it is maintained on purpose?

from dash-bio.

Is there any use of the "Translate from DNA or RNA" in the app right now? I could never manage to get another message than "Sequence does not represent DNA/RNA." on the all to the right panel (I just selected pieces, or all of the 3 choices in the preload). If there is no uses it would be nice to add one in the preload.

from dash-bio.

When choosing the "Enable coverage" mode, is the "Selection region" div still useful to the user? If not maybe you can toggle {'display': 'none'} on this div?

from dash-bio.

@nchtra

The header band does not cover the entire width of the browser. I see it’s set to a width < 100%. Maybe consider changing this for consistency with other apps?
Header text: 1) Enhance contrast and potential bold text, 2) Text is capitalized in this app and not the others. So, maybe consider changing this for consistency with other apps?

The header issue has been fixed with the latest master, so it should be all good now :)

The information about the sequence length (within the circle) is great. However, it’s not intuitive what this means when you see it initially - maybe consider adding something like ‘chain length’ or similar so the user knows what the number means.

This is actually set by the react-sequence-viewer itself so I can only access whether or not it's displayed. I might be able to get around that but I'll need to modify the library myself (maybe in a subsequent PR)

The legends for the different options could be bold so they’re distinct
The ‘subsequence selected’ section would fit better in the sequence info container (right panel)
It’s not obvious what type of input is expected in the ‘coverage tooltip’ – maybe consider adding an example as a place holder?

Legends have been fixed in #73. The 'subsequence selected' section is relevant to the coverage, but I could also either conditionally display it or display it in the info container as well (or both).
Will add info for the tooltip, thanks!

All text corresponding to information obtained for each new sequence (example: the results for ‘Accession’, ‘Protein name’ etc) could be displayed in distinct color and/or style so it’s easy to focus on the results

I'm not sure what you mean by this - do you mean that the words themselves should be different colors?

from dash-bio.

@Bachibouzouk

When you change the preloaded sequence it would seem natural to me that the region selector would be set back to not selecting a region, it is maintained on purpose?

It's not maintained on purpose, thanks for pointing that out! Will fix in #73

Is there any use of the "Translate from DNA or RNA" in the app right now? I could never manage to get another message than "Sequence does not represent DNA/RNA." on the all to the right panel (I just selected pieces, or all of the 3 choices in the preload). If there is no uses it would be nice to add one in the preload.

Yes, that feature is for DNA/RNA sequences (since they can also be uploaded). I'll add one in the dropdown.

When choosing the "Enable coverage" mode, is the "Selection region" div still useful to the user? If not maybe you can toggle {'display': 'none'} on this div?

I still display it just because it demonstrates the mouseSelection prop, but I could remove it too!

from dash-bio.

@shammamah

• the width of the sequence display is not large enough for genes, some of it is hidden, setting sequence-viewer-container to 430px would fix it :) (add a text-align: center and don't forget to modify the width of the upload-div as well if you do this
• the mouse selection is not reset to None when a new protein/gene is reloaded
  -in the seq-view-info container what does "Coverage entry clicked:" stands for, I don't manage to make it display anything.
• it would be nice that "Subpart sel:" would always display the last selected thing be it with the region selector, the search input of the mouse
• I would place "Subpart sel:" directly below the "Description:" so the user has a direct feedback of the selection they just did
• I would add the following description as a title prop for id='cov-options' : "Select part of the sequence with the mouse and click the submit button to add styled coverage on it. This allow to highlight the particular meaning of a part of the sequence.\n If the reset button is pressed, all existing coverage will disappear."

Improvement(s) be addressed later :

• right now the coverage cannot be made by the "search option" and I guess it would be a useful feature (after the demo perhaps), so one can annotate the sequence for ALL "TGCATT" for example
• it would be nice to save the coverage one made and to be able to download the file
• for long sequences it is difficult to use the region selector as it becomes super sensitive, I would offer the possibility to display/input the start and end of the selection with two inputs (they would be connected via callbacks to the mouse and region selections, so the user has maximum information/power over the selection)
• add more title props to the different divs of the app so that the inexperienced user knows what does what.

from dash-bio.

@shammamah

• Suggestion: You could add a download button with some sample data that they can use to drag and drop into the upload box. This also gives the user the ability to see the data set and format.

• I noticed that the whole page is scroll-able, but the content is within the bounds of the page. It's not really necessary, and you can get rid of it by removing this: https://github.com/plotly/dash-bio/blob/master/assets/sequence-viewer-style.css#L10

• I find the boxes not having a scroll bar confusing (for me at least). It would be cool if the Preloaded sequences box and description box had a scroll bar, and if the control-container box resized height wise. Than you could always show the entire content of the box until a certain vh.

• I'm curious why you choose to hard code the width and height. You could use vh and vw for the height and width. I'm guessing the dcc components don't scale well with what you have inside the controls-container and info-container?? https://github.com/plotly/dash-bio/blob/master/assets/sequence-viewer-style.css#L95-L117

• I noticed the Search in sequence.. box is cut off, which hides the regex accepted portion. Since the box is not resize-able it'd be a good idea to make that part noticeable.

• Is there a way to scale the size of the application so there is not all the extra space to the right? I think it'd look better, but that's just me hehe.

• The Color drop down in the controls-container is not view-able. Looks like the z-index needs to be increased somehow.

The functionality of the application works well, and is very aesthetically pleasing! Good work!

from dash-bio.

Suggestion: You could add a download button with some sample data that they can use to drag and drop into the upload box. This also gives the user the ability to see the data set and format.

Good idea! Fixed in #87

I noticed that the whole page is scroll-able, but the content is within the bounds of the page. It's not really necessary, and you can get rid of it by removing this: https://github.com/plotly/dash-bio/blob/master/assets/sequence-viewer-style.css#L10

Good catch - fixed in #87

I find the boxes not having a scroll bar confusing (for me at least). It would be cool if the Preloaded sequences box and description box had a scroll bar, and if the control-container box resized height wise. Than you could always show the entire content of the box until a certain vh.

Fixed in #87

I'm curious why you choose to hard code the width and height. You could use vh and vw for the height and width. I'm guessing the dcc components don't scale well with what you have inside the controls-container and info-container?? https://github.com/plotly/dash-bio/blob/master/assets/sequence-viewer-style.css#L95-L117

Yeah, it's because of the DCC components. I also wanted to make sure that certain things line up properly when a container moves to the next line (if the screen isn't wide enough).

I noticed the Search in sequence.. box is cut off, which hides the regex accepted portion. Since the box is not resize-able it'd be a good idea to make that part noticeable.

Do you mean through a tooltip on hover, or just making the search box bigger?

Is there a way to scale the size of the application so there is not all the extra space to the right? I think it'd look better, but that's just me hehe.

Fixed in #87

The Color drop down in the controls-container is not view-able. Looks like the z-index needs to be increased somehow.

You should be able to scroll down once the dropdown is expanded - are you not able to do so?

from dash-bio.

I noticed the Search in sequence.. box is cut off, which hides the regex accepted portion. Since the box is not resize-able it'd be a good idea to make that part noticeable.

Yeah just make the box bigger!

The Color drop down in the controls-container is not view-able. Looks like the z-index needs to be increased somehow.

Yeah looks like I missed that. I didn't know you could scroll to see it, but now the scroll bar makes that obvious 👍.

@shammamah Looking very nice! Good work! I think the only thing that needs to be done is making the search box bigger (or give it a hover tool tip or something) than you are good to go 👍

from dash-bio.

closed with #87

from dash-bio.