Navigation component in heavily used module creates tons of event handlers

[jfpaccini]

Hi

(this is on retool hosted 3.52.14-stable)

TLDR:
We have a set of internal apps for which we use a shared navigation menu bar that is provided as a module. Over time navigation between apps became painfully slow. It appears that the Navigation component self-registered thousands of similar event handlers.

In details:

It looks like this:

there are 5 top level entries and a total of 19 (so far) sub entries. Each of those point to a specific app.

So this particular module is heavily used:

This is where the fun happens: we noticed that navigating from an app to another was becoming slower and slower over time. We reached a point where it could take >30 secs to move to another app !

I tried many things (update retool, database upgrade, ...), without success. I then noticed that when duplicating this module, the copy would exhibit the same behaviour even though it was used in no app.

To do more forensics, I exported the module as a toolscript zip and immediately noticed the unusal size of the main.rsx file:

Editing the file uncovered the issue: 856000+ lines!

for instance this item was found 8192 (coincidence ?) times:

<Event
          event="click"
          method="setCurrentView"
          params={{ ordered: [{ viewKey: "Monitoring/Alert" }] }}
          pluginId="tabbedContainer_all"
          targetId="c9f30"
          type="widget"
          waitMs="0"
          waitType="debounce"
 />

and the same was found for all the 19 apps. Bottom line: 94209 events handlers registered ! no question why it was slow.

I guess this is linked to the following feature of Navigation menu items: automatic definition of event handlers (to update menu to highlight the current entry I guess)

Hope this can help someone and that you guys at Retool can do something about it

(Workaround in the meantime: export the app, cleanup main.rsx, reimport in place)

[Paulo]

Hi @jfpaccini, we have an existing bug report for this issue. I added your feedback to it.

If a menu item is dragged to another item with a query as an event handler, the event of the parent is cleared as expected, however, the query of the child is duplicated. Repeating this with 2 event handlers doubles it to 4, then 8, and so on. The more edits, the more duplicates.

Thank you for sharing your workaround! This will help users that run into the same issue.

[jfpaccini]

thanks @Paulo

What is a little bit nasty here is that the Navigation component automatically creates event handlers on its own to handle updates to the menu highlights. So even if you do not have defined any event handlers, you enter the game

thanks