From 4e9a12686b189b317d98573b8051e1c78c8c9bd5 Mon Sep 17 00:00:00 2001
From: Sarah Wang <55766946+sarahsonder@users.noreply.github.com>
Date: Thu, 6 Jun 2024 22:23:34 -0400
Subject: [PATCH] Embed isClass and stack_frame as types (#40)
---
CHANGELOG.md | 3 +
README.md | 3 +-
demo/src/__tests__/SvgDisplay.spec.tsx | 3 +-
demo/src/sample/automated-layout/data.json | 10 ++-
demo/src/sample/blanks/data.json | 19 +++---
demo/src/sample/manual-layout/data.json | 5 +-
demo/src/sample/simple/data.json | 5 +-
demo/src/sample/styling/data.json | 3 +-
docs/docs/02-object_structure.md | 31 ++++-----
docs/docs/03-automation_algorithms.md | 7 +-
.../automation_demo/automation_demo.json | 10 ++-
.../more_specific_demos/demo_A.js | 3 +-
.../more_specific_demos/demo_B.js | 6 +-
.../blankspaces_demo/blankspaces_demo.js | 14 ++--
.../examples/manual_demo/manual_demo.json | 5 +-
.../examples/simple_demo/simple_demo.js | 3 +-
.../examples/style_demo/nostyle_demo.js | 3 +-
.../examples/style_demo/presets_demo.js | 6 +-
.../99-api/examples/style_demo/style_demo.js | 3 +-
docs/src/pages/index.md | 3 +-
memory-viz/README.md | 3 +-
memory-viz/src/automate.ts | 18 +++---
memory-viz/src/memory_model.ts | 23 +++----
memory-viz/src/style.ts | 6 +-
.../tests/__snapshots__/draw.spec.tsx.snap | 2 +
memory-viz/src/tests/draw.spec.tsx | 64 +++++++++----------
26 files changed, 115 insertions(+), 146 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11991ab4..7018fbf1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,9 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
### 🚨 Breaking changes
- Changed the `name` attribute to `type` when drawing objects.
+- Removed the `isClass` and `stack_frame` attributes and embedded them as the types `.class` and `.frame`.
+- Renamed the input for blank objects from `BLANK` to `.blank`.
+- Created new type `.blank-frame` to denote blank stack frames.
### ✨ Enhancements
diff --git a/README.md b/README.md
index f13bf7b6..48859ac2 100644
--- a/README.md
+++ b/README.md
@@ -23,11 +23,10 @@ const { draw } = require("memory-viz");
const objects = [
{
- isClass: true,
+ type: ".frame",
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
type: "str",
diff --git a/demo/src/__tests__/SvgDisplay.spec.tsx b/demo/src/__tests__/SvgDisplay.spec.tsx
index bbb8ebd0..5cc6aa3f 100644
--- a/demo/src/__tests__/SvgDisplay.spec.tsx
+++ b/demo/src/__tests__/SvgDisplay.spec.tsx
@@ -29,11 +29,10 @@ describe("SvgDisplay", () => {
"valid JSON and valid Memory Models JSON",
[
{
- isClass: true,
+ type: ".frame",
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
type: "str",
diff --git a/demo/src/sample/automated-layout/data.json b/demo/src/sample/automated-layout/data.json
index ea1efcbc..98013d00 100644
--- a/demo/src/sample/automated-layout/data.json
+++ b/demo/src/sample/automated-layout/data.json
@@ -1,17 +1,15 @@
[
{
- "isClass": true,
+ "type": ".frame",
"name": "__main__",
"id": null,
- "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
- "stack_frame": true
+ "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
},
{
- "isClass": true,
+ "type": ".frame",
"name": "func",
"id": null,
- "value": { "age": 12, "name": 17 },
- "stack_frame": true
+ "value": { "age": 12, "name": 17 }
},
{
"type": "list",
diff --git a/demo/src/sample/blanks/data.json b/demo/src/sample/blanks/data.json
index 4b8e1d0d..76e1a959 100644
--- a/demo/src/sample/blanks/data.json
+++ b/demo/src/sample/blanks/data.json
@@ -1,23 +1,20 @@
[
{
- "isClass": true,
+ "type": ".frame",
"name": "__main__",
"id": null,
- "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
- "stack_frame": true
+ "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
},
{
- "type": "BLANK",
+ "type": ".blank-frame",
"width": 100,
- "height": 200,
- "stack_frame": true
+ "height": 200
},
{
- "isClass": true,
+ "type": ".frame",
"name": "func",
"id": null,
- "value": { "age": 12, "name": 17 },
- "stack_frame": true
+ "value": { "age": 12, "name": 17 }
},
{
"type": "list",
@@ -36,7 +33,7 @@
"value": 1969
},
{
- "type": "BLANK",
+ "type": ".blank",
"width": 100,
"height": 200
},
@@ -51,7 +48,7 @@
"value": "David is cool"
},
{
- "type": "BLANK",
+ "type": ".blank",
"width": 200,
"height": 150
},
diff --git a/demo/src/sample/manual-layout/data.json b/demo/src/sample/manual-layout/data.json
index 9bd28849..0421ba8f 100644
--- a/demo/src/sample/manual-layout/data.json
+++ b/demo/src/sample/manual-layout/data.json
@@ -1,12 +1,11 @@
[
{
- "isClass": true,
+ "type": ".frame",
"x": 25,
"y": 200,
"name": "__main__",
"id": null,
- "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
- "stack_frame": true
+ "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
},
{
"x": 1050,
diff --git a/demo/src/sample/simple/data.json b/demo/src/sample/simple/data.json
index 085b14be..61cc2a38 100644
--- a/demo/src/sample/simple/data.json
+++ b/demo/src/sample/simple/data.json
@@ -1,10 +1,9 @@
[
{
- "isClass": true,
+ "type": ".frame",
"name": "__main__",
"id": null,
- "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
- "stack_frame": true
+ "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
},
{
"type": "str",
diff --git a/demo/src/sample/styling/data.json b/demo/src/sample/styling/data.json
index 0839e29a..d8309abd 100644
--- a/demo/src/sample/styling/data.json
+++ b/demo/src/sample/styling/data.json
@@ -1,12 +1,11 @@
[
{
- "isClass": true,
+ "type": ".frame",
"x": 25,
"y": 200,
"name": "__main__",
"id": null,
"value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
- "stack_frame": true,
"style": ["highlight"]
},
{
diff --git a/docs/docs/02-object_structure.md b/docs/docs/02-object_structure.md
index 7fd3c8e0..9d9780d4 100644
--- a/docs/docs/02-object_structure.md
+++ b/docs/docs/02-object_structure.md
@@ -10,53 +10,46 @@ the array of objects to be drawn.
To be successfully rendered, the array must contain objects that strictly follow a specific structure. Every object
must contain the following attributes:
-- `isClass` - `boolean`: denotes whether the object to be drawn is a user-defined class (or a stack frame) or a built-in
- object. This has a default value of `false` and should be manually set to `true` only when drawing a class or stack frame.
-- `name` - `string`: The name of the class or stack frame to be drawn. Note that this attribute is only applicable if the object's `isClass` attribute is true. Otherwise, this attribute can be excluded from the input.
-- `type` - `string`: The type of the object to be drawn. If no objects are being drawn, this attribute can be excluded from the input.
+- `type` - `string`: Specifies whether a class, stack frame, or object is being drawn. To draw a class, input `.class` and to draw a stack frame, input `.frame`. If an object is being drawn, input the type of the object.
+- `name` - `string`: The name of the class or stack frame to be drawn. Note that this attribute is only
+ applicable if the object's type is `.class` or `.frame`. Otherwise, this attribute can be excluded from the input.
- If the user wants to hardcode the coordinates (implying the `automation` parameter of `draw` is false), each object
must include `x` and `y` attributes (for x-y coordinates).
-- `id` - `string`|`number`: denotes the id value of this object. If we are to draw a stack frame, then this MUST be `null`.
-- `value` - `*`: denotes the value of the object. This could be anything, from an empty string to a JS object,
+- `id` - `string`|`number`: Denotes the id value of this object. If we are to draw a stack frame, then this MUST be `null`.
+- `value` - `*`: Denotes the value of the object. This could be anything, from an empty string to a JS object,
which would be passed for the purpose of drawing a user-defined class object, a
stack frame, or a dictionary.
**Note that in such cases where we want to draw a 'container'
object (an object that contains other objects), we pass a _JS object_ where the keys are the
attributes/variables and the values are the id's of the corresponding objects (not the
objects themselves)**.
-- `stack_frame` - `boolean`: denotes whether a stack frame will be drawn or not. NOTE that this is only
- applicable if the object's `isClass` attribute is `true` (since the
- `MemoryModel.drawClass` covers both classes and stack frames). By default,
- `stack_frame` is set to null (_which is false_).
- `show_indexes` - `boolean`: This is applicable only when drawing tuples or lists (when drawSequence
method will be used). It denotes whether the memory box of the underlying
sequence will include indices (for sequences) or not. This
has a default value of `false`, and it should be manually set to `true`
only if the object corresponds to a sequence (list or
tuple).
-- `style` - `object` | `array`: a JS object or array specifying the "style" of the object. See `style.md` for information
+- `style` - `object` | `array`: A JS object or array specifying the "style" of the object. See `style.md` for information
on the required structure (also see `presets.md` for the full capabilities).
### Examples
```javascript
{
- "isClass": true,
+ "type": ".frame",
"name": "__main__",
"id": null,
- "value": {"lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11},
- "stack_frame": true
+ "value": {"lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11}
}
{
- "isClass": true,
+ "type": ".frame",
"name": "func",
"id": null,
- "value": {"age": 12, "name": 17},
- "stack_frame": true
+ "value": {"age": 12, "name": 17}
}
-{"type": "BLANK", "width": 100, "height": 200, "stack_frame" : true}
+{"type": ".blank-frame", "width": 100, "height": 200}
{"type": "list", "id": 82, "value": [19, 43, 28, 49]}
@@ -66,7 +59,7 @@ must contain the following attributes:
{"type": "bool", "id": 32, "value": true}
-{"type": "BLANK", "width": 200, "height": 100}
+{"type": ".blank", "width": 200, "height": 100}
{"type": "str", "id": 43, "value": "David is cool"}
diff --git a/docs/docs/03-automation_algorithms.md b/docs/docs/03-automation_algorithms.md
index 190e1767..cb4e18fe 100644
--- a/docs/docs/03-automation_algorithms.md
+++ b/docs/docs/03-automation_algorithms.md
@@ -41,7 +41,7 @@ Below we thoroughly describe the steps for each of the two functions:
required width for drawing all stack frames and a collection of stack frames that will be drawn.
3. Afterward, we iterate through the given stack-frames objects. Inside the loop,
- we first acquire the width and the height of the object. If the box is "BLANK", we obtain the height and width
+ we first acquire the width and the height of the object. If the box is ".blank", we obtain the height and width
by accessing the attributes of the object. If not, we obtain the dimensions by using the `getSize` function. Refer
to the function for details.
@@ -96,11 +96,12 @@ Below we thoroughly describe the steps for each of the two functions:
4. Return the mutated list of objects.
-\*In case the object has `name="BLANK"`, it is assumed that the user has
+\*In case the object has `type=".blank"`, it is assumed that the user has
also provided a width and a height attribute corresponding to the desired
width and height of the blank space. If such dimensions have not been provided,
a related warning is printed and the object is skipped (no blank space is
-recorded).
+recorded). Note that if a blank stack frame is being drawn, the input should
+have `type=".blank-frame"` and the `name` attribute should be excluded from the input.
## Summary
diff --git a/docs/docs/99-api/examples/automation_demo/automation_demo.json b/docs/docs/99-api/examples/automation_demo/automation_demo.json
index ea1efcbc..98013d00 100644
--- a/docs/docs/99-api/examples/automation_demo/automation_demo.json
+++ b/docs/docs/99-api/examples/automation_demo/automation_demo.json
@@ -1,17 +1,15 @@
[
{
- "isClass": true,
+ "type": ".frame",
"name": "__main__",
"id": null,
- "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
- "stack_frame": true
+ "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
},
{
- "isClass": true,
+ "type": ".frame",
"name": "func",
"id": null,
- "value": { "age": 12, "name": 17 },
- "stack_frame": true
+ "value": { "age": 12, "name": 17 }
},
{
"type": "list",
diff --git a/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_A.js b/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_A.js
index 20467e56..d34215d9 100644
--- a/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_A.js
+++ b/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_A.js
@@ -14,11 +14,10 @@ const WIDTH = 1300;
const listOfObjs = [
{
- isClass: true,
+ type: ".frame",
name: "Person",
id: 99,
value: { age: 12, name: 17 },
- stack_frame: false,
},
{ type: "list", id: 82, value: [19, 43, 28, 49] },
{ type: "int", id: 19, value: 1969 },
diff --git a/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_B.js b/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_B.js
index b8e89e36..15604197 100644
--- a/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_B.js
+++ b/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_B.js
@@ -11,18 +11,16 @@ const { MemoryModel, drawAutomatedStackFrames } = require("memory-viz");
const WIDTH = 1300;
const listOfStackFrames = [
{
- isClass: true,
+ type: ".frame",
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
- isClass: true,
+ type: ".frame",
name: "Animal",
id: null,
value: { age: 2, name: 94 },
- stack_frame: true,
},
];
diff --git a/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js b/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js
index bc822d16..6c0f9711 100644
--- a/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js
+++ b/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js
@@ -2,7 +2,7 @@
* This file demonstrates the ability to leave "blanks" when the 'automated.md' option is on.
*
* To define a blank box, you specify it as an object in the array (the classic array of objects) with three attributes:
- * - type: This must be equal to "BLANK"
+ * - type: This must be equal to ".blank"
* - width: the desired width of the blank box (I say box but in reality there aren't any borders)
* - height: the desired height of the blank box
*
@@ -21,19 +21,17 @@ const WIDTH = 1300;
const listOfObjs = [
{
- isClass: true,
+ type: ".frame",
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
- { type: "BLANK", width: 100, height: 200, stack_frame: true },
+ { type: ".frame", width: 100, height: 200 },
{
- isClass: true,
+ type: ".frame",
name: "func",
id: null,
value: { age: 12, name: 17 },
- stack_frame: true,
},
{ type: "list", id: 82, value: [19, 43, 28, 49] },
{
@@ -43,10 +41,10 @@ const listOfObjs = [
show_indexes: true,
},
{ type: "int", id: 19, value: 1969 },
- { type: "BLANK", width: 100, height: 200 },
+ { type: ".blank", width: 100, height: 200 },
{ type: "bool", id: 32, value: true },
{ type: "str", id: 43, value: "David is cool" },
- { type: "BLANK", width: 200, height: 150 },
+ { type: ".blank", width: 200, height: 150 },
{ type: "tuple", id: 11, value: [82, 76] },
];
diff --git a/docs/docs/99-api/examples/manual_demo/manual_demo.json b/docs/docs/99-api/examples/manual_demo/manual_demo.json
index 9bd28849..0421ba8f 100644
--- a/docs/docs/99-api/examples/manual_demo/manual_demo.json
+++ b/docs/docs/99-api/examples/manual_demo/manual_demo.json
@@ -1,12 +1,11 @@
[
{
- "isClass": true,
+ "type": ".frame",
"x": 25,
"y": 200,
"name": "__main__",
"id": null,
- "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
- "stack_frame": true
+ "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
},
{
"x": 1050,
diff --git a/docs/docs/99-api/examples/simple_demo/simple_demo.js b/docs/docs/99-api/examples/simple_demo/simple_demo.js
index cb982fff..98131df2 100644
--- a/docs/docs/99-api/examples/simple_demo/simple_demo.js
+++ b/docs/docs/99-api/examples/simple_demo/simple_demo.js
@@ -9,11 +9,10 @@ const { draw } = require("memory-viz");
const objects = [
{
- isClass: true,
+ type: ".frame",
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
type: "str",
diff --git a/docs/docs/99-api/examples/style_demo/nostyle_demo.js b/docs/docs/99-api/examples/style_demo/nostyle_demo.js
index 3b793bee..3de159a5 100644
--- a/docs/docs/99-api/examples/style_demo/nostyle_demo.js
+++ b/docs/docs/99-api/examples/style_demo/nostyle_demo.js
@@ -21,13 +21,12 @@ const configuration = {
const objs = [
{
- isClass: true,
+ type: ".frame",
x: 25,
y: 200,
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
x: 350,
diff --git a/docs/docs/99-api/examples/style_demo/presets_demo.js b/docs/docs/99-api/examples/style_demo/presets_demo.js
index 01b0ded5..d2071340 100644
--- a/docs/docs/99-api/examples/style_demo/presets_demo.js
+++ b/docs/docs/99-api/examples/style_demo/presets_demo.js
@@ -12,22 +12,20 @@ const WIDTH = 1300;
const objs = [
{
- isClass: true,
+ type: ".frame",
x: 25,
y: 200,
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
- isClass: true,
+ type: ".frame",
x: 350,
y: 10,
name: "tuple",
id: 99,
value: { age: 12, name: 17 },
- stack_frame: false,
style: ["highlight_type"],
},
{
diff --git a/docs/docs/99-api/examples/style_demo/style_demo.js b/docs/docs/99-api/examples/style_demo/style_demo.js
index ee58bddd..ea8df099 100644
--- a/docs/docs/99-api/examples/style_demo/style_demo.js
+++ b/docs/docs/99-api/examples/style_demo/style_demo.js
@@ -28,13 +28,12 @@ const configuration = {
const objs = [
{
- isClass: true,
+ type: ".frame",
x: 25,
y: 200,
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
style: ["highlight"], // Notice style is passed in as an array.
},
{
diff --git a/docs/src/pages/index.md b/docs/src/pages/index.md
index 96f43644..f1e678ce 100644
--- a/docs/src/pages/index.md
+++ b/docs/src/pages/index.md
@@ -28,11 +28,10 @@ const { draw } = require("memory_viz");
const objects = [
{
- isClass: true,
+ type: ".frame",
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
type: "str",
diff --git a/memory-viz/README.md b/memory-viz/README.md
index f8c43e6f..f5d652c3 100644
--- a/memory-viz/README.md
+++ b/memory-viz/README.md
@@ -23,11 +23,10 @@ const { draw } = require("memory-viz");
const objects = [
{
- isClass: true,
+ type: ".frame",
name: "__main__",
id: null,
value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
},
{
type: "str",
diff --git a/memory-viz/src/automate.ts b/memory-viz/src/automate.ts
index 6f42b770..6dcf1357 100644
--- a/memory-viz/src/automate.ts
+++ b/memory-viz/src/automate.ts
@@ -73,7 +73,7 @@ function drawAutomatedStackFrames(stack_frames, configuration) {
let width;
let height;
- if (stack_frame.name !== "BLANK") {
+ if (stack_frame.type !== ".blank-frame") {
const size = getSize(stack_frame);
height = size.height;
width = size.width;
@@ -87,7 +87,7 @@ function drawAutomatedStackFrames(stack_frames, configuration) {
required_width = width;
}
- if (stack_frame.name !== "BLANK") {
+ if (stack_frame.type !== ".blank-frame") {
stack_frame.x = configuration.left_margin;
stack_frame.y = min_required_height;
draw_stack_frames.push(stack_frame);
@@ -149,7 +149,7 @@ function drawAutomatedOtherItems(
const START_X = sf_endpoint + PADDING;
for (const item of objs) {
- if (item.type !== "BLANK") {
+ if (item.type !== ".blank") {
const dimensions = getSize(item);
item.height = dimensions.height;
item.width = dimensions.width;
@@ -230,9 +230,9 @@ function drawAutomatedOtherItems(
const canvas_height =
down_most_obj.y + down_most_obj.height + config_aut.bottom_margin;
- // Additional -- to extend the program for the BLANK option.
+ // Additional -- to extend the program for the .blank option.
const objs_filtered = objs.filter((item) => {
- return item.type !== "BLANK";
+ return item.type !== ".blank";
});
objs = objs_filtered;
@@ -253,16 +253,18 @@ function separateObjects(objects) {
let otherItems = [];
for (const item of objects) {
+ const frame_types = [".frame", ".blank-frame"];
+
if (
- item.type === "BLANK" &&
+ item.type === ".blank" &&
(item.width === undefined || item.height === undefined)
) {
console.log(
- "WARNING :: An object with name='BLANK' exists with missing dimension information " +
+ "WARNING :: An object with type='.blank' or '.blank-frame' exists with missing dimension information " +
"(either the width or the height is missing). This object will be omitted in the memory model" +
" diagram."
);
- } else if (item.stack_frame) {
+ } else if (frame_types.includes(item.type)) {
stackFrames.push(item);
} else {
otherItems.push(item);
diff --git a/memory-viz/src/memory_model.ts b/memory-viz/src/memory_model.ts
index 8060909f..7b5a0861 100644
--- a/memory-viz/src/memory_model.ts
+++ b/memory-viz/src/memory_model.ts
@@ -758,18 +758,14 @@ export class MemoryModel {
*
* @param {object[]} objects - the list of objects (including stack-frames) to be drawn.
* Each object in 'objects' must include the following structure:
- * @param {boolean} objects[*].isClass = false - Whether a user-defined class (or a stack-frame) or a built-in
- * object will be drawn. Pass true to draw a class or a stack-frame,
- * and false to draw any of the types found in the 'immutable'
- * and 'collections' constants. This has a default value of false and should
- * be manually set to true only when drawing a class or stack-frame.
* @param {number} objects[*].x - Value for x coordinate of top left corner
* @param {number} objects[*].y - Value for y coordinate of top left corner
+ * @param {string} objects[*].type - Specifies whether a class, stack frame, or object is being drawn.
+ * To draw a class, input `.class` and to draw a stack frame, input `.frame`. If an
+ * object is being drawn, input the type of the object.
* @param {string} objects[*].name - The name of the class or stack frame to be drawn. Note that this attribute is only
- * applicable if the object's 'isClass' attribute is true. If no classes or stack frames
+ * applicable if the object's type is `.class` or `.frame`. If no classes or stack frames
* are being drawn, this attribute can be excluded from the input.
- * @param {string} objects[*].type - The type of the object to be drawn. If no objects are being drawn, this attribute
- * can be excluded from the input.
* @param {number} objects[*].id - The id value of this object. If we are to draw a StackFrame, then this MUST be 'null'.
* @param {*} objects[*].value - The value of the object. This could be anything, from an empty string to a JS object,
* which would be passed for the purpose of drawing a user-defined class object, a
@@ -777,10 +773,6 @@ export class MemoryModel {
* object (an object that contains other objects), we pass a JS object where the keys are the
* attributes/variables and the values are the id's of the corresponding objects (not the
* objects themselves).
- * @param {boolean=} objects[*].stack_frame = null - Whether a stack frame will be drawn or not. NOTE that this is only
- * applicable if the object's 'isClass' attribute is true (since the
- * 'MemoryModel.drawClass' covers both classes and stack-frames). By default,
- * 'stack_frame' is set to null.
* @param {boolean=} objects[*].show_indexes = false - Applicable only for drawing tuples or lists (when drawSequence
* method will be used).
* Whether the memory box of the underlying
@@ -817,14 +809,17 @@ export class MemoryModel {
obj.style = populateStyleObject(obj, this.seed);
- if (obj.isClass) {
+ const frame_types = [".frame", ".blank-frame"];
+ if (frame_types.includes(obj.type) || obj.type === ".class") {
+ let is_frame = frame_types.includes(obj.type);
+
const size = this.drawClass(
obj.x,
obj.y,
obj.name,
obj.id,
obj.value,
- obj.stack_frame,
+ is_frame,
obj.style
);
sizes_arr.push(size);
diff --git a/memory-viz/src/style.ts b/memory-viz/src/style.ts
index 5641a380..d66afd02 100644
--- a/memory-viz/src/style.ts
+++ b/memory-viz/src/style.ts
@@ -72,10 +72,10 @@ function populateStyleObject(object, seed) {
object_type = "primitive";
} else if (collections.includes(object.type)) {
object_type = "collection";
- } else if (object.stack_frame) {
- object_type = "stackframe";
- } else {
+ } else if (object.type === ".class") {
object_type = "class";
+ } else {
+ object_type = "stackframe";
}
// We then add properties specific to the different type categories.
diff --git a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
index 424bfbff..df6021fd 100644
--- a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
+++ b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
@@ -24,6 +24,8 @@ exports[`draw function renders 'highlight_type' style preset 1`] = `""`;
+exports[`draw function renders a blank stack frame 1`] = `""`;
+
exports[`draw function renders a bool 1`] = `""`;
exports[`draw function renders a bool using manual layout 1`] = `""`;
diff --git a/memory-viz/src/tests/draw.spec.tsx b/memory-viz/src/tests/draw.spec.tsx
index 63a43f15..cc92fcea 100644
--- a/memory-viz/src/tests/draw.spec.tsx
+++ b/memory-viz/src/tests/draw.spec.tsx
@@ -5,11 +5,10 @@ describe("draw function", () => {
it("should produce consistent svg when provided seed", () => {
const objects: Array