Visual Plan for Slowquery and Statements

[YiniXu9506]

Feature Request

Support visual plan for slow query and statement.

Describe the feature you'd like: The following features have to implemented before sprint8:

✅ Features DONE https://github.com/pingcap/tidb-dashboard/pull/1225 :

• [x] Enable nodes (non-leaf node) to expand and collapse its descendant nodes.
• [x] Support tree zoom-in and zoom-out.
• [x] Provide a minimap for whole tree diagram, enabling to locate some specific nodes or areas. (Exist some weird behaviors, need to improve user experience)
• [x] Implement the ability to custom node content and style.

Features TODO:

• [x] (High priority) Refine node time displayment.
• [ ] #1226
• [ ] #1269
• [ ] Have a good expandability to add more features in the future.

The extra features can be added to Tree diagram.(Not required)

• [ ] #1270
• [ ] Improve the built-in ability to introduce to other programs, eg. use package.
• [ ] Support large plan, which has more thousands lines.
• [ ] Enable to expand or collapse nodes on a specific depth.

A quick demo

Teachability, Documentation, Adoption, Migration Strategy:

A brief introduction why choose react + d3 can be referred here.