[SR] Circle - Add the interactive elements circle description to the whole graph container #2060
Conversation
…whole graph container
|
Size Change: +184 B (+0.01%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
| @@ -221,3 +207,59 @@ function crossProduct<A, B>(as: A[], bs: B[]): [A, B][] { | |||
| } | |||
| return result; | |||
| } | |||
|
|
|||
| function CircleGraphDescription({state}: {state: CircleGraphState}) { | |||
| // CircleGraphDescription needs to the `usePerseusI18n`, hook so it has] | |||
There was a problem hiding this comment.
?
| // CircleGraphDescription needs to the `usePerseusI18n`, hook so it has] | |
| // CircleGraphDescription needs the `usePerseusI18n` hook so it has |
| @@ -221,3 +207,59 @@ function crossProduct<A, B>(as: A[], bs: B[]): [A, B][] { | |||
| } | |||
| return result; | |||
| } | |||
|
|
|||
| function CircleGraphDescription({state}: {state: CircleGraphState}) { | |||
There was a problem hiding this comment.
this is the same as state: CircleGraphState? Or is there an additional benefit to the destructing in this case?
There was a problem hiding this comment.
I think that works too. I think the reason it was done this way (I was following what Ben did for the point description) is so it follows the prop structure the way they're standardly written for other functional components.
There was a problem hiding this comment.
Yeah, here's the real reason:
| // Exported for testing | ||
| export function describeCircleGraph( | ||
| state: CircleGraphState, | ||
| i18n: {strings: PerseusStrings; locale: string}, |
There was a problem hiding this comment.
theres a I18nContextType that might be worth exporting to use here and around in the other graphs as needed. Alternatively, we could create a type in a utility file and destructure
{strings: PerseusStrings; locale: string}: I18ContextType then remove line 225
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (d7add26) and published it to npm. You Example: yarn add @khanacademy/perseus@PR2060If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2060 |
| @@ -30,7 +31,7 @@ export function renderCircleGraph( | |||
| ): InteractiveGraphElementSuite { | |||
| return { | |||
| graph: <CircleGraph graphState={state} dispatch={dispatch} />, | |||
| interactiveElementsDescription: null, | |||
| interactiveElementsDescription: CircleGraphDescription({state}), | |||
There was a problem hiding this comment.
I'm slightly surprised that this works. Since CircleGraphDescription is calling a hook, I'd expect it to have to be used as a JSX element:
<CircleGraphDescription state={state} />If the component calling renderCircleGraph does so conditionally, e.g.
if (graphType === "circle") {
return renderCircleGraph(state, dispatch)
}And graphType changes between renders, this code will break the Rules of Hooks. The usePerseusI18n hook will be called on one render and not called on the next.
I think it's working (mostly?) because the graph type rarely changes between renders. It probably only does so in the content editor.
There was a problem hiding this comment.
Ack! My mistake. I 100% meant to use your code for Point as the blueprint for this, which means I was supposed to write <CircleGraphDescription state={state} />.
| srCircleRadiusPoint, | ||
| srCircleRadius, | ||
| srCircleOuterPoints, | ||
| } = describeCircleGraph(graphState, {strings, locale}); |
There was a problem hiding this comment.
I like this way of splitting up the logic! Makes it much easier to read and test :)
Summary:
Add the interactive Circle graph description to the full graph container.
This adds the "Interactive elements: Circle..." description to the outermost graph container.
Issue: https://khanacademy.atlassian.net/browse/LEMS-1706
Test plan: