Reactive Web Dashboards with Shiny Transcripts
Chapter: Advanced UIs
Lecture: Value boxes tabs
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So at this point we've actually learned all of the main concepts of the Shiny framework.
0:05
So we have all the tools that we need to build a full-featured web application.
0:09
You know how to add inputs to an app, you know how to add rendering functions which produce outputs,
0:15
how to connect inputs and outputs, and we learned about how reactivity works, reactive calculations,
0:21
and reactive effects, which give you the sort of main interaction model for Shiny apps.
0:26
Finally, you learned how to build dynamic user interfaces with render express or update methods.
0:31
And most of the rest of the journey of learning Shiny is figuring out what you need to add to
0:37
your application and going and finding that. This session and then the exercises which follow it
0:43
are going to be about how do you learn what you need to add to your application, how do you do
0:47
that, and in particular how you use the Shiny documentation to find the things that you're
0:51
looking for. So let's take a look at this basic Penguins application that I've been building.
0:56
Let's say you look at this app and you think, well it would be really great to highlight some
1:02
big numbers somehow, like the number of penguins that are selected at any given point or the mean
1:07
values of some of their characteristics. How do you do that? Maybe you don't know
1:12
what Shiny component you use, if Shiny even has a component which solves that problem.
1:18
So how do you go about answering that question? Well, the main way you can do that is to go to
1:24
the Shiny for Python website and look through some of the galleries. We've done this a couple
1:31
of times but let's just do it again. So one of the best tools on the Shiny website is this template
1:36
page, this template gallery, which shows you some of the applications which we've built which kind
1:42
of show off a particular style of Shiny app. So we have basic apps, we have some dashboards,
1:48
we have some things that handle streaming updates, and we have some data entry forms. And we'll keep
1:53
updating this over time so this should have some applications, some templates for almost anything
1:59
that you want to do. So when you look through this you might see, oh look there's some these apps up
2:04
here have something going on which highlights a particular value. So we have a stock picker,
2:10
restaurant tips, and basic dashboards. And down here as well there's this kind of highlighting
2:14
big numbers. And if you click through here you have some code where if you want to actually just
2:19
go and clone this application to your computer you can do that. If you're using coming from this
2:25
course I'd recommend using the express syntax. And then it has some other things. So it has a
2:30
working application here which you can kind of look through and see what we've put together.
2:35
And it also has a list of all of the different components that are used in there. So the
2:39
components, the layouts, and then the external packages that are used. And here we kind of look
2:44
through and we see, okay there's this value box one that looks sounds interesting, slider input,
2:50
checkbox groups, and popover. I might not know what that is. And if you click through here you'll
2:56
get some documentation on value boxes, how they're used, and some of the variations. And down here
3:04
you see we have this reactive value box. So here's a working app where yeah okay if I change this I'm
3:09
able to highlight and produce some numbers. When we look down at the code here, highlighted the
3:14
relevant parts here, where we have some UI value box, and then it looks like you can use this with
3:19
a regular rendering function to get a reactive value. Okay so let's copy this and go over to
3:26
our application and see if we can edit. And since I want these boxes to appear above the other the
3:32
plots, I'm going to use another layout columns to lay them out. And then I'll copy this over and
3:40
just to keep things simple I will take out the showcase icon and I'll make this blue. And let's say let's call this mean beak length.
3:53
Just to give it a something simple to get started I'll just put some text in the second full thing
3:59
there. And see now we have this value box which gives you a nice big bold numeric output and it's
4:06
just a static one. But I know from the documentation that I can also do a dynamic one and since this is
4:12
a text I will do I'll do render text and define a rendering function. And since I have already
4:22
this reactive calculation that does the filtering for me I can reuse that. So I'll return filter
4:28
data. Remember we have to call that to get its value. And since that's a data frame I can use
4:35
this syntax to get the column and I can call mean and I know I'm going to want to round this.
4:46
Okay great so I've got this single value box up here that's taking up the whole space because I
4:54
have it in a single layout columns. So let's add a couple more. So I can go ahead and copy this one
5:01
and call this depth. I'll change the name of the rendering function here just so it
5:14
doesn't conflict in the application. And if I run this bring my app back over I have now two of
5:26
them I mean big length and big depth. Okay one more time I'll go ahead and copy this and I'll call this number of penguins.
5:40
And I think I can call this I can do length of filter data and that will give me the
5:45
number of rows in that data frame which should show the number of penguins.
5:48
And there we have the number of penguins. So these are nice looking big bold value boxes.
5:56
But since I'm using layout columns they also do the nice give me a good mobile view or a
6:01
small screen view as well and make the app make them space out nicely. Okay so that's a one that's
6:09
one sort of example of just identifying that you have a problem looking through the documentation
6:13
to see how shiny apps typically solve that problem and finding it. Another thing you can do is ask us
6:19
on the shiny discord. So shiny has a has a discord which you can join and we have some great help
6:26
forums here which you can ask your questions and the shiny team is pretty active on this discord
6:30
answering questions or you might be able to get some some things from from the community. And if
6:35
you really can't find your answer you can also raise a github issue and we'll try to solve your
6:39
problem for you. The next thing you might want to do with this application is maybe you get some
6:43
feedback from somebody that this table is maybe not that useful to most people and it's also a
6:50
little small right. I can't see all the columns on it and maybe there's not quite enough it's not
6:56
prominent enough for the people who do actually want to look at the raw data. So I like to sort
7:01
of have this hidden for most people but available for some if they need to. So again we can look at
7:07
so this is a we can look at the template gallery if we want to but we know that this is a layout
7:14
problem right. We like that this component exists we just need to put it somewhere else.
7:18
So in the components gallery there's a layout gallery which just shows you like how do you lay
7:24
things out on the shiny application. We have these nice little graphics that show you okay
7:28
have navbar at the top never up at the bottom put the sidebar in different places. We can have
7:34
different sort of tab sets if we want and collapsible accordions are nice and just sort
7:41
of generic like layout customized layouts that you can do. So this is a pretty simple one so let's go
7:47
and look at this navbar setting and this navbar application looks like what we're after. It lets
7:54
us kind of have content on the main page and then have these background tabs and here's the code.
8:01
And one thing you can also do here is you can click this little edit in shiny live button if
8:05
you just want to open this up in a shiny fiddle sort of thing if I want to make changes to this
8:13
I can I can do it and it'll show me you know the changes. So this is a nice way of just messing
8:19
around with something without needing to download anything or or change anything on your laptop.
8:24
So this navbar is pretty easy we just have a context manager. We'll kind of do this first of all
8:31
up here and we'll call this maybe plots and I'll just go ahead and indent all the value boxes.
8:40
And since we're going to maybe we're going to be moving this data to the background I can actually
8:46
just get rid of this layout columns because there's only going to be one item in the in the
8:52
in the second row. And then over here just oops I'll add a second panel and this will be called data.
9:18
Now when I look at my application you see I have a nice big plot so this plot is taking up the
9:22
whole second second row and the data has been moved to a background tab. And this is also a
9:30
good performance tool to use because if you remember your reactivity discussion shiny only
9:37
calculates things when the user asks for them. So when the user first opens up this application
9:42
the data actually isn't rendered at all. The shiny we had the user hasn't asked for it so none of that
9:48
reactive calculations get kicked off. So if you have for example like some it's not this doesn't
9:53
matter in this case because the app is so fast but if you had a slower computation or something
9:57
that was coming from a larger database query putting things in a background tab is a good way
10:01
of speeding up the rest of your application because if most people are just working on
10:05
these summary statistics they don't need to actually call that expensive calculation.
10:09
But this app will work the same way so we have the ability to do these filters.
10:15
If I change the filter the data is also going to be updated when the user asks for it and lets me
10:22
kind of view the view the data view the application in a few different ways. So that's kind of the
10:27
general approach to adding new components that you don't know about. Identify what the problem is
10:32
your is with your app go to the website kind of search through some of the components to see
10:36
what's the one you want to add and then try to integrate that in your application. And if you're
10:39
running into trouble go to the discord or github and ask us a question and we'd be thrilled to
10:44
help you out. So the next couple of exercises are a little harder because they ask you to add
10:50
components which I haven't taught you in this course. So there's a download button there's a
10:53
popover those are things which are doable in Shiny but you need to kind of go through and look at
11:00
some of the templates some of the other applications and see how that source code works to figure it
11:04
out. It'll take a little longer but stick with it because it's a sort of realistic example of what what you're going to work through
11:09
as you build your shiny apps yourself.