Full update on Plot data change

[robowen5mac]

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 Expose Plotly.restyle #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 (Expose Plotly.restyle #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]

Regarding point 1: we recently (2 days ago) updated the behaviour of this component and the documentation such that this type of eject or script hack is no longer required... This component (react-plotly.js) now loads plotly.js from the dist directory so you should be able to just import Plot from 'react-plotly.js' from within an un-eject-ed app created via create-react-app.

[nicolaskruchten]

Regarding point 2: issue #25 has been closed and we will not be implementing any way of getting to Plotly.restyle because this component (react-plotly.js) now uses the new Plotly.react method available in plotly.js version 1.34+. Hopefully that clears up your understanding of our current roadmap/implementation!

[nicolaskruchten]

Regarding your specific issue: it sounds like there is some odd or incorrect or undesirable behaviour happening with rerendering zoomed plots, which I can investigate for you! Can you create a CodePen showing your issue?

[robowen5mac]

Thanks. Sorry I got confused with between what I was reading here and on on sites. Glad you made the update, it is very useful.

Sure...I will get something setup and send it along

[nicolaskruchten]

I apologize that the documentation has been confusing or overly complicated... We're working to streamline things every day :)

[robowen5mac]

No need to apologise, not at all. I really only asked to make sure I was not missing something critical that might bite me later. I love the fact that you made this change, it makes things much simpler. Rereading your documentation, it is now very clear. It was more that I had read old issues and very likely read the documentation right before you updated it, so had gotten myself a bit confused. Thanks for the quick response.

[nicolaskruchten]

Thanks for the validation that the new way is clearer :) I'm definitely interested in following up on the zoom behaviour still though!

[robowen5mac]

Sure..just took me a bit to get the codepen working:

https://codepen.io/robowen5mac/pen/GxgZJE?editors=0010

Click on any point and it should set a blue circle at the spot. If you zoom in and do the same thing, the plot resets.

Thanks for the help.

[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?

[robowen5mac]

Yep, I had started to go down that road, but when I read about Plotly.react, I wasn't sure how much of this state management I still had to do. Thanks for the clarification and help

[nicolaskruchten]

No problem! Please let me know how you make out. There clearly isn't enough documentation in the ReadMe of this component about how much of this is necessary...

[robowen5mac]

Done, easy change. Working just as I wanted it to now.

[nicolaskruchten]

Great! I'll try to update the documentation to make it a bit clearer that this is now a "dumb" component that doesn't preserve its internal state.

[nicolaskruchten]

I've just updated the documentation to make this clearer :)

[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