otel: reliable bar tooltips (<title> inside <rect>, label pointer-events:none)

This commit is contained in:
2026-07-02 11:56:34 +00:00
parent 1e2ff38759
commit 1cdfaa5035

View File

@@ -198,7 +198,7 @@
:status (get s :status) :status (get s :status)
:x (+ otel/-pad (* (/ (- (get s :t0) t0) total) iw)) :x (+ otel/-pad (* (/ (- (get s :t0) t0) total) iw))
:y (+ otel/-pad (* d otel/-row-h)) :y (+ otel/-pad (* d otel/-row-h))
:w (if (> raw-w 1) raw-w 1)}))) :w (if (> raw-w 3) raw-w 3)})))
spans))))))) spans)))))))
;; ns → a compact "Nms" / "Nus" label. ;; ns → a compact "Nms" / "Nus" label.
@@ -213,20 +213,21 @@
(fn (status) (if (= status "error") "#e45756" "#4c9a8f"))) (fn (status) (if (= status "error") "#e45756" "#4c9a8f")))
;; one <g> (bar + name + duration) per rect. The bar is the only <rect>, so ;; one <g> (bar + name + duration) per rect. The bar is the only <rect>, so
;; count(rect) == count(span); axis chrome uses <line>/<text>. A leading <title> ;; count(rect) == count(span); axis chrome uses <line>/<text>. The <title> lives
;; gives a native hover tooltip with the full span name (the inline label clips on ;; INSIDE the <rect> (browsers resolve tooltips per hovered element, not up the
;; narrow bars). ;; tree), and the label sets pointer-events:none so hovering the bar — through the
;; label — reliably shows the tooltip with the full span name + duration.
(define otel/-rect->g (define otel/-rect->g
(fn (r) (fn (r)
(quasiquote (quasiquote
(g (g
(title (unquote (str (get r :name) " · " (otel/-ms (get r :dur))
(if (= (get r :status) "error") " · error" ""))))
(rect :x (unquote (get r :x)) :y (unquote (get r :y)) (rect :x (unquote (get r :x)) :y (unquote (get r :y))
:width (unquote (get r :w)) :height (unquote (- otel/-row-h 2)) :width (unquote (get r :w)) :height (unquote (- otel/-row-h 2))
:fill (unquote (otel/-bar-fill (get r :status))) :rx 2) :fill (unquote (otel/-bar-fill (get r :status))) :rx 2
(title (unquote (str (get r :name) " · " (otel/-ms (get r :dur))
(if (= (get r :status) "error") " · error" "")))))
(text :x (unquote (+ (get r :x) 3)) :y (unquote (+ (get r :y) 12)) (text :x (unquote (+ (get r :x) 3)) :y (unquote (+ (get r :y) 12))
:font-size 10 :fill "#ffffff" :font-size 10 :fill "#ffffff" :pointer-events "none"
(unquote (str (get r :name) " " (otel/-ms (get r :dur))))))))) (unquote (str (get r :name) " " (otel/-ms (get r :dur)))))))))
;; max depth across rects (0 when empty) → svg height. ;; max depth across rects (0 when empty) → svg height.