Test Circos about dash-bio HOT 11 CLOSED

Let me know what you think.

@matthewchan15 I think it is better, but the best (for the user perspective) is to have the least effort to do. This is just a suggestion though, the app will also look nice without ;)

from dash-bio.

hover/click data various greatly depending on the graph

@matthewchan15 what I meant, is that we could have a function which takes a JSON object as argument and returns a nested Div with titles corresponding to the JSON entries, so it could display a priori nicely any kind of JSON object. It doesn't have to be implemented now (maybe it is already implemented in the dash community!)

@Bachibouzouk Ah okay, that's a really neat idea!

from dash-bio.

in html.Div the prop title could be used to provide information of what the component(s) inside the div do(es) (title='some explanation' will display 'some explanation' when hovering over the div)

This would be especially useful in the case of the "circos-selector" dropdown. To explain what is the specificity of each circos graph and why they could be used for you can link the title prop to the dropdown value in a callback

    @app.callback(
        Output("circos-selector-div", "title"),
        [Input("circos-selector", "value")],
    )
    def circos_selector_title_toggle(selected_circos):
        return CIRCOS_DESCRIPTIONS[selected_circos]["description"]

where CIRCOS_DESCRIPTIONS would be defined as

CIRCOS_DESCRIPTIONS = {
    "custom": {
        "label": "Custom",
        "description": "custom"
    },
    "heatmap": {
        "label": "Heatmap",
        "description": "heatmap",
    },
    "chords": {
        "label": "Chords",
        "description": "chords",
    },
    "highlight": {
        "label": "Highlight",
        "description": "highlight",
    },
    "histogram": {
        "label": "Histogram",
        "description": "histogram",
    },
    "line": {
        "label": "Line",
        "description": "line",
    },
    "scatter": {
        "label": "Scatter",
        "description": "scatter",
    },
    "stack": {
        "label": "Stack",
        "description": "stack",
    },
    "text": {
        "label": "Text",
        "description": "text",
    },
    "parser_data": {
        "label": "Sample Parser Dataset",
        "description": "parser_data",
    },
}

from dash-bio.

On ubuntu 18.04 (Bionic Beaver) when I click on the download button, it downloads an archive which I can't open (it says "an error occured while loading the archive"). I also tried with the archive directly in assets/sample_data (which should be the same, but I wanted to be sure) and it also failed.

from dash-bio.

I don't really see what is the use of the "data-selector" dropdown from a purely naive user perspective (i.e., not looking at the code just playing with buttons to see what happens). One thing which is confusing is that sometimes several options in this dropdown have the exact same label (when you select heatmap as a circos graph for example). This would probably be addressed with hover text descriptions on the components as suggested above :)

from dash-bio.

It is nice to see the hover/click data displayed, it would be nicer if the display was styled (there is proably already a way out there to display json)

from dash-bio.

On ubuntu 18.04 (Bionic Beaver) when I click on the download button, it downloads an archive which I can't open (it says "an error occured while loading the archive"). I also tried with the archive directly in assets/sample_data (which should be the same, but I wanted to be sure) and it also failed.

@Bachibouzouk I will link to to the .rar file when the repo is made public and it will work for sure (can't access files from a private repo). At this moment I will keep it local. Can you unrar .rar files on your machine? I found this issue here where Ubuntu requires a package unrar to extract the data. https://itsfoss.com/use-rar-ubuntu-linux/

from dash-bio.

I don't really see what is the use of the "data-selector" dropdown from a purely naive user perspective (i.e., not looking at the code just playing with buttons to see what happens). One thing which is confusing is that sometimes several options in this dropdown have the exact same label (when you select heatmap as a circos graph for example). This would probably be addressed with hover text descriptions on the components as suggested above :)

@Bachibouzouk Each graph has one layout and an x amount of tracks. What you are seeing is the data sets that make up the graph you are viewing, and the types of track and layout that make up this graph. The drop down dynamically updates with the data sets that make up the graph you are viewing. Some graphs may have multiple highlight tracks for example, in which case you would see something like LAYOUT -> HIGHLIGHT -> HIGHLIGHT in the drop down. I have revamped the titles and display of the app which should address this issue.

from dash-bio.

It is nice to see the hover/click data displayed, it would be nicer if the display was styled (there is proably already a way out there to display json)

@Bachibouzouk I think text area in this case is fine, because the hover/click data various greatly depending on the graph. I elongated it and gave the data it's own row, which I think is much more aesthetically pleasing 👍.

from dash-bio.

in html.Div the prop title could be used to provide information of what the component(s) inside the div do(es) (title='some explanation' will display 'some explanation' when hovering over the div)

This would be especially useful in the case of the "circos-selector" dropdown. To explain what is the specificity of each circos graph and why they could be used for you can link the title prop to the dropdown value in a callback

    @app.callback(
        Output("circos-selector-div", "title"),
        [Input("circos-selector", "value")],
    )
    def circos_selector_title_toggle(selected_circos):
        return CIRCOS_DESCRIPTIONS[selected_circos]["description"]

where CIRCOS_DESCRIPTIONS would be defined as

CIRCOS_DESCRIPTIONS = {
    "custom": {
        "label": "Custom",
        "description": "custom"
    },
    "heatmap": {
        "label": "Heatmap",
        "description": "heatmap",
    },
    "chords": {
        "label": "Chords",
        "description": "chords",
    },
    "highlight": {
        "label": "Highlight",
        "description": "highlight",
    },
    "histogram": {
        "label": "Histogram",
        "description": "histogram",
    },
    "line": {
        "label": "Line",
        "description": "line",
    },
    "scatter": {
        "label": "Scatter",
        "description": "scatter",
    },
    "stack": {
        "label": "Stack",
        "description": "stack",
    },
    "text": {
        "label": "Text",
        "description": "text",
    },
    "parser_data": {
        "label": "Sample Parser Dataset",
        "description": "parser_data",
    },
}

@Bachibouzouk I made a dcc.textarea box giving a brief overview of the application, and a link to the API. I think this makes a lot more sense for the user because the API is much more descriptive. Let me know what you think.

from dash-bio.

hover/click data various greatly depending on the graph

@matthewchan15 what I meant, is that we could have a function which takes a JSON object as argument and returns a nested Div with titles corresponding to the JSON entries, so it could display a priori nicely any kind of JSON object. It doesn't have to be implemented now (maybe it is already implemented in the dash community!)

from dash-bio.