Interactive Flame Graph Visualization in Vue.js

Flame graphs are powerful tools for visualizing performance bottlenecks in software. This challenge asks you to build a Vue.js component that renders an interactive flame graph from a provided dataset. The component should allow users to explore the graph, zoom in/out, and identify areas of high resource consumption.

Problem Description

You are tasked with creating a Vue.js component named FlameGraph that visualizes a flame graph. The component will receive a dataset as a prop, where each entry represents a function call and its associated cost (e.g., execution time). The graph should visually represent this data, with wider bars indicating higher costs. The component must be interactive, allowing users to zoom in and out to examine different levels of detail. Clicking on a bar should highlight the corresponding function call.

Key Requirements:

• Data Input: The component should accept a data prop, which is an array of objects. Each object should have at least two properties: name (string, representing the function name) and cost (number, representing the cost associated with that function). Optionally, each object can have a parent property (string) indicating the parent function. If parent is null or undefined, it's considered the root.
• Visualization: The component should render a flame graph using SVG. The width of each bar should be proportional to its cost.
• Hierarchy: The graph should visually represent the hierarchical relationships between functions (parent-child).
• Interactivity:
  • Zooming: Users should be able to zoom in and out of the graph.
  • Highlighting: Clicking on a bar should highlight the corresponding function call (e.g., change its color).
• Responsiveness: The graph should be responsive and adapt to different screen sizes.

Expected Behavior:

• The component should render a visually clear and accurate flame graph based on the provided data.
• Zooming should smoothly adjust the scale of the graph.
• Highlighting should provide clear visual feedback when a bar is clicked.
• The graph should handle datasets of varying sizes gracefully.

Edge Cases to Consider:

• Empty Data: Handle the case where the input data is empty. Display a message indicating that there is no data to display.
• Zero Cost: Handle functions with a cost of zero. These should still be displayed, but with a minimal bar width.
• Large Datasets: Consider performance implications when dealing with very large datasets. Optimization techniques (e.g., virtualization) might be necessary, though not strictly required for this challenge.
• Invalid Data: Handle cases where the input data is malformed (e.g., missing name or cost properties). Log an error or display a user-friendly message.

Examples

Example 1:

Input:
[
  { name: "A", cost: 10 },
  { name: "B", cost: 5, parent: "A" },
  { name: "C", cost: 3, parent: "A" },
  { name: "D", cost: 2, parent: "B" }
]
Output:
A flame graph visually representing the hierarchy and costs. "A" has the widest bar (cost 10), "B" has a bar width proportional to 5, "C" proportional to 3, and "D" proportional to 2.  B and C are nested under A.
Explanation: The graph displays the functions and their costs, arranged hierarchically.

Example 2:

Input:
[
  { name: "Root", cost: 20 },
  { name: "Func1", cost: 15, parent: "Root" },
  { name: "Func2", cost: 5, parent: "Root" },
  { name: "Func3", cost: 0, parent: "Func1" }
]
Output:
A flame graph with "Root" having the widest bar (20), "Func1" (15), "Func2" (5), and "Func3" (0). "Func3" is nested under "Func1".
Explanation:  Even functions with zero cost are displayed.

Example 3: (Edge Case - Empty Data)

Input: []
Output:
A message indicating "No data to display."
Explanation: Handles the case where no data is provided.

Constraints

• Data Size: The input dataset should not exceed 500 entries.
• Cost Range: The cost values should be non-negative numbers.
• SVG Rendering: The visualization must be implemented using SVG.
• Vue.js Version: Use Vue.js 3.
• TypeScript: The code must be written in TypeScript.

Notes

• Consider using a library like d3.js or a similar SVG manipulation library to simplify the rendering process. However, you are not required to use one.
• Focus on creating a clear and interactive visualization. Performance optimization is secondary to functionality in this challenge.
• Think about how to handle different levels of detail in the graph. Zooming should allow users to explore the data at various scales.
• The visual appearance of the graph is up to you, but it should be easily understandable and visually appealing.
• Error handling and data validation are important considerations.