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 #1225 :

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

Features TODO:

• (High priority) Refine node time displayment.
• Add tab selection for visual_plan and text_plan #1226
• Enable to center the focused nodes (user clicked) on canvas and make tree transition more smooth. #1269
• Have a good expandability to add more features in the future.

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

• Support visual plan SVG downloaded. #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.