Skip to content
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.

Sign up for GitHub

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

[Interactive Graph Editor: Storybook] Add a story for Point graph type start coords #1482

Merged
merged 3 commits into from
Aug 5, 2024
Merged

[Interactive Graph Editor: Storybook] Add a story for Point graph type start coords #1482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b8e568a
[Interactive Graph Editor: Storybook] Add a story for Point graph typ…
nishasy Aug 2, 2024
9bbe9ea
Merge branch 'main' into point-graph-stories
nishasy Aug 5, 2024
7708236
Add clarifying comment
nishasy Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/grumpy-sheep-mate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@khanacademy/perseus": patch
"@khanacademy/perseus-editor": patch
---

[Interactive Graph Editor: Storybook] Add a story for Point graph type start coords
1 change: 1 addition & 0 deletions packages/perseus-editor/src/__stories__/flags-for-api-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const flags = {
linear: true,
"linear-system": true,
ray: true,
point: true,

// Locked figures flags
"interactive-graph-locked-features-m2b": true,
Expand Down
114 changes: 57 additions & 57 deletions packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
circleWithStartingCoordsQuestion,
linearSystemWithStartingCoordsQuestion,
linearWithStartingCoordsQuestion,
pointQuestionWithStartingCoords,
polygonQuestion,
quadraticWithStartingCoordsQuestion,
rayWithStartingCoordsQuestion,
Expand Down Expand Up @@ -39,76 +40,75 @@ export default {

const onChangeAction = action("onChange");

export const InteractiveGraphSegmentWithStartingCoords =
(): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={segmentWithStartingCoordsQuestion}
/>
);
};
export const InteractiveGraphSegment = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={segmentWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphSegmentsWithStartingCoords =
(): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={segmentsWithStartingCoordsQuestion}
/>
);
};
export const InteractiveGraphSegments = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={segmentsWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphLinearWithStartingCoords =
(): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={linearWithStartingCoordsQuestion}
/>
);
};
export const InteractiveGraphLinear = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={linearWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphLinearSystemWithStartingCoords =
(): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={linearSystemWithStartingCoordsQuestion}
/>
);
};
export const InteractiveGraphLinearSystem = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={linearSystemWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphRayWithStartingCoords = (): React.ReactElement => {
export const InteractiveGraphRay = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={rayWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphCircleWithStartingCoords =
(): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={circleWithStartingCoordsQuestion}
/>
);
};
export const InteractiveGraphCircle = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={circleWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphQuadraticWithStartingCoords =
(): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={quadraticWithStartingCoordsQuestion}
/>
);
};
export const InteractiveGraphQuadratic = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={quadraticWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphSinusoidWithStartingCoords =
(): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={sinusoidWithStartingCoordsQuestion}
/>
);
};
export const InteractiveGraphSinusoid = (): React.ReactElement => {
return (
<EditorPageWithStorybookPreview
question={sinusoidWithStartingCoordsQuestion}
/>
);
};

export const InteractiveGraphPoint = (): React.ReactElement => (
<EditorPageWithStorybookPreview
question={pointQuestionWithStartingCoords}
/>
);

export const InteractiveGraphPolygon = (): React.ReactElement => {
return <EditorPageWithStorybookPreview question={polygonQuestion} />;
Expand Down
10 changes: 10 additions & 0 deletions packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,16 @@ export const pointQuestion: PerseusRenderer = interactiveGraphQuestionBuilder()
export const pointQuestionWithDefaultCorrect: PerseusRenderer =
interactiveGraphQuestionBuilder().withPoints(1).build();

export const pointQuestionWithStartingCoords: PerseusRenderer =
interactiveGraphQuestionBuilder()
.withPoints(2, {
startCoords: [
[0, 0],
[2, 2],
],
})
.build();

export const polygonQuestion: PerseusRenderer =
interactiveGraphQuestionBuilder()
.withContent(
Expand Down
1 change: 0 additions & 1 deletion packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -637,7 +637,6 @@ describe("InteractiveGraphQuestionBuilder", () => {
correct: {
type: "point",
numPoints: "unlimited",
coords: [[0, 0]],
},
}),
);
Expand Down
4 changes: 2 additions & 2 deletions packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -684,7 +684,7 @@ class PolygonGraphConfig implements InteractiveFigureConfig {

class PointsGraphConfig implements InteractiveFigureConfig {
private numPoints: number | "unlimited";
private coords: Coord[];
private coords?: Coord[];
private startCoords?: Coord[];

constructor(
Expand All @@ -695,7 +695,7 @@ class PointsGraphConfig implements InteractiveFigureConfig {
},
) {
this.numPoints = numPoints;
this.coords = options?.coords ?? [[0, 0]];
this.coords = options?.coords;
Copy link
Contributor

Choose a reason for hiding this comment

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

Question: I don't think this affects this PR, but you mentioned in the summary that you changed this so it "calculates the correct coords itself." How does it do that?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If I don't pass in any coords, then the graph automatically initializes with the default starting coords in initialize-graph-state.ts when it renders. If I hard-code it here, it doesn't initialize to the right one based on the number of points. I could also call the initializer function here, but that would be redundant.

this.startCoords = options?.startCoords;
}

Expand Down
5 changes: 5 additions & 0 deletions packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,11 @@ export const StatefulMafsGraph = React.forwardRef<
);
}, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);

Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: Might be helpful to have some comments here explaining what this chunk is for. Apologies, should have added that when I worked on this section too!

// Update the graph whenever any of the following values changes.
// This is necessary to keep the graph previews in sync with the updated
// graph settings within the interative graph editor.
const numSegments = graph.type === "segment" ? graph.numSegments : null;
const numPoints = graph.type === "point" ? graph.numPoints : null;
Copy link
Contributor

Choose a reason for hiding this comment

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

Comment: I wonder if there is a good way for us to leave a note/reminder about needing to add new information like this here and to the useEffect below. 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm really not sure how to do that in a way that's helpful/visible 🤔

const numSides = graph.type === "polygon" ? graph.numSides : null;
const snapTo = graph.type === "polygon" ? graph.snapTo : null;
const showAngles = graph.type === "polygon" ? graph.showAngles : null;
Expand All @@ -113,6 +117,7 @@ export const StatefulMafsGraph = React.forwardRef<
}
}, [
graph.type,
numPoints,
numSegments,
numSides,
snapTo,
Expand Down