@khanacademy/perseus 37.0.0 → 38.0.0

package/dist/extra-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/index.d.ts

@@ -82,7 +82,7 @@ export { default as WIDGET_PROP_DENYLIST } from "./mixins/widget-prop-denylist";
 export type { PerseusOptions } from "./init";
 export type { ILogger, LogErrorOptions } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
-export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, SharedRendererProps, } from "./types";
+export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetExports, SharedRendererProps, } from "./types";
 export type { ParsedValue } from "./util";
 export type { Hint, LegacyButtonSets, LockedFigure, LockedFigureColor, LockedFigureFillType, LockedFigureType, LockedPointType, LockedLineType, LockedVectorType, LockedEllipseType, LockedPolygonType, LockedFunctionType, LockedLabelType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, CollinearTuple, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
 PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPhetSimulationWidgetOptions, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, MultiItem, } from "./perseus-types";

package/dist/index.js

@@ -2394,15 +2394,6 @@ class Expression extends React__namespace.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
-
   static defaultProps = {
     value: "",
     times: false,
@@ -2728,11 +2719,7 @@ const ExpressionWithDependencies = /*#__PURE__*/React__namespace.forwardRef((pro
 // 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",
@@ -2765,7 +2752,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;
+  }
 };
 
 /**
@@ -10090,9 +10084,6 @@ const setLabelMargins = function (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,
@@ -19087,6 +19078,9 @@ const getWidget = name => {
   }
   return widgets[name].widget;
 };
+const getWidgetExport = name => {
+  return widgets[name] ?? null;
+};
 const getWidgetValidator = name => {
   return widgets[name]?.validator ?? null;
 };
@@ -19395,6 +19389,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceEditor: replaceEditor,
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
+  getWidgetExport: getWidgetExport,
   getWidgetValidator: getWidgetValidator,
   getEditor: getEditor,
   getTransform: getTransform,
@@ -21988,16 +21983,6 @@ class InputNumber extends React__namespace.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;
-  }
   shouldShowExamples = () => {
     return this.props.answerType !== "number";
   };
@@ -22156,7 +22141,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;
@@ -22335,34 +22330,6 @@ class NumericInput extends React__namespace.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];
-  }
   state = {
     // keeps track of the other set of values when switching
     // between 0 and finite solutions
@@ -22549,7 +22516,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];
+  }
 };
 
 /**
@@ -28541,7 +28536,7 @@ const Exponential = ___default["default"].extend({}, PlotDefaults, {
    * coordinate, and `false` uses oldCoord as the resulting coordinate.
    */
   extraCoordConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
-    const y = ___default["default"].head(asymptote)[1];
+    const y = asymptote[0][1];
     return ___default["default"].all(coords, coord => coord[1] !== y);
   },
   extraAsymptoteConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
@@ -28565,7 +28560,7 @@ const Exponential = ___default["default"].extend({}, PlotDefaults, {
   getCoefficients: function (coords, asymptote) {
     const p1 = coords[0];
     const p2 = coords[1];
-    const c = ___default["default"].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];
@@ -28592,7 +28587,7 @@ const Logarithm = ___default["default"].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 = ___default["default"].head(asymptote)[0];
+    const x = asymptote[0][0];
     return ___default["default"].all(coords, coord => coord[0] !== x) && coords[0][1] !== coords[1][1];
   },
   extraAsymptoteConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
@@ -28620,10 +28615,12 @@ const Logarithm = ___default["default"].extend({}, PlotDefaults, {
     // logic between the two 'models'.
     const flip = coord => [coord[1], coord[0]];
     const inverseCoeffs = Exponential.getCoefficients(___default["default"].map(coords, flip), ___default["default"].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],
@@ -28687,11 +28684,9 @@ const functionTypeMapping = {
   absolute_value: AbsoluteValue
 };
 const allTypes = ___default["default"].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 => {
@@ -28756,12 +28751,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
   };
 };
@@ -28821,8 +28817,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 perseusCore.PerseusError("Invalid grapher type", perseusCore.Errors.InvalidInput);
+  }
+}
+function grapherValidator(userInput, rubric) {
+  if (userInput.type !== rubric.correct.type) {
     return {
       type: "points",
       earned: 0,
@@ -28832,7 +28839,7 @@ function grapherValidator(state, rubric) {
   }
 
   // We haven't moved the coords
-  if (state.coords == null) {
+  if (userInput.coords == null) {
     return {
       type: "invalid",
       message: null
@@ -28840,11 +28847,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",
@@ -37937,7 +37942,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:
@@ -42411,17 +42416,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 => kmath.number.toFraction(x)[1];
@@ -42430,30 +42441,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;
 });
@@ -43147,7 +43168,7 @@ class Orderer extends React__namespace.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({
@@ -43310,7 +43331,7 @@ class Orderer extends React__namespace.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({
@@ -45158,7 +45179,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -48417,9 +48438,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?.getOneCorrectAnswerFromRubric?.(rubric);
 };