Timeline in PowerHA

PowerHA is a disaster recovery project where we developed a graphical interface for the command line system out clients has been using. Timeline is a graphical representation of all the events occurring in the environment over certain period of time.

Story behind timeline

The Exploration

Our customers requested a visual diagram that displays the overall ‘health’ of their whole environment over a time period. We discussed as a team and decided to create an interactive timeline. We designed an interactive timeline- representing all the events occurring in their environment over certain period of time.

I started exploring data visualization libraries including D3.js and viz.jsalong with some others and showed my team several examples to spark the ideas of what possible. I finally decided to use timeline of viz.js because it provided the planform we needed to develop. However, I knew I would have to customize the script significantly to meet our design and user experience needs.

Different libraries we explored to see what is out there and what might be useful to solve our issue.

IBM Design Thinking on timeline

We went through several iterations- based on customer feedback, I changed and modified the Viz.js script several times to fit the needs of the customers and the product.

But we also were not very confident about what will be useful to users. This is a very interaction heavy tool. We thought it would be very useful if we could watch our users interact with it and learn from their experience as well as provide feedback. So I created the following fully functional prototypes. We tested out each version with our sponsor clients. We iterated based on clients feedback.

Iteration 1

This is the first prototype I built. Using the viz.js library and some CSS tricks I was able to quickly mockup an interactive prototype that our researcher could test out with our clients.

Positive client feedback: Really easy to understand since all the event types have their own line.

Design challenge to overcome: 4 lines took a lot of vertical space and we needed to be able to fit other elements. Also we needed to find a way to combine the events that occurred in a short time frame when zoomed out. In this demo, they overlap which obscures the relevant data for our users.

Iteration 2

In this second prototype we tried to solve the vertical space issue by combining all the events in one single line. We also introduced different circle sizes to put emphasis on repeated events and the severity of any particular issue. We also introduced the zoom controller at bottom to draw attention to this important feature.

Positive client feedback: Clients liked the idea of bigger bubble size. They seemed to have no problem understanding different event type through different color.

Design challenge to overcome: Overlapping events remained a problem in this version.We thought of creating a bigger bubble when events overlap. But in a client environment, in a worst case scenario , there could be hundreds of events. Keeping the bubble sizes relative over such vast data spread was a big challenge. One the other hand, relying on color only to display different event created new concern about accessibility.

Iteration 3

Issues solved: We solved the overlapping of events issue in this iteration. We discussed as a team and came up with the idea of “higher priority events take over”. So when two or more events combine, the combined event icon is derived from the most severe event. We also displayed combined events number above to clearly indicate how many events were combined.We redesigned the control buttons so that they are more compact to save space. We also introduced 4 different icon shape on top of color to overcome the accessibility issue. We moved the date and time information for the timeline below the events.

This was one of the most important feature requested by our customers. The library did not support this ‘grouping’ of events which they called clustering. Also we needed to do this while users zoom in or out.

Modifying the library: I assigned a specific class based on event type which appears without issues in non-cluster mode. I modified the `links.Timeline.ClusterGenerator.prototype.getClusters` method to add custom logic to identify which class it should add while in cluster mode.

The clustered event knows how many events it has. Then it loops through all the events to get the list of classNames (we use the className to identify what type of event it is).

This is how we prioritized event types, from most severe to least severe:
1. Error
2. Warning
3. Maintenance
4. Info/ok

Base on the priority, the cluster will show that specific style. I used following code to do so:

var classNames = [];
var clusterEventIds = [];
clusterItems.forEach(function (item) {
    classNames.push(item.className);
});
//custom code: picking highest one for cluster className
//className order by : [undefined, 'yellow', 'green-m', 'green']
var clusterClassName = undefined;
var selectedItemIndex = 0;
if (classNames.indexOf(undefined) > -1) {
    clusterClassName = undefined;
    selectedItemIndex = classNames.indexOf(undefined);
}
else if(classNames.indexOf('yellow') > -1) {
    clusterClassName = 'yellow';
    selectedItemIndex = classNames.indexOf('yellow');
}
else if(classNames.indexOf('green-m') > -1) {
    clusterClassName = 'green-m';
    electedItemIndex = classNames.indexOf('green-m');
}
else if(classNames.indexOf('green') > -1) {
    clusterClassName = 'green';
    selectedItemIndex = classNames.indexOf('green');
}

I set the className for the cluster object based on the above logic:

//custom code: assigning highest order className to the cluster
cluster.className = clusterClassName;
//Set the className in
`links.Timeline.ItemBox.prototype.updateDOM`:
if (this.className) {
    links.Timeline.addClassName(divBox, this.className);
    links.Timeline.addClassName(divLine, this.className);
    links.Timeline.addClassName(divDot, this.className);
}

Positive client feedback: Clients really liked this version. They could easily distinguish between events by the new icons. They could understand the grouping of events better because of the numbers displayed on the top of combined events.

Design challenge to overcome: We still were not happy with the controls. Also moving the date and time information below did not really work for the whole environment.

Final Iteration

Issues solved: In this iteration we came up with a better navigation. I attached the timeline with demo events so that they can be interacted together by hovering and clicking either section. I made the whole timeline accessible by keyboard. Also added Japanese language support.

Other Modifications

Accessibility: I added following code so that timeline elements can be accessible via keyboard in `links.Timeline.ItemBox.prototype.updateDOM` function:

divDot.setAttribute(“tabindex”, 0);
divDot.setAttribute(“role”, “button”);

Locale: Timeline.js comes with a locale feature. I had to use the predefined string constants along with the custom strings (‘AM’, ‘PM’, tooltip) and use those dynamically to make sure strings appears accordingly based on the browser locale.

Special Thanks To