CSE Machine: Implement navigation arrows to jump to the next/previous change in environment (frontend) (#2869)

* Add extra {} when the control item is of type Program

* Format files properly and remove unnecessary lines

* Update changepointSteps in context to match js-slang

* Implement navigation arrows to jump to next/previous change in environment

* update changepointSteps in context 2

* Format code

* Update changpointSteps in context to match js-slang 3

* Revert unintentional lockfile change

* Resolve conflict

* please do not remove config files

* Fix format

* Fix merging mistakes

---------

Co-authored-by: NhatMinh0208 <minhkhicon2468@gmail.com>

Author: DiligentPenguinn

src/commons/application/ApplicationTypes.ts

@@ -413,6 +413,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     currentStep: -1,
     stepsTotal: 0,
     breakpointSteps: [],
+    changepointSteps: [],
     activeEditorTabIndex: 0,
     editorTabs: [
       {
@@ -466,6 +467,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     currentStep: -1,
     stepsTotal: 0,
     breakpointSteps: [],
+    changepointSteps: [],
     activeEditorTabIndex: 0,
     editorTabs: [
       {

src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts

@@ -248,6 +248,9 @@ export function* evalCode(
         yield put(
           actions.updateBreakpointSteps(context.runtime.breakpointSteps, workspaceLocation)
         );
+        yield put(
+          actions.updateChangePointSteps(context.runtime.changepointSteps, workspaceLocation)
+        );
       }
     } else {
       // Safe to use ! as storyEnv will be defined from above when we call from EVAL_STORY
@@ -315,6 +318,7 @@ export function* evalCode(
     // But TS can't infer that yet, so we need a typecast here.
     yield put(actions.toggleUpdateCse(false, workspaceLocation as any));
     yield put(actions.updateBreakpointSteps(context.runtime.breakpointSteps, workspaceLocation));
+    yield put(actions.updateChangePointSteps(context.runtime.changepointSteps, workspaceLocation));
   }
   // Stop the home icon from flashing for an error if it is doing so since the evaluation is successful
   if (context.executionMethod === 'cse-machine' || context.executionMethod === 'interpreter') {

src/commons/sagas/__tests__/PlaygroundSaga.ts

@@ -87,7 +87,8 @@ describe('Playground saga tests', () => {
           updateCse: true,
           currentStep: -1,
           stepsTotal: 0,
-          breakpointSteps: []
+          breakpointSteps: [],
+          changepointSteps: []
         }
       }
     };
@@ -154,7 +155,8 @@ describe('Playground saga tests', () => {
           updateCse: true,
           currentStep: -1,
           stepsTotal: 0,
-          breakpointSteps: []
+          breakpointSteps: [],
+          changepointSteps: []
         }
       }
     };
@@ -221,7 +223,8 @@ describe('Playground saga tests', () => {
           updateCse: true,
           currentStep: -1,
           stepsTotal: 0,
-          breakpointSteps: []
+          breakpointSteps: [],
+          changepointSteps: []
         }
       }
     };
@@ -271,7 +274,8 @@ describe('Playground saga tests', () => {
           updateCse: true,
           currentStep: -1,
           stepsTotal: 0,
-          breakpointSteps: []
+          breakpointSteps: [],
+          changepointSteps: []
         }
       }
     };
@@ -340,7 +344,8 @@ describe('Playground saga tests', () => {
           updateCse: true,
           currentStep: -1,
           stepsTotal: 0,
-          breakpointSteps: []
+          breakpointSteps: [],
+          changepointSteps: []
         }
       }
     };
@@ -398,7 +403,8 @@ describe('Playground saga tests', () => {
           updateCse: true,
           currentStep: -1,
           stepsTotal: 0,
-          breakpointSteps: []
+          breakpointSteps: [],
+          changepointSteps: []
         }
       }
     };

src/commons/sideContent/content/SideContentCseMachine.tsx

@@ -50,6 +50,7 @@ type StateProps = {
   stepsTotal: number;
   currentStep: number;
   breakpointSteps: number[];
+  changepointSteps: number[];
   needCseUpdate: boolean;
   machineOutput: InterpreterOutput[];
 };
@@ -257,12 +258,14 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
               <Button
                 disabled={!this.state.visualization}
                 icon="chevron-left"
-                onClick={this.stepPrevious}
+                onClick={
+                  CseMachine.getControlStash() ? this.stepPrevious : this.stepPrevChangepoint
+                }
               />
               <Button
                 disabled={!this.state.visualization}
                 icon="chevron-right"
-                onClick={this.stepNext}
+                onClick={CseMachine.getControlStash() ? this.stepNext : this.stepNextChangepoint}
               />
               <Button
                 disabled={!this.state.visualization}
@@ -450,6 +453,31 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
     this.sliderShift(0);
     this.sliderRelease(0);
   };
+
+  private stepNextChangepoint = () => {
+    for (const step of this.props.changepointSteps) {
+      if (step > this.state.value) {
+        this.sliderShift(step);
+        this.sliderRelease(step);
+        return;
+      }
+    }
+    this.sliderShift(this.props.stepsTotal);
+    this.sliderRelease(this.props.stepsTotal);
+  };
+
+  private stepPrevChangepoint = () => {
+    for (let i = this.props.changepointSteps.length - 1; i >= 0; i--) {
+      const step = this.props.changepointSteps[i];
+      if (step < this.state.value) {
+        this.sliderShift(step);
+        this.sliderRelease(step);
+        return;
+      }
+    }
+    this.sliderShift(0);
+    this.sliderRelease(0);
+  };
 }
 
 const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
@@ -479,6 +507,7 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
     stepsTotal: workspace.stepsTotal,
     currentStep: workspace.currentStep,
     breakpointSteps: workspace.breakpointSteps,
+    changepointSteps: workspace.changepointSteps,
     needCseUpdate: workspace.updateCse,
     machineOutput: workspace.output
   };

src/commons/workspace/WorkspaceActions.ts

@@ -58,6 +58,7 @@ import {
   UPDATE_ACTIVE_EDITOR_TAB,
   UPDATE_ACTIVE_EDITOR_TAB_INDEX,
   UPDATE_BREAKPOINTSTEPS,
+  UPDATE_CHANGEPOINTSTEPS,
   UPDATE_CURRENT_ASSESSMENT_ID,
   UPDATE_CURRENT_SUBMISSION_ID,
   UPDATE_CURRENTSTEP,
@@ -495,6 +496,13 @@ export const updateBreakpointSteps = createAction(
   })
 );
 
+export const updateChangePointSteps = createAction(
+  UPDATE_CHANGEPOINTSTEPS,
+  (changepointSteps: number[], workspaceLocation: WorkspaceLocation) => ({
+    payload: { changepointSteps, workspaceLocation }
+  })
+);
+
 export const updateLastDebuggerResult = createAction(
   UPDATE_LAST_DEBUGGER_RESULT,
   (lastDebuggerResult: any, workspaceLocation: WorkspaceLocation) => ({

src/commons/workspace/WorkspaceReducer.ts

@@ -77,6 +77,7 @@ import {
   UPDATE_ACTIVE_EDITOR_TAB,
   UPDATE_ACTIVE_EDITOR_TAB_INDEX,
   UPDATE_BREAKPOINTSTEPS,
+  UPDATE_CHANGEPOINTSTEPS,
   UPDATE_CURRENT_ASSESSMENT_ID,
   UPDATE_CURRENT_SUBMISSION_ID,
   UPDATE_CURRENTSTEP,
@@ -1077,6 +1078,14 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           breakpointSteps: action.payload.breakpointSteps
         }
       };
+    case UPDATE_CHANGEPOINTSTEPS:
+      return {
+        ...state,
+        [workspaceLocation]: {
+          ...state[workspaceLocation],
+          changepointSteps: action.payload.changepointSteps
+        }
+      };
     case UPDATE_LAST_DEBUGGER_RESULT:
       return {
         ...state,

src/commons/workspace/WorkspaceTypes.ts

@@ -61,6 +61,7 @@ export const UPDATE_SUBLANGUAGE = 'UPDATE_SUBLANGUAGE';
 export const UPDATE_CURRENTSTEP = 'UPDATE_CURRENTSTEP';
 export const UPDATE_STEPSTOTAL = 'UPDATE_STEPSTOTAL';
 export const UPDATE_BREAKPOINTSTEPS = 'UPDATE_BREAKPOINTSTEPS';
+export const UPDATE_CHANGEPOINTSTEPS = 'UPDATE_CHANGEPOINTSTEPS';
 export const CHANGE_SUBLANGUAGE = 'CHANGE_SUBLANGUAGE';
 export const UPDATE_LAST_DEBUGGER_RESULT = 'UPDATE_LAST_DEBUGGER_RESULT';
 export const UPDATE_LAST_NON_DET_RESULT = 'UPDATE_LAST_NON_DET_RESULT';
@@ -91,6 +92,7 @@ type PlaygroundWorkspaceAttr = {
   readonly currentStep: number;
   readonly stepsTotal: number;
   readonly breakpointSteps: number[];
+  readonly changepointSteps: number[];
 };
 export type PlaygroundWorkspaceState = PlaygroundWorkspaceAttr & WorkspaceState;
 

src/commons/workspace/__tests__/WorkspaceReducer.ts

@@ -861,7 +861,8 @@ describe('LOG_OUT', () => {
       updateCse: true,
       currentStep: -1,
       stepsTotal: 0,
-      breakpointSteps: []
+      breakpointSteps: [],
+      changepointSteps: []
     };
 
     const logoutDefaultState: WorkspaceManagerState = {