Skip to content

Commit c3335e1

Browse files
NhatMinh0208NhatMinh0208
authored
CSE Machine: Enable visualization when running programs with runtime errors (source-academy#2847)
* Enable CSE machine visualization for errors * update snapshots * update snapshots
1 parent f68e5f6 commit c3335e1

File tree

4 files changed

+66
-26
lines changed

4 files changed

+66
-26
lines changed

‎src/commons/sagas/WorkspaceSaga.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1232,6 +1232,14 @@ export function* evalCode(
12321232
yield* dumpDisplayBuffer(workspaceLocation, isStoriesBlock, storyEnv);
12331233
if (!isStoriesBlock) {
12341234
yield put(actions.evalInterpreterError(context.errors, workspaceLocation));
1235+
// enable the CSE machine visualizer during errors
1236+
if (context.executionMethod === 'cse-machine' && needUpdateCse) {
1237+
yield put(actions.updateStepsTotal(context.runtime.envStepsTotal + 1, workspaceLocation));
1238+
yield put(actions.toggleUpdateCse(false, workspaceLocation as any));
1239+
yield put(
1240+
actions.updateBreakpointSteps(context.runtime.breakpointSteps, workspaceLocation)
1241+
);
1242+
}
12351243
} else {
12361244
// Safe to use ! as storyEnv will be defined from above when we call from EVAL_STORY
12371245
yield put(actions.evalStoryError(context.errors, storyEnv!));

‎src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ exports[`CSE Machine component renders correctly 1`] = `
2727
className="bp5-slider-track"
2828
>
2929
<div
30-
className="bp5-slider-progress"
30+
className="bp5-slider-progress bp5-intent-primary"
3131
style={
3232
Object {
3333
"left": "0.00%",
@@ -37,7 +37,7 @@ exports[`CSE Machine component renders correctly 1`] = `
3737
}
3838
/>
3939
<div
40-
className="bp5-slider-progress bp5-intent-primary"
40+
className="bp5-slider-progress"
4141
style={
4242
Object {
4343
"left": "0.00%",
@@ -59,13 +59,24 @@ exports[`CSE Machine component renders correctly 1`] = `
5959
</div>
6060
<div
6161
className="bp5-slider-axis"
62-
/>
62+
>
63+
<div
64+
className="bp5-slider-label"
65+
style={
66+
Object {
67+
"left": "NaN%",
68+
}
69+
}
70+
>
71+
0
72+
</div>
73+
</div>
6374
<span
6475
aria-disabled={true}
6576
aria-orientation="horizontal"
6677
aria-valuemax={0}
67-
aria-valuemin={1}
68-
aria-valuenow={1}
78+
aria-valuemin={0}
79+
aria-valuenow={0}
6980
className="bp5-slider-handle"
7081
role="slider"
7182
style={Object {}}
@@ -74,7 +85,7 @@ exports[`CSE Machine component renders correctly 1`] = `
7485
<span
7586
className="bp5-slider-label"
7687
>
77-
1
88+
0
7889
</span>
7990
</span>
8091
</div>
@@ -335,6 +346,7 @@ exports[`CSE Machine component renders correctly 1`] = `
335346
</div>
336347
</div>
337348
349+
<div />
338350
<div
339351
className="bp5-running-text"
340352
data-testid="cse-machine-default-text"

‎src/commons/sideContent/content/SideContentCseMachine.tsx

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ import React from 'react';
1515
import { HotKeys } from 'react-hotkeys';
1616
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
1717
import { bindActionCreators } from 'redux';
18+
import { Output } from 'src/commons/repl/Repl';
1819
import type { PlaygroundWorkspaceState } from 'src/commons/workspace/WorkspaceTypes';
1920
import CseMachine from 'src/features/cseMachine/CseMachine';
2021
import { CseAnimation } from 'src/features/cseMachine/CseMachineAnimation';
2122
import { Layout } from 'src/features/cseMachine/CseMachineLayout';
2223

23-
import { OverallState } from '../../application/ApplicationTypes';
24+
import { InterpreterOutput, OverallState } from '../../application/ApplicationTypes';
2425
import { HighlightedLines } from '../../editor/EditorTypes';
2526
import Constants, { Links } from '../../utils/Constants';
2627
import {
@@ -50,6 +51,7 @@ type StateProps = {
5051
currentStep: number;
5152
breakpointSteps: number[];
5253
needCseUpdate: boolean;
54+
machineOutput: InterpreterOutput[];
5355
};
5456

5557
type OwnProps = {
@@ -96,8 +98,9 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
9698
// This comment is copied over from workspace saga
9799
props.setEditorHighlightedLines(0, segments);
98100
},
101+
// We shouldn't be able to move slider to a step number beyond the step limit
99102
isControlEmpty => {
100-
this.setState({ stepLimitExceeded: !isControlEmpty && this.state.lastStep });
103+
this.setState({ stepLimitExceeded: false });
101104
}
102105
);
103106
}
@@ -200,11 +203,11 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
200203
<div className={classNames('sa-substituter', Classes.DARK)}>
201204
<Slider
202205
disabled={!this.state.visualization}
203-
min={1}
206+
min={0}
204207
max={this.props.stepsTotal}
205208
onChange={this.sliderShift}
206209
onRelease={this.sliderRelease}
207-
value={this.state.value < 1 ? 1 : this.state.value}
210+
value={this.state.value < 0 ? 0 : this.state.value}
208211
/>
209212
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
210213
<ButtonGroup>
@@ -296,6 +299,15 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
296299
</ButtonGroup>
297300
</div>
298301
</div>{' '}
302+
{this.state.visualization &&
303+
this.props.machineOutput.length &&
304+
this.props.machineOutput[0].type === 'errors' ? (
305+
this.props.machineOutput.map((slice, index) => (
306+
<Output output={slice} key={index} usingSubst={false} isHtml={false} />
307+
))
308+
) : (
309+
<div></div>
310+
)}
299311
{this.state.visualization ? (
300312
this.state.stepLimitExceeded ? (
301313
<div
@@ -387,7 +399,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
387399
};
388400

389401
private stepPrevious = () => {
390-
if (this.state.value !== 1) {
402+
if (this.state.value !== 0) {
391403
this.sliderShift(this.state.value - 1);
392404
this.sliderRelease(this.state.value - 1);
393405
}
@@ -404,8 +416,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
404416

405417
private stepFirst = () => {
406418
// Move to the first step
407-
this.sliderShift(1);
408-
this.sliderRelease(1);
419+
this.sliderShift(0);
420+
this.sliderRelease(0);
409421
};
410422

411423
private stepLast = (lastStepValue: number) => () => {
@@ -435,8 +447,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
435447
return;
436448
}
437449
}
438-
this.sliderShift(1);
439-
this.sliderRelease(1);
450+
this.sliderShift(0);
451+
this.sliderRelease(0);
440452
};
441453
}
442454

@@ -467,7 +479,8 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
467479
stepsTotal: workspace.stepsTotal,
468480
currentStep: workspace.currentStep,
469481
breakpointSteps: workspace.breakpointSteps,
470-
needCseUpdate: workspace.updateCse
482+
needCseUpdate: workspace.updateCse,
483+
machineOutput: workspace.output
471484
};
472485
};
473486

‎src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -732,36 +732,42 @@ and also the
732732
class="bp5-slider-track"
733733
>
734734
<div
735-
class="bp5-slider-progress"
736-
style="left: 0.00%; right: 0.00%; top: 0px;"
735+
class="bp5-slider-progress bp5-intent-primary"
736+
style="left: 0.00%; right: 100.00%; top: 0px;"
737737
/>
738738
<div
739-
class="bp5-slider-progress bp5-intent-primary"
740-
style="left: 0.00%; right: 0.00%; top: 0px;"
739+
class="bp5-slider-progress"
740+
style="left: 0.00%; right: 100.00%; top: 0px;"
741741
/>
742742
<div
743743
class="bp5-slider-progress"
744-
style="left: 0.00%; right: 0.00%; top: 0px;"
744+
style="left: 0.00%; right: 100.00%; top: 0px;"
745745
/>
746746
</div>
747747
<div
748748
class="bp5-slider-axis"
749-
/>
749+
>
750+
<div
751+
class="bp5-slider-label"
752+
>
753+
0
754+
</div>
755+
</div>
750756
<span
751757
aria-disabled="true"
752758
aria-orientation="horizontal"
753759
aria-valuemax="0"
754-
aria-valuemin="1"
755-
aria-valuenow="1"
760+
aria-valuemin="0"
761+
aria-valuenow="0"
756762
class="bp5-slider-handle"
757763
role="slider"
758-
style="left: calc(0.00% - 0px);"
764+
style="left: calc(NaN% - 0px);"
759765
tabindex="0"
760766
>
761767
<span
762768
class="bp5-slider-label"
763769
>
764-
1
770+
0
765771
</span>
766772
</span>
767773
</div>
@@ -951,6 +957,7 @@ and also the
951957
</div>
952958
</div>
953959
960+
<div />
954961
<div
955962
class="bp5-running-text"
956963
data-testid="cse-machine-default-text"

0 commit comments

Comments
 (0)