Seeking suggestions for efficient rendering of large lists

[AlexKordic]

Hi,

I am working on optimizing the rendering of a large error log (1000 items) in application. My current vertical container takes about 700ms to render, and I am exploring two potential solutions to improve performance:

1. Caching Approach:
   Cache all created Elements between render calls.
   However, this feels problematic as it duplicates the data in the UI layer, which conflicts with the principles of the model-view idiom.

2. Subset Rendering Approach:
   Render only a subset of visible Elements (e.g., 55 visible items out of 1000 total).
   This approach introduces challenges such as:

• Available Space Calculation: The Menu Component needs to know how much space is available to produce the correct number of Elements.
• Scroll Indicator Compatibility: The vscroll_indicator can't infer the total number of elements since only the visible subset is rendered.

To tackle these challenges, I subclassed ComponentBase (similar to MenuBase) so the Render() method dynamically produces the subset of Elements for each cycle.
To determine the available space (height), I subclassed Node (inspired by Reflect) and used the following sequence:

Initially, Menu::Render() doesn't know the height, so it renders a preconfigured number of elements.
Then SetBox(Box box) in the custom Node gets called, followed by Render(Screen& screen), where I calculate the height using:

box = Box::Intersection(screen.stencil, box);  
height = box.y_max - box.y_min;  

Since this calculated height isn't accounted for in the initial render, I trigger another render cycle using screen.Post(Event::Custom);. I’ve added safeguards to prevent infinite render loops.

For the scroll bar, I created a custom element that takes the dataset's total size into account instead of just the rendered subset. This approach works, but I'm facing difficulties with elements that span multiple rows. My current calculations for such cases are still a work in progress.

At present, I render approximately height rows in the custom Menu, which often exceeds the available space. To handle this, I use the | yframe decorator to center the content around the focused item. This has reduced the rendered subset to the visible height instead of rendering the entire dataset.

Are there any better alternatives for efficiently handling such scenarios in FTXUI?

Any suggestions or insights would be greatly appreciated!

Thank you!

[ArthurSonzogni]

Hello @AlexKordic,

1. Yes this is problematic. This is even an undefined behavior from FTXUI point of view. Reusing an dom element for multiple render is not guaranteed to always work.

2. Yes, this is the right approach.

The screen height is a good "upper bound". You can access it with:

ScreenInteractive::Active()->dimy()

Assuming you know the "selected" element, and the children size is at least one row:

Element MyMenu::Render() final {
  if (!ActiveChild()) {
    return text("No children???")
  }

  const int selected = ActiveChild()->Index();
  const auto height = ScreenInteractive::Active()->dimy();

  Elements out;
  for(int i = std::max(selected - height, 0);
          i < std::min(selected + height, children_.size());
          i++) {
    out.push_back(children_->Render())
  }
  return vbox(std::move(out));
}

Note 1: If you are dealing with dom Element instead of Component, you would have to find the "selected/focused" element by other means.

Note 2: This could be an optimization we might want to copy-paste into the Container::Vertical component. However, I am not fully sure this wouldn't break some developers use cases.

What do you think?

[AlexKordic]

Hi @ArthurSonzogni, thank you for the quick reply!

My work in progress is orthodox file commander:

I was thinking of some kind of data-source concept.. To avoid creating Element or Component for each record.

Maybe to inverse data flow, where Component calls data-source to produce just the right number of Elements needed. The ftxui transform lambda concept fits into this idea.

Let me create some code in this direction.

[AlexKordic]

Hi @ArthurSonzogni, here is the example that demonstrates my use case: https://github.com/AlexKordic/FTXUI/blob/main/examples/component/menu_datasource_1m.cpp

The DBMenu component renders only subset of items using DataSource interface.

The DataSourceReflect is used to gather height info in a render cycle and trigger another render cycle when needed.

Because vscroll_indicator does not work with dynamic rendering, a custom DataSourceScrollIndicator was created.

What do you think? Is this proper direction?