feat(telemetry): add rich tooltip and improve accessibility by igor-holt · Pull Request #16 · igor-holt/thrml

igor-holt · 2026-02-15T01:27:58Z

This PR enhances the Telemetry Timeline chart by adding a custom tooltip that displays not just the probability, but also the event name and the "subjective" description from the telemetry data. This adds a layer of "delight" and context to the visualization. Additionally, it improves accessibility by adding scope="col" to the table headers.

Changes:

data/telemetry.ts: exposed event and subjective in getProbabilityData.
components/TelemetryTimeline.tsx: implemented CustomTooltip and updated LineChart.

Verification:

Build passed (pnpm build).
Frontend verified with Playwright script and screenshot (attached in verification step).

PR created automatically by Jules for task 17694988562313522725 started by @igor-holt

…otes - Update `getProbabilityData` in `data/telemetry.ts` to include `event` and `subjective` fields. - Create `CustomTooltip` component in `components/TelemetryTimeline.tsx` to display rich data. - Update `TelemetryTimeline` to use `CustomTooltip`. - Fix table header accessibility by adding `scope="col"`. - Use `TooltipContentProps` for correct typing with Recharts. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

google-labs-jules · 2026-02-15T01:28:00Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

gemini-code-assist · 2026-02-15T01:28:11Z

Summary of Changes

Hello @igor-holt, 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 significantly improves the user experience and accessibility of the Telemetry Timeline chart. By introducing a custom tooltip, users can now gain deeper insights into telemetry events directly from the visualization, seeing not just probabilities but also event details and subjective descriptions. Concurrently, accessibility for tabular data has been enhanced, ensuring a more inclusive experience for all users.

Highlights

Enhanced Telemetry Timeline Tooltip: Implemented a custom tooltip for the Telemetry Timeline chart that now displays the event name and a 'subjective' description in addition to the probability, providing richer context.
Improved Accessibility: Added scope="col" attributes to table headers within the Telemetry Timeline component to enhance accessibility for screen readers.
Data Exposure: Modified the getProbabilityData function to expose event and subjective fields, making this data available for use in the new custom tooltip.

Changelog

components/TelemetryTimeline.tsx
- Added TooltipContentProps import from 'recharts'.
- Created a new CustomTooltip functional component to display detailed telemetry data (event, probability, subjective description).
- Replaced the default Tooltip with the CustomTooltip in the LineChart component.
- Added activeDot={{ r: 6 }} to the Line component for better visual feedback on hover.
- Applied scope="col" to all <th> elements in the telemetry data table for improved accessibility.
data/telemetry.ts
- Modified getProbabilityData to include event and subjective properties in the returned data objects, making them available for the chart's tooltip.
pnpm-lock.yaml
- Added a new pnpm lockfile, reflecting updated or newly installed dependencies.

Activity

The pull request was automatically created by Jules for task 17694988562313522725, initiated by @igor-holt.
The build passed successfully after the changes (pnpm build).
Frontend verification was performed using a Playwright script, and a screenshot was provided.

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.

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

The pull request enhances the Telemetry Timeline with a detailed custom tooltip and improves table accessibility. While the functional additions are valuable, the implementation relies heavily on inline styles and hardcoded colors, which affects maintainability. There are also inconsistencies in data formatting (dates and probabilities) and a potential edge case in the tooltip's conditional logic that should be addressed to ensure a robust and polished user experience.

gemini-code-assist · 2026-02-15T01:29:21Z

components/TelemetryTimeline.tsx

 } from 'recharts';

+const CustomTooltip = ({ active, payload, label }: TooltipContentProps<number, string>) => {
+  if (active && payload && payload.length && label) {


The check && label will evaluate to false if the label is 0. Since the label represents a timestamp (number), it is safer to check for null or undefined explicitly to avoid hiding the tooltip for data points at the start of the Unix epoch.

Suggested change

if (active && payload && payload.length && label) {

if (active && payload && payload.length && label !== undefined && label !== null) {

gemini-code-assist · 2026-02-15T01:29:21Z

components/TelemetryTimeline.tsx

+      <div style={{
+        backgroundColor: '#fff',
+        border: '1px solid #e0e0e0',
+        borderRadius: '8px',
+        padding: '12px',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        maxWidth: '300px'
+      }}>


The CustomTooltip component uses extensive inline styles. This makes the code harder to read and maintain, and prevents the use of a centralized theme. Consider moving these styles to a CSS module or a styled-component.

gemini-code-assist · 2026-02-15T01:29:21Z

components/TelemetryTimeline.tsx

+        maxWidth: '300px'
+      }}>
+        <p style={{ margin: 0, fontSize: '0.9rem', color: '#666' }}>
+          {new Date(label).toUTCString()}


The date in the tooltip is formatted using toUTCString(), while the X-axis uses toLocaleDateString(). Using different time zones or formats can be confusing for users. Consider using a consistent formatting method, such as toLocaleString().

Suggested change

{new Date(label).toUTCString()}

{new Date(label).toLocaleString()}

gemini-code-assist · 2026-02-15T01:29:21Z

components/TelemetryTimeline.tsx

+          {data.event}
+        </p>
+        <p style={{ margin: 0, fontSize: '0.9rem' }}>
+          Probability: <span style={{ fontWeight: 'bold' }}>{data.probability}</span>


The probability value is currently displayed as a raw decimal. Formatting it as a percentage (e.g., 61%) would improve readability and provide a better user experience.

Suggested change

Probability: <span style={{ fontWeight: 'bold' }}>{data.probability}</span>

Probability: <span style={{ fontWeight: 'bold' }}>{(data.probability * 100).toFixed(0)}%</span>

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot AI review requested due to automatic review settings February 15, 2026 01:27

Copilot started reviewing on behalf of igor-holt February 15, 2026 01:28 View session

gemini-code-assist bot reviewed Feb 15, 2026

View reviewed changes

Copilot AI reviewed Feb 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(telemetry): add rich tooltip and improve accessibility#16

feat(telemetry): add rich tooltip and improve accessibility#16
igor-holt wants to merge 1 commit intomainfrom
feat/telemetry-rich-tooltip-17694988562313522725

igor-holt commented Feb 15, 2026

Uh oh!

google-labs-jules bot commented Feb 15, 2026

Uh oh!

gemini-code-assist bot commented Feb 15, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Feb 15, 2026

Uh oh!

gemini-code-assist bot Feb 15, 2026

Uh oh!

gemini-code-assist bot Feb 15, 2026

Uh oh!

gemini-code-assist bot Feb 15, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	if (active && payload && payload.length && label) {
	if (active && payload && payload.length && label !== undefined && label !== null) {

	{new Date(label).toUTCString()}
	{new Date(label).toLocaleString()}

	Probability: <span style={{ fontWeight: 'bold' }}>{data.probability}</span>
	Probability: <span style={{ fontWeight: 'bold' }}>{(data.probability * 100).toFixed(0)}%</span>

Conversation

igor-holt commented Feb 15, 2026

Uh oh!

google-labs-jules bot commented Feb 15, 2026

Uh oh!

gemini-code-assist bot commented Feb 15, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants