[Mafs] Remove "mafs" flag from Interactive Graph code #2200

nishasy · 2025-02-05T22:06:43Z

Summary:

It's time to make the Mafs graph the official graph!

This means removing the flag from our code. In this PR, all the "mafs" flags are removed, and
some references to Mafs that are no longer necessary are also removed/updated.

The legacy graph will be removed in a separate PR.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2780

Test plan:

yarn jest

There should be no perceivable difference in any graphs, since the mafs flags have all been
fully 100% for a long while now. This is just the first step for removing obsolete code.

Check Storybook

Check yarn dev

…code It's time to make the Mafs graph the official graph! This means removing the flag from our code. In this PR, all the "mafs" flags are removed, and some references to Mafs that are no longer necessary are also removed/updated. The legacy graph will be removed in a separate PR. Issue: https://khanacademy.atlassian.net/browse/LEMS-2780 Test plan: `yarn jest` There should be no perceivable difference in any graphs, since the mafs flags have all been fully 100% for a long while now. This is just the first step for removing obsolete code. Check Storybook - [Regresion tests](http://localhost:6006/?path=/docs/perseus-widgets-interactive-graph-visual-regression-tests--docs) - [Interactive Graph](http://localhost:6006/?path=/docs/perseus-widgets-interactive-graph--docs) - [Interactive Graph Editor](http://localhost:6006/?path=/docs/perseuseditor-widgets-interactive-graph--docs) Check yarn dev - [yarn dev home](http://localhost:5173) - [flipbook](http://localhost:5173/?search=point#flipbook)

…eractive Graph code

github-actions · 2025-02-05T22:09:26Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (a8f3f52) and published it to npm. You
can install it using the tag PR2200.

Example:

yarn add @khanacademy/perseus@PR2200

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2200

github-actions · 2025-02-05T22:10:05Z

Size Change: -447 B (-0.03%)

Total Size: 1.48 MB

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	688 kB	-189 B (-0.03%)
`packages/perseus/dist/es/index.js`	379 kB	-258 B (-0.07%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	39 kB
`packages/keypad-context/dist/es/index.js`	760 B
`packages/kmath/dist/es/index.js`	86.9 kB
`packages/math-input/dist/es/index.js`	77.6 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	46.3 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus-score/dist/es/index.js`	115 kB
`packages/perseus/dist/es/strings.js`	6.06 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

nishasy · 2025-02-05T22:07:54Z

dev/flipbook.tsx

-                <GradableRenderer
-                    question={question}
-                    apiOptions={{...apiOptions, flags: {mafs: false}}}
-                />


This is the "no mafs" view when comparing the before and after in flipbook. Removing the "before" view here.

nishasy · 2025-02-05T22:08:22Z

dev/gallery.tsx

-                    </MultiSelect>
-                    <Strut size={spacing.xSmall_8} />
-                    <label htmlFor={flagsId}>Mafs Flags</label>
-                </View>


There's no "turning on mafs flags" now, so I'm removing the dropdown for doing that.

nishasy · 2025-02-05T22:13:23Z

packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx

-        ],
-    },
-    decorators: [StatefulDecorator],
-};


These locked figure-specific stories I added before felt out of place to me. They're already covered by different stories anyway, so I decided to remove them from this file.

… can actually use them in this PR to check that nothing changed

benchristel

This is very exciting! I left a couple questions inline, but LGTM!

benchristel · 2025-02-06T00:11:07Z

packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx

@@ -789,7 +780,7 @@ describe("InteractiveGraphEditor", () => {
        // Act
        render(
            <InteractiveGraphEditor
-                {...mafsProps}
+                {...baseProps}


Is the use of baseProps instead of segmentProps here intentional?

benchristel · 2025-02-06T00:23:45Z

packages/perseus/src/__stories__/hints-renderer.stories.tsx

Unrelated to your change, but... why are there hint renderer stories for every interactive graph type? That seems redundant. Is this file left over from when were were contemplating "hint mode" for interactive graphs?

That's a good question! I have no idea, but I agree that it's redundant, especially after the "with all interactive graphs" story. I'll go ahead and remove the repeated ones.

benchristel · 2025-02-06T00:33:22Z

packages/perseus/src/widgets/interactive-graph.tsx

        return (
-            <LegacyInteractiveGraph ref={this.legacyGraphRef} {...this.props} />


Will the LegacyInteractiveGraph component be removed in a future PR?

Yup, it's a separate task!

catandthemachines

Approved!

catandthemachines · 2025-02-06T16:13:28Z

dev/gallery.tsx

@@ -87,16 +85,6 @@ const styles = StyleSheet.create({
    },
 });

-function capitalize(key: string): string {


Just checking, this was only used for the mafsFlags, right? 🤔

Yup, it triggered a lint rule for not being used anymore. It's also not exported, so it's definitely not used outside this file.

catandthemachines · 2025-02-06T16:17:18Z

packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx

This is so satisfying ❤️

…stories, use more appropriate variable in tests

@benchristel

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/perseus@53.1.0 ### Minor Changes - [#2194](#2194) [`fd606f43d`](fd606f4) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for an interactive graph widget - [#2189](#2189) [`3ba74d173`](3ba74d1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Table widget - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code - [#2207](#2207) [`097176a26`](097176a) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Matrix widget - [#2216](#2216) [`b3c562ac2`](b3c562a) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Plotter widget - [#2198](#2198) [`649e6b16a`](649e6b1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Grapher widget - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic - [#2183](#2183) [`cac39013b`](cac3901) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Radio widget - [#2188](#2188) [`163dd67d2`](163dd67) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to retrieve public widget options for the IFrame widget ### Patch Changes - [#2107](#2107) [`b44c8cb0a`](b44c8cb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Storybook] Configure Aphrodite to Not Append !important to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red - [#2191](#2191) [`55317d65e`](55317d6) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Polygon (unlimited) - Add screen reader experience - [#2220](#2220) [`6b8185885`](6b81858) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Stop graph from exposing random empty image to screen readers - [#2185](#2185) [`f83a1fb03`](f83a1fb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Bugfix] Zoomable content within a collapsed parent not showing when expanded (Mobile only) - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - [#2173](#2173) [`10ee67a9c`](10ee67a) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Polygon - Add screen reader experience - [#2196](#2196) [`b07f2936f`](b07f293) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Segment - fix 2 strings with typos - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/math-input@22.2.4 - @khanacademy/perseus-score@2.2.0 - @khanacademy/kas@0.4.14 - @khanacademy/keypad-context@1.0.17 - @khanacademy/perseus-linter@1.2.16 - @khanacademy/pure-markdown@0.3.25 - @khanacademy/simple-markdown@0.13.18 ## @khanacademy/perseus-core@3.5.0 ### Minor Changes - [#2194](#2194) [`fd606f43d`](fd606f4) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for an interactive graph widget - [#2189](#2189) [`3ba74d173`](3ba74d1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Table widget - [#2207](#2207) [`097176a26`](097176a) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Matrix widget - [#2216](#2216) [`b3c562ac2`](b3c562a) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Plotter widget - [#2198](#2198) [`649e6b16a`](649e6b1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Grapher widget - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic - [#2183](#2183) [`cac39013b`](cac3901) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Radio widget - [#2188](#2188) [`163dd67d2`](163dd67) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to retrieve public widget options for the IFrame widget ## @khanacademy/perseus-editor@17.6.0 ### Minor Changes - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code ### Patch Changes - [#2190](#2190) [`7ec6c2fbc`](7ec6c2f) Thanks [@nishasy](https://github.com/nishasy)! - Add convertRadiansToDegrees function to kmath - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - [#2208](#2208) [`6a0bf7a52`](6a0bf7a) Thanks [@nishasy](https://github.com/nishasy)! - [SR Tree] Handle SR Tree when multiple editors are on the page - [#2193](#2193) [`8d569b74c`](8d569b7) Thanks [@beaesguerra](https://github.com/beaesguerra)! - Update internal addStyle variable name to address aphrodite-add-style-variable-name linting rule - Updated dependencies \[[`fd606f43d`](fd606f4), [`b44c8cb0a`](b44c8cb), [`3ba74d173`](3ba74d1), [`55317d65e`](55317d6), [`47cebd20f`](47cebd2), [`7ec6c2fbc`](7ec6c2f), [`6b8185885`](6b81858), [`f83a1fb03`](f83a1fb), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`10ee67a9c`](10ee67a), [`163dd67d2`](163dd67), [`b07f2936f`](b07f293)]: - @khanacademy/perseus@53.1.0 - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/math-input@22.2.4 - @khanacademy/perseus-score@2.2.0 - @khanacademy/kas@0.4.14 - @khanacademy/keypad-context@1.0.17 - @khanacademy/pure-markdown@0.3.25 ## @khanacademy/perseus-score@2.2.0 ### Minor Changes - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/kas@0.4.14 ## @khanacademy/kas@0.4.14 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/keypad-context@1.0.17 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/kmath@0.3.3 ### Patch Changes - [#2190](#2190) [`7ec6c2fbc`](7ec6c2f) Thanks [@nishasy](https://github.com/nishasy)! - Add convertRadiansToDegrees function to kmath - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/math-input@22.2.4 ### Patch Changes - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/keypad-context@1.0.17 ## @khanacademy/perseus-linter@1.2.16 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/pure-markdown@0.3.25 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/simple-markdown@0.13.18 ## @khanacademy/simple-markdown@0.13.18 ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 ## @khanacademy/perseus-dev-ui@5.2.0 ### Minor Changes - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code ### Patch Changes - [#2107](#2107) [`b44c8cb0a`](b44c8cb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Storybook] Configure Aphrodite to Not Append !important to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/perseus-core@3.5.0 - @khanacademy/kmath@0.3.3 - @khanacademy/math-input@22.2.4 - @khanacademy/kas@0.4.14 - @khanacademy/perseus-linter@1.2.16 - @khanacademy/pure-markdown@0.3.25 - @khanacademy/simple-markdown@0.13.18 Author: khan-actions-bot Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ⏭️ Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x) Pull Request URL: #2186

nishasy added 2 commits February 5, 2025 14:00

[remove-mafs-flags] docs(changeset): [Mafs] Remove mafs flag from Int…

c5af498

…eractive Graph code

nishasy self-assigned this Feb 5, 2025

nishasy commented Feb 5, 2025

View reviewed changes

[remove-mafs-flags] remove unnecessary variable

2571985

nishasy changed the title ~~[remove-mafs-flags] [Mafs] Remove "mafs" flag from Interactive Graph code~~ [Mafs] Remove "mafs" flag from Interactive Graph code Feb 5, 2025

nishasy requested review from jeremywiebe, benchristel, SonicScrewdriver, catandthemachines and a team February 5, 2025 22:15

[remove-mafs-flags] Go back to original regression story names, so we…

7df635c

… can actually use them in this PR to check that nothing changed

nishasy marked this pull request as ready for review February 5, 2025 22:26

benchristel approved these changes Feb 6, 2025

View reviewed changes

catandthemachines approved these changes Feb 6, 2025

View reviewed changes

[remove-mafs-flags] PR suggestions - remove redundant hints renderer …

a8f3f52

…stories, use more appropriate variable in tests

nishasy merged commit 47cebd2 into main Feb 6, 2025
8 checks passed

nishasy deleted the remove-mafs-flags branch February 6, 2025 19:42

khan-actions-bot mentioned this pull request Feb 6, 2025

Version Packages #2186

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Mafs] Remove "mafs" flag from Interactive Graph code #2200

[Mafs] Remove "mafs" flag from Interactive Graph code #2200

nishasy commented Feb 5, 2025

github-actions bot commented Feb 5, 2025 •

edited

Loading

github-actions bot commented Feb 5, 2025 •

edited

Loading

nishasy Feb 5, 2025

nishasy Feb 5, 2025

nishasy Feb 5, 2025

benchristel left a comment

benchristel Feb 6, 2025

benchristel Feb 6, 2025

nishasy Feb 6, 2025

benchristel Feb 6, 2025

nishasy Feb 6, 2025

catandthemachines left a comment

catandthemachines Feb 6, 2025

nishasy Feb 6, 2025

catandthemachines Feb 6, 2025

		return (
		<LegacyInteractiveGraph ref={this.legacyGraphRef} {...this.props} />

[Mafs] Remove "mafs" flag from Interactive Graph code #2200

[Mafs] Remove "mafs" flag from Interactive Graph code #2200

Conversation

nishasy commented Feb 5, 2025

Summary:

Test plan:

github-actions bot commented Feb 5, 2025 • edited Loading

npm Snapshot: Published

github-actions bot commented Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benchristel left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

catandthemachines left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 5, 2025 •

edited

Loading

github-actions bot commented Feb 5, 2025 •

edited

Loading