#89 (comment)
@shammamah
@mkcor

1. Ideogram
   https://github.com/igvteam/igv.js/tree/master
   https://igv.org/web/test/examples/bam.html

2. Clustegram
   http://qb.cshl.edu/ginkgo/?q=results/_t10breast_navin
   https://github.com/robertaboukhalil/ginkgo

3. Sequence viewer
   https://hemoglobin-comparison.herokuapp.com/
   https://github.com/lmalet/hemoglobin_dash_app
   Will be cool to eventually replace this graph with 3d molecule viewer or Speck component

4. https://dotlet.vital-it.ch/

@matthewchan15 When syncing up my master after you merged PR #89 (which came with commit 7154cb2), I noticed that file dash_bio/bundle.js got huge... Was everything you added necessary?

For reference:

$ git pull origin master
remote: Enumerating objects: 10, done.
remote: Counting objects: 100% (10/10), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 10 (delta 6), reused 9 (delta 6), pack-reused 0
Unpacking objects: 100% (10/10), done.
From github.com:plotly/dash-bio
 * branch            master     -> FETCH_HEAD
   87bd4a0..66ca418  master     -> origin/master
Updating 87bd4a0..66ca418
Fast-forward
 dash_bio-0.0.1.tar.gz              |  Bin 1081660 -> 2086631 bytes
 dash_bio/Circos.py                 |    8 +-
 dash_bio/DashCircos.py             |   83 --
 dash_bio/DashIdeogram.py           |  194 ---
 dash_bio/bundle.js                 | 7977 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 dash_bio/metadata.json             |   14 +
 dash_bio/package.json              |    2 +-
 package-lock.json                  |  175 +--
 package.json                       |    2 +-
 src/lib/components/Circos.react.js |   11 +-
 tests/dash/app_circos.py           |    2 +-
 11 files changed, 7969 insertions(+), 499 deletions(-)
 delete mode 100644 dash_bio/DashCircos.py
 delete mode 100644 dash_bio/DashIdeogram.py

I created a self contained demo of the reduced problem at https://dash-gallery.plotly.host/dash-volcano-bug-app/ (the repo is at https://dash-gallery.plotly.host/GIT/dash-volcano-bug-app).

When you use the dropdown to select Set2 from Set3 (which are the same), it is fine. The problem arises when you select Set1 and then again Set2 or Set3, then a whole bunch of data point are not rendered but you can see that they are there with the hover info... you can get the whole dataset to be displayed properly by setting the Thershold to 7 and then back to its initial value of 4, then everything works properly until one selects Set1 and then Set2 again...

I have checked that the data sets that were sent to the figure prop of the dcc.Graph were the one I expected and they were. For some reason they do not get rendered.

I guess this will happen too in dds
I think we should sort the apps alphabetically and make links to apps display alphabetically.

From @Bachibouzouk's comments on #70

• Use a numpy or pandas function to loop over the list when converting from list to array in _clustergram.py (fixed in #77)
• Create a function dedicated specifically for the above
• Ensure that row and column labels still show even if there is no clustering

In accordance with https://github.com/plotly/streambed/issues/12263, we are making our index.py app obsolete. The applications we currently have are not true standalone apps, since they just modify the layout on the main index.py app. Right now, index.py lives on that server (https://dash-gallery.plotly.host/dash-bio) and its portal (https://dash-bio.plotly.host/Portal/)

What we need to do:

• Publish the dash bio package to test.pypi.org
• Separate the requirements for each app from our requirements.txt file, add in the dash_bio dependency
• Set up a file structure within the repository that will house all of the applications. I'm thinking just a folder called demo_apps that contains a folder for each app
• Copy each app's relevant sample_data files into its folder
• Create all the necessary files (looks like we need a config.py and runtime.txt) for each app in its folder
• Once the apps are on the portal, tag them (this looks like a really cool feature we should take advantage of!) with things like "genomics", "visualizations", etc.

Let's get this done before I fly out to Boston for training with Amgen (13 Feb)! They're a huge pharmaceutical company and it would be awesome to show off Dash Bio and sell them on DDS simultaneously :) let's get that 🍞

Hi @matthewchan15,

I'm not a biologist (@shammamah can you please remind me who are the biologists so I can tag them?) but under "Organism" (species?) I find it odd to see "Human" and "Homo-sapiens" (also, I believe you don't hyphenate it).

Now I'm aware they're pointing to two different datasets, which contain different features (data-wise). If we want to include both datasets, we probably want to figure out something UX-wise so it gives a better first impression.

PS: This follows from a PR #90 I originally opened and then closed.

I propose to change name of tests/dash package to tests/dash_demo_apps

I noticed that generated files in dash-bio/dash_bio (such as bundle.js etc.), or the .tar.gz, are versioned in this repository. I wonder why this is the case: usually (at least in my experience) files which can be generated are not integrated in the version control, in particular for large files.

as mentioned in : https://github.com/plotly/streambed/issues/11788#issuecomment-436746312

• see with Chelsea if this user already exists
• create developers/dataliberation user on dds
• dash-gallery exceeded the 15 person license, checkup with Hamza on that, as new user cannot create apps
• delete /dash-bio app from sham's account (if not there's url conflict..)
• add dash-bio path to common user
• setup environment requirements for dash-bio app so that Chitra's app works: https://github.com/plotly/streambed/issues/11803
• redeploy master with developers as user
• edit pr template with new steps for deployment, now everyone will be responsible for redeploy once they merge to master

Should help to close #93. WIP in #110.

• app_alignment_viewer.py (6b58dfc)
• app_clustergram.py (29093cf, 73200f3, e6c2f7a)
• app_manhattan_plot.py (cab52b0)
• app_molecule3d.py (a448abe)
• app_sequence_viewer.py (931bd31)
• app_volcano_plot.py (08ef7ad)
• app_circos.py (321d8b6)
• app_ideogram.py (126d1de)
• app_needle_plot.py (1ce43f1)
• app_speck.py (84eeb33)

Running python tests/dashbio_demos/app_speck.py works and runs the app correctly, but when trying to run it with gunicorn, which will happen on the server (gunicorn tests.dashbio_demos.app_speck:server) it fails with the following error:

Failed to find application object 'server' in 'tests.dashbio_demos.app_speck'

We need to expose the server variable somehow within the app file. I've tried declaring server = app.server within run_standalone_app and returning it, but that doesn't work either.

@mkcor @Bachibouzouk Any ideas on how to get this to work? We might have to start running the apps from index.py after all.

Now we have integration testing set up, we need a common test suite that is used for all common features and files specific to each component's features.

@Bachibouzouk has already started on his (#102) for Volcano plot.

We still need to finish tests for:

• general (to be used for all components) (#142, #146, #173)
• Alignment Chart
• Circos
• Ideogram (#182)
• Molecule3D
• NeedlePlot (#146)
• SequenceViewer
• Speck
• Clustergram
• Manhattan plot (#142)
• Volcano plot (#142, #102)
• Oncoprint (#191, #194)

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

Really just a suggestion, but I believe it would be nice to have setup.py require dash by default:

That way, when the user installs dash-bio, they simply need to create a venv and run:

pip install dash-bio

with dash, dash-html-components, dash_renderer being installed as well.

It could be implemented along the line of:

 setup( 
     name=package_name, 
     version=package["version"], 
     author=package['author'], 
     packages=[package_name, '{}/utils'.format(package_name), '{}/component_factory'.format(package_name)], 
     include_package_data=True, 
     license=package['license'], 
     description=package['description'] if 'description' in package else package_name, 
     install_requires=[
         'dash', 'dash-html-components', 'dash_renderer'
     ] 
 ) 

Should help to close #93. WIP in #110

• Circos (2181ac6)
• Ideogram (cdc96f0)
• Module3dviewer (840d441)
• SequenceViewer (fb52125)
• Speck (c9a8cbd)

We already have APP_NAME as a variable, so we can use that in the URL string in this comparison.

Also, the URL would be valid even with an extra / at the end -- so the test might fail incorrectly

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

This could be applied to other files across the repo as well. Preferably once the tests are written so we can use the tests to check that the code is not broken :)

Goals before releasing dash-bio:

• At least feature parity with R
• Better documentation
• More compelling example apps
• Easier installation

Circos: https://dash-gallery.plotly.host/dash-bio/circos
https://cran.r-project.org/package=RCircos
https://cran.r-project.org/web/packages/SanzCircos/index.html
https://github.com/hpeaker/ggcircos,
https://github.com/lvulliard/BioCircos.R

Ideogram: https://dash-gallery.plotly.host/dash-bio/ideogram
https://bioconductor.org/packages/release/bioc/html/ggbio.html
https://github.com/freestatman/ideogRam

Clustergram: https://dash-gallery.plotly.host/dash-bio/clustergram
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5925766/
https://cran.r-project.org/web/packages/shinyHeatmaply/index.html

Manhattan: https://dash-gallery.plotly.host/dash-bio/manhattan-plot
http://sahirbhatnagar.com/manhattanly/

Volcano: https://dash-gallery.plotly.host/dash-bio/volcano-plot
http://sahirbhatnagar.com/manhattanly/

Needle plot: https://dash-gallery.plotly.host/dash-bio/needle-plot
https://github.com/freezecoder/mutsneedle

Cytoscape: https://dash-gallery.plotly.host/cytoscape-phylogeny
https://saezlab.github.io/cyrface/
https://bioconductor.org/packages/release/bioc/html/RCyjs.html

3d molecule viewer:
http://bio3d.ucsd.edu/pca-app/?SSUID=2018-10-30_180238089b05
http://thegrantlab.org/bio3d/index.php

MSA viewer:
https://zachcp.github.io/msaR/
http://resources.qiagenbioinformatics.com/manuals/clcsequenceviewer/current/index.php?manual=Sequence_alignment.html

Phylocanvas
https://thibautjombart.github.io/treespace/
https://github.com/zachcp/phylocanvas
https://zachcp.github.io/phylocanvas/

Oncoprint
https://github.com/dakl/oncoprint
https://www.bioconductor.org/packages/release/bioc/vignettes/ComplexHeatmap/inst/doc/s8.oncoprint.html

Gene track/coverage plots
http://www.sthda.com/english/wiki/ggbio-visualize-genomic-data
https://bioconductor.org/packages/release/bioc/html/ggbio.html
https://bioconductor.org/packages/release/bioc/vignettes/seqplots/inst/doc/SeqPlotsGUI.html

Speck

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

Hi @matthewchan15,

I'd love to go over how you set up the Heroku deployment via GitHub, which is triggered every time one pushes to a feature branch.

As discussed with @VeraZab, it would be great to automate this deployment also every time the author of a pull request merges into master.

/cc @shammamah

I have seen that this header is part of a few PRs:

html.Div(
	id='header',
	className='banner',
	children=[
		html.H2('Dash bio: Manhattan plot'),
		html.Img(
			src='assets/dashbio_logo.svg',
			style={
				'height': '100',
				'float': 'right',
			}
		)
	],
	style={
		'width': '100%',
		'display': 'flex',
		'flexDirection': 'row',
		'alignItems': 'center',
		'justifyContent': 'space-between',
		'background': '#A2B1C6',
		'color': '#506784'
	}
)

So imho it makes sense to move this bit into a common component, s.t. future changes are easy?

Though this could also be an entire page component wrapper, s.t. e.g. a footer for all components can be added later easily.

Consider using a pytest fixture instead in conftest.py.

Originally posted by @T4rk1n in #142

The rest of our components don't have the "Dash" prefix, so it would look better if these components didn't have it either :)

Hi @shammamah,

As I was linting app_clustergram.py, I noticed some heavy and confusing wording, lines 162-164:

'Header of row labels column in uploaded dataset',
title='If a dataset was uploaded, enter the header of' +
'the column that contains the title of each row.',

Even when I view it in context, it's unclear what this label means (I mean 'label' in the context of an app layout).

In Pandas language, when talking about a DataFrame, row labels are referred to as the index and column labels as columns.
Reference: https://pandas.pydata.org/pandas-docs/stable/dsintro.html

Maybe we could follow this convention, instead of torturing our brains?

The syntax in https://github.com/plotly/dash-bio/blob/master/dash_bio/component_factory/_manhattan.py#L440 and https://github.com/plotly/dash-bio/blob/master/dash_bio/component_factory/_manhattan.py#L453 may need to be updated.

when running locally (after pip install -r requirements.txt) I'm getting:

(venv3) ➜  dash-bio git:(master) python index.py 
Traceback (most recent call last):
  File "index.py", line 31, in <module>
    for filename in appList
  File "index.py", line 32, in <dictcomp>
    if filename.startswith("app_") and filename.endswith(".py")
  File "/Users/chelsea/Repos/dash-repos/gallery-apps/dash-bio/tests/dash/app_manhattan_plot.py", line 12, in <module>
    fig = dash_bio.ManhattanPlot(df)  # Feed the data to a function which creates a Manhattan Plot figure
  File "/Users/chelsea/Repos/dash-repos/gallery-apps/dash-bio/dash_bio/component_factory/_manhattan.py", line 165, in ManhattanPlot
    highlight_color=highlight_color
  File "/Users/chelsea/Repos/dash-repos/gallery-apps/dash-bio/dash_bio/component_factory/_manhattan.py", line 440, in figure
    suggestiveline = go.layout.Shape(
AttributeError: module 'plotly.graph_objs' has no attribute 'layout'

ESlint raises the error "'view.length' is missing in props validation (react/prop-types)" on line 118

The files in there will need to be cleaned as well

• Let's have one common header for all apps: Header can take a prop for background color and text color. When clicking on the logo, you're brought back to the main index page. This work was started here: https://github.com/plotly/dash-bio/blob/master/tests/dash/utils/app_wrapper.py Let's build on it.
• Let's make it so logo is on the left side and title of app is right after, I think that it's what people are more used to when clicking to be brought back to main index page
• Let's change all the apps to use that header
• Let's fix app ordering: #34

once this is merged: #21

Hi @matthewchan15 @shammamah @VeraZab!

When visiting the gallery and hovering for each component's description, Circos's reads very different from all others:

• it doesn't use the same imperative mood as all other descriptions (view, analyze, display, ...);
• it doesn't mention anything bioinformatics-related (gene, chromosome, molecule, ...);
• it isn't clear what "between data/datasets" means (sounds like a draft version).

As mentioned in #110.

• If you zoom into the center heatmap, the viewport of the bottom global view doesn't always update.
• When you are very zoomed into the main heatmap, if you click-drag on the bottom global view, only the x-axis labels of the center heatmap update.

I thought this might be a plotly.js issue, but I don't get this off synch behavior in Chart Studio: https://plot.ly/~jackp/18501/#/

So I wonder if this app is using an older version of plotly.js.

The JS console is full of these bundle.js errors from click-dragging. I see calcdata in the compressed source, so it does seem plotly.js is having trouble in this particular environment.

as per: #28 (comment)

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

The data folder here needs to be moved into tests/dash/sample_data: https://github.com/plotly/dash-bio/tree/master/.github

This would help sort out which ones are needed and which ones we could erase as well

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

This has come up a few times. I develop in Python 3.7, so it's wrong...

First-level impressions clicking through Dash Bio gallery beta apps: https://dash-gallery.plotly.host/dash-bio

Header

Would be great to have a GitHub link in the upper-right of the header that links to the code for each app on GitHub.

Dash Circos

• A lot of stuff in this sidebar. Pretty overwhelming. Maybe try organizing into tabs within the sidebar? Eg perhaps could organize tabs as, Data | Layout | Events | Upload

• Add a dropdown of a few different datasets?

Dash Clustergram

• Heatmap is a bit small. Maybe put the right-hand column on the left side instead, and try to make the clustergram go full-bleed to the right edge of the screen? Usually sidebars like this are on the left hand side.
• Would be nice to have a dropdown with a few classic clustergram data sets. Look at what the R clustergram packages and shiny apps use (eg heatmaply). Eg the mtcars dataset is a "classic:"

https://cran.rstudio.com/web/packages/heatmaply/vignettes/heatmaply.html

Dash Ideogram

• Needs margin on the left-hand side. Bugs me that controls are touching window edge.
• Make an issue in the original ideogram JS repo with a link to this app, to share and get feedback. Maybe will motivate the PI to address some of the issues you've raised.

Manhattan Plot

• Hover mode should be closest by default
• The "Visualize genome wide association studies..." description should should have a top margin so it's not touch the top header.

Sequence Viewer

• Not sure what "Entry to view" is
• Might want a dropdown with a few other sequences besides insulin
• Would be great to combine this with 3d molecule viewer if there's a way that makes sense
• vertical space between labels
• Sequence doesn't wrap

Dash needle plot

• Labels such as Stem thickness are too large in font-size IMO.
• I only see one sample dataset in the dropdown - need to add more. A bunch here:
  https://github.com/jackparmer/react-needle-plot/tree/master/src/data
  On one of the Dash Bio calls I thought you had also found others in a Nature paper.
• Should be a left-side margin so that controls and labels don't touch the edge of the window

Volcano

• This app doesn't do much. Should maybe reduce the opacity of the points above the threshold? To make it more interesting, could add 2 overlaid histograms to the app - one histogram is all of the data and the other histogram is the data above the threshold. When the threshold is zero, the histograms are the same.
• Get rid of "Lower effect size" and "Upper effect size" controls. They just reset the x-axis range which I don't think is very interesting.
• Set default hover mode to closest

Remaining apps

• @nchtra @jackluo @wilzbach Need your demo apps up here once your components are finished and merged

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

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

When the user selects a custom Circos graph, and than selects a data set, Dash-tables throws an error, that makes the application unusable.