Test Ideogram

[VeraZab]

List all stylistic or functional issues here.
When done, change issue assignment to the component creator for them to fix the issues.

[Bachibouzouk]

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.

[Bachibouzouk]

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 .

[Bachibouzouk]

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]

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]

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,
),                                    

[Bachibouzouk]

Brush Tab
The scroll bar under the chromosome doesn't seem to be ever useful, maybe we can remove it?

[Bachibouzouk]

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)

[Bachibouzouk]

Annotations Tab
The annotation color or the bar width don't seem to apply if the user selects "Overlay-1" or "Overlay-2"

[Bachibouzouk]

Annotations Tab
I would style the hover data section rather than displaying it in a textarea

[mtwichan]

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.

@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.

[mtwichan]

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

[mtwichan]

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.

[mtwichan]

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!

[mtwichan]

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!

[mtwichan]

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,
),                                    

@Bachibouzouk
I really like this! Thanks a lot!

[mtwichan]

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

[mtwichan]

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 title prop in the divs like I suggested in #59 .

@Bachibouzouk
Fixed, and need to address issue about nuclearBands.

[Bachibouzouk]

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.

[Bachibouzouk]

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

def toggle_db(load_choice, div_style):

)