Skip to content

Conversation

Winter-Soren
Copy link
Contributor

Add Tooltips to All Dashboard Graphs

Description

This PR adds hover tooltips to all graphs in the Spark Dashboard to show exact values when users hover over data points. This enhancement improves the dashboard's usability by allowing users to see precise values without having to estimate from the axes.

Changes Made

Added tooltips with formatted values to:

  1. Line Graphs (Overall Spark RSR)

    • Shows exact date (MMM DD, YYYY format)
    • Shows precise success rate percentage (2 decimal places)
    • Indicates type (HTTP or Graphsync / HTTP only)
  2. Histograms (Spark Miner RSR)

    • Shows range of each bin
    • Displays count of miners in each bin
    • Shows type of measurement
  3. Time To First Byte (TTFB) Graph

    • Shows formatted date
    • Displays precise TTFB in milliseconds (2 decimal places)
  4. Retrieval Result Codes Graph

    • Shows formatted date
    • Displays percentage for each code type
    • Shows code category
  5. RSR Buckets Over Time Graphs

    • Shows formatted date
    • Displays exact count of Storage Providers
    • Shows threshold or type information

Implementation Details

  • Used Observable Plot's native tooltip system for optimal performance
  • Implemented consistent date formatting across all graphs
  • Added proper handling for null/undefined values (showing "N/A")
  • Maintained color coding and type information in tooltips where relevant

Screenshots

image
image
image
image
image
image
image
image

Fixes #11

@Winter-Soren
Copy link
Contributor Author

Hi @juliangruber, @bajtos, and @NikolasHaimerl, I’ve made some changes to address this issue. I’d really appreciate it if you could review them and share any feedback. Please let me know if I’m on the right track or if any improvements are needed.

@bajtos
Copy link
Member

bajtos commented Mar 14, 2025

I love this, thank you @Winter-Soren so much for this contribution!

@juliangruber

This comment was marked as resolved.

@juliangruber
Copy link
Member

Screenshot 2025-03-17 at 08 55 07

In this one, type is listed twice. Can we only show one?

@juliangruber

This comment was marked as resolved.

@juliangruber

This comment was marked as resolved.

@juliangruber

This comment was marked as resolved.

@juliangruber

This comment was marked as resolved.

@juliangruber
Copy link
Member

Thank you so much, @Winter-Soren!!

Copy link
Member

@juliangruber juliangruber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comments above

@Winter-Soren
Copy link
Contributor Author

@juliangruber Thanks a lot for the feedback, Ill rectify and commit!

@juliangruber
Copy link
Member

ping @Winter-Soren 🙏

@juliangruber
Copy link
Member

I'm going to go ahead with merging this as it's a lot more useful than what we have one. We can fix the kinks later

@juliangruber juliangruber enabled auto-merge (squash) March 20, 2025 16:26
@juliangruber juliangruber disabled auto-merge March 20, 2025 16:27
@juliangruber juliangruber enabled auto-merge (squash) March 20, 2025 16:27
@juliangruber juliangruber disabled auto-merge March 21, 2025 08:16
@juliangruber juliangruber merged commit 84fd963 into CheckerNetwork:main Mar 21, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Hover to find exact X & Y axis values for a given data point

3 participants