feat: add inactiveCellStrategy to Grid to support hiding inactive cells

[MinCrohn]

Summary

This PR introduces the inactiveCellStrategy option to the Grid component, allowing users to choose how inactive cells (0 or empty values) are handled. This provides more flexibility between memory optimization and UI responsiveness.

✨ Key Features

Previously, items in the grid were automatically destroyed when their cell value became 0. Now, users can toggle between two strategies:

• destroy (Default): Completely removes the item from the grid.

  • Best for: Large-scale grids where minimizing memory usage and the number of rendered elements is critical.

• hide: Keeps the item in the grid but masks it from view.

  • Best for: Grids with frequent state changes (e.g., toggle grids) to ensure smooth re-activation without the overhead of recreating items.

🛠 Usage Example

{
  type: 'grid',
  cells: [
    [1, 0, 1],
    [0, 1, 0]
  ],
  // Set strategy to 'hide' to keep items in memory when inactive
  inactiveCellStrategy: 'hide', 
  item: {
    size: { width: 50, height: 50 },
    // ... item configurations
  }
}

🔍 Changes

• Added inactiveCellStrategy property to the Grid component (Default: 'destroy').
• Updated TypeScript definitions in data.d.ts.
• Enhanced internal logic to reflect visibility changes in real-time when the strategy or cell value updates.

💡 Why is this needed?

In "grid-scale" UIs where users frequently toggle statuses, destroying and recreating DOM/canvas elements can cause performance stutters. The hide strategy allows for near-instant state transitions by keeping the components initialized.

[gemini-code-assist]

Summary of Changes

Hello @MinCrohn, 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 enhances the Grid component by introducing a configurable inactiveCellStrategy. This new option provides developers with greater control over how inactive cells are managed, offering a choice between optimizing for memory usage by destroying elements or prioritizing UI responsiveness by simply hiding them. This change is particularly beneficial for dynamic UIs where grid items frequently change state, preventing performance stutters caused by constant element re-creation.

Highlights

• New inactiveCellStrategy Option: Introduced inactiveCellStrategy to the Grid component, allowing users to define how inactive cells (those with 0 or empty values) are handled.
• Strategy Options: Two strategies are available: destroy (default), which completely removes inactive items from the grid, and hide, which keeps them in the grid but masks them from view.
• Performance and Memory Trade-offs: The destroy strategy is optimized for large grids to minimize memory usage, while hide is designed for grids with frequent state changes to ensure smoother re-activation and better UI responsiveness by avoiding item re-creation overhead.
• TypeScript and Schema Updates: Updated TypeScript definitions (data.d.ts) and the element schema (element-schema.js) to include the new inactiveCellStrategy property.
• Real-time Visibility Logic: Enhanced the internal logic within the Cellsable mixin to reflect visibility changes in real-time based on the chosen strategy and cell value updates, applying a show property to grid items.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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 introduces a inactiveCellStrategy to the Grid component, which is a great feature for optimizing performance in dynamic grids. The implementation is mostly solid, adding the new 'hide' strategy while keeping 'destroy' as the default. The changes in the data schema and the core logic in Cellsable.js correctly reflect this new option. I have one suggestion regarding a subtle change in behavior for how item labels are generated from cell values, which might be an unintended side effect.