Feature: Analytics #606

jeremywiebe · 2023-07-06T20:06:47Z

This PR represents the set of PRs to implement a new dependency system for Perseus and the first usage: analytics.

I'm creating a PR for landing this feature branch so that I can get the automatic npm snapshots so that I can start integrating into webapp to work out any kinks, before landing all of this code onto main.

## Summary: This PR introduces a new React Context for plumbing dependencies through Perseus. The context uses a new type `PerseusDependenciesV2` (so it doesn't conflict with the original `PerseusDependencies`). This PR also provides a React hook (`useDependencies`) for accessing dependencies. This hook will commonly be used in wrapper component to attach dependencies to the wrapped component (next PR). I also renamed `sendEvent` to `onAnalyticsEvent` as that feels more natural for a callback (especially event callback... a la 'onClick`). This causes a bit more churn but hopefully that's ok as we're early in the analytics journey. Issue: LC-950 ## Test plan: `yarn test` `yarn tsc` Author: jeremywiebe Reviewers: nedredmond, eamspoker, jeremywiebe, handeyeco Required Reviewers: Approved By: nedredmond Checks: ✅ finish_coverage, ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ gerald, ✅ gerald, ⏭ Publish npm snapshot, ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ gerald Pull Request URL: #600

## Summary: The next step in the new dependencies implementation. In this PR we add a new `dependencies` prop to the top-level renderers and provide that dependency object to children in the render tree via the `DependenciesContext`. I've also hooked the `Expression` widget to these new dependencies to prove out the concept. Finally, this PR includes providing the dependencies in Storybook and Cypress as the types required it now. _💡**Note**: This PR is easier to review if you turn on the "Hide whitespace" option in the "Files changed" tab._ <img width="200" alt="image" src="https://github.com/Khan/perseus/assets/77138/feb8f9e0-0e63-49d4-9ba9-b1b1cde5d53a"> Issue: LC-950 ## Test plan: `yarn tsc` `yarn test` Author: jeremywiebe Reviewers: jeremywiebe, nedredmond, eamspoker, kevinbarabash, handeyeco Required Reviewers: Approved By: nedredmond Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ gerald, ✅ finish_coverage, ⏭ Publish npm snapshot, ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ finish_coverage, ✅ gerald, ✅ gerald, ⏭ Publish npm snapshot, ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ gerald Pull Request URL: #601

## Summary: This PR introduces a Story for the ArticleRender. We had one example in a Definition widget story, but now there's a Story for the ArticleRenderer in the Renderers area. <img width="600" alt="image" src="https://github.com/Khan/perseus/assets/77138/1dbd34e7-d2de-491a-9204-d0a61c174a0c"> Issue: "none" ## Test plan: `yarn storybook` and navigate to **Perseus** >> **Renderers** >> **Article Renderer** Author: jeremywiebe Reviewers: nedredmond, SonicScrewdriver, handeyeco, eamspoker Required Reviewers: Approved By: nedredmond, SonicScrewdriver Checks: ✅ finish_coverage, ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ gerald, ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ gerald, ✅ Jest Coverage (ubuntu-latest, 16.x) Pull Request URL: #602

…tions type for prop types (#603) ## Summary: This PR should wrap up the analytics work for now. We remove the (now unused) `analytics` key on the legacy `PerseusDependencies` object/type. It also does a bit of tweaking of the `RenderProps` for the Expression widget by moving it to the top of the file with the other prop types. Issue: LC-950 ## Test plan: `yarn tsc` `yarn test` Author: jeremywiebe Reviewers: nedredmond, SonicScrewdriver, eamspoker, handeyeco Required Reviewers: Approved By: nedredmond, SonicScrewdriver Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ gerald Pull Request URL: #603

changeset-bot · 2023-07-06T20:06:50Z

🦋 Changeset detected

Latest commit: 8ba69c1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@khanacademy/perseus	Major
@khanacademy/math-input	Major
@khanacademy/perseus-core	Minor
@khanacademy/perseus-editor	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

khan-actions-bot · 2023-07-06T20:07:06Z

Gerald

Required Reviewers

@Khan/perseus for changes to .changeset/fluffy-beans-wink.md, .changeset/lazy-coins-dream.md, .changeset/moody-birds-search.md, .changeset/poor-gifts-warn.md, .changeset/sharp-mice-cover.md, .changeset/small-snails-kneel.md, .changeset/thin-islands-accept.md, .storybook/preview.js, testing/item-renderer-with-debug-ui.tsx, testing/multi-item-renderer-with-debug-ui.tsx, testing/render-keypad-with-cypress.tsx, testing/render-question-with-cypress.tsx, testing/server-item-renderer-with-debug-ui.tsx, testing/test-dependencies.tsx, packages/perseus/src/article-renderer.tsx, packages/perseus/src/dependencies.ts, packages/perseus/src/interaction-tracker.ts, packages/perseus/src/item-renderer.tsx, packages/perseus/src/renderer.tsx, packages/perseus/src/server-item-renderer.tsx, packages/perseus/src/types.ts, packages/perseus-core/src/analytics.ts, packages/perseus-core/src/index.ts, packages/perseus-editor/src/multirenderer-editor.tsx, packages/perseus/src/__stories__/article-renderer.stories.tsx, packages/perseus/src/__testdata__/article-renderer.testdata.ts, packages/perseus/src/__tests__/item-renderer.test.tsx, packages/perseus/src/__tests__/server-item-renderer.test.tsx, packages/perseus/src/multi-items/multi-renderer.tsx, packages/perseus/src/widgets/expression.tsx, packages/perseus/src/widgets/graded-group.tsx, packages/perseus/src/widgets/sequence.tsx, packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx, packages/math-input/src/components/keypad/keypad.tsx, packages/math-input/src/components/keypad/mobile-keypad.tsx, packages/perseus/src/multi-items/__tests__/multi-renderer.test.tsx, packages/perseus/src/widgets/__stories__/definition.stories.tsx, packages/perseus/src/widgets/__stories__/expression.stories.tsx, packages/perseus/src/widgets/__tests__/expression.test.tsx, packages/perseus/src/widgets/__tests__/renderQuestion.tsx, packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx, packages/math-input/src/components/keypad/__tests__/keypad.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2023-07-06T20:12:09Z

Size Change: +586 B (0%)

Total Size: 846 kB

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	268 kB	+104 B (0%)
`packages/perseus/dist/es/index.js`	396 kB	+482 B (0%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	38 kB
`packages/kmath/dist/es/index.js`	4.12 kB
`packages/math-input/dist/es/index.js`	102 kB
`packages/perseus-core/dist/es/index.js`	55 B
`packages/perseus-error/dist/es/index.js`	705 B
`packages/perseus-linter/dist/es/index.js`	21.2 kB
`packages/pure-markdown/dist/es/index.js`	3.64 kB
`packages/simple-markdown/dist/es/index.js`	12.6 kB

_{compressed-size-action}

nedredmond

I've already approved the pieces. ✅ for the whole!

github-actions · 2023-07-06T20:15:54Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (9044495) and published it to npm. You
can install it using the tag PR606.

Example:

yarn add @khanacademy/perseus@PR606

coveralls · 2023-07-06T20:18:26Z

coverage: 69.323% (-0.05%) from 69.368% when pulling 8ba69c1 on feature/analytics into 5352d51 on main.

…es for it (#625) ## Summary: I've been working to get a proper type for the `trackInteraction` `APIOption`. I've migrated the `InteractionTracker` to be generic so that it only accepts extra arguments defined by the `WidgetProps<T,T,T>` (this means each widget can call `trackInteraction` with args it defines). In the `APIOptions` the `trackInteraction` callback now defines a union of all extra args that all widgets provide. Issue: "none" ## Test plan: Build, build flow types, and then test it in webapp. Author: jeremywiebe Reviewers: jeremywiebe, nedredmond, handeyeco, kevinbarabash, SonicScrewdriver Required Reviewers: Approved By: handeyeco Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ gerald Pull Request URL: #625

## Summary: As I was integrating Perseus analytics in webapp, it became really difficult to work out how to provide the virtualKeypadVersion consistently when Perseus wasn't always providing it. After some thought, I figured out that we can pretty-reliably derive the keypad version. Given that we are actively moving to coalesce on a single keypad, I hope this is an acceptable approach for the short term. When we get to one keypad, we can delete this `virtualKeypadVersion` from the analytics anyways. Issue: LC-950 ## Test plan: ✅ `yarn typecheck` ✅ `yarn test` Author: jeremywiebe Reviewers: nedredmond, SonicScrewdriver, handeyeco Required Reviewers: Approved By: nedredmond Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ gerald Pull Request URL: #684

jeremywiebe added 4 commits July 6, 2023 09:55

khan-actions-bot requested a review from a team July 6, 2023 20:07

nedredmond approved these changes Jul 6, 2023

View reviewed changes

jeremywiebe added 2 commits July 18, 2023 11:40

Merge branch 'main' into feature/analytics

23ebcb6

Merge branch 'main' into feature/analytics

7ca6c6f

jeremywiebe force-pushed the feature/analytics branch from 7bfa2f9 to 3dbb8f8 Compare July 31, 2023 18:23

Merge branch 'main' into feature/analytics

2e1e3ce

jeremywiebe force-pushed the feature/analytics branch from 3dbb8f8 to 2e1e3ce Compare July 31, 2023 18:26

jeremywiebe added 7 commits July 31, 2023 11:28

Bump

8559ded

Merge branch 'main' into feature/analytics

28bcc17

Merge branch 'main' into feature/analytics

8735b91

Merge branch 'main' into feature/analytics

4bff8de

Merge branch 'main' into feature/analytics

8ba69c1

jeremywiebe merged commit d51157b into main Aug 21, 2023
13 checks passed

jeremywiebe deleted the feature/analytics branch August 21, 2023 23:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Analytics #606

Feature: Analytics #606

jeremywiebe commented Jul 6, 2023

changeset-bot bot commented Jul 6, 2023 •

edited

Loading

khan-actions-bot commented Jul 6, 2023 •

edited

Loading

github-actions bot commented Jul 6, 2023 •

edited

Loading

nedredmond left a comment

github-actions bot commented Jul 6, 2023 •

edited

Loading

coveralls commented Jul 6, 2023 •

edited

Loading

Feature: Analytics #606

Feature: Analytics #606

Conversation

jeremywiebe commented Jul 6, 2023

changeset-bot bot commented Jul 6, 2023 • edited Loading

🦋 Changeset detected

khan-actions-bot commented Jul 6, 2023 • edited Loading

Gerald

github-actions bot commented Jul 6, 2023 • edited Loading

nedredmond left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 6, 2023 • edited Loading

npm Snapshot: Published

coveralls commented Jul 6, 2023 • edited Loading

changeset-bot bot commented Jul 6, 2023 •

edited

Loading

khan-actions-bot commented Jul 6, 2023 •

edited

Loading

github-actions bot commented Jul 6, 2023 •

edited

Loading

github-actions bot commented Jul 6, 2023 •

edited

Loading

coveralls commented Jul 6, 2023 •

edited

Loading