Full update on Plot data change

I am just starting to work with Plotly as a part of a create react app based project an I wanted to ask a few clarifying questions (plotly.js 1.35.1 and react-plotly.js 1.7.0)

1. Based on all the documentation I have read and the demo application itself, one needs to eject or directly import plotly.js via a <script> tag to get it to work with create-react-app. However, I have found this latter approach (directly using the demo app) does not work any more as you get an compile error: Module not found: Can’t resolve ‘plotly.js’ when trying to run the demo app. However, I am able to get things to work in a more “standard” fashion by npm installing both plotly.js and react-plotly.js and directly importing Plot from react-plotly.js into my React component. From what I had read in some of the issues, it sounded like moving away from the need for customising the web pack config was planned for early 2018, so maybe what I am seeing is a result of that, but wanted to be sure there was not a hidden gotcha somewhere.

2. Based on this issue #25, it sounds like the version I am using should be better about doing updated. However, I have found that updating the state of my component (which changes the data in the Plot component) via a click event when zoomed into a specific region causes the whole plot to unzoom. Am i misunderstanding the scope of this new feature (#25) or just making a rookie mistake?

onClick = (data) => {
    let x = data.points[0].x;
    let y = data.points[0].y;
   
    let {selectedPoints} = this.state;
     
    let selectedIndex = selectedPoints.x.indexOf(x)
    if(selectedIndex === -1) {
       newSelected = {
         x:selectedPoints.x.push(x),
         y:selectedPoints.y.push(y)
       }
    } else {
       newSelected = {
          x: selectedPoints.x.delete(selectedIndex),
          y: selectedPoints.y.delete(selectedIndex)
       }
    }

    this.setState({
      selectedPoints:newSelected
    })

  }

render() {
  return (
    <Plot
        data={[
          {
            type: 'scatter',
            mode: 'lines',
            x: plottedData.x,
            y: plottedData.y,
            marker: {color: 'red'}
          },
          {
            type: 'scatter',
            mode: 'markers',
            x: this.state.selectedPoints.x.toJS(),
            y: this.state.selectedPoints.y.toJS(),
            marker: {color: 'blue'}
          },
        ]}
  
        layout={{
          width: 1020,
          height: 540,
          title: 'A Fancy Plot',
          yaxis: {
            showticklabels:false
          }
        }}
        onClick={this.onClick}
        onSelected = {this.onSelect}
      />
  )
}

[nicolaskruchten]

Ah I see. Well, this makes a certain amount of sense: the layout you’re passing to <Plot> doesn’t contain the zoom information, so every time React re-renders the plot, it will use the layout you gave it. You’ll likely need to subscribe to stuff like the zoom event from the <Plot> via onUpdate to capture and store edits to layout such that on the following render, that state is preserved.

Does that make sense?

[ghost]

Hey, everyone! Take a look in this solution with explanations in how to create a graph using React and Plot.ly with the life cycle of the React.

https://medium.com/@jmmccota/plotly-react-and-dynamic-data-d40c7292dbfb