Sticky summary table rows

[sven-oly]

These are not opaque but do the basic job of maintaining visibility of component type while scrolling horizontally.

[gemini-code-assist]

Summary of Changes

Hello @sven-oly, 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 user experience of the summary table by implementing sticky positioning for its first column. This ensures that the "Test Type" header and the component names remain visible when users scroll horizontally, making it easier to identify data without losing context. The changes involve applying a new sticky CSS class to relevant table elements and defining the necessary styles for this behavior.

Highlights

• Sticky Table Columns: Implemented position: sticky for the first column of the summary table, ensuring the "Test Type" header and component names remain visible during horizontal scrolling.
• CSS Styling for Sticky Elements: Added new CSS rules to verifier/summary_template.html to define the appearance and behavior of sticky table cells, including background, shadows, and subtle gradient effects for visual separation.
• JavaScript Updates for Class Application: Modified JavaScript logic to dynamically apply the sticky class to the appropriate <th> and <td> elements in the generated table.
• Minor Code Refinements: Updated variable declarations to use const for improved immutability and reordered an appendChild call for better code flow.

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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

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 issue 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 sticky table rows to improve visibility when scrolling horizontally. The changes are functional, but there are several areas for improvement. In the JavaScript, I've suggested using classList for better class manipulation and refactoring a brittle piece of code to be more robust. In the CSS, I've pointed out several issues including invalid comments, redundant rules, and undefined CSS variables that would cause rendering bugs. The suggested changes aim to fix these issues and improve the overall code quality and maintainability.

[gemini-code-assist]

There are a few issues with the new CSS for sticky elements:

1. Invalid Comment: An HTML comment (<!-- ... -->) is used inside a <style> block at line 386. This is invalid CSS syntax and should be a CSS comment (/* ... */).
2. Redundant rules: The td.sticky rule is almost entirely overridden by the subsequent th.sticky, td.sticky rule. This is confusing and should be consolidated.
3. Undefined CSS variables: The variables --stickyBackground and --borderColor are used but not defined. This will cause rendering issues, such as a transparent background and missing borders.

I suggest refactoring these rules for clarity and correctness, providing fallback values.

/* https://codepen.io/mikegolus/pen/jOZzRzw */
th.sticky,
td.sticky {
  position: sticky;
  left: 0;
  background-color: var(--stickyBackground, white);
}

td.sticky {
  box-shadow: 5px 5px white, -5px 5px white, -5px -5px white, 5px -5px white;
}

th.sticky::after,
td.sticky::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  bottom: -1px;
  width: 5px;
  border-left: 1px solid var(--borderColor, #ddd);
  background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);
}

th.sticky::before,
td.sticky::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  bottom: -1px;
  width: 5px;
  border-right: 1px solid var(--borderColor, #ddd);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
}

[gemini-code-assist]

For adding classes to an element, it's generally better to use element.classList.add() instead of element.className += .... It's more explicit and avoids potential issues with extra spaces.

          th.classList.add('sticky');

[gemini-code-assist]

Using classList.add() is preferred for adding classes. Also, there are unnecessary extra spaces before 'sticky'.

              td.classList.add('sticky');

[gemini-code-assist]

This code is a bit brittle as it assumes a specific div nesting structure generated by the charting library. Using querySelectorAll would be more robust and would continue to work even if the library changes its internal DOM structure.

                      td.querySelectorAll('div').forEach(div => div.style.position = '');