Substitution model visualizer (#803)

* Add SUBST button

Modify class definitions, instantiations to incorporate SUBST button

Remove SUBST button from controlbar

Create SubstTimeline and SubstVisualizer

Add a SUBST tab to the sidebar

Fix problem with range input not sliding in SUBST visualizer tab

22 march 2019

Remove compile error; confirm can generate code from tree and display

Add functionality to handle slider change

Add SUBST visualizer functionality to maximum extent permissable by current state of SUBST substitutor

Remove excess code and comments left over from testing

Add functionality for SUBST to return the actual correct output in the repl output display

Remove redundant code

Add code to make SUBST slider default to max value

Change SUBST display to automatically update to match slider default value

Add buttons to SUBST timeline to allow for fine-grained control over stepping through substitution

Add checks to disable SUBST timeline control buttons when appropriate

"When appropriate" -> for example, all buttons are disabled when the program has not yet been run, and hence there is nothing to step through; button to go to previous step is disabled when already at first step.

Add code such that SUBST interpreter is only used when the SUBST tab of the sidebar is open

Add keyboard controls to SUBST timeline buttons

Add code to transfer default focus to SUBST slider after program evaluation

Override default behavior of HTML input slider for SUBST

Rationale: default HTML input slider binds up and down to increase and decrease, respectively. This runs counter to the intuition provided by course textbook.

Make SUBST slider inline

Make SUBST slider inline (via sass)

* Fix Playground errors

* Shift useSubst variable location

* Rewrite components to make use of new substituter interface w js slang

* Only use subst interpreter when the subst tab is open

* Run format

* Fix linting

* Fix final answer displayed by subst

* Fix Redux Saga tests

* Refactor of Substituter component

* SubstVisualizer and SubstTimeline merged into one component

* Tooltip changed to 'Substituter'

* Use Blueprint Slider instead of HTML ones

* REPL now checks Redux state to evaluate results for Subst

* New actions set up to update Redux state

* Minor CSS style changes

* Changed use of 'bp3' literals to constants

* Updated tests

* Formatting

* Fix for controlBar reference

* Hide REPL from Substituter

* CSS changes for code display style

* Updated REPL snapshot

* Style and interface improvements

* Implemented use of breakpoints to activate SUBST

* SUBST now only enabled for Chapter 1 and 2

* Hide REPL, disable resizing on SUBST tab

* Minor style changes for SUBST tab, slider

* Fix bug where SUBST would be active outside Playground

* Implemented blinking style for SUBST tab

* Updated snapshots

* Revert package-lock.json

* Set SUBST tab icon to 'Flow: Review'

* CSS style fixes

* Fix for code text being justified in SUBST

* SUBST tab now scrolls properly on Chrome

* Added vendor prefixes for SUBST CSS

* Change occurences of 'code' => 'your program'

* Updated snapshots

* Formatting for SCSS

* Merge branch 'master' of https://github.com/source-academy/cadet-frontend into leow-subst

* Fix for crash when REPL processes an array output from js-slang

* Updated tests

* Changes to the way subst slider responds to arrow key input

* Modified SUBST hotkeys

* SUBST slider can now be moved with < and > keys

* Use of SUBST now clears the REPL to prevent display of raw data

* Arrow keys no longer used as hotkeys to prevent conflict

* Update js-slang version

* Formatting

* Updated tests

Author: LeowWB

package-lock.json

@@ -44,7 +44,7 @@
     "draft-js": "^0.10.5",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
-    "js-slang": "^0.2.6",
+    "js-slang": "^0.3.0",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.13",
     "lz-string": "^1.4.4",

package.json

@@ -1,5 +1,5 @@
 import * as actionTypes from '../actionTypes';
-import { changeQueryString, generateLzString } from '../playground';
+import { changeQueryString, generateLzString, toggleUsingSubst } from '../playground';
 
 test('generateLzString generates correct action object', () => {
   const action = generateLzString();
@@ -16,3 +16,11 @@ test('changeQueryString generates correct action object', () => {
     payload: queryString
   });
 });
+
+test('toggleUsingSubst generates correct action object', () => {
+  const action = toggleUsingSubst(true);
+  expect(action).toEqual({
+    type: actionTypes.TOGGLE_USING_SUBST,
+    payload: true
+  });
+});

src/actions/__tests__/playground.ts

@@ -7,6 +7,7 @@ export const LOG_OUT = 'LOG_OUT';
 /** Playground */
 export const CHANGE_QUERY_STRING = 'CHANGE_QUERY_STRING';
 export const GENERATE_LZ_STRING = 'GENERATE_LZ_STRING';
+export const TOGGLE_USING_SUBST = 'TOGGLE_USING_SUBST';
 
 /** Interpreter */
 export const BEGIN_INTERRUPT_EXECUTION = 'BEGIN_INTERRUPT_EXECUTION';

src/actions/actionTypes.ts

@@ -4,5 +4,8 @@ import * as actionTypes from './actionTypes';
 
 export const generateLzString = () => action(actionTypes.GENERATE_LZ_STRING);
 
+export const toggleUsingSubst = (usingSubst: boolean) =>
+  action(actionTypes.TOGGLE_USING_SUBST, usingSubst);
+
 export const changeQueryString = (queryString: string) =>
   action(actionTypes.CHANGE_QUERY_STRING, queryString);

src/actions/playground.ts

@@ -24,6 +24,7 @@ import { SideContentTab } from './workspace/side-content';
 import EnvVisualizer from './workspace/side-content/EnvVisualizer';
 import Inspector from './workspace/side-content/Inspector';
 import ListVisualizer from './workspace/side-content/ListVisualizer';
+import SubstVisualizer from './workspace/side-content/SubstVisualizer';
 import VideoDisplay from './workspace/side-content/VideoDisplay';
 
 const CHAP = '\xa7';
@@ -68,6 +69,7 @@ export interface IStateProps {
   sourceChapter: number;
   websocketStatus: number;
   externalLibraryName: string;
+  usingSubst: boolean;
 }
 
 export interface IDispatchProps {
@@ -93,6 +95,7 @@ export interface IDispatchProps {
   handleSetEditorSessionId: (editorSessionId: string) => void;
   handleSetWebsocketStatus: (websocketStatus: number) => void;
   handleSideContentHeightChange: (heightChange: number) => void;
+  handleUsingSubst: (usingSubst: boolean) => void;
   handleDebuggerPause: () => void;
   handleDebuggerResume: () => void;
   handleDebuggerReset: () => void;
@@ -101,20 +104,33 @@ export interface IDispatchProps {
 
 type PlaygroundState = {
   isGreen: boolean;
+  selectedTab: SideContentType;
+  hasBreakpoints: boolean;
 };
 
 class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
   private keyMap = { goGreen: 'h u l k' };
-
   private handlers = { goGreen: () => {} };
 
   constructor(props: IPlaygroundProps) {
     super(props);
-    this.state = { isGreen: false };
+    this.state = {
+      isGreen: false,
+      selectedTab: SideContentType.introduction,
+      hasBreakpoints: false
+    };
     this.handlers.goGreen = this.toggleIsGreen.bind(this);
+    (window as any).thePlayground = this;
   }
 
   public render() {
+    const substVisualizerTab: SideContentTab = {
+      label: 'Substituter',
+      iconName: IconNames.FLOW_REVIEW,
+      body: <SubstVisualizer content={this.processArrayOutput(this.props.output)} />,
+      id: SideContentType.substVisualizer
+    };
+
     const autorunButtons = (
       <AutorunButtons
         handleDebuggerPause={this.props.handleDebuggerPause}
@@ -130,8 +146,19 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
       />
     );
 
-    const chapterSelectHandler = ({ chapter }: { chapter: number }, e: any) =>
+    const chapterSelectHandler = ({ chapter }: { chapter: number }, e: any) => {
+      if (
+        (chapter <= 2 && this.state.hasBreakpoints) ||
+        this.state.selectedTab === SideContentType.substVisualizer
+      ) {
+        this.props.handleUsingSubst(true);
+      }
+      if (chapter > 2) {
+        this.props.handleReplOutputClear();
+        this.props.handleUsingSubst(false);
+      }
       this.props.handleChapterSelect(chapter);
+    };
     const chapterSelect = (
       <ChapterSelect
         handleChapterSelect={chapterSelectHandler}
@@ -140,17 +167,19 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
       />
     );
 
-    const clearButton = (
-      <ClearButton handleReplOutputClear={this.props.handleReplOutputClear} key="clear_repl" />
-    );
+    const clearButton =
+      this.state.selectedTab === SideContentType.substVisualizer ? null : (
+        <ClearButton handleReplOutputClear={this.props.handleReplOutputClear} key="clear_repl" />
+      );
 
-    const evalButton = (
-      <EvalButton
-        handleReplEval={this.props.handleReplEval}
-        isRunning={this.props.isRunning}
-        key="eval_repl"
-      />
-    );
+    const evalButton =
+      this.state.selectedTab === SideContentType.substVisualizer ? null : (
+        <EvalButton
+          handleReplEval={this.props.handleReplEval}
+          isRunning={this.props.isRunning}
+          key="eval_repl"
+        />
+      );
 
     const changeExecutionTimeHandler = (execTime: number) =>
       this.props.handleChangeExecTime(execTime);
@@ -212,6 +241,10 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
       tabs.push(envVisualizerTab);
     }
 
+    if (this.props.sourceChapter <= 2) {
+      tabs.push(substVisualizerTab);
+    }
+
     const workspaceProps: WorkspaceProps = {
       controlBarProps: {
         editorButtons: [
@@ -235,7 +268,36 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         isEditorAutorun: this.props.isEditorAutorun,
         breakpoints: this.props.breakpoints,
         highlightedLines: this.props.highlightedLines,
-        handleEditorUpdateBreakpoints: this.props.handleEditorUpdateBreakpoints,
+        handleEditorUpdateBreakpoints: (breakpoints: string[]) => {
+          // get rid of holes in array
+          const numberOfBreakpoints = breakpoints.filter(arrayItem => !!arrayItem).length;
+          if (numberOfBreakpoints > 0) {
+            this.setState({
+              ...this.state,
+              hasBreakpoints: true
+            });
+            if (this.props.sourceChapter <= 2) {
+              /**
+               * There are breakpoints set on Source Chapter 2, so we set the
+               * Redux state for the editor to evaluate to the substituter
+               */
+
+              this.props.handleUsingSubst(true);
+            }
+          }
+          if (numberOfBreakpoints === 0) {
+            this.setState({
+              ...this.state,
+              hasBreakpoints: false
+            });
+
+            if (this.state.selectedTab !== SideContentType.substVisualizer) {
+              this.props.handleReplOutputClear();
+              this.props.handleUsingSubst(false);
+            }
+          }
+          this.props.handleEditorUpdateBreakpoints(breakpoints);
+        },
         handleSetWebsocketStatus: this.props.handleSetWebsocketStatus
       },
       editorHeight: this.props.editorHeight,
@@ -249,14 +311,18 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         handleBrowseHistoryDown: this.props.handleBrowseHistoryDown,
         handleBrowseHistoryUp: this.props.handleBrowseHistoryUp,
         handleReplEval: this.props.handleReplEval,
-        handleReplValueChange: this.props.handleReplValueChange
+        handleReplValueChange: this.props.handleReplValueChange,
+        hidden: this.state.selectedTab === SideContentType.substVisualizer,
+        usingSubst: this.props.usingSubst
       },
       sideContentHeight: this.props.sideContentHeight,
       sideContentProps: {
-        defaultSelectedTabId: SideContentType.introduction,
+        defaultSelectedTabId: this.state.selectedTab,
         handleActiveTabChange: this.props.handleActiveTabChange,
+        onChange: this.onChangeTabs,
         tabs
-      }
+      },
+      sideContentIsResizeable: this.state.selectedTab !== SideContentType.substVisualizer
     };
 
     return (
@@ -274,8 +340,44 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
     );
   }
 
+  private onChangeTabs = (
+    newTabId: SideContentType,
+    prevTabId: SideContentType,
+    event: React.MouseEvent<HTMLElement>
+  ) => {
+    if (newTabId === prevTabId) {
+      return;
+    }
+
+    if (this.props.sourceChapter <= 2 && newTabId === SideContentType.substVisualizer) {
+      this.props.handleUsingSubst(true);
+    }
+
+    if (prevTabId === SideContentType.substVisualizer && !this.state.hasBreakpoints) {
+      this.props.handleReplOutputClear();
+      this.props.handleUsingSubst(false);
+    }
+
+    this.setState({
+      ...this.state,
+      selectedTab: newTabId
+    });
+  };
+
+  private processArrayOutput = (output: InterpreterOutput[]) => {
+    const editorOutput = output[0];
+    if (editorOutput && editorOutput.type === 'result' && editorOutput.value instanceof Array) {
+      return editorOutput.value;
+    } else {
+      return [];
+    }
+  };
+
   private toggleIsGreen() {
-    this.setState({ isGreen: !this.state.isGreen });
+    this.setState({
+      ...this.state,
+      isGreen: !this.state.isGreen
+    });
   }
 }
 

src/components/Playground.tsx

@@ -25,6 +25,7 @@ const baseProps = {
   output: [],
   replValue: '',
   websocketStatus: 0,
+  usingSubst: false,
   handleActiveTabChange: (activeTab: SideContentType) => {},
   handleBrowseHistoryDown: () => {},
   handleBrowseHistoryUp: () => {},
@@ -48,6 +49,7 @@ const baseProps = {
   handleSetWebsocketStatus: (websocketStatus: number) => {},
   handleSideContentHeightChange: (h: number) => {},
   handleToggleEditorAutorun: () => {},
+  handleUsingSubst: (usingSubst: boolean) => {},
   handleDebuggerPause: () => {},
   handleDebuggerResume: () => {},
   handleDebuggerReset: () => {}

src/components/__tests__/Playground.tsx

@@ -2,12 +2,12 @@
 
 exports[`Playground renders correctly 1`] = `
 "<HotKeys className=\\"Playground bp3-dark\\" keyMap={{...}} handlers={{...}}>
-  <Workspace controlBarProps={{...}} editorProps={{...}} editorHeight={[undefined]} editorWidth=\\"50%\\" handleEditorHeightChange={[Function: handleEditorHeightChange]} handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} />
+  <Workspace controlBarProps={{...}} editorProps={{...}} editorHeight={[undefined]} editorWidth=\\"50%\\" handleEditorHeightChange={[Function: handleEditorHeightChange]} handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} sideContentIsResizeable={true} />
 </HotKeys>"
 `;
 
 exports[`Playground with link renders correctly 1`] = `
 "<HotKeys className=\\"Playground bp3-dark\\" keyMap={{...}} handlers={{...}}>
-  <Workspace controlBarProps={{...}} editorProps={{...}} editorHeight={[undefined]} editorWidth=\\"50%\\" handleEditorHeightChange={[Function: handleEditorHeightChange]} handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} />
+  <Workspace controlBarProps={{...}} editorProps={{...}} editorHeight={[undefined]} editorWidth=\\"50%\\" handleEditorHeightChange={[Function: handleEditorHeightChange]} handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} replProps={{...}} sideContentHeight={40} sideContentProps={{...}} sideContentIsResizeable={true} />
 </HotKeys>"
 `;

src/components/__tests__/__snapshots__/Playground.tsx.snap

@@ -195,7 +195,7 @@ class AssessmentWorkspace extends React.Component<
       >
         <div className={Classes.DIALOG_BODY}>
           <Markdown content="Are you sure you want to reset the template?" />
-          <Markdown content="*Note this will not affect the saved copy of your code, unless you save over it.*" />
+          <Markdown content="*Note this will not affect the saved copy of your program, unless you save over it.*" />
         </div>
         <div className={Classes.DIALOG_FOOTER}>
           <ButtonGroup>

src/components/assessment/AssessmentWorkspace.tsx

@@ -13,7 +13,7 @@ exports[`AssessmentWorkspace page with MCQ question renders correctly 1`] = `
   <Blueprint3.Dialog className=\\"assessment-reset\\" icon=\\"error\\" isCloseButtonShown={false} isOpen={false} title=\\"Confirmation: Reset editor?\\" canOutsideClickClose={true}>
     <div className=\\"bp3-dialog-body\\">
       <Markdown content=\\"Are you sure you want to reset the template?\\" />
-      <Markdown content=\\"*Note this will not affect the saved copy of your code, unless you save over it.*\\" />
+      <Markdown content=\\"*Note this will not affect the saved copy of your program, unless you save over it.*\\" />
     </div>
     <div className=\\"bp3-dialog-footer\\">
       <Blueprint3.ButtonGroup>
@@ -41,7 +41,7 @@ exports[`AssessmentWorkspace page with overdue assessment renders correctly 1`]
   <Blueprint3.Dialog className=\\"assessment-reset\\" icon=\\"error\\" isCloseButtonShown={false} isOpen={false} title=\\"Confirmation: Reset editor?\\" canOutsideClickClose={true}>
     <div className=\\"bp3-dialog-body\\">
       <Markdown content=\\"Are you sure you want to reset the template?\\" />
-      <Markdown content=\\"*Note this will not affect the saved copy of your code, unless you save over it.*\\" />
+      <Markdown content=\\"*Note this will not affect the saved copy of your program, unless you save over it.*\\" />
     </div>
     <div className=\\"bp3-dialog-footer\\">
       <Blueprint3.ButtonGroup>
@@ -69,7 +69,7 @@ exports[`AssessmentWorkspace page with programming question renders correctly 1`
   <Blueprint3.Dialog className=\\"assessment-reset\\" icon=\\"error\\" isCloseButtonShown={false} isOpen={false} title=\\"Confirmation: Reset editor?\\" canOutsideClickClose={true}>
     <div className=\\"bp3-dialog-body\\">
       <Markdown content=\\"Are you sure you want to reset the template?\\" />
-      <Markdown content=\\"*Note this will not affect the saved copy of your code, unless you save over it.*\\" />
+      <Markdown content=\\"*Note this will not affect the saved copy of your program, unless you save over it.*\\" />
     </div>
     <div className=\\"bp3-dialog-footer\\">
       <Blueprint3.ButtonGroup>
@@ -97,7 +97,7 @@ exports[`AssessmentWorkspace renders Grading tab correctly if the question has b
   <Blueprint3.Dialog className=\\"assessment-reset\\" icon=\\"error\\" isCloseButtonShown={false} isOpen={false} title=\\"Confirmation: Reset editor?\\" canOutsideClickClose={true}>
     <div className=\\"bp3-dialog-body\\">
       <Markdown content=\\"Are you sure you want to reset the template?\\" />
-      <Markdown content=\\"*Note this will not affect the saved copy of your code, unless you save over it.*\\" />
+      <Markdown content=\\"*Note this will not affect the saved copy of your program, unless you save over it.*\\" />
     </div>
     <div className=\\"bp3-dialog-footer\\">
       <Blueprint3.ButtonGroup>