@khanacademy/perseus 19.1.0 → 19.1.2

package/dist/perseus-types.d.ts

@@ -505,16 +505,16 @@ export type PerseusInteractionGraph = {
     box: Size;
     labels: ReadonlyArray<string>;
     range: [Range, Range];
-    gridStep: Readonly<[number, number]>;
+    gridStep: [number, number];
     markings: string;
-    snapStep?: Readonly<[number, number]>;
+    snapStep?: [number, number];
     valid?: boolean | string;
     backgroundImage?: PerseusImageBackground;
     showProtractor?: boolean;
     showRuler?: boolean;
     rulerLabel?: string;
     rulerTicks?: number;
-    tickStep: Readonly<[number, number]>;
+    tickStep: [number, number];
 };
 export type PerseusInteractionElement = {
     type: "function";

package/dist/util/graphie.d.ts

@@ -31,7 +31,7 @@ interface LabelMethod {
 }
 export declare class Graphie {
     #private;
-    el: HTMLElement;
+    el: Element;
     raphael?: any;
     isMobile: boolean;
     currentStyle: any;
@@ -40,7 +40,7 @@ export declare class Graphie {
     dimensions?: Coord;
     xpixels?: number;
     ypixels?: number;
-    constructor(el: HTMLElement);
+    constructor(el: Element);
     init(options: {
         range?: [Interval, Interval];
         scale?: number | Coord;
@@ -51,7 +51,7 @@ export declare class Graphie {
         grid?: boolean;
         gridRange?: [Interval, Interval] | Coord;
         scale: Coord | number;
-        axes?: true;
+        axes?: boolean;
         axisArrows?: "<->" | "->" | true | "";
         axisOpacity?: number;
         axisCenter?: Coord;
@@ -73,7 +73,7 @@ export declare class Graphie {
     }): void;
     private drawingTransform;
     private bounds;
-    style(attrs: any, fn: any): any;
+    style<T>(attrs: any, fn?: (this: Graphie) => T): T | undefined;
     grid(xr: Interval, yr: Interval, style?: StyleParams): unknown;
     arc(center: Coord, radius: Coord, startAngle: number, endAngle: number, sector: boolean, style?: StyleParams): RaphaelElement;
     circle(center: Coord, radius: number, style?: StyleParams): any;
@@ -92,7 +92,7 @@ export declare class Graphie {
     plotParametric(fn: (t: number) => Coord, range: Interval, style?: StyleParams): RaphaelElement;
     plot(fn: (x: number) => number, range: Interval, style?: StyleParams): RaphaelElement;
     svgPath: (points: (Coord | true)[], alreadyScaled?: boolean) => string;
-    svgParabolaPath: (a: any, b: any, c: any) => string;
+    svgParabolaPath: (a: number, b: number, c: number) => string;
     svgSinusoidPath: (a: number, b: number, c: number, d: number) => string;
     private withStyle;
     private postprocessDrawingResult;
@@ -106,5 +106,12 @@ export declare class Graphie {
 type RangeSpecifier = [Interval, Interval] | Coord | number;
 export declare function normalizeRange(range: RangeSpecifier): [Interval, Interval];
 export declare function normalizeRange(range: RangeSpecifier | undefined): [Interval, Interval] | undefined;
-declare const GraphUtils: any;
+declare const GraphUtils: {
+    Graphie: typeof Graphie;
+    createGraphie: (el: Element) => Graphie;
+    unscaledSvgPath: (points: (Coord | true)[]) => string;
+    getDistance: (point1: Coord, point2: Coord) => number;
+    findAngle: (point1: Coord, point2: Coord, vertex?: Coord) => any;
+    graphs: {};
+};
 export default GraphUtils;

package/dist/widgets/measurer.d.ts

@@ -4,10 +4,10 @@ declare const _default: Readonly<{
     getWidget?: (() => any) | undefined;
     accessible?: boolean | ((props: any) => boolean) | undefined;
     hidden?: boolean | undefined;
-    version?: import("../types").Version | undefined;
-    supportedAlignments?: readonly import("../types").Alignment[] | undefined;
-    defaultAlignment?: import("../types").Alignment | undefined;
-    getDefaultAlignment?: (() => import("../types").Alignment) | undefined;
+    version?: import("@khanacademy/perseus").Version | undefined;
+    supportedAlignments?: readonly import("@khanacademy/perseus").Alignment[] | undefined;
+    defaultAlignment?: import("@khanacademy/perseus").Alignment | undefined;
+    getDefaultAlignment?: (() => import("@khanacademy/perseus").Alignment) | undefined;
     isLintable?: boolean | undefined;
     tracking?: import("../types").Tracking | undefined;
     traverseChildWidgets?: any;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "19.1.0",
+    "version": "19.1.2",
     "publishConfig": {
         "access": "public"
     },
@@ -23,8 +23,8 @@
     },
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
-        "@khanacademy/kmath": "^0.1.9",
-        "@khanacademy/math-input": "^17.0.0",
+        "@khanacademy/kmath": "^0.1.10",
+        "@khanacademy/math-input": "^17.0.1",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",

package/src/__tests__/widgets.test.ts

@@ -85,8 +85,7 @@ describe("replaceWidget", () => {
         expect(Widgets.getWidget("transformer")?.name).toBe("Radio");
     });
 
-    it("Does nothing when the replacement isn't available", () => {
-        Widgets.replaceWidget("radio", "dog-cat");
-        expect(Widgets.getWidget("radio")?.name).toBe("Radio");
+    it("Throws when the replacement isn't available", () => {
+        expect(() => Widgets.replaceWidget("radio", "dog-cat")).toThrow();
     });
 });

package/src/components/graph.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
+import {vector as kvector} from "@khanacademy/kmath";
 import $ from "jquery";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -14,6 +15,7 @@ import SvgImage from "./svg-image";
 
 import type {Coord} from "../interactive2/types";
 import type {PerseusImageBackground} from "../perseus-types";
+import type {GridDimensions} from "../util";
 
 const defaultBackgroundImage = {
     url: null,
@@ -43,12 +45,12 @@ function numSteps(range: any, step: any) {
 }
 
 type Props = {
-    box: Readonly<[number, number]>;
+    box: [number, number];
     labels: ReadonlyArray<string>;
-    range: Readonly<[Coord, Coord]>;
-    step: Readonly<[number, number]>;
-    gridStep: Readonly<[number, number]>;
-    snapStep: Readonly<[number, number]>;
+    range: [Coord, Coord];
+    step: [number, number];
+    gridStep: [number, number];
+    snapStep: [number, number];
     markings: string;
     backgroundImage: PerseusImageBackground;
     showProtractor: boolean;
@@ -201,23 +203,26 @@ class Graph extends React.Component<Props> {
             Util.unescapeMathMode(label),
         );
         const range = this.props.range;
+        // @ts-expect-error - TS2345: Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
         const graphie = (this._graphie = GraphUtils.createGraphie(graphieDiv));
 
-        const gridConfig = this._getGridConfig();
+        const gridConfig: [GridDimensions, GridDimensions] =
+            this._getGridConfig();
+        // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
         graphie.snap = this.props.snapStep;
 
         if (this.props.markings === "graph") {
             graphie.graphInit({
                 range: range,
-                scale: _.pluck(gridConfig, "scale"),
+                scale: kvector.map(gridConfig, (g) => g.scale),
                 axisArrows: "<->",
                 labelFormat: function (s) {
                     return "\\small{" + s + "}";
                 },
                 gridStep: this.props.gridStep,
-                tickStep: _.pluck(gridConfig, "tickStep"),
+                tickStep: kvector.map(gridConfig, (g) => g.tickStep),
                 labelStep: 1,
-                unityLabels: _.pluck(gridConfig, "unityLabel"),
+                unityLabels: kvector.map(gridConfig, (g) => g.unityLabel),
                 isMobile: this.props.isMobile,
             });
             graphie.label(
@@ -233,7 +238,7 @@ class Graph extends React.Component<Props> {
         } else if (this.props.markings === "grid") {
             graphie.graphInit({
                 range: range,
-                scale: _.pluck(gridConfig, "scale"),
+                scale: kvector.map(gridConfig, (g) => g.scale),
                 gridStep: this.props.gridStep,
                 axes: false,
                 ticks: false,
@@ -243,7 +248,7 @@ class Graph extends React.Component<Props> {
         } else if (this.props.markings === "none") {
             graphie.init({
                 range: range,
-                scale: _.pluck(gridConfig, "scale"),
+                scale: kvector.map(gridConfig, (g) => g.scale),
                 isMobile: this.props.isMobile,
             });
         }
@@ -303,6 +308,7 @@ class Graph extends React.Component<Props> {
             : null;
         /* eslint-enable indent */
 
+        // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
         graphie.addMouseLayer({
             onClick: this.props.onClick,
             onMouseDown: onMouseDown,
@@ -329,16 +335,15 @@ class Graph extends React.Component<Props> {
         }
     };
 
-    _getGridConfig: () => any = () => {
-        const self = this;
-        return _.map(self.props.step, function (step, i) {
-            return Util.gridDimensionConfig(
+    _getGridConfig: () => [GridDimensions, GridDimensions] = () => {
+        return kvector.map(this.props.step, (step, i) =>
+            Util.gridDimensionConfig(
                 step,
-                self.props.range[i],
-                self.props.box[i],
-                self.props.gridStep[i],
-            );
-        });
+                this.props.range[i],
+                this.props.box[i],
+                this.props.gridStep[i],
+            ),
+        );
     };
 
     _updateProtractor: () => void = () => {

package/src/components/graphie.tsx

@@ -7,6 +7,7 @@ import InteractiveUtil from "../interactive2/interactive-util";
 import {Errors, Log} from "../logging/log";
 import Util from "../util";
 import GraphUtils from "../util/graph-utils";
+import {Graphie as GraphieDrawingContext} from "../util/graphie";
 
 import GraphieClasses from "./graphie-classes";
 import Movables from "./graphie-movables";
@@ -59,8 +60,17 @@ type DefaultProps = {
     addMouseLayer: Props["addMouseLayer"];
 };
 
+interface Movable {
+    remove(): void;
+}
+
 class Graphie extends React.Component<Props> {
     graphieDivRef = React.createRef<HTMLDivElement>();
+    _graphie: GraphieDrawingContext = new GraphieDrawingContext(
+        document.createElement("div"),
+    );
+    _movables: Record<string, Movable> = {};
+    movables: Record<string, Movable> = {};
 
     static defaultProps: DefaultProps = {
         range: [
@@ -120,7 +130,6 @@ class Graphie extends React.Component<Props> {
      * Use it for good and not evil.
      */
     getGraphie: () => any = () => {
-        // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
         return this._graphie;
     };
 
@@ -151,10 +160,11 @@ class Graphie extends React.Component<Props> {
         ];
     };
 
-    _scale: () => ReadonlyArray<number> = () => {
+    // @ts-expect-error -  TS2322: Type '() => number[]' is not assignable to type '() => Coord'.
+    _scale: () => Coord = () => {
         const box = this._box();
         const range = this._range();
-        return _.map(box, (pixelDim, i) => {
+        return box.map((pixelDim, i) => {
             const unitDim = range[i][1] - range[i][0];
             return pixelDim / unitDim;
         });
@@ -164,9 +174,10 @@ class Graphie extends React.Component<Props> {
         this._removeMovables();
 
         const graphieDiv = ReactDOM.findDOMNode(this.graphieDivRef.current);
-        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-        $(graphieDiv).empty();
-        // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
+        if (graphieDiv == null || graphieDiv instanceof Text) {
+            throw new Error("No graphie container div found");
+        }
+        graphieDiv.innerHTML = "";
         const graphie = (this._graphie = createGraphie(graphieDiv));
 
         // This has to be called before addMouseLayer. You can re-init
@@ -178,6 +189,7 @@ class Graphie extends React.Component<Props> {
         });
         // Only add the mouselayer if we actually want one.
         if (this.props.addMouseLayer) {
+            // @ts-expect-error - TS2339: Property 'addMouseLayer' does not exist on type 'Graphie'.
             graphie.addMouseLayer({
                 onClick: this.props.onClick,
                 onMouseDown: this.props.onMouseDown,
@@ -187,13 +199,13 @@ class Graphie extends React.Component<Props> {
             });
         }
 
+        // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
         graphie.snap = this.props.options.snapStep || [1, 1];
 
         if (this.props.responsive) {
             // Overwrite fixed styles set in init()
             // TODO(alex): Either make this component always responsive by
             // itself, or always wrap it in other components so that it is.
-            // @ts-expect-error - TS2769 - No overload matches this call. | TS2554 - Expected 2 arguments, but got 1.
             $(graphieDiv).css({width: "100%", height: "100%"});
             graphie.raphael.setSize("100%", "100%");
         }
@@ -212,9 +224,7 @@ class Graphie extends React.Component<Props> {
 
     _removeMovables: () => void = () => {
         // _.invoke works even when this._movables is undefined
-        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         _.invoke(this._movables, "remove");
-        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         this._movables = {};
     };
 
@@ -333,7 +343,6 @@ class Graphie extends React.Component<Props> {
             }
 
             if (ref) {
-                // @ts-expect-error - TS2339 - Property 'movables' does not exist on type 'Graphie'.
                 this.movables[ref] = newMovables[key];
             }
 
@@ -343,15 +352,11 @@ class Graphie extends React.Component<Props> {
 
     // Sort of like react diffing, but for movables
     _updateMovables: () => void = () => {
-        // @ts-expect-error - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
         const graphie = this._graphie;
 
-        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         const oldMovables = this._movables;
         const newMovables: Record<string, any> = {};
-        // @ts-expect-error - TS2339 - Property '_movables' does not exist on type 'Graphie'.
         this._movables = newMovables;
-        // @ts-expect-error - TS2339 - Property 'movables' does not exist on type 'Graphie'.
         this.movables = {};
 
         // @ts-expect-error - TS2345 - Argument of type 'ReactNode' is not assignable to parameter of type 'readonly any[]'.

package/src/perseus-types.ts

@@ -1036,11 +1036,11 @@ export type PerseusInteractionGraph = {
     // The Axis ranges. e.g. [[-10, 10], [-10, 10]]
     range: [Range, Range];
     // The steps in the grid. default [1, 1]
-    gridStep: Readonly<[number, number]>;
+    gridStep: [number, number];
     // What to show on the graph.  "graph", "grid", or "none"
     markings: string;
     // The snap steps. default [0.5, 0.5]
-    snapStep?: Readonly<[number, number]>;
+    snapStep?: [number, number];
     // Whether the grid is valid or not.  Do the numbers all make sense?
     // NOTE(jeremy) The editor for this widget sometimes stores the graph
     // editor validation error message into this field. It seems innocuous
@@ -1058,7 +1058,7 @@ export type PerseusInteractionGraph = {
     // How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16
     rulerTicks?: number;
     // This controls the number (and position) of the tick marks for the X and Y axis. e.g. [1, 1]
-    tickStep: Readonly<[number, number]>;
+    tickStep: [number, number];
 };
 
 export type PerseusInteractionElement =

package/src/util/graphie.test.ts

@@ -40,7 +40,7 @@ function createFakeRaphaelSet() {
 }
 
 function createAndInitGraphie(): Graphie {
-    const graphie = GraphUtils.createGraphie();
+    const graphie = GraphUtils.createGraphie(document.createElement("div"));
     graphie.raphael = createMockRaphael();
 
     // The graph is 50px by 50px
@@ -1244,20 +1244,6 @@ describe("Graphie drawing tools", () => {
     });
 });
 
-describe("GraphUtils", () => {
-    describe("snapCoord", () => {
-        it("snaps to the nearest integer coordinates", () => {
-            expect(GraphUtils.snapCoord([0.1, 0.9], [1, 1])).toEqual([0, 1]);
-        });
-
-        it("snaps to the nearest half", () => {
-            expect(GraphUtils.snapCoord([0.4, 2.2], [0.5, 0.5])).toEqual([
-                0.5, 2,
-            ]);
-        });
-    });
-});
-
 describe("normalizeRange", () => {
     it("does nothing to a range specified as [[xMin, xMax], [yMin, yMax]]", () => {
         expect(

package/src/util/graphie.ts

@@ -91,7 +91,7 @@ interface LabelMethod {
 }
 
 export class Graphie {
-    el: HTMLElement;
+    el: Element;
     #bounds?: GraphBounds;
     #drawingTransform?: DrawingTransform;
     raphael?: any;
@@ -111,7 +111,7 @@ export class Graphie {
     xpixels?: number;
     ypixels?: number;
 
-    constructor(el: HTMLElement) {
+    constructor(el: Element) {
         this.el = el;
         $(el).css("position", "relative");
         this.raphael = Raphael(el);
@@ -180,7 +180,7 @@ export class Graphie {
         grid?: boolean;
         gridRange?: [Interval, Interval] | Coord;
         scale: Coord | number;
-        axes?: true;
+        axes?: boolean;
         axisArrows?: "<->" | "->" | true | "";
         axisOpacity?: number;
         axisCenter?: Coord;
@@ -269,8 +269,8 @@ export class Graphie {
             unityLabels = [unityLabels, unityLabels];
         }
 
-        const minusIgnorer = function (lf: any) {
-            return function (a) {
+        const minusIgnorer = function (lf: (a: number) => string) {
+            return function (a: number) {
                 return (lf(a) + "").replace(/-(\d)/g, "\\llap{-}$1");
             };
         };
@@ -580,7 +580,7 @@ export class Graphie {
         return this.#bounds;
     }
 
-    style(attrs: any, fn: any) {
+    style<T>(attrs: any, fn?: (this: Graphie) => T): T | undefined {
         const processed = this.processAttributes(attrs);
 
         if (typeof fn === "function") {
@@ -983,7 +983,7 @@ export class Graphie {
             };
 
             // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-            $span.processText = function (text: any) {
+            $span.processText = function (text: string) {
                 $span.html(text);
                 const width = span.scrollWidth;
                 const height = span.scrollHeight;
@@ -1098,7 +1098,7 @@ export class Graphie {
             .join("");
     };
 
-    svgParabolaPath = (a: any, b: any, c: any) => {
+    svgParabolaPath = (a: number, b: number, c: number) => {
         const computeParabola = function (x) {
             return (a * x + b) * x + c;
         };
@@ -1346,7 +1346,7 @@ export class Graphie {
         return this.drawingTransform().unscaleVector(point);
     };
 
-    private processAttributes(attrs: any) {
+    private processAttributes(attrs: Record<string, any> | undefined) {
         const transformers = {
             scale: (scale) => {
                 this.drawingTransform().setScale(scale);
@@ -1515,14 +1515,14 @@ const setLabelMargins = function (span: HTMLElement, size: Coord): void {
     }
 };
 
-const GraphUtils: any = {
+const GraphUtils = {
     Graphie,
 
-    createGraphie: function (el: any): Graphie {
+    createGraphie: function (el: Element): Graphie {
         return new Graphie(el);
     },
 
-    unscaledSvgPath: function (points) {
+    unscaledSvgPath: function (points: (Coord | true)[]): string {
         // If this is an empty closed path, return "" instead of "z", which
         // would give an error
         if (points[0] === true) {
@@ -1538,22 +1538,12 @@ const GraphUtils: any = {
             .join("");
     },
 
-    getDistance: function (point1, point2) {
+    getDistance: function (point1: Coord, point2: Coord): number {
         return kpoint.distanceToPoint(point1, point2);
     },
 
-    /**
-     * Round the given coordinates to a given snap value
-     * (e.g., nearest 0.2 increment)
-     */
-    snapCoord: function (coord, snap) {
-        return coord.map(function (val, i) {
-            return KhanMath.roundToNearest(snap[i], val);
-        });
-    },
-
     // Find the angle in degrees between two or three points
-    findAngle: function (point1, point2, vertex) {
+    findAngle: function (point1: Coord, point2: Coord, vertex?: Coord) {
         if (vertex === undefined) {
             const x = point1[0] - point2[0];
             const y = point1[1] - point2[1];

package/src/util/interactive.ts

@@ -3982,8 +3982,8 @@ _.extend(MovableAngle.prototype, {
 
         // Drag ray control points to move each ray individually
         _.each([0, 2], function (i) {
-            points[i].onMove = function (x: any, y) {
-                const newPoint = [x, y];
+            points[i].onMove = function (x: number, y: number) {
+                const newPoint: Coord = [x, y];
                 const vertex = points[1].coord;
 
                 // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'never[]'.

package/src/widgets/measurer.tsx

@@ -11,6 +11,8 @@ import {ApiOptions} from "../perseus-api";
 import GraphUtils from "../util/graph-utils";
 
 import type {WidgetExports} from "../types";
+import type {Interval} from "../util/interval";
+import type {Coord} from "@khanacademy/perseus";
 
 const defaultImage = {
     url: null,
@@ -121,10 +123,11 @@ const Measurer: any = createReactClass({
         const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
         // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
         $(graphieDiv).empty();
+        // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
         const graphie = (this.graphie = GraphUtils.createGraphie(graphieDiv));
 
-        const scale = [40, 40];
-        const range = [
+        const scale: Coord = [40, 40];
+        const range: [Interval, Interval] = [
             [0, this.props.box[0] / scale[0]],
             [0, this.props.box[1] / scale[1]],
         ];
@@ -132,6 +135,7 @@ const Measurer: any = createReactClass({
             range: range,
             scale: scale,
         });
+        // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
         graphie.addMouseLayer({
             allowScratchpad: true,
             setDrawingAreaAvailable:
@@ -143,6 +147,7 @@ const Measurer: any = createReactClass({
         }
 
         if (this.props.showProtractor) {
+            // @ts-expect-error - Property 'protractor' does not exist on type 'Graphie'.
             this.protractor = graphie.protractor([
                 this.props.protractorX,
                 this.props.protractorY,
@@ -154,6 +159,7 @@ const Measurer: any = createReactClass({
         }
 
         if (this.props.showRuler) {
+            // @ts-expect-error - Property 'ruler' does not exist on type 'Graphie'.
             this.ruler = graphie.ruler({
                 center: [
                     (range[0][0] + range[0][1]) / 2,

package/src/widgets/plotter.tsx

@@ -145,6 +145,7 @@ export class Plotter extends React.Component<Props, State> {
         const graphieDiv = ReactDOM.findDOMNode(self.refs.graphieDiv);
         // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
         $(graphieDiv).empty();
+        // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
         const graphie = GraphUtils.createGraphie(graphieDiv);
 
         // TODO(jakesandlund): It's not the react way to hang
@@ -278,6 +279,7 @@ export class Plotter extends React.Component<Props, State> {
             scale: c.scale,
             isMobile: this.props.apiOptions.isMobile,
         });
+        // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
         graphie.addMouseLayer({
             allowScratchpad: true,
             setDrawingAreaAvailable:

package/src/widgets.ts

@@ -54,10 +54,12 @@ export const registerWidgets = (widgets: ReadonlyArray<WidgetExports>) => {
 export const replaceWidget = (name: string, replacementName: string) => {
     const substituteWidget = widgets[replacementName];
 
-    if (!substituteWidget && Log) {
+    // If the replacement widget isn't found, we need to throw. Otherwise after
+    // removing the deprecated widget, we'll have data asking for a widget type
+    // that doesn't exist at all.
+    if (!substituteWidget) {
         const errorMsg = `Failed to replace ${name} with ${replacementName}`;
-        Log.error(errorMsg, Errors.Internal);
-        return;
+        throw new PerseusError(errorMsg, Errors.Internal);
     }
 
     registerWidget(name, substituteWidget);