Adding UI with Input Widgets

[00:00:00]
>> Okay, so how are we feeling? Hopefully by this point, our plotting is starting to feel a little bit second nature. So again, there are lots of different ways you could have drawn this dot plot. But let's look at my reference solution. Just one way of doing it.

[00:00:20]
This is basically just what's right in the solution button. So this is what I came up with, yours might look different, but the important part is we have the timestamp feature or column on the x axis. So that's why we see these little dates coming across. And again, that's just a way of sequencing these different requests.

[00:00:46]
So we've got the timestamps across the x axis, and then we have the duration of each request on the y axis. Where higher is longer and therefore probably worse, right? So what we can see already is that we have some kind of outliers up here that took a really long time, 30 seconds, to come back.

[00:01:06]
But we also seem to have a lot of points that came back pretty quickly. And then there's a sort of gradual trailing off in the middle there. And then, if we add in a couple of other channels, so for example, we could use the color, the fill for each of these dots to indicate the path.

[00:01:24]
We immediately see that a lot of these dots are the same color. And I've added some tooltips so that we can see more metadata about each of these, which you maybe you did or maybe you want to play around with later. And what we can see is that it's this files search path that is accounting for a huge amount of these requests.

[00:01:44]
So it looks like that is a really popular path. And, as we noticed from the color of these really long responses here, it's also maybe one that we want to take a look at performance-wise. Cuz we got some slow responses happening. But there are also a few other paths, like some of these user files seem to also be taking a little while.

[00:02:06]
So again, if we're using this to understand what some of our performance steps might look like. And maybe some of the endpoints that we might want to try to spruce up a little bit speedwise, that is already some useful information. And again, just having kind of a title string.

[00:02:26]
Where here I'm just joining together a bunch of little snippets of information on different lines, is a handy way to be able to dig in there. So we've already got an arguably interactive plot here. But let's make it even more interactive with some user controls, to determine what data is visualized in this plot.

[00:02:49]
So before we dig into those, does anybody have any questions? Again, keeping in mind that this is just one way to create this dot plot. There are lots of possibilities here, as we've seen with all these different channels. Seems like everybody is doing pretty good. So let us press ahead and talk about interactivity.

[00:03:12]
So what we're gonna do in our project here, now that we've got a baseline plot to work with, is we're gonna add some interactive input widgets. Now, since we're working in an observable notebook, we can take advantage of some handy dandy ready-to-go HTML widget. That Observable exposes as something called inputs.

[00:03:34]
So you can read through in the link's documentation if you want to learn more about which different types of inputs are available. There's also a handy little sidebar here. If you click on this little tiny plot icon, you'll see a bunch of options for different inputs that you can click on and insert into your notebooks.

[00:03:55]
If you're working within Observable. But essentially these are just kinda spruced up HTML widgets that give us different types of controls. So for example, we've already seen the table input, which I call by typing inputs.table. And then passing in an array of data objects, which then gives me this kinda nice little human readable, scrollable table.

[00:04:22]
Similar to like if I was scrolling through a spreadsheet or something like that. So that's one example we've seen already. Now let's take a look at a couple others. So for example, there is an Inputs.checkbox widget, which we can pass in an array of options too. So here I've got some Roy G Biv kind of colors here.

[00:04:44]
And then we can pass in some configuration properties that are optional, like for example I can add a label to say, okay, these are the colors that I like. And then I can choose different colors that I am a fan of. And you'll notice here that, as opposed to our previous cells where we could assign a name to a value by essentially using kind of a modified JavaScript syntax here.

[00:05:12]
Where we're not declaring a let or const variable, but we're giving it a name and then putting an equal sign. And that's how we can name cell values in Observable. For interactive cells, like inputs, there's a special operator called Vviewof. Which when we put that in front of the cell name.

[00:05:32]
Basically gives us a reactive way to respond to the user's changes to this value by capturing it in an object called whatever we're naming that cell. So in this case, favColors. So I'm not gonna go too much into the details of how Observable works or what these viewof operators are.

[00:05:53]
There's a links to the documentation if you want to use Observable more. But for now, suffice it to say that when I use this viewof favColors equals inputs.whatever, in this case checkbox. favColors is going to become the value currently selected of those checkbox options. So that means favColors in this case is going to give me an array of the selected colors.

[00:06:19]
So you'll notice that, as I Interact with this input, it is going to update that favColors array correspondingly. Now, because Observable's environment is reactive. What that means is that any cells that are using that favColors object, that value, are going to reactively update anytime the favColors value changes.

[00:06:45]
So if you'll notice in this cell below or these couple cells below, I have some cells that use this value. So in this case we're just mapping over the favColors array and capitalizing everything, uppercasing everything. And then the bottom when we have a string, that's sort of expressing these favColors as prose, as it were.

[00:07:07]
And if we take a look at these two strings, as I change the values we see that they reactively update. So this is a fun thing about Observable, is that it comes with these inputs out of the box and they're reactive. So that means we can hook one of these inputs, like checkboxes for example, up to our chart.

[00:07:28]
And make the chart redraw and change essentially what data is displayed, based on the values that a user has selected in, let's say, a checkbox input. So that is exactly what we're going to do next.