diff --git a/.changeset/serious-eggs-cheat.md b/.changeset/serious-eggs-cheat.md new file mode 100644 index 0000000000..85118f950f --- /dev/null +++ b/.changeset/serious-eggs-cheat.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Internal: do a few tiny tidyings in the interactive graph code diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx index dbd6ca3491..7d2a913939 100644 --- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx @@ -86,9 +86,9 @@ export const MafsGraph = (props: MafsGraphProps) => { readOnly, fullGraphAriaLabel, fullGraphAriaDescription, + step: tickStep, + box: [width, height], } = props; - const [width, height] = props.box; - const tickStep = props.step as vec.Vector2; const uniqueId = React.useId(); const descriptionId = `interactive-graph-description-${uniqueId}`; @@ -183,11 +183,7 @@ export const MafsGraph = (props: MafsGraphProps) => { left: 0, }} > - {props.markings === "graph" && ( - <> - - - )} + {props.markings === "graph" && } { /> {/* Axis Ticks, Labels, and Arrows */} - { - // Only render the axis ticks and arrows if the markings are set to a full "graph" - props.markings === "graph" && ( - <> - - - - ) - } + {/* Only render the axis ticks and arrows if the markings are set to a full "graph" */} + {props.markings === "graph" && ( + <> + + + + )} {/* Locked & Interactive elements nested an SVG to lock to graph bounds*/} {/* Locked figures layer */}