Hook-based API #275

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

Jump to bottom

Open

JamesRamm wants to merge 5 commits into plotly:master

from JamesRamm:patch-1

Open

Hook-based API #275

JamesRamm wants to merge 5 commits into plotly:master from JamesRamm:patch-1

Conversation

JamesRamm

Copy link

@JamesRamm JamesRamm commented Feb 9, 2022 •

edited

Loading

As discussed in #242 here is a simple hook-based API for react-plotly.

Usage

The hook gives you a ref and two streams: updates and appendData.

Here is an example:

function MyChart(props) {
 const { ref, updates, appendData } = usePlotly();
 // Here is a function that will change the data. You must pass a partial Figure object (plotly DSL object) which will be
 // merged with all previous calls to `updates`
 const changeData = () => updates({ data: [ { y: [Math.random() * 10], type: 'scatter' } ] })
 // Here we start extending traces using the `appendData` stream
 const extendData = setInterval(() => {
 appendData({ data: { y: [[Math.random() * 10]]}, tracePos: [0] });
 }, 500);
 
 return (
 <div> 
 <div ref={ref} style={{ width: '500px', height: '300px' }}/> 
 <button onClick={changeData}>React!</button>
 <button onClick={extendData}>Extend!</button>
 </div>);
}

updates can be treated as a function that you can give partial Figure definitions to and it will update the graph using Plotly.react
appendData can also be used as a function which is directly mapped on to Plotly.extendTraces every time it is called.

Advantages

I believe this essentially exposes all of plotly to react with a much smaller API surface.
Can be used in functional react components and in conjunction with other react hooks
Ability to easily use extendTraces answers a few issues (e.g. Is there a way to partially re-render a plot? #219 , How to properly use extendTraces #85 , How to change marker color for only some values in line graph? #145 )
Gives full control over the host element by exposing the ref (Demand for "ref" prop support #209 ) which gives you full access to the plotly API (functions/events, through ref.current)
Better (IMO) responsive behaviour - responds to element resize events, always fills its parent element but doesnt exceed.
Keeps up with the direction React is heading in as a whole

JamesRamm added 3 commits

February 9, 2022 15:37

@JamesRamm


 hook-based API for react-plotly

86e2a38

@JamesRamm


 Update usePlotly.js

aa200c9

Remove unused argument

@JamesRamm


 Update package.json

1d0b7fc

Add dependencies for usePlotly hook

himbeles

himbeles suggested changes

Mar 9, 2022

View reviewed changes

Copy link

@himbeles himbeles left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor fix regarding requirement versions

package.json Outdated Show resolved Hide resolved

@JamesRamm


 Fix version strings

95cb40d

@govindthakur25

Copy link

govindthakur25 commented Jun 1, 2022

Suggestion: It would be good to have a section in the README for this hook, with a few working codepen examples.

@JamesRamm


 Update README

eb226fe

Adds example of `usePlotly`

@JamesRamm

Copy link

Author

JamesRamm commented Jun 2, 2022

@govindthakur25
I have added a README section.

@himbeles
What is needed to get this merged? Can we go ahead?

@JamesRamm

Copy link

Author

JamesRamm commented Jun 30, 2022

Bump
Not sure what is needed to get this merged...

@himbeles

Copy link

himbeles commented Jun 30, 2022

@govindthakur25

I have added a README section.

@himbeles

What is needed to get this merged? Can we go ahead?

Just to clarify, I'm not a maintainer of this project.

@Dyocius

Copy link

Dyocius commented Jun 30, 2022

@nicolaskruchten Do you know who the maintainer of this repo is?

@JamesRamm

Copy link

Author

JamesRamm commented Oct 12, 2022

I am just going to put some names of previous committers here in the hope of getting some movement:

@alexcjohnson
@nicolaskruchten
@bpostlethwaite

Sorry for the spam but it seems there is no-one actively looking at this repo?

@alexcjohnson

Copy link

Collaborator

alexcjohnson commented Oct 13, 2022

@JamesRamm apologies for the silence from us maintainers. This looks great! I'll make a few comments on the code itself, but the one extra thing I'll ask is some basic tests - either add to https://github.com/plotly/react-plotly.js/blob/master/src/__tests__/react-plotly.test.js or put a new file next to it for this purpose. We do have this repo connected to CircleCI https://app.circleci.com/pipelines/github/plotly/react-plotly.js - hopefully the config changes I just made there will enable it to (a) run on this and other forked PRs and (b) show up in the status of this PR 🤞

alexcjohnson

alexcjohnson reviewed

Oct 13, 2022

View reviewed changes

package.json

"react": ">0.13.0"

"react": ">0.13.0",

"flyd": ">=0.2.8",

"ramda": ">=0.28.0"

Copy link

Collaborator

@alexcjohnson alexcjohnson Oct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flyd and ramda seem like they'd be better as dependencies rather than peerDependencies - and then let's change from >= to ^

Copy link

@floriancargoet floriancargoet Oct 13, 2022 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are 2 news deps really required?
ramda seems to be used just to write this code in the functional style.
The author himself said in the related issue that it could be replaced with:

function getSizeForLayout(entries) {
 const { width, height } = entries[0].contentRect;
 return { layout: { width, height } };
}

Copy link

Collaborator

@alexcjohnson alexcjohnson Oct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question @floriancargoet - ramda has a couple of other uses in this PR (and we do use it a good deal elsewhere at Plotly), but to my mind your getSizeForLayout rewrite is more readable than the full functional version.

Copy link

Author

@JamesRamm JamesRamm Oct 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While yes getSizeForLayout can be written easily without ramda (happy to do this), the main reason it was included was for mergeDeepRight which is a relatively complex function to implement.
We could go for an independent implementation but my argument would be that ramda is relatively small and compatible with tree shaking

Copy link

Collaborator

@alexcjohnson alexcjohnson Oct 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, deep merge is annoying to reimplement. I have no problem adding this (and flyd) but I do think they belong in dependencies.

alexcjohnson

alexcjohnson reviewed

Oct 13, 2022

View reviewed changes

src/usePlotly.js

Plotly.react(internalRef, state);

});

const endAppend = appendData.map(({ data, tracePos }) => Plotly.extendTraces(internalRef, data, tracePos));

Copy link

Collaborator

@alexcjohnson alexcjohnson Oct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you've implemented extendTraces here, let's finish it by including maxPoints (the optional 4th argument to extendTraces)

terebentina

terebentina reviewed

Oct 13, 2022

View reviewed changes

src/usePlotly.js

const appendData = useMemo(stream, []);

const plotlyState = useMemo(

() => scan(mergeDeepRight, { data: [], config: {}, layout: {} }, updates),

[]

Copy link

@terebentina terebentina Oct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't updates be added to the dependencies list here since it's used inside the hook?

Copy link

Author

@JamesRamm JamesRamm Oct 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since updates is memoized with an empty array, it will only be computed once on mount, so adding it to the dependencies array or not for plotlyState will have no effect....

src/usePlotly.js

endS.end(true);

};

}

}, [internalRef, plotlyState, updates, appendData]);

Copy link

@terebentina terebentina Oct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't observer be added as a dependency here since it's used inside the hook?

@Michael-fore

Copy link

Michael-fore commented May 19, 2023 •

edited

Loading

Y'all... uhhh... gonna merge this?

@alexcjohnson

Copy link

Collaborator

alexcjohnson commented May 22, 2023

There are a number of unresolved review comments before we can merge

Labels

None yet

8 participants

@JamesRamm @govindthakur25 @himbeles @Dyocius @alexcjohnson @Michael-fore @floriancargoet @terebentina

Uh oh!

Hook-based API #275

Are you sure you want to change the base?

Hook-based API #275

Uh oh!

Conversation

@JamesRamm JamesRamm commented Feb 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Usage

Advantages

Uh oh!

@himbeles himbeles left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

govindthakur25 commented Jun 1, 2022

Uh oh!

JamesRamm commented Jun 2, 2022

Uh oh!

JamesRamm commented Jun 30, 2022

Uh oh!

himbeles commented Jun 30, 2022

Uh oh!

Dyocius commented Jun 30, 2022

Uh oh!

JamesRamm commented Oct 12, 2022

Uh oh!

alexcjohnson commented Oct 13, 2022

Uh oh!

@alexcjohnson alexcjohnson Oct 13, 2022

Choose a reason for hiding this comment

Uh oh!

@floriancargoet floriancargoet Oct 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

@alexcjohnson alexcjohnson Oct 13, 2022

Choose a reason for hiding this comment

Uh oh!

@JamesRamm JamesRamm Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

@alexcjohnson alexcjohnson Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

@alexcjohnson alexcjohnson Oct 13, 2022

Choose a reason for hiding this comment

Uh oh!

@terebentina terebentina Oct 13, 2022

Choose a reason for hiding this comment

Uh oh!

@JamesRamm JamesRamm Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

@terebentina terebentina Oct 13, 2022

Choose a reason for hiding this comment

Uh oh!

Michael-fore commented May 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexcjohnson commented May 22, 2023

Uh oh!

Uh oh!

@JamesRamm JamesRamm commented Feb 9, 2022 •

edited

Loading

@floriancargoet floriancargoet Oct 13, 2022 •

edited

Loading

Michael-fore commented May 19, 2023 •

edited

Loading