diff --git a/.changeset/lucky-seas-tickle.md b/.changeset/lucky-seas-tickle.md
new file mode 100644
index 0000000000..01c3ec8bf7
--- /dev/null
+++ b/.changeset/lucky-seas-tickle.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Remove the locked-[figureName]-labels flags
diff --git a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
index a6b5dcbd39..915c147365 100644
--- a/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
+++ b/packages/perseus-editor/src/__stories__/flags-for-api-options.ts
@@ -15,14 +15,6 @@ export const flags = {
point: true,
"unlimited-point": true,
none: true,
-
- // Locked figures flags
- "locked-point-labels": true,
- "locked-line-labels": true,
- "locked-vector-labels": true,
- "locked-ellipse-labels": true,
- "locked-polygon-labels": true,
- "locked-function-labels": true,
},
} satisfies APIOptions["flags"];
diff --git a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
index 6c7d4f2ea4..27af40c769 100644
--- a/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
+++ b/packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx
@@ -153,163 +153,7 @@ export const InteractiveGraphNone = (): React.ReactElement => {
);
};
-export const MafsWithLockedFiguresCurrent = (): React.ReactElement => {
- return (
-
- );
-};
-
-MafsWithLockedFiguresCurrent.parameters = {
- chromatic: {
- // Disabling because this isn't visually testing anything on the
- // initial load of the editor page.
- disableSnapshot: true,
- },
-};
-
-export const MafsWithLockedPointLabelsFlag = (): React.ReactElement => {
- return (
-
- );
-};
-
-export const MafsWithLockedLineLabelsFlag = (): React.ReactElement => {
- return (
-
- );
-};
-
-export const MafsWithLockedVectorLabelsFlag = (): React.ReactElement => {
- return (
-
- );
-};
-
-export const MafsWithLockedEllipseLabelsFlag = (): React.ReactElement => {
- return (
-
- );
-};
-
-export const MafsWithLockedPolygonLabelsFlag = (): React.ReactElement => {
- return (
-
- );
-};
-
-export const MafsWithLockedFunctionLabelsFlag = (): React.ReactElement => {
- return (
-
- );
-};
-
-export const MafsWithLockedFigureLabelsAllFlags = (): React.ReactElement => {
+export const MafsWithLockedFigures = (): React.ReactElement => {
return (
);
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
index 26d517627f..bd763c9530 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx
@@ -852,7 +852,6 @@ class InteractiveGraphEditor extends React.Component {
this.props.graph.type
] && (
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx
index 5f20a34d33..665b8943d6 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx
@@ -14,13 +14,7 @@ import {
import type {UserEvent} from "@testing-library/user-event";
const defaultProps = {
- flags: {
- ...flags,
- mafs: {
- ...flags.mafs,
- "locked-ellipse-settings": true,
- },
- },
+ flags: flags,
...getDefaultFigureForType("ellipse"),
onChangeProps: () => {},
onMove: () => {},
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
index 79213f1048..9b4b1eda27 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
@@ -47,7 +47,6 @@ export type Props = LockedFigureSettingsCommonProps &
const LockedEllipseSettings = (props: Props) => {
const {
- flags,
center,
radius,
angle,
@@ -256,55 +255,48 @@ const LockedEllipseSettings = (props: Props) => {
/>
{/* Visible Labels */}
- {flags?.["mafs"]?.["locked-ellipse-labels"] && (
- <>
-
-
-
-
- Visible labels
-
- {labels?.map((label, labelIndex) => (
- {
- handleLabelChange(newLabel, labelIndex);
- }}
- onRemove={() => {
- handleLabelRemove(labelIndex);
- }}
- containerStyle={styles.labelContainer}
- />
- ))}
-
-
- >
- )}
+
+
+
+ Visible labels
+ {labels?.map((label, labelIndex) => (
+ {
+ handleLabelChange(newLabel, labelIndex);
+ }}
+ onRemove={() => {
+ handleLabelRemove(labelIndex);
+ }}
+ containerStyle={styles.labelContainer}
+ />
+ ))}
+
{/* Actions */}
;
onChange: (props: Partial) => void;
};
@@ -165,7 +160,6 @@ const LockedFiguresSection = (props: Props) => {
return (
{
const newExpanded = [...expandedStates];
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
index 984891ad3b..5bc77571ba 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
@@ -52,7 +52,6 @@ export type Props = LockedFunctionType &
const LockedFunctionSettings = (props: Props) => {
const {
- flags,
color: lineColor,
strokeStyle,
equation,
@@ -337,52 +336,45 @@ const LockedFunctionSettings = (props: Props) => {
/>
{/* Visible Labels */}
- {flags?.["mafs"]?.["locked-function-labels"] && (
- <>
-
-
-
-
- Visible labels
-
- {labels?.map((label, labelIndex) => (
- {
- handleLabelChange(newLabel, labelIndex);
- }}
- onRemove={() => {
- handleLabelRemove(labelIndex);
- }}
- containerStyle={styles.labelContainer}
- />
- ))}
-
-
- >
- )}
+
+
+
+ Visible labels
+ {labels?.map((label, labelIndex) => (
+ {
+ handleLabelChange(newLabel, labelIndex);
+ }}
+ onRemove={() => {
+ handleLabelRemove(labelIndex);
+ }}
+ containerStyle={styles.labelContainer}
+ />
+ ))}
+
{/* Actions */}
{
const {
- flags,
kind,
points,
color: lineColor,
@@ -247,7 +246,6 @@ const LockedLineSettings = (props: Props) => {
{/* Defining points settings */}
{
onChangeProps={(newProps) => handleChangePoint(newProps, 0)}
/>
{
}}
/>
- {flags?.["mafs"]?.["locked-line-labels"] && (
- <>
-
-
-
-
- Visible labels
-
- {labels?.map((label, labelIndex) => (
- {
- handleLabelChange(newLabel, labelIndex);
- }}
- onRemove={() => {
- handleLabelRemove(labelIndex);
- }}
- containerStyle={styles.labelContainer}
- />
- ))}
-
-
- >
- )}
+ {/* Visible labels */}
+
+
+
+ Visible labels
+
+ {labels?.map((label, labelIndex) => (
+ {
+ handleLabelChange(newLabel, labelIndex);
+ }}
+ onRemove={() => {
+ handleLabelRemove(labelIndex);
+ }}
+ containerStyle={styles.labelContainer}
+ />
+ ))}
+
{/* Actions */}
{
const {
- flags,
headerLabel,
coord,
color: pointColor,
@@ -257,62 +248,54 @@ const LockedPointSettings = (props: Props) => {
>
)}
- {((!isDefiningPoint && flags?.["mafs"]?.["locked-point-labels"]) ||
- (isDefiningPoint &&
- flags?.["mafs"]?.["locked-line-labels"])) && (
- <>
-
-
-
-
- Visible labels
-
- {labels?.map((label, labelIndex) => (
- {
- handleLabelChange(newLabel, labelIndex);
- }}
- onRemove={() => {
- handleLabelRemove(labelIndex);
- }}
- />
- ))}
-
- >
- )}
+ {/* Visible labels */}
+
+
+
+ Visible labels
+ {labels?.map((label, labelIndex) => (
+ {
+ handleLabelChange(newLabel, labelIndex);
+ }}
+ onRemove={() => {
+ handleLabelRemove(labelIndex);
+ }}
+ />
+ ))}
+
{onRemove && (
{
const {
- flags,
points,
color,
showVertices,
@@ -349,55 +348,48 @@ const LockedPolygonSettings = (props: Props) => {
/>
{/* Visible Labels */}
- {flags?.["mafs"]?.["locked-polygon-labels"] && (
- <>
-
-
-
-
- Visible labels
-
- {labels?.map((label, labelIndex) => (
- {
- handleLabelChange(newLabel, labelIndex);
- }}
- onRemove={() => {
- handleLabelRemove(labelIndex);
- }}
- containerStyle={styles.labelContainer}
- />
- ))}
-
-
- >
- )}
+
+
+
+ Visible labels
+ {labels?.map((label, labelIndex) => (
+ {
+ handleLabelChange(newLabel, labelIndex);
+ }}
+ onRemove={() => {
+ handleLabelRemove(labelIndex);
+ }}
+ containerStyle={styles.labelContainer}
+ />
+ ))}
+
{/* Actions */}
{
const {
- flags,
points,
color: lineColor,
labels,
@@ -220,58 +219,52 @@ const LockedVectorSettings = (props: Props) => {
}}
/>
- {flags?.["mafs"]?.["locked-vector-labels"] && (
- <>
-
-
-
-
- Visible labels
-
- {labels?.map((label, labelIndex) => (
- {
- handleLabelChange(newLabel, labelIndex);
- }}
- onRemove={() => {
- handleLabelRemove(labelIndex);
- }}
- containerStyle={styles.labelContainer}
- />
- ))}
-
-
- >
- )}
+ {/* Visible labels */}
+
+
+
+ Visible labels
+ {labels?.map((label, labelIndex) => (
+ {
+ handleLabelChange(newLabel, labelIndex);
+ }}
+ onRemove={() => {
+ handleLabelRemove(labelIndex);
+ }}
+ containerStyle={styles.labelContainer}
+ />
+ ))}
+
{/* Actions */}
;
};
export default function GraphLockedLabelsLayer(props: Props) {
- const {flags, lockedFigures} = props;
+ const {lockedFigures} = props;
return lockedFigures.map((figure, i) => {
if (figure.type === "label") {
return ;
}
- if (
- // Point flag + point type
- (flags?.["mafs"]?.["locked-point-labels"] &&
- figure.type === "point") ||
- // Line flag + line type
- (flags?.["mafs"]?.["locked-line-labels"] &&
- figure.type === "line") ||
- // Vector flag + vector type
- (flags?.["mafs"]?.["locked-vector-labels"] &&
- figure.type === "vector") ||
- // Ellipse flag + ellipse type
- (flags?.["mafs"]?.["locked-ellipse-labels"] &&
- figure.type === "ellipse") ||
- // Polygon flag + polygon type
- (flags?.["mafs"]?.["locked-polygon-labels"] &&
- figure.type === "polygon") ||
- // Function flag + function type
- (flags?.["mafs"]?.["locked-function-labels"] &&
- figure.type === "function")
- ) {
- return (
-
- {figure.labels?.map((label, j) => (
-
- ))}
-
- {/* Account for the labels within the lines' defining points */}
- {figure.type === "line" && (
- <>
- {/* Point 1 labels */}
- {figure.points[0].labels?.map((label, k) => (
-
- ))}
- {/* Point 2 labels */}
- {figure.points[1].labels?.map((label, k) => (
-
- ))}
- >
- )}
-
- );
- }
-
- return null;
+ return (
+
+ {figure.labels?.map((label, j) => (
+
+ ))}
+
+ {/* Account for the labels within the lines' defining points */}
+ {figure.type === "line" && (
+ <>
+ {/* Point 1 labels */}
+ {figure.points[0].labels?.map((label, k) => (
+
+ ))}
+ {/* Point 2 labels */}
+ {figure.points[1].labels?.map((label, k) => (
+
+ ))}
+ >
+ )}
+
+ );
});
}
diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx
index 2b7fb03595..399401e411 100644
--- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph.test.tsx
@@ -991,14 +991,10 @@ describe("Interactive Graph", function () {
it("should render a locked label within a locked polygon", async () => {
// Arrange
- const {container} = renderQuestion(graphWithLabeledPolygon, {
- flags: {
- mafs: {
- segment: true,
- "locked-polygon-labels": true,
- },
- },
- });
+ const {container} = renderQuestion(
+ graphWithLabeledPolygon,
+ apiOptions,
+ );
// Act
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -1212,14 +1208,10 @@ describe("Interactive Graph", function () {
it("should render a locked label within a locked point", async () => {
// Arrange
- const {container} = renderQuestion(graphWithLabeledPoint, {
- flags: {
- mafs: {
- segment: true,
- "locked-point-labels": true,
- },
- },
- });
+ const {container} = renderQuestion(
+ graphWithLabeledPoint,
+ apiOptions,
+ );
// Act
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -1238,14 +1230,10 @@ describe("Interactive Graph", function () {
});
it("should render a locked label within a locked line", async () => {
- const {container} = renderQuestion(graphWithLabeledLine, {
- flags: {
- mafs: {
- segment: true,
- "locked-line-labels": true,
- },
- },
- });
+ const {container} = renderQuestion(
+ graphWithLabeledLine,
+ apiOptions,
+ );
// Act
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -1285,15 +1273,10 @@ describe("Interactive Graph", function () {
],
},
];
- const {container} = renderQuestion(graphWithLabeledLine, {
- flags: {
- mafs: {
- segment: true,
- "locked-line-labels": true,
- "locked-point-labels": true,
- },
- },
- });
+ const {container} = renderQuestion(
+ graphWithLabeledLine,
+ apiOptions,
+ );
// Act
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -1311,14 +1294,10 @@ describe("Interactive Graph", function () {
it("should render a locked label within a locked vector", async () => {
// Arrange
- const {container} = renderQuestion(graphWithLabeledVector, {
- flags: {
- mafs: {
- segment: true,
- "locked-vector-labels": true,
- },
- },
- });
+ const {container} = renderQuestion(
+ graphWithLabeledVector,
+ apiOptions,
+ );
// Act
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -1338,14 +1317,10 @@ describe("Interactive Graph", function () {
it("should render a locked label within a locked ellipse", async () => {
// Arrange
- const {container} = renderQuestion(graphWithLabeledEllipse, {
- flags: {
- mafs: {
- segment: true,
- "locked-ellipse-labels": true,
- },
- },
- });
+ const {container} = renderQuestion(
+ graphWithLabeledEllipse,
+ apiOptions,
+ );
// Act
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -1365,14 +1340,10 @@ describe("Interactive Graph", function () {
it("should render a locked label within a locked function", async () => {
// Arrange
- const {container} = renderQuestion(graphWithLabeledFunction, {
- flags: {
- mafs: {
- segment: true,
- "locked-function-labels": true,
- },
- },
- });
+ const {container} = renderQuestion(
+ graphWithLabeledFunction,
+ apiOptions,
+ );
// Act
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx
index 0ec7ae4724..6ede95dab0 100644
--- a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx
+++ b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx
@@ -271,7 +271,6 @@ export const MafsGraph = (props: MafsGraphProps) => {
{props.lockedFigures && (
)}