[david-yz-liu]

Proposed Changes

Graph.js is still a large class component. This pulls the root <svg> setup out into its own typed functional component, as a step towards breaking it up and converting it to TypeScript.

• Added js/components/graph/GraphCanvas.tsx, which owns:

  • the <svg id="main-graph"> element and its attributes
  • the viewBox calculation, computed from width/height, zoom factor and pan factors
  • a single <defs> block with the shared node drop-shadow filter, #arrowHead marker and #blur-filter (previously split across two <defs> plus a loose <filter>)
  • the graph contents (regions, bools, edges, nodes, info box), passed in as children

• Exported NODE_DROPSHADOW_FILTER_ID from GraphCanvas.tsx, replacing this.nodeDropshadowFilter in Graph.js

• Removed renderArrowHead, renderEllipseBlurFilter and the inline viewBox math from Graph.js. Graph still chooses whether to pass the draw or the pan mouse handlers.

• Kept the xmlns:* and version attributes, with a comment explaining that they only matter if the SVG markup is serialized (e.g. for export)

• Added js/components/graph/__tests__/GraphCanvas.test.js, which checks the exact viewBox in three cases:

  • a normal page
  • inside #generateRoot (Generate page)
  • with no #react-graph container

  It also checks that children render inside the <svg>.

The rendered SVG is unchanged apart from where the filters and marker sit inside <defs>.

Screenshots of your changes (if applicable)

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)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)	X
🚦 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 CI checks have passed.
• I have reviewed the test coverage changes reported by Coveralls.
• I have requested a review from a project maintainer.

Questions and Comments

• GraphCanvas.test.js gives GraphCanvas.tsx 100% line and branch coverage, including the Generate-page lines Coveralls flagged on the first push.
• GraphCanvas still reads the container size with document.getElementById("react-graph") while rendering, as the old code did. A resize-observer hook would be cleaner, but it would change when the viewBox updates, so I left it out of this PR.

🤖 Generated with Claude Code

[coveralls]

Coverage Report for CI Build 41320918833

Coverage increased (+0.05%) to 60.654%

Details

• Coverage increased (+0.05%) from the base build.
• Patch coverage: 17 of 17 lines across 1 file are fully covered (100%).
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	4308
Covered Lines:	2675
Line Coverage:	62.09%
Relevant Branches:	1014
Covered Branches:	553
Branch Coverage:	54.54%
Branches in Coverage %:	Yes
Coverage Strength:	158.83 hits per line

---

💛 - Coveralls