@khanacademy/perseus 22.0.2 → 22.2.0

package/dist/index.js

@@ -32,8 +32,8 @@ var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
-var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var createReactClass = require('create-react-class');
 var Switch = require('@khanacademy/wonder-blocks-switch');
 var Pill = require('@khanacademy/wonder-blocks-pill');
@@ -28761,6 +28761,93 @@ class Graph extends React__namespace.Component {
   }
 }
 
+const defaultGraphConfig = {
+  range: [[0, 1], [0, 1]],
+  snapStep: [1, 1],
+  markings: "none",
+  showTooltips: false,
+  graphDimensionsInPixels: [1, 1],
+  width: 0,
+  height: 0,
+  labels: []
+};
+const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
+function useGraphConfig() {
+  return React__default["default"].useContext(GraphConfigContext);
+}
+
+const matrixBuilder = mafs.vec.matrixBuilder;
+// When converting vectors, we don't need to translate because a vector
+// is like a pair of x and y distances, which are not bound to specific graph locations.
+function vectorsToPixels(vectors, graphState) {
+  let translation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
+  const {
+    range,
+    width,
+    height
+  } = graphState;
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const transformToPx = matrixBuilder().translate(...translation).scale(width / (xMax - xMin), -height / (yMax - yMin)).get();
+  return vectors.map(p => mafs.vec.transform(p, transformToPx));
+}
+
+// When converting points, we translate so the pixel point ends up in the right location.
+// This is because points are specific locations on graphs, unlike vectors.
+function pointToPixel(point, graphState) {
+  const [[xMin], [, yMax]] = graphState.range;
+  const [a, b] = [-xMin, -yMax];
+  return vectorsToPixels([point], graphState, [a, b])[0];
+}
+const useTransformVectorsToPixels = function () {
+  const graphState = useGraphConfig();
+  for (var _len = arguments.length, vectors = new Array(_len), _key = 0; _key < _len; _key++) {
+    vectors[_key] = arguments[_key];
+  }
+  return vectorsToPixels(vectors, graphState);
+};
+
+function AxisLabels() {
+  const {
+    range,
+    labels,
+    width,
+    height
+  } = useGraphConfig();
+  const yAxisLabelLocation = [0, range[1][1]];
+  const xAxisLabelLocation = [range[0][1], 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)));
+}
+
 // TODO(FEI-4010): Remove `Perseus` prefix for all types here
 // TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
 
@@ -28878,6 +28965,162 @@ const lockedFigureColors = {
 };
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
+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",
+      coords: [x, y]
+    });
+    return this;
+  }
+
+  // add a curve (C) command to the path
+  curve(control1X, control1Y, control2X, control2Y, endX, endY) {
+    this.path.push({
+      action: "C",
+      coords: [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.coords.join(" ")}`;
+}
+function scaleCommandBy(scaleFactor) {
+  return command => ({
+    ...command,
+    coords: command.coords.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
+// don't want that.
+const arrowPath = pathBuilder().move(-3, 4).curve(-2.75, 2.5, 0, 0.25, 0.75, 0).curve(0, -0.25, -2.75, -2.5, -3, -4).scale(1.4).build();
+function Arrowhead(props) {
+  const [point] = useTransformVectorsToPixels(props.tip);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(-1.5)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: arrowPath,
+    fill: "none",
+    style: {
+      stroke: props.color ?? "inherit"
+    },
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  })));
+}
+
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style,
+    className,
+    testId
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style,
+    className: className,
+    "data-testid": testId
+  });
+}
+
+function Vector(props) {
+  const {
+    tail,
+    tip,
+    color,
+    style
+  } = props;
+  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
+  const direction = mafs.vec.sub(tip, tail);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      stroke: color,
+      strokeWidth: 2
+    }
+  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: tailPx,
+    end: tipPx,
+    style: style
+  }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
+    tip: tip,
+    angle: angleDegrees(direction)
+  }));
+}
+function angleDegrees(_ref) {
+  let [x, y] = _ref;
+  return Math.atan2(y, x) * 180 / Math.PI;
+}
+
+/**
+ * Given a ray and a rectangular box, find the point where the ray intersects
+ * the edge of the box. Assumes the `initialPoint` is inside the box.
+ * @param initialPoint - The starting point of the ray.
+ * @param throughPoint - A point that the ray passes through. Must be different from initialPoint.
+ * @param box - The box with which to intersect the ray, in the form [[xMin, xMax], [yMin, yMax]]
+ */
+const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
+  const [[xMin, xMax], [yMin, yMax]] = box;
+  const [aX, aY] = throughPoint;
+  const [bX, bY] = initialPoint;
+  const yDiff = bY - aY;
+  const xDiff = bX - aX;
+  const slope = yDiff / xDiff;
+  const yAtXMin = slope * (xMin - aX) + aY;
+  const yAtXMax = slope * (xMax - aX) + aY;
+  const xAtYMin = (yMin - aY) / slope + aX;
+  const xAtYMax = (yMax - aY) / slope + aX;
+
+  // clock analogy to describe quadrants
+  switch (true) {
+    // 12 o'clock to 2:59
+    case yDiff > 0 && xDiff >= 0:
+      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
+    // 3 o'clock to 5:59
+    case yDiff <= 0 && xDiff > 0:
+      // xAtYMin evaluates to -Infinity here, so we use absolute value
+      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
+    // 9 o'clock to 11:59
+    case yDiff >= 0 && xDiff < 0:
+      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
+    // 6 o'clock to 8:59
+    case yDiff < 0 && xDiff <= 0:
+      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
+    default:
+      return [xMax, yAtXMax];
+  }
+};
+const getLines = points => points.map((point, i) => {
+  const next = points[(i + 1) % points.length];
+  return [point, next];
+});
+
 const LockedLine = props => {
   const {
     color,
@@ -28885,11 +29128,27 @@ const LockedLine = props => {
     kind,
     points,
     showStartPoint,
-    showEndPoint
+    showEndPoint,
+    range
   } = props;
   const [point1, point2] = points;
   let line;
-  if (kind === "line" || kind === "segment") {
+  if (kind === "ray") {
+    // Rays extend to the end of the graph in one direction.
+    const endExtend = getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    line = /*#__PURE__*/React__namespace.createElement(Vector, {
+      tail: point1.coord,
+      tip: endExtend,
+      color: lockedFigureColors[color],
+      style: {
+        strokeDasharray: lineStyle === "dashed" ?
+        // TODO(lems-1930): Uncomment this line when the
+        // dashed style is updated in Mafs.
+        // ? "var(--mafs-line-stroke-dash-style)"
+        "4, 3" : undefined
+      }
+    });
+  } else {
     const LineType = kind === "segment" ? mafs.Line.Segment : mafs.Line.ThroughPoints;
     line = /*#__PURE__*/React__namespace.createElement(LineType, {
       point1: point1.coord,
@@ -28897,12 +29156,9 @@ const LockedLine = props => {
       color: lockedFigureColors[color],
       style: lineStyle
     });
-  } else {
-    // TODO(LEMS-1928): Implement rays
-    return null;
   }
   return /*#__PURE__*/React__namespace.createElement("g", {
-    className: "locked-line"
+    className: kind === "ray" ? "locked-ray" : "locked-line"
   }, line, showStartPoint && /*#__PURE__*/React__namespace.createElement(mafs.Point, {
     x: point1.coord[0],
     y: point1.coord[1],
@@ -28951,14 +29207,16 @@ const GraphLockedLayer = props => {
     lockedFigures
   } = props;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lockedFigures.map((figure, index) => {
-    let Figure;
     switch (figure.type) {
       case "point":
-        Figure = LockedPoint;
-        break;
+        return /*#__PURE__*/React__namespace.createElement(LockedPoint, _extends({
+          key: `point-${index}`
+        }, figure));
       case "line":
-        Figure = LockedLine;
-        break;
+        return /*#__PURE__*/React__namespace.createElement(LockedLine, _extends({
+          key: `line-${index}`,
+          range: props.range
+        }, figure));
       default:
         /**
          * Devlopment-time future-proofing: This should
@@ -28968,9 +29226,6 @@ const GraphLockedLayer = props => {
          */
         throw new wonderStuffCore.UnreachableCaseError(figure);
     }
-    return /*#__PURE__*/React__namespace.createElement(Figure, _extends({
-      key: `${figure.type}-${index}`
-    }, figure));
   }));
 };
 
@@ -29052,173 +29307,6 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
-const useTransform = function () {
-  const {
-    viewTransform,
-    userTransform
-  } = mafs.useTransformContext();
-  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
-  for (var _len = arguments.length, points = new Array(_len), _key = 0; _key < _len; _key++) {
-    points[_key] = arguments[_key];
-  }
-  const transformedPoints = points.map(point => mafs.vec.transform(point, transformToPx));
-  return transformedPoints;
-};
-
-/**
- * Given two points, find the tips that extends through the points to the edge of the range.
- * @param collinearPoint - The point that the line passes through. Needed to establish slope.
- * @param extendFrom - The point that the line extends from to the edge of the graph.
- */
-const getRayIntersectionCoords = (collinearPoint, extendFrom, range) => {
-  // edges of the graph
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const [aX, aY] = collinearPoint;
-  const [bX, bY] = extendFrom;
-  const yDiff = bY - aY;
-  const xDiff = bX - aX;
-  const slope = yDiff / xDiff;
-  const yAtXMin = slope * (xMin - aX) + aY;
-  const yAtXMax = slope * (xMax - aX) + aY;
-  const xAtYMin = (yMin - aY) / slope + aX;
-  const xAtYMax = (yMax - aY) / slope + aX;
-
-  // clock analogy to describe quadrants
-  switch (true) {
-    // 12 o'clock to 2:59
-    case yDiff > 0 && xDiff >= 0:
-      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
-    // 3 o'clock to 5:59
-    case yDiff <= 0 && xDiff > 0:
-      // xAtYMin evaluates to -Infinity here, so we use absolute value
-      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
-    // 9 o'clock to 11:59
-    case yDiff >= 0 && xDiff < 0:
-      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
-    // 6 o'clock to 8:59
-    case yDiff < 0 && xDiff <= 0:
-      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
-    default:
-      return [xMax, yAtXMax];
-  }
-};
-const getLines = points => points.map((point, i) => {
-  const next = points[(i + 1) % points.length];
-  return [point, next];
-});
-
-function SVGLine(props) {
-  const {
-    start,
-    end,
-    style,
-    className,
-    testId
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement("line", {
-    x1: start[0],
-    y1: start[1],
-    x2: end[0],
-    y2: end[1],
-    style: style,
-    className: `${className}`,
-    "data-testid": testId
-  });
-}
-
-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",
-      coords: [x, y]
-    });
-    return this;
-  }
-
-  // add a curve (C) command to the path
-  curve(control1X, control1Y, control2X, control2Y, endX, endY) {
-    this.path.push({
-      action: "C",
-      coords: [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.coords.join(" ")}`;
-}
-function scaleCommandBy(scaleFactor) {
-  return command => ({
-    ...command,
-    coords: command.coords.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
-// don't want that.
-const arrowPath = pathBuilder().move(-3, 4).curve(-2.75, 2.5, 0, 0.25, 0.75, 0).curve(0, -0.25, -2.75, -2.5, -3, -4).scale(1.4).build();
-function Arrowhead(props) {
-  const [point] = useTransform([props.x, props.y]);
-  return /*#__PURE__*/React__namespace.createElement("g", {
-    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
-  }, /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-1.5)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: arrowPath,
-    fill: "none",
-    style: {
-      stroke: props.color ?? "inherit"
-    },
-    strokeLinejoin: "round",
-    strokeLinecap: "round"
-  })));
-}
-
-function Vector(props) {
-  const {
-    tail,
-    tip,
-    color
-  } = props;
-  const [tailPx, tipPx] = useTransform(tail, tip);
-  const direction = mafs.vec.sub(tip, tail);
-  return /*#__PURE__*/React__namespace.createElement("g", {
-    style: {
-      stroke: color,
-      strokeWidth: 2
-    }
-  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: tailPx,
-    end: tipPx
-  }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
-    x: tip[0],
-    y: tip[1],
-    angle: angleDegrees(direction)
-  }));
-}
-function angleDegrees(_ref) {
-  let [x, y] = _ref;
-  return Math.atan2(y, x) * 180 / Math.PI;
-}
-
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -29229,12 +29317,16 @@ const MovableLine = props => {
     stroke = defaultStroke
   } = props;
   const midpoint = mafs.vec.midpoint(start, end);
-  const [startPtPx, endPtPx] = useTransform(start, end);
+  const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
+  const {
+    graphDimensionsInPixels
+  } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
   if (extend) {
-    startExtend = extend.start ? getRayIntersectionCoords(end, start, extend.range) : undefined;
-    endExtend = extend.end ? getRayIntersectionCoords(start, end, extend.range) : undefined;
+    const trimmedRange = trimRange(extend.range, graphDimensionsInPixels);
+    startExtend = extend.start ? getIntersectionOfRayWithBox(start, end, trimmedRange) : undefined;
+    endExtend = extend.end ? getIntersectionOfRayWithBox(end, start, trimmedRange) : undefined;
   }
   const line = React.useRef(null);
   const {
@@ -29291,16 +29383,24 @@ const MovableLine = props => {
     color: stroke
   }));
 };
-
-const defaultGraphConfig = {
-  range: [[0, 1], [0, 1]],
-  snapStep: [1, 1],
-  markings: "none",
-  showTooltips: false
-};
-const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
-function useGraphConfig() {
-  return React__default["default"].useContext(GraphConfigContext);
+function trimRange(range, graphDimensionsInPixels) {
+  const pixelsToTrim = 4;
+  const [xRange, yRange] = range;
+  const [pixelsWide, pixelsTall] = graphDimensionsInPixels;
+  const graphUnitsPerPixelX = size(xRange) / pixelsWide;
+  const graphUnitsPerPixelY = size(yRange) / pixelsTall;
+  const graphUnitsToTrimX = pixelsToTrim * graphUnitsPerPixelX;
+  const graphUnitsToTrimY = pixelsToTrim * graphUnitsPerPixelY;
+  return [trim(xRange, graphUnitsToTrimX), trim(yRange, graphUnitsToTrimY)];
+}
+function trim(interval, amount) {
+  if (size(interval) < amount * 2) {
+    return [0, 0];
+  }
+  return [interval[0] + amount, interval[1] - amount];
+}
+function size(interval) {
+  return interval[1] - interval[0];
 }
 
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
@@ -29335,13 +29435,13 @@ const StyledMovablePoint = props => {
     constrain: p => snap(snapStep, p)
   });
   const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""}`;
-  const [[x, y]] = useTransform(point);
+  const [[x, y]] = useTransformVectorsToPixels(point);
   const [xMin, xMax] = range[0];
   const [yMin, yMax] = range[1];
-  const [[verticalStartX]] = useTransform([xMin, 0]);
-  const [[verticalEndX]] = useTransform([xMax, 0]);
-  const [[_, horizontalStartY]] = useTransform([0, yMin]);
-  const [[__, horizontalEndY]] = useTransform([0, yMax]);
+  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
+  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
+  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
   const showHairlines = dragging && markings !== "none";
   const hairlines = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
     x1: verticalStartX,
@@ -29669,7 +29769,7 @@ const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
  */
 const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
   // Create a ray from the midpoint (inside angle) to the edge of the range
-  const rangeIntersectionPoint = getRayIntersectionCoords(midpoint, vertex, range);
+  const rangeIntersectionPoint = getIntersectionOfRayWithBox(vertex, midpoint, range);
   let lineIntersectionCount = 0;
   polygonLines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
 
@@ -29794,23 +29894,19 @@ function AxisArrows() {
   const axisColor = "var(--mafs-fg)";
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: xMin,
-    y: 0,
+    tip: [xMin, 0],
     angle: 180
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: xMax,
-    y: 0,
+    tip: [xMax, 0],
     angle: 0
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: 0,
-    y: yMin,
+    tip: [0, yMin],
     angle: 270
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: 0,
-    y: yMax,
+    tip: [0, yMax],
     angle: 90
   }));
 }
@@ -29836,7 +29932,7 @@ const YGridTick = _ref => {
     tickStep
   } = _ref;
   const pointOnAxis = [0, y];
-  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "y-axis-ticks"
   }, /*#__PURE__*/React__namespace.createElement("line", {
@@ -29860,7 +29956,7 @@ const XGridTick = _ref2 => {
     tickStep
   } = _ref2;
   const pointOnAxis = [x, 0];
-  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "x-axis-ticks"
   }, /*#__PURE__*/React__namespace.createElement("line", {
@@ -30082,96 +30178,26 @@ const styles$k = aphrodite.StyleSheet.create({
   }
 });
 
-const colors$1 = {
-  grayLight: "#aaa",
-  basicBorderColor: "#ccc",
-  white: "#fff"
-};
-const triangleBeforeAfter = {
-  borderBottom: "9px solid transparent",
-  borderTop: "9px solid transparent",
-  content: '" "',
-  height: "0",
-  position: "absolute",
-  top: "0",
-  width: "0"
+const InfoTip$1 = props => {
+  return /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+    content: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.Body, {
+      style: styles$j.body
+    }, props.children),
+    placement: "right"
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+    size: "small",
+    icon: questionIcon__default["default"],
+    style: styles$j.spacingLeft
+  }));
 };
 const styles$j = aphrodite.StyleSheet.create({
-  infoTip: {
-    display: "inline-block",
-    marginLeft: "5px",
-    position: "relative"
+  spacingLeft: {
+    marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
   },
-  infoTipContainer: {
-    position: "absolute",
-    top: "-12px",
-    left: "22px",
-    zIndex: 1000
-  },
-  infoTipTriangle: {
-    height: "10px",
-    left: "0",
-    position: "absolute",
-    top: "8px",
-    width: "0",
-    zIndex: 1,
-    ":before": {
-      ...triangleBeforeAfter,
-      borderRight: "9px solid #bbb",
-      right: "0"
-    },
-    ":after": {
-      ...triangleBeforeAfter,
-      borderRight: `9px solid ${colors$1.white}`,
-      right: "-1px"
-    }
-  },
-  verticalShadow: {
-    border: `1px solid ${colors$1.basicBorderColor}`,
-    boxShadow: `0 1px 3px ${colors$1.basicBorderColor}`,
-    borderBottom: `1px solid ${colors$1.grayLight}`
-  },
-  infoTipContentContainer: {
-    background: colors$1.white,
-    padding: "5px 10px",
-    width: "240px"
+  body: {
+    padding: wonderBlocksTokens.spacing.medium_16
   }
 });
-class InfoTip$1 extends React__namespace.Component {
-  state = {
-    hover: false
-  };
-  handleMouseEnter = () => {
-    this.setState({
-      hover: true
-    });
-  };
-  handleMouseLeave = () => {
-    this.setState({
-      hover: false
-    });
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.infoTip)
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      size: "small",
-      icon: questionIcon__default["default"]
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.infoTipContainer),
-      style: {
-        display: this.state.hover ? "block" : "none"
-      }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.infoTipTriangle)
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.verticalShadow, styles$j.infoTipContentContainer)
-    }, this.props.children)));
-  }
-}
 
 /**
  * A wrapper around info-tip/info-tip.jsx that can be rendered on the
@@ -31028,7 +31054,7 @@ const getDefaultPoints = _ref => {
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return {
-      type: initialGraph.type
+      ...initialGraph
     };
   }
   if (initialGraph.type === "linear-system" && state.type === "linear-system") {
@@ -31195,7 +31221,8 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
 const MafsGraph = props => {
   const {
     state,
-    dispatch
+    dispatch,
+    labels
   } = props;
   const [width, height] = props.box;
   const prevState = React.useRef(state);
@@ -31224,7 +31251,11 @@ const MafsGraph = props => {
       range: state.range,
       snapStep: state.snapStep,
       markings: props.markings,
-      showTooltips: !!props.showTooltips
+      showTooltips: !!props.showTooltips,
+      graphDimensionsInPixels: props.box,
+      width,
+      height,
+      labels
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -31243,7 +31274,7 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(AxisLabels, null), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: props.range[0],
@@ -31261,7 +31292,8 @@ const MafsGraph = props => {
     containerSizeClass: props.containerSizeClass,
     markings: props.markings
   }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
-    lockedFigures: props.lockedFigures
+    lockedFigures: props.lockedFigures,
+    range: props.range
   }), renderGraph({
     state,
     dispatch
@@ -32470,8 +32502,12 @@ class LegacyInteractiveGraph extends React__namespace.Component {
       graph: graph
     });
   };
-  getUserInput = () => InteractiveGraph.getUserInputFromProps(this.props);
-  simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
+  getUserInput() {
+    return InteractiveGraph.getUserInputFromProps(this.props);
+  }
+  simpleValidate(rubric) {
+    return InteractiveGraph.validate(this.getUserInput(), rubric, this);
+  }
   focus = $__default["default"].noop;
   render() {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
@@ -32550,7 +32586,9 @@ class InteractiveGraph extends React__namespace.Component {
     }
     throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
   };
-  simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
+  simpleValidate(rubric) {
+    return InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
+  }
   render() {
     // Mafs shim
     if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
@@ -43351,7 +43389,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "22.0.2";
+const libVersion = "22.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {