[Analytics] Using the actual widgetId on our widget rendering events.

.changeset/late-windows-joke.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Analytics] Updating rendering analytics events to use accurate widgetIds

packages/perseus/src/widgets/categorizer/categorizer.test.ts

@@ -173,7 +173,7 @@ describe("categorizer widget", () => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "categorizer",
-                widgetId: "categorizer",
+                widgetId: "categorizer 1",
             },
         });
     });

packages/perseus/src/widgets/categorizer/categorizer.tsx

@@ -70,7 +70,7 @@ export class Categorizer
             payload: {
                 widgetSubType: "null",
                 widgetType: "categorizer",
-                widgetId: "categorizer",
+                widgetId: this.props.widgetId,
             },
         });
     }

packages/perseus/src/widgets/definition/definition.test.ts

@@ -72,7 +72,7 @@ describe("Definition widget", () => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "definition",
-                widgetId: "definition",
+                widgetId: "definition 1",
             },
         });
     });

packages/perseus/src/widgets/definition/definition.tsx

@@ -50,7 +50,7 @@ class Definition extends React.Component<DefinitionProps> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "definition",
-                widgetId: "definition",
+                widgetId: this.props.widgetId,
             },
         });
     }

packages/perseus/src/widgets/dropdown/dropdown.test.ts

@@ -133,7 +133,7 @@ describe("Dropdown widget", () => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "dropdown",
-                widgetId: "dropdown",
+                widgetId: "dropdown 1",
             },
         });
     });

packages/perseus/src/widgets/dropdown/dropdown.tsx

@@ -53,7 +53,7 @@ class Dropdown extends React.Component<Props> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "dropdown",
-                widgetId: "dropdown",
+                widgetId: this.props.widgetId,
             },
         });
     }

packages/perseus/src/widgets/explanation/explanation.test.ts

@@ -113,7 +113,7 @@ describe("Explanation", function () {
             payload: {
                 widgetSubType: "null",
                 widgetType: "explanation",
-                widgetId: "explanation",
+                widgetId: "explanation 1",
             },
         });
     });

packages/perseus/src/widgets/explanation/explanation.tsx

@@ -73,7 +73,7 @@ class Explanation extends React.Component<Props, State> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "explanation",
-                widgetId: "explanation",
+                widgetId: this.props.widgetId,
             },
         });
     }

packages/perseus/src/widgets/expression/expression.test.tsx

@@ -477,7 +477,7 @@ describe("Expression Widget", function () {
                 payload: {
                     widgetSubType: "null",
                     widgetType: "expression",
-                    widgetId: "expression",
+                    widgetId: "expression 1",
                 },
             });
         });

packages/perseus/src/widgets/expression/expression.tsx

@@ -108,7 +108,7 @@ export class Expression extends React.Component<Props> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "expression",
-                widgetId: "expression",
+                widgetId: this.props.widgetId,
             },
         });
 

packages/perseus/src/widgets/image/image.test.ts

@@ -144,7 +144,7 @@ describe.each([[true], [false]])("image widget - isMobile(%j)", (isMobile) => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "image",
-                widgetId: "image",
+                widgetId: "image 1",
             },
         });
     });

packages/perseus/src/widgets/image/image.tsx

@@ -29,6 +29,7 @@ export const ImageComponent = (props: ImageWidgetProps) => {
         range,
         title,
         trackInteraction,
+        widgetId,
     } = props;
     const context = React.useContext(PerseusI18nContext);
     const imageUpgradeFF = isFeatureOn({apiOptions}, "image-widget-upgrade");
@@ -47,7 +48,7 @@ export const ImageComponent = (props: ImageWidgetProps) => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "image",
-                widgetId: "image",
+                widgetId: widgetId,
             },
         });
     });

packages/perseus/src/widgets/input-number/input-number.test.ts

@@ -107,7 +107,7 @@ describe("input-number", function () {
                 payload: {
                     widgetSubType: "null",
                     widgetType: "input-number",
-                    widgetId: "input-number",
+                    widgetId: "input-number 1",
                 },
             });
         });

packages/perseus/src/widgets/input-number/input-number.tsx

@@ -103,7 +103,7 @@ class InputNumber extends React.Component<Props> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "input-number",
-                widgetId: "input-number",
+                widgetId: this.props.widgetId,
             },
         });
     }

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

@@ -346,6 +346,7 @@ class InteractiveGraph extends React.Component<Props, State> {
                 box={box}
                 showTooltips={!!this.props.showTooltips}
                 readOnly={this.props.apiOptions?.readOnly}
+                widgetId={this.props.widgetId}
             />
         );
     }

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

@@ -155,7 +155,7 @@ describe("MafsGraph", () => {
             payload: {
                 widgetSubType: "segment",
                 widgetType: "interactive-graph",
-                widgetId: "interactive-graph",
+                widgetId: "test-widget-id",
             },
         });
     });

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

@@ -90,6 +90,7 @@ export type MafsGraphProps = {
     dispatch: React.Dispatch<InteractiveGraphAction>;
     readOnly: boolean;
     static: boolean | null | undefined;
+    widgetId: string;
 };
 
 export const MafsGraph = (props: MafsGraphProps) => {
@@ -101,6 +102,7 @@ export const MafsGraph = (props: MafsGraphProps) => {
         readOnly,
         fullGraphAriaLabel,
         fullGraphAriaDescription,
+        widgetId,
     } = props;
     const {type} = state;
     const [width, height] = props.box;
@@ -143,7 +145,7 @@ export const MafsGraph = (props: MafsGraphProps) => {
             payload: {
                 widgetSubType: type,
                 widgetType: "interactive-graph",
-                widgetId: "interactive-graph",
+                widgetId: widgetId,
             },
         });
     });

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

@@ -37,6 +37,7 @@ function getBaseStatefulMafsGraphProps(): StatefulMafsGraphProps {
         correct: {type: "segment"},
         static: false,
         lockedFigures: [],
+        widgetId: "test-widget-id",
     };
 }
 

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

@@ -45,6 +45,7 @@ export type StatefulMafsGraphProps = {
     readOnly: boolean;
     static: InteractiveGraphProps["static"];
     showAxisArrows: InteractiveGraphProps["showAxisArrows"];
+    widgetId: string;
 };
 
 export type StatefulMafsGraphType = {

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

@@ -180,6 +180,7 @@ export function getBaseMafsGraphPropsForTests(): MafsGraphProps {
                 [-10, 10],
             ],
         },
+        widgetId: "test-widget-id",
     };
 }
 // Calculate the difference between the min and max values of a range

packages/perseus/src/widgets/label-image/__tests__/label-image.test.ts

@@ -840,7 +840,7 @@ describe("LabelImage", function () {
                 payload: {
                     widgetSubType: "null",
                     widgetType: "label-image",
-                    widgetId: "label-image",
+                    widgetId: "label-image 1",
                 },
             });
         });

packages/perseus/src/widgets/label-image/label-image.tsx

@@ -357,7 +357,7 @@ export class LabelImage
             payload: {
                 widgetSubType: "null",
                 widgetType: "label-image",
-                widgetId: "label-image",
+                widgetId: this.props.widgetId,
             },
         });
         this._mounted = true;

packages/perseus/src/widgets/matcher/matcher.test.tsx

@@ -96,7 +96,7 @@ describe("matcher widget", () => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "matcher",
-                widgetId: "matcher",
+                widgetId: "matcher 1",
             },
         });
     });

packages/perseus/src/widgets/matcher/matcher.tsx

@@ -78,7 +78,7 @@ export class Matcher extends React.Component<Props, State> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "matcher",
-                widgetId: "matcher",
+                widgetId: this.props.widgetId,
             },
         });
     }

packages/perseus/src/widgets/number-line/number-line.test.ts

@@ -205,7 +205,7 @@ describe("number-line widget", () => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "number-line",
-                widgetId: "number-line",
+                widgetId: "number-line 1",
             },
         });
     });

packages/perseus/src/widgets/number-line/number-line.tsx

@@ -254,7 +254,7 @@ class NumberLine extends React.Component<Props, State> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "number-line",
-                widgetId: "number-line",
+                widgetId: this.props.widgetId,
             },
         });
     }

packages/perseus/src/widgets/numeric-input/numeric-input.test.ts

@@ -121,7 +121,7 @@ describe("numeric-input widget", () => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "numeric-input",
-                widgetId: "numeric-input",
+                widgetId: "numeric-input 1",
             },
         });
     });

packages/perseus/src/widgets/numeric-input/numeric-input.tsx

@@ -37,7 +37,7 @@ export const NumericInputComponent = forwardRef<Focusable, NumericInputProps>(
                 payload: {
                     widgetSubType: "null",
                     widgetType: "numeric-input",
-                    widgetId: "numeric-input",
+                    widgetId: props.widgetId,
                 },
             });
         });

packages/perseus/src/widgets/radio/__tests__/multiple-choice.test.ts

@@ -496,7 +496,7 @@ describe("Multiple Choice Widget", () => {
                 payload: {
                     widgetSubType: "single-select",
                     widgetType: "radio",
-                    widgetId: "radio",
+                    widgetId: "radio 1",
                 },
             });
         });
@@ -819,7 +819,7 @@ describe("Multiple Choice Widget", () => {
                 payload: {
                     widgetSubType: "multiple-select",
                     widgetType: "radio",
-                    widgetId: "radio",
+                    widgetId: "radio 1",
                 },
             });
         });

packages/perseus/src/widgets/radio/multiple-choice-widget.new.tsx

@@ -97,6 +97,7 @@ const MultipleChoiceWidget = forwardRef<Widget, Props>(
             trackInteraction,
             findWidgets,
             reviewMode,
+            widgetId,
         } = props;
 
         const {strings} = usePerseusI18n();
@@ -110,7 +111,7 @@ const MultipleChoiceWidget = forwardRef<Widget, Props>(
                         ? "multiple-select"
                         : "single-select",
                     widgetType: "radio",
-                    widgetId: "radio",
+                    widgetId: widgetId,
                 },
             });
         });

packages/perseus/src/widgets/sorter/sorter.tsx

@@ -50,7 +50,7 @@ class Sorter extends React.Component<Props> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "sorter",
-                widgetId: "sorter",
+                widgetId: this.props.widgetId,
             },
         });
     }

packages/perseus/src/widgets/video/video.test.ts

@@ -72,7 +72,7 @@ describe("video widget", () => {
             payload: {
                 widgetSubType: "null",
                 widgetType: "video",
-                widgetId: "video",
+                widgetId: "video 1",
             },
         });
     });

packages/perseus/src/widgets/video/video.tsx

@@ -54,7 +54,7 @@ class Video extends React.Component<Props> implements Widget {
             payload: {
                 widgetSubType: "null",
                 widgetType: "video",
-                widgetId: "video",
+                widgetId: this.props.widgetId,
             },
         });
     }