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

Code before:
                        lat: map ? yaxis.p2c() : undefined,
                        y: map ? undefined : transform(yaxis, "top")(evt?.clientY),
                        lon: map ? xaxis.p2c() : undefined,
                        x: map ? undefined : transform(xaxis, "left")(evt?.clientX),
                    }),
                ),
            );
        },
        [dispatch, module, id, onClick],
    );

    const onInitialized = useCallback((figure: Readonly<Figure>, graphDiv: Readonly<HTMLElement>) => {
        onClick && graphDiv.addEventListener("click", clickHandler);
        plotRef.current = graphDiv as HTMLDivElement;

        if (animationDataValues) {
            const runAnimation = async () => {
                if (plotRef.current && frames?.to?.data && frames.to.traces.length > 0) {
                    await Plotly.animate(
                        plotRef.current,
                        {
                            data: frames.to.data,
                            traces: frames.to.traces,
                            layout: layout,
                        },
                        {
                            transition: {
                                duration: 500,
                                easing: "cubic-in-out",
                            },
                            frame: {
                                duration: 500,
                            },
                            mode: "immediate",
                        },
                    );
                }
            };

            runAnimation().catch(console.error);
        }
    }, [onClick, clickHandler, animationDataValues, frames?.to?.data, frames?.to?.traces, layout]);

    const getRealIndex = useCallback(
        (dataIdx: number, index?: number) => {
            const lData = getData(data, additionalDatas, dataIdx);
            if (!lData) {
                return index || 0;
            }
            const dtKey = dataKeys[dataIdx];
            return typeof index === "number"

Review comment (refactor):
You may want to move this dict to some 'default' constant value. 
Then we could modify it with the setting of the *animation* prop.
At least the default values don't show up in the middle of the code.
(and reuse it later)

Code after:
        ]
    );

    const clickHandler = useCallback(
        (evt?: MouseEvent) => {
            const map =
                (evt?.currentTarget as PlotlyDiv)?._fullLayout?.map ||
                (evt?.currentTarget as PlotlyDiv)?._fullLayout?.geo ||
                (evt?.currentTarget as PlotlyDiv)?._fullLayout?.mapbox;
            const xaxis = map ? map._subplot?.xaxis : (evt?.currentTarget as PlotlyDiv)?._fullLayout?.xaxis;
            const yaxis = map ? map._subplot?.yaxis : (evt?.currentTarget as PlotlyDiv)?._fullLayout?.yaxis;
            if (!xaxis || !yaxis) {
                console.info("clickHandler: Plotly div does not have an xaxis object", evt);
                return;
            }
            const transform = (axis: Axis, delta: keyof DOMRect) => {
                const bb = (evt?.target as HTMLDivElement).getBoundingClientRect();
                return (pos?: number) => axis.p2d((pos || 0) - (bb[delta] as number));
            };
            dispatch(
                createSendActionNameAction(
                    id,
                    module,
                    lightenPayload({
                        action: onClick,
                        lat: map ? yaxis.p2c() : undefined,
                        y: map ? undefined : transform(yaxis, "top")(evt?.clientY),
                        lon: map ? xaxis.p2c() : undefined,
                        x: map ? undefined : transform(xaxis, "left")(evt?.clientX),
                    })
                )
            );
        },
        [dispatch, module, id, onClick]
    );

    const onInitialized = useCallback(
        (figure: Readonly<Figure>, graphDiv: Readonly<HTMLElement>) => {
            onClick && graphDiv.addEventListener("click", clickHandler);
            plotRef.current = graphDiv as HTMLDivElement;
            plotlyRef.current = window.Plotly as unknown as PlotlyObject;

            if (animationData) {
                runAnimation()?.catch(console.error);
            }
        },
        [onClick, clickHandler, animationData, runAnimation]
    );

    const getRealIndex = useCallback(
        (dataIdx: number, index?: number) => {