3.6 Timeline Bar

The HarEntryTable is almost complete in terms of functionality. Except for the time length column. We'll do this with the timebar that shows the request and response times for the entry. Let's start with a little bit of organization. I'm gonna create a separate folder for the timebar. And also move the har-entry files into its own folder. The good part is the WebStorm takes care of automatically adjusting the paths. Next, let's create the Timebar.jsx file and add our standard boiler plate with the constructor and the render functions. It'll also include the defaultProps and the propTypes, since we'll be including and passing some properties into this component. For now, let's just render the total time, which will be passed in as a property into the Timebar. I will be passing in a bunch of properties into Timebar, so let's just make a list of them in the defaultProps and the propTypes. This is all the timing related information that we'll be rendering with the Timebar. So now that we have the basic skeleton of the Timebar component, let's include it in our HarEntryTable. And start using it for the timeline column. Now, since we'll be custom rendering this column, we need to override the cellRenderer property of that column. So let's set that to our _renderTimeColumn function. Now, as you can see in the function over here, we are simply collecting or extracting a bunch of properties from the rowData. This will link to our start time, the total time and of course the pgTimings from the page itself and pass it all along to the TimeBar component. Along with that, we're also creating the scale which will be used to render the bar itself. To prepare the scale itself, we're relying on d3.scale.linear function. And to create that, we'll look at the min start time and the max start time across all the entries and use that to size our bar. Here we'll also include the _timebar.scss file, which will be used to style the bar. So with all these changes, let's take a quick look at the browser to see if things are still in shape. And from the looks of it, it seems like we haven't really set the page property for the HarEntryTable. So let's go ahead and do that. So first let's add that page property to the HarEntryTable in the defaultProps and the propTypes. Next, we need to go back to the Har Viewer and actually pass on this property into the HarEntryTable. Now one minor change you can make inside the TimeBar is to actually start referencing our property. So I'm gonna just surround it with the braces so I can start using the total property. All right, so let's refresh our browser and we can see that the total property is being rendered in the Timeline column. So let's improve on this representation by showing a bar chart for the various times, for the page load, the content load, and of course the total duration of the entry itself. So let's start by creating a series of bars. And these will be the bars for the total time, the page load, and the content load. The positioning of the total TimeBar will be controlled by the scale property that we already have. So the left position and the total width of the bar will be controlled entirely through the scale. So here I'm just creating a helper function that'll be used to set the left and the width properties for all of these bars. The first bar represents the time when we started to fetch this entry and also the total time it took to get the entry from the server. So the left is based on the prop.start start and the width will be based on the prop.start total. The remaining two bars only represent the point in time when the dom content was loaded and the page was loaded. So these are mostly just marker evens and for which we'll just use a width of 1px to represent the bar. The start position of course will be based on the dom content load time and the page load time. I'm also including some classNames which will be used to style these bars. So now that we have the information for the various bars, it's just a matter of looping over them and creating the corresponding barElements. So, here I'm just gonna loop over them using load# and then create the corresponding div elements. Set its classes and then use the style from the style that we just created for each of the bars. So now that we have the bar elements, it's just a matter of wrapping it in a root element. And that'll become a root of the TimeBar component. So with these changes in place and also with our scss file, we can finally see the Timeline column coming into shape. So here you can see the variables bars being rendered. And the start time of the bar is based on the time at which the entry was requested for download. Red bar represents the time at which the dom content was loaded. And the blue bar is of course when the page was loaded. Now one thing we need to improve over here is the label for the total tim,e so let's take care of that now. I'll create a formatter.js file and include some code for formatting time value. We'll then make use of this in the TimeBar and format the total time which will become the label for the TimeBar. So with that simple change our TimeBar should look far more nicer to read. Now one little enhancement we can add over here is to show more details when you hover on the TimeBar column. And to do this, locate a separate component called timingdetails.jsx, and then create a table over there that dumps all the different values for the times. So the TimingDetails render function is essentially looping over all the time related properties and dumping it out into a little table. We can now make use of the TimingDetails component inside the TimeBar. Let's go ahead and import it. Now to actually show the hover when you hover on this particular TimeBar, we'll make use of two more components from react-bootstrap. And this will be the Popover and overlay trigger. So let's go ahead and import this components from react-bootstrap and instantiate them over here. Now, as mentioned earlier, the Popover will be the place where we actually show the TimingDetails. So let's set some properties on this, such as the title, and passing the TimingDetails as a child of the Popover. To actually show the Popover when you hover on it, we're gonna use a separate component called the overlay trigger. And here is where we pass in the Popover and also the events suggest as hover and focus which are our triggers for launching the pop-up. So the overlay trigger essentially becomes the root our TimeBar component. So now let's see inside our browser how this shows up. So let's just collapse our console over here, and as I can see, when you hover on the TimeBar, the popover shows up and gives you more details about the timing. The overlay trigger component from react-bootstrap takes care of hiding and showing these pop-ups as you move between the TimeBar. All right, so just like we've created a custom render for the TimeBar column, I'm also gonna add that for the size and URL columns. So, let me just add the render functions over here. I'm gonna create some simple components to kind of encapsulate the rendering for that particular column. Of course to make the column render differently, we also need to add the cellRender attributes for the size and URL columns. So let's go ahead and do that over here. Now for the size column, I'm gonna simply use a formatter and format the payload size. But as in case of the URL column, I'll use a custom component called FileType. And as the name suggest, it will simply show an image against FileType of the URL. All right, so let's go ahead and create this FileType component. I'll start off by simply adding a directory called FileType under components. And then create a JSX file called FileType.jsx. Now the FileType component has the standard boiler plate and the render function itself is kind of pretty straightforward. All it does is simply show an icon for the FileType and of course then the URL which is passed in through the Props. I'm also gonna include a custom scss file that includes the styling for the different kinds of FileTypes. And finally, let's add the imports for the FileType and the formatters in our HarEntryTable. So with that, we should have our complete rendering for the url size as well as the Timeline columns. Now, let's look at the browser to see what we have so far. Let's pick a HAR file and now we can see that the columns are far more presentable. The URLs actually have a FileType next to them so we know what kind of type the URL is and the size is also formatted to be more closer to what you normally expect for the size column. So with that, I'm gonna put a wrap on this lesson and also on the HarEntryTable. At this point, we have completed the functionality for the HarEntryTable, so we can now move on to the pie chart which shows the distribution of the various FileTypes inside our HAR file. I'll see you in the next lesson.