Comments (19)
Custom Tab
I would replace the dropdowns which are only doing On/Off by dcc.RadioItems
on one line after the label like this :
Or style the dropdowns to they take up less space and are next to the label if there are solely used for on/off purpose ;)
I applied
style={
"display": "flex",
"flexDirection": "row"
},
to the div and to the dcc.RadioItems to get the result shown in the screenshot (use flex-direction: row;
in the .css
file). Checkout https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for visual information about flex
.
This could easily be generated generically by a little function generating a div containing the label and the dropdown/radioitem and looping over the list of options.
from dash-bio.
Custom Tab
I could not see what the "Fully banded" (or id="fullband-switch"
) dropdown what doing on any of the datasets I could select. It would also help here to make use of tile
prop in the divs like I suggested in #59 .
from dash-bio.
Custom Tab
It would be nice to have the ability in set the size of the labels of the chromosome and on the chromosomes a bit larger.
from dash-bio.
Homology Tab
It is cool that you can select more than two chromosomes, but if it doesn't do anything particular if more than two are selected you could write the "Select two chromosomes"
from dash-bio.
Homology Tab
I would make two identically styled boxes for the chromosomes starting from
def chromosome_div(
id_tag="chr",
name_tag="Chr",
startone=0,
stopone=1,
starttwo=0,
stoptwo=1
):
return html.Div(
[
html.P("Start-one"),
dcc.Input(
id="%s-startone" % id_tag,
placeholder="%s StartOne",
type="number",
value=startone,
),
html.P("Stop-one"),
dcc.Input(
id="%s-stopone" % id_tag,
placeholder="Enter chromsomes",
type="number",
value=stopone,
),
html.P("Start-two"),
dcc.Input(
id="%s-starttwo" % id_tag,
placeholder="%s Starttwo" % name_tag,
type="number",
value=starttwo,
),
html.P("Stop-two"),
dcc.Input(
id="%s-stoptwo" % id_tag,
placeholder="Enter chromsomes",
type="number",
value=stoptwo,
),
]
)
which you would insert on line 333 of the app file as
chromosome_div(
id_tag="chrone",
name_tag="ChrOne",
startone=50000,
stopone=900000,
starttwo=155701383,
stoptwo=156030895,
),
chromosome_div(
id_tag="chrtwo",
name_tag="ChrTwo",
startone=10001,
stopone=2781479,
starttwo=56887903,
stoptwo=57217415,
),
from dash-bio.
Brush Tab
The scroll bar under the chromosome doesn't seem to be ever useful, maybe we can remove it?
from dash-bio.
Brush Tab
I would style the Start and End coordinates as well as Extend instead of displaying it raw in a text area (except if this is a feature you want to show case)
from dash-bio.
Annotations Tab
The annotation color or the bar width don't seem to apply if the user selects "Overlay-1" or "Overlay-2"
from dash-bio.
Annotations Tab
I would style the hover data section rather than displaying it in a textarea
from dash-bio.
If you find it's a very confusing to you us an user I will change it.
@matthewchan15 it is fine to keep the dropdowns then, it was in an attempt to get rid of the scroll though the options. Alternatively you could change the flex direction of the options depending on the user choice of the orientation of the ideogram (vertical or horizontal), so that the ideogram has the largest part of the screen.
from dash-bio.
Fixed, and need to address issue about
nuclearBands
.
@matthewchan15 You could also make the fullband-switch
dropdown appear only when the choice of the organism dropdown is "Homo sapiens" with a callback on output the style
of the fullband-switch
(like in
dash-bio/tests/dash/app_needle_plot.py
Line 453 in 034dc55
from dash-bio.
Custom Tab
I would replace the dropdowns which are only doing On/Off bydcc.RadioItems
on one line after the label like this :
Or style the dropdowns to they take up less space and are next to the label if there are solely used for on/off purpose ;)
I applied
style={ "display": "flex", "flexDirection": "row" },
to the div and to the dcc.RadioItems to get the result shown in the screenshot (use
flex-direction: row;
in the.css
file). Checkout https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for visual information aboutflex
.This could easily be generated generically by a little function generating a div containing the label and the dropdown/radioitem and looping over the list of options.
@Bachibouzouk
Thanks for the input! I did experiment with the dcc.RadioItems
at first, but I think it looks and feels a lot better when everything is consistent in this case. In fact, I intentionally tried to keep everything aesthetically uniform using dcc.Input
and dcc.Dropdowns
. If you find it's a very confusing to you us an user I will change it.
from dash-bio.
Custom Tab
It would be nice to have the ability in set the size of the labels of the chromosome and on the chromosomes a bit larger.
@Bachibouzouk
Created an issue in the original library. I'll also try my hand at implementing this feature! eweitz/ideogram#122
from dash-bio.
Homology Tab
It is cool that you can select more than two chromosomes, but if it doesn't do anything particular if more than two are selected you could write the "Select two chromosomes"
@Bachibouzouk
Good call.
from dash-bio.
Brush Tab
I would style the Start and End coordinates as well as Extend instead of displaying it raw in a text area > (except if this is a feature you want to show case)
Annotations Tab
I would style the hover data section rather than displaying it in a textarea
@Bachibouzouk
Will do!
from dash-bio.
Annotations Tab
The annotation color or the bar width don't seem to apply if the user selects "Overlay-1" or "Overlay-2"
@Bachibouzouk
Will add this fix!
from dash-bio.
Homology Tab
I would make two identically styled boxes for the chromosomes starting fromdef chromosome_div( id_tag="chr", name_tag="Chr", startone=0, stopone=1, starttwo=0, stoptwo=1 ): return html.Div( [ html.P("Start-one"), dcc.Input( id="%s-startone" % id_tag, placeholder="%s StartOne", type="number", value=startone, ), html.P("Stop-one"), dcc.Input( id="%s-stopone" % id_tag, placeholder="Enter chromsomes", type="number", value=stopone, ), html.P("Start-two"), dcc.Input( id="%s-starttwo" % id_tag, placeholder="%s Starttwo" % name_tag, type="number", value=starttwo, ), html.P("Stop-two"), dcc.Input( id="%s-stoptwo" % id_tag, placeholder="Enter chromsomes", type="number", value=stoptwo, ), ] )
which you would insert on line 333 of the app file as
chromosome_div( id_tag="chrone", name_tag="ChrOne", startone=50000, stopone=900000, starttwo=155701383, stoptwo=156030895, ), chromosome_div( id_tag="chrtwo", name_tag="ChrTwo", startone=10001, stopone=2781479, starttwo=56887903, stoptwo=57217415, ),
@Bachibouzouk
I really like this! Thanks a lot!
from dash-bio.
Brush Tab
The scroll bar under the chromosome doesn't seem to be ever useful, maybe we can remove it?
@Bachibouzouk
This is part of the API! I'm going to address this issue and a fix when I post the application in the original repository. eweitz/ideogram#124
from dash-bio.
Custom Tab
I could not see what the "Fully banded" (orid="fullband-switch"
) dropdown what doing on any of the datasets I could select. It would also help here to make use oftitle
prop in the divs like I suggested in #59 .
@Bachibouzouk
Fixed, and need to address issue about nuclearBands
.
from dash-bio.
Related Issues (20)
- Browser scrolls and zooms simultaniously NglMoleculeViewer HOT 1
- Molecule3dViewer from .xyz? HOT 1
- More customizable dash-bio Oncoprint features?
- Removing heatmap outline in Circos plot?
- Alignment chart hover display
- Small bug in dash-bio/dash_bio/component_factory/_manhattan.py HOT 1
- Re-enable Speck component tests
- Can't display ESMFold Protein Predictions HOT 1
- Y axis labels overlapping
- Clustergram documentation error
- Clustergram "row_colors" and "column_colors" properties documentation not clear HOT 2
- jsme in callbacks HOT 1
- Oncoprint error: Cannot read properties of undefined (reading 'displayName') HOT 1
- Molecule3dViewer dynamic height and width
- NglMoleculeViewer downloadImage resets view
- JSME examples don't run - fails to load /jsme/jsme.nocache.js HOT 1
- dash_bio.Circos tooltip wrong position if page is scrolled HOT 2
- ManhattanPlot: Incorrect tooltip information for all variants below threshold HOT 1
- Nonstandard Atom Window Text Input Element Unfocusable HOT 1
- js element TypeError: Cannot read properties of undefined (reading 'Config')
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dash-bio.