Fix NetworkModificationTree: Manage tree fitView at initialization

[sBouzols]

PR Summary

current behaviour : fitView seems not executed at init of the ReactFlow component
next behaviour : fitView is executed at init.

see xyflow/xyflow#533 for this kind of issue recommended fix

[Mathieu-Deharbe]

OK, bug corrected.

There is a slight "jump->zoom" when a large tree is loaded. First it is zoomed in for about half a second and then fitViewed. Maybe a loader will have to be added or simply hide the tree until the end of the loading.

[coderabbitai]

📝 Walkthrough

Walkthrough

The fitView behavior in ReactFlow was refactored from a prop-based approach to a custom initialization handler (onInit). The handler calls rf.fitView() after the ReactFlow instance initializes, ensuring the view-fitting occurs only when the instance is ready rather than at component mount time.

Changes

Cohort / File(s)	Summary
ReactFlow Initialization src/components/network-modification-tree.jsx	Replaced fitView prop with onReactFlowInit handler that calls rf.fitView() on instance initialization to fix timing issues where nodes may not be rendered when fitView would previously execute.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing NetworkModificationTree by managing fitView behavior during ReactFlow initialization.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly relates to the changeset - it explains the problem (fitView not executing at ReactFlow init) and the solution (calling fitView in onInit handler).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

🧹 Nitpick comments (1)

src/components/network-modification-tree.jsx (1)

288-294: Consider wrapping onReactFlowInit in useCallback for consistency.

All other event handlers in this component are memoized with useCallback. While the impact is minimal since onInit fires only once, memoizing this handler maintains consistency and prevents unnecessary reference changes that could trigger re-renders of the ReactFlow component.

♻️ Suggested refactor

-    // FIX : when fitting the view, the nodes are not yet rendered, so the view is not correctly
-    // centered and zoomed on the nodes. We need to wait for the nodes to be rendered and then fit the view.
-    // cf https://github.com/xyflow/xyflow/issues/533
-    const onReactFlowInit = (rf) => {
-        rf.fitView();
-    };
-    // END OF FIX
+    // FIX : when fitting the view, the nodes are not yet rendered, so the view is not correctly
+    // centered and zoomed on the nodes. We need to wait for the nodes to be rendered and then fit the view.
+    // cf https://github.com/xyflow/xyflow/issues/533
+    const onReactFlowInit = useCallback((rf) => {
+        rf.fitView();
+    }, []);
+    // END OF FIX

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/network-modification-tree.jsx` around lines 288 - 294, Wrap
the onReactFlowInit handler in useCallback to memoize it like the other
handlers: replace the plain function const onReactFlowInit = (rf) => {
rf.fitView(); } with a useCallback version (e.g., const onReactFlowInit =
useCallback((rf) => { rf.fitView(); }, [])), and ensure useCallback is imported
from React if not already; keep an empty dependency array since the handler only
needs to run once on init.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/network-modification-tree.jsx`:
- Around line 288-294: Wrap the onReactFlowInit handler in useCallback to
memoize it like the other handlers: replace the plain function const
onReactFlowInit = (rf) => { rf.fitView(); } with a useCallback version (e.g.,
const onReactFlowInit = useCallback((rf) => { rf.fitView(); }, [])), and ensure
useCallback is imported from React if not already; keep an empty dependency
array since the handler only needs to run once on init.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 11319195-9465-4952-90ff-f3ad6093d420

📥 Commits

Reviewing files that changed from the base of the PR and between 602ba8e and a8fdedc.

📒 Files selected for processing (1)

• src/components/network-modification-tree.jsx