[draft] add d3-based auto-layout

[lihebi]

This is an ongoing draft of adding d3-based auto-layout. There're still many details to be figured out.

An "auto-layout" button is added to the scope's toolbar. Once clicked, the pods inside the scope shall be auto-layouted. A global auto-layout button shall auto-layout the entire canvas.

Before auto-layout:

After auto-layout:

Known issues:

• The layout position didn't consider the scope's position, thus the layout is not inside the scope.

[lihebi]

This PR has three layout algorithms:

• d3-force: this is not ideal, as the layout results are dependent on the original position of the nodes. Our layout engine should be purely functional w.r.t. the edge and parent relations among the pods.
• d3-hierarchy: this does not support nodes with variable width and height.
• d3-flextree: this should be the most promising one.

Details of how to use d3 to auto-layout our pods:

• create a d3 compatible graph data structure from our nodes
• call d3's auto-layout algorithm on the newly created data structure. We need to choose what kind of force to use
• get the updated positions of the d3 data structure and set the corresponding reactflow node positions.

[lihebi]

Related issues:
#204
#49
#176

[lihebi]

merged #245