CSE Machine: Fix some UI & animations issues, and add tests (#2936)

* Improve frame positioning and fix some bugs with arrow animations

* Ensure global frame default text is always the first binding

* Fix animation function logic

* Changes to arrays and arrows, add layout test cases

* Add unit tests for AnimationComponent

* Fix imports

* Fix statement sequences display and account for empty environments

* Fix statement sequence display logic again

* Correct frame creation animation conditions

* Add more animation unit tests

* Revert frontend fix for extra indentation

* Change test case step number to actually test truncated control

* Minor fixes

* Reformat post-merge

* Fix incorrect import

* Fix jest error

* Fix tests not detected by Vitest

* Update snapshots

Author: CZX123

src/features/cseMachine/CseMachineAnimation.tsx

@@ -26,7 +26,7 @@ import { Frame } from './components/Frame';
 import { ArrayValue } from './components/values/ArrayValue';
 import CseMachine from './CseMachine';
 import { Layout } from './CseMachineLayout';
-import { isBuiltInFn, isInstr, isStreamFn } from './CseMachineUtils';
+import { isBuiltInFn, isEnvEqual, isInstr, isStreamFn } from './CseMachineUtils';
 import { isList, isSymbol } from './utils/scheme';
 
 export class CseAnimation {
@@ -51,11 +51,12 @@ export class CseAnimation {
   }
 
   static setCurrentFrame(frame: Frame) {
-    CseAnimation.previousFrame = CseAnimation.currentFrame;
+    CseAnimation.previousFrame = CseAnimation.currentFrame ?? frame;
     CseAnimation.currentFrame = frame;
   }
 
   private static clearAnimationComponents(): void {
+    CseAnimation.animations.forEach(a => a.destroy());
     CseAnimation.animations.length = 0;
   }
 
@@ -72,21 +73,26 @@ export class CseAnimation {
     const currStashComponent = Layout.stashComponent.stashItemComponents.at(-1)!;
     switch (node.type) {
       case 'Program':
-        CseAnimation.animations.push(
-          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems())
-        );
-        if (CseMachine.getCurrentEnvId() !== '-1') {
+      case 'BlockStatement':
+      case 'StatementSequence':
+        if (node.body.length === 1) {
+          CseAnimation.handleNode(node.body[0]);
+        } else {
           CseAnimation.animations.push(
-            new FrameCreationAnimation(lastControlComponent, CseAnimation.currentFrame)
+            new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems())
           );
+          if (
+            !isEnvEqual(
+              CseAnimation.currentFrame.environment,
+              CseAnimation.previousFrame.environment
+            )
+          ) {
+            CseAnimation.animations.push(
+              new FrameCreationAnimation(lastControlComponent, CseAnimation.currentFrame)
+            );
+          }
         }
         break;
-      case 'BlockStatement':
-        CseAnimation.animations.push(
-          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems()),
-          new FrameCreationAnimation(lastControlComponent, CseAnimation.currentFrame)
-        );
-        break;
       case 'Literal':
         CseAnimation.animations.push(
           new ControlToStashAnimation(lastControlComponent, currStashComponent!)
@@ -127,7 +133,6 @@ export class CseAnimation {
       case 'IfStatement':
       case 'MemberExpression':
       case 'ReturnStatement':
-      case 'StatementSequence':
       case 'UnaryExpression':
       case 'VariableDeclaration':
       case 'FunctionDeclaration':
@@ -143,7 +148,6 @@ export class CseAnimation {
   }
 
   static updateAnimation() {
-    CseAnimation.animations.forEach(a => a.destroy());
     CseAnimation.clearAnimationComponents();
 
     if (!Layout.previousControlComponent) return;
@@ -393,16 +397,15 @@ export class CseAnimation {
 
   static async playAnimation() {
     if (!CseAnimation.animationEnabled) {
-      CseAnimation.animations.forEach(a => a.destroy());
       CseAnimation.clearAnimationComponents();
       return;
     }
     CseAnimation.disableAnimations();
     // Get the actual HTML <canvas> element and set the pointer events to none, to allow for
-    // mouse events to pass through the animation layer, and be handled by the actual CSE Machine.
+    // mouse events to pass through the animation layer and be handled by the actual CSE Machine.
     // Setting the listening property to false on the Konva Layer does not seem to work, so
     // this a workaround.
-    const canvasElement = CseAnimation.getLayer()?.getCanvas()._canvas;
+    const canvasElement = CseAnimation.getLayer()?.getNativeCanvasElement();
     if (canvasElement) canvasElement.style.pointerEvents = 'none';
     // Play all the animations
     await Promise.all(this.animations.map(a => a.animate()));

src/features/cseMachine/CseMachineConfig.ts

@@ -11,13 +11,15 @@ export const Config = Object.freeze({
   FrameMinWidth: 100,
   FramePaddingX: 20,
   FramePaddingY: 30,
+  FrameMinGapX: 80,
   FrameMarginX: 30,
   FrameMarginY: 10,
   FrameCornerRadius: 3,
 
   FnRadius: 15,
   FnInnerRadius: 3,
   FnTooltipOpacity: 0.3,
+  FnTooltipTextPadding: 5,
 
   DataMinWidth: 20,
   DataUnitWidth: 40,

src/features/cseMachine/CseMachineLayout.tsx

@@ -2,8 +2,9 @@ import Heap from 'js-slang/dist/cse-machine/heap';
 import { Control, Stash } from 'js-slang/dist/cse-machine/interpreter';
 import { Chapter, Frame } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
+import { Stage } from 'konva/lib/Stage';
 import React, { RefObject } from 'react';
-import { Layer, Rect, Stage } from 'react-konva';
+import { Layer as KonvaLayer, Rect as KonvaRect, Stage as KonvaStage } from 'react-konva';
 import classes from 'src/styles/Draggable.module.scss';
 
 import { Binding } from './components/Binding';
@@ -98,17 +99,19 @@ export class Layout {
   static currentStackTruncDark: React.ReactNode;
   static currentStackLight: React.ReactNode;
   static currentStackTruncLight: React.ReactNode;
-  static stageRef: RefObject<any> = React.createRef();
+  static stageRef: RefObject<Stage> = React.createRef();
 
   // buffer for faster rendering of diagram when scrolling
   static invisiblePaddingVertical: number = 300;
   static invisiblePaddingHorizontal: number = 300;
-  static scrollContainerRef: RefObject<any> = React.createRef();
+  static scrollContainerRef: RefObject<HTMLDivElement> = React.createRef();
 
   static updateDimensions(width: number, height: number) {
     // update the size of the scroll container and stage given the width and height of the sidebar content.
     Layout.visibleWidth = width;
     Layout.visibleHeight = height;
+    Layout._width = Math.max(Layout.visibleWidth, Layout.stageWidth);
+    Layout._height = Math.max(Layout.visibleHeight, Layout.stageHeight);
     if (
       Layout.stageRef.current !== null &&
       (Math.min(Layout.width(), window.innerWidth) > Layout.stageWidth ||
@@ -122,16 +125,14 @@ export class Layout {
       Layout.stageRef.current.height(Layout.stageHeight);
       CseMachine.redraw();
     }
-    if (Layout.stageHeight > Layout.visibleHeight) {
-    }
     Layout.invisiblePaddingVertical =
       Layout.stageHeight > Layout.visibleHeight
         ? (Layout.stageHeight - Layout.visibleHeight) / 2
         : 0;
     Layout.invisiblePaddingHorizontal =
       Layout.stageWidth > Layout.visibleWidth ? (Layout.stageWidth - Layout.visibleWidth) / 2 : 0;
 
-    const container: HTMLElement | null = this.scrollContainerRef.current as HTMLDivElement;
+    const container = this.scrollContainerRef.current;
     if (container) {
       container.style.width = `${Layout.visibleWidth}px`;
       container.style.height = `${Layout.visibleHeight}px`;
@@ -183,12 +184,13 @@ export class Layout {
     // calculate height and width by considering lowest and widest level
     const lastLevel = Layout.levels[Layout.levels.length - 1];
     Layout._height = Math.max(
+      Layout.visibleHeight,
       Config.CanvasMinHeight,
       lastLevel.y() + lastLevel.height() + Config.CanvasPaddingY,
       Layout.controlStashHeight ?? 0
     );
-
     Layout._width = Math.max(
+      Layout.visibleWidth,
       Config.CanvasMinWidth,
       Layout.levels.reduce<number>((maxWidth, level) => Math.max(maxWidth, level.width()), 0) +
         Config.CanvasPaddingX * 2 +
@@ -412,10 +414,10 @@ export class Layout {
    * Scrolls diagram to top left, resets the zoom, and saves the diagram as multiple images of width < MaxExportWidth.
    */
   static exportImage = () => {
-    const container: HTMLElement | null = this.scrollContainerRef.current as HTMLDivElement;
-    container.scrollTo({ left: 0, top: 0 });
+    const container = this.scrollContainerRef.current;
+    container?.scrollTo({ left: 0, top: 0 });
     Layout.handleScrollPosition(0, 0);
-    this.stageRef.current.scale({ x: 1, y: 1 });
+    this.stageRef.current?.scale({ x: 1, y: 1 });
     const height = Layout.height();
     const width = Layout.width();
     const horizontalImages = Math.ceil(width / Config.MaxExportWidth);
@@ -429,13 +431,14 @@ export class Layout {
         const y = Math.floor(n / horizontalImages);
         const a = document.createElement('a');
         a.style.display = 'none';
-        a.href = this.stageRef.current.toDataURL({
-          x: x * Config.MaxExportWidth + Layout.invisiblePaddingHorizontal,
-          y: y * Config.MaxExportHeight + Layout.invisiblePaddingVertical,
-          width: Math.min(width - x * Config.MaxExportWidth, Config.MaxExportWidth),
-          height: Math.min(height - y * Config.MaxExportHeight, Config.MaxExportHeight),
-          mimeType: 'image/jpeg'
-        });
+        a.href =
+          this.stageRef.current?.toDataURL({
+            x: x * Config.MaxExportWidth + Layout.invisiblePaddingHorizontal,
+            y: y * Config.MaxExportHeight + Layout.invisiblePaddingVertical,
+            width: Math.min(width - x * Config.MaxExportWidth, Config.MaxExportWidth),
+            height: Math.min(height - y * Config.MaxExportHeight, Config.MaxExportHeight),
+            mimeType: 'image/jpeg'
+          }) ?? '';
 
         a.download = `diagram_${x}_${y}.jpg`;
         document.body.appendChild(a);
@@ -457,6 +460,7 @@ export class Layout {
    * @param y y position of the scroll container
    */
   private static handleScrollPosition(x: number, y: number) {
+    if (!this.stageRef.current) return;
     const dx = x - Layout.invisiblePaddingHorizontal;
     const dy = y - Layout.invisiblePaddingVertical;
     this.stageRef.current.container().style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
@@ -475,7 +479,10 @@ export class Layout {
     if (Layout.stageRef.current !== null) {
       const stage = Layout.stageRef.current;
       const oldScale = stage.scaleX();
-      const { x: pointerX, y: pointerY } = stage.getPointerPosition();
+      const { x: pointerX, y: pointerY } = stage.getPointerPosition() ?? {
+        x: Layout.visibleWidth / 2 - stage.x(),
+        y: Layout.visibleHeight / 2 - stage.y()
+      };
       const mousePointTo = {
         x: (pointerX - stage.x()) / oldScale,
         y: (pointerY - stage.y()) / oldScale
@@ -531,16 +538,16 @@ export class Layout {
                 backgroundColor: defaultBackgroundColor()
               }}
             >
-              <Stage
+              <KonvaStage
                 width={Layout.stageWidth}
                 height={Layout.stageHeight}
                 ref={Layout.stageRef}
                 draggable
                 onWheel={Layout.zoomStage}
                 className={classes['draggable']}
               >
-                <Layer>
-                  <Rect
+                <KonvaLayer>
+                  <KonvaRect
                     {...ShapeDefaultProps}
                     x={0}
                     y={0}
@@ -553,11 +560,11 @@ export class Layout {
                   {Layout.levels.map(level => level.draw())}
                   {CseMachine.getControlStash() && Layout.controlComponent.draw()}
                   {CseMachine.getControlStash() && Layout.stashComponent.draw()}
-                </Layer>
-                <Layer ref={CseAnimation.layerRef} listening={false}>
+                </KonvaLayer>
+                <KonvaLayer ref={CseAnimation.layerRef} listening={false}>
                   {CseMachine.getControlStash() && CseAnimation.animations.map(c => c.draw())}
-                </Layer>
-              </Stage>
+                </KonvaLayer>
+              </KonvaStage>
             </div>
           </div>
         </div>

src/features/cseMachine/CseMachineUtils.ts

@@ -233,7 +233,7 @@ export function setDifference<T>(set1: Set<T>, set2: Set<T>) {
  * order is the first binding or array unit which shares the same environment with `value`.
  *
  * An exception is for a global function value, in which case the global frame binding is
- * always prioritised over array units.
+ * always prioritised over other bindings or array units.
  */
 export function isMainReference(value: Value, reference: ReferenceType) {
   if (isContinuation(value.data)) {
@@ -442,8 +442,8 @@ export function getNonEmptyEnv(environment: Env): Env {
 
 /** Returns whether the given environments `env1` and `env2` refer to the same environment. */
 export function isEnvEqual(env1: Env, env2: Env): boolean {
-  // Cannot check env references because of deep cloning and the step after where
-  // property descriptors are copied over, so can only check id
+  // Cannot check env references because of partial cloning of environment tree,
+  // so we can only check id
   return env1.id === env2.id;
 }
 
@@ -901,11 +901,16 @@ export function getStashItemComponent(
   return new StashItemComponent(stashItem, stackHeight, index, arrowTo);
 }
 
-// Helper function to get environment ID. Accounts for the hidden prelude environment right
-// after the global environment. Does not need to be used for frame environments, only for
-// environments from the context.
+// Helper function to get environment ID.
+// Accounts for the hidden prelude environment and empty environments.
 export const getEnvId = (environment: Environment): string => {
-  return environment.name === 'prelude' ? environment.tail!.id : environment.id;
+  while (
+    environment.tail &&
+    (environment.name === 'prelude' || Object.keys(environment.head).length === 0)
+  ) {
+    environment = environment.tail;
+  }
+  return environment.id;
 };
 
 // Function that returns whether the stash item will be popped off in the next step