CSE machine: StreamViz arrow drawing

package.json

@@ -200,6 +200,6 @@
   },
   "resolutions": {
     "@types/estree": "1.0.8",
-    "vite": "^8.0.0"
+    "vite": "^8.0.0",
   }
 }

src/commons/application/ApplicationTypes.ts

@@ -449,6 +449,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     stepsTotal: 0,
     breakpointSteps: [],
     changepointSteps: [],
+    streamsPointSteps: [],
     activeEditorTabIndex: 0,
     editorTabs: [
       {
@@ -504,6 +505,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     stepsTotal: 0,
     breakpointSteps: [],
     changepointSteps: [],
+    streamsPointSteps: [],
     activeEditorTabIndex: 0,
     editorTabs: [
       {

src/commons/mocks/ContextMocks.ts

@@ -38,7 +38,8 @@ export function mockRuntimeContext(): Context {
     objectCount: 0,
     envStepsTotal: 0,
     breakpointSteps: [],
-    changepointSteps: []
+    changepointSteps: [],
+    streamsPointSteps: []
   };
   return context;
 }

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

@@ -368,6 +368,8 @@ export function* evalCodeSaga(
           yield put(
             actions.updateChangePointSteps(context.runtime.changepointSteps, workspaceLocation)
           );
+          const streamsPointSteps = (context.runtime as any).streamsPointSteps ?? [];
+          yield put(actions.updateStreamsPointSteps(streamsPointSteps, workspaceLocation));
         }
       }
     } else {
@@ -444,6 +446,8 @@ export function* evalCodeSaga(
     yield put(actions.toggleUpdateCse(false, workspaceLocation as any));
     yield put(actions.updateBreakpointSteps(context.runtime.breakpointSteps, workspaceLocation));
     yield put(actions.updateChangePointSteps(context.runtime.changepointSteps, workspaceLocation));
+    const streamsPointSteps = (context.runtime as any).streamsPointSteps ?? [];
+    yield put(actions.updateStreamsPointSteps(streamsPointSteps, 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') {

src/commons/sagas/__tests__/PlaygroundSaga.test.ts

@@ -88,7 +88,8 @@ describe('Playground saga tests', () => {
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
-          changepointSteps: []
+          changepointSteps: [],
+          streamsPointSteps: []
         }
       }
     };
@@ -157,7 +158,8 @@ describe('Playground saga tests', () => {
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
-          changepointSteps: []
+          changepointSteps: [],
+          streamsPointSteps: []
         }
       }
     };
@@ -226,7 +228,8 @@ describe('Playground saga tests', () => {
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
-          changepointSteps: []
+          changepointSteps: [],
+          streamsPointSteps: []
         }
       }
     };
@@ -278,7 +281,8 @@ describe('Playground saga tests', () => {
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
-          changepointSteps: []
+          changepointSteps: [],
+          streamsPointSteps: []
         }
       }
     };
@@ -349,7 +353,8 @@ describe('Playground saga tests', () => {
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
-          changepointSteps: []
+          changepointSteps: [],
+          streamsPointSteps: []
         }
       }
     };
@@ -409,7 +414,8 @@ describe('Playground saga tests', () => {
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
-          changepointSteps: []
+          changepointSteps: [],
+          streamsPointSteps: []
         }
       }
     };

src/commons/sideContent/content/SideContentCseMachine.tsx

@@ -56,6 +56,7 @@ type StateProps = {
   currentStep: number;
   breakpointSteps: number[];
   changepointSteps: number[];
+  streamsPointSteps: number[];
   needCseUpdate: boolean;
   machineOutput: InterpreterOutput[];
   chapter: Chapter;
@@ -300,6 +301,25 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                     />
                   </AnchorButton>
                 </Tooltip>
+                <Tooltip content="Pair Visualisation" compact>
+                  <AnchorButton
+                    onMouseUp={() => {
+                      if (this.state.visualization) {
+                        CseMachine.togglePairCreationMode();
+                        Layout.draw();
+                        CseMachine.redraw();
+                      }
+                    }}
+                    icon="array"
+                    disabled={!this.state.visualization}
+                  >
+                    <Checkbox
+                      checked={CseMachine.getPairCreationMode()}
+                      disabled={!this.state.visualization}
+                      style={{ margin: 0 }}
+                    />
+                  </AnchorButton>
+                </Tooltip>
               </ButtonGroup>
             )}
             <ButtonGroup>
@@ -540,7 +560,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
   };
 
   private stepNextChangepoint = () => {
-    for (const step of this.props.changepointSteps) {
+    const changeSteps = this.getActiveChangeSteps();
+    for (const step of changeSteps) {
       if (step > this.state.value) {
         this.sliderShift(step);
         this.sliderRelease(step);
@@ -552,8 +573,9 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
   };
 
   private stepPrevChangepoint = () => {
-    for (let i = this.props.changepointSteps.length - 1; i >= 0; i--) {
-      const step = this.props.changepointSteps[i];
+    const changeSteps = this.getActiveChangeSteps();
+    for (let i = changeSteps.length - 1; i >= 0; i--) {
+      const step = changeSteps[i];
       if (step < this.state.value) {
         this.sliderShift(step);
         this.sliderRelease(step);
@@ -563,6 +585,12 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
     this.sliderShift(0);
     this.sliderRelease(0);
   };
+
+    private getActiveChangeSteps = () => {
+    return CseMachine.getPairCreationMode()
+      ? this.props.streamsPointSteps
+      : this.props.changepointSteps;
+  };
 }
 
 const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
@@ -593,6 +621,7 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
     currentStep: workspace.currentStep,
     breakpointSteps: workspace.breakpointSteps,
     changepointSteps: workspace.changepointSteps,
+    streamsPointSteps: workspace.streamsPointSteps,
     needCseUpdate: workspace.updateCse,
     machineOutput: workspace.output,
     chapter: workspace.context.chapter

src/commons/workspace/WorkspaceActions.ts

@@ -272,6 +272,13 @@ const newActions = createActions('workspace', {
     changepointSteps,
     workspaceLocation
   }),
+  updateStreamsPointSteps: (
+    streamsPointSteps: number[],
+    workspaceLocation: WorkspaceLocation
+  ) => ({
+    streamsPointSteps,
+    workspaceLocation
+  }),
   updateLastDebuggerResult: (lastDebuggerResult: any, workspaceLocation: WorkspaceLocation) => ({
     lastDebuggerResult,
     workspaceLocation

src/commons/workspace/WorkspaceTypes.ts

@@ -49,6 +49,7 @@ type PlaygroundWorkspaceAttr = {
   readonly stepsTotal: number;
   readonly breakpointSteps: number[];
   readonly changepointSteps: number[];
+  readonly streamsPointSteps: number[];
 };
 export type PlaygroundWorkspaceState = PlaygroundWorkspaceAttr & WorkspaceState;
 

src/commons/workspace/__tests__/WorkspaceReducer.test.ts

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

src/commons/workspace/reducers/cseReducer.ts

@@ -78,5 +78,16 @@ export const handleCseAndStepperActions = (
           changepointSteps: action.payload.changepointSteps
         }
       };
+    })
+    .addCase(WorkspaceActions.updateStreamsPointSteps, (state, action) => {
+      // Keep streams change-points in sync for stream visualiser navigation
+      const workspaceLocation = getWorkspaceLocation(action);
+      return {
+        ...state,
+        [workspaceLocation]: {
+          ...state[workspaceLocation],
+          streamsPointSteps: action.payload.streamsPointSteps
+        }
+      };
     });
 };

src/features/cseMachine/CseMachine.tsx

@@ -30,21 +30,29 @@ export default class CseMachine {
   private static printableMode: boolean = false;
   private static controlStash: boolean = false; // TODO: discuss if the default should be true
   private static stackTruncated: boolean = false;
+  private static pairCreationMode: boolean = false;
   private static centerAlignment: boolean = false;
   private static centerAlignmentToggled: boolean = false;
   private static environmentTree: EnvTree | undefined;
   private static currentEnvId: string;
   private static control: Control | undefined;
   private static stash: Stash | undefined;
+    private static streamLineage: Map<string, string[]>;
   public static togglePrintableMode(): void {
     CseMachine.printableMode = !CseMachine.printableMode;
   }
   public static toggleControlStash(): void {
+    CseMachine.pairCreationMode = false;
     CseMachine.controlStash = !CseMachine.controlStash;
   }
   public static toggleStackTruncated(): void {
     CseMachine.stackTruncated = !CseMachine.stackTruncated;
   }
+  public static togglePairCreationMode(): void {
+    CseMachine.controlStash = false;
+    CseMachine.pairCreationMode = !CseMachine.pairCreationMode;
+    CseMachine.redraw();
+  }
   public static setClearDeadFrames(enabled: boolean): void {
     Layout.clearDeadFrames = enabled;
   }
@@ -114,7 +122,22 @@ export default class CseMachine {
       }
     }
   }
+  public static getStreamLineage(key: string): string[] | undefined {
+    return CseMachine.streamLineage.get(key);
+  }
+  public static findKeyByValueInMap(value: any) {
+    for (const [key, array] of CseMachine.streamLineage.entries()) { 
+      // console.log(key + array);
+      if (array.includes(value)) {
+        return key; 
+      }
+    }
 
+    return undefined;
+  }
+  public static getPairCreationMode(): boolean {
+    return CseMachine.pairCreationMode;
+  }
   public static isControl(): boolean {
     return this.control ? !this.control.isEmpty() : false;
   }
@@ -149,6 +172,7 @@ export default class CseMachine {
       throw new Error('CSE machine not initialized');
     CseMachine.control = context.runtime.control;
     CseMachine.stash = context.runtime.stash;
+    CseMachine.streamLineage = context.streamLineage;
     CseMachine.setClearDeadFrames(false);
 
     Layout.setContext(
@@ -347,7 +371,13 @@ export default class CseMachine {
         CseAnimation.updateAnimation();
       }
 
-      if (
+      if (CseMachine.getPairCreationMode()) {
+        Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
+        this.setVis(Layout.draw());
+        // this.setVis(Layout.draw());
+        // console.log(Layout.currentDarkPairs);
+        // this.setVis(Layout.currentDarkPairs);
+      } else if (
         CseMachine.getPrintableMode() &&
         CseMachine.getControlStash() &&
         CseMachine.getStackTruncated() &&