Making Arrow filtering and Center Alignment toggles persistent across CSE updates

[ThatLi]

Description

This makes the toggles for arrow filtering and center alignment persistent across Editor resets from the shift + Enter, etc.
As outlined by the suggestions made by prof. Martin and the other frontend teams below.

This resolves #3788 , but this is achieved without using Redux.

How to test

Using the code excerpt below:

function foo(n) {
    const msg = "Frame";
}
const arr = [];
for (let j = 0; j < 3; j = j + 1) {
    foo(j);
    arr[j] = [j];
}

Tick the toggles for centerAlignment and deselect one of the arrow filter, press shift + Enter or click 'Run'.
Observe that the toggles are not reset to their default status anymore, the choices are now persistent!

Checklist

• I have tested this code
• I have updated the documentation

[gemini-code-assist]

Code Review

This pull request modifies the CSE machine to maintain the user's current step during updates and adjust layout behavior. The review identifies a critical infinite loop in SideContentCseMachine.tsx triggered by evaluation calls within the component lifecycle. Additionally, the reviewer noted redundant state management for center alignment in Playground.tsx and unnecessary coordinate reassignment in CseMachineLayout.tsx, suggesting that existing internal logic already handles these cases more robustly.

[gemini-code-assist]

Calling this.sliderRelease(preservedStep) inside componentDidUpdate will trigger an infinite loop of evaluations.

When an evaluation finishes, needCseUpdate transitions from true to false, triggering this block. sliderRelease then calls handleEditorEval, which dispatches evalEditor. In Playground.tsx, evalEditor sets updateCse (the source for needCseUpdate) back to true. Once that evaluation completes, needCseUpdate becomes false again, and the cycle repeats.

If the goal is to restore the step after a code change, this logic needs a guard to prevent re-triggering evaluation if it was already initiated by this restoration process, or the step reset logic in Playground.tsx should be adjusted instead.

[gemini-code-assist]

Manually toggling center alignment here is redundant and potentially ineffective.

1. Redundancy: CseMachine.drawCse already handles the temporary state management (setting centerAlignment to false) required to build the layout cache internally (see CseMachine.tsx lines 344-363).
2. Inconsistency: Since evalEditor is an asynchronous operation (it dispatches a saga), the toggle-back at line 447 will execute almost immediately, likely before the CSE machine actually performs its draw. This means the machine will still see the 'on' state during its execution.
3. Side Effects: toggleCenterAlignment sets the centerAlignmentToggled flag, which may trigger unnecessary coordinate recalculations in redraw.

Suggested change

	const wasCenterAligned = CseMachine.getCenterAlignment();
	CseMachine.clearCachedLayouts();
	if (wasCenterAligned) {
	CseMachine.toggleCenterAlignment();
	}
	CseMachine.clearCachedLayouts();

References

1. When refactoring components, avoid introducing state tracking mechanisms if the current behavior is an intentional design choice.

[gemini-code-assist]

This toggle-back logic should be removed along with the initial toggle at line 430. As noted previously, the internal state management in CseMachine.drawCse is sufficient and more robust for handling layout cache generation.

References

1. When refactoring components, avoid introducing state tracking mechanisms if the current behavior is an intentional design choice.

[coveralls]

Coverage Report for CI Build 26277734870

Coverage decreased (-0.001%) to 42.321%

Details

• Coverage decreased (-0.001%) from the base build.
• Patch coverage: 7 uncovered changes across 2 files (3 of 10 lines covered, 30.0%).
• 1 coverage regression across 1 file.

Uncovered Changes

File	Changed	Covered	%
src/pages/playground/Playground.tsx	4	0	0.0%
src/commons/sideContent/content/SideContentCseMachine.tsx	3	0	0.0%

Coverage Regressions

1 previously-covered line in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
src/pages/playground/Playground.tsx	1	54.49%

---

Coverage Stats

Relevant Lines:	13426
Covered Lines:	6124
Line Coverage:	45.61%
Relevant Branches:	6935
Covered Branches:	2493
Branch Coverage:	35.95%
Branches in Coverage %:	Yes
Coverage Strength:	27.37 hits per line

---

💛 - Coveralls