Timelines and more

Over the past few days we got a chance to show Engineering.com the first version of the React app for the Get API that I prepared. They liked it but mentioned the interface could use some improvement. Of course, that’s expected, it’s just a crappy UI I threw together while I was learning React. My team mate has already begun improving the UI with a tagging feature to help manage all the queries on the screen, and we’ll be doing more changes as we learn from them what they want from the tool. It already supports basic data display, as well as graphs, and now I’ve also begun working on a “time line” display component, which is going to be used for displaying time lines or user stories, describing what the user did over the course of their history, or what they did during a certain visit to a web page. I didn’t find many JavaScript graphing libraries that had this feature, so I set out to create my own.

I originally made one using the <table> element, just re-using a lot of the functionality from HTML tables. My timeline was supposed to display a vertical line going down, representing time, and then beside that the things along the time line, so I figured a table’s lining up of columns etc would help with this. Unfortunately, I ended up having wasted my time because when I added this to the React app, the Bootstrap we’re using in the React app to style it overwrote a lot of basic table properties, messing up the display of my component. I should have done things right the first time and made something from scratch with <divs>. Oh well, lesson learned… I recreated it with raw <div> elements appropriately styled and arranged and so far, so good.

I’m taking advantage of the compositional nature of React components here, so instead of making a monolithic “Timeline” component, I made this component, but also made a few smaller components that make it up, including “LineSegment”, “Event”, and “Spacer”. Each has a purpose in displaying part of the time line, and make it dynamic. It’ll be quicker for us to come back in later and go “Oh we need to adjust the space between these events.”. Instead of “Oh crap we have to change the height property on every spacer and all of its child divs in there”, it’s “Yay we made a Spacer component with a ‘height’ property, so we’ll just change the height property where we use that Component”. One of the ideas I have in the future that may take advantage of this breaking it down into little parts is recursively checking what each event is comprised of (is a Hit event comprised of Clicking on button events?), and having a sort of nested recursive time line. There are possibilities.

I’m going to continue making queries which are now more focused on what Engineering.com wants to know, and add them into the app.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s