Unexpected Application Error! Value is null when remove pane

[jabori-mao]

Lightweight Charts™ Version: 5.0.8

Steps/code to reproduce:
I create chart using chart config loaded from backend.
the config like this:

export type ChartConfig = {
	id: number;
	chartName: string;
	klineChartConfig: KlineChartConfig;
	indicatorChartConfigs: IndicatorChartConfig[];

export type IndicatorChartBaseConfig = {
	isInMainChart: boolean; // isInMainChart
	seriesConfigs: SeriesConfig[];
}


export type IndicatorChartConfig = IndicatorChartBaseConfig & {
	chartId: ChartId; // chartId
	indicatorKeyStr: IndicatorKeyStr; // indicatorKeyStr
	isDelete: boolean; // isDelete
};
	
};

you can see I have a DELETE button in Pane Legend.

when click delete button, the logic is:

1. delete indicatorChartConfig item from Array.
2. use chartApi.removePane() to remove pane.

At this point an error occurred.

Then, I tried adding the "isDelete" field, not actually deleting it. When click delete button ,set isDelete to true. (When rendering, configurations whose isDelete field is equal to true are filtered.)
Still got the same error.

When only calling chartApi.removePane() and not change config, the pane is remove correctly. But I can't save the error result to backend.

How can I properly delete the Pane and also delete the configuration.

If need more detail, please tell me.

[illetid]

Hi, from the error stack trace looks like you are trying to remove series that was already removed. In case if you want to remove series and then remove the pane, you could try to add some setTimeout or Promise.resolve() to remove pane on next tick to make sure that series were removed successfully

[mayhem49]

Hi @jabori-mao , can you share your code of how you added the legend to the pane, specially how you made the delete button working? Thanks in advance.

[jabori-mao]

sure. It's really difficult.

export function SubchartIndicatorLegend({
	chartId,
	indicatorKeyStr,
}: SubchartIndicatorLegendProps) {
	const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
		null,
	);
	const { getSubChartPaneRef, getChartRef, getPaneVersion, getSubChartPaneHtmlElementRef, subChartPaneHtmlElementRef } = useBacktestChartStore(chartId);

	// 🔑 获取当前的 pane 版本号，用于监听 pane 变化
	const paneVersion = getPaneVersion();

	// 🔑 获取 legend 数据和事件处理器
	const { legendData, onCrosshairMove } = useIndicatorLegend({
		chartId,
		indicatorKeyStr,
	});

	// 🔑 延迟订阅图表事件，确保图表完全初始化
	useEffect(() => {
		// 使用 setTimeout 确保在图表完全初始化后再订阅
		const timer = setTimeout(() => {
			const chart = getChartRef();
			// 确保图表存在、回调函数存在、并且有legend数据
			if (!chart || !onCrosshairMove || !legendData) return;
			// 直接订阅图表的鼠标移动事件
			chart.subscribeCrosshairMove(onCrosshairMove);
		}, 10); // 延迟150ms，确保图表初始化完成

		return () => {
			clearTimeout(timer);
			const chart = getChartRef();
			if (chart && onCrosshairMove) {
				chart.unsubscribeCrosshairMove(onCrosshairMove);
			}
		};
	}, [getChartRef, onCrosshairMove, legendData]); // 添加legendData作为依赖

	// 🔑 创建 Portal 容器，响应 paneRef 的变化
	useEffect(() => {
		// 当pane被删除时版本号会变化，触发重新创建容器
		void paneVersion; // 引用paneVersion以消除ESLint警告
		void subChartPaneHtmlElementRef; // 引用subChartPaneHtmlElementRef以消除ESLint警告

		const createPortalContainer = () => {
			const paneRef = getSubChartPaneRef(indicatorKeyStr);

			if (!paneRef) {
				// 如果 pane 还没准备好，稍后重试
				setTimeout(createPortalContainer, 100);
				return;
			}

			setTimeout(() => {
				// console.log("subChartPaneHtmlElementRef", subChartPaneHtmlElementRef);
				const htmlElement = getSubChartPaneHtmlElementRef(indicatorKeyStr);
				if (!htmlElement) {
					console.warn(`无法获取子图 HTML 元素: ${indicatorKeyStr}`);
					return;
				}

				// 查找包含 canvas 元素的 div
				const canvasContainer = htmlElement.querySelector(
					'div[style*="width: 100%"][style*="height: 100%"][style*="position: relative"][style*="overflow: hidden"]',
				) as HTMLDivElement;

				if (!canvasContainer) {
					console.warn(`无法找到 canvas 容器元素: ${indicatorKeyStr}`);
					return;
				}

				// 检查是否已经存在容器
				let container = canvasContainer.querySelector(
					`[data-legend-key="${indicatorKeyStr}"]`,
				) as HTMLDivElement;

				if (!container) {
					// 创建 Portal 容器
					container = document.createElement("div");
					container.style.position = "absolute";
					container.style.top = "4px";
					container.style.left = "0px";
					container.style.zIndex = "10";
					container.style.pointerEvents = "auto";
					container.style.width = "100%";
					container.setAttribute("data-legend-key", indicatorKeyStr);

					canvasContainer.appendChild(container);
				}

				setPortalContainer(container);
			}, 100);
		};

		createPortalContainer();
		

		// 清理函数
		return () => {
			// 使用闭包捕获当前的 portalContainer 值
			setPortalContainer((currentContainer) => {
				if (currentContainer?.parentNode) {
					currentContainer.parentNode.removeChild(currentContainer);
				}
				return null;
			});
		};
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [indicatorKeyStr, getSubChartPaneRef, paneVersion, getSubChartPaneHtmlElementRef, subChartPaneHtmlElementRef]); // 依赖 paneVersion，当 pane 被删除时会重新创建容器

	// 🔑 使用 Portal 渲染，简单直接
	if (!portalContainer || !legendData) {
		return null;
	}

	return createPortal(
		<IndicatorLegend
			indicatorLegendData={legendData}
			indicatorKeyStr={indicatorKeyStr}
			chartId={chartId}
		/>,
		portalContainer,
	);
}

The core idea is:

1. after you create the pane, you need to get its html element.
2. Add the portal component, to the html element. I am getting the div in the html.
3. if there is already more than one pane. every time you delete or add a pane, you have to re-render the legend of each pane. because i found that when a pane is deleted, the other Html elements will change.
4. it's better to store html elements in store and get them directly when needed instead of getting them from pane every time as there is 80% chance of failure