The hardware and bandwidth for this mirror is donated by METANET, the Webhosting and Full Service-Cloud Provider.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]metanet.ch.

dockViewR

The goal of dockViewR is to provide a layout manager for Shiny apps and interactive R documents. It builds on top of dockview.

Installation

You can install the development version of dockViewR like so:

pak::pak("cynkra/dockViewR")

Example

This is a basic example which shows you how to solve a common problem:

library(shiny)
library(bslib)
library(visNetwork)
library(dockViewR)

nodes <- data.frame(id = 1:3)
edges <- data.frame(from = c(1, 2), to = c(1, 3))

ui <- page_fillable(
  dockViewOutput("dock")
)

server <- function(input, output, session) {
  exportTestValues(
    panel_ids = get_panels_ids("dock"),
    active_group = get_active_group("dock"),
    grid = get_grid("dock")
  )

  output$dock <- renderDockView({
    dock_view(
      panels = list(
        panel(
          id = "1",
          title = "Panel 1",
          content = tagList(
            sliderInput(
              "obs",
              "Number of observations:",
              min = 0,
              max = 1000,
              value = 500
            ),
            plotOutput("distPlot")
          )
        ),
        panel(
          id = "2",
          title = "Panel 2",
          content = tagList(
            visNetworkOutput("network")
          ),
          position = list(
            referencePanel = "1",
            direction = "right"
          ),
          minimumWidth = 500
        ),
        panel(
          id = "3",
          title = "Panel 3",
          content = tagList(
            selectInput(
              "variable",
              "Variable:",
              c("Cylinders" = "cyl", "Transmission" = "am", "Gears" = "gear")
            ),
            tableOutput("data")
          ),
          position = list(
            referencePanel = "2",
            direction = "below"
          )
        )
      ),
      theme = "replit"
    )
  })

  output$distPlot <- renderPlot({
    req(input$obs)
    hist(rnorm(input$obs))
  })

  output$network <- renderVisNetwork({
    visNetwork(nodes, edges, width = "100%")
  })

  output$data <- renderTable(
    {
      mtcars[, c("mpg", input$variable), drop = FALSE]
    },
    rownames = TRUE
  )
}

shinyApp(ui, server)

Contributing

We welcome contributions! If you’d like to help improve {dockViewR}, feel free to submit issues, feature requests, or pull requests.

Knowledge pre-requisites

{dockViewR} is an htmlwidget, an interactive widget for R, powered by a JS library. To get a minimum starting kit:

• “Quick and Dirty” intro to JS for R devs: https://rsc.cynkra.com/js4Shiny/#/welcome.
• About htmlwidgets: https://www.htmlwidgets.org/develop_intro.html.

Software pre-requisite

To contribute to this project, you’ll need npm, node, and the R package {packer} to compile the JavaScript code. Please follow the slides attached to help you get started pre-requisites. When you are in the project, do the following:

pak::pak("packer")
# Restore JavaScript dependencies in package-lock.json (a bit like the renv.lock)
packer::npm_install()

The JS code uses ES6 modules, meaning that you can define a module in a srcjs/component.js script as follows:

export const blabla = () => {
  console.log("Blabla");
}

and use it in another script, let’s say ./otherscript.js like so:

// ./otherscript.js
import { blabla } from './components.js'

Whenever you are done with changing the JS script, you have to rebuild it:

# Change the code and then rebundle
packer::bundle("development") # For developement mode
packer::bundle() # For production. Defaut!

You may as well bundle for dev using packer::bundle_dev() when in developer mode and when ready for production use packer::bundle_prod(). You may also consider watch() which watches for changes in the srcjs and rebuilds if necessary, equivalent to ⁠npm run watch⁠.

Debugging steps

1. Whenever you run an app using {dockViewR}, like in inst/examples/demo, open the viewer on a web browser window (preferably Chrome as it is used to illustrate the action in this step, as other browser devtools differ in term of layout).
2. Right-click on the widget and navigate to the inspect option on the drop-down menu.
3. At the top, where the tabs are displayed, navigate to the Sources tab. Open from the sidepanel dockviewer/srcjs/widgets/dockview.js script . Once the dockview.js script is opened on the main panel. You can set a breakpoint on any line number of the script and reload the page.

Acknowledgments

This package is built on top of the amazing dockview JavaScript library.

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.