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.