-
-
Notifications
You must be signed in to change notification settings - Fork 136
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Plotly.react #2
Comments
My vote is for this repo. Once we agree on that lets get it imported into https://github.com/plotly/Plotlyjs-React-Lab |
@bpostlethwaite Can you clarify what you mean by imported? |
well I wrote a Plotly React component for the Lab. https://github.com/plotly/Plotlyjs-React-Lab/blob/master/src/components/PlotlyReact.js The intention is to replace it with the finished version that will be hosted elsewhere. |
which, if here, should be imported into the lab so we can use it within that test application. |
My initial thought was to put it into the @bpostlethwaite I would imagine that the lab wouldn't actually need to call |
We could certainly expose it separately, as in |
@bpostlethwaite I assumed you meant the component would be imported. Is that correct? (As opposed to a standalone method that computes a diff and used in a react component) |
Oh sorry for the confusion. Yes I was thinking component it makes lots of sense that it is in Plotly.js |
Tricky parts of
|
I'm not sure if this is where folks are discussing requirements or not, but a few more things from my (Dash's) end: Currently, calling |
@chriddyp Yeah, I think the goal is a method that more or less diffs the input and sends it to the correct method ( var Plotly = require('plotly.js')
var createPlotlyComponent = require('plotlyjs-react')
var PlotlyComponent = createPlotlyComponent(Plotly) (to be just a bit verbose.) The important part is that you can inject your own version (including cdn if you prefer) and if it has |
That's exactly the issue - that changes to the state driven by the plot's own UI do not propagate back to the state you used to generate the plot in the first place. How do we handle this? I'm not sure it's feasible to say "these are the pieces of the state that can get modified by the UI, so ignore these in the input to @chriddyp in general I feel like the user's intent is already clear from their UI actions - if they zoom in, then So how do we accomplish this? Maybe all the internal Relatedly, @rreusser points out that it's not very react-like, nor good for performant diffing, for plotly.js to be mutating |
@alexcjohnson good points. I think the cleanest is for the component to connect to the events and trigger a callback. It could even expose a With this general approach the plot wouldn't have to know it's in a react environment, right? |
Okay, to summarize some of the conclusions from various discussions, in particular with @alexcjohnson, here's the basic design regarding react:
|
I think I followed this correctly, and it's likely that |
@nicolaskruchten Sounds good! Alternatively, maybe it's worthwhile to add a "don't be clever" switch that tells it to replot even when |
Yeah the |
I'm using plotly.js in a React environment and I would like to add this:
This is just a quick remark, I'll be happy to go into more details if needed. |
@Nauss Thanks for the feedback! Regarding your first point, that's the precise concern. The standard react-like approach is to clone everything, compare it to the new input, and apply changes. For plotly.js, that won't work for cases like yours. We've been talking about applying some heuristics instead. Specifically:
As for resizing, there are perhaps a couple options. First, I added a Hope that addresses your concerns! Please feel free to follow up though! |
Thanks for the quick answer :)
We have a naive implementation for now but I'll try v1.0 next and come back here for a feedback. Thanks for the great work !! |
@Nauss Sounds good! Just to be clear, v1.0 does do a full replot on every change. It's meeting our current need, though it might not be adequate for you until v2.0. Regarding the mouse resizing, I think there's no reason you couldn't use |
We are trying to use Is there any way to avoid this with the current plotly react component? Any workaround that would allow us to add data without completely resetting the plot state? If not, what is the current status of the |
This is temporary fix until plotly/react-plotly.js#2 has been released
This is temporary fix until plotly/react-plotly.js#2 has been released
This is temporary fix until plotly/react-plotly.js#2 has been released
This is temporary fix until plotly/react-plotly.js#2 has been released
@swiperii if you want to create a separate issue I'd be happy to try to help you accomplish your goals within the current framework. Most likely you'll need to handle the updates and feed the layout back to the props along with the new data points. |
To clarify the next steps... The Once the upstream functionality is in place, this React component will be modified to take advantage of it and we can then close this current issue :) |
@nicolaskruchten Thanks for your response. I have currently made my own Plotly.react method that uses add/deleteTraces, restyle and some ugly hacks to make data updates work together with zoom and selections. There are still some bugs though, so I eagerly look forward to the real thing :) |
Good news! The |
is there a solution for this?. As the plot automatically re-draws when any the data object changes. i.e an x-axis data point. |
There is a Plotly react component that was produced from this here: https://github.com/plotly/react-plotly.js/ There is also the .react method on the vanilla plotly object. |
Seeking feedback from @etpinard @alexcjohnson @bpostlethwaite on the best location for
Plotly.react
. I can imagine a few possibilities:plotly.js
and we just have to add a couple lines of code to this repo to make use of it.Unless I'm wrong, sounds like @alexcjohnson is/will be working on
Plotly.react
. I just wanted to confirm that's what this will link up with.The text was updated successfully, but these errors were encountered: