Implement and Integrate java-slang CSEC Visualizer (#2926)

* Update ControlBarChapterSelect with Java

* Implement Java CSEC Visualizer

* Integrate CSEC Visualizer

* Linting errors for java-slang-csec

* Fix frontend test: rename Object to Obj to avoid potential name clash?

* Update snapshot

* Update imports from java-slang

* Fix lint

* Update snapshot

* Fix linting

* Fix typo

Co-authored-by: Richard Dominick <[email protected]>

* Add TODO for err source node location

---------

Co-authored-by: joel chan <[email protected]>
Co-authored-by: Richard Dominick <[email protected]>

Author: 3 people

src/commons/application/ApplicationTypes.ts

@@ -219,7 +219,7 @@ export const javaLanguages: SALanguage[] = [
     variant: Variant.DEFAULT,
     displayName: 'Java',
     mainLanguage: SupportedLanguage.JAVA,
-    supports: {}
+    supports: { cseMachine: true }
   }
 ];
 export const cLanguages: SALanguage[] = [

src/commons/controlBar/ControlBarChapterSelect.tsx

@@ -9,6 +9,7 @@ import {
   fullJSLanguage,
   fullTSLanguage,
   htmlLanguage,
+  javaLanguages,
   pyLanguages,
   SALanguage,
   schemeLanguages,
@@ -87,7 +88,8 @@ export const ControlBarChapterSelect: React.FC<ControlBarChapterSelectProps> = (
     // See https://github.com/source-academy/frontend/pull/2460#issuecomment-1528759912
     ...(Constants.playgroundOnly ? [fullJSLanguage, fullTSLanguage, htmlLanguage] : []),
     ...schemeLanguages,
-    ...pyLanguages
+    ...pyLanguages,
+    ...javaLanguages
   ];
 
   return (

src/commons/sagas/PlaygroundSaga.ts

@@ -5,6 +5,7 @@ import qs from 'query-string';
 import { SagaIterator } from 'redux-saga';
 import { call, delay, put, race, select } from 'redux-saga/effects';
 import CseMachine from 'src/features/cseMachine/CseMachine';
+import { CseMachine as JavaCseMachine } from 'src/features/cseMachine/java/CseMachine';
 
 import {
   changeQueryString,
@@ -100,12 +101,17 @@ export default function* PlaygroundSaga(): SagaIterator {
       if (newId !== SideContentType.cseMachine) {
         yield put(toggleUsingCse(false, workspaceLocation));
         yield call([CseMachine, CseMachine.clearCse]);
+        yield call([JavaCseMachine, JavaCseMachine.clearCse]);
         yield put(updateCurrentStep(-1, workspaceLocation));
         yield put(updateStepsTotal(0, workspaceLocation));
         yield put(toggleUpdateCse(true, workspaceLocation));
         yield put(setEditorHighlightedLines(workspaceLocation, 0, []));
       }
 
+      if (playgroundSourceChapter === Chapter.FULL_JAVA && newId === SideContentType.cseMachine) {
+        yield put(toggleUsingCse(true, workspaceLocation));
+      }
+
       if (
         isSourceLanguage(playgroundSourceChapter) &&
         (newId === SideContentType.substVisualizer || newId === SideContentType.cseMachine)

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

@@ -250,6 +250,7 @@ export function* evalCode(
   let lastDebuggerResult = yield select(
     (state: OverallState) => state.workspaces[workspaceLocation].lastDebuggerResult
   );
+  const isUsingCse = yield select((state: OverallState) => state.workspaces['playground'].usingCse);
 
   // Handles `console.log` statements in fullJS
   const detachConsole: () => void =
@@ -266,7 +267,7 @@ export function* evalCode(
         : isC
         ? call(cCompileAndRun, entrypointCode, context)
         : isJava
-        ? call(javaRun, entrypointCode, context)
+        ? call(javaRun, entrypointCode, context, currentStep, isUsingCse)
         : call(
             runFilesInContext,
             isFolderModeEnabled

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

@@ -1,24 +1,41 @@
+import { Chapter } from 'js-slang/dist/types';
 import { SagaIterator } from 'redux-saga';
 import { put, select } from 'redux-saga/effects';
 
 import { OverallState } from '../../../application/ApplicationTypes';
 import { actions } from '../../../utils/ActionsHelper';
+import { visualizeJavaCseMachine } from '../../../utils/JavaHelper';
 import { visualizeCseMachine } from '../../../utils/JsSlangHelper';
 import { WorkspaceLocation } from '../../../workspace/WorkspaceTypes';
 
 export function* updateInspector(workspaceLocation: WorkspaceLocation): SagaIterator {
   try {
-    const lastDebuggerResult = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].lastDebuggerResult
-    );
-    const row = lastDebuggerResult.context.runtime.nodes[0].loc.start.line - 1;
-    // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
-    yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
-    // We highlight only one row to show the current line
-    // If we highlight from start to end, the whole program block will be highlighted at the start
-    // since the first node is the program node
-    yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, [[row, row]]));
-    visualizeCseMachine(lastDebuggerResult);
+    const [lastDebuggerResult, chapter] = yield select((state: OverallState) => [
+      state.workspaces[workspaceLocation].lastDebuggerResult,
+      state.workspaces[workspaceLocation].context.chapter
+    ]);
+    if (chapter === Chapter.FULL_JAVA) {
+      const controlItem = lastDebuggerResult.context.control.peek();
+      let start = -1;
+      let end = -1;
+      if (controlItem?.srcNode?.location) {
+        const node = controlItem.srcNode;
+        start = node.location.startLine - 1;
+        end = node.location.endLine ? node.location.endLine - 1 : start;
+      }
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, [[start, end]]));
+      visualizeJavaCseMachine(lastDebuggerResult);
+    } else {
+      const row = lastDebuggerResult.context.runtime.nodes[0].loc.start.line - 1;
+      // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
+      // We highlight only one row to show the current line
+      // If we highlight from start to end, the whole program block will be highlighted at the start
+      // since the first node is the program node
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, [[row, row]]));
+      visualizeCseMachine(lastDebuggerResult);
+    }
   } catch (e) {
     // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
     yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));

src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap

@@ -352,17 +352,19 @@ exports[`CSE Machine component renders correctly 1`] = `
     data-testid="cse-machine-default-text"
     id="cse-machine-default-text"
   >
-    The CSE machine generates control, stash and environment model diagrams following a notation introduced in
-     
-    <a
-      href="https://sourceacademy.org/sicpjs/3.2"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <i>
-        Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
-      </i>
-    </a>
+    <span>
+      The CSE machine generates control, stash and environment model diagrams following a notation introduced in
+       
+      <a
+        href="https://sourceacademy.org/sicpjs/3.2"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <i>
+          Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
+        </i>
+      </a>
+    </span>
     .
     <br />
     <br />