Build SVG Custom User Interface

Render SVG as interactive figures to display contextual information, with selectable and clickable user interface elements. These figures can be seamlessly integrated into ‘rmarkdown’ and ‘Quarto’ documents, as well as ‘shiny’ applications, allowing manipulation of elements and reporting actions performed on them. Additional features include pan, zoom in/out functionality, and the ability to export the figures in SVG or PNG formats.

Installation

From CRAN

install.packages("bscui")

Dependencies

The following R packages available on CRAN are required:

• htmlwidgets: HTML Widgets for R
• webshot2: Take Screenshots of Web Pages

And those are suggested for building the vignettes and running some examples:

• knitr: A General-Purpose Package for Dynamic Report Generation in R
• rmarkdown: Dynamic Documents for R
• here: A Simpler Way to Find Your Files
• xml2: Parse XML
• dplyr: A Grammar of Data Manipulation
• readr: Read Rectangular Text Data
• stringr: Simple, Consistent Wrappers for Common String Operations
• glue: Interpreted String Literals
• scales: Scale Functions for Visualization
• shiny: Web Application Framework for R
• reactable: Interactive Data Tables for R
• reactable.extras: Extra Features for ‘reactable’ Package

From github

# devtools::install_github("patzaw/bscui")
install.packages("bscui", repos = c('https://patzaw.r-universe.dev', 'https://cloud.r-project.org'))

Documentation

• Introduction to bscui; this introduction vignette is also included in the package:

vignette("bscui")

• Preparing SVG: examples, tips and tricks

Examples

Building figures

This example relies on a figure of animal cells taken from SwissBioPics.

##################################@
### Preparing data ----

library(bscui)
library(xml2)
library(readr)
library(dplyr)

svg <- xml2::read_xml(system.file(
   "examples", "Animal_cells.svg.gz",
   package="bscui"
))
info <- readr::read_tsv(system.file(
   "examples", "uniprot_cellular_locations.txt.gz",
   package="bscui"
), col_types=strrep("c", 6)) |>
   mutate(id = sub("-", "", `Subcellular location ID`))

##################################@
### Building the figure ----

figure <- bscui(svg) |>
   set_bscui_ui_elements(
      info |>
         mutate(
            ui_type = "selectable",
            title = Name
         ) |>
         select(id, ui_type, title)
   ) |>
   set_bscui_styles(
      info |>
         filter(Name == "Cytosol") |>
         mutate(fill = "#FF7F7F") |>
         select(id, fill)
   ) |>
   set_bscui_attributes(
      info |>
         filter(Name == "Cytoskeleton") |>
         mutate(display = "none") |>
         select(id, display)
   ) |>
   set_bscui_selection("SL0188") |>
   set_bscui_options(zoom_min=1, clip=TRUE)
figure

##################################@
### Saving the figure ----

if(interactive()){
   ## Temporary directory to save example file
   tdir <- tempdir()

   ## Interactive html file
   f_path <- file.path(tdir, "figure.html")
   figure |> htmlwidgets::saveWidget(file=f_path)
   cat(f_path)

   ## PNG image
   f_path <- file.path(tdir, "figure.png")
   figure |>
      set_bscui_options(show_menu = FALSE) |>
      export_bscui_to_image(file=f_path, zoom=2)
   cat(f_path)
}

Figures in ‘shiny’

The following ‘shiny’ application relies on human female anatomical diagram taken from the EBI gene expression group.

shiny::runApp(system.file("examples", "shiny-anatomogram", package = "bscui"))