Comments (11)
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 proptitle
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 thetitle
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 asCIRCOS_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.
Related Issues (20)
- 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')
- .xyz file parser
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.