@khanacademy/perseus 37.0.1 → 38.0.1

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

@@ -10084,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,
@@ -21903,7 +21900,7 @@ const answerTypes = {
     forms: "pi"
   }
 };
-function inputNumberValidator(state, rubric, strings) {
+function inputNumberValidator(userInput, rubric, strings) {
   if (rubric.answerType == null) {
     rubric.answerType = "number";
   }
@@ -21921,7 +21918,7 @@ function inputNumberValidator(state, rubric, strings) {
 
   // We may have received TeX; try to parse it before grading.
   // If `currentValue` is not TeX, this should be a no-op.
-  const currentValue = ParseTex$1(state.currentValue);
+  const currentValue = ParseTex$1(userInput.currentValue);
   const result = val(currentValue);
 
   // TODO(eater): Seems silly to translate result to this invalid/points
@@ -28539,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) {
@@ -28563,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];
@@ -28590,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) {
@@ -28618,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],
@@ -28685,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 => {
@@ -28754,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
   };
 };
@@ -28819,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,
@@ -28830,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
@@ -28838,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",
@@ -39028,10 +39035,12 @@ function scoreMarker(marker) {
   }
   return score;
 }
-function labelImageValidator(state, rubric) {
+
+// TODO(LEMS-2440): May need to pull answers out of PerseusLabelImageWidgetOptions[markers] for the rubric
+function labelImageValidator(userInput, rubric) {
   let numAnswered = 0;
   let numCorrect = 0;
-  for (const marker of state.markers) {
+  for (const marker of userInput.markers) {
     const score = scoreMarker(marker);
     if (score.hasAnswers) {
       numAnswered++;
@@ -39042,7 +39051,7 @@ function labelImageValidator(state, rubric) {
   }
 
   // We expect all question markers to be answered before grading.
-  if (numAnswered !== state.markers.length) {
+  if (numAnswered !== userInput.markers.length) {
     return {
       type: "invalid",
       message: null
@@ -39052,7 +39061,7 @@ function labelImageValidator(state, rubric) {
     type: "points",
     // Markers with no expected answers are graded as correct if user
     // makes no answer selection.
-    earned: numCorrect === state.markers.length ? 1 : 0,
+    earned: numCorrect === userInput.markers.length ? 1 : 0,
     total: 1,
     message: null
   };
@@ -39525,6 +39534,8 @@ class LabelImage extends React__namespace.Component {
       markers
     };
   }
+
+  // TODO(LEMS-2544): Investigate impact on scoring; possibly pull out &/or remove rubric parameter.
   showRationalesForCurrentlySelectedChoices(rubric) {
     const {
       markers
@@ -42409,17 +42420,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];
@@ -42428,30 +42445,42 @@ 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(Math.round(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
+  // NOTE: 'numDivisions' can sometimes be a non-integer (i.e. 7.000001).
+  //       Using Math.round() to ensure that an integer is used in the Array setup.
+  const initialTicks = [...Array(Math.round(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;
 });
@@ -43145,7 +43174,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({
@@ -43308,7 +43337,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({
@@ -45156,7 +45185,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.1";
+const libVersion = "38.0.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {