Dynamically recenter graph based on graph size when recenter is clicked

[PatrickLiu022]

Overview: Current recenter button pans the draggable area to the top left when onclick is triggered. The values that determine the recenter position are hardcoded and therefore reduces usability when users add nodes or when the graph becomes bigger.

Task:

• Display initial graph in the middle of the Viewbox component.
• When re-centering occurs, the view pans to the middle of the graph.
• If graph nodes are not evenly distributed, center around where most nodes are