fix(examples): use graph.dispose() to clean up Keyboard plugin when component unmounted

[GaoFuhong]

📝 Description

🖼️ Screenshot

Before	After

💡 Motivation and Context

🧩 Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

🔍 Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[gemini-code-assist]

Summary of Changes

Hello @GaoFuhong, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a bug in an example component by improving event handling for keyboard shortcuts and ensuring proper resource management. It prevents unintended event propagation for copy/paste operations and introduces a cleanup mechanism to release graph resources when the component is no longer active, enhancing stability and preventing potential memory issues.

Highlights

• Event Propagation: Added e.stopPropagation() to the meta+c and meta+v keyboard shortcuts to prevent events from bubbling up, ensuring proper handling within the component.
• Resource Cleanup: Implemented a cleanup function within the useEffect hook to properly dispose of the graph instance and nullify selectionRef and clipboardRef when the component unmounts, preventing memory leaks.

Changelog

• examples/src/pages/plugins/clipboard/index.tsx
  • Added e.stopPropagation() to the meta+c keyboard binding.
  • Added e.stopPropagation() to the meta+v keyboard binding.
  • Introduced a cleanup function in the useEffect hook to set selectionRef.current and clipboardRef.current to null.
  • Added graph.dispose() call within the useEffect cleanup function.

Activity

• No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request correctly addresses a resource leak in the clipboard example by calling graph.dispose() when the component unmounts. This ensures that the graph instance and its associated plugins, including event listeners, are properly cleaned up, preventing memory leaks and visual artifacts from persisting after navigation. The addition of e.stopPropagation() in the keyboard event handlers is also a good defensive measure to prevent unintended side effects from event bubbling.

While reviewing the related code, I noticed a potential memory leak in the KeyboardImpl plugin (src/plugin/keyboard/keyboard.ts). The event listeners for 'cell:mouseup' and 'blank:mouseup' attached to the graph instance in the constructor are not removed in the dispose method. This could cause KeyboardImpl instances to be retained in memory. This is outside the scope of the current changes but would be a valuable fix for a future pull request.