Diagnostic Information for R Shiny Apps: Appsilon's Shiny.info Package
<em><strong>Updated</strong>: January 24, 2023.</em> At Appsilon, we thrive on supporting the open-source community with innovative open-source packages. As we have already mentioned at various <a href="https://www.youtube.com/watch?v=MOQdR8pGots">R conferences</a>, the typical cycle of our work is: identification of a repeating programming problem, solving it, wrapping it into a package, testing internally, and once we decide it’s useful, happily sharing it with the R community. This happened with <a href="https://github.com/Appsilon/shiny.semantic">shiny.semantic</a> first and was followed by the release of <a href="https://github.com/Appsilon/shiny.router">shiny.router</a>, <a href="https://github.com/Appsilon/shiny.collections">shiny.collections</a>, <a href="https://github.com/Appsilon/semantic.dashboard">semantic.dashboard</a>, and more recently <a href="https://github.com/Appsilon/shiny.i18n">shiny.i18n</a>. <code>shiny.info</code> is an open-source package for R Shiny that allows developers to display diagnostic information in a div located in the corner of a Shiny app. The <a href="https://cran.r-project.org/package=shiny.info">package</a> is available on the Comprehensive R Archive Network (CRAN) and you can make use of it simply by running the following command from the R console: <pre><code class="language-r">install.packages("shiny.info)</code></pre> <h2>How to Display R Shiny Diagnostic Information with shiny.info</h2> In our daily work, we came across a problem of debugging Shiny apps that often ended with a query: “Oh, but actually what version of the app are you using?”, or “Are you sure that you are in the proper branch?”. You could say there is no problem with checking that with code or with the terminal. But… if you work with a UI expert or you make an A/B test, you’d rather have that information displayed somewhere in your Shiny app rather than switching back and forth to the console. Shiny.info enables exactly that! It allows developers to display any diagnostic information they need in the div located in the app corner. We created some helper functions for you. But before diving into them, let's first create a baseline R Shiny app. Simply copy the following code: <pre><code class="language-r">library(shiny) library(shiny.info) <br>ui <- pageWithSidebar( headerPanel("Iris k-means clustering"), sidebarPanel( selectInput("xcol", "X Variable", names(iris)), selectInput("ycol", "Y Variable", names(iris), selected = names(iris)[[2]] ), numericInput("clusters", "Cluster count", 3, min = 1, max = 9 ) ), mainPanel( plotOutput("plot") ) ) <br>server <- function(input, output) { selectedData <- reactive({ iris[, c(input$xcol, input$ycol)] }) <br> clusters <- reactive({ kmeans(selectedData(), input$clusters) }) <br> output$plot <- renderPlot({ palette(c( "#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999" )) <br> par(mar = c(5.1, 4.1, 0, 1)) plot(selectedData(), col = clusters()$cluster, pch = 20, cex = 3 ) points(clusters()$centers, pch = 4, cex = 4, lwd = 4) }) } <br>shinyApp(ui = ui, server = server)</code></pre> Here's what the app looks like: <img class="size-full wp-image-17589" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d6d5c24a1b8139c57a74_f87f574d_1-4.webp" alt="Image 1 - Shiny dashboard (starting point)" width="1754" height="1324" /> Image 1 - Shiny dashboard (starting point) Let's proceed with showing R Shiny Diagnostic information. <h3>Current App Version</h3> You can easily display the current version of the app from the global variable <code>VERSION</code>. Here, we'll display it in the top right corner: <pre><code class="language-r">VERSION = "1.5.0" <br>ui <- tagList( shiny.info::version(position = "top right"), <br> pageWithSidebar( headerPanel("Iris k-means clustering"), sidebarPanel( selectInput("xcol", "X Variable", names(iris)), selectInput("ycol", "Y Variable", names(iris), selected = names(iris)[[2]] ), numericInput("clusters", "Cluster count", 3, min = 1, max = 9 ) ), mainPanel( plotOutput("plot") ) ) )</code></pre> <img class="size-full wp-image-17591" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d6d6917cd6e11222039e_ec98e636_2-4.webp" alt="Image 2 - App version (top right)" width="1754" height="1324" /> Image 2 - App version (top right) <h3>Application Author</h3> Another thing you can do is provide information about the application's author and provide a link to their website. All of this is made possible with the convenient <code>powered_by()</code> function: <pre><code class="language-r">VERSION = "1.5.0" <br>ui <- tagList( shiny.info::version(position = "top right"), shiny.info::powered_by("Appsilon", "https://appsilon.com", position = "bottom right"), <br> pageWithSidebar( headerPanel("Iris k-means clustering"), sidebarPanel( selectInput("xcol", "X Variable", names(iris)), selectInput("ycol", "Y Variable", names(iris), selected = names(iris)[[2]] ), numericInput("clusters", "Cluster count", 3, min = 1, max = 9 ) ), mainPanel( plotOutput("plot") ) ) )</code></pre> <img class="size-full wp-image-17593" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d6d725b5dfc1d5c94da3_d28bb566_3-4.webp" alt="Image 3 - App powered by (bottom right)" width="1754" height="1324" /> Image 3 - App powered by (bottom right) <h3>Displaying Generic Messages</h3> You're not limited to displaying only "useful" diagnostic messages. You can write any message you want by using the <code>display()</code> function. Let's see how to use it to display a string in the top left corner: <pre><code class="language-r">VERSION = "1.5.0" <br>ui <- tagList( shiny.info::version(position = "top right"), shiny.info::powered_by("Appsilon", "https://appsilon.com", position = "bottom right"), shiny.info::display("Dignostic info about this dashboard", position = "top left"), <br> pageWithSidebar( headerPanel("Iris k-means clustering"), sidebarPanel( selectInput("xcol", "X Variable", names(iris)), selectInput("ycol", "Y Variable", names(iris), selected = names(iris)[[2]] ), numericInput("clusters", "Cluster count", 3, min = 1, max = 9 ) ), mainPanel( plotOutput("plot") ) ) )</code></pre> <img class="size-full wp-image-17595" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01c76970879e28df5b3e7_4-4.webp" alt="Image 4 - Diagnostic message (top left)" width="1754" height="1324" /> Image 4 - Diagnostic message (top left) <h3>Showing Info Values</h3> And finally, let's take a peek into displaying info values. These are useful when you want to show reactive values in a more textual form. We'll use it to display the column name currently passed for the X-axis. The actual logic takes place in the <code>server()</code> function, so don't forget to update it: <pre><code class="language-r">VERSION = "1.5.0" <br>ui <- tagList( shiny.info::version(position = "top right"), shiny.info::powered_by("Appsilon", "https://appsilon.com", position = "bottom right"), shiny.info::display("Dignostic info about this dashboard", position = "top left"), shiny.info::info_value("test_info_value", position = "bottom left"), <br> pageWithSidebar( headerPanel("Iris k-means clustering"), sidebarPanel( selectInput("xcol", "X Variable", names(iris)), selectInput("ycol", "Y Variable", names(iris), selected = names(iris)[[2]] ), numericInput("clusters", "Cluster count", 3, min = 1, max = 9 ) ), mainPanel( plotOutput("plot") ) ) ) <br>server <- function(input, output) { output$test_info_value <- shiny.info::render_info_value(input$xcol) ... }</code></pre> <img class="size-full wp-image-17597" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d6d984d9192ab6b1af76_89b10976_5-3.webp" alt="Image 5 - Test info value (bottom left)" width="1754" height="1324" /> Image 5 - Test info value (bottom left) <h3>Additional Examples</h3> For more examples and documentation details, we encourage you to visit the <a href="https://github.com/Appsilon/shiny.info">shiny.info</a> GitHub page. Please let us know in the comments what you think about this package. Alternatively, you can open Issues or PRs on our repository with any ideas for improvement. The package is still in its infancy, but we hope that it will be immediately useful for Shiny developers. Enjoy and add the info to your apps! <blockquote>Want to learn more about shiny.info? <a href="https://appsilon.com/appsilons-shiny-info-development-and-testing-shiny-package-released-on-cran/">Check out our follow-up article</a>.</blockquote> <hr /> <h3>Follow Us for More</h3><ul><li>Follow <a href="https://twitter.com/appsilon">@Appsilon</a> on Twitter</li><li>Follow Appsilon on <a href="https://www.linkedin.com/company/appsilon">LinkedIn</a></li><li>Learn more about our R Shiny <a href="https://appsilon.com/opensource/">open-source</a> packages</li></ul>
.png)
