Roadmap

Trace event support

Chrome

Take part of the Overlooker project and implement full trace event handling.

Improvements

• Additional information in tooltip
• Add resource metrics (total downloaded size, etc.)
• Support for source maps - for function names and call stacks

Android

Need to explore.

Linux

Need to explore.

Global

Tooltip

• Link support
• Image support
• Tables
• Markdown support (?)

User's menu

• Menu engine
• appearance settings
  • manual settings
  • themes
• loading other data
• save current data to file
• help
• contacts (github link)
• API for menu creation

Plugins

General

• saving the appearance of the interface in localstorage or elsewhere
• plugins can move between each other
• dynamic grid
  • the plugin can be placed anywhere, but it must be attached to another plugin or side (left, right, top, bottom)
  • plugin resizing
  • dynamic creation of toggle plugin

Timeframe selection

• added support for the waterfall plugin - each range in the waterfall data should increase the line by 1 digit each time (same as for the flame chart) ✅
• chart based on node type - each type in flame chart data or waterfall data must be represented by a different line in the chart
• visual configuration - users must choose what data they want to see

Flame chart

• appearance of spans
  • span with stripes ✅
  • span with line
• compound spans with intervals (like waterfall spans)

Waterfall

• appearance of spans ✅
  • span with stripes ✅

New plugins

Call stack

• show call stack when span is selected
• self time and total time in each call on the stack
• table view and call tree explorer
• sorting

Analytics

• statistics by node type - pie chart or vertical bar chart
• statistics by node name - list with sorting and search
• line chart (x - time, y - number of calls)

Search plugin

• ability to search in flame diagram or waterfall data
• Highlight nodes

Images plugin

• the ability to place an array of images on the timeline
• while zoom in/out the behavior should be similar to the marks plugin
• full size view in tooltip

Flame Graph plugin

• the ability to select any node on a flame chart or interval and see statistical information about how long each function call takes on average

DX ✅

Eslint and prettier ✅

Typescript ✅

Build ✅

• dist with clear typed js files ✅

CI ✅

• Builded and available version of flame-chart-js in every branch ✅

User's DX ✅

Quick changes in the flame chart tree ✅

Remove re-creation of objects in tree clusters. This gives us the ability to change nodes by reference, followed by fast rendering without any expensive processing. Scenarios:

• fast highlighting on the flame diagram - changing the color of some nodes
• simple comparison of nodes by reference - can be used in event callbacks

Demo UX

• move flame chart tree data generating to web worker ❌
• implement random waterfall data generator ✅
• implement random marks generator ✅