@khanacademy/perseus 37.0.0 → 38.0.0

package/dist/all-widgets.d.ts

@@ -16,6 +16,7 @@ declare const _default: readonly Readonly<{
     transform?: import("./types").WidgetTransform | undefined;
     staticTransform?: import("./types").WidgetTransform | undefined;
     validator?: import("./types").WidgetValidatorFunction | undefined;
+    getOneCorrectAnswerFromRubric?: ((rubric: import("./validation.types").Rubric) => string | null | undefined) | undefined;
     propUpgrades?: {
         [key: string]: (arg1: any) => any;
     } | undefined;

package/dist/basic-widgets.d.ts

@@ -16,6 +16,7 @@ declare const _default: readonly Readonly<{
     transform?: import("./types").WidgetTransform | undefined;
     staticTransform?: import("./types").WidgetTransform | undefined;
     validator?: import("./types").WidgetValidatorFunction | undefined;
+    getOneCorrectAnswerFromRubric?: ((rubric: import("./validation.types").Rubric) => string | null | undefined) | undefined;
     propUpgrades?: {
         [key: string]: (arg1: any) => any;
     } | undefined;

package/dist/es/index.js

@@ -2376,15 +2376,6 @@ class Expression extends React.Component {
   static getUserInputFromProps(props) {
     return normalizeTex(props.value);
   }
-  static getOneCorrectAnswerFromRubric(rubric) {
-    const correctAnswers = (rubric.answerForms || []).filter(answerForm => answerForm.considered === "correct");
-    if (correctAnswers.length === 0) {
-      return;
-    }
-    return correctAnswers[0].value;
-  }
-  //#endregion
-
   getUserInput() {
     return Expression.getUserInputFromProps(this.props);
   }
@@ -2612,11 +2603,7 @@ const ExpressionWithDependencies = /*#__PURE__*/React.forwardRef((props, ref) =>
 // methods and instead adjust Perseus to provide these facilities through
 // instance methods on our Renderers.
 // @ts-expect-error - TS2339 - Property 'validate' does not exist on type
-ExpressionWithDependencies.validate = expressionValidator;
-// @ts-expect-error - TS2339 - Property 'validate' does not exist on type
 ExpressionWithDependencies.getUserInputFromProps = Expression.getUserInputFromProps;
-// @ts-expect-error - TS2339 - Property 'validate' does not exist on type
-ExpressionWithDependencies.getOneCorrectAnswerFromRubric = Expression.getOneCorrectAnswerFromRubric;
 var Expression$1 = {
   name: "expression",
   displayName: "Expression / Equation",
@@ -2649,7 +2636,14 @@ var Expression$1 = {
   propUpgrades: propUpgrades$2,
   // For use by the editor
   isLintable: true,
-  validator: expressionValidator
+  validator: expressionValidator,
+  getOneCorrectAnswerFromRubric(rubric) {
+    const correctAnswers = (rubric.answerForms || []).filter(answerForm => answerForm.considered === "correct");
+    if (correctAnswers.length === 0) {
+      return;
+    }
+    return correctAnswers[0].value;
+  }
 };
 
 /**
@@ -9973,9 +9967,6 @@ const setLabelMargins = function setLabelMargins(span, size) {
     // Inherited line-height values can really mess up placement.
     $container.css("line-height", "normal");
 
-    // TODO: Verify that this change doesn't impact other graphies
-    //       Check the full list of consuming widgets.
-
     // If the change in line-height affected the height of the element,
     //     then the height used for calculations should be updated.
     // This can happen when the first label in the container calls this method,
@@ -18893,9 +18884,13 @@ const getWidget = name => {
   }
   return widgets[name].widget;
 };
+const getWidgetExport = name => {
+  var _widgets$name3;
+  return (_widgets$name3 = widgets[name]) != null ? _widgets$name3 : null;
+};
 const getWidgetValidator = name => {
-  var _widgets$name$validat, _widgets$name3;
-  return (_widgets$name$validat = (_widgets$name3 = widgets[name]) == null ? void 0 : _widgets$name3.validator) != null ? _widgets$name$validat : null;
+  var _widgets$name$validat, _widgets$name4;
+  return (_widgets$name$validat = (_widgets$name4 = widgets[name]) == null ? void 0 : _widgets$name4.validator) != null ? _widgets$name$validat : null;
 };
 const getEditor = name => {
   return _.has(editors, name) ? editors[name] : null;
@@ -19199,6 +19194,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceEditor: replaceEditor,
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
+  getWidgetExport: getWidgetExport,
   getWidgetValidator: getWidgetValidator,
   getEditor: getEditor,
   getTransform: getTransform,
@@ -21817,16 +21813,6 @@ class InputNumber extends React.Component {
       currentValue: props.currentValue
     };
   }
-  static getOneCorrectAnswerFromRubric(rubric) {
-    if (rubric.value == null) {
-      return;
-    }
-    let answerString = String(rubric.value);
-    if (rubric.inexact && rubric.maxError) {
-      answerString += " \u00B1 " + rubric.maxError;
-    }
-    return answerString;
-  }
   getUserInput() {
     return InputNumber.getUserInputFromProps(this.props);
   }
@@ -21935,7 +21921,17 @@ var InputNumber$1 = {
   widget: InputNumber,
   transform: propTransform$3,
   isLintable: true,
-  validator: inputNumberValidator
+  validator: inputNumberValidator,
+  getOneCorrectAnswerFromRubric(rubric) {
+    if (rubric.value == null) {
+      return;
+    }
+    let answerString = String(rubric.value);
+    if (rubric.inexact && rubric.maxError) {
+      answerString += " \u00B1 " + rubric.maxError;
+    }
+    return answerString;
+  }
 };
 
 const ParseTex = TexWrangler.parseTex;
@@ -22181,34 +22177,6 @@ class NumericInput extends React.Component {
       currentValue: props.currentValue
     };
   }
-  static getOneCorrectAnswerFromRubric(rubric) {
-    const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
-    const answerStrings = correctAnswers.map(answer => {
-      // Figure out how this answer is supposed to be
-      // displayed
-      let format = "decimal";
-      if (answer.answerForms && answer.answerForms[0]) {
-        // NOTE(johnsullivan): This isn't exactly ideal, but
-        // it does behave well for all the currently known
-        // problems. See D14742 for some discussion on
-        // alternate strategies.
-        format = answer.answerForms[0];
-      }
-
-      // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'MathFormat | undefined'.
-      let answerString = KhanMath.toNumericString(answer.value, format);
-      if (answer.maxError) {
-        answerString += " \u00B1 " +
-        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'MathFormat | undefined'.
-        KhanMath.toNumericString(answer.maxError, format);
-      }
-      return answerString;
-    });
-    if (answerStrings.length === 0) {
-      return;
-    }
-    return answerStrings[0];
-  }
   getUserInput() {
     return NumericInput.getUserInputFromProps(this.props);
   }
@@ -22336,7 +22304,35 @@ var NumericInput$1 = {
   widget: NumericInput,
   transform: propsTransform,
   isLintable: true,
-  validator: numericInputValidator
+  validator: numericInputValidator,
+  getOneCorrectAnswerFromRubric(rubric) {
+    const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
+    const answerStrings = correctAnswers.map(answer => {
+      // Figure out how this answer is supposed to be
+      // displayed
+      let format = "decimal";
+      if (answer.answerForms && answer.answerForms[0]) {
+        // NOTE(johnsullivan): This isn't exactly ideal, but
+        // it does behave well for all the currently known
+        // problems. See D14742 for some discussion on
+        // alternate strategies.
+        format = answer.answerForms[0];
+      }
+
+      // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'MathFormat | undefined'.
+      let answerString = KhanMath.toNumericString(answer.value, format);
+      if (answer.maxError) {
+        answerString += " \u00B1 " +
+        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'MathFormat | undefined'.
+        KhanMath.toNumericString(answer.maxError, format);
+      }
+      return answerString;
+    });
+    if (answerStrings.length === 0) {
+      return;
+    }
+    return answerStrings[0];
+  }
 };
 
 /**
@@ -28276,7 +28272,7 @@ const Exponential = _.extend({}, PlotDefaults, {
    * coordinate, and `false` uses oldCoord as the resulting coordinate.
    */
   extraCoordConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
-    const y = _.head(asymptote)[1];
+    const y = asymptote[0][1];
     return _.all(coords, coord => coord[1] !== y);
   },
   extraAsymptoteConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
@@ -28300,7 +28296,7 @@ const Exponential = _.extend({}, PlotDefaults, {
   getCoefficients: function (coords, asymptote) {
     const p1 = coords[0];
     const p2 = coords[1];
-    const c = _.head(asymptote)[1];
+    const c = asymptote[0][1];
     const b = Math.log((p1[1] - c) / (p2[1] - c)) / (p1[0] - p2[0]);
     const a = (p1[1] - c) / Math.exp(b * p1[0]);
     return [a, b, c];
@@ -28327,7 +28323,7 @@ const Logarithm = _.extend({}, PlotDefaults, {
   defaultCoords: [[0.55, 0.5], [0.75, 0.75]],
   defaultAsymptote: [[0.5, 0], [0.5, 1.0]],
   extraCoordConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
-    const x = _.head(asymptote)[0];
+    const x = asymptote[0][0];
     return _.all(coords, coord => coord[0] !== x) && coords[0][1] !== coords[1][1];
   },
   extraAsymptoteConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
@@ -28355,10 +28351,12 @@ const Logarithm = _.extend({}, PlotDefaults, {
     // logic between the two 'models'.
     const flip = coord => [coord[1], coord[0]];
     const inverseCoeffs = Exponential.getCoefficients(_.map(coords, flip), _.map(asymptote, flip));
-    const c = -inverseCoeffs[2] / inverseCoeffs[0];
-    const b = 1 / inverseCoeffs[0];
-    const a = 1 / inverseCoeffs[1];
-    return [a, b, c];
+    if (inverseCoeffs) {
+      const c = -inverseCoeffs[2] / inverseCoeffs[0];
+      const b = 1 / inverseCoeffs[0];
+      const a = 1 / inverseCoeffs[1];
+      return [a, b, c];
+    }
   },
   getFunctionForCoeffs: function (coeffs, x, asymptote) {
     const a = coeffs[0],
@@ -28422,11 +28420,9 @@ const functionTypeMapping = {
   absolute_value: AbsoluteValue
 };
 const allTypes = _.keys(functionTypeMapping);
-function functionForType(
-// TODO(jeremy): Actually `$Keys<typeof functionTypeMapping>` but that
-// triggers TypeScript to require all of our Plot types to be fully typed which
-// is a big amount of work/change.
-type) {
+function functionForType(type) {
+  // @ts-expect-error: TypeScript doesn't know how to use deal with generics
+  // and conditional types in this way.
   return functionTypeMapping[type];
 }
 const getEquationString = props => {
@@ -28491,12 +28487,13 @@ const defaultPlotProps = (type, graph) => {
   // widget before even reading the question; you can't lose, but you
   // might get a free win.
   const model = functionForType(type);
+  const defaultAsymptote = "defaultAsymptote" in model ? model.defaultAsymptote : null;
   const gridStep = [1, 1];
   // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type '[number, number]'.
   const snapStep = Util.snapStepFromGridStep(gridStep);
   return {
     type,
-    asymptote: maybePointsFromNormalized(model.defaultAsymptote, graph.range, graph.step, snapStep),
+    asymptote: maybePointsFromNormalized(defaultAsymptote, graph.range, graph.step, snapStep),
     coords: null
   };
 };
@@ -28556,8 +28553,19 @@ var util = /*#__PURE__*/Object.freeze({
   typeToButton: typeToButton
 });
 
-function grapherValidator(state, rubric) {
-  if (state.type !== rubric.correct.type) {
+function getCoefficientsByType(data) {
+  if (data.type === "exponential" || data.type === "logarithm") {
+    const grader = functionForType(data.type);
+    return grader.getCoefficients(data.coords, data.asymptote);
+  } else if (data.type === "linear" || data.type === "quadratic" || data.type === "absolute_value" || data.type === "sinusoid" || data.type === "tangent") {
+    const grader = functionForType(data.type);
+    return grader.getCoefficients(data.coords);
+  } else {
+    throw new PerseusError("Invalid grapher type", Errors.InvalidInput);
+  }
+}
+function grapherValidator(userInput, rubric) {
+  if (userInput.type !== rubric.correct.type) {
     return {
       type: "points",
       earned: 0,
@@ -28567,7 +28575,7 @@ function grapherValidator(state, rubric) {
   }
 
   // We haven't moved the coords
-  if (state.coords == null) {
+  if (userInput.coords == null) {
     return {
       type: "invalid",
       message: null
@@ -28575,11 +28583,9 @@ function grapherValidator(state, rubric) {
   }
 
   // Get new function handler for grading
-  const grader = functionForType(state.type);
-  const guessCoeffs = grader.getCoefficients(state.coords, state.asymptote);
-  const correctCoeffs = grader.getCoefficients(rubric.correct.coords,
-  // @ts-expect-error - TS(2339) - Property 'asymptote' does not exist on type '{ type: "absolute_value"; coords: [Coord, Coord]; }'
-  rubric.correct.asymptote);
+  const grader = functionForType(userInput.type);
+  const guessCoeffs = getCoefficientsByType(userInput);
+  const correctCoeffs = getCoefficientsByType(rubric.correct);
   if (guessCoeffs == null || correctCoeffs == null) {
     return {
       type: "invalid",
@@ -37599,7 +37605,7 @@ function shouldUseMafs(mafsFlags, graph) {
         // TODO(benchristel): add a feature flag for the "unlimited"
         // case once we've implemented polygon graphs with unlimited
         // sides
-        return false;
+        return Boolean(mafsFlags["unlimited-polygon"]);
       }
       return Boolean(mafsFlags["polygon"]);
     default:
@@ -42061,17 +42067,23 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   const results = [];
 
   // For convenience, extract some props into separate variables
-  const range = props.range;
-  const labelRange = props.labelRange;
+  const {
+    range,
+    labelRange,
+    labelStyle,
+    labelTicks,
+    tickStep,
+    numDivisions
+  } = props;
   const leftLabel = labelRange[0] == null ? range[0] : labelRange[0];
   const rightLabel = labelRange[1] == null ? range[1] : labelRange[1];
 
   // Find base via GCD for non-reduced fractions
   let base;
-  if (props.labelStyle === "non-reduced") {
+  if (labelStyle === "non-reduced") {
     const fractions = [leftLabel, rightLabel];
-    for (let i = 0; i <= props.numDivisions; i++) {
-      const x = range[0] + i * props.tickStep;
+    for (let i = 0; i <= numDivisions; i++) {
+      const x = range[0] + i * tickStep;
       fractions.push(x);
     }
     const getDenom = x => number.toFraction(x)[1];
@@ -42080,30 +42092,40 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   } else {
     base = undefined;
   }
-
-  // Draw and save the tick marks and tick labels
-  for (let i = 0; i <= props.numDivisions; i++) {
-    const x = range[0] + i * props.tickStep;
-    results.push(graphie.line([x, -0.2], [x, 0.2]));
-    const labelTicks = props.labelTicks;
-    if (labelTicks || props.labelStyle === "decimal ticks") {
-      if (x === leftLabel || x === rightLabel) {
-        results.push(graphie.style({
-          color: KhanColors.BLUE
-        }, () => _label(graphie, props.labelStyle, x, x, base)));
-      } else {
-        results.push(_label(graphie, props.labelStyle, x, x, base));
-      }
-    }
-  }
-
-  // Render the labels' lines
-  graphie.style({
+  const highlightedLineStyle = {
     stroke: KhanColors.BLUE,
     strokeWidth: 3.5
-  }, () => {
-    results.push(graphie.line([leftLabel, -0.2], [leftLabel, 0.2]));
-    results.push(graphie.line([rightLabel, -0.2], [rightLabel, 0.2]));
+  };
+  const highlightedTextStyle = {
+    color: KhanColors.BLUE
+  };
+
+  // Generate an array of tick numbers:
+  //    `Array(props.numDivisions)` makes an array of null values - one for every division marker
+  //    `.keys()` gets the index values for each marker placeholder
+  //    `.map()` converts the index values into actual tick numbers
+  const initialTicks = [...Array(numDivisions).keys()].map(index => range[0] + index * tickStep);
+
+  // .sort() comparator
+  const byNumericAscending = (a, b) => a - b;
+
+  // Ensure that any label markers and range endpoints are included in the array
+  // Using `Set()` prevents duplication of tick numbers (and is quite performant)
+  const allTicks = [...new Set([...initialTicks, leftLabel, rightLabel, ...range])].sort(byNumericAscending);
+
+  // Cycle through each tick number and add a tick line, and a label (if needed)
+  allTicks.forEach(tick => {
+    const tickIsHighlighted = tick === leftLabel || tick === rightLabel;
+    const lineStyle = tickIsHighlighted ? highlightedLineStyle : null;
+    const textStyle = tickIsHighlighted ? highlightedTextStyle : null;
+    graphie.style(lineStyle, () => {
+      results.push(graphie.line([tick, -0.2], [tick, 0.2]));
+    });
+    if (labelTicks || tickIsHighlighted || labelStyle === "decimal ticks") {
+      graphie.style(textStyle, () => {
+        results.push(_label(graphie, labelStyle, tick, tick, base));
+      });
+    }
   });
   return results;
 });
@@ -42782,7 +42804,7 @@ class Orderer extends React.Component {
           list.splice(index, 0, newCard);
         }
         this.props.onChange({
-          // @ts-expect-error - TS2345 - Argument of type '{ current: any[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: WidgetDict | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
+          // @ts-expect-error - TS2345 - Argument of type '{ current: any[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: PerseusWidgetsMap | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
           current: list
         });
         this.setState({
@@ -42944,7 +42966,7 @@ class Orderer extends React.Component {
         };
       });
       this.props.onChange({
-        // @ts-expect-error - TS2345 - Argument of type '{ current: { content: string; }[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: WidgetDict | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
+        // @ts-expect-error - TS2345 - Argument of type '{ current: { content: string; }[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: PerseusWidgetsMap | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
         current: list
       });
       this.setState({
@@ -44805,7 +44827,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "37.0.0";
+const libVersion = "38.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48053,9 +48075,7 @@ const getCorrectAnswerForWidgetId = (widgetId, itemData) => {
   const rubric = itemData.question.widgets[widgetId].options;
   const widgetMap = getWidgetsMapFromItemData(itemData);
   const widgetType = getWidgetTypeByWidgetId(widgetId, widgetMap);
-  const widget = getWidget(widgetType);
-
-  // @ts-expect-error - TS2339 - Property 'getOneCorrectAnswerFromRubric' does not exist on type 'ComponentType<any>'.
+  const widget = getWidgetExport(widgetType);
   return widget == null || widget.getOneCorrectAnswerFromRubric == null ? void 0 : widget.getOneCorrectAnswerFromRubric(rubric);
 };