Search Box Solution

[00:00:02]
>> So, Now we hopefully have found a way to connect all of these inputs to make a multi inputable visualization. And again these are convenience widgets when working in Observable. They were designed to play nicely with plot cuz they're all part of the same ecosystem. But you could follow a similar pattern if you were using your own HTML widgets or if you were using reactive inputs in some other framework.

[00:00:34]
Okay, so within Observable, in this inputs.search, we said that what we need to do is replace the input array to this input, confusing terminology to make sure that this is searching over the data that we care about. Which in our case is going to be the API log data, right?

[00:00:57]
So one thing we can do is just simply replace that empty array with the API log data. And if we've done this right, if I have done this right, now, if there's nothing entered into this search input, I will see all 2000 results of my full dataset. But if I enter in a prefix like for example, users, it will not work, [LAUGH] let's see.

[00:01:24]
Users, no files, there we go, files, it must be user, singular. There we go, okay yes, so now it's working. Now if I enter in user, I see I only have 83 log results from user related endpoints. If I enter in search into my search meta, then I will see all of these many, many, many hits, these 1,115 logs from the slash file slash search endpoint and so on and so forth.

[00:01:57]
So if the user of my dashboard or in this case my single visualization with connected inputs, is interested in visualizing data just for a particular endpoint, they can do so using this search box, okay. But that only works if the plot actually knows about what's in the search box, which right now it does not, it's still displaying everything right.

[00:02:23]
Or, well, actually I've dragged down my same check boxes and it's still displaying whatever matches that. To filter that we had set up before cuz I've copied down the code for my plot from the earlier exercise. So now what we need to do is make sure that we are filtering on both the checkboxes and the search box.

[00:02:48]
So I'll notice that this input search results, give me this path search value, and that value is what we're putting into the table here. So that path search variable and actually holds the filtered down data set. That's the result of applying that search string, or looking for that search string, so what if, instead of filtering down my entire set of API log data.

[00:03:14]
Based on those selected codes, what if I start with the already filtered path search data set? Which is gonna be the subset of the data, maybe all of it that matches whatever the user has put into that box. So let's try replacing our API log data with path search, and now I'm seeing fewer data points.

[00:03:35]
That sounds good. So now I should be able to, and again, we could drag these cells around if we don't wanna see things, let me hide this for now. Just so we have a little bit of easy review. So now, let's say I uncheck some of these boxes okay, it seems like the checkboxes are still working, and if I undo that we get more points.

[00:04:00]
Okay cool, let's try adding back the 200. All right It seems like that is still working let's try out with our, I don't know., our search, a thousand results. Now we're seeing they're all the same color because remember we were coloring in that fill channel based on the path, so now they're all the same path so they're all the same color, but it seems to be working.

[00:04:21]
So what we've got is a reactively updating interactive visualization, with multiple controls that the user can use to like really Hone in on the particular data that they are interested in. So they can drill down to whatever specific endpoint or status codes they care about. And they can also filter down to a particular endpoint.

[00:04:50]
Or we can imagine extending this to a different use case, right? Like, for example if we were doing this with our resolution data, from the past one we could give folks the option to constrain the resolutions that they're looking at. Or choose only one or two of the different device types, so you can adapt this basic principle of creating these interactive charts for whatever the type of interactive is, that you're trying to build.

[00:05:17]
And this is how we can do it with observable inputs. We've now gone through our entire final project. So, if you got slightly different results, you can take a look at the reference, finished implementation, it's down at the bottom there. But hopefully by now, folks have a nicely working multi input interactive data viz, isn't that fun?