Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/Chart.tsx (TypeScript)

Code before:
                        ? getColNameFromIndexed(config.columns[0][config.traces[0][0]]?.dfid)
                        : undefined,
                ...layout.xaxis,
            },
            yaxis: {
                title:
                    config.traces.length == 1 && config.traces[0].length > 1 && config.columns[0][config.traces[0][1]]
                        ? getColNameFromIndexed(config.columns[0][config.traces[0][1]]?.dfid)
                        : undefined,
                ...layout.yaxis,
            },
            clickmode: "event+select",
        } as Layout;
    }, [
        theme.palette.mode,
        title,
        config.columns,
        config.traces,
        baseLayout,
        props.template,
        props.template_Dark_,
        props.template_Light_,
        props.figure,
    ]);

    const updateDateVarsName = useMemo(() => {
        return updateVars
            ? updateVars.split(";").reduce((acc, item) => {
                const [key, value] = item.split("=");
                if (key && value) {
                    acc[key.trim()] = value.trim();
                }
                return acc;
            }, {} as Record<string, string>)
            : {};
    }, [updateVars]);

    useEffect(() => {
        if (animationData?.__taipy_refresh) {
            dispatch(createRequestDataUpdateAction(
                updateDateVarsName.animationData,
                id,
                module,
                [],
                "",
                {},
                true,
            ));
        }
    }, [animationData, animationData?.__taipy_refresh, dispatch, id, module, updateDateVarsName.animationData]);


Review comment (suggestion):
There's a function for this ...
 we only need the backend variable name for animationData => use `getUpdateVar(updateVars, "animationData")` from utils.ts.

Code after:
        baseLayout,
        props.template,
        props.template_Dark_,
        props.template_Light_,
        props.figure,
    ]);

    useEffect(() => {
        if (animationData?.__taipy_refresh) {
            const animationDataVar = getUpdateVar(updateVars || "", "animationData");
            animationDataVar &&
                dispatch(createRequestChartUpdateAction(animationDataVar, id, module, [], "", undefined));
        }
    }, [animationData?.__taipy_refresh, dispatch, id, module, updateVars]);

    const runAnimation = useCallback(() => {
        return (
            plotRef.current &&
            plotlyRef.current &&
            toFrame.data &&
            (toFrame.traces && toFrame.traces.length > 0 ? true : null) &&
            plotlyRef.current.animate(
                plotRef.current as unknown as PlotlyHTMLElement,
                {
                    ...toFrame,
                    layout: layout,
                },
                DEFAULT_ANIMATION_SETTINGS
            )
        );
    }, [layout, toFrame]);

    const style = useMemo(
        () =>
            height === undefined
                ? ({ ...defaultStyle, width: width } as CSSProperties)
                : ({ ...defaultStyle, width: width, height: height } as CSSProperties),
        [width, height]
    );
    const skelStyle = useMemo(() => ({ ...style, minHeight: "7em" }), [style]);

    const dataPl = useMemo(() => {
        if (props.figure) {
            return lastDataPl.current || [];
        }
        const dataList = dataKeys.map((_, idx) => getData(data, additionalDatas, idx));
        if (!dataList.length || dataList.every((d) => !d || isDataRefresh(d) || !Object.keys(d).length)) {
            return lastDataPl.current || [];
        }
        let changed = false;
        let baseDataPl = (lastDataPl.current.length && lastDataPl.current[0]) || {};