[BUG] Plotly-Resampler Not Resampling on Zoom Events in Flask-React Integration

[anish-dev21]

Describe the bug 🖍️
The plotly-resampler in the Flask backend does not resample data as expected when zoom events are triggered in the React frontend. Despite adding an API endpoint to handle zoom events with start and end points for the data range, the data remains unresampled.

Reproducing the bug 🔍
To reproduce this issue, follow these steps:

1. Set up a Flask backend with an endpoint to handle data retrieval (/data) and integrate the plotly-resampler library.
2. Use the FigureResampler to add data traces to the figure in the Flask endpoint.
3. On the React frontend, implement a zoom handler that sends start_date and end_date to the /data endpoint.
4. Verify if the data sent back to the frontend is resampled correctly according to the zoomed range.

Minimal code example:

Flask Backend:

@app.route('/data', methods=['GET'])
def get_data():
    column = request.args.get('column')
    start_date = request.args.get('start_date')
    end_date = request.args.get('end_date')
    fig = FigureResampler(go.Figure(), default_n_shown_samples=2000)
    fig.add_trace(go.Scattergl(name=column), hf_x=result['Date'], hf_y=result[column])
    resampled_trace = fig.data[0]
    response_data = {
        'x': resampled_trace.x.tolist(),
        'y': resampled_trace.y.tolist()
    }
    return jsonify(response_data)

React Frontend:

const handleZoom = (event) => {
  const start = event['xaxis.range[0]'];
  const end = event['xaxis.range[1]'];
  axios.get('http://localhost:5000/data', {
    params: {
      column: selectedColumn.value,
      start_date: new Date(start).toISOString(),
      end_date: new Date(end).toISOString(),
    },
  })
  .then(response => {
    const rawData = response.data;
    const downsampledData = {
      x: rawData.x.map(x => new Date(x).toISOString()),
      y: rawData.y,
    };
    setGraphs(prevGraphs => [
      ...prevGraphs,
      { data: downsampledData, startDate: start, endDate: end, columnName: selectedColumn.label }
    ]);
  })
  .catch(error => console.error('Error fetching data:', error));
};

Expected behavior 🔧
The plotly-resampler should resample the data to reflect the specified zoom range and return the appropriately resampled data to the frontend.

Environment information

• OS: Windows 11
• Python environment: Sytem environement
  • Python version: 3.12.5
  • plotly-resampler environment: Flask web app, browser: Microsoft edge
• plotly-resampler version: 0.10.0

Additional context
The previous implementation with Dash handled resampling without issues, but the direct integration with React requires more manual resampling management, and plotly-resampler doesn’t appear to react to zoom events as it did with Dash.