Revert "[CX] Allow option to rotate axis labels on interactive graphs (#2284)"

This reverts commit 0d5ab0b.

Author: SonicScrewdriver

packages/perseus-core/src/data-schema.ts

@@ -431,7 +431,6 @@ export type PerseusImageBackground = {
  * - none: shows no markings
  */
 export type MarkingsType = "axes" | "graph" | "grid" | "none";
-export type AxisLabelLocation = "onAxis" | "alongEdge";
 
 export type PerseusCategorizerWidgetOptions = {
     // Translatable text; a list of items to categorize. e.g. ["banana", "yellow", "apple", "purple", "shirt"]
@@ -735,13 +734,6 @@ export type PerseusInteractiveGraphWidgetOptions = {
     markings: MarkingsType;
     // How to label the X and Y axis.  default: ["x", "y"]
     labels?: ReadonlyArray<string>;
-    /**
-     * Specifies the location of the labels on the graph.  default: "onAxis".
-     * - "onAxis": Labels are positioned on the axis at the right (x) and top (y) of the graph.
-     * - "alongEdge": Labels are centered along the bottom (x) and left (y) edges of the graph.
-     *    The y label is rotated. Typically used when the range min is near 0 with longer labels.
-     */
-    labelLocation?: AxisLabelLocation;
     // Whether to show the Protractor tool overlayed on top of the graph
     showProtractor: boolean;
     /**

packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx

@@ -20,7 +20,6 @@ import Heading from "../../../components/heading";
 import LabeledRow from "../locked-figures/labeled-row";
 
 import type {
-    AxisLabelLocation,
     MarkingsType,
     PerseusImageBackground,
 } from "@khanacademy/perseus-core";
@@ -50,13 +49,6 @@ type Props = {
      * The labels for the x and y axes.
      */
     labels: ReadonlyArray<string>;
-    /**
-     * Specifies the location of the labels on the graph.  default: "onAxis".
-     * - "onAxis": Labels are positioned on the axis at the right (x) and top (y) of the graph.
-     * - "alongEdge": Labels are centered along the bottom (x) and left (y) edges of the graph.
-     *    The y label is rotated. Typically used when the range min is near 0 with longer labels.
-     */
-    labelLocation: AxisLabelLocation;
     /**
      * The range of the graph.
      */
@@ -107,7 +99,6 @@ type Props = {
 type State = {
     isExpanded: boolean;
     labelsTextbox: ReadonlyArray<string>;
-    labelLocation: AxisLabelLocation;
     gridStepTextbox: [x: number, y: number];
     snapStepTextbox: [x: number, y: number];
     stepTextbox: [x: number, y: number];
@@ -125,7 +116,6 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
     static stateFromProps(props: Props) {
         return {
             labelsTextbox: props.labels,
-            labelLocation: props.labelLocation,
             gridStepTextbox: props.gridStep,
             snapStepTextbox: props.snapStep,
             stepTextbox: props.step,
@@ -150,7 +140,6 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
             interactiveSizes.defaultBoxSizeSmall,
         ],
         labels: ["$x$", "$y$"],
-        labelLocation: "onAxis",
         range: [
             [-10, 10],
             [-10, 10],
@@ -176,7 +165,6 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (
             !_.isEqual(this.props.labels, nextProps.labels) ||
-            !_.isEqual(this.props.labelLocation, nextProps.labelLocation) ||
             !_.isEqual(this.props.gridStep, nextProps.gridStep) ||
             !_.isEqual(this.props.snapStep, nextProps.snapStep) ||
             !_.isEqual(this.props.step, nextProps.step) ||
@@ -411,7 +399,6 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
 
     changeGraph = () => {
         const labels = this.state.labelsTextbox;
-        const labelLocation = this.state.labelLocation;
         const range = _.map(this.state.rangeTextbox, function (range) {
             return _.map(range, Number);
         });
@@ -438,7 +425,6 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
             this.change({
                 valid: true,
                 labels: labels,
-                labelLocation: labelLocation,
                 range: range,
                 step: step,
                 gridStep: gridStep,
@@ -466,26 +452,6 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                 {this.state.isExpanded && (
                     <View>
                         <div className="graph-settings">
-                            <div className="perseus-widget-row">
-                                <LabeledRow label="Label Location">
-                                    <ButtonGroup
-                                        value={this.props.labelLocation}
-                                        allowEmpty={false}
-                                        buttons={[
-                                            {
-                                                value: "onAxis",
-                                                content: "On Axis",
-                                            },
-                                            {
-                                                value: "alongEdge",
-                                                content: "Along Graph Edge",
-                                            },
-                                        ]}
-                                        onChange={this.change("labelLocation")}
-                                    />
-                                </LabeledRow>
-                            </div>
-
                             <div className="perseus-widget-row">
                                 <div className="perseus-widget-left-col">
                                     <LabeledRow label="x Label">

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

@@ -14,7 +14,6 @@ import {
     type PerseusGraphType,
     type MarkingsType,
     type InteractiveGraphDefaultWidgetOptions,
-    type AxisLabelLocation,
     interactiveGraphLogic,
 } from "@khanacademy/perseus-core";
 import {Id, View} from "@khanacademy/wonder-blocks-core";
@@ -71,13 +70,6 @@ export type Props = {
      * The labels for the x and y axes.
      */
     labels: ReadonlyArray<string>;
-    /**
-     * Specifies the location of the labels on the graph.  default: "onAxis".
-     * - "onAxis": Labels are positioned on the axis at the right (x) and top (y) of the graph.
-     * - "alongEdge": Labels are centered along the bottom (x) and left (y) edges of the graph.
-     *    The y label is rotated. Typically used when the range min is near 0 with longer labels.
-     */
-    labelLocation?: AxisLabelLocation;
     /**
      * The range of the graph in the x and y directions.
      */
@@ -202,7 +194,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
             "backgroundImage",
             "markings",
             "labels",
-            "labelLocation",
             "showProtractor",
             "showTooltips",
             "range",
@@ -300,7 +291,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
                 box: this.props.box,
                 range: this.props.range,
                 labels: this.props.labels,
-                labelLocation: this.props.labelLocation,
                 step: this.props.step,
                 gridStep: gridStep,
                 snapStep: snapStep,
@@ -751,7 +741,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
                             box={getInteractiveBoxFromSizeClass(sizeClass)}
                             range={this.props.range}
                             labels={this.props.labels}
-                            labelLocation={this.props.labelLocation}
                             step={this.props.step}
                             gridStep={gridStep}
                             snapStep={snapStep}

packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`Interactive Graph A none-type graph renders predictably: first render 1
                 </span>
                 <span
                   aria-label="Y-axis"
-                  style="position: absolute; left: 200px; top: -28px; font-size: 14px; transform: translate(-50%, 0px);"
+                  style="position: absolute; left: 200px; top: -24px; font-size: 14px; transform: translate(-50%, 0px);"
                 >
                   <span
                     class="mock-TeX"