Skip to content

Commit

Permalink
CSE Machine: Enable visualization when running programs with runtime …
Browse files Browse the repository at this point in the history 
…errors (#2847)

* Enable CSE machine visualization for errors

* update snapshots

* update snapshots
  • Loading branch information
@NhatMinh0208
NhatMinh0208 committed Mar 18, 2024
1 parent f68e5f6 commit c3335e1
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 26 deletions.
8 changes: 8 additions & 0 deletions src/commons/sagas/WorkspaceSaga.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1232,6 +1232,14 @@ export function* evalCode(
yield* dumpDisplayBuffer(workspaceLocation, isStoriesBlock, storyEnv);
if (!isStoriesBlock) {
yield put(actions.evalInterpreterError(context.errors, workspaceLocation));
// enable the CSE machine visualizer during errors
if (context.executionMethod === 'cse-machine' && needUpdateCse) {
yield put(actions.updateStepsTotal(context.runtime.envStepsTotal + 1, workspaceLocation));
yield put(actions.toggleUpdateCse(false, workspaceLocation as any));
yield put(
actions.updateBreakpointSteps(context.runtime.breakpointSteps, workspaceLocation)
);
}
} else {
// Safe to use ! as storyEnv will be defined from above when we call from EVAL_STORY
yield put(actions.evalStoryError(context.errors, storyEnv!));
Expand Down
24 changes: 18 additions & 6 deletions src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`CSE Machine component renders correctly 1`] = `
className="bp5-slider-track"
>
<div
className="bp5-slider-progress"
className="bp5-slider-progress bp5-intent-primary"
style={
Object {
"left": "0.00%",
Expand All @@ -37,7 +37,7 @@ exports[`CSE Machine component renders correctly 1`] = `
}
/>
<div
className="bp5-slider-progress bp5-intent-primary"
className="bp5-slider-progress"
style={
Object {
"left": "0.00%",
Expand All @@ -59,13 +59,24 @@ exports[`CSE Machine component renders correctly 1`] = `
</div>
<div
className="bp5-slider-axis"
/>
>
<div
className="bp5-slider-label"
style={
Object {
"left": "NaN%",
}
}
>
0
</div>
</div>
<span
aria-disabled={true}
aria-orientation="horizontal"
aria-valuemax={0}
aria-valuemin={1}
aria-valuenow={1}
aria-valuemin={0}
aria-valuenow={0}
className="bp5-slider-handle"
role="slider"
style={Object {}}
Expand All @@ -74,7 +85,7 @@ exports[`CSE Machine component renders correctly 1`] = `
<span
className="bp5-slider-label"
>
1
0
</span>
</span>
</div>
Expand Down Expand Up @@ -335,6 +346,7 @@ exports[`CSE Machine component renders correctly 1`] = `
</div>
</div>
<div />
<div
className="bp5-running-text"
data-testid="cse-machine-default-text"
Expand Down
33 changes: 23 additions & 10 deletions src/commons/sideContent/content/SideContentCseMachine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ import React from 'react';
import { HotKeys } from 'react-hotkeys';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Output } from 'src/commons/repl/Repl';
import type { PlaygroundWorkspaceState } from 'src/commons/workspace/WorkspaceTypes';
import CseMachine from 'src/features/cseMachine/CseMachine';
import { CseAnimation } from 'src/features/cseMachine/CseMachineAnimation';
import { Layout } from 'src/features/cseMachine/CseMachineLayout';

import { OverallState } from '../../application/ApplicationTypes';
import { InterpreterOutput, OverallState } from '../../application/ApplicationTypes';
import { HighlightedLines } from '../../editor/EditorTypes';
import Constants, { Links } from '../../utils/Constants';
import {
Expand Down Expand Up @@ -50,6 +51,7 @@ type StateProps = {
currentStep: number;
breakpointSteps: number[];
needCseUpdate: boolean;
machineOutput: InterpreterOutput[];
};

type OwnProps = {
Expand Down Expand Up @@ -96,8 +98,9 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
// This comment is copied over from workspace saga
props.setEditorHighlightedLines(0, segments);
},
// We shouldn't be able to move slider to a step number beyond the step limit
isControlEmpty => {
this.setState({ stepLimitExceeded: !isControlEmpty && this.state.lastStep });
this.setState({ stepLimitExceeded: false });
}
);
}
Expand Down Expand Up @@ -200,11 +203,11 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
<div className={classNames('sa-substituter', Classes.DARK)}>
<Slider
disabled={!this.state.visualization}
min={1}
min={0}
max={this.props.stepsTotal}
onChange={this.sliderShift}
onRelease={this.sliderRelease}
value={this.state.value < 1 ? 1 : this.state.value}
value={this.state.value < 0 ? 0 : this.state.value}
/>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<ButtonGroup>
Expand Down Expand Up @@ -296,6 +299,15 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
</ButtonGroup>
</div>
</div>{' '}
{this.state.visualization &&
this.props.machineOutput.length &&
this.props.machineOutput[0].type === 'errors' ? (
this.props.machineOutput.map((slice, index) => (
<Output output={slice} key={index} usingSubst={false} isHtml={false} />
))
) : (
<div></div>
)}
{this.state.visualization ? (
this.state.stepLimitExceeded ? (
<div
Expand Down Expand Up @@ -387,7 +399,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
};

private stepPrevious = () => {
if (this.state.value !== 1) {
if (this.state.value !== 0) {
this.sliderShift(this.state.value - 1);
this.sliderRelease(this.state.value - 1);
}
Expand All @@ -404,8 +416,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>

private stepFirst = () => {
// Move to the first step
this.sliderShift(1);
this.sliderRelease(1);
this.sliderShift(0);
this.sliderRelease(0);
};

private stepLast = (lastStepValue: number) => () => {
Expand Down Expand Up @@ -435,8 +447,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
return;
}
}
this.sliderShift(1);
this.sliderRelease(1);
this.sliderShift(0);
this.sliderRelease(0);
};
}

Expand Down Expand Up @@ -467,7 +479,8 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
stepsTotal: workspace.stepsTotal,
currentStep: workspace.currentStep,
breakpointSteps: workspace.breakpointSteps,
needCseUpdate: workspace.updateCse
needCseUpdate: workspace.updateCse,
machineOutput: workspace.output
};
};

Expand Down
27 changes: 17 additions & 10 deletions src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -732,36 +732,42 @@ and also the
class="bp5-slider-track"
>
<div
class="bp5-slider-progress"
style="left: 0.00%; right: 0.00%; top: 0px;"
class="bp5-slider-progress bp5-intent-primary"
style="left: 0.00%; right: 100.00%; top: 0px;"
/>
<div
class="bp5-slider-progress bp5-intent-primary"
style="left: 0.00%; right: 0.00%; top: 0px;"
class="bp5-slider-progress"
style="left: 0.00%; right: 100.00%; top: 0px;"
/>
<div
class="bp5-slider-progress"
style="left: 0.00%; right: 0.00%; top: 0px;"
style="left: 0.00%; right: 100.00%; top: 0px;"
/>
</div>
<div
class="bp5-slider-axis"
/>
>
<div
class="bp5-slider-label"
>
0
</div>
</div>
<span
aria-disabled="true"
aria-orientation="horizontal"
aria-valuemax="0"
aria-valuemin="1"
aria-valuenow="1"
aria-valuemin="0"
aria-valuenow="0"
class="bp5-slider-handle"
role="slider"
style="left: calc(0.00% - 0px);"
style="left: calc(NaN% - 0px);"
tabindex="0"
>
<span
class="bp5-slider-label"
>
1
0
</span>
</span>
</div>
Expand Down Expand Up @@ -951,6 +957,7 @@ and also the
</div>
</div>
<div />
<div
class="bp5-running-text"
data-testid="cse-machine-default-text"
Expand Down

0 comments on commit c3335e1

Please sign in to comment.