FlameGraph Sample

A React component demonstrating hierarchical data visualization using flame graphs. This component provides an interactive way to visualize and analyze hierarchical data structures with customizable depth and partitioning controls.

Demo

Features

• Dynamic Data Generation: Generate hierarchical data with customizable parameters
• Interactive Controls: Adjust the depth and partitioning of the flame graph
• Customizable Visualization: Control the width, height, and tooltip behavior
• Responsive Design: Adapts to different screen sizes
• Custom Tooltips: Displays detailed information about each node on hover

Example Usage

import { FlameGraphViewer } from './FlameGraphViewer';

// Rendering a flame graph with custom dimensions
const FlameGraphDisplay = () => {
  return (
    <FlameGraphViewer
      enableTooltips={true}
      width={800}
      height={500}
      data={generateHierarchicalData({
        maxDivideCount: 2,
        levelCount: 2,
        value: 1000
      })}
    />
  );
};

Controls

The component provides two main controls for customizing the visualization:

1. Dividing Count: Controls the maximum number of partitions at each level

   • Range: 2-5
   • Default: 2

2. Level Count: Controls the maximum depth of the hierarchy

   • Range: 1-10
   • Default: 2

Data Structure

The flame graph expects hierarchical data in the following format:

{
  name: "Root",
  value: 1000,
  children: [
    {
      name: "Child 1",
      value: 500,
      children: [...]
    },
    {
      name: "Child 2",
      value: 500,
      children: [...]
    }
  ]
}

Tooltip Configuration

The component supports customizable tooltips that can be enabled or disabled:

<FlameGraphViewer
  enableTooltips={true}
  tooltipHeight={50} // Optional: Custom tooltip height
  // ... other props
/>

Technologies Used

• React: Component-based UI development
• react-flame-graph: Core flame graph visualization library
• Ant Design: UI components including Slider and Typography
• SCSS: Styling for the flame graph and tooltips
• Emotion: CSS-in-JS styling solution

Implementation Details

The component consists of two main parts:

1. FlameGraphSample: The main container component that handles:

   • Control state management
   • Data generation
   • Layout organization
   • Documentation display

2. FlameGraphViewer: The visualization component that handles:

   • Flame graph rendering
   • Tooltip management
   • Mouse interaction
   • Custom styling

Customization Options

The flame graph can be customized through various props:

<FlameGraphViewer
  width={800}              // Width of the visualization
  height={500}             // Height of the visualization
  enableTooltips={true}    // Enable/disable tooltips
  tooltipHeight={50}       // Custom tooltip height
  onChange={handleChange}  // Callback for data changes
  data={hierarchicalData}  // The hierarchical data to visualize
/>

Styling

The component uses SCSS for styling, with customizable classes for:

• Tooltip appearance
• Graph container
• Interactive elements

.Tooltip {
  position: absolute;
  z-index: 3;
  background-color: #000;
  color: #fff;
  padding: 0.5rem;
}

Props

Prop	Type	Default	Description
width	number	800	Width of the flame graph visualization
height	number	500	Height of the flame graph visualization
enableTooltips	boolean	false	Enable/disable tooltip functionality
tooltipHeight	number	-	Custom height for tooltips
data	object	-	Hierarchical data to visualize
onChange	function	-	Callback for data changes

Dependencies

{
  "dependencies": {
    "react": "^17.0.0",
    "react-flame-graph": "^1.0.0",
    "antd": "^4.0.0",
    "@emotion/css": "^11.0.0"
  }
}