This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch fix-long-echarts-legends in repository https://gitbox.apache.org/repos/asf/superset.git
commit fca4900cd967ae1f135fd17a03f5f84bf826f269 Author: Evan Rusackas <[email protected]> AuthorDate: Mon Jun 9 16:45:22 2025 -0600 fix: maintain pagination state on long echarts legends. --- .../src/Timeseries/EchartsTimeseries.tsx | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index b91db0b4c1..3811a7f7a9 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx @@ -65,6 +65,8 @@ export default function EchartsTimeseries({ const clickTimer = useRef<ReturnType<typeof setTimeout>>(); const extraControlRef = useRef<HTMLDivElement>(null); const [extraControlHeight, setExtraControlHeight] = useState(0); + // Track the current legend page index + const [currentLegendPage, setCurrentLegendPage] = useState(0); useEffect(() => { const updatedHeight = extraControlRef.current?.offsetHeight || 0; setExtraControlHeight(updatedHeight); @@ -139,6 +141,20 @@ export default function EchartsTimeseries({ [emitCrossFilters, setDataMask, getCrossFilterDataMask], ); + // Helper function to restore legend page position + const restoreLegendPagePosition = useCallback(() => { + // Use requestAnimationFrame instead of setTimeout for better alignment with the browser's rendering cycle + requestAnimationFrame(() => { + const echartInstance = echartRef.current?.getEchartInstance(); + if (echartInstance) { + echartInstance.dispatchAction({ + type: 'legendScroll', + scrollDataIndex: currentLegendPage, + }); + } + }); + }, [currentLegendPage]); + const eventHandlers: EventHandlers = { click: props => { if (!hasDimensions) { @@ -161,12 +177,21 @@ export default function EchartsTimeseries({ }, legendselectchanged: payload => { onLegendStateChanged?.(payload.selected); + restoreLegendPagePosition(); }, legendselectall: payload => { onLegendStateChanged?.(payload.selected); + restoreLegendPagePosition(); }, legendinverseselect: payload => { onLegendStateChanged?.(payload.selected); + restoreLegendPagePosition(); + }, + // Add handler for legend scroll event to track current page + legendscroll: params => { + if (params.scrollDataIndex !== undefined) { + setCurrentLegendPage(params.scrollDataIndex); + } }, contextmenu: async eventParams => { if (onContextMenu) {
