Skip to content

Commit c37f834

Browse files
committed
add prototype visualisations for scheme data types
1 parent cb4d0e4 commit c37f834

File tree

5 files changed

+71
-15
lines changed

5 files changed

+71
-15
lines changed

src/features/cseMachine/CseMachine.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@ export default class CseMachine {
8484
Layout.setContext(
8585
context.runtime.environmentTree as EnvTree,
8686
context.runtime.control,
87-
context.runtime.stash
87+
context.runtime.stash,
88+
context.chapter
8889
);
8990
this.setVis(Layout.draw());
9091
this.setIsStepLimitExceeded(context.runtime.control.isEmpty());

src/features/cseMachine/CseMachineLayout.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Heap from 'js-slang/dist/cse-machine/heap';
22
import { Control, Stash } from 'js-slang/dist/cse-machine/interpreter';
3+
import { Chapter } from 'js-slang/dist/types';
34
import { KonvaEventObject } from 'konva/lib/Node';
45
import React, { RefObject } from 'react';
56
import { Layer, Rect, Stage } from 'react-konva';
@@ -128,7 +129,12 @@ export class Layout {
128129
}
129130

130131
/** processes the runtime context from JS Slang */
131-
static setContext(envTree: EnvTree, control: Control, stash: Stash): void {
132+
static setContext(
133+
envTree: EnvTree,
134+
control: Control,
135+
stash: Stash,
136+
chapter: Chapter = Chapter.SOURCE_4
137+
): void {
132138
Layout.currentLight = undefined;
133139
Layout.currentDark = undefined;
134140
Layout.currentStackDark = undefined;
@@ -152,7 +158,7 @@ export class Layout {
152158
// initialize levels and frames
153159
Layout.initializeGrid();
154160
// initialize control and stash
155-
Layout.initializeControlStash();
161+
Layout.initializeControlStash(chapter);
156162

157163
if (CseMachine.getControlStash()) {
158164
Layout.controlStashHeight = Math.max(
@@ -185,11 +191,11 @@ export class Layout {
185191
CseAnimation.updateAnimation();
186192
}
187193

188-
static initializeControlStash() {
194+
static initializeControlStash(chapter: Chapter) {
189195
Layout.previousControlComponent = Layout.controlComponent;
190196
Layout.previousStashComponent = Layout.stashComponent;
191-
this.controlComponent = new ControlStack(this.control);
192-
this.stashComponent = new StashStack(this.stash);
197+
this.controlComponent = new ControlStack(this.control, chapter);
198+
this.stashComponent = new StashStack(this.stash, chapter);
193199
}
194200

195201
/**

src/features/cseMachine/CseMachineUtils.ts

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { estreeDecode } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/encoder-visitor';
2+
import { unparse } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/reverse_parser';
13
import {
24
AppInstr,
35
ArrLitInstr,
@@ -9,12 +11,13 @@ import {
911
InstrType,
1012
UnOpInstr
1113
} from 'js-slang/dist/cse-machine/types';
12-
import { Environment, Value as StashValue } from 'js-slang/dist/types';
14+
import { Chapter, Environment, Value as StashValue } from 'js-slang/dist/types';
1315
import { astToString } from 'js-slang/dist/utils/ast/astToString';
1416
import { Group } from 'konva/lib/Group';
1517
import { Node } from 'konva/lib/Node';
1618
import { Shape } from 'konva/lib/Shape';
1719
import { cloneDeep } from 'lodash';
20+
import { isSchemeLanguage } from 'src/commons/application/ApplicationTypes';
1821
import classes from 'src/styles/Draggable.module.scss';
1922

2023
import { ArrayUnit } from './components/ArrayUnit';
@@ -513,12 +516,26 @@ export function getControlItemComponent(
513516
stackHeight: number,
514517
index: number,
515518
highlightOnHover: () => void,
516-
unhighlightOnHover: () => void
519+
unhighlightOnHover: () => void,
520+
chapter: Chapter
517521
): ControlItemComponent {
518522
const topItem = CseMachine.getStackTruncated()
519523
? index === Math.min(Layout.control.size() - 1, 9)
520524
: index === Layout.control.size() - 1;
521525
if (!isInstr(controlItem)) {
526+
if (isSchemeLanguage(chapter)) {
527+
// use the js-slang decoder on the control item
528+
controlItem = estreeDecode(controlItem as any);
529+
const text = unparse(controlItem as any);
530+
return new ControlItemComponent(
531+
text,
532+
text,
533+
stackHeight,
534+
highlightOnHover,
535+
unhighlightOnHover,
536+
topItem
537+
);
538+
}
522539
switch (controlItem.type) {
523540
case 'Program':
524541
// If the control item is the whole program
@@ -737,6 +754,24 @@ export function getControlItemComponent(
737754
unhighlightOnHover,
738755
topItem
739756
);
757+
case InstrType.GENERATE_CONT:
758+
return new ControlItemComponent(
759+
'generate cont',
760+
'Generate continuation',
761+
stackHeight,
762+
highlightOnHover,
763+
unhighlightOnHover,
764+
topItem
765+
);
766+
case InstrType.RESUME_CONT:
767+
return new ControlItemComponent(
768+
'call cont',
769+
'call a continuation',
770+
stackHeight,
771+
highlightOnHover,
772+
unhighlightOnHover,
773+
topItem
774+
);
740775
default:
741776
return new ControlItemComponent(
742777
'INSTRUCTION',
@@ -750,7 +785,16 @@ export function getControlItemComponent(
750785
}
751786
}
752787

753-
export function getStashItemComponent(stashItem: StashValue, stackHeight: number, index: number) {
788+
export function getStashItemComponent(
789+
stashItem: StashValue,
790+
stackHeight: number,
791+
index: number,
792+
chapter: Chapter
793+
): StashItemComponent {
794+
if (isSchemeLanguage(chapter)) {
795+
// we can use schemeVisualise to get the representation of the value
796+
// TODO
797+
}
754798
if (isClosure(stashItem) || isGlobalFn(stashItem) || isDataArray(stashItem)) {
755799
for (const level of Layout.levels) {
756800
for (const frame of level.frames) {

src/features/cseMachine/components/ControlStack.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Control } from 'js-slang/dist/cse-machine/interpreter';
22
import { ControlItem, Instr } from 'js-slang/dist/cse-machine/types';
3-
import { StatementSequence } from 'js-slang/dist/types';
3+
import { Chapter, StatementSequence } from 'js-slang/dist/types';
44
import { Node } from 'js-slang/dist/types';
55
import { KonvaEventObject } from 'konva/lib/Node';
66
import React from 'react';
@@ -28,14 +28,16 @@ export class ControlStack extends Visible implements IHoverable {
2828

2929
constructor(
3030
/** the control object */
31-
readonly control: Control
31+
readonly control: Control,
32+
readonly chapter: Chapter
3233
) {
3334
super();
3435
this._x = ControlStashConfig.ControlPosX;
3536
this._y = ControlStashConfig.ControlPosY;
3637
this._width = ControlStashConfig.ControlItemWidth;
3738
this._height = ControlStashConfig.StashItemHeight + ControlStashConfig.StashItemTextPadding * 2;
3839
this.control = control;
40+
this.chapter = chapter;
3941

4042
// Function to convert the stack items to their components
4143
let i = 0;
@@ -57,7 +59,8 @@ export class ControlStack extends Visible implements IHoverable {
5759
this._height,
5860
i,
5961
highlightOnHover,
60-
unhighlightOnHover
62+
unhighlightOnHover,
63+
this.chapter
6164
);
6265
this._height += component.height();
6366
i += 1;

src/features/cseMachine/components/StashStack.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Stash } from 'js-slang/dist/cse-machine/interpreter';
2-
import { Value } from 'js-slang/dist/types';
2+
import { Chapter, Value } from 'js-slang/dist/types';
33
import { KonvaEventObject } from 'konva/lib/Node';
44
import React from 'react';
55
import { Group } from 'react-konva';
@@ -18,18 +18,20 @@ export class StashStack extends Visible implements IHoverable {
1818

1919
constructor(
2020
/** the stash object */
21-
readonly stash: Stash
21+
readonly stash: Stash,
22+
readonly chapter: Chapter
2223
) {
2324
super();
2425
this._x = ControlStashConfig.StashPosX;
2526
this._y = ControlStashConfig.StashPosY;
2627
this._width = 0;
2728
this._height = 0;
29+
this.chapter = chapter;
2830

2931
// Function to convert the stack items to their components
3032
let i = 0;
3133
const stashItemToComponent = (stashItem: Value) => {
32-
const component = getStashItemComponent(stashItem, this._width, i);
34+
const component = getStashItemComponent(stashItem, this._width, i, this.chapter);
3335
this._width += component.width();
3436
this._height = Math.max(this._height, component.height());
3537
i += 1;

0 commit comments

Comments
 (0)