From 7c5f66a0b4229abcc107d50c286ebf7615c772ef Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 29 Jul 2021 17:12:02 +1000 Subject: [PATCH] Add optional drop shadow for markdown images component. #1027. --- .../analyze/methods/methods-packages/infer.md | 4 +- .../methods/methods-packages/stream.md | 4 +- .../analyze/portals/analysis-portals/asap.md | 2 +- .../analysis-portals/bioturing-browser.md | 2 +- .../portals/analysis-portals/cellxgene.md | 6 +- .../portals/analysis-portals/cytoscape.md | 2 +- .../portals/analysis-portals/dnastack.md | 6 +- .../genepattern-notebook-environment.md | 2 +- .../analysis-portals/hca-galaxy-instance.md | 2 +- .../single-cell-expression-atlas.md | 6 +- .../analysis-portals/single-cell-portal.md | 2 +- .../analysis-portals/ucsc-cell-browser.md | 2 +- .../portals/analysis-portals/ucsc-xena.md | 2 +- .../visualization-packages/anatomogram.md | 2 +- .../visualization-packages/ideogram.md | 2 +- .../visualization-packages/igv.md | 2 +- .../visualization-packages/morpheus.md | 2 +- .../consumer-vignettes/export-to-terra.md | 28 +++++ .../guides/userguides/quick-start-guide.md | 3 + gatsby-config.js | 6 +- src/components/analyze/analysisDetail.js | 7 +- src/components/figure-styles/figure-styles.js | 110 ++++++++++++++++++ src/components/markdown/markdown.js | 2 + 23 files changed, 183 insertions(+), 23 deletions(-) create mode 100644 src/components/figure-styles/figure-styles.js diff --git a/content/analyze/methods/methods-packages/infer.md b/content/analyze/methods/methods-packages/infer.md index ca770e5be..d2b0cef6b 100644 --- a/content/analyze/methods/methods-packages/infer.md +++ b/content/analyze/methods/methods-packages/infer.md @@ -12,7 +12,7 @@ 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. @@ -20,7 +20,7 @@ InferCNV provides access to several residual expression filters to explore minim 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 diff --git a/content/analyze/methods/methods-packages/stream.md b/content/analyze/methods/methods-packages/stream.md index cd7522ea8..b3aa82b2e 100644 --- a/content/analyze/methods/methods-packages/stream.md +++ b/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 diff --git a/content/analyze/portals/analysis-portals/asap.md b/content/analyze/portals/analysis-portals/asap.md index 7dbc1881b..f45741941 100644 --- a/content/analyze/portals/analysis-portals/asap.md +++ b/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 ([Vincent.Gardeux@epfl.ch](mailto:Vincent.Gardeux@epfl.ch))\ diff --git a/content/analyze/portals/analysis-portals/bioturing-browser.md b/content/analyze/portals/analysis-portals/bioturing-browser.md index 24174678b..dab00353e 100644 --- a/content/analyze/portals/analysis-portals/bioturing-browser.md +++ b/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 ([sonpham@bioturing.com](mailto:sonpham@bioturing.com)) diff --git a/content/analyze/portals/analysis-portals/cellxgene.md b/content/analyze/portals/analysis-portals/cellxgene.md index 94cc50d34..0603a3893 100644 --- a/content/analyze/portals/analysis-portals/cellxgene.md +++ b/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) + + +![cellxgene](../../_images/portals/cellxgene.png) + + ## Contact Fiona Griffin ([fiona.griffin@chanzuckerberg.com](mailto:fiona.griffin@chanzuckerberg.com)) diff --git a/content/analyze/portals/analysis-portals/cytoscape.md b/content/analyze/portals/analysis-portals/cytoscape.md index d626a1609..727e313df 100644 --- a/content/analyze/portals/analysis-portals/cytoscape.md +++ b/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) ([cytoscape-helpdesk@googlegroups.com](mailto:cytoscape-helpdesk@googlegroups.com)) diff --git a/content/analyze/portals/analysis-portals/dnastack.md b/content/analyze/portals/analysis-portals/dnastack.md index 93fe8d3ec..7ad5a71f1 100644 --- a/content/analyze/portals/analysis-portals/dnastack.md +++ b/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) + + +![DNAstack](../../_images/portals/dnastack.jpg) + + ## Contact General information ([info@dnastack.com](mailto:info@dnastack.com)) diff --git a/content/analyze/portals/analysis-portals/genepattern-notebook-environment.md b/content/analyze/portals/analysis-portals/genepattern-notebook-environment.md index e353b00a1..a0e5baa8e 100644 --- a/content/analyze/portals/analysis-portals/genepattern-notebook-environment.md +++ b/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 ([genepattern-team@broadinstitute.org](mailto:genepattern-team@broadinstitute.org)) diff --git a/content/analyze/portals/analysis-portals/hca-galaxy-instance.md b/content/analyze/portals/analysis-portals/hca-galaxy-instance.md index c106106f7..2cadf2631 100644 --- a/content/analyze/portals/analysis-portals/hca-galaxy-instance.md +++ b/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)\ diff --git a/content/analyze/portals/analysis-portals/single-cell-expression-atlas.md b/content/analyze/portals/analysis-portals/single-cell-expression-atlas.md index b7fb9bad2..71a26b087 100644 --- a/content/analyze/portals/analysis-portals/single-cell-expression-atlas.md +++ b/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) + + +![Single Cell Expression Atlas](../../_images/portals/single-cell-expression-atlas.png) + + ## Contact Website: [https://www.ebi.ac.uk/support/gxasc](https://www.ebi.ac.uk/support/gxasc)\ diff --git a/content/analyze/portals/analysis-portals/single-cell-portal.md b/content/analyze/portals/analysis-portals/single-cell-portal.md index e0a3fd160..50e01d192 100644 --- a/content/analyze/portals/analysis-portals/single-cell-portal.md +++ b/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 ([scp-support@broadinstitute.zendesk.com](mailto:scp-support@broadinstitute.zendesk.com)) diff --git a/content/analyze/portals/analysis-portals/ucsc-cell-browser.md b/content/analyze/portals/analysis-portals/ucsc-cell-browser.md index 5f132a4c8..490990395 100644 --- a/content/analyze/portals/analysis-portals/ucsc-cell-browser.md +++ b/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 ([max@soe.ucsc.edu](mailto:max@soe.ucsc.edu)) diff --git a/content/analyze/portals/analysis-portals/ucsc-xena.md b/content/analyze/portals/analysis-portals/ucsc-xena.md index c29f23d75..73999db6f 100644 --- a/content/analyze/portals/analysis-portals/ucsc-xena.md +++ b/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. diff --git a/content/analyze/visualization/visualization-packages/anatomogram.md b/content/analyze/visualization/visualization-packages/anatomogram.md index 6f3dfe65a..92d2fd8df 100644 --- a/content/analyze/visualization/visualization-packages/anatomogram.md +++ b/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` diff --git a/content/analyze/visualization/visualization-packages/ideogram.md b/content/analyze/visualization/visualization-packages/ideogram.md index 1bdf85f91..e4f8d9397 100644 --- a/content/analyze/visualization/visualization-packages/ideogram.md +++ b/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` diff --git a/content/analyze/visualization/visualization-packages/igv.md b/content/analyze/visualization/visualization-packages/igv.md index c600b40df..1c3179cf9 100644 --- a/content/analyze/visualization/visualization-packages/igv.md +++ b/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` diff --git a/content/analyze/visualization/visualization-packages/morpheus.md b/content/analyze/visualization/visualization-packages/morpheus.md index 8daac6f02..e8be98672 100644 --- a/content/analyze/visualization/visualization-packages/morpheus.md +++ b/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` diff --git a/content/guides/userguides/consumer-vignettes/export-to-terra.md b/content/guides/userguides/consumer-vignettes/export-to-terra.md index 7d653bb4d..80f8315d4 100644 --- a/content/guides/userguides/consumer-vignettes/export-to-terra.md +++ b/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: + + ![The *Export Selected Data* button](../../_images/terra-export_button.png) + + 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: + + ![Page for choosing data to export](../../_images/terra-choose_files.png) + + Again, choose anything that looks interesting. When you click the *Request Export* button, the Data Explorer will process your @@ -79,8 +87,12 @@ 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: + + ![Terra page showing exported data](../../_images/terra-exported_data.png) + + 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 @@ -88,8 +100,12 @@ 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: + + ![Terra page showing workflows that can be added to workspace](../../_images/terra-workflows.png) + + 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 @@ -97,15 +113,23 @@ 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: + + ![md5sum workflow on Dockstore](../../_images/terra-md5sum_dockstore.png) + + 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: + + ![Terra input screen for md5sum workflow](../../_images/terra-md5sum_input.png) + + 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: + + ![Terra workflow done running](../../_images/terra-workflow_done.png) + + Note the green checkmark in the *Status* column. Congrats! If you want to see the results of this workflow execution, click diff --git a/content/guides/userguides/quick-start-guide.md b/content/guides/userguides/quick-start-guide.md index f1fc2454a..08716aa96 100644 --- a/content/guides/userguides/quick-start-guide.md +++ b/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. + + ![Export Icon](../_images/Export_icon.png "Export Data") + This will open a new page giving you the option to: 1) Download Selected Data Using "curl" diff --git a/gatsby-config.js b/gatsby-config.js index c71ae3b9b..93a7a65b0 100644 --- a/gatsby-config.js +++ b/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`, diff --git a/src/components/analyze/analysisDetail.js b/src/components/analyze/analysisDetail.js index 0447873df..63e913e59 100644 --- a/src/components/analyze/analysisDetail.js +++ b/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) { ) : null} -
+ {htmlAst}
); } diff --git a/src/components/figure-styles/figure-styles.js b/src/components/figure-styles/figure-styles.js new file mode 100644 index 000000000..ddc0883ec --- /dev/null +++ b/src/components/figure-styles/figure-styles.js @@ -0,0 +1,110 @@ +/* + * Human Cell Atlas + * https://www.humancellatlas.org/ + * + * HCA Data Portal figure styles component. + * Provides additional styles to any markdown image i.e. removes the box shadow or specifies a max width. + * Use of this component within markdown is possible. + * + * Children + * -------- + * Children should have the following format: + * ![HCA Overview](/_images/hca-overview.png) + * + * For example, + * + * + * ![HCA Overview](/_images/hca-overview.png) + * + * + * + * Or for example when using inside a list element, + * - exploring HCA browser + * + * ![Exploring HCA Browser](_images/hca-explore-browser.png) + * + * - exploring HCA portal + * + * Props + * ----- + * - shadowless: a true value will remove the box shadow style applied to the image container. + * - width: a numerical string value used to specify the max width for the image container. + */ + +// Core dependencies +import React, { useCallback, useEffect, useRef } from "react"; + +function FigureStyles(props) { + const { children, shadowless, width } = props; + const refFigure = useRef(null); + const figureEl = children?.filter(child => child?.type); // Filter for React Elements. + const figureExists = figureEl && figureEl.length > 0; + + const getComponentStyles = useCallback(() => { + /* Handles rehype shadowless prop boolean value. */ + const removeBoxShadow = shadowless ? JSON.parse(shadowless) : false; + + /* Build the new component styles. */ + const styleBoxShadow = removeBoxShadow ? "box-shadow: none;" : null; + const styleMaxWidth = width ? `max-width: ${width}px;` : null; + const styles = Array.from([]); + + /* Add new box shadow style. */ + if (styleBoxShadow) { + styles.push(styleBoxShadow); + } + + /* Add new max width style. */ + if (styleMaxWidth) { + styles.push(styleMaxWidth); + } + + return styles.join(" "); + }, [shadowless, width]); + + const getGatsbyRespImageWrapperEl = () => { + const el = refFigure.current; + + if (el?.classList.contains("gatsby-resp-image-wrapper")) { + return el; + } + + return el?.querySelector(".gatsby-resp-image-wrapper"); + }; + + const getGatsbyRespImageWrapperStyles = useCallback( + el => { + const wrapperStyles = el.getAttribute("style"); + const componentStyles = getComponentStyles(); + + return wrapperStyles.concat(componentStyles); + }, + [getComponentStyles] + ); + + const mergeStyles = useCallback(() => { + /* Grab the element with classname gatsby-resp-image-wrapper. */ + const el = getGatsbyRespImageWrapperEl(); + + if (el) { + const styles = getGatsbyRespImageWrapperStyles(el); + el.setAttribute("style", styles); + } + }, [getGatsbyRespImageWrapperStyles]); + + /* useEffect - componentDidMount/componentWillUnmount. */ + useEffect(() => { + /* Merge styles. */ + mergeStyles(); + }, [mergeStyles]); + + return figureExists ? ( + React.Children.map(figureEl, figEl => + React.cloneElement(figEl, { ref: refFigure }) + ) + ) : ( +

** Image Render Error **

+ ); +} + +export default FigureStyles; diff --git a/src/components/markdown/markdown.js b/src/components/markdown/markdown.js index 20b384017..233516241 100644 --- a/src/components/markdown/markdown.js +++ b/src/components/markdown/markdown.js @@ -12,6 +12,7 @@ import rehypeReact from "rehype-react"; // App dependencies import ButtonCta from "../button-cta/button-cta"; import DataLifecycleDiagram from "../dataLifecycleDiagram/dataLifecycleDiagram"; +import FigureStyles from "../figure-styles/figure-styles"; import InternalLink from "../internal-link/internalLink"; import LinkToBrowser from "../linkToBrowser/linkToBrowser"; import MetadataTypeEntitySchemas from "../metadata/metadataTypeEntitySchemas/metadataTypeEntitySchemas"; @@ -29,6 +30,7 @@ function Markdown(props) { components: { "button-cta": ButtonCta, "data-lifecycle-diagram": DataLifecycleDiagram, + "figure-styles": FigureStyles, "internal-link": InternalLink, "link-to-browser": LinkToBrowser, "metadata-type-entity-schemas": MetadataTypeEntitySchemas