Looking for a more elegant way to add traces with react-plotly

There are two things that are bugging me with how I currently add traces to a plot:

  1. As per plotly.js Function Reference, I see there is a function named addTraces. I think this approach is far more elegant then how I’m currently adding traces (see below) which requires me to push to a nested state using immutability-helper and add all the trace data, compared to addTraces which only requires a subset of values, but I’m not clear how to implement this with react-plotly.

  2. In addition, my approach requires a hack that ensures that the current index array of selectedpoints are applied to the new trace since otherwise the new trace will have all points selected while the all the previous traces could have only a subsection selected. This also requires me to keep an additional item in my state that holds an array of selection point indices.

import update from 'immutability-helper'; // for updating nested state


eventHandler = () => {
  // Add new data by pushing a new trace to the nested figures data array in this.state
  return update(this.state, {
                      plot: { data: { $push: [this.getTraceData(selection)] } }
                  })
}

getTraceData = (selection) => {
       // selected data hack:
       // Set trace's selectedpoints to ensure that this new trace
       // is synchronized with any previous selection made in the plot. 
        const selectedpoints = this.state.selectedData ? this.state.selectedData.map(p => p.index) : null
        const newTrace = {
            x: // logic to get x values ommitted
            y: // logic to get y values ommitted
            type: 'bar',
            selectedpoints: selectedpoints,
        }
        return newTrace
    }

This works, but as I mentioned, it doesn’t feel elegant and seems quite hacky. How can this be done with addTraces instead, and what is a better approach to applying previous selections on new traces?

Thanks!