onScaleChange creates feedback loop

[Casey-Litmer]

I am trying to use onScaleChange to calculate new data when the user pans or scales the CartesianChart, much like how a graphing calculator plots points from a formula to its current domain.

The problem I am running in to is even when I debounce the callback, it triggers an infinite loop even when the incoming data has not changed its bounds:

// Calcuates new data from 'start' to 'end'
const getNewData = (start: number, end: number) => {/*formula*/}

const Plot = () => {
  const transformState = useChartTransformState({scaleX:1, scaleY:1});

  const [DATA, setDATA] = useState<Record<string, unknown>[]>([{}]);

  // Callback that runs on scale change and calculates new data in that range
  const newDataOnScaleChange = debounce(
    (xScale: ScaleLinear<number, number>, yScale: ScaleLinear<number, number>) => {

      const [newDataStart, newDataEnd] = xScale.domain();
      setDATA(getNewData(newDataStart, newDataEnd));

  }, 100);
  
  return (
    <CartesianChart
        data = {DATA}
        onScaleChange={newDataOnScaleChange}
        transformState={transformState.state}
        //...xKeys, yKeys, etc.
    />
        {/*children*/}
    </CartesianChart>
  )
}

It says clearly in the docs that onScaleChange runs when the scale changes OR when there is new data.

Is there any way to prevent the latter? I've been digging through the sources trying to see if there is some way to prevent new data from running the callback. I found the useEffect that runs the onScaleChange, but its dependencies are too complex to patch with a simple 'doNotRunOnNewData' condition.

Is there a better way to do this than with onScaleChange?

[keithluchtel]

@Casey-Litmer what version of victory-native-xl are you using? Looking at the useEffect that triggers the scale change callback, it looks like it does try to prevent calling the callback if that scale bounds haven't changed at all:

  React.useEffect(() => {
    const rescaledX = zoomX.rescaleX(xScale);
    const rescaledY = zoomY.rescaleY(primaryYScale);
    if (
      !isEqual(xScaleRef.current?.domain(), rescaledX.domain()) ||
      !isEqual(yScaleRef.current?.domain(), rescaledY.domain()) ||
      !isEqual(xScaleRef.current?.range(), rescaledX.range()) ||
      !isEqual(yScaleRef.current?.range(), rescaledY.range())
    ) {
      xScaleRef.current = xScale;
      yScaleRef.current = primaryYScale;
      onScaleRef.current?.(rescaledX, rescaledY);
    }
  }, [onScaleChange, onScaleRef, xScale, zoomX, zoomY, primaryYScale]);

[Casey-Litmer]

I am using the latest version.

I managed a workaround by toggling a boolean condition to prevent it from immediately running again.

const newDataOnScaleChange = debounce(
    (xScale: ScaleLinear<number, number>, yScale: ScaleLinear<number, number>) => {
      
      const [newDataStart, newDataEnd] = xScale.domain();

      if (updateScaleWithData.current) {
          setDATA(getNewData(newDataStart, newDataEnd));
          updateScaleWithData.current = false;
     } else {
          updateScaleWithData.current = true;  
     }

  }, 100);

This seems to work for now, but not very smoothly. I am not sure exactly why there was a feedback loop because I also saw the comparisons in the useEffect. It might have to do with the state changes being delayed or the graph auto-fitting to the new vertical range.

In general, I don't know if it is the best idea to use the onScaleChange callback to handle generative data to begin with, given that it is separate from the actual bounds of the data (I haven't tested it with zooming yet).

I am more focused on getting the web version finished right now, but I will return to this and open a new issue if I find a better way or potential feature request!