update frontend for scheme data visualisation (#2916)

* Switch Scheme languages fully to CSE Machine

* Updated tests with windows machine

* Ran tests on different windows machine

* resolve all issues with scheme CSE machine

* update tests

* reenable csc machine for scheme

* add prototype visualisations for scheme data types

* update tests

* simplify logic for checking prelude

* Make cse refer to correct closure

* Centralise logic for alternate languages

* separate scheme as its own file

* add scheme primitive representation to cse machine

* update representation of control

* Squashed commit of the following:

commit 27f3fe4
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Sun Apr 14 15:21:16 2024 +0800

    bumping js-slang (#2934)

commit 812393a
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sun Apr 14 13:28:11 2024 +0800

    Migrate to TypeScript v5 (#2850)

    * Bump TypeScript to v5.4

    Also updated tsconfig.json to remove a deprecated config.

    * Fix type error

    * Fix type error

    * Fix type error

    * Fix type error

    * Fix type error

    * Fix lint dependencies and config

    * Fix type errors

    * Fix type error

    * Fix format

    * Fix type errors

    Also standardized React hooks import style.

    * Fix type error

    * Fix type error

    * Fix format

    * Bump typescript to v5.4.3

    * Fix type errors

    * Add some `as any` assertions

    FIXMEs were also incorporated for future refactoring.

    * Update lockfile post-merge

    * Bump dependencies

    * Update lockfile post-merge

    * Create type-safe object helpers

    * Fix type error

    * Fix type error

    * Fix type error

    * Create more type helpers

    * Fix type error

    * Fix type error

    Also removed unnecessary type annotation.

    * Fix type error

    * Fix type error

    * Fix type errors

    * Fix type error

    * Fix type error

    * Fix type errors

    * Fix type error

    * Fix type error

    * Refactor filter logic to fix type error

    * Fix types

    * Address comments

commit 87e646d
Author: CZX <CZX123@users.noreply.github.com>
Date:   Sat Apr 13 23:05:04 2024 +0800

    CSE UI/UX: Animations & UI improvements (#2931)

    * display array indices

    * animate moving numbers from agenda to stash

    * add code to read from previous agenda

    * Add animation components and some abstraction

    * Change test cases

    * Fix bug

    Properly disable animations when control and stash option is not enabled

    * display array indices

    * animate moving numbers from agenda to stash

    * add code to read from previous agenda

    * Add animation components and some abstraction

    * Change test cases

    * Fix bug

    Properly disable animations when control and stash option is not enabled

    * Fix issues with names after rebase

    * Fix animation bugs and refactoring of animation classes and logic

    * Fix mistake in test snapshot

    * Revert "Merge branch 'cse-uiux' of https://github.com/source-academy/frontend into cse-uiux"

    This reverts commit 7ef87d8, reversing
    changes made to efa8c57.

    * Restructure animation classes

    * Add binary operator animation

    * Add unary operator animation

    * Begin work on block separation animation

    * Improve binary operation animation, and improve the versatility of the base animation components

    * Improve the unary operation and block animations

    * Update test cases and remove block animation conditions

    * Add pop animation (linear movement)

    * Improve pop animation, and cleanup code for pull request

    * Revert envVisualizer test snapshot changes

    * Add assignment animation

    * Work on binding lookup function

    * Improve assignment animation and touch up on other animations, added experimental Column component

    * Add lookup animation (Identifier)

    * Improve lookup animation

    * Hide arrows for lookup animation and show them when it's finished

    * Remove AnimationUtils.tsx file

    replaced with AnimationUtils.ts

    * Slow down assignment and lookup animations

    * Fix issues with merging

    * Add environment animation

    * Refactor setDestination and animate to new method animateTo

    * Improve env animation and rename a utility function

    * Added animated arrows and also modified GenericArrow and improve assignment animation

    * Update test snapshot and formatting changes

    * Add arrow animation to lookup animation, and fix animateTo function behavior

    * Add FrameCreationAnimation

    * Rewrote all animation components for greater flexibility and performance

    * Shorten duration and delay names, and add listener functionality

    * Move experimental file

    * Fix issues with `this` keyword

    * Rewrite AnimatedTextbox to make it easier for both Text and Rect within it to be individually animated

    * Improve FrameCreationAnimation and bunch of other fixes

    * Fix some issues with `undefined` inside the control and stash

    * Make compact components the new default and remove any mentions to the old components.
    Also removes the experimental button toggle.

    * Update test snapshots

    * Clean up testing code a little

    * Formatting changes

    * Fix issues after merge

    * Revert some incorrect merges

    * Add FunctionFrameCreationAnimation

    if possible, reusing AssignmentAnimation would make handling fade-in of values easier

    * Add getNodeDimensions and getNodeLocation

    * Add ArrowFunctionExpressionAnimation

    * Add BranchAnimation

    simple animation for replacing a branch item in the control with the correct code block

    * Sort instr types in alphabetical order

    * Add ArrayLiteralAnimation

    * Added cases for block splitting

    for/while loops and conditional expressions

    * Improve animations for arrow functions and branch instruction

    * Update function application animation

    * Special changes for js-slang branch: add new objectCount property and filter program bindings

    * Change dummy binding behavior to match js-slang update

    * Fix array references being lost in frames due to cloning property descriptors

    * Simplify code

    * Add ArrayAccessAnimation

    * Begin work on ArrayAssignmentAnimation

    todo: animate arrows for object assignment

    * Fix application animation for predeclared funcs

    * Changes to solve issue 2700 and some fixes regarding global frame

    * Re-add animations

    * Fix many issues regarding displaying objects on global frame

    * Formatting

    * Simplify merging of environment heaps and drawing of bindings

    * Fix infinite loop in `findObjects`

    * Disable animations if control is truncated

    Could allow such functionality in the future, but currently animations break with a truncated control.

    * Fix AssignmentAnimation

    previous use of binding.height() causes positioning issues with nested array assignment

    * Increase space between closure and frame

    * Change for/while instr to use BranchAnimation

    * Initial Commit

    * More fixes and added faded gc objects

    * Disable variadic function animation

    * Increase spacing for global closure

    between closure circles and global frame border

    * Add missing case 'FunctionExpression'

    animates the moving of a functionexpression to the stash as a closure

    * Fix variadic function checker

    * Improve FunctionApplicationAnimation

    for nullary functions, allow the closure stash item to fade away

    * Improve assignment animation

    * Run format

    * Simplify check frame creation

    * Fix params text and added SourceObject to display runes correctly

    * bumping js-slang

    * Revamp unreferenced behavior and update snapshots

    * Run format

    * Update snapshot

    * Bump js-slang

    * Fix issues after merge

    * Fix frames creeping to the left

    * Improve rune display, revamp color system and add color interpolation

    * UI & animation improvements

    * Big improvements for many animations

    * More improvements, better transitions between border colors

    * More improvements and update snapshot

    * Update types

    * Remove explicit fragment

    * Remove explicit fragment again

    * Update typings

    * Merge branch 'cse-uiux2' of https://github.com/source-academy/frontend into cse-uiux2

    * Fix findObjects

    * Add docs

    * Re-add color dependencies for Java CSE

    * Re-add color dependencies for Java CSE

    * Fix format

    * Array access & asgn animation improvements, general polish

    * Cleanup and update java cse machine colors to use new functions

    * Move type helpers from animation utils to global type helpers file

    * Run format

    * Fix fn to frame arrow, and cleanup arrow code

    ---------

    Co-authored-by: notnotmax <156508404+notnotmax@users.noreply.github.com>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
    Co-authored-by: henz <henz@comp.nus.edu.sg>

commit 4f6be6b
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sat Apr 13 21:05:41 2024 +0800

    Refactor frontend part 7 (#2846)

    * Improve useRef type arguments for HTML elements

    * Use named imports for React hooks

    * Refactor MobileWorkspace

    * Replace if statements with optional invocation
    * Move constant `SideContentTab`s out of FC body

    * Simplify classnames call

    * Remove unnecessary braces around string attributes

    Only done for non-UI (non-message/label) strings as these UI strings
    will be pulled out for internationalization in the future.

    * Deduplicate dependencies

    * Create `useTokens` hook

    * Update default throw behavior for `useTokens`

    * Render SICP chatbot only when logged in

    * Fix overloaded types for `useTokens`

    Done following default behavior change.

    * Use `useTokens` where applicable

    * Refactor SICP chatbox

    * Use `useTokens`
    * Move API call to separate file
    * Update React import to default import

    * Refactor SICP chatbox further

    * Update imports
    * Create and use ChatMessage type alias

    * Reorganize SICP chatbot files

    * Refactor chat completion logic

    * Use dependency injection in prompt builder
    * Refactor prompt builder logic
    * Refactor prompt builder to separate file
    * Create type definitions
    * Move, type, rename SICP section summaries
    * Improve typing

    * Refactor SICP chat box component

    * Remove unnecessary template literal
    * Refactor constants out of component
    * Create type definitions
    * Create `CONTEXT_SIZE` constant to replace magic numbers
    * Refactor logic to use `CONTEXT_SIZE` constant
    * Remove unnecessary state variables
    * Refactor payload generation
    * Move fetching logic from event handler to effect callback instead
    * Rename `cleanMessage` to `resetChat`

    * Decouple rendering logic from chat completion logic

    * Only store string content in `ChatMessage` type
    * Move rendering function outside component to prevent unnecessary recreation
    * Update render function signature
    * Restore GPT-generated output warning for bot messages
    * Refactor render function logic
    * Fix React render warnings
    * Add TODOs for full Markdown/stories-like parsing

    Also uses non-greedy regex to match and split code blocks:

    * Only match JavaScript code blocks
    * Fix false matches
    * Supports multiple code blocks in a single message

    * Fix whitespace issue

    * Fix filename capitalization

    * Remove duplicated badge code

    * Fix double request

    * Block chat input when loading response

commit c1abec1
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sat Apr 13 20:35:47 2024 +0800

    Bump Blueprint; remove obsolete hotfixes, deprecations (#2773)

    * Bump minimum Blueprint version

    Done to allow compatibility with new React 18 `createRoot`.

    * Migrate from deprecated `Tooltip2`, `Popover2`

    Done partially so far, with the full migration in a subsequent commit.

    * Migrate more components to fix deprecations

    * Update test snapshots

    * Migrate remaining components to fix deprecations

    * Remove deprecated package from `requireProvider`

    This would necessitate a corresponding change in modules to ensure they
    don't import the deprecated package, or simply just mark it as
    non-external.

    * Remove `@blueprintjs/popover2` package completely

    * Fix format

    * Fix format

    * Reformat files post-merge

    * Bump Blueprint version

    * Use BP `Classes` utility instead of raw strings

    Prevents regressions when the CSS namespace changes in the meantime
    while we still have yet to migrate away fully from the CSS API.

    * Fix lint

    * Migrate to new notifications API

    Removes the old hotfix now that Blueprint supports it.

commit d2b322a
Author: Josh Thoo Jen Sen <110712708+josh1248@users.noreply.github.com>
Date:   Sat Apr 13 20:03:17 2024 +0800

    Implement isGradingPublished (plus related features) (#2856)

    * Dummy publish grading function

    * skeleton redux loop for publishGrading, update GradingOverview

    * New column filter for isPublished (WIP)

    * Implement anticipated backend format and route implementations for publish and unpublish buttons

    * Remove misleading devnote and simplify message contents

    * fix: Change gradingOverviews to use backend response

    * Readjust publish button from HTML icon button to Blueprintjs text button

    * Publish and unpublish buttons set up

    * set up frontend-only type submissionProgress derived from backend status and isPublished

    * Implement derived submissionProgress frontend field from status and isGradingPublished from backend

    * Improve type safety in Grading page

    * Implement business logic to disable unsubmission if published or not submitted

    * Use notPublished param in backend

    * minor type safety change

    * Update new actions post-merge conflicts

    * Update tests

    * Update jsdocs and field names from ungraded to unpublished

    * adjust field names in test from unpublishedFilter to publishedFilter

    * Updated showGrading to be based on published status

    * Update getAssessmentOverviews to compute submission progress

    * Fix tests

    * Scaffold function for comprehensive progress status (WIP)

    * Update RequestsSaga.ts

    * fix crash

    * Introduce soon-to-be comprehensive field into table

    * Shift conversion functions into utils

    * Update business logic using comprehensive state

    * Introduce progress status to assessment overviews

    * clean up display of progressStatus

    * remove derived submissionProgress field, add in status field from backend

    * remove direct gradingStatus use in grading page

    * remove gradingStatus from assessments

    * Remove more references to gradingStatus

    * Replace references to gradingStatus with progress

    * there is a lot of reference to gradingStatus.

    * Replace gradingStatus with progress in testing

    * Fully remove gradingStatus and replace with progress

    * Fix accidental import

    * Update to use new backend parameter names in backend

    * Remove isPublished field entirely from grading overviews to avoid confusion with publishing within assessment overviews

    * Update tests

    * Dummy publish all button in ground control

    * redux loop for publishall and unpublishall (part 1)

    * Remove re-autograde for published or non-submitted assessments

    * Add publishAll button

    * Replace deprecated ag-grid functions with current versions

    * Implement unpublish all button

    * Add unique key, avoid specialkey flag from react

    * Fix button layout

    * Fix button format

    * increase width for accessibility

    * autoPublish settings inserted into admin panel configs

    * cleanup of isAutoPublished field within assessment configs

    * update tests for assessmentConfiguration

    * remove un-needed import

    * remove debug-only submissionStatus in grading submissions table

    * Revert accidental removal of XP field

    * bp5-minimal tag to clean up bulk publishing buttons - thanks gabriel :)

    * Fix errors post-merge

    * Fix lint error

    * feat: Implement published and unpublished notifications and remove deprecated ones

    * chore: Remove commented code

    * Fix compile error

    * Remove unnecessary typecast

    * Remove unnecessary typecast

    * Remove unused import

    * update notification types to reflect backend

    * change notification types to reflect backend changes

    * remove git stash artifacts

    * remove git stash artefacts

    * add tooltips, update assessment fields

    * remove development artifacts

    * remove TODO comment as issue has been raised

    * Update GradingUtils.ts jsdocs

    * linting

    * readjust progress statuses and conversion functions

    * update colours and logos

    * expose backend isGradingPublished field and update tests

    * update assessment cards to show purely based on isGradingPublished status without further check for graded

    * remove hardcoded assessment status

    * linting

    * revert yarn lock change

    * Update yarn.lock

    * update mocks and tests

    * remove un-needed import

    * linting

    * Use enum values instead of strings for color keys

    * Use prop over BP CSS API

    * remove un-needed field calculation, fix typos

    * update student username to show nusnet id instead of duplicating student name (thanks gabriel :D)

    ---------

    Co-authored-by: GabrielCWT <77312579+GabrielCWT@users.noreply.github.com>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

commit 4556d3f
Author: Liew Xin Yi <e0550381@u.nus.edu>
Date:   Sat Apr 13 19:43:51 2024 +0800

    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 <34370238+RichDom2185@users.noreply.github.com>

    * Add TODO for err source node location

    ---------

    Co-authored-by: joel chan <joelchanzhiyang@gmail.com>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

commit 612f68b
Author: Lai Mei Tin <77192251+1001mei@users.noreply.github.com>
Date:   Sat Apr 13 18:02:16 2024 +0800

    Integrate Java type checker and compiler into frontend (#2925)

    * Integrate Java compiler into frontend

    * Add typechecker from java-slang

    * Add program terminated succesfully output to Java

    * Bump java-slang to 1.0.7

    * Remove program terminated output from java in frontend

    * Change ProgramTerminatedSuccessfully to anonymous class in java

    * Bump java-slang to 1.0.8

    * Bump java-slang to 1.0.9

    * Add process/browser to craco polyfill

    * Add java-parser to jest transform ignore patterns

    * Bump java-slang to 1.0.13

    * Add mocks for java-slang functions

    * Fix wrong error label in java helper

    * Increase max file size to cache to 20

    ---------

    Co-authored-by: Bryan Loh <bryanlohxz@gmail.com>
    Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>

commit d1c0a45
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sat Apr 13 14:53:02 2024 +0800

    Migrate to Redux Toolkit part 5 (#2866)

    * Migrate remaining workspace reducers to RTK

    * Migrate remaining action creators to RTK

    * Remove `typesafe-actions` dependency

    Type safety is now achieved via Redux Toolkit.

    * Update testcase

    * Fix format

    * Fix compile error

    * Fix errors

    * Restore old NOTIFY_PROGRAM_EVALUATED reducer

    Done to optimize the diff and will be removed later.

commit 0c45606
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Fri Apr 12 12:34:11 2024 +0800

    bumping js-slang (#2929)

commit 02059bf
Author: John Wong <johnwz123@gmail.com>
Date:   Fri Apr 12 01:59:37 2024 +0800

    Modify mobile keyboard to be scrollable (#2915)

    * Modify mobile keyboard to be scrollable

    * Mobile Keyboard is now swipeable

    * Remove mobile-keyboard-row-toggle styles

    * Fix formatting

    * Remove console.log statements

    ---------

    Co-authored-by: Joven Soh <34702990+JovenSoh@users.noreply.github.com>

commit 4cc0204
Author: John Wong <johnwz123@gmail.com>
Date:   Thu Apr 11 03:28:57 2024 +0800

    Add full-screen button for Playground side content (#2911)

    * Added fullscreen button to playground side content

    * Refactor fullscreen button to use class as reference and Blueprint's Tooltip

    * updating snapshots

    * Remove unnecessary comments

    * Replace icon with button

    For more correct semantics.

    * Remove unnecessary styles

    Following the change from icon to button, `cursor: pointer` is no longer
    needed.

    Also lowered the z-index to a more reasonable value.

    * Fix format

    * Update test snapshots

    ---------

    Co-authored-by: henz <henz@comp.nus.edu.sg>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

commit e2abe18
Author: John Wong <johnwz123@gmail.com>
Date:   Thu Apr 11 02:16:49 2024 +0800

    Add a fullscreen button for the game div container (#2855)

    * Add a fullscreen button for the game div container

    * Modify code to use the useFullscreen hook from the @mantine/hooks package

    * Bump dependencies

    * Use `IconNames` instead of magic strings

    ---------

    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
    Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>
    Co-authored-by: Lee Hyung Woon / 이형운 <leehyungwoonsamuel@gmail.com>

commit f4d6e78
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Wed Apr 10 16:10:22 2024 +0800

    Fix `xlsx` security vulnerability (#2914)

    * Bump and use recommended XLSX version from CDN

    * Deduplicate dependencies

commit 571f8b7
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Wed Apr 10 14:31:39 2024 +0800

    bumping js-slang (#2922)

commit c859f1b
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date:   Wed Apr 10 14:14:57 2024 +0800

    Bump tar from 6.1.15 to 6.2.1 (#2920)

    Bumps [tar](https://github.com/isaacs/node-tar) from 6.1.15 to 6.2.1.
    - [Release notes](https://github.com/isaacs/node-tar/releases)
    - [Changelog](https://github.com/isaacs/node-tar/blob/main/CHANGELOG.md)
    - [Commits](isaacs/node-tar@v6.1.15...v6.2.1)

    ---
    updated-dependencies:
    - dependency-name: tar
      dependency-type: indirect
    ...

    Signed-off-by: dependabot[bot] <support@github.com>
    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit bb790df
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Wed Apr 10 14:05:51 2024 +0800

    bumping java-slang to 1.0.6 (#2924)

commit 27e3181
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Wed Apr 10 13:30:30 2024 +0800

    bumping java-slang to 1.0.5 (#2923)

commit 5dba6a5
Author: CZX <CZX123@users.noreply.github.com>
Date:   Wed Apr 10 07:58:53 2024 +0800

    CSE Machine: Fixes for variadic function & global closures, added faded unreferenced objects (#2906)

    * Initial Commit

    * More fixes and added faded gc objects

    * Run format

    * Fix params text and added SourceObject to display runes correctly

    * bumping js-slang

    * Revamp unreferenced behavior and update snapshots

    * Run format

    * Update snapshot

    * Bump js-slang

    ---------

    Co-authored-by: henz <henz@comp.nus.edu.sg>

* update tests

---------

Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>

Author: 3 people

src/commons/application/ApplicationTypes.ts

@@ -198,9 +198,23 @@ const schemeSubLanguages: Array<Pick<SALanguage, 'chapter' | 'variant' | 'displa
 ];
 
 export const schemeLanguages: SALanguage[] = schemeSubLanguages.map(sublang => {
-  return { ...sublang, mainLanguage: SupportedLanguage.SCHEME, supports: { repl: true } };
+  return {
+    ...sublang,
+    mainLanguage: SupportedLanguage.SCHEME,
+    supports: { repl: true, cseMachine: true }
+  };
 });
 
+export function isSchemeLanguage(chapter: Chapter): boolean {
+  return [
+    Chapter.SCHEME_1,
+    Chapter.SCHEME_2,
+    Chapter.SCHEME_3,
+    Chapter.SCHEME_4,
+    Chapter.FULL_SCHEME
+  ].includes(chapter);
+}
+
 const pySubLanguages: Array<Pick<SALanguage, 'chapter' | 'variant' | 'displayName'>> = [
   { chapter: Chapter.PYTHON_1, variant: Variant.DEFAULT, displayName: 'Python \xa71' }
   //{ chapter: Chapter.PYTHON_2, variant: Variant.DEFAULT, displayName: 'Python \xa72' },

src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap

@@ -21,6 +21,7 @@ Array [
     "displayName": "Scheme §1",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -30,6 +31,7 @@ Array [
     "displayName": "Scheme §2",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -39,6 +41,7 @@ Array [
     "displayName": "Scheme §3",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -48,6 +51,7 @@ Array [
     "displayName": "Scheme §4",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -57,6 +61,7 @@ Array [
     "displayName": "Full Scheme",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",

src/commons/sagas/PlaygroundSaga.ts

@@ -13,7 +13,7 @@ import {
   updateShortURL
 } from '../../features/playground/PlaygroundActions';
 import { GENERATE_LZ_STRING, SHORTEN_URL } from '../../features/playground/PlaygroundTypes';
-import { isSourceLanguage, OverallState } from '../application/ApplicationTypes';
+import { isSchemeLanguage, isSourceLanguage, OverallState } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
 import { retrieveFilesInWorkspaceAsRecord } from '../fileSystem/utils';
 import { visitSideContent } from '../sideContent/SideContentActions';
@@ -122,6 +122,10 @@ export default function* PlaygroundSaga(): SagaIterator {
           yield put(toggleUsingCse(true, workspaceLocation));
         }
       }
+
+      if (isSchemeLanguage(playgroundSourceChapter) && newId === SideContentType.cseMachine) {
+        yield put(toggleUsingCse(true, workspaceLocation));
+      }
     }
   );
 }

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

@@ -14,7 +14,7 @@ import { notifyStoriesEvaluated } from 'src/features/stories/StoriesActions';
 import { EVAL_STORY } from 'src/features/stories/StoriesTypes';
 
 import { EventType } from '../../../../features/achievement/AchievementTypes';
-import { OverallState } from '../../../application/ApplicationTypes';
+import { isSchemeLanguage, OverallState } from '../../../application/ApplicationTypes';
 import {
   BEGIN_DEBUG_PAUSE,
   BEGIN_INTERRUPT_EXECUTION,
@@ -95,7 +95,8 @@ export function* evalCode(
             .currentStep
       )
     : -1;
-  const cseActiveAndCorrectChapter = context.chapter >= 3 && cseIsActive;
+  const cseActiveAndCorrectChapter =
+    (isSchemeLanguage(context.chapter) || context.chapter >= 3) && cseIsActive;
   if (cseActiveAndCorrectChapter) {
     context.executionMethod = 'cse-machine';
   }

src/features/cseMachine/CseMachine.tsx

@@ -84,7 +84,8 @@ export default class CseMachine {
     Layout.setContext(
       context.runtime.environmentTree as EnvTree,
       context.runtime.control,
-      context.runtime.stash
+      context.runtime.stash,
+      context.chapter
     );
     this.setVis(Layout.draw());
     this.setIsStepLimitExceeded(context.runtime.control.isEmpty());

src/features/cseMachine/CseMachineLayout.tsx

@@ -1,6 +1,6 @@
 import Heap from 'js-slang/dist/cse-machine/heap';
 import { Control, Stash } from 'js-slang/dist/cse-machine/interpreter';
-import { Frame } from 'js-slang/dist/types';
+import { Chapter, Frame } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import { Layer, Rect, Stage } from 'react-konva';
@@ -137,7 +137,12 @@ export class Layout {
   }
 
   /** processes the runtime context from JS Slang */
-  static setContext(envTree: EnvTree, control: Control, stash: Stash): void {
+  static setContext(
+    envTree: EnvTree,
+    control: Control,
+    stash: Stash,
+    chapter: Chapter = Chapter.SOURCE_4
+  ): void {
     Layout.currentLight = undefined;
     Layout.currentDark = undefined;
     Layout.currentStackDark = undefined;
@@ -160,7 +165,7 @@ export class Layout {
     // initialize levels and frames
     Layout.initializeGrid();
     // initialize control and stash
-    Layout.initializeControlStash();
+    Layout.initializeControlStash(chapter);
 
     if (CseMachine.getControlStash()) {
       Layout.controlStashHeight = Math.max(
@@ -193,19 +198,19 @@ export class Layout {
     CseAnimation.updateAnimation();
   }
 
-  static initializeControlStash() {
+  static initializeControlStash(chapter: Chapter) {
     Layout.previousControlComponent = Layout.controlComponent;
     Layout.previousStashComponent = Layout.stashComponent;
-    this.controlComponent = new ControlStack(this.control);
-    this.stashComponent = new StashStack(this.stash);
+    this.controlComponent = new ControlStack(this.control, chapter);
+    this.stashComponent = new StashStack(this.stash, chapter);
   }
 
   /**
    * remove prelude environment containing predefined functions, by merging the prelude
    * objects into the global environment head and heap
    */
   private static removePreludeEnv() {
-    if (!Layout.globalEnvNode.children) return;
+    if (!Layout.globalEnvNode.children || Layout.globalEnvNode.children.length === 0) return;
 
     const preludeEnvNode = Layout.globalEnvNode.children[0];
     const preludeEnv = preludeEnvNode.environment;

src/features/cseMachine/CseMachineUtils.ts

@@ -1,3 +1,5 @@
+import { estreeDecode } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/encoder-visitor';
+import { unparse } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/reverse_parser';
 import JsSlangClosure from 'js-slang/dist/cse-machine/closure';
 import {
   AppInstr,
@@ -10,13 +12,14 @@ import {
   InstrType,
   UnOpInstr
 } from 'js-slang/dist/cse-machine/types';
-import { Environment, Value as StashValue } from 'js-slang/dist/types';
+import { Chapter, Environment, Value as StashValue } from 'js-slang/dist/types';
 import { astToString } from 'js-slang/dist/utils/ast/astToString';
 import { Group } from 'konva/lib/Group';
 import { Node } from 'konva/lib/Node';
 import { Shape } from 'konva/lib/Shape';
 import { Text } from 'konva/lib/shapes/Text';
 import { cloneDeep, isObject } from 'lodash';
+import { isSchemeLanguage } from 'src/commons/application/ApplicationTypes';
 import classes from 'src/styles/Draggable.module.scss';
 
 import { ArrayUnit } from './components/ArrayUnit';
@@ -49,7 +52,11 @@ import {
   StreamFn,
   Unassigned
 } from './CseMachineTypes';
-
+import {
+  getAlternateControlItemComponent,
+  isCustomPrimitive,
+  needsNewRepresentation
+} from './utils/altLangs';
 class AssertionError extends Error {
   constructor(msg?: string) {
     super(msg);
@@ -195,7 +202,8 @@ export function isPrimitiveData(data: Data): data is Primitive {
     isString(data) ||
     isNumber(data) ||
     isBoolean(data) ||
-    isSourceObject(data)
+    isSourceObject(data) ||
+    isCustomPrimitive(data)
   );
 }
 
@@ -568,12 +576,39 @@ export function getControlItemComponent(
   stackHeight: number,
   index: number,
   highlightOnHover: () => void,
-  unhighlightOnHover: () => void
+  unhighlightOnHover: () => void,
+  chapter: Chapter
 ): ControlItemComponent {
   const topItem = CseMachine.getStackTruncated()
     ? index === Math.min(Layout.control.size() - 1, 9)
     : index === Layout.control.size() - 1;
   if (!isInstr(controlItem)) {
+    // there's no reason to provide an alternate representation
+    // for a instruction.
+    if (needsNewRepresentation(chapter)) {
+      return getAlternateControlItemComponent(
+        controlItem,
+        stackHeight,
+        highlightOnHover,
+        unhighlightOnHover,
+        topItem,
+        chapter
+      );
+    }
+
+    if (isSchemeLanguage(chapter)) {
+      // use the js-slang decoder on the control item
+      controlItem = estreeDecode(controlItem as any);
+      const text = unparse(controlItem as any);
+      return new ControlItemComponent(
+        text,
+        text,
+        stackHeight,
+        highlightOnHover,
+        unhighlightOnHover,
+        topItem
+      );
+    }
     switch (controlItem.type) {
       case 'Program':
         // If the control item is the whole program
@@ -792,6 +827,24 @@ export function getControlItemComponent(
           unhighlightOnHover,
           topItem
         );
+      case InstrType.GENERATE_CONT:
+        return new ControlItemComponent(
+          'generate cont',
+          'Generate continuation',
+          stackHeight,
+          highlightOnHover,
+          unhighlightOnHover,
+          topItem
+        );
+      case InstrType.RESUME_CONT:
+        return new ControlItemComponent(
+          'call cont',
+          'call a continuation',
+          stackHeight,
+          highlightOnHover,
+          unhighlightOnHover,
+          topItem
+        );
       default:
         return new ControlItemComponent(
           'INSTRUCTION',
@@ -805,7 +858,12 @@ export function getControlItemComponent(
   }
 }
 
-export function getStashItemComponent(stashItem: StashValue, stackHeight: number, index: number) {
+export function getStashItemComponent(
+  stashItem: StashValue,
+  stackHeight: number,
+  index: number,
+  _chapter: Chapter
+): StashItemComponent {
   let arrowTo: ArrayValue | FnValue | GlobalFnValue | undefined;
   if (isFunction(stashItem) || isDataArray(stashItem)) {
     if (isClosure(stashItem) || isDataArray(stashItem)) {

src/features/cseMachine/components/ControlStack.tsx

@@ -1,5 +1,6 @@
 import { Control } from 'js-slang/dist/cse-machine/interpreter';
 import { ControlItem, Instr } from 'js-slang/dist/cse-machine/types';
+import { Chapter, StatementSequence } from 'js-slang/dist/types';
 import { Node } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
@@ -28,14 +29,16 @@ export class ControlStack extends Visible implements IHoverable {
 
   constructor(
     /** the control object */
-    readonly control: Control
+    readonly control: Control,
+    readonly chapter: Chapter
   ) {
     super();
     this._x = ControlStashConfig.ControlPosX;
     this._y = ControlStashConfig.ControlPosY;
     this._width = ControlStashConfig.ControlItemWidth;
     this._height = ControlStashConfig.StashItemHeight + ControlStashConfig.StashItemTextPadding * 2;
     this.control = control;
+    this.chapter = chapter;
 
     // Function to convert the stack items to their components
     let i = 0;
@@ -57,7 +60,8 @@ export class ControlStack extends Visible implements IHoverable {
         this._height,
         i,
         highlightOnHover,
-        unhighlightOnHover
+        unhighlightOnHover,
+        this.chapter
       );
       this._height += component.height();
       i += 1;
@@ -141,6 +145,6 @@ export const isInstr = (command: ControlItem): command is Instr => {
  * @param command A ControlItem
  * @returns true if the ControlItem is an esNode and false if it is an instruction.
  */
-export const isNode = (command: ControlItem): command is Node => {
+export const isNode = (command: ControlItem): command is Node | StatementSequence => {
   return (command as Node).type !== undefined;
 };

src/features/cseMachine/components/StashStack.tsx

@@ -1,5 +1,5 @@
 import { Stash } from 'js-slang/dist/cse-machine/interpreter';
-import { Value } from 'js-slang/dist/types';
+import { Chapter, Value } from 'js-slang/dist/types';
 import React from 'react';
 
 import CseMachine from '../CseMachine';
@@ -14,18 +14,20 @@ export class StashStack extends Visible {
 
   constructor(
     /** the stash object */
-    readonly stash: Stash
+    readonly stash: Stash,
+    readonly chapter: Chapter
   ) {
     super();
     this._x = ControlStashConfig.StashPosX;
     this._y = ControlStashConfig.StashPosY;
     this._width = 0;
     this._height = 0;
+    this.chapter = chapter;
 
     // Function to convert the stack items to their components
     let i = 0;
     const stashItemToComponent = (stashItem: Value) => {
-      const component = getStashItemComponent(stashItem, this._width, i);
+      const component = getStashItemComponent(stashItem, this._width, i, this.chapter);
       this._width += component.width();
       this._height = Math.max(this._height, component.height());
       i += 1;

src/features/cseMachine/components/Text.tsx

@@ -15,6 +15,7 @@ import {
   setHoveredCursor,
   setUnhoveredCursor
 } from '../CseMachineUtils';
+import { isCustomPrimitive } from '../utils/altLangs';
 import { Visible } from './Visible';
 
 export interface TextOptions {
@@ -64,6 +65,8 @@ export class Text extends Visible implements IHoverable {
 
     this.fullStr = this.partialStr = isSourceObject(data)
       ? data.toReplString()
+      : isCustomPrimitive(data)
+      ? String(data)
       : isStringIdentifiable
       ? JSON.stringify(data) || String(data)
       : String(data);