Merge branch 'sa2122-achievements' of https://github.com/source-academy/frontend into sa2122-achievements

Author: jonas-chow

src/commons/sagas/AchievementSaga.ts

@@ -233,6 +233,7 @@ export default function* AchievementSaga(): SagaIterator {
       const eventGoalUuids = goals
         .filter((goal: AchievementGoal) => goalIncludesEvents(goal, events))
         .map((goal: AchievementGoal) => goal.uuid);
+
       eventGoalUuids.forEach((uuid: string) => {
         incrementCount(uuid, inferencer);
         updatedGoals.add(uuid);

src/features/envVisualizer/EnvVisualizerLayout.tsx

@@ -1,6 +1,5 @@
 import { Context } from 'js-slang';
 import { Frame } from 'js-slang/dist/types';
-import { cloneDeep } from 'lodash';
 import React from 'react';
 import { Rect } from 'react-konva';
 import { Layer, Stage } from 'react-konva';
@@ -14,6 +13,7 @@ import { Value } from './components/values/Value';
 import { Config, ShapeDefaultProps } from './EnvVisualizerConfig';
 import { Data, EnvTree, EnvTreeNode, ReferenceType } from './EnvVisualizerTypes';
 import {
+  deepCopyTree,
   isArray,
   isEmptyEnvironment,
   isFn,
@@ -49,7 +49,8 @@ export class Layout {
     Layout.values.clear();
     Layout.levels = [];
     Layout.key = 0;
-    Layout.environmentTree = cloneDeep(context.runtime.environmentTree as EnvTree);
+    // deep copy so we don't mutate the context
+    Layout.environmentTree = deepCopyTree(context.runtime.environmentTree as EnvTree);
     Layout.globalEnvNode = Layout.environmentTree.root;
 
     // remove program environment and merge bindings into global env
@@ -65,6 +66,7 @@ export class Layout {
       Config.CanvasMinHeight,
       lastLevel.y + lastLevel.height + Config.CanvasPaddingY
     );
+
     Layout.width = Math.max(
       Config.CanvasMinWidth,
       Layout.levels.reduce<number>((maxWidth, level) => Math.max(maxWidth, level.width), 0) +
@@ -151,19 +153,24 @@ export class Layout {
         return [c];
       }
     };
+
     let frontier: EnvTreeNode[] = [Layout.globalEnvNode];
     let prevLevel: Level | null = null;
+    let currLevel: Level;
+
     while (frontier.length > 0) {
-      const currLevel: Level = new Level(prevLevel, frontier);
+      currLevel = new Level(prevLevel, frontier);
       this.levels.push(currLevel);
       const nextFrontier: EnvTreeNode[] = [];
+
       frontier.forEach(e => {
         e.children.forEach(c => {
           const nextChildren = getNextChildren(c as EnvTreeNode);
           nextChildren.forEach(c => (c.parent = e));
           nextFrontier.push(...nextChildren);
         });
       });
+
       prevLevel = currLevel;
       frontier = nextFrontier;
     }

src/features/envVisualizer/EnvVisualizerUtils.ts

@@ -1,16 +1,21 @@
+import { Environment } from 'js-slang/dist/types';
 import { Node } from 'konva/types/Node';
+import { cloneDeep } from 'lodash';
 
 import { Value } from './components/values/Value';
 import { Config } from './EnvVisualizerConfig';
 import {
   Data,
   EmptyObject,
   Env,
+  EnvTree,
+  EnvTreeNode,
   FnTypes,
   PrimitiveTypes,
   ReferenceType
 } from './EnvVisualizerTypes';
 
+// TODO: can make use of lodash
 /** checks if `x` is an object */
 export function isObject(x: any): x is object {
   return x === Object(x);
@@ -21,6 +26,21 @@ export function isEmptyObject(object: Object): object is EmptyObject {
   return Object.keys(object).length === 0;
 }
 
+/** checks if `object` is `Environment` */
+export function isEnvironment(object: Object): object is Environment {
+  return 'head' in object && 'tail' in object && 'name' in object;
+}
+
+/** checks if `object` is `EnvTreeNode` */
+export function isEnvTreeNode(object: Object): object is EnvTreeNode {
+  return 'parent' in object && 'children' in object;
+}
+
+/** checks if `object` is `EnvTree` */
+export function isEnvTree(object: Object): object is EnvTree {
+  return 'root' in object;
+}
+
 /** checks if `env` is empty (that is, head of env is an empty object) */
 export function isEmptyEnvironment(env: Env): env is Env & { head: EmptyObject } {
   return env === null || isEmptyObject(env.head);
@@ -93,7 +113,11 @@ export function getTextWidth(
 ): number {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
-  if (!context) return 0;
+
+  if (!context || !text) {
+    return 0;
+  }
+
   context.font = font;
   const longestLine = text
     .split('\n')
@@ -186,3 +210,42 @@ export function getNonEmptyEnv(environment: Env): Env {
     return environment;
   }
 }
+
+/**
+ * Given any objects, this function will find the underlying `Environment` objects
+ * and perform copying of property descriptors from source frames to destination frames.
+ * Property descriptors are important for us to distinguish between constants and variables.
+ */
+export function copyOwnPropertyDescriptors(source: any, destination: any) {
+  // TODO: use lodash cloneDeepWith customizer?
+  if (isFunction(source) || isPrimitiveData(source)) {
+    return;
+  }
+  if (isEnvTree(source) && isEnvTree(destination)) {
+    copyOwnPropertyDescriptors(source.root, destination.root);
+  } else if (isEnvTreeNode(source) && isEnvTreeNode(destination)) {
+    // recurse only on children and environment
+    copyOwnPropertyDescriptors(source.children, destination.children);
+    copyOwnPropertyDescriptors(source.environment, destination.environment);
+  } else if (isArray(source) && isArray(destination)) {
+    // recurse on array items
+    source.forEach((item, i) => copyOwnPropertyDescriptors(item, destination[i]));
+  } else if (isEnvironment(source) && isEnvironment(destination)) {
+    // copy descriptors from source frame to destination frame
+    Object.defineProperties(destination.head, Object.getOwnPropertyDescriptors(source.head));
+    // recurse on tail
+    copyOwnPropertyDescriptors(source.tail, destination.tail);
+  }
+}
+
+/**
+ * creates a deep clone of `EnvTree`
+ *
+ * TODO: move this function to EnvTree class
+ * so we can invoke like so: environmentTree.deepCopy()
+ */
+export function deepCopyTree(value: EnvTree): EnvTree {
+  const clone = cloneDeep(value);
+  copyOwnPropertyDescriptors(value, clone);
+  return clone;
+}

src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap

@@ -136,9 +136,9 @@ Array [
       },
     },
   },
-  "fn: ",
+  "fn:= ",
   [Function],
-  "x: ",
+  "x:= ",
   Array [
     "long string",
     Array [
@@ -162,7 +162,7 @@ Array [
     5,
     6,
   ],
-  "y: ",
+  "y:= ",
   Array [
     Array [
       [Function],
@@ -352,9 +352,9 @@ Array [
       },
     },
   },
-  "fn: ",
+  "fn:= ",
   [Function],
-  "x: ",
+  "x:= ",
   Array [
     1,
     Array [
@@ -366,7 +366,7 @@ Array [
     ],
     4,
   ],
-  "l: ",
+  "l:= ",
   Array [
     1,
     Array [
@@ -530,7 +530,7 @@ Array [
       },
     },
   },
-  "x1: ",
+  "x1:= ",
   Array [
     1,
     Array [
@@ -544,7 +544,7 @@ Array [
       ],
     ],
   ],
-  "x2: ",
+  "x2:= ",
   Array [
     3,
     Array [
@@ -706,7 +706,7 @@ Array [
       },
     },
   },
-  "e: ",
+  "e:= ",
   Array [
     Array [
       3,
@@ -735,12 +735,12 @@ Array [
       ],
     ],
   ],
-  "f: ",
+  "f:= ",
   Array [
     1,
     2,
   ],
-  "g: ",
+  "g:= ",
   Array [
     Array [
       [Function],
@@ -769,7 +769,7 @@ Array [
       ],
     ],
   ],
-  "y: ",
+  "y:= ",
   Array [
     Array [
       1,
@@ -866,9 +866,9 @@ Array [
   0,
   "y: ",
   10,
-  "f: ",
+  "f:= ",
   [Function],
-  "z: ",
+  "z:= ",
   [Function],
   Object {
     "callExpression": Object {
@@ -1101,7 +1101,7 @@ Array [
       },
     },
   },
-  "x: ",
+  "x:= ",
   Array [
     1,
     Array [
@@ -1188,7 +1188,7 @@ Array [
       },
     },
   },
-  "x: ",
+  "x:= ",
   Array [],
 ]
 `;

src/features/envVisualizer/components/Binding.tsx

@@ -33,7 +33,8 @@ export class Binding implements Visible {
     /** frame this binding is in */
     readonly frame: Frame,
     /** previous binding (the binding above it) */
-    readonly prevBinding: Binding | null
+    readonly prevBinding: Binding | null,
+    readonly isConstant: boolean = false
   ) {
     // derive the coordinates from the binding above it
     if (this.prevBinding) {
@@ -44,7 +45,7 @@ export class Binding implements Visible {
       this.y = this.frame.y + Config.FramePaddingY;
     }
 
-    this.keyString += Config.VariableColon;
+    this.keyString += isConstant ? Config.ConstantColon : Config.VariableColon;
     this.value = Layout.createValue(data, this);
 
     const keyYOffset =

src/features/envVisualizer/components/Frame.tsx

@@ -74,7 +74,7 @@ export class Frame implements Visible, Hoverable {
     let maxBindingWidth = 0;
     for (const [key, data] of Object.entries(this.environment.head)) {
       const bindingWidth =
-        Math.max(Config.TextMinWidth, getTextWidth(String(key + Config.VariableColon))) +
+        Math.max(Config.TextMinWidth, getTextWidth(key + Config.ConstantColon)) +
         Config.TextPaddingX +
         (isUnassigned(data)
           ? Math.max(Config.TextMinWidth, getTextWidth(Config.UnassignedData.toString()))
@@ -88,8 +88,11 @@ export class Frame implements Visible, Hoverable {
     // initializes bindings (keys + values)
     let prevBinding: Binding | null = null;
     let totalWidth = this.width;
-    for (const [key, data] of Object.entries(this.environment.head)) {
-      const currBinding: Binding = new Binding(String(key), data, this, prevBinding);
+
+    const descriptors = Object.getOwnPropertyDescriptors(this.environment.head);
+
+    for (const [key, data] of Object.entries(descriptors)) {
+      const currBinding: Binding = new Binding(key, data.value, this, prevBinding, !data.writable);
       this.bindings.push(currBinding);
       prevBinding = currBinding;
       totalWidth = Math.max(totalWidth, currBinding.width + Config.FramePaddingX);

src/features/envVisualizer/components/Text.tsx

@@ -4,7 +4,7 @@ import { Label as KonvaLabel, Tag as KonvaTag, Text as KonvaText } from 'react-k
 
 import { Config, ShapeDefaultProps } from '../EnvVisualizerConfig';
 import { Layout } from '../EnvVisualizerLayout';
-import { Hoverable, Visible } from '../EnvVisualizerTypes';
+import { Data, Hoverable, Visible } from '../EnvVisualizerTypes';
 import { getTextWidth } from '../EnvVisualizerUtils';
 
 export interface TextOptions {
@@ -30,14 +30,14 @@ export class Text implements Visible, Hoverable {
   readonly height: number;
   readonly width: number;
 
-  readonly fullStr: string;
+  readonly partialStr: string; // truncated string representation of data
+  readonly fullStr: string; // full string representation of data
 
   readonly options: TextOptions = defaultOptions;
   private labelRef: RefObject<any> = React.createRef();
 
   constructor(
-    /** text */
-    readonly data: any,
+    readonly data: Data,
     readonly x: number,
     readonly y: number,
     /** additional options (for customization of text) */
@@ -47,20 +47,22 @@ export class Text implements Visible, Hoverable {
 
     const { fontSize, fontStyle, fontFamily, maxWidth, isStringIdentifiable } = this.options;
 
-    this.fullStr = this.data = isStringIdentifiable ? JSON.stringify(data) : String(data);
+    this.fullStr = this.partialStr = isStringIdentifiable
+      ? JSON.stringify(data) || String(data)
+      : String(data);
     this.height = fontSize;
 
     const widthOf = (s: string) => getTextWidth(s, `${fontStyle} ${fontSize}px ${fontFamily}`);
-    if (widthOf(this.data) > maxWidth) {
+    if (widthOf(this.partialStr) > maxWidth) {
       let truncatedText = Config.Ellipsis.toString();
       let i = 0;
-      while (widthOf(this.data.substr(0, i) + Config.Ellipsis.toString()) < maxWidth) {
-        truncatedText = this.data.substr(0, i++) + Config.Ellipsis.toString();
+      while (widthOf(this.partialStr.substr(0, i) + Config.Ellipsis.toString()) < maxWidth) {
+        truncatedText = this.partialStr.substr(0, i++) + Config.Ellipsis.toString();
       }
       this.width = widthOf(truncatedText);
-      this.data = truncatedText;
+      this.partialStr = truncatedText;
     } else {
-      this.width = Math.max(Config.TextMinWidth, widthOf(this.data));
+      this.width = Math.max(Config.TextMinWidth, widthOf(this.partialStr));
     }
   }
 
@@ -94,7 +96,7 @@ export class Text implements Visible, Hoverable {
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
         >
-          <KonvaText {...ShapeDefaultProps} key={Layout.key++} text={this.data} {...props} />
+          <KonvaText {...ShapeDefaultProps} key={Layout.key++} text={this.partialStr} {...props} />
         </KonvaLabel>
         <KonvaLabel
           x={this.x}