[WIP] Genome viewer

[emmanuelle]

Dash Bio pull request

• This is a new component

Name and description of your component

GenomeViewer, from https://github.com/plotly/react-genome-viewer by @jackluo. A tool for visualization and comparison of genome sequences, built on top of pileup.js

Main libraries used in component

• pileup from hammerlab https://github.com/hammerlab/pileup.js/

I added the GenomeViewer component from the react-genome-viewer. This is still work in progress, for some reason I cannot generate all tracks as show on the image below. @jackluo any idea why the coverage, variants or alignments track are not displayed correctly? I'll be working on it but ideas are welcome!

to be compared to the react-genome-viewer repo

[jackluo]

@emmanuelle is the pileup.css imported properly? otherwise it might be better to just make a thin dash wrapper on top of the react repo (see oncoprint, alignment viewer), let me push to npm in that case

[jackluo]

Might have something to do with the fact that pileup only accepts file paths not files

[emmanuelle]

@jackluo thank you very much for your help! For the css file, I put in the assets directory as the other css files. Since the app "looks good", I think it's ok.

About file paths, it's true that the parts of the app which doesn't display is linked to local files. However, in your demo/App.js the files are also given as local file paths. It might be an issue with paths indeed...

[emmanuelle]

Unfortunately I don't get meaningful error messages; however the console says "RangeError: Offsets are out of bounds".

[Bachibouzouk]

The files under genome_data should be stored under tests/dash/sample_data (we should add the name of the app in front of the file names, I will create an issue for that)

[emmanuelle]

@jackluo Indeed, when I put the files on a web server and put the URLs in the app (instead of relative paths) it works ok. Any idea of how to pass local files to the app? (what puzzles me is that it works perfectly in your App.js in react-genome-viewer)

[chriddyp]

The way that we provide css stylesheets in packages is different from the way that we use stylesheets in dash apps.

For packages, we need to explicitly include them in the package. This involves:

• Placing the CSS in dash_bio/ (the package folder)
• Linking the CSS in _css_dist in __init__.py, similar to how the JS bundles are included:

_css_dist = [{
    'relative_package_path': 'your-css.css',
    'external_url': 'https://unpkg.com/dash-bio@{}/dash_bio/your-css.css'.format(dash_bio.__version__)
}]

The external URL is the URL that is autopublished to the unpkg cdn when we publish to NPM. The relative_package_path is the name of the file in that dash_bio/ folder.

• Add the filename to MANIFEST.in

So, when you are testing locally in a Dash app, adding the css to assets/ will load up the css in that app, but it won't include the CSS in the package distribution (assets/ isn't included in the package, only files in dash_bio/ and MANIFEST.in are included). When we add the CSS files through steps listed above, Dash will inline the initial HTML that gets loaded on page load with the correct paths to load the CSS from package folder.

Let me know if that makes sense!

[emmanuelle]

@chriddyp thanks for the explanations. Yes, I think it makes sense but at the moment there is no css file included in the package file, the ones of the other components are all in assets? Does it mean we should make the modification for all the css files needed for components?

[emmanuelle]

OK, maybe it's that the other css files are used only by apps and not by components? I'll look into this more tomorrow. Thanks once again!

[emmanuelle]

Oops I closed the PR by accident, could an owner please re-open it?

[emmanuelle]

@jackluo, as I understand, pileup needs a file server to serve data files as URLs. In your repo you started a web server in the webpack.serve.config.js file, is that correct?

[emmanuelle]

Now I need to find a way to serve files, maybe I can use this plotly/dash#71

[chriddyp]

the ones of the other components are all in assets? Does it mean we should make the modification for all the css files needed for components?

Yeah exactly - we'll need to break out the CSS files into "demo app" stylesheets & "package/component" stylesheets