Shiny UI Editor Project Walkthrough || Nick Strayer || RStudio
The Shiny UI Editor is a dynamic drag-and drop interface to help you design beautiful Shiny apps. The Shiny UI Editor is a visual tool for building the UI portion of a Shiny application that generates clean and human-readable code. The goal of the Shiny UI Editor is to allow people to build the broad-level UI for their Shiny app without writing code. The editor is intended for those who may not be comfortable with the HTML-style code of Shiny’s UI functions or who simply don’t want to fiddle with sizes to get things laid out correctly. Learn more about the Shiny UI Editor here: https://rstudio.github.io/shinyuieditor/ And read up on GridLayout here: https://rstudio.github.io/gridlayout Content: Nick Strayer (@NicholasStrayer) Producer: Jesse Mostipak (@kierisi) Editing and Motion Design: Tony Pelleriti (@TonyPelleriti)
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
So we have a hypothetical situation where we have discovered this chick weight dataset that exists built into R, it's one of the built-in datasets. So we have chick weight, it's got weight, time, chick, diet, and maybe we've made some plots with that stuff, so we look at chick weight over time, nice line plot, maybe we've looked at the density, and we say I want to build a Shiny app with this, I've got these nice plots and I want to put them in a Shiny app, but I'm dreading that aspect of going in and setting up that whole UI, because that's just code that I haven't written before, it's annoying to remember how to write it.
So that is a kind of a use case that the UI Editor is attempting to make a lot easier. So we can go in, in this project that we have that's empty, except for these chickplots.r script that has those plots, you know, we load the Shiny UI Editor, and then we say launch editor, and we give it this application, we call it chick-plots, and you notice we don't actually have chick-plots in here, and what it's going to do is recognize that doesn't exist yet, and ask you a few questions about creating it, so you say, you know, I want to start a new app from a template, you choose which template, right now we don't have that many, so we're going to do a single file template that is the Geyser app, run that, and now the UI Editor is up and running, and it's running just this simple Geyser app, just with two plots instead of the typical one, but it's an app that you are well familiar with.
Editing the app code live
So we can actually go in, we see now that there is chick-plots in here, we can click into that, and we see an app.r, and we can open that up, and this is the code that the UI Editor is currently running, and so we can see that if we want to change stuff, like say we have our header here, and it is spanning the whole top, we drag it over here, it updates, and we see now the header is only spanning the first column there, and so any update that you make in the UI Editor is automatically updated in the app code itself.
any update that you make in the UI Editor is automatically updated in the app code itself.
So that's nice, but what if you wanted to actually adjust what is being plotted? A lot of the fun stuff in Shiny apps is doing the plots, and so we already have render plots here for this disk plot and blue plot, and so what we can do is take some of our chick-plot data, and grab this code, and replace in our app.r this disk plot with that code, and we can save it, and you'll see that there's an error, we can check this, it says, okay, could not find function ggplot, so we actually need to load ggplot, so say library ggplot2, save that, another error, object chick not found, so let's go back in here one more time, filter, oh, this is a classic error, filter is one of those functions that exists in dplyr and also in the base, so we need to actually explicitly load dplyr, and now we've been making these changes directly to our server, looking at the errors that are coming through in the UI editor, and now we actually have that plot up and running in our app.
And so one of the things, we probably want to change this to not be disk plot, so we're going to call this, you know, weights, so we've updated, now it's not there, because it's looking for the plot output of weights, which we don't have, because we haven't renamed it, go in here, rename it to weights, save it, and it's back, and so we can continue doing this for a bunch of different things, so let's go take this distribution plot here, and let's replace the blue plot with that, blue plot, that paste in there, save it, there, there, a little bit confusingly called blue plot, even though we have some orange red distributions, so let's do the same thing here, call this distributions, or maybe call it dist, once again, it's gone, let's go fix it, save it, it's back, so you can see that we can just continue to make our changes here, let's call this chick weights, and code is continuing to update.
Wiring up a slider input
So one thing that we might want to do also is, we have this number of bins slider, which isn't doing anything for us right now, but we do have, we're filtering to a given number of chicks, in this case it's six, so what we might want to do is take this slider and repurpose it to decide that filtered number for us, so let's change it to num chicks, call it, chicks to plot, and I don't think we have that many, let's maybe set the min to one, max to, and start at a value that is reasonable, say five, and let's set a step value, so we don't have incremental, let's say step value of one, so we can go in here, we see that we actually have this slider up and running, but it's not hooked up to anything, but we now know that we have created an input id of num chicks, so we can just copy that, come over here, say input, input, dollar sign, num chicks, place that, copy this, get rid of that, because we don't need it anymore, save.
So in theory this will now change, but the classic factor problem is getting us, so it's not exactly doing what we want, because we're doing chick less than input number of chicks, it's not actually giving us the same value, and this is actually happening before we did this, it's just we didn't notice it, because we didn't count the lines, so we should go into chick weight, and we'll do mutate, chick equals as.numeric, as well as the si integer, and that might be right, there we go, now it's all fixed, but we can do all of that, you know, we can mess with our code, we can update our plots, and all we have to do is just go back and forth between the UI editor and the code.
The philosophy behind the editor
And so the idea is you don't have to sit there and fiddle with this, you know, grid card, what's the argument name, how do I, you know, where do I nest this, I want to put it over here, yeah, you don't need to worry about that, you can just focus on writing good data science, you know, doing correct plots, you know, doing your dplyr pipes properly, we want you to focus on those issues which are straightforward, and not this like, you know, crazy world that is how do you get your text to align properly in your ui, how do you make your header a little bit taller than it was before, that's stuff that doesn't influence how good you are as a data scientist, so we're trying to make that as easy as possible.
how do you make your header a little bit taller than it was before, that's stuff that doesn't influence how good you are as a data scientist, so we're trying to make that as easy as possible.
Handling unknown UI functions
You know, before we talked about like if we had a table, right, so we have like this code here, so we'll take that out here and we use output table so you actually put that table in here which so we go into this grid card that has nothing in it and we say gt and it's like gt output.
So this idea of like, you know, we have a table in here, we want to make it bigger so we can see the table, we have this table in here, but the UI editor doesn't support, doesn't have, you know, doesn't know about gt tables yet, and so what it does is it gives you this little gray box that says, hey, I have this ui function that I don't know about, here's the code, you can't edit it because I don't know about it, but it is treated just like any other node, so you could take this and put it up here, you know, and drag this down, it's not your tables in there, so you can like treat it just like you would any other node, but it doesn't know about it, and so the idea there is that we don't limit, you know, if you have some, you know, cool custom function or just a function that's not included yet, it's not going to make it so you can't use the UI editor, it just means that you won't be able to use a nice UI editor settings panel to change it, but you could still lay out your app and everything and place it where you want within the app, and then see what it is, so I think that's, that will help, you know, ideally in the future, every possible thing that you put in your Shiny app is known, but I don't think that's ever going to be the case, and so this is how that is treated on the editor, so that's important to know.
