@khanacademy/perseus 32.0.1 → 33.1.0

package/dist/index.js

@@ -10147,11 +10147,35 @@ const setLabelMargins = function (span, size) {
       marginTop: -height / 2 - y * scale
     });
   } else {
+    const $container = $span.closest(".svg-image");
+    // Ensuring that the line-height of the text doesn't throw off placement of the text element.
+    // Inherited line-height values can really mess up placement.
+    $container.css("line-height", "normal");
+
+    // The 'max-width' value is the same as the expected (100% scale) width of the graphie.
+    // We are using jQuery to get this information since we don't have a way to pass it to this function.
+    const expectedWidth = $container.css("max-width") ?? "0px";
+    // We can calculate the true scale of the graphie by taking actual width and dividing by the expected width.
+    // NOTE: Using 'slice' to remove the "px" unit from the end of the expected width value.
+    const scale = ($container.width() ?? 0) / parseInt(expectedWidth.replace(/px$/, "")) * 100;
+
+    // Any padding needs to be scaled accordingly.
+    const currentPadding = $span.css("padding") ?? "0px";
+    const newPadding = Math.round(parseInt(currentPadding.slice(0, -2)) * scale) / 100;
+
+    // "multipliers" basically move the position of the text by using 1, 0, -1
+    // 'margin-left' and 'margin-top' are used to position the text.
+    // Margin and font size need to be scaled accordingly.
     const multipliers = labelDirections[direction || "center"];
-    $span.css({
-      marginLeft: Math.round(width * multipliers[0]),
-      marginTop: Math.round(height * multipliers[1])
-    });
+    const styling = {
+      marginLeft: Math.round(width * multipliers[0] * scale) / 100,
+      marginTop: Math.round(height * multipliers[1] * scale) / 100,
+      padding: `${newPadding}px`
+    };
+    if (scale !== 1) {
+      styling["fontSize"] = `${Math.round(scale * 100) / 100}%`;
+    }
+    $span.css(styling);
   }
 };
 const GraphUtils = {
@@ -17536,9 +17560,16 @@ class SvgImage extends React__namespace.Component {
         // without coordinates. They don't seem to have any content, so
         // it seems fine to just ignore them (rather than error), but
         // we should figure out why this is happening.
-        const label = graphie.label(labelData.coordinates, labelData.content, labelData.alignment, labelData.typesetAsMath, {
+
+        // 'styling' - When a default scale (1) is used,
+        //     setting the font size to 100% is redundant.
+        // Also, setting the font size to 100% can counteract other scale-based styling.
+        // Therefore, when the scale is not applicable,
+        //     we set the value to 'null' so that no additional styling will be set.
+        const styling = this.props.scale !== 1 ? {
           "font-size": 100 * this.props.scale + "%"
-        });
+        } : null;
+        const label = graphie.label(labelData.coordinates, labelData.content, labelData.alignment, labelData.typesetAsMath, styling);
 
         // Convert absolute positioning css from pixels to percentages
         // TODO(alex): Dynamically resize font-size as well. This
@@ -28586,6 +28617,95 @@ class Graph extends React__namespace.Component {
   }
 }
 
+function pathBuilder() {
+  return new PathBuilder();
+}
+class PathBuilder {
+  path = [];
+  scaleFactor = 1;
+  build() {
+    return this.path.map(scaleCommandBy(this.scaleFactor)).map(commandToString).join("");
+  }
+
+  // add a move (M) command to the path
+  move(x, y) {
+    this.path.push({
+      action: "M",
+      args: [x, y]
+    });
+    return this;
+  }
+  line(x, y) {
+    this.path.push({
+      action: "L",
+      args: [x, y]
+    });
+    return this;
+  }
+  circularArc(radius, toX, toY) {
+    let {
+      sweep = false,
+      largeArc = false
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    this.path.push({
+      action: "A",
+      args: [radius, radius, 0 /* rotation */, largeArc ? 1 : 0, sweep ? 1 : 0, toX, toY]
+    });
+    return this;
+  }
+
+  // add a curve (C) command to the path
+  curve(control1X, control1Y, control2X, control2Y, endX, endY) {
+    this.path.push({
+      action: "C",
+      args: [control1X, control1Y, control2X, control2Y, endX, endY]
+    });
+    return this;
+  }
+
+  // Scale all coordinates of the path by a factor
+  scale(factor) {
+    this.scaleFactor *= factor;
+    return this;
+  }
+}
+function commandToString(command) {
+  return `${command.action}${command.args.join(" ")}`;
+}
+function scaleCommandBy(scaleFactor) {
+  return command => {
+    switch (command.action) {
+      case "A":
+        // TODO(benchristel): do we want to refactor this switch to
+        // use polymorphism?
+        // Arc command
+        return {
+          ...command,
+          args: [command.args[0] * scaleFactor,
+          // x radius
+          command.args[1] * scaleFactor,
+          // y radius
+          command.args[2],
+          // rotation
+          command.args[3],
+          // largeArc flag
+          command.args[4],
+          // sweep flag
+          command.args[5] * scaleFactor,
+          // end x
+          command.args[6] * scaleFactor // end y
+          ]
+        };
+
+      default:
+        return {
+          ...command,
+          args: command.args.map(c => c * scaleFactor)
+        };
+    }
+  };
+}
+
 // Restricts `value` to be between `min` and `max`.
 function clamp(value, min, max) {
   if (value < min) {
@@ -28815,380 +28935,6 @@ function pixelsToVectors(pixels, graphState) {
   });
 }
 
-function AxisLabels() {
-  const {
-    range,
-    labels,
-    width,
-    height
-  } = useGraphConfig();
-  const yAxisLabelLocation = [0, range[Y][MAX]];
-  const xAxisLabelLocation = [range[X][MAX], 0];
-  const [xAxisLabelText, yAxisLabelText] = labels;
-  const graphInfo = {
-    range,
-    width,
-    height
-  };
-  const [x1, y1] = pointToPixel(xAxisLabelLocation, graphInfo);
-  // The default location for the y-axis-label is at the maximum y point
-  // This is just underneath the tick line for that point. The -24 moves the
-  // label up one grid square, so it sits on top of the graph
-  const [x2, y2] = mafs.vec.add(pointToPixel(yAxisLabelLocation, graphInfo), [0, -24]);
-  const {
-    TeX
-  } = getDependencies();
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    style: {
-      position: "absolute",
-      left: x1,
-      top: y1,
-      fontSize: "14px",
-      transform: "translate(7px, -50%)"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(TeX, null, xAxisLabelText)), /*#__PURE__*/React__default["default"].createElement("span", {
-    style: {
-      position: "absolute",
-      left: x2,
-      top: y2,
-      fontSize: "14px",
-      transform: "translate(-50%, 0px)"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(TeX, null, yAxisLabelText)));
-}
-
-// Universal padding for the axis ticks to ensure that the labels
-// have enough space to render without overlapping the tick lines
-const tickPadding = 5;
-const AxisTickLabels = () => {
-  const graphConfig = useGraphConfig();
-  const {
-    tickStep,
-    range
-  } = graphConfig;
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const [xTickStep, yTickStep] = tickStep;
-  const yGridTicks = generateTickLocations$1(yTickStep, yMin, yMax);
-  const xGridTicks = generateTickLocations$1(xTickStep, xMin, xMax);
-  return /*#__PURE__*/React__namespace.createElement("div", {
-    className: "axis-tick-labels"
-  }, /*#__PURE__*/React__namespace.createElement(YGridAxis, {
-    axisTicks: yGridTicks,
-    graphConfig: graphConfig
-  }), /*#__PURE__*/React__namespace.createElement(XGridAxis, {
-    axisTicks: xGridTicks,
-    graphConfig: graphConfig
-  }));
-};
-
-// Generate the necessary styles and ticks for the y-axis tick labels container
-const YGridAxis = props => {
-  const {
-    axisTicks,
-    graphConfig
-  } = props;
-  const {
-    width,
-    height
-  } = graphConfig;
-
-  // First get the label height by calculating the difference between the first two y-axis labels
-  const yTopPoint = pointToPixel([0, axisTicks[0]], graphConfig);
-  const ySecondPoint = pointToPixel([0, axisTicks[1]], graphConfig);
-  const yLabelHeight = ySecondPoint[1] - yTopPoint[1];
-
-  // When rendering purely positive y-axis labels, we want to adjust the left position
-  // from the lowest calculated tick, as yMin may be negative
-  const yLowestTick = axisTicks[axisTicks.length - 1];
-  const yLeftAdjustment = Math.min(Math.max(yTopPoint[0] - tickPadding, 0), width);
-
-  // We only want to render the 0 label on the y-axis if it is left of the grid
-  const yAxisIsLeftOfGrid = yLeftAdjustment === 0;
-
-  // If the y-axis is right of the graph's viewbox/range,
-  // we want to adjust both the positioning and text alignment
-  const yAxisRightOfGrid = yLeftAdjustment === width;
-
-  // Determine the default spacing for the labels based on whether the y-axis is right of the grid
-  const defaultSpacing = yAxisRightOfGrid ? 0.5 : 0;
-
-  // We also want to adjust the spacing if there are no negative y-axis labels as the extra space is not needed
-  const marginSpacing = yLowestTick >= 0 ? defaultSpacing * 2 : defaultSpacing;
-
-  // Determine the text alignment based on whether the y-axis is right of the grid
-  // We need to cast this as a const as it is used in the inline styles
-  const textAlign = yAxisRightOfGrid ? "left" : "right";
-  const yAxisStyles = {
-    left: `calc(${yLeftAdjustment}px - ${marginSpacing}em)`,
-    top: `calc(${yTopPoint[1]}px - 0.5em)`,
-    height,
-    textAlign,
-    "--y-axis-label-height": yLabelHeight + "px"
-  };
-  const classNames = yAxisRightOfGrid ? "y-axis-tick-labels y-axis-right-of-grid" : "y-axis-tick-labels ";
-  return /*#__PURE__*/React__namespace.createElement("div", {
-    className: classNames,
-    "data-testid": "y-axis-tick-labels",
-    style: yAxisStyles
-  }, axisTicks.map(label => {
-    return /*#__PURE__*/React__namespace.createElement(AxisTickLabel, {
-      label: label,
-      axis: "y",
-      key: `y-grid-tick-${label}`,
-      graphConfig: graphConfig,
-      axisOutOfBounds: yAxisIsLeftOfGrid
-    });
-  }));
-};
-
-// Generate the necessary styles and ticks for the x-axis tick labels container
-const XGridAxis = props => {
-  const {
-    axisTicks,
-    graphConfig
-  } = props;
-  const {
-    width,
-    height
-  } = graphConfig;
-
-  // Determine label width by calculating the difference between the first two x-axis labels
-  const xFirstPoint = pointToPixel([axisTicks[0], 0], graphConfig);
-  const xSecondPoint = pointToPixel([axisTicks[1], 0], graphConfig);
-  const xLabelWidth = Math.abs(xSecondPoint[0] - xFirstPoint[0]);
-
-  // Determine the top position of the x-axis labels based on
-  // whether the x-axis is above, within, or below the graph
-  const xAxisAboveGraph = xFirstPoint[1] < 0;
-  const xTopAdjustment = xAxisAboveGraph ? 0 : Math.min(xFirstPoint[1] + tickPadding, height);
-
-  // Determine whether the x-axis is outside of the graph's viewbox/range
-  // This is used to conditionally render the 0 label on the x-axis
-  const xAxisOutOfBounds = xTopAdjustment === height || xAxisAboveGraph;
-
-  // Determine the available space to the right of the x-axis labels
-  const availableSpaceRight = width - xFirstPoint[0];
-
-  // Calculate the total combined width of ALL the x-axis labels
-  const axisTicksWidth = axisTicks.length * xLabelWidth;
-
-  // Determine if we need to increase the width of the axis past the graph width
-  const calculatedWidth = axisTicksWidth > width ? axisTicksWidth : width;
-
-  // Determine the right adjustment for the x-axis labels based on the available space
-  // We're adjusting the right as the flex-direction is row-reverse
-  const xRightAdjustment = availableSpaceRight - xLabelWidth / 2;
-  const xAxisStyles = {
-    top: xTopAdjustment,
-    right: xRightAdjustment,
-    width: calculatedWidth,
-    "--x-axis-label-width": xLabelWidth + "px"
-  };
-  return /*#__PURE__*/React__namespace.createElement("div", {
-    className: `x-axis-tick-labels ${xAxisAboveGraph && "x-axis-top-of-grid"}`,
-    "data-testid": "x-axis-tick-labels",
-    style: xAxisStyles
-  }, axisTicks.map(label => {
-    return /*#__PURE__*/React__namespace.createElement(AxisTickLabel, {
-      axis: "x",
-      label: label,
-      key: `x-grid-tick-${label}`,
-      graphConfig: graphConfig,
-      axisOutOfBounds: xAxisOutOfBounds
-    });
-  }));
-};
-
-// Generate the individual tick label elements
-const AxisTickLabel = _ref => {
-  let {
-    label,
-    graphConfig,
-    axisOutOfBounds,
-    axis
-  } = _ref;
-  const {
-    gridStep,
-    tickStep
-  } = graphConfig;
-  // Determine the point on the axis based on the axis type
-  const pointOnAxis = axis === "x" ? [label, 0] : [0, label];
-  const pixelPoint = pointToPixel(pointOnAxis, graphConfig);
-
-  // Determine the relevant edge of the graph based on the axis type
-  const graphEdge = axis === "x" ? graphConfig.width : graphConfig.height;
-
-  // Determine the vector index based on the axis type
-  const vectorIndex = axis === "x" ? 0 : 1;
-
-  // Determine whether or not to render the tick label text
-  const shouldShowLabel = showTickLabel({
-    label,
-    axisOutOfBounds,
-    graphEdge,
-    position: pixelPoint[vectorIndex],
-    gridStep: gridStep[vectorIndex],
-    tickStep: tickStep[vectorIndex]
-  });
-  return /*#__PURE__*/React__namespace.createElement("span", {
-    className: `${axis}-axis-tick-label`
-  }, shouldShowLabel && label);
-};
-
-// Determine whether or not to show the tick label text
-const showTickLabel = _ref2 => {
-  let {
-    gridStep,
-    tickStep,
-    label,
-    graphEdge,
-    position,
-    axisOutOfBounds
-  } = _ref2;
-  let showLabel = true;
-
-  // We only want to show the initial negative tick labels (e.g. -1) on each
-  // axis if the tickStep > gridStep, to ensure that these labels do not overlap.
-  // e.g. If gridStep = 1 and tickStep = 2, there are 2 grid lines for every 1 tick,
-  // which allows enough room for both these tick labels to render.
-  showLabel = tickStep > gridStep ? true : label !== -tickStep;
-
-  // If the tick label position is greater than the relevant edge of the graph, don't render it
-  if (position <= -graphEdge || position >= graphEdge) {
-    showLabel = false;
-  }
-
-  // If the label is 0, we only want to show it if the axis is to the left of the graph's viewbox/range
-  // otherwise it will overlap with graph axis labels
-  if (label === 0 && !axisOutOfBounds) {
-    showLabel = false;
-  }
-  return showLabel;
-};
-
-// Generate the tick labels for an axis based on the tick step
-function generateTickLocations$1(tickStep, min, max) {
-  const positiveTicks = [];
-  const negativeTicks = [];
-  const ticks = [];
-
-  // Add 0 if it is applicable.
-  // This will be conditionally rendered using showTickLabel.
-  if (min <= 0 && max >= 0) {
-    positiveTicks.push(0);
-  }
-
-  // Add ticks on the positive axis
-  // Start at the first tick after 0 or the minimum value,
-  // taking into account that the graph may be zoomed in on the positive axis
-  let i = Math.max(min, 0) + tickStep;
-  for (i; min < i && i < max; i += tickStep) {
-    positiveTicks.push(i);
-  }
-
-  // Add ticks on the negative axis
-  // Start at the first tick before 0 or the maximum value,
-  // taking into account that the graph may be zoomed in on the negative axis
-  i = Math.min(max, 0) - tickStep;
-  for (i; i > min; i -= tickStep) {
-    negativeTicks.push(i);
-  }
-
-  // Reverse the ticks so that they are in the correct render order
-  positiveTicks.reverse();
-  ticks.push(...positiveTicks, ...negativeTicks);
-  return ticks;
-}
-
-function pathBuilder() {
-  return new PathBuilder();
-}
-class PathBuilder {
-  path = [];
-  scaleFactor = 1;
-  build() {
-    return this.path.map(scaleCommandBy(this.scaleFactor)).map(commandToString).join("");
-  }
-
-  // add a move (M) command to the path
-  move(x, y) {
-    this.path.push({
-      action: "M",
-      args: [x, y]
-    });
-    return this;
-  }
-  line(x, y) {
-    this.path.push({
-      action: "L",
-      args: [x, y]
-    });
-    return this;
-  }
-  circularArc(radius, toX, toY) {
-    let {
-      sweep = false,
-      largeArc = false
-    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-    this.path.push({
-      action: "A",
-      args: [radius, radius, 0 /* rotation */, largeArc ? 1 : 0, sweep ? 1 : 0, toX, toY]
-    });
-    return this;
-  }
-
-  // add a curve (C) command to the path
-  curve(control1X, control1Y, control2X, control2Y, endX, endY) {
-    this.path.push({
-      action: "C",
-      args: [control1X, control1Y, control2X, control2Y, endX, endY]
-    });
-    return this;
-  }
-
-  // Scale all coordinates of the path by a factor
-  scale(factor) {
-    this.scaleFactor *= factor;
-    return this;
-  }
-}
-function commandToString(command) {
-  return `${command.action}${command.args.join(" ")}`;
-}
-function scaleCommandBy(scaleFactor) {
-  return command => {
-    switch (command.action) {
-      case "A":
-        // TODO(benchristel): do we want to refactor this switch to
-        // use polymorphism?
-        // Arc command
-        return {
-          ...command,
-          args: [command.args[0] * scaleFactor,
-          // x radius
-          command.args[1] * scaleFactor,
-          // y radius
-          command.args[2],
-          // rotation
-          command.args[3],
-          // largeArc flag
-          command.args[4],
-          // sweep flag
-          command.args[5] * scaleFactor,
-          // end x
-          command.args[6] * scaleFactor // end y
-          ]
-        };
-
-      default:
-        return {
-          ...command,
-          args: command.args.map(c => c * scaleFactor)
-        };
-    }
-  };
-}
-
 // We use the pathBuilder here to scale up the SVG path coordinates used
 // elsewhere for arrowheads. We scale in the path itself instead of using a CSS
 // transform because a transform would also scale up the stroke weight, and we
@@ -29218,7 +28964,10 @@ function AxisArrows() {
     range: [[xMin, xMax], [yMin, yMax]]
   } = useGraphConfig();
   const axisColor = "var(--mafs-fg)";
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
+
+  // Only render the arrows if the axis is within the visible range
+  // as otherwise the arrows will be rendered outside the graph
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !(yMin > 0 || yMax < 0) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
     tip: [xMin, 0],
     angle: 180
@@ -29226,7 +28975,7 @@ function AxisArrows() {
     color: axisColor,
     tip: [xMax, 0],
     angle: 0
-  }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
+  })), !(xMin > 0 || xMax < 0) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
     tip: [0, yMin],
     angle: 90
@@ -29234,39 +28983,76 @@ function AxisArrows() {
     color: axisColor,
     tip: [0, yMax],
     angle: 270
-  }));
+  })));
 }
 
+function AxisLabels() {
+  const {
+    range,
+    labels,
+    width,
+    height
+  } = useGraphConfig();
+  const yAxisLabelLocation = [0, range[Y][MAX]];
+  const xAxisLabelLocation = [range[X][MAX], 0];
+  const [xAxisLabelText, yAxisLabelText] = labels;
+  const graphInfo = {
+    range,
+    width,
+    height
+  };
+  const [x1, y1] = pointToPixel(xAxisLabelLocation, graphInfo);
+  // The default location for the y-axis-label is at the maximum y point
+  // This is just underneath the tick line for that point. The -24 moves the
+  // label up one grid square, so it sits on top of the graph
+  const [x2, y2] = mafs.vec.add(pointToPixel(yAxisLabelLocation, graphInfo), [0, -24]);
+  const {
+    TeX
+  } = getDependencies();
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      left: x1,
+      top: y1,
+      fontSize: "14px",
+      transform: "translate(7px, -50%)"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TeX, null, xAxisLabelText)), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      left: x2,
+      top: y2,
+      fontSize: "14px",
+      transform: "translate(-50%, 0px)"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TeX, null, yAxisLabelText)));
+}
+
+// The size of the ticks and labels in pixels
 const tickSize = 10;
-const tickStyle = {
-  stroke: "black",
-  strokeWidth: 1
-};
+const tickLabelSize = 14;
 const YGridTick = _ref => {
   let {
     y,
-    graphInfo
+    range
   } = _ref;
+  // If the graph requires out-of-bounds labels, we want to make sure to set the
+  // coordinates to the edge of the visible range of the graph. Otherwise,
+  // the ticks and labels would render outside of the clipping-mask.
   let xPointOnAxis = 0;
-
-  // If the graph is zoomed in, we want to make sure the ticks are still visible
-  // even if they are outside the graph's range.
-  if (graphInfo.range[X][MIN] > 0) {
+  if (range[X][MIN] > 0) {
     // If the graph is on the positive side of the x-axis, lock the ticks to the left side of the graph
-    xPointOnAxis = graphInfo.range[X][MIN];
+    xPointOnAxis = range[X][MIN];
   }
-  if (graphInfo.range[X][MAX] < 0) {
+  if (range[X][MAX] < 0) {
     // If the graph is on the negative side of the x-axis, lock the ticks to the right side of the graph
-    xPointOnAxis = graphInfo.range[X][MAX];
+    xPointOnAxis = range[X][MAX];
   }
+
+  // Convert the Vector2 coordinates to pixel coordinates
   const pointOnAxis = [xPointOnAxis, y];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
 
-  // If the tick is on the edge of the graph's range, don't render it
-  if (yPosition === -graphInfo.height || yPosition === graphInfo.height + 20) {
-    return null;
-  }
-
   // Position of the start of the tick
   const x1 = xPosition - tickSize / 2;
   const y1 = yPosition;
@@ -29274,40 +29060,56 @@ const YGridTick = _ref => {
   // Position of the end of the tick
   const x2 = xPosition + tickSize / 2;
   const y2 = yPosition;
+
+  // Adjust the y position of the x-axis labels based on
+  // whether the x-axis is above, within, or below the graph
+  const xAdjustment = range[X][MAX] <= 0 ? tickLabelSize * 1.5 : -tickLabelSize * 1.1;
+  const xPositionText = xPosition + xAdjustment;
+  const yPositionText = yPosition + tickLabelSize * 0.25; // Center the text vertically on the tick
+
+  // If the graph displays both the y and x axis lines within the graph, we want
+  // to hide the label at -1 on the y-axis to prevent overlap with the x-axis label
+  const showLabel = shouldShowLabel(y, range);
   return /*#__PURE__*/React__namespace.createElement("g", {
-    className: "y-axis-ticks"
+    className: "tick"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     x1: x1,
     y1: y1,
     x2: x2,
     y2: y2,
-    style: tickStyle
-  }));
+    className: "axis-tick"
+  }), showLabel && /*#__PURE__*/React__namespace.createElement("text", {
+    className: "axis-tick-label",
+    style: {
+      fontSize: tickLabelSize
+    },
+    textAnchor: "end",
+    x: xPositionText,
+    y: yPositionText
+  }, y.toString()));
 };
 const XGridTick = _ref2 => {
   let {
     x,
-    graphInfo
+    range
   } = _ref2;
+  // If the graph requires out-of-bounds labels, we want to make sure to set the
+  // coordinates to the edge of the visible range of the graph. Otherwise,
+  // the ticks and labels would render outside of the clipping-mask.
   let yPointOnAxis = 0;
-  // If the graph is zoomed in, we want to make sure the ticks are still visible
-  // even if they are outside the graph's range.
-  if (graphInfo.range[Y][MIN] > 0) {
+  if (range[Y][MIN] > 0) {
     // If the graph is on the positive side of the y-axis, lock the ticks to the top of the graph
-    yPointOnAxis = graphInfo.range[Y][MIN];
+    yPointOnAxis = range[Y][MIN];
   }
-  if (graphInfo.range[Y][MAX] < 0) {
+  if (range[Y][MAX] < 0) {
     // If the graph is on the negative side of the x-axis, lock the ticks to the bottom of the graph
-    yPointOnAxis = graphInfo.range[Y][MAX];
+    yPointOnAxis = range[Y][MAX];
   }
+
+  // Convert the Vector2 coordinates to pixel coordinates
   const pointOnAxis = [x, yPointOnAxis];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
 
-  // If the tick is on the edge of the graph's range, don't render it
-  if (xPosition === -graphInfo.width / 2 || xPosition === graphInfo.width) {
-    return null;
-  }
-
   // Position of the start of the tick
   const x1 = xPosition;
   const y1 = yPosition + tickSize / 2;
@@ -29315,21 +29117,56 @@ const XGridTick = _ref2 => {
   // Position of the end of the tick
   const x2 = xPosition;
   const y2 = yPosition - tickSize / 2;
+
+  // Adjust the Y position of the x-axis labels based on
+  // whether the x-axis is above, within, or below the graph
+  const yAdjustment = range[Y][MAX] < 0 ? -tickLabelSize : tickLabelSize * 1.75;
+
+  // Adjust the X position of the x-axis labels based on
+  // whether the label is positive or negative, in order to
+  // account for the width of the negative sign
+  const xAdjustment = x < 0 ? -2 : 0;
+
+  // Apply the adjustments to the x and y positions for the text
+  const xPositionText = xPosition + xAdjustment;
+  const yPositionText = yPosition + yAdjustment;
   return /*#__PURE__*/React__namespace.createElement("g", {
-    className: "x-axis-ticks"
+    className: "tick"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     x1: x1,
     y1: y1,
     x2: x2,
     y2: y2,
-    style: tickStyle
-  }));
+    className: "axis-tick"
+  }), /*#__PURE__*/React__namespace.createElement("text", {
+    className: "axis-tick-label",
+    style: {
+      fontSize: tickLabelSize
+    },
+    textAnchor: "middle",
+    x: xPositionText,
+    y: yPositionText
+  }, x.toString()));
+};
+
+// Determines whether to show the label for the given tick
+// Currently, the only condition is to hide the label at -1
+// on the y-axis when the x-axis is within the graph
+const shouldShowLabel = (number, range) => {
+  let showLabel = true;
+
+  // If the x-axis is within the graph and the y-axis is at -1, hide the label
+  if (range[X][MIN] < -1 && range[X][MAX] > 0 && number === -1) {
+    showLabel = false;
+  }
+  return showLabel;
 };
 function generateTickLocations(tickStep, min, max) {
   const ticks = [];
 
   // Add ticks in the positive direction
-  for (let i = 0 + tickStep; i < max; i += tickStep) {
+  const start = Math.max(min, 0);
+  for (let i = start + tickStep; i < max; i += tickStep) {
     ticks.push(i);
   }
 
@@ -29344,34 +29181,34 @@ function generateTickLocations(tickStep, min, max) {
 const AxisTicks = () => {
   const {
     tickStep,
-    range,
-    width,
-    height
+    range
   } = useGraphConfig();
-  const graphInfo = {
-    range,
-    width,
-    height
-  };
   const [[xMin, xMax], [yMin, yMax]] = range;
   const [xTickStep, yTickStep] = tickStep;
+
+  // Generate the tick locations & labels for the x and y axes
   const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
   return /*#__PURE__*/React__namespace.createElement("g", {
-    className: "axis-ticks"
+    className: "axis-ticks",
+    role: "presentation"
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    className: "y-axis-ticks"
   }, yGridTicks.map(y => {
     return /*#__PURE__*/React__namespace.createElement(YGridTick, {
       y: y,
       key: `y-grid-tick-${y}`,
-      graphInfo: graphInfo
+      range: range
     });
-  }), xGridTicks.map(x => {
+  })), /*#__PURE__*/React__namespace.createElement("g", {
+    className: "x-axis-ticks"
+  }, xGridTicks.map(x => {
     return /*#__PURE__*/React__namespace.createElement(XGridTick, {
       x: x,
       key: `x-grid-tick-${x}`,
-      graphInfo: graphInfo
+      range: range
     });
-  }));
+  })));
 };
 
 /**
@@ -29392,12 +29229,10 @@ const axisOptions = (props, axisIndex) => {
   };
 };
 const Grid = props => {
-  return props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
+  return props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
     xAxis: axisOptions(props, X),
     yAxis: axisOptions(props, Y)
-  }),
-  // Only render the axis ticks and arrows if the markings are set to a full "graph"
-  props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)));
+  });
 };
 
 // Displays a stylized open eye: lint warnings are visible
@@ -32330,11 +32165,31 @@ const MafsGraph = props => {
     state,
     dispatch,
     labels,
-    readOnly
+    readOnly,
+    fullGraphAriaLabel,
+    fullGraphAriaDescription
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
+  const uniqueId = React__namespace.useId();
+  const descriptionId = `interactive-graph-description-${uniqueId}`;
   const graphRef = React__namespace.useRef(null);
+
+  // Set up the SVG attributes for the nested SVGs that help lock
+  // the grid and graph elements to the bounds of the graph.
+  const {
+    viewboxX,
+    viewboxY
+  } = calculateNestedSVGCoords(state.range, width, height);
+  const viewBox = `${viewboxX} ${viewboxY} ${width} ${height}`;
+  const nestedSVGAttributes = {
+    width,
+    height,
+    viewBox,
+    preserveAspectRatio: "xMidYMin",
+    x: viewboxX,
+    y: viewboxY
+  };
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -32356,7 +32211,7 @@ const MafsGraph = props => {
       padding: "25px 25px 0 0",
       boxSizing: "content-box",
       marginLeft: "20px",
-      marginBottom: "20px",
+      marginBottom: "30px",
       pointerEvents: props.static ? "none" : "auto",
       userSelect: "none",
       width,
@@ -32368,9 +32223,19 @@ const MafsGraph = props => {
         graphRef.current?.focus();
       }
     },
+    "aria-label": fullGraphAriaLabel,
+    "aria-describedby": fullGraphAriaDescription ? descriptionId : undefined,
     ref: graphRef,
     tabIndex: 0
-  }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
+  }, fullGraphAriaDescription && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    id: descriptionId,
+    tabIndex: -1,
+    style: {
+      width: 0,
+      height: 0,
+      overflow: "hidden"
+    }
+  }, fullGraphAriaDescription), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
@@ -32381,7 +32246,7 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null), /*#__PURE__*/React__namespace.createElement(AxisTickLabels, null)), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null)), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: state.range[X],
@@ -32392,19 +32257,22 @@ const MafsGraph = props => {
     zoom: false,
     width: width,
     height: height
-  }, /*#__PURE__*/React__namespace.createElement(SvgDefs, null), /*#__PURE__*/React__namespace.createElement(Grid, {
-    tickStep: props.step,
+  }, /*#__PURE__*/React__namespace.createElement(SvgDefs, null), /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, /*#__PURE__*/React__namespace.createElement(Grid, {
     gridStep: props.gridStep,
     range: state.range,
     containerSizeClass: props.containerSizeClass,
-    markings: props.markings
-  }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+    markings: props.markings,
+    width: width,
+    height: height
+  })),
+  // Only render the axis ticks and arrows if the markings are set to a full "graph"
+  props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)), /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
   }), props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
     state,
     dispatch
-  })))), renderGraphControls({
+  }))))), renderGraphControls({
     state,
     dispatch
   })));
@@ -32440,6 +32308,56 @@ const renderGraphControls = props => {
       return null;
   }
 };
+
+// Calculate the difference between the min and max values of a range
+const getRangeDiff = range => {
+  const [min, max] = range;
+  return Math.abs(max - min);
+};
+
+// We need to adjust the nested SVG viewbox x and Y values based on the range of the graph in order
+// to ensure that the graph is sized and positioned correctly within the Mafs SVG and the clipping mask.
+// Exported for testing.
+const calculateNestedSVGCoords = (range, width, height) => {
+  // X RANGE
+  let viewboxX = 0; // When xMin is 0, we want to use 0 as the viewboxX value
+  const totalXRange = getRangeDiff(range[X]);
+  const gridCellWidth = width / totalXRange;
+  const minX = range[X][MIN];
+
+  // If xMin is entirely positive, we need to adjust the
+  // viewboxX to be the grid cell width multiplied by xMin
+  if (minX > 0) {
+    viewboxX = gridCellWidth * Math.abs(minX);
+  }
+  // If xMin is negative, we need to adjust the viewboxX to be
+  // the negative value of the grid cell width multiplied by xMin
+  if (minX < 0) {
+    viewboxX = -gridCellWidth * Math.abs(minX);
+  }
+
+  // Y RANGE
+  let viewboxY = -height; // When yMin is 0, we want to use the negative value of the graph height
+  const totalYRange = getRangeDiff(range[Y]);
+  const gridCellHeight = height / totalYRange;
+  const minY = range[Y][MIN];
+
+  // If the y range is entirely positive, we want a negative sum of the
+  // height and the gridcell height multiplied by the absolute value of yMin
+  if (minY > 0) {
+    viewboxY = -height - gridCellHeight * Math.abs(minY);
+  }
+
+  // If the yMin is negative, we want to multiply the gridcell height
+  // by the absolute value of yMin, and subtract the full height of the graph
+  if (minY < 0) {
+    viewboxY = gridCellHeight * Math.abs(minY) - height;
+  }
+  return {
+    viewboxX,
+    viewboxY
+  };
+};
 const renderGraph = props => {
   const {
     state,
@@ -45054,7 +44972,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "32.0.1";
+const libVersion = "33.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45948,128 +45866,6 @@ const ref = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__
   }));
 }));
 
-class ArrowPicker extends React__namespace.Component {
-  static defaultProps = {
-    value: ""
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: [{
-        value: "",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2014")
-      }, {
-        value: "->",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2192")
-      }
-      /*
-      TODO(eater): fix khan-exercises so these are supported
-      {value: "<-", content: <span>&#x2190;</span>},
-      {value: "<->", content: <span>&#x2194;</span>}
-      */],
-
-      onChange: this.props.onChange
-    });
-  }
-}
-
-const COLORS = [KhanColors.BLACK, KhanColors.BLUE, KhanColors.GREEN, KhanColors.PINK, KhanColors.PURPLE, KhanColors.RED, KhanColors.GRAY];
-const LIGHT_COLORS = [KhanColors.LIGHT_BLUE, KhanColors.LIGHT_ORANGE, KhanColors.LIGHT_PINK, KhanColors.LIGHT_GREEN, KhanColors.LIGHT_PURPLE, KhanColors.LIGHT_RED, "#fff"];
-class ColorPicker extends React__namespace.Component {
-  static defaultProps = {
-    value: KhanColors.BLACK,
-    lightColors: false
-  };
-  render() {
-    const colors = this.props.lightColors ? LIGHT_COLORS : COLORS;
-    return /*#__PURE__*/React__namespace.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: ___default["default"].map(colors, color => {
-        return {
-          value: color,
-          content: /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("span", {
-            className: "colorpicker-circle",
-            style: {
-              background: color
-            }
-          }), "\xA0")
-        };
-      }),
-      onChange: this.props.onChange
-    });
-  }
-}
-
-class DashPicker extends React__namespace.Component {
-  static defaultProps = {
-    value: ""
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(ButtonGroup, {
-      value: this.props.value,
-      allowEmpty: false,
-      buttons: [{
-        value: "",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2014")
-      }, {
-        value: "-",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2013\u2013\u2013")
-      }, {
-        value: "- ",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\u2013\xA0\xA0\u2013")
-      }, {
-        value: ".",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\xB7\xB7\xB7\xB7")
-      }, {
-        value: ". ",
-        content: /*#__PURE__*/React__namespace.createElement("span", null, "\xB7 \xB7 \xB7")
-      }],
-      onChange: this.props.onChange
-    });
-  }
-}
-
-/* eslint-disable jsx-a11y/anchor-is-valid */
-class ElementContainer extends React__namespace.Component {
-  static defaultProps = {
-    initiallyVisible: false,
-    title: "More"
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: props.initiallyVisible
-    };
-  }
-  toggle = e => {
-    e.preventDefault();
-    this.setState({
-      show: !this.state.show
-    });
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-interaction-element"
-    }, /*#__PURE__*/React__namespace.createElement("a", {
-      href: "#",
-      className: "perseus-interaction-element-title " + (this.state.show ? "open" : "closed"),
-      onClick: this.toggle
-    }, this.state.show ? /*#__PURE__*/React__namespace.createElement(InlineIcon, iconChevronDown) : /*#__PURE__*/React__namespace.createElement(InlineIcon, iconChevronRight), this.props.title), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-interaction-element-content " + (this.state.show ? "enter" : "leave")
-    }, this.props.children, (this.props.onUp != null || this.props.onDown != null || this.props.onDelete != null) && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "edit-controls"
-    }, this.props.onUp != null && /*#__PURE__*/React__namespace.createElement("button", {
-      onClick: this.props.onUp
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React__namespace.createElement("button", {
-      onClick: this.props.onDown
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React__namespace.createElement("button", {
-      onClick: this.props.onDelete
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTrash)))));
-  }
-}
-
 const devices = {
   PHONE: "phone",
   TABLET: "tablet",
@@ -48655,17 +48451,13 @@ const EditorJsonify = {
 };
 
 exports.ApiOptions = ApiOptions;
-exports.ArrowPicker = ArrowPicker;
 exports.ArticleRenderer = ArticleRenderer;
 exports.BaseRadio = BaseRadio;
 exports.Categorizer = Categorizer$1;
 exports.Changeable = changeable;
 exports.ClassNames = ClassNames;
-exports.ColorPicker = ColorPicker;
-exports.DashPicker = DashPicker;
 exports.Dependencies = dependencies;
 exports.EditorJsonify = EditorJsonify;
-exports.ElementContainer = ElementContainer;
 exports.Expression = Expression;
 exports.GrapherUtil = util;
 exports.GrapherWidget = Grapher$1;