Search Box Exercise

[00:00:00]
>> All right, the next and last thing that we're gonna do in this interactivity project, is to add a search box. To allow our users to search for a particular endpoints path, if they're interested not in a certain status code, but they're interested in all status codes of response from requests to a particular endpoint.

[00:00:24]
So what we're going to do is, use a convenient little input called the search input, which analogous to inputs.checkbox is going to be inputs.search. Which is essentially going to give us a way to filter down a data set based on whatever text is put into that search box by the user.

[00:00:48]
So the way that this works is, we're going to pass in some data to this search input. Such that, when I type in something here, for example, if I'm interested in that file/search endpoint or one of the other endpoints that I'm interested in. I am going to get back a subset of the data that corresponds to all rows in the data that matched with a very kind of generous, let's say text search across all the fields, but in this case the relevant one is going to be the path field.

[00:01:29]
So this search input is gonna search across all the fields of any data points that we pass in to this input array. So what we're going to do is, using our hands we're going to connect this search input called path search to the data that we care about here, our log data.

[00:01:51]
And then, we are going to again paste our filtered plot from up here, and we can drag our check boxes down too. So that both the check boxes and the search box are connected to filters on our data set to make sure that we are only displaying data that matches all of the inputs that the user has selected.

[00:02:15]
So that is our next and final exercise and you can take a look at the hint to check out how that search input works, you can also click through to the documentation of the search input for more reference. And then think about, again, how to combine filters for both the search and the checkbox input to make sure that the data that we're ultimately visualizing matches both, so that is our.