Create vitessce app PoC

[jrchudy]

Following issue #71 in atlas-d2k, we need a vitessce app in deriva-webapps that ingests configuration and data and shows a vitessce app with a chaise navbar.

Update 2:

There also needs to be a dropdown user control (type = dropdown) for replicates. In the current study for the use case, there are only 2 replicates so we don't need to overcomplicate this dropdonwn at the moment.

How do we use react grid layout and user controls in plot app also in the vitessce app?

• similar implementation in both apps
• eventually refactor deriva-webapps to have a webapps wrapper so react grid layout is available for all webapps
• OR should we have a new webapp that allows ANY webapp to be used inside of react grid layout
  • refactoring required but might be the best solution

Update 1:

After some investigation, using vitessce react component is pretty trivial. The difficulty comes in how the data is prepared since vitessce expects data in a few different formats. Overview of data types and file types that vitessce understands: http://vitessce.io/docs/data-types-file-types/

More details on each data type and file type: http://vitessce.io/docs/data-file-types/

Using this page from hubmap: https://portal.hubmapconsortium.org/browse/dataset/f47349f1e0fea69263a8d68c7dac65c5

I was able to write my own configuration that pointed to the secondary_analysis.zarr that hubmap is using for their vitessce app: https://dev.derivacloud.org/~jchudy/deriva-webapps/vitessce/

Note: Something with vitessce visualizations is not supported in chrome. The above hubmap and chaise page links work better in firefox and safari.

[jrchudy]

We discussed that a .zarr might not be ideal for hosting the data since it will be in hatrac and we might no want to create a large directory to represent this data. When I downloaded the dataset to my machine using globus connect, it took 35 minutes to copy the contents which were 795.1 MB with 3,929 items.

An alternative to look into is using an .h5ad file with all the annData in it instead of the .zarr directory. More details at this link: http://vitessce.io/docs/data-file-types/#anndata-as-h5ad

If we use .h5ad and convert it to .zarr in the code, can we then use that converted .zarr for vitessce?

[jrchudy]

Notes about file types:

• CSV and JSON are another way to store the data that is read from the configuration file
  • still has a similar drawback where multiple files will be deployed instead of 1 file or a request to an API that is fed to vitessce after
  • "less" files but still not a small set
  • some examples on vitessce website using csv + json files exclusively
    • some examples mixing these types with .zarr directories
• vitessce does not like being "given" data but instead wants paths to data to do the fetching internally
  • more details on data preparation
  • limits how data is hosted
• Data hosting link:
  • examples on how/where to host your data
    • each example is about hosting files not creating a database etc
    • can you point to an API that returns the data as csv/json instead of a pre-prepared file?
  • Hosting data on github pages
    • does't really fix our issue of uploading/managing many files instead of a database
  • http://vitessce.io/docs/data-hosting/#local
    • Here they also suggest specifically uploading "files" of the data and not from a rest API

Other notes:

• vitessce can generate the config file for you based on how the anndata.zarr directory is setup
  • more details: http://vitessce.io/docs/default-config-json/
• tutorial on data preparation using python to generate data. uses anndata.zarr format
  • http://vitessce.io/docs/tutorial-visium/