Custom Plugin Visualization Panel Lagging Due to Long and Complex Formula

Elastic Stack Kibana
1

Hi Elastic Team,

For a client of mine we have successfully created several custom visualizations for our Kibana Dashboard but whenever we attempt to add a long and complex custom Formula as the method for an accessor it causes significant lag in the interface. Whenever we put the same Formula in any native visualizations we receive no lag.

The lag occurs even if we add no HTML to the panel, in other words, a completely empty panel still lags with a complex and long custom Formula.

Due to the lack of documentation of visualizations we are not able to see if we missed a particular configuration flag or require async on specific functions, other than reading the code of the builtin visualizations. It seems like a computation occurs synchronously and momentarily blocks the interface for approximately 5-10 seconds every time we attempt to change the specific panel where the Formula exists or add a global filter.

We are still tracing through other native visualizations to find a solution but I wanted to ask if this is a known issue and how the Elastic Team handled this case with their native visualizations? Any help or pointing me in the right direction within the codebase would be immensely appreciated.

The formula is approximately 1602 characters long and uses several various data points within the same dataview to compute a custom value. Smaller Formulas cause no issues on our custom visualizations. I attached a screenshot of where we are adding the custom formula within a panel.

I am happy to provide further information if required to help debug the issue further.

Current steps taken to debug the issue:

  • Removed removed all HTML and left only the complex Formulas.
  • Added the same long and complex Formula to native visualizations and received no lag.
  • Transformed several functions to async within our visualization.tsx file, expression.tsx file, and the toExpression functions.
  • Console logged the main functions within the visualizations and expression files to locate where the lag occurs in an attempt to reverse engineer the functionality and fix the issue.
  • Traced through the native visualizations codebase in an attempt to find any related configuration flags or functions that require async.

screenshot-2025-06-22-at-12-52-11
screenshot-2025-06-22-at-12-52-11429×481 21.8 KB

Thank you in advance for any help.

Regards,
Sav Tripodi

2

Hi @sanicosoftware

I have few questions to instigate the issue you are encountering:

  • what version of the stack do you have?
  • can you confirm that the exact formula in native Lens panels have no lag?
    • would you be able to write a anonymised version of the formula (i.e. replace all field names with a, b, c, etc....
  • I guess you are sort of embedding a Lens component within your custom panel. Can you confirm that?
  • is the code available in a public repository? If not, could you share at least the Lens component snippet part?