Fix dynamic graph centering in Generate page

[r-weng]

Proposed Changes

This pull request introduces the computeShapesBbox method in js/components/graph/Graph.js to centre the dynamic graph in the Generate page. Previously, the SVG viewBox was set to a region below the graph, causing the graph to appear to load in at the top of the page. This PR fixes this, centering the viewBox on the newly computed bounding box (bbox) instead. Note that this bbox is computed solely using valid shapes (nodes, hybrids, and bools) in the graph, hence the name computeShapesBbox.

...

Screenshots of your changes (if applicable)

(before) (after)

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)	X
🎨 User interface change (change to user interface; provide screenshots)	X
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

• I have performed a self-review of my changes.
  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.
• I have added tests for my changes, if applicable.
  • This is required for all bug fixes and new features.
• I have updated the project documentation, if applicable.
  • This is required for new features.
• If this is my first contribution, I have added myself to the list of contributors.
• I have updated the project Changelog (this is required for all changes).

After opening your pull request:

• I have verified that the CircleCI checks have passed.
• I have requested a review from a project maintainer.

Questions and Comments

(Include any questions or comments you have regarding your changes.)

[coveralls]

Coverage Report for CI Build 0

Coverage decreased (-0.5%) to 58.113%

Details

• Coverage decreased (-0.5%) from the base build.
• Patch coverage: 30 uncovered changes across 1 file (7 of 37 lines covered, 18.92%).
• 1 coverage regression across 1 file.

Uncovered Changes

File	Changed	Covered	%
js/components/graph/Graph.js	37	7	18.92%

Coverage Regressions

1 previously-covered line in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
js/components/graph/Graph.js	1	75.53%

---

Coverage Stats

Relevant Lines:	4242
Covered Lines:	2520
Line Coverage:	59.41%
Relevant Branches:	984
Covered Branches:	517
Branch Coverage:	52.54%
Branches in Coverage %:	Yes
Coverage Strength:	150.47 hits per line

---

💛 - Coveralls

[david-yz-liu]

This is a fairly standard loop accumulation so I would just use a for loop rather than calling forEach

[david-yz-liu]

Overall I do not think we should be recalculating the width and height, and instead just rely on what is computed by Graphviz on the Courseography back-end. (If there's an issue with the width/height data, that's a bug on the back-end that can be fixed there.)

[david-yz-liu]

Make sure to update the docstring as well.

However as I was thinking about this further, I realized that I think you can just retrieve the minX and minY values from here, and then use the graph-provided width and height for the rest of the viewbox setting further below.