How to show activity in a UI

Question

I have an application that creates a log file of user activity such as connections, disconnections, queries, submissions, locks, etc. The log file records when each activity begins and ends. Multiple concurrent connections, queries, etc. can be taking place via different threads (which thread handled the request is also recorded with the begin and end log entries) The log files can grow very fast and can be difficult to cull through when things go wrong.

I'm looking for a way to graphically display the activity using c#. I'm thinking threads listed down the left (I can find out how many by skimming the log file) with bars to the right of the threads plotted on a timeline that represent activity. Since each thread is not continuously busy some activity may look like simply dots instead of bars depending on the time frame contained in the log.

Ideally, I'd be able to zoom the time frame to a problem section and the activity bars would re-plot to the new time frame.

Would I straight up use graphics to draw/plot the activity bars or is there a better approach? I've never used a slider or trackbar component so I'm not sure which would be better for "zooming" the plotted activity.

I'm most familiar with Form UI programming, but an open to anything. Any recommendations or suggestions are welcome.

Thanks.

Answer 1

I believe there are Gantt chart controls for .Net that you can use for this. The only hard part may be finding one that works on the short timescale you've got.

You can study other graphic UIs for ideas for zooming. I'd assume Microsoft Project has some way to zoom in and out of its Gantt. A slider control is another option (like Google Maps and MS Office). You could have a Zoom tool (which, of course, only affects the X dimension). You could provide a thumbnail of a small-scale timeline in a narrow pane at the top of window, with a dragable frame showing the range and position of the main Gantt chart. Assuming you have a horizontal scrollbar for panning, Ctrl-mouse-wheeling should be an expert shortcut for zooming. Finally, in addition to the direct manipulation method(s) you may want to have editable instant-update text boxes showing the current range, allowing the user to enter specific times (e.g., when the app was known to crash) to jump to.

Answer 2

A UI element you could re-purpose or draw from is an audio graph used on a lot of audio editing programs (see image below).

They generally use the mouse-wheel (and + / - buttons) to zoom in (X axis) and let you specify a region to zoom to by dragging left to right, mouse down being the selection start, mouse up being selection end. They also have a smaller copy of the whole range below showing the selected or visible section.