Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New event logging to Interactive Graph. #1719

Merged
merged 5 commits into from
Oct 2, 2024

Conversation

catandthemachines
Copy link
Member

Summary:

Adding new analytic event to interactive graph when it renders while adding details on what type of graph is rendered.

Issue: LEMS-2324

Test plan:

@catandthemachines catandthemachines self-assigned this Oct 2, 2024
@khan-actions-bot
Copy link
Contributor

khan-actions-bot commented Oct 2, 2024

Gerald

Required Reviewers
  • @Khan/perseus for changes to .changeset/grumpy-dolls-shave.md, packages/perseus-core/src/analytics.ts, packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

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

Copy link
Contributor

github-actions bot commented Oct 2, 2024

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1719

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1719

Copy link
Contributor

github-actions bot commented Oct 2, 2024

Size Change: +79 B (+0.01%)

Total Size: 865 kB

Filename Size Change
packages/perseus/dist/es/index.js 418 kB +79 B (+0.02%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 38.3 kB
packages/keypad-context/dist/es/index.js 760 B
packages/kmath/dist/es/index.js 4.27 kB
packages/math-input/dist/es/index.js 78 kB
packages/math-input/dist/es/strings.js 1.79 kB
packages/perseus-core/dist/es/index.js 1.48 kB
packages/perseus-editor/dist/es/index.js 280 kB
packages/perseus-linter/dist/es/index.js 22.2 kB
packages/perseus/dist/es/strings.js 3.4 kB
packages/pure-markdown/dist/es/index.js 3.66 kB
packages/simple-markdown/dist/es/index.js 12.4 kB

compressed-size-action

Copy link
Collaborator

@jeremywiebe jeremywiebe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good, but I'd recommend moving the mapping of interactive graph type into webapp if my reading of this is correct (see comment). :)

const [width, height] = props.box;
const tickStep = props.step as vec.Vector2;

const uniqueId = React.useId();
const descriptionId = `interactive-graph-description-${uniqueId}`;
const graphRef = React.useRef<HTMLElement>(null);
const dependencies = useDependencies();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A slight stylistic improvement that might make it easier for future readers to see what parts of dependencies are being used:

Suggested change
const dependencies = useDependencies();
const {analytics} = useDependencies();

Comment on lines 122 to 124
payload: {
type: type,
},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: We can shorten this shorthand property naming:

Suggested change
payload: {
type: type,
},
payload: { type },

Comment on lines 17 to 42
export type InteractiveGraphName =
| "angle"
| "segment"
| "linear-system"
| "linear"
| "ray"
| "none"
| "polygon"
| "point"
| "circle"
| "quadratic"
| "sinusoid";

export type InteractiveGraphEnum =
| "ANGLE"
| "SEGMENT"
| "LINEAR_SYSTEM"
| "LINEAR"
| "RAY"
| "NONE"
| "POLYGON"
| "POINT"
| "CIRCLE"
| "QUADRATIC"
| "SINUSOID";

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: I'm guessing the InteracativeGraphEnum matches the enum values for the event in CEDAR? In that case, I'd recommend that this mapping live in webapp's adapter rather than here. Otherwise we're pulling CEDAR concepts into the Perseus codebase. I think it's completely fine to use the interactive-graph's graph type in the event and then map it to the CEDAR value in webapp.

Copy link
Member

@benchristel benchristel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@catandthemachines catandthemachines merged commit eb733b3 into main Oct 2, 2024
9 checks passed
@catandthemachines catandthemachines deleted the catjohnson/interactive-graph-analytics branch October 2, 2024 23:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants