I am experiencing an issue with the plotly-resampler in my Flask backend, which 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. This problem is affecting the dynamic data visualization in my application, making it difficult to provide an accurate and interactive user experience.The data for the plots is time series data retrieved from database tables.

Tried:

Flask Backend Setup:

Created a Flask backend with an endpoint (/data) to handle data retrieval.
Integrated the plotly-resampler library.

Used the FigureResampler to add data traces to the figure in the Flask endpoint.

@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 Implementation:

Implemented a zoom handler in the React frontend that sends start_date and end_date to the /data endpoint.

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));
}

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