FlameGraph Tooltip Sample

Overview

The FlameGraph component is a React-based visualization tool that displays hierarchical data in a two-dimensional view. It features a custom tooltip system that provides additional information when hovering over graph elements.

Demo

Features

• Interactive flame graph visualization
• Custom tooltip system with smart positioning
• Configurable dimensions and styling
• Event handling for mouse interactions
• Hierarchical data support

Component Structure

FlameGraphViewer

The main component that renders the flame graph and handles tooltip interactions.

Props

• data (Object): Hierarchical data to be displayed in the flame graph
• enableTooltips (Boolean): Controls whether tooltips are enabled
• width (Number): Width of the flame graph
• height (Number): Height of the flame graph
• tooltipHeight (Number): Height of the tooltip
• onChange (Function): Callback function triggered when graph data changes

Tooltip Styling

The tooltip uses the following CSS classes:

• .Tooltip: Base tooltip styling
  • Position: absolute
  • z-index: 3
  • Background: black
  • Text color: white
  • Padding: 0.5rem
• .tt-name: Styling for name labels (red background)
• .tt-value: Styling for value labels (blue background)

Usage Example

import { FlameGraphViewer } from './FlameGraphViewer';

function MyComponent() {
  return (
    <FlameGraphViewer
      tooltipHeight={90}
      height={500}
      width={800}
      enableTooltips={true}
      onChange={(node) => console.log(node.name)}
      data={hierarchicalData}
    />
  );
}

Implementation Details

Mouse Position Calculation

The component uses a helper function getMousePos to calculate the tooltip position relative to the container:

function getMousePos(relativeContainer, mouseEvent, tooltipHeight) {
  if (relativeContainer !== null) {
    const rect = relativeContainer.getBoundingClientRect();
    const mouseX = mouseEvent.clientX - rect.left;
    const mouseY = mouseEvent.clientY - (rect.top - tooltipHeight);
    return { mouseX, mouseY };
  }
  return { mouseX: 0, mouseY: 0 };
}

Event Handlers

The component implements three main event handlers:

• onMouseOver: Shows tooltip with node information
• onMouseMove: Updates tooltip position
• onMouseOut: Hides tooltip

Smart Tooltip Positioning

The component uses a custom hook useSmartTooltip to handle tooltip positioning and visibility.

Dependencies

• React
• react-flame-graph
• @emotion/css (for styling)
• antd (for UI components)

Best Practices

1. Ensure hierarchical data is properly formatted before passing to the component
2. Adjust tooltip height based on content to prevent overflow
3. Consider container dimensions when setting width and height props
4. Use the onChange callback to handle user interactions with the graph