Add visualisations for the new Scheme Implementation (#3075)

* Update js-slang

* Enable step limit for Scheme variants

* Simplify logic for step limit setting

* update snapshots

* remove commented line

* update tests

* update execution time logic

* make cse machine compilable

* add continuation representation

* make continuations point to their defined environments (wip)

* fix formatting

* Make continuations point to their captured environments

* Clean up helper functions

* clean up scm-slang frontend logic

* bump js-slang

Author: s-kybound

package.json

@@ -56,7 +56,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "java-slang": "^1.0.13",
     "js-cookie": "^3.0.5",
-    "js-slang": "^1.0.76",
+    "js-slang": "^1.0.77",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",

src/features/cseMachine/CseMachineAnimation.tsx

@@ -25,7 +25,8 @@ import { Frame } from './components/Frame';
 import { ArrayValue } from './components/values/ArrayValue';
 import CseMachine from './CseMachine';
 import { Layout } from './CseMachineLayout';
-import { isBuiltInFn, isStreamFn } from './CseMachineUtils';
+import { isBuiltInFn, isInstr, isStreamFn } from './CseMachineUtils';
+import { isList, isSymbol } from './utils/scheme';
 
 export class CseAnimation {
   static readonly animations: Animatable[] = [];
@@ -153,7 +154,7 @@ export class CseAnimation {
     }
     if (isNode(lastControlItem)) {
       CseAnimation.handleNode(lastControlItem);
-    } else {
+    } else if (isInstr(lastControlItem)) {
       switch (lastControlItem.instrType) {
         case InstrType.APPLICATION:
           const appInstr = lastControlItem as AppInstr;
@@ -283,6 +284,75 @@ export class CseAnimation {
         case InstrType.RESET:
           break;
       }
+    } else {
+      // these are either scheme lists or values.
+      // The value is a number, boolean, string or null. (control -> stash)
+      if (
+        lastControlItem === null ||
+        typeof lastControlItem === 'number' ||
+        typeof lastControlItem === 'boolean' ||
+        typeof lastControlItem === 'string'
+      ) {
+        CseAnimation.animations.push(
+          new ControlToStashAnimation(lastControlComponent, currStashComponent!)
+        );
+      }
+      // The value is a symbol. (lookup, control -> stash)
+      else if (isSymbol(lastControlItem)) {
+        CseAnimation.animations.push(
+          new ControlToStashAnimation(lastControlComponent, currStashComponent!)
+        );
+      }
+      // The value is a list. (control -> control)
+      else if (isList(lastControlItem)) {
+        // base our decision on the first element of the list.
+        const firstElement = (lastControlItem as any)[0];
+        if (isSymbol(firstElement)) {
+          switch (firstElement.sym) {
+            case 'lambda':
+            case 'define':
+            case 'set!':
+            case 'if':
+            case 'begin':
+              CseAnimation.animations.push(
+                new ControlExpansionAnimation(
+                  lastControlComponent,
+                  CseAnimation.getNewControlItems()
+                )
+              );
+              break;
+            case 'quote':
+              CseAnimation.animations.push(
+                new ControlToStashAnimation(lastControlComponent, currStashComponent!)
+              );
+              break;
+            case 'define-syntax':
+              // undefined was pushed onto the stash.
+              CseAnimation.animations.push(
+                new ControlToStashAnimation(lastControlComponent, currStashComponent!)
+              );
+              break;
+            case 'syntax-rules':
+            // nothing.
+            default:
+              // it's probably an application, or a macro expansion.
+              // either way, it's a control -> control expansion.
+              CseAnimation.animations.push(
+                new ControlExpansionAnimation(
+                  lastControlComponent,
+                  CseAnimation.getNewControlItems()
+                )
+              );
+              break;
+          }
+        } else {
+          // it's probably an application.
+          CseAnimation.animations.push(
+            new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems())
+          );
+        }
+      }
+      return;
     }
   }
 

src/features/cseMachine/CseMachineLayout.tsx

@@ -11,6 +11,7 @@ import { ControlStack } from './components/ControlStack';
 import { Level } from './components/Level';
 import { StashStack } from './components/StashStack';
 import { ArrayValue } from './components/values/ArrayValue';
+import { ContValue } from './components/values/ContValue';
 import { FnValue } from './components/values/FnValue';
 import { GlobalFnValue } from './components/values/GlobalFnValue';
 import { PrimitiveValue } from './components/values/PrimitiveValue';
@@ -45,6 +46,7 @@ import {
   isUnassigned,
   setDifference
 } from './CseMachineUtils';
+import { Continuation, isContinuation, isSchemeNumber, isSymbol } from './utils/scheme';
 
 /** this class encapsulates the logic for calculating the layout */
 export class Layout {
@@ -372,6 +374,8 @@ export class Layout {
       return new UnassignedValue(reference);
     } else if (isPrimitiveData(data)) {
       return new PrimitiveValue(data, reference);
+    } else if (isSymbol(data) || isSchemeNumber(data)) {
+      return new PrimitiveValue(data, reference);
     } else {
       const existingValue = Layout.values.get(
         isBuiltInFn(data) || isStreamFn(data) ? data : data.id
@@ -383,6 +387,8 @@ export class Layout {
 
       if (isDataArray(data)) {
         return new ArrayValue(data, reference);
+      } else if (isContinuation(data)) {
+        return new ContValue(data, reference);
       } else if (isGlobalFn(data)) {
         assert(reference instanceof Binding);
         return new GlobalFnValue(data, reference);
@@ -394,9 +400,12 @@ export class Layout {
     }
   }
 
-  static memoizeValue(data: GlobalFn | NonGlobalFn | StreamFn | DataArray, value: Value) {
+  static memoizeValue(
+    data: GlobalFn | NonGlobalFn | StreamFn | Continuation | DataArray,
+    value: Value
+  ) {
     if (isBuiltInFn(data) || isStreamFn(data)) Layout.values.set(data, value);
-    else Layout.values.set(data.id, value);
+    else Layout.values.set((data as any).id, value);
   }
 
   /**

src/features/cseMachine/CseMachineTypes.ts

@@ -1,3 +1,5 @@
+import { _Symbol } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/stdlib/base';
+import { SchemeNumber } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/stdlib/core';
 import {
   EnvTree as EnvironmentTree,
   EnvTreeNode as EnvironmentTreeNode
@@ -11,6 +13,7 @@ import { ArrayUnit } from './components/ArrayUnit';
 import { Binding } from './components/Binding';
 import { Frame } from './components/Frame';
 import { Level } from './components/Level';
+import { Continuation } from './utils/scheme';
 
 /** this interface defines a drawing function */
 export interface Drawable {
@@ -84,7 +87,15 @@ export type DataArray = Data[] & {
 };
 
 /** the types of data in the JS Slang context */
-export type Data = Primitive | NonGlobalFn | GlobalFn | Unassigned | DataArray;
+export type Data =
+  | Primitive
+  | NonGlobalFn
+  | GlobalFn
+  | Unassigned
+  | DataArray
+  | SchemeNumber
+  | _Symbol
+  | Continuation;
 
 /** modified `Environment` to store children and associated frame */
 export type Env = Environment;

src/features/cseMachine/CseMachineUtils.ts

@@ -25,9 +25,11 @@ import classes from 'src/styles/Draggable.module.scss';
 import { ArrayUnit } from './components/ArrayUnit';
 import { Binding } from './components/Binding';
 import { ControlItemComponent } from './components/ControlItemComponent';
+import { isNode } from './components/ControlStack';
 import { Frame } from './components/Frame';
 import { StashItemComponent } from './components/StashItemComponent';
 import { ArrayValue } from './components/values/ArrayValue';
+import { ContValue } from './components/values/ContValue';
 import { FnValue } from './components/values/FnValue';
 import { GlobalFnValue } from './components/values/GlobalFnValue';
 import { Value } from './components/values/Value';
@@ -57,6 +59,7 @@ import {
   isCustomPrimitive,
   needsNewRepresentation
 } from './utils/altLangs';
+import { isContinuation, schemeToString } from './utils/scheme';
 class AssertionError extends Error {
   constructor(msg?: string) {
     super(msg);
@@ -233,6 +236,12 @@ export function setDifference<T>(set1: Set<T>, set2: Set<T>) {
  * always prioritised over array units.
  */
 export function isMainReference(value: Value, reference: ReferenceType) {
+  if (isContinuation(value.data)) {
+    return (
+      reference instanceof Binding &&
+      isEnvEqual(reference.frame.environment, value.data.getEnv()[0])
+    );
+  }
   if (isGlobalFn(value.data)) {
     return (
       reference instanceof Binding &&
@@ -583,6 +592,19 @@ export function getControlItemComponent(
     ? index === Math.min(Layout.control.size() - 1, 9)
     : index === Layout.control.size() - 1;
   if (!isInstr(controlItem)) {
+    if (!isNode(controlItem)) {
+      // at the moment, the only non-node and non-instruction control items are
+      // literals from scheme.
+      const representation = schemeToString(controlItem as any);
+      return new ControlItemComponent(
+        representation,
+        representation,
+        stackHeight,
+        highlightOnHover,
+        unhighlightOnHover,
+        topItem
+      );
+    }
     // there's no reason to provide an alternate representation
     // for a instruction.
     if (needsNewRepresentation(chapter)) {
@@ -609,11 +631,13 @@ export function getControlItemComponent(
         topItem
       );
     }
-    switch (controlItem.type) {
+
+    // at this point, the control item is a node.
+    switch ((controlItem as any).type) {
       case 'Program':
         // If the control item is the whole program
         // add {} to represent the implicit block
-        const originalText = astToString(controlItem)
+        const originalText = astToString(controlItem as any)
           .trim()
           .split('\n')
           .map(line => `\t\t${line}`)
@@ -629,7 +653,9 @@ export function getControlItemComponent(
         );
       case 'Literal':
         const textL =
-          typeof controlItem.value === 'string' ? `"${controlItem.value}"` : controlItem.value;
+          typeof (controlItem as any).value === 'string'
+            ? `"${(controlItem as any).value}"`
+            : (controlItem as any).value;
         return new ControlItemComponent(
           textL,
           String(textL),
@@ -639,7 +665,7 @@ export function getControlItemComponent(
           topItem
         );
       default:
-        const text = astToString(controlItem).trim();
+        const text = astToString(controlItem as any).trim();
         return new ControlItemComponent(
           text,
           text,
@@ -846,10 +872,10 @@ export function getStashItemComponent(
   index: number,
   _chapter: Chapter
 ): StashItemComponent {
-  let arrowTo: ArrayValue | FnValue | GlobalFnValue | undefined;
-  if (isFunction(stashItem) || isDataArray(stashItem)) {
-    if (isClosure(stashItem) || isDataArray(stashItem)) {
-      arrowTo = Layout.values.get(stashItem.id) as ArrayValue | FnValue;
+  let arrowTo: ArrayValue | FnValue | GlobalFnValue | ContValue | undefined;
+  if (isFunction(stashItem) || isDataArray(stashItem || isContinuation(stashItem))) {
+    if (isClosure(stashItem) || isDataArray(stashItem) || isContinuation(stashItem)) {
+      arrowTo = Layout.values.get(stashItem.id) as ArrayValue | FnValue | ContValue;
     } else {
       arrowTo = Layout.values.get(stashItem) as FnValue | GlobalFnValue;
     }

src/features/cseMachine/components/Binding.tsx

@@ -9,6 +9,7 @@ import { GenericArrow } from './arrows/GenericArrow';
 import { Frame } from './Frame';
 import { Text } from './Text';
 import { ArrayValue } from './values/ArrayValue';
+import { ContValue } from './values/ContValue';
 import { FnValue } from './values/FnValue';
 import { GlobalFnValue } from './values/GlobalFnValue';
 import { PrimitiveValue } from './values/PrimitiveValue';
@@ -68,7 +69,9 @@ export class Binding extends Visible {
       ? this.value.x() +
         this.value.width() -
         this.x() +
-        (this.value instanceof FnValue || this.value instanceof GlobalFnValue
+        (this.value instanceof FnValue ||
+        this.value instanceof GlobalFnValue ||
+        this.value instanceof ContValue
           ? this.value.tooltipWidth
           : 0)
       : this.key.width();

src/features/cseMachine/components/ControlStack.tsx

@@ -43,14 +43,18 @@ export class ControlStack extends Visible implements IHoverable {
     // Function to convert the stack items to their components
     let i = 0;
     const controlItemToComponent = (controlItem: ControlItem) => {
-      const node = isNode(controlItem) ? controlItem : controlItem.srcNode;
+      const node = isNode(controlItem)
+        ? controlItem
+        : isInstr(controlItem)
+          ? controlItem.srcNode
+          : controlItem;
       let highlightOnHover = () => {};
       let unhighlightOnHover = () => {};
 
       highlightOnHover = () => {
-        if (node.loc) {
-          const start = node.loc.start.line - 1;
-          const end = node.loc.end.line - 1;
+        if ((node as any).loc !== undefined) {
+          const start = (node as any).loc.start.line - 1;
+          const end = (node as any).loc.end.line - 1;
           CseMachine.setEditorHighlightedLines([[start, end]]);
         }
       };

src/features/cseMachine/components/Frame.tsx

@@ -16,6 +16,7 @@ import {
   isPrimitiveData,
   isUnassigned
 } from '../CseMachineUtils';
+import { isContinuation } from '../utils/scheme';
 import { ArrowFromFrame } from './arrows/ArrowFromFrame';
 import { GenericArrow } from './arrows/GenericArrow';
 import { Binding } from './Binding';
@@ -124,7 +125,7 @@ export class Frame extends Visible implements IHoverable {
       const value = unreferencedValues[i];
       if (isDataArray(value)) {
         for (const data of value) {
-          if ((isDataArray(data) && data !== value) || isClosure(data)) {
+          if ((isDataArray(data) && data !== value) || isClosure(data) || isContinuation(data)) {
             const prev = unreferencedValues.findIndex(value => value.id === data.id);
             if (prev > -1) {
               unreferencedValues.splice(prev, 1);

src/features/cseMachine/components/StashItemComponent.tsx

@@ -24,8 +24,10 @@ import {
   setUnhoveredStyle,
   truncateText
 } from '../CseMachineUtils';
+import { isContinuation } from '../utils/scheme';
 import { ArrowFromStashItemComponent } from './arrows/ArrowFromStashItemComponent';
 import { ArrayValue } from './values/ArrayValue';
+import { ContValue } from './values/ContValue';
 import { Visible } from './Visible';
 
 export class StashItemComponent extends Visible implements IHoverable {
@@ -42,21 +44,23 @@ export class StashItemComponent extends Visible implements IHoverable {
     stackWidth: number,
     /** The index number of this stack item */
     readonly index: number,
-    arrowTo?: FnValue | GlobalFnValue | ArrayValue
+    arrowTo?: FnValue | GlobalFnValue | ContValue | ArrayValue
   ) {
     super();
     const valToStashRep = (val: any): string => {
       return typeof val === 'string'
         ? `'${val}'`.trim()
-        : isNonGlobalFn(val)
-          ? 'closure'
-          : isDataArray(val)
-            ? arrowTo
-              ? 'pair/array'
-              : JSON.stringify(val)
-            : isSourceObject(val)
-              ? val.toReplString()
-              : String(value);
+        : isContinuation(val)
+          ? 'continuation'
+          : isNonGlobalFn(val)
+            ? 'closure'
+            : isDataArray(val)
+              ? arrowTo
+                ? 'pair/array'
+                : JSON.stringify(val)
+              : isSourceObject(val)
+                ? val.toReplString()
+                : String(value);
     };
     this.text = truncateText(
       valToStashRep(value),