fix: prevent memory leaks from uncleaned uPlot event listeners

[ahrefabhi]

Description

Fixes critical memory leaks in uPlot chart rendering that were causing memory spikes during chart re-renders and updates.

Problem

Memory profiling revealed significant memory leaks in getUplotChartOptions.ts. The function was adding multiple event listeners that were never cleaned up when charts were destroyed or re-rendered:

1. Legend tooltip listeners - mouseenter and mouseleave events on each legend item
2. Legend click handlers - Click events on markers and text elements for each series
3. Global document listener - A mousemove event listener on document that accumulated on every chart render
4. Orphaned DOM elements - Tooltip elements appended to document.body that were never removed

Each time a chart was re-rendered or updated, new event listeners were added while old ones remained attached, causing memory to grow continuously.

Solution

Implemented comprehensive event listener cleanup using uPlot's lifecycle hooks:

Changes Made

• Added tracking system: Created _legendCleanups array in ExtendedUPlot interface to track all event listeners
• Extracted inline handlers: Converted anonymous inline event handlers to named functions for proper cleanup
• Implemented destroy hook: Added destroy hook to uPlot options that removes all tracked listeners
• Enhanced component cleanup: Updated Uplot.tsx destroy callback to manually trigger all cleanup functions
• DOM cleanup: Added removal of orphaned .legend-tooltip elements from DOM

Files Modified

• frontend/src/lib/uPlotLib/getUplotChartOptions.ts - Main memory leak fixes
• frontend/src/components/Uplot/Uplot.tsx - Enhanced cleanup in React component

Impact

• Prevents memory accumulation during chart re-renders
• Eliminates memory spikes observed in profiling
• Improves overall application performance and stability
• Prevents potential browser slowdown after extended use with multiple charts

5 Heap Snapshot before Fix: (10 Sec interaction between each snapshot)

6 Heap Snapshot after Fix: (10 Sec interaction between each snapshot)

[srikanthccv]

Overall LGTM. We now have a clean up in two places 1. Uplot.tsx before chart.destroy() and hooks.destroy, please consolidate this or is there a reason to clean up in both places separately?

[srikanthccv]

This is not used.

[ahrefabhi]

This is removed, I'm not removing the cleanup from uplot component is because uplot doesn't directly uses getUPlotChartOptions function which has the hooks.destory cleanup. it get's the options through a prop and let's suppose if someone uses this component directly with own options without using the getUPlotChartOptions function. They there won't be any cleanup.

Anyhow after the cleanup we reset the array, so even if the cleanup runs twice, it'll run on a empty array.

[srikanthccv]

I'm not removing the cleanup from uplot component is because uplot doesn't directly uses getUPlotChartOptions function which has the hooks.destory cleanup. it get's the options through a prop and let's suppose if someone uses this component directly with own options without using the getUPlotChartOptions function. They there won't be any cleanup

That's the main point I was trying to raise with "consolidate this". We should not let it anyone do something that it could lead to memory leak and requires separate cleanup work. Let's please consolidate it. If there is a good reason why it needs to be separate, I want to understand why.