🎨 Palette: Improve Telemetry Table and Chart UX by igor-holt · Pull Request #18 · igor-holt/thrml

igor-holt · 2026-02-17T01:21:41Z

Improved the Telemetry Timeline table by formatting timestamps and probability values, and added a custom tooltip to the chart to show event names.

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

- **What:** Formatted timestamps and probabilities in the telemetry table. Added a custom tooltip to the chart showing event details. - **Why:** To make the data easier to read and correlate events with chart spikes. - **Accessibility:** Added `scope="col"` to table headers for screen readers. - **Before/After:** Timestamps are now localized, probabilities are %, and chart tooltip shows event names. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

google-labs-jules · 2026-02-17T01:21:42Z

👋 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-17T01:21:54Z

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 enhances the user experience of the Telemetry Timeline by improving data presentation. It introduces clearer formatting for timestamps and probability values within the telemetry table and provides more informative tooltips on the chart, making it easier for users to interpret event data and predictions.

Highlights

Telemetry Table Formatting: Timestamps and probability values in the Telemetry Timeline table are now formatted for improved readability.
Chart Tooltip Enhancement: A custom tooltip has been added to the telemetry chart, displaying event names, formatted timestamps, and probability percentages.

Changelog

components/TelemetryTimeline.tsx
- Implemented a custom tooltip for the chart to display event, time, and probability.
- Formatted the 'UTC' column in the telemetry table to show local date and time.
- Formatted the 'Prediction (p)' column in the telemetry table to display as a percentage.
- Added scope="col" attribute to table headers for better accessibility.
- Applied monospace font styling to the 'Log ID' column in the table.
data/telemetry.ts
- Modified getProbabilityData to include the event property in the returned data objects.

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

This pull request successfully improves the user experience for the telemetry timeline by formatting timestamps and probabilities, and by adding a custom tooltip to the chart. The changes are well-implemented and achieve the desired outcome. I have one suggestion regarding the use of inline styles in the new custom tooltip to improve long-term maintainability.

gemini-code-assist · 2026-02-17T01:22:50Z

components/TelemetryTimeline.tsx

+                content={({ active, payload, label }) => {
+                  if (active && payload && payload.length) {
+                    return (
+                      <div style={{ backgroundColor: '#fff', padding: '10px', border: '1px solid #e0e0e0', borderRadius: '4px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
+                        <p style={{ margin: 0, fontWeight: 'bold', fontSize: '0.9rem' }}>{label ? new Date(label).toLocaleString() : ''}</p>
+                        <p style={{ margin: '4px 0 0', color: '#666', fontSize: '0.85rem' }}>{`Event: ${payload[0].payload.event}`}</p>
+                        <p style={{ margin: 0, color: '#8884d8', fontSize: '0.85rem' }}>{`Probability: ${(Number(payload[0].value) * 100).toFixed(0)}%`}</p>
+                      </div>
+                    );
+                  }
+                  return null;
+                }}


While this custom tooltip is a great UX improvement, the heavy use of inline styles can make the component difficult to read and maintain. To improve code quality, consider extracting the tooltip's rendering logic and styles into a separate component that uses CSS classes. This would create a better separation of concerns and make the styling more reusable and easier to manage.

Copilot

Pull request overview

Improves the Telemetry Timeline dashboard UX by enriching chart data with event names, introducing a custom Recharts tooltip, and formatting table values for readability.

Changes:

Add event to the chart data returned by getProbabilityData() to support richer chart tooltips.
Replace the default Recharts tooltip formatter with a custom tooltip that shows timestamp, event, and probability as a percentage.
Format table display (monospace Log ID, human-readable timestamp, percentage probability) and add scope="col" to headers.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
`data/telemetry.ts`	Adds `event` to the derived chart data objects so the chart tooltip can display event names.
`components/TelemetryTimeline.tsx`	Implements custom chart tooltip content and improves table formatting/accessibility.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-17T01:24:03Z

components/TelemetryTimeline.tsx

+                        <p style={{ margin: 0, fontWeight: 'bold', fontSize: '0.9rem' }}>{label ? new Date(label).toLocaleString() : ''}</p>
+                        <p style={{ margin: '4px 0 0', color: '#666', fontSize: '0.85rem' }}>{`Event: ${payload[0].payload.event}`}</p>


The chart tooltip timestamp was changed to toLocaleString(); previously it used UTC formatting. If the timeline is meant to be UTC-consistent (and the table header says UTC), prefer a UTC format here as well (e.g., toUTCString() or toLocaleString with timeZone: 'UTC') to avoid timezone-dependent displays.

Copilot · 2026-02-17T01:24:03Z

components/TelemetryTimeline.tsx

+                <th scope="col" style={{ padding: '10px', textAlign: 'left' }}>Log ID</th>
+                <th scope="col" style={{ padding: '10px', textAlign: 'left' }}>UTC</th>
+                <th scope="col" style={{ padding: '10px', textAlign: 'left' }}>Event</th>
+                <th scope="col" style={{ padding: '10px', textAlign: 'left' }}>Prediction (p)</th>


The header still says "Prediction (p)", which typically implies a 0–1 probability, but the row value is now formatted as a percentage. Consider updating the header to match the displayed format (e.g., "Prediction (%)" or "Probability").

Suggested change

<th scope="col" style={{ padding: '10px', textAlign: 'left' }}>Prediction (p)</th>

<th scope="col" style={{ padding: '10px', textAlign: 'left' }}>Prediction (%)</th>

Copilot · 2026-02-17T01:24:03Z

components/TelemetryTimeline.tsx

-                  <td style={{ padding: '10px' }}>{entry.logId}</td>
-                  <td style={{ padding: '10px' }}>{entry.utc}</td>
+                  <td style={{ padding: '10px', fontFamily: 'monospace' }}>{entry.logId}</td>
+                  <td style={{ padding: '10px' }}>{new Date(entry.utc).toLocaleString()}</td>


The table column header is labeled "UTC", but this renders the timestamp with toLocaleString(), which uses the user’s local timezone. Use a UTC-formatted render (e.g., toUTCString() or toLocaleString(undefined, { timeZone: 'UTC' })) or rename the column to match the displayed timezone.

Suggested change

<td style={{ padding: '10px' }}>{new Date(entry.utc).toLocaleString()}</td>

<td style={{ padding: '10px' }}>{new Date(entry.utc).toLocaleString(undefined, { timeZone: 'UTC' })}</td>

Copilot AI review requested due to automatic review settings February 17, 2026 01:21

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

gemini-code-assist bot reviewed Feb 17, 2026

View reviewed changes

Copilot AI reviewed Feb 17, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🎨 Palette: Improve Telemetry Table and Chart UX#18

🎨 Palette: Improve Telemetry Table and Chart UX#18
igor-holt wants to merge 1 commit intomainfrom
palette-telemetry-ux-5589796818324141388

igor-holt commented Feb 17, 2026

Uh oh!

google-labs-jules bot commented Feb 17, 2026

Uh oh!

gemini-code-assist bot commented Feb 17, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Feb 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		<p style={{ margin: 0, fontWeight: 'bold', fontSize: '0.9rem' }}>{label ? new Date(label).toLocaleString() : ''}</p>
		<p style={{ margin: '4px 0 0', color: '#666', fontSize: '0.85rem' }}>{`Event: ${payload[0].payload.event}`}</p>

	<th scope="col" style={{ padding: '10px', textAlign: 'left' }}>Prediction (p)</th>
	<th scope="col" style={{ padding: '10px', textAlign: 'left' }}>Prediction (%)</th>

	<td style={{ padding: '10px' }}>{new Date(entry.utc).toLocaleString()}</td>
	<td style={{ padding: '10px' }}>{new Date(entry.utc).toLocaleString(undefined, { timeZone: 'UTC' })}</td>

Conversation

igor-holt commented Feb 17, 2026

Uh oh!

google-labs-jules bot commented Feb 17, 2026

Uh oh!

gemini-code-assist bot commented Feb 17, 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 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants