Zoomable Timeline

[cuppajoeman]

Hi there, I'm using ftxui to build an interface for the server side of a game I'm working on, it's already shown to be useful. I want to kick things up a notch to help with debugging the server.

I have multiple threads doing things, and I want to know in what order certain events occur at, and view them in a sort of vertical timeline. The communication would be done through spdlog, but you can pretty much assume there would be some structure which maps std::chrono time points (with millisecond accuracy) to a message which describes what event occurred at that moment, which would automatically be updated as new events come in.

The graphical timeline has two modes, one where you can view events as the happen and fly by on the screen, the scroll wheel would control how much time before the current moment you can see (eg you can make the entire height span a time delta of 100ms if you wanted to, and watch as events scroll by very slowly, or zoom out to 1000ms and see events fly by.

The other mode would be a "pause" mode where the you can navigate the timeline and zoom in at a particular point to see the history of events. It would look something like this:

I'm quite new to ftxui and was wondering if anyone has implemented something similar to this before, and if they have if they'd be willing to share how to do this.

Thanks!

[ArthurSonzogni]

Hello,

I think I would store the events in a std::vector.
I would implement scrolling via a int selected = 0 variable representing the selected entry.

A component would render them via:

auto log_area = Renderer([&] (bool focused) {
  int min = std::max(selected - 20, 0);
  int max = std::min(selected + 20, 0);
  Elements elements;
  for(int i = min; i<max; ++i) {
    Element element = text(entries[i]);
    if (i == selected) {
      if (focused) {
        element |= focus;
      } else {
        element |= select
      }
    }
    elements.push_back(element);
  }
  return vbox | vscroll_indicator | yframe | border;
})

To catch the arrow keys, you can use:

log_area |= CatchEvent([&](Event event) {
  int selected_old = selected;
  if (event == Event::ArrowUp) {
    selected --;
  }
  if (event == Event::ArrowDown) {
    selected++;
  }
  
  return selected != selected_old;
})

Alternatively, you might want to check:
https://github.com/ArthurSonzogni/git-tui/blob/master/src/scroller.cpp

[cuppajoeman]

Thanks for the ideas and some reference code!