From 981f9361a940d5075b08942e864ca6176f7b8180 Mon Sep 17 00:00:00 2001 From: George Chen <72078254+jiajic@users.noreply.github.com> Date: Tue, 12 Nov 2024 10:14:07 -0500 Subject: [PATCH] css edits --- pkgdown/extra.css | 43 +++++---------- vignettes/obj_create_sc.Rmd | 6 +-- vignettes/object_creation.Rmd | 99 +++++++++++++++++++++++++---------- 3 files changed, 88 insertions(+), 60 deletions(-) diff --git a/pkgdown/extra.css b/pkgdown/extra.css index b9d878162..8fd0c244f 100644 --- a/pkgdown/extra.css +++ b/pkgdown/extra.css @@ -1,30 +1,3 @@ -.button { - display: inline-block; - width: 300px; - height: 40px; - line-height: 40px; - margin: 5px; - background-color: #233B51; - border-color: #233B51; - color: white; - text-decoration: none; - border-radius: 10px; - transition: background-color 0.3s; - text-align: center; -} - -.button:hover { - background-color: #7E69AE; - border-color: #233B51; - border-radius: 4px; - border-radius: 10px; - text-decoration: none; - background-color: #ddd; - transition: color 0.3s; - color: black; -} - - .gallery { display: grid; grid-gap: 15px; @@ -43,10 +16,13 @@ border: 1px solid #ddd; border-radius: 8px; padding: 15px; - text-align: center; - transition: transform 0.2s; text-decoration: none; + text-align: center; color: inherit; + height: 325px; + display: flex; + flex-direction: column; + transition: transform 0.2s; } .tile:hover { @@ -55,8 +31,17 @@ text-decoration: none; } +.tile > div:first-child { + margin-top: 0; +} + .tile img { max-width: 100%; height: auto; + margin-top: auto; +} + +.tile strong { + display: block; margin-bottom: 10px; } diff --git a/vignettes/obj_create_sc.Rmd b/vignettes/obj_create_sc.Rmd index 6cf3b9cd7..cd8c6b555 100644 --- a/vignettes/obj_create_sc.Rmd +++ b/vignettes/obj_create_sc.Rmd @@ -29,7 +29,7 @@ library(Giotto) -### Download data to use +# Download data to use The example dataset used here is from 10X [link](https://www.10xgenomics.com/datasets/Human_PBMCs_Next_GEM_Flex_GEM-X_Flex_Comparison) @@ -43,7 +43,7 @@ save_path <- file.path(data_path, "pbmc_matrix.h5") utils::download.file(link, destfile = save_path, method = "wget") ``` -### Read the data +# Read the data Read the expression matrix, which is provided from 10X as an h5 format. `get10Xmatrix_h5()` is a convenience function from `Giotto` that will import this format as a *Matrix* `dgCMatrix` sparse matrix. @@ -51,7 +51,7 @@ Read the expression matrix, which is provided from 10X as an h5 format. `get10Xm pbmc_mat <- get10Xmatrix_h5(save_path) ``` -### Load into Giotto as a single cell analysis +# Load into Giotto as a single cell analysis Single cell datasets should be loaded in through `createGiottoObject()`. During the load, a set of dummy spatial locations that can be safely ignored will also be generated. diff --git a/vignettes/object_creation.Rmd b/vignettes/object_creation.Rmd index 5b1a82c3c..e1195ca13 100644 --- a/vignettes/object_creation.Rmd +++ b/vignettes/object_creation.Rmd @@ -13,11 +13,56 @@ vignette: > %\VignetteEncoding{UTF-8} --- +```{css, echo=FALSE} +/* Container for each datatype section */ +.datatype-section { + display: flex; + align-items: start; + gap: 2rem; + margin-bottom: 2rem; +} + +/* Text content container */ +.datatype-content { + flex: 1; +} + +/* Image container */ +.datatype-image { + flex: 0 0 45%; + margin: 0; + align-items: start; +} + +/* Ensure images are responsive */ +.datatype-image img { + max-width: 100%; + height: auto; +} + +/* Clear any existing floats */ +.datatype-section::after { + content: ""; + display: table; + clear: both; +} + +/* custom header */ +.header-custom { + margin-top: 0px; + margin-bottom: 5px; + display: block; + font-size: 1.4em; + font-weight: bold; +} +``` # Spatial Omic Datatypes Spatial omics data can be provided either as aggregated data or raw features information. +
+ ```{r, echo=FALSE} heads <- c("Aggregated Data", "Raw Features", "Spatial Unit") txt <- c( @@ -25,18 +70,18 @@ txt <- c( "Feature information about the tissue that has not been aggregated. These features can be paired with a spatial unit to enable aggregate data-based analyses.
Raw features can include molecule detections with an ID and xy(z) coordinates in tabular format (e.g., transcripts), or a matrix of intensity values, typically in image format.", "Spatial units provide functional context to raw features, allowing them to be aggregated and treated as units of study. These can be artificial (e.g., spatial bins), biological (e.g., cell or nuclear segmentations), or technical (e.g., arrays of spots reflecting the assay's construction).
Annotations can either be provided as 2D raster image/matrix-like format where the integer values of matrix cells or raster pixels both identify and define the region covered by each annotation, or as a vector-type format where the vertices of the polygons are provided." ) -imgs <- sprintf( - '', - c( +imgs <- c( "images/object_creation/Giotto_Datatypes-agg.png", "images/object_creation/Giotto_Datatypes-ft.png", "images/object_creation/Giotto_Datatypes-su.png" - ) ) -knitr::asis_output(paste0(sprintf( - '
%s

%s

%s

', - imgs, heads, txt -))) + +sprintf( + '

%s

%s

%s
', + heads, txt, imgs, heads +) |> + paste0() |> + knitr::asis_output() ``` @@ -52,37 +97,35 @@ See the following for instructions on setting up a custom `giotto` object with t ```{r, echo=FALSE} -tile_imgs <- vapply( +tile_imgs <- sprintf( + '', c( "images/object_creation/1_spatplot_aggregate.png", "images/object_creation/4_align.png", "images/object_creation/9_align2.png" - ), - function(im_path) knitr::sew(knitr::include_graphics(im_path)), - FUN.VALUE = character(1L) + ) +) + +tile_links <- c( + "obj_create_agg.html", + "obj_create_pnts.html", + "obj_create_img.html" +) + +tile_txt <- c( + "Matrix and Spatial Locations", + "Feature detection (points) and cell annotations (vector polygons)", + "Staining images and cell annotations (raster mask/polygons)" ) tile <- sprintf( - "%s%s", - c( - "Matrix and Spatial Locations", - "Feature detection (points) and cell annotations (vector polygons)", - "Staining images and cell annotations (raster mask/polygons)" - ), - tile_imgs + '
%s
%s', + tile_links, tile_txt, tile_imgs ) knitr::asis_output(paste0( '
', - '', - tile[[1L]], - '', - '', - tile[[2L]], - '', - '', - tile[[3L]], - '', + tile[[1L]], tile[[2L]], tile[[3L]], '
' )) ```