Warn appear in multiple ui.plotly

[Wzhipeng]

Description

When my page calls many ui.plotly drawings, the following error will appear.

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 plotly_animated listeners added. Use emitter.setMaxListeners() to increase limit
    at u (http://127.0.0.1:5500/_nicegui/1.4.11/libraries/a7b1c4d4fc8dfc15b2e1a1f5e04b13ae/plotly.min.js:8:2419952)
    at a.addListener (http://127.0.0.1:5500/_nicegui/1.4.11/libraries/a7b1c4d4fc8dfc15b2e1a1f5e04b13ae/plotly.min.js:8:2422536)
    at Proxy.update (http://127.0.0.1:5500/share/gAAAAABlsOaZuuvr0-D8W7QgcfJ4S5yd1BAtYOEUW-IQR7zyNP2GW5xU8lELhd6XtN6zQIl_ZeSLM5VHakN9PcRyKChrLCXeNcAnRVR5pYppKu_R-kRsoLgSVedfd55NZ_lm3WicliNvtvTrPWjvQ_k-cp8eSl68Eouc5DS_3XcGgUciOrx0wmacUVopTU2YuW3iXEMPQmYZ0Z0VbhpmN5zcMyI5vHF87J3gcSwoTvJRyHcPIzzczA8fKC-MwQj9KsY1rqW8ncHeLgterp8SPz1yxfDoMyyXl3r6WHzbhounoGXLzQv7fvLrnLVWGxHPcdLr64ndq4Fe2EfQ11mmPiBtxunx5LcOuLW9fFYgu5ueVZwWUoEDL5n-QbMThb6kLviAQOMlvNAC0kINtSa1RhEmWETc-sJzjw==:556:18)
    at Proxy.updated (http://127.0.0.1:5500/share/gAAAAABlsOaZuuvr0-D8W7QgcfJ4S5yd1BAtYOEUW-IQR7zyNP2GW5xU8lELhd6XtN6zQIl_ZeSLM5VHakN9PcRyKChrLCXeNcAnRVR5pYppKu_R-kRsoLgSVedfd55NZ_lm3WicliNvtvTrPWjvQ_k-cp8eSl68Eouc5DS_3XcGgUciOrx0wmacUVopTU2YuW3iXEMPQmYZ0Z0VbhpmN5zcMyI5vHF87J3gcSwoTvJRyHcPIzzczA8fKC-MwQj9KsY1rqW8ncHeLgterp8SPz1yxfDoMyyXl3r6WHzbhounoGXLzQv7fvLrnLVWGxHPcdLr64ndq4Fe2EfQ11mmPiBtxunx5LcOuLW9fFYgu5ueVZwWUoEDL5n-QbMThb6kLviAQOMlvNAC0kINtSa1RhEmWETc-sJzjw==:520:10)
    at http://127.0.0.1:5500/_nicegui/1.4.11/static/vue.global.prod.js:3:2763
    at Lt (http://127.0.0.1:5500/_nicegui/1.4.11/static/vue.global.prod.js:1:14656)
    at jt (http://127.0.0.1:5500/_nicegui/1.4.11/static/vue.global.prod.js:1:14734)
    at t.__weh.t.__weh (http://127.0.0.1:5500/_nicegui/1.4.11/static/vue.global.prod.js:3:2642)
    at nn (http://127.0.0.1:5500/_nicegui/1.4.11/static/vue.global.prod.js:1:15938)
    at sn (http://127.0.0.1:5500/_nicegui/1.4.11/static/vue.global.prod.js:1:16234)

[falkoschindler]

Hi @Wzhipeng, thanks for reporting this issue!

Can you, please, try to provide a minimal reproduction for the warning?
And what OS, browser and Python version are you using?

[Wzhipeng]

Hi @falkoschindler I am on mac 12.3 and use chrome browser， python version is 3.11.5

[Wzhipeng]

I think you can create 20 ui.plotly locally and see if this error occurs in the browser console

[falkoschindler]

Ah, ok, here is a minimal reproduction:

import plotly.graph_objects as go

for _ in range(9):
    ui.plotly(go.Figure())

Strangely the warning occurs with 9 or more plots, even though the warning mentions "11 plotly_animated listeners".

[platinops]

Isn't this due to the events being created/forwarded by vue on each update of the chart?

nicegui/nicegui/elements/plotly.vue

Lines 28 to 62 in 194a64a

	// forward events
	for (const name of [
	// source: https://plotly.com/javascript/plotlyjs-events/
	"plotly_click",
	"plotly_legendclick",
	"plotly_selecting",
	"plotly_selected",
	"plotly_hover",
	"plotly_unhover",
	"plotly_legenddoubleclick",
	"plotly_restyle",
	"plotly_relayout",
	"plotly_webglcontextlost",
	"plotly_afterplot",
	"plotly_autosize",
	"plotly_deselect",
	"plotly_doubleclick",
	"plotly_redraw",
	"plotly_animated",
	]) {
	this.$el.on(name, (event) => {
	const args = {
	...event,
	points: event?.points?.map((p) => ({
	...p,
	fullData: undefined,
	xaxis: undefined,
	yaxis: undefined,
	})),
	xaxes: undefined,
	yaxes: undefined,
	};
	this.$emit(name, args);
	});
	}

I'm guessing this for loop should only run when the element is mounted, not when it is updated?

[platinops]

Should be fixed by #2505