[ Interactive Graph | Vector Graph ] PR1: Type Definitions and Schema

.changeset/heavy-deers-whisper.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Creation of initial types and stubs for Vector graph

packages/perseus-core/src/data-schema.ts

@@ -1109,7 +1109,8 @@ export type PerseusGraphType =
     | PerseusGraphTypeSegment
     | PerseusGraphTypeSinusoid
     | PerseusGraphTypeExponential
-    | PerseusGraphTypeTangent;
+    | PerseusGraphTypeTangent
+    | PerseusGraphTypeVector;
 
 export type PerseusGraphTypeAngle = {
     type: "angle";
@@ -1263,6 +1264,14 @@ export type PerseusGraphTypeRay = {
     startCoords?: CollinearTuple;
 };
 
+export type PerseusGraphTypeVector = {
+    type: "vector";
+    /** The tail and tip coordinates of the vector: [tail, tip] */
+    coords?: CollinearTuple | null;
+    /** The initial coordinates the graph renders with. */
+    startCoords?: CollinearTuple;
+};
+
 type AbsoluteValueGraphCorrect = {
     type: "absolute-value";
     coords: [Coord, Coord];
@@ -1337,6 +1346,11 @@ type RayGraphCorrect = {
     coords: CollinearTuple;
 };
 
+type VectorGraphCorrect = {
+    type: "vector";
+    coords: CollinearTuple;
+};
+
 export type PerseusGraphCorrectType =
     | AbsoluteValueGraphCorrect
     | AngleGraphCorrect
@@ -1351,7 +1365,8 @@ export type PerseusGraphCorrectType =
     | SegmentGraphCorrect
     | SinusoidGraphCorrect
     | ExponentialGraphCorrect
-    | TangentGraphCorrect;
+    | TangentGraphCorrect
+    | VectorGraphCorrect;
 
 /** Options for the label-image widget. Asks learners to label image parts. */
 export type PerseusLabelImageWidgetOptions = {

packages/perseus-core/src/parse-perseus-json/perseus-parsers/interactive-graph-widget.ts

@@ -137,6 +137,12 @@ const parsePerseusGraphTypeTangent = object({
     startCoords: optional(array(pairOfNumbers)),
 });
 
+const parsePerseusGraphTypeVector = object({
+    type: constant("vector"),
+    coords: optional(nullable(pair(pairOfNumbers, pairOfNumbers))),
+    startCoords: optional(pair(pairOfNumbers, pairOfNumbers)),
+});
+
 export const parsePerseusGraphType = discriminatedUnionOn("type")
     .withBranch("absolute-value", parsePerseusGraphTypeAbsoluteValue)
     .withBranch("angle", parsePerseusGraphTypeAngle)
@@ -151,7 +157,8 @@ export const parsePerseusGraphType = discriminatedUnionOn("type")
     .withBranch("ray", parsePerseusGraphTypeRay)
     .withBranch("segment", parsePerseusGraphTypeSegment)
     .withBranch("sinusoid", parsePerseusGraphTypeSinusoid)
-    .withBranch("tangent", parsePerseusGraphTypeTangent).parser;
+    .withBranch("tangent", parsePerseusGraphTypeTangent)
+    .withBranch("vector", parsePerseusGraphTypeVector).parser;
 
 const parseLockedFigureColor = enumeration(...lockedFigureColorNames);
 

packages/perseus-editor/src/widgets/interactive-graph-editor/interactive-graph-editor.tsx

@@ -551,6 +551,9 @@ function mergeGraphs(
         case "tangent":
             invariant(b.type === "tangent");
             return {...a, ...b};
+        case "vector":
+            invariant(b.type === "vector");
+            return {...a, ...b};
         default:
             throw new UnreachableCaseError(a);
     }

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/util.ts

@@ -247,6 +247,7 @@ export const shouldShowStartCoordsUI = (
         case "segment":
         case "sinusoid":
         case "absolute-value":
+        case "vector":
             return true;
         default:
             throw new UnreachableCaseError(graph);

packages/perseus/src/widget-ai-utils/interactive-graph/interactive-graph-ai-utils.ts

@@ -268,6 +268,11 @@ const getGraphOptionsForProps = (
                 type: props.userInput.type,
                 startCoords: props.userInput.startCoords,
             };
+        case "vector":
+            return {
+                type: props.userInput.type,
+                startCoords: props.userInput.startCoords,
+            };
         default:
             throw new UnreachableCaseError(type);
     }
@@ -334,6 +339,10 @@ const getUserInput = (userInput: PerseusGraphType): UserInput => {
                 coords: userInput.coords,
                 asymptote: userInput.asymptote,
             };
+        case "vector":
+            return {
+                coords: userInput.coords,
+            };
         default:
             throw new UnreachableCaseError(type);
     }

packages/perseus/src/widgets/interactive-graphs/interactive-graph.tsx

@@ -613,6 +613,8 @@ class InteractiveGraph extends React.Component<Props, State> {
                 return InteractiveGraph.getExponentialEquationString(props);
             case "tangent":
                 return InteractiveGraph.getTangentEquationString(props);
+            case "vector":
+                return "";
             default:
                 throw new UnreachableCaseError(type);
         }

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -777,6 +777,8 @@ const renderGraphElements = (props: {
             return renderAbsoluteValueGraph(state, dispatch, i18n);
         case "tangent":
             return renderTangentGraph(state, dispatch, i18n);
+        case "vector":
+            throw new Error("Not implemented");
         default:
             throw new UnreachableCaseError(type);
     }

packages/perseus/src/widgets/interactive-graphs/mafs-state-to-interactive-graph.ts

@@ -110,6 +110,12 @@ export function mafsStateToInteractiveGraph(
                 ...originalGraph,
                 coords: state.coords,
             };
+        case "vector":
+            invariant(originalGraph.type === "vector");
+            return {
+                ...originalGraph,
+                coords: state.coords,
+            };
         default:
             throw new UnreachableCaseError(state);
     }

packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts

@@ -146,6 +146,8 @@ export function initializeGraphState(
                 type: graph.type,
                 coords: getTangentCoords(graph, range, step),
             };
+        case "vector":
+            throw new Error("Not implemented");
         default:
             throw new UnreachableCaseError(graph);
     }

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

@@ -315,6 +315,7 @@ function doMovePointInFigure(
         case "absolute-value":
         case "tangent":
         case "exponential":
+        case "vector":
             throw new Error(
                 `Don't use movePointInFigure for ${state.type} graphs. Use movePoint instead!`,
             );

packages/perseus/src/widgets/interactive-graphs/types.ts

@@ -42,7 +42,8 @@ export type InteractiveGraphState =
     | QuadraticGraphState
     | SinusoidGraphState
     | ExponentialGraphState
-    | TangentGraphState;
+    | TangentGraphState
+    | VectorGraphState;
 
 export type UnlimitedGraphState = PointGraphState | PolygonGraphState;
 
@@ -90,6 +91,11 @@ export interface RayGraphState extends InteractiveGraphStateCommon {
     coords: PairOfPoints;
 }
 
+export interface VectorGraphState extends InteractiveGraphStateCommon {
+    type: "vector";
+    coords: PairOfPoints;
+}
+
 export interface PolygonGraphState extends InteractiveGraphStateCommon {
     type: "polygon";
     showAngles: boolean;