Add optional drop shadow for markdown images component. #1027.

content/analyze/methods/methods-packages/infer.md

@@ -12,15 +12,15 @@ componentName: "analysisDetail"
 
 [![Build Status](https://travis-ci.com/broadinstitute/infercnv.svg?branch=master )](https://travis-ci.com/broadinstitute/infercnv)
 
-[![InferCNV](../../_images/methods/infercnv_logo.png)](https://github.com/broadinstitute/infercnv)
+![InferCNV](../../_images/methods/infercnv_logo.png)
 
 [InferCNV](https://github.com/broadinstitute/infercnv) is used to explore tumor single cell RNA-Seq data to identify evidence for large-scale chromosomal copy number variations, such as gains or deletions of entire chromosomes or large segments of chromosomes. This is done by exploring expression intensity of genes across positions of the genome in comparison to a set of reference 'normal' cells. A heatmap is generated illustrating the relative expression intensities across each chromosome, and it often becomes readily apparent as to which regions of the genome are over-abundant or less-abundant as compared to normal cells.
 
 InferCNV provides access to several residual expression filters to explore minimizing noise and further revealing the signal supporting CNV. Additionally, inferCNV includes methods to predict CNV regions and define cell clusters according to patterns of heterogeneity.
 
 InferCNV is one component of the TrinityCTAT toolkit focused on leveraging the use of RNA-Seq to better understand cancer transcriptomes.
 
-[![inferCNV](../../_images/methods/infercnv_screenshot.png)](https://github.com/broadinstitute/infercnv)
+![inferCNV](../../_images/methods/infercnv_screenshot.png)
 
 ## Use
 

content/analyze/methods/methods-packages/stream.md

@@ -12,11 +12,11 @@ componentName: "analysisDetail"
 
 [![Build Status](https://travis-ci.org/pinellolab/STREAM.svg)](https://travis-ci.org/pinellolab/STREAM)
 
-[![STREAM](../../_images/methods/stream_logo.png)](http://stream.pinellolab.org/)
+![STREAM](../../_images/methods/stream_logo.png)
 
 [STREAM](https://bioconda.github.io/recipes/stream/README.html) is an interactive computational pipeline for reconstructing complex cellular developmental trajectories from sc-qPCR, scRNA-seq or scATAC-seq data.
 
-[![STREAM](../../_images/methods/stream_screenshot.png)](http://stream.pinellolab.org/)
+![STREAM](../../_images/methods/stream_screenshot.png)
 
 ## Usage
 

content/analyze/portals/analysis-portals/asap.md

@@ -11,7 +11,7 @@ componentName: "analysisDetail"
 
 [ASAP](https://asap.epfl.ch/) allows the user to perform custom analyses and compare algorithms for each step of the single cell or bulk RNA-seq analysis pipeline post genome alignment via an intuitive web interface (Gardeux et al., Bioinformatics, 2017). These steps include parsing, filtering, and normalization of the input gene expression matrix, visual (2D and 3D) representation, differential expression, clustering, heatmaps, trajectory inference and functional enrichment analyses to characterize novel cell clusters, specific cell types, or differentiation processes. Thus, ASAP has been developed to lower the bioinformatic entry level to single cell experiments and to catalyze collaborations between computational biologists and experimentalists via an easy-to-use data interaction portal.
 
-[![ASAP](../../_images/portals/asap.png)](https://asap.epfl.ch)
+![ASAP](../../_images/portals/asap.png)
 
 ## Contact
 Vincent Gardeux ([[email protected]](mailto:[email protected]))\

content/analyze/portals/analysis-portals/bioturing-browser.md

@@ -11,7 +11,7 @@ componentName: "analysisDetail"
 
 [BioTuring Single Cell Browser](https://bioturing.com/product/bbrowser) combines modern data visualization techniques, statistical machine learning toolboxes, and a rich knowledge base to create a unique platform for single cell data analytics.
 
-[![BioTuring Single Cell Browser](../../_images/portals/bioturing-browser.png)](https://bioturing.com/product/bbrowser)
+![BioTuring Single Cell Browser](../../_images/portals/bioturing-browser.png)
 
 ## Contact
 Son Pham ([[email protected]](mailto:[email protected]))

content/analyze/portals/analysis-portals/cellxgene.md

@@ -11,7 +11,11 @@ componentName: "analysisDetail"
 
 [cellxgene](https://github.com/chanzuckerberg/cellxgene) is an interactive, performant explorer for single cell transcriptomics data - an open-source experiment in how to bring powerful tools from modern web development to visualize and explore large single-cell transcriptomics datasets. cellxgene hopes to both enable scientists to explore their data and to equip developers with scalable, reusable patterns and frameworks for visualizing large scientific datasets. Features will include scalable visualization of at least 1 million cells, interactive exploration via performant cross-filtering and comparison, and a flexible API that supports a range of existing analysis packages (e.g. scanpy) for backend computational tasks integrated with client-side visualization.
 
-[![cellxgene](../../_images/portals/cellxgene.png)](https://github.com/chanzuckerberg/cellxgene)
+<figure-styles shadowless=true>
+
+![cellxgene](../../_images/portals/cellxgene.png)
+
+</figure-styles>
 
 ## Contact
 Fiona Griffin ([[email protected]](mailto:[email protected]))

content/analyze/portals/analysis-portals/cytoscape.md

@@ -15,7 +15,7 @@ Cytoscape's core distribution provides a basic set of features for data integrat
 
 Apps may be developed by anyone using the Cytoscape open API based on Java™ technology and App community development is encouraged. Most of the Apps are freely available from Cytoscape App Store.  Cytoscape is being extended through apps and core features to search, extract, visualize, and analyze data from the Human Cell Atlas, with a focus on network and pathway analysis.
 
-[![Cytoscape](../../_images/portals/cytoscape.png)](http://www.cytoscape.org)
+![Cytoscape](../../_images/portals/cytoscape.png)
 
 ## Contact
 [Cytoscape Helpdesk](https://groups.google.com/forum/#!forum/cytoscape-helpdesk) ([[email protected]](mailto:[email protected]))

content/analyze/portals/analysis-portals/dnastack.md

@@ -10,7 +10,11 @@ componentName: "analysisDetail"
 
 [DNAstack](https://www.dnastack.com) is a cloud platform for bioinformatics based on open standards like Workflow Description Language and Common Workflow Language.
 
-[![DNAstack](../../_images/portals/dnastack.jpg)](https://www.dnastack.com)
+<figure-styles shadowless=true>
+
+![DNAstack](../../_images/portals/dnastack.jpg)
+
+</figure-styles>
 
 ## Contact
 General information ([[email protected]](mailto:[email protected]))

content/analyze/portals/analysis-portals/genepattern-notebook-environment.md

@@ -11,7 +11,7 @@ componentName: "analysisDetail"
 
 [GenePattern Notebook](http://www.genepattern-notebook.org) integrates the popular Jupyter Notebook platform, which interleaves text, graphics, and code, with the hundreds of genomic analyses available in the GenePattern platform, providing a workspace for reproducible research and open science to all researchers, regardless of their programming experience. The environment allows researchers to create, share, and publish detailed descriptions of their work, including the executable analyses, making it easy for others to understand it and adapt it to their own research.
 
-[![GenePattern Notebook](../../_images/portals/genepattern-notebook.png)](http://www.genepattern-notebook.org)
+![GenePattern Notebook](../../_images/portals/genepattern-notebook.png)
 
 ## Contact
 Genepattern Team ([[email protected]](mailto:[email protected]))

content/analyze/portals/analysis-portals/hca-galaxy-instance.md

@@ -14,7 +14,7 @@ It also includes facilities to import matrix data from the Human Cell Atlas and
 The clustering workflow for the release 6 of EBI Single Cell Expression Atlas are reproducible through this portal.
 The portal runs as part of the larger usegalaxy.eu infrastructure and has access to thousands of cores and terabytes of RAM and storage, kindly hosted by the U. of Freiburg, den.bi and Elixir.
 
-[![Human Cell Atlas Galaxy Instance](../../_images/portals/hca-galaxy-instance.png)](https://humancellatlas.usegalaxy.eu)
+![Human Cell Atlas Galaxy Instance](../../_images/portals/hca-galaxy-instance.png)
 
 ## Contact
 Website: [https://www.ebi.ac.uk/support/gxasc](https://www.ebi.ac.uk/support/gxasc)\

content/analyze/portals/analysis-portals/single-cell-expression-atlas.md

@@ -11,7 +11,11 @@ componentName: "analysisDetail"
 
 [Single Cell Expression Atlas](https://www.ebi.ac.uk/gxa/sc/home) supports research in single cell transcriptomics. The Atlas annotates publicly available single cell RNA-Seq experiments with ontology identifiers and re-analyses them using standardised pipelines available through iRAP, our RNA-Seq analysis toolkit. The browser enables visualisation of clusters of cells, their annotations and supports searches for gene expression within and across studies.
 
-[![Single Cell Expression Atlas](../../_images/portals/single-cell-expression-atlas.png)](https://www.ebi.ac.uk/gxa/sc/home)
+<figure-styles shadowless=true>
+
+![Single Cell Expression Atlas](../../_images/portals/single-cell-expression-atlas.png)
+
+</figure-styles>
 
 ## Contact
 Website: [https://www.ebi.ac.uk/support/gxasc](https://www.ebi.ac.uk/support/gxasc)\

content/analyze/portals/analysis-portals/single-cell-portal.md

@@ -15,7 +15,7 @@ componentName: "analysisDetail"
 3. centralizing downloadable data, visualizations, and analysis to enable reproducible analysis;
 4. providing easy and secure sharing mechanisms to support all stages of scientific inquiry.
 
-[![Single Cell Portal](../../_images/portals/single-cell-portal.png)](https://portals.broadinstitute.org/single_cell)
+![Single Cell Portal](../../_images/portals/single-cell-portal.png)
 
 ## Contact
 Single Cell Portal team ([[email protected]](mailto:[email protected]))

content/analyze/portals/analysis-portals/ucsc-cell-browser.md

@@ -11,7 +11,7 @@ componentName: "analysisDetail"
 
 [UCSC Cell Browser](http://cells.ucsc.edu/) is a software tool for single cell RNA expression, a 2D viewer that shows cells as a dimensionality reduction plot with the expression data overlaid. The viewer allows a visual comparison of large single-cell datasets in 2D, overlaying metadata, marker gene levels and cell clustering information. This is useful when comparing single cell layout (dimensionality reduction) methods and batch correction methods.
 
-[![UCSC Cell Browser](../../_images/portals/ucsc-cell-browser.png)](http://cells.ucsc.edu)
+![UCSC Cell Browser](../../_images/portals/ucsc-cell-browser.png)
 
 ## Contact
 Max Haeussler ([[email protected]](mailto:[email protected]))

content/analyze/portals/analysis-portals/ucsc-xena.md

@@ -13,7 +13,7 @@ componentName: "analysisDetail"
 
  Xena is built for performance, allowing you to dynamically view 1 million cells at a time. Xena downloads the latest HCA gene expression matrices available at [HCA Data Portal](/) and makes them available for visualization via our Visual Spreadsheet. 
 
-[![UCSC Xena single cell browser](../../_images/portals/ucsc-xena.png)](https://singlecell.xenahubs.net)
+![UCSC Xena single cell browser](../../_images/portals/ucsc-xena.png)
 
 Xena's Visual Spreadsheet is analogous to an office spreadsheet: it is a visual representation of a data grid where each column is a slice of genomic data (e.g. a gene or a set of genes' expression, inferred cell type, cell location), and each row is a single cell.
 

content/analyze/visualization/visualization-packages/anatomogram.md

@@ -14,7 +14,7 @@ componentName: "analysisDetail"
 
 Anatomogram is an interactive component to display an anatomical view of an organism. Selected species support alternative views depending on their specific anatomical features (e.g. male, female and brain in mouse and human, flower and full plant in rice). It uses SVGs where shapes representing organism parts are annotated with ontology accessions that are the IDs the component uses to receive and send events through callbacks.
 
-[![Anatomogram](../../_images/visualization/anatomogram.png)](https://gxa.github.io/anatomogram-demo)
+![Anatomogram](../../_images/visualization/anatomogram.png)
 
 ## Install
 `npm install anatomogram`

content/analyze/visualization/visualization-packages/ideogram.md

@@ -19,7 +19,7 @@ Ideogram supports drawing and animating genome-wide datasets for [human](https:/
 
 Ideogram can be embedded as a [reusable component](https://github.com/eweitz/ideogram#usage) in any web page or application, and leverages D3.js and SVG to achieve fast, crisp client-side rendering. You can also integrate Ideogram with JavaScript frameworks like [Angular](https://github.com/eweitz/ideogram/tree/master/examples/angular), [React](https://github.com/eweitz/ideogram/tree/master/examples/react), and [Vue](https://github.com/eweitz/ideogram/tree/master/examples/vue), as well as data science platforms like [R](https://github.com/eweitz/ideogram/tree/master/examples/r) and [Jupyter Notebook](https://github.com/eweitz/ideogram/tree/master/examples/jupyter).
 
-[![Ideogram](../../_images/visualization/ideogram.png)](https://eweitz.github.io/ideogram/annotations-histogram)
+![Ideogram](../../_images/visualization/ideogram.png)
 
 ## Install
 `npm install ideogram`

content/analyze/visualization/visualization-packages/igv.md

@@ -14,7 +14,7 @@ componentName: "analysisDetail"
 
 igv.js is an embeddable interactive genome visualization component based on the desktop Integrative Genomics Viewer (IGV).
 
-[![ivg](../../_images/visualization/igv.png)](http://igv.org/web/release/2.2.0/examples/bam.html)
+![ivg](../../_images/visualization/igv.png)
 
 ## Install
 `npm install igv`

content/analyze/visualization/visualization-packages/morpheus.md

@@ -14,7 +14,7 @@ componentName: "analysisDetail"
 
 Morpheus is versatile matrix visualization and analysis software. View your dataset as a heat map, then explore the interactive tools in Morpheus. Cluster, create new annotations, search, filter, sort, display charts, and more.
 
-[![Morpheus](../../_images/visualization/morpheus.png)](https://software.broadinstitute.org/morpheus)
+![Morpheus](../../_images/visualization/morpheus.png)
 
 ## Install
 `npm install morpheus-app`

content/guides/userguides/consumer-vignettes/export-to-terra.md

@@ -61,13 +61,21 @@ When you have found a data set of interest, click on the big blue *Export
 Selected Data* button at the top right of the page. You will see something like
 this:
 
+<figure-styles width="710">
+
 ![The *Export Selected Data* button](../../_images/terra-export_button.png)
 
+</figure-styles>
+
 Click on the *Export to Terra* button. You will then see a page like this where
 you can select what kind of data to export:
 
+<figure-styles shadowless=true>
+
 ![Page for choosing data to export](../../_images/terra-choose_files.png)
 
+</figure-styles>
+
 Again, choose anything that looks interesting.
 
 When you click the *Request Export* button, the Data Explorer will process your
@@ -79,33 +87,49 @@ Step two: importing data to Terra and finding a workflow in Dockstore
 Select a Terra workspace to import your selected data into. Once you have selected the
 workspace, you will see a page like this, showing the data you just exported:
 
+<figure-styles shadowless=true>
+
 ![Terra page showing exported data](../../_images/terra-exported_data.png)
 
+</figure-styles>
+
 Next, we find a workflow to run with the data we've just exported. For this
 tutorial, we are looking for *dockstore-wdl-workflow-md5sum*, which will
 generate an MD5 checksum for a file (or files) that we provide. We will need 
 to import this workflow from Dockstore. To do that, click on the *Workflows* 
 tab at the top of the page, then on the big square *Find a Workflow* button.
 It will look something like this:
 
+<figure-styles shadowless=true>
+
 ![Terra page showing workflows that can be added to workspace](../../_images/terra-workflows.png)
 
+</figure-styles>
+
 Click on the *Dockstore* link at the bottom of the pop-up. Dockstore is a
 workflow repository where we will find the workflow we want to run. Once
 Dockstore has loaded, search for `md5sum`. The search box is on the left 
 side of the page. Results should load instantly. Look for a workflow named
 `briandoconnor/dockstore-workflow-md5sum/dockstore-wdl-workflow-md5sum`.
 Once you find it, click on it. You will see this:
 
+<figure-styles shadowless=true>
+
 ![md5sum workflow on Dockstore](../../_images/terra-md5sum_dockstore.png)
 
+</figure-styles>
+
 Note the blue *Terra* button at the bottom left which will let us load this
 workflow in Terra. Click on the button and load the workflow into your
 workspace. Once you have, Terra will ask you to select an input to this
 workflow:
 
+<figure-styles shadowless=true>
+
 ![Terra input screen for md5sum workflow](../../_images/terra-md5sum_input.png)
 
+</figure-styles>
+
 Step three: running the workflow in Terra
 -----------------------------------------
 
@@ -127,8 +151,12 @@ deserve it.
 When you come back, refresh the page. Hopefully, your workflow will be done
 running. If it is, you will seem something like this:
 
+<figure-styles shadowless=true>
+
 ![Terra workflow done running](../../_images/terra-workflow_done.png)
 
+</figure-styles>
+
 Note the green checkmark in the *Status* column.
 
 Congrats! If you want to see the results of this workflow execution, click

content/guides/userguides/quick-start-guide.md

@@ -17,8 +17,11 @@ The Specimen's tab shows you how many specimens have been selected. It also give
 ## Preparing Data for Export
 After you identify a cohort of interest, you download the raw data, analysis files, and metadata by clicking the blue **Export Selected Data** icon on the right of the page.
 
+<figure-styles>
+
 ![Export Icon](../_images/Export_icon.png "Export Data")
 
+</figure-styles>
 
 This will open a new page giving you the option to:
  1) Download Selected Data Using "curl"

gatsby-config.js

@@ -122,8 +122,9 @@ module.exports = {
             options: {
               components: [
                 "button-cta",
-                "internal-link",
                 "data-lifecycle-diagram",
+                "figure-styles",
+                "internal-link",
                 "link-to-browser",
                 "metadata-type-entity-schemas"
               ]
@@ -156,7 +157,8 @@ module.exports = {
             resolve: `gatsby-remark-images`,
             options: {
               maxWidth: 1000,
-              linkImagesToOriginal: false
+              linkImagesToOriginal: false,
+              wrapperStyle: "box-shadow: 0 12px 24px -4px rgb(0 0 0 / 14%), 0 8px 16px -8px rgb(0 0 0 / 24%), 0 -6px 16px -6px rgb(0 0 0 / 24%); margin-bottom: 48px; margin-top: 48px;"
             }
           },
           `gatsby-remark-images-medium-zoom`,

src/components/analyze/analysisDetail.js

@@ -8,6 +8,9 @@
 // Core dependencies
 import React from "react";
 
+// App dependencies
+import Markdown from "../markdown/markdown";
+
 // Styles
 import compStyles from "./analysisDetail.module.css";
 import fontStyles from "../../styles/fontsize.module.css";
@@ -17,7 +20,7 @@ const classNames = require("classnames");
 
 function AnalysisDetail(props) {
   const { data } = props,
-    { frontmatter, html } = data,
+    { frontmatter, htmlAst } = data,
     { author, githubUrl, title } = frontmatter;
   const buttonClassNames = classNames(
     globalStyles.button,
@@ -45,7 +48,7 @@ function AnalysisDetail(props) {
           </a>
         ) : null}
       </div>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <Markdown>{htmlAst}</Markdown>
     </div>
   );
 }