Increase node height, add styled tooltips, make legend collapsible

- #68: Increase FIXED_H from 40→52 for better edge visibility - #67: Replace native <title> tooltips with styled HTML overlay showing node type, label, execution status and duration - #66: Legend starts collapsed as small pill, expands on click with close button Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 10:18:28 +01:00
parent 8961a5a63c
commit 7b9dc32d6a
5 changed files with 210 additions and 13 deletions
--- a/ui/src/pages/routes/diagram/DiagramCanvas.tsx
+++ b/ui/src/pages/routes/diagram/DiagramCanvas.tsx
@@ -5,6 +5,7 @@ import type { OverlayState } from '../../../hooks/useExecutionOverlay';
 import { RouteDiagramSvg } from './RouteDiagramSvg';
 import { DiagramMinimap } from './DiagramMinimap';
 import { DiagramLegend } from './DiagramLegend';
+import type { TooltipData } from './DiagramNode';
 import styles from './diagram.module.css';

 interface DiagramCanvasProps {
@@ -17,6 +18,15 @@ export function DiagramCanvas({ layout, overlay }: DiagramCanvasProps) {
  const svgWrapRef = useRef<HTMLDivElement>(null);
  const panzoomRef = useRef<PanZoom | null>(null);
  const [viewBox, setViewBox] = useState({ x: 0, y: 0, w: 800, h: 600 });
+  const [tooltip, setTooltip] = useState<{ data: TooltipData; x: number; y: number } | null>(null);
+
+  const handleNodeHover = useCallback((data: TooltipData | null, x: number, y: number) => {
+    if (!data) {
+      setTooltip(null);
+    } else {
+      setTooltip({ data, x, y });
+    }
+  }, []);

  useEffect(() => {
    if (!svgWrapRef.current) return;
@@ -95,12 +105,39 @@ export function DiagramCanvas({ layout, overlay }: DiagramCanvasProps) {

      <div ref={containerRef} className={styles.canvas}>
        <div ref={svgWrapRef}>
-          <RouteDiagramSvg layout={layout} overlay={overlay} />
+          <RouteDiagramSvg layout={layout} overlay={overlay} onNodeHover={handleNodeHover} />
        </div>
      </div>

      <DiagramLegend />

+      {/* Node tooltip */}
+      {tooltip && (
+        <div
+          className={styles.nodeTooltip}
+          style={{
+            left: tooltip.x,
+            top: tooltip.y,
+          }}
+        >
+          <div className={styles.tooltipHeader}>
+            <span className={styles.tooltipDot} style={{ background: tooltip.data.color }} />
+            <span className={styles.tooltipType}>{tooltip.data.nodeType}</span>
+          </div>
+          <div className={styles.tooltipLabel}>{tooltip.data.label}</div>
+          {tooltip.data.isExecuted && (
+            <div className={styles.tooltipMeta}>
+              <span className={tooltip.data.isError ? styles.tooltipStatusFailed : styles.tooltipStatusOk}>
+                {tooltip.data.isError ? 'FAILED' : 'OK'}
+              </span>
+              {tooltip.data.duration != null && (
+                <span className={styles.tooltipDuration}>{tooltip.data.duration}ms</span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
      <DiagramMinimap
        nodes={layout.nodes ?? []}
        edges={layout.edges ?? []}
--- a/ui/src/pages/routes/diagram/DiagramLegend.tsx
+++ b/ui/src/pages/routes/diagram/DiagramLegend.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styles from './diagram.module.css';

 interface LegendItem {
@@ -54,8 +55,29 @@ function LegendRow({ item }: { item: LegendItem }) {
 }

 export function DiagramLegend() {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!expanded) {
+    return (
+      <button
+        className={styles.legendToggle}
+        onClick={() => setExpanded(true)}
+        title="Show legend"
+      >
+        Legend
+      </button>
+    );
+  }
+
  return (
    <div className={styles.legend}>
+      <button
+        className={styles.legendCloseBtn}
+        onClick={() => setExpanded(false)}
+        title="Hide legend"
+      >
+        &times;
+      </button>
      <div className={styles.legendSection}>
        <span className={styles.legendTitle}>Nodes</span>
        {NODE_TYPES.map((t) => <LegendRow key={t.label} item={t} />)}
--- a/ui/src/pages/routes/diagram/DiagramNode.tsx
+++ b/ui/src/pages/routes/diagram/DiagramNode.tsx
@@ -3,7 +3,7 @@ import { getNodeStyle, isCompoundType } from './nodeStyles';
 import styles from './diagram.module.css';

 const FIXED_W = 200;
-const FIXED_H = 40;
+const FIXED_H = 52;
 const MAX_LABEL = 22;

 function truncateLabel(label: string | undefined): string {
@@ -11,13 +11,13 @@ function truncateLabel(label: string | undefined): string {
  return label.length > MAX_LABEL ? label.slice(0, MAX_LABEL - 1) + '\u2026' : label;
 }

-function buildTooltip(node: PositionedNode, isOverlayActive: boolean, isExecuted: boolean, isError: boolean, duration?: number): string {
-  const parts = [`${node.type ?? 'PROCESSOR'}: ${node.label ?? ''}`];
-  if (isOverlayActive && isExecuted) {
-    parts.push(`Status: ${isError ? 'FAILED' : 'OK'}`);
-    if (duration != null) parts.push(`Duration: ${duration}ms`);
-  }
-  return parts.join('\n');
+export interface TooltipData {
+  nodeType: string;
+  label: string;
+  color: string;
+  isExecuted: boolean;
+  isError: boolean;
+  duration?: number;
 }

 interface DiagramNodeProps {
@@ -29,6 +29,7 @@ interface DiagramNodeProps {
  sequence?: number;
  isSelected: boolean;
  onClick: (nodeId: string) => void;
+  onHover?: (data: TooltipData | null, x: number, y: number) => void;
 }

 export function DiagramNode({
@@ -40,6 +41,7 @@ export function DiagramNode({
  sequence,
  isSelected,
  onClick,
+  onHover,
 }: DiagramNodeProps) {
  const style = getNodeStyle(node.type ?? 'PROCESSOR');
  const isCompound = isCompoundType(node.type ?? '');
@@ -53,7 +55,20 @@ export function DiagramNode({
    ? (isError ? '#f85149' : '#3fb950')
    : style.border;

-  const tooltip = buildTooltip(node, isOverlayActive, isExecuted, isError, duration);
+  const handleMouseEnter = (e: React.MouseEvent) => {
+    onHover?.({
+      nodeType: node.type ?? 'PROCESSOR',
+      label: node.label ?? '',
+      color: style.border,
+      isExecuted: isOverlayActive && isExecuted,
+      isError,
+      duration,
+    }, e.clientX, e.clientY);
+  };
+
+  const handleMouseLeave = () => {
+    onHover?.(null, 0, 0);
+  };

  if (isCompound) {
    return (
@@ -62,8 +77,9 @@ export function DiagramNode({
        opacity={dimmed ? 0.15 : 1}
        role="img"
        aria-label={`${node.type} container: ${node.label}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
      >
-        <title>{tooltip}</title>
        <rect
          x={node.x}
          y={node.y}
@@ -103,12 +119,13 @@ export function DiagramNode({
      className={`${styles.nodeGroup} ${dimmed ? styles.dimmed : ''} ${isSelected ? styles.selected : ''}`}
      opacity={dimmed ? 0.15 : 1}
      onClick={() => node.id && onClick(node.id)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
      style={{ cursor: 'pointer' }}
      role="img"
      aria-label={`${node.type}: ${node.label}${duration != null ? `, ${duration}ms` : ''}`}
      tabIndex={0}
    >
-      <title>{tooltip}</title>
      <rect
        x={rx}
        y={ry}
--- a/ui/src/pages/routes/diagram/RouteDiagramSvg.tsx
+++ b/ui/src/pages/routes/diagram/RouteDiagramSvg.tsx
@@ -3,6 +3,7 @@ import type { OverlayState } from '../../../hooks/useExecutionOverlay';
 import { SvgDefs } from './SvgDefs';
 import { EdgeLayer } from './EdgeLayer';
 import { DiagramNode } from './DiagramNode';
+import type { TooltipData } from './DiagramNode';
 import { FlowParticles } from './FlowParticles';
 import { isCompoundType } from './nodeStyles';
 import type { PositionedNode } from '../../../api/types';
@@ -10,6 +11,7 @@ import type { PositionedNode } from '../../../api/types';
 interface RouteDiagramSvgProps {
  layout: DiagramLayout;
  overlay: OverlayState;
+  onNodeHover?: (data: TooltipData | null, x: number, y: number) => void;
 }

 /** Recursively flatten all nodes (including compound children) for rendering */
@@ -24,7 +26,7 @@ function flattenNodes(nodes: PositionedNode[]): PositionedNode[] {
  return result;
 }

-export function RouteDiagramSvg({ layout, overlay }: RouteDiagramSvgProps) {
+export function RouteDiagramSvg({ layout, overlay, onNodeHover }: RouteDiagramSvgProps) {
  const padding = 40;
  const width = (layout.width ?? 600) + padding * 2;
  const height = (layout.height ?? 400) + padding * 2;
@@ -58,6 +60,7 @@ export function RouteDiagramSvg({ layout, overlay }: RouteDiagramSvgProps) {
              sequence={undefined}
              isSelected={overlay.selectedNodeId === node.id}
              onClick={overlay.selectNode}
+              onHover={onNodeHover}
            />
            {/* Iteration count badge */}
            {overlay.isActive && iterData && iterData.count > 1 && (
@@ -116,6 +119,7 @@ export function RouteDiagramSvg({ layout, overlay }: RouteDiagramSvgProps) {
            sequence={overlay.sequences.get(nodeId)}
            isSelected={overlay.selectedNodeId === nodeId}
            onClick={overlay.selectNode}
+            onHover={onNodeHover}
          />
        );
      })}
--- a/ui/src/pages/routes/diagram/diagram.module.css
+++ b/ui/src/pages/routes/diagram/diagram.module.css
@@ -409,7 +409,102 @@
  color: var(--text-muted);
 }

+/* ─── Node Tooltip ─── */
+.nodeTooltip {
+  position: fixed;
+  transform: translate(12px, -50%);
+  background: rgba(13, 17, 23, 0.95);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  z-index: 100;
+  pointer-events: none;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  min-width: 140px;
+  max-width: 280px;
+}
+
+.tooltipHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.tooltipDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.tooltipType {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+}
+
+.tooltipLabel {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.tooltipMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border-subtle);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.tooltipStatusOk {
+  color: var(--green);
+  font-weight: 600;
+}
+
+.tooltipStatusFailed {
+  color: var(--rose);
+  font-weight: 600;
+}
+
+.tooltipDuration {
+  color: var(--text-secondary);
+}
+
 /* ─── Legend ─── */
+.legendToggle {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  padding: 5px 12px;
+  background: rgba(13, 17, 23, 0.85);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  cursor: pointer;
+  z-index: 10;
+  backdrop-filter: blur(4px);
+  transition: all 0.15s;
+}
+
+.legendToggle:hover {
+  background: rgba(13, 17, 23, 0.95);
+  color: var(--text-secondary);
+  border-color: var(--border);
+}
+
 .legend {
  position: absolute;
  bottom: 12px;
@@ -424,6 +519,24 @@
  backdrop-filter: blur(4px);
 }

+.legendCloseBtn {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  transition: color 0.15s;
+}
+
+.legendCloseBtn:hover {
+  color: var(--text-primary);
+}
+
 .legendSection {
  display: flex;
  flex-direction: column;
@@ -485,4 +598,8 @@
  .legend {
    display: none;
  }
+
+  .legendToggle {
+    display: none;
+  }
 }