feat: better tooltips

Author: gpichot

packages/react-query-devtools/src/timeline/index.tsx

@@ -9,6 +9,7 @@ import useTimelineEvents from './useTimelineEvents'
 import { SVGQueryTimeline, TooltipOptions } from './timelineComponents'
 import { useTheme } from '../theme'
 import TimelineOptions from './timelineOptions'
+import ReactDOM from 'react-dom'
 
 function clampValue(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max)
@@ -129,18 +130,24 @@ export function TimelinePanel(props: TimelinePanelProps) {
 
   return (
     <>
-      {tooltip && (
-        <div
-          style={{
-            position: 'absolute',
-            top: tooltip.y,
-            left: tooltip.x,
-            backgroundColor: theme.background,
-          }}
-        >
-          {tooltip.content}
-        </div>
-      )}
+      {tooltip &&
+        ReactDOM.createPortal(
+          <div
+            style={{
+              position: 'absolute',
+              top: tooltip.y + 10,
+              left: tooltip.x + 10,
+              backgroundColor: theme.gray,
+              fontFamily: 'sans-serif',
+              zIndex: 100000,
+              color: 'white',
+              padding: '.5em',
+            }}
+          >
+            {tooltip.content}
+          </div>,
+          document.body,
+        )}
       <PanelMain isOpen={isOpen}>
         <PanelHead {...headProps}>
           <TimelineOptions

packages/react-query-devtools/src/timeline/timelineComponents.tsx

@@ -5,7 +5,11 @@ import {
   ReactQueryQueryEvent,
 } from './useTimelineEvents'
 
-import { computeObserverCountBoxes, computeQueryBoxes } from './utils'
+import {
+  computeObserverCountBoxes,
+  computeQueryBoxes,
+  formatMillisecondsDuration,
+} from './utils'
 
 export type TooltipOptions = {
   x: number
@@ -98,6 +102,7 @@ export const SVGQueryTimeline = React.forwardRef<
         {boxes.map((item) => {
           const counts = computeObserverCountBoxes(item)
 
+          const cacheTime = formatMillisecondsDuration(item.cacheTime)
           return (
             <g key={item.startAt.getTime()}>
               <rect
@@ -106,7 +111,7 @@ export const SVGQueryTimeline = React.forwardRef<
                 width={scaleX(item.endAt) - scaleX(item.startAt)}
                 height="22"
                 fill="#8798bf42"
-                {...getTooltipProps(`Cache time: ${item.cacheTime}ms`)}
+                {...getTooltipProps(`Cache time: ${cacheTime}`)}
               />
               {counts.map((count) => (
                 <React.Fragment key={count.start.getTime()}>

packages/react-query-devtools/src/timeline/timelineOptions.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '../styledComponents'
 import useTimelineEvents from './useTimelineEvents'
 
@@ -33,13 +33,9 @@ export default function TimelineOptions({
           alignSelf: 'flex-end',
         }}
       >
-        <button onClick={() => setZoom((zoom) => clampZoom(zoom * 1.5))}>
-          -
-        </button>
+        <button onClick={() => setZoom((z) => clampZoom(z * 1.5))}>-</button>
         {Math.floor((zoomBasis / zoom) * 100)}%
-        <button onClick={() => setZoom((zoom) => clampZoom(zoom / 1.5))}>
-          +
-        </button>
+        <button onClick={() => setZoom((z) => clampZoom(z / 1.5))}>+</button>
       </div>
       <div
         style={{

packages/react-query-devtools/src/timeline/utils.test.ts

@@ -28,6 +28,7 @@ describe('computeQueryBoxes', () => {
       expect.objectContaining({
         startAt: new Date('2022-07-20T13:19:15.000Z'),
         endAt: new Date('2022-07-20T13:19:59.999Z'),
+        cacheTime: 300000,
       }),
     )
   })

packages/react-query-devtools/src/timeline/utils.ts

@@ -38,6 +38,7 @@ export function computeQueryBoxes(
   sortedEvents.forEach((event) => {
     if (event.eventType === 'added') {
       partial.startAt = event.receivedAt
+      partial.cacheTime = event.cacheTime
     } else if (event.eventType === 'removed') {
       items.push({
         ...createBox(partial),
@@ -102,3 +103,22 @@ export function computeObserverCountBoxes(query: Box) {
 
   return counts.filter((c) => c.count !== 0)
 }
+
+export function formatMillisecondsDuration(ms: number | undefined) {
+  if (!ms) return null
+
+  const minutes = Math.floor(ms / 60000)
+  const seconds = Math.floor((ms % 60000) / 1000)
+  const milliseconds = Math.floor((ms % 60000) % 1000)
+
+  const zipped: [number, string][] = [
+    [minutes, 'min'],
+    [seconds, 's'],
+    [milliseconds, 'ms'],
+  ]
+
+  return zipped
+    .filter(([count, _]) => count > 0)
+    .map(([count, unit]) => `${count}${unit}`)
+    .join(' ')
+}

rollup.config.ts

@@ -83,6 +83,7 @@ export default function rollup(options: RollupOptions): RollupOptions[] {
       entryFile: 'src/index.ts',
       globals: {
         react: 'React',
+        'react-dom': 'ReactDOM',
         '@tanstack/react-query': 'ReactQuery',
       },
     }),