From 5a7d47c4c17e495fe2fc0510fa48bb0a60a3b0c3 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Mon, 3 Jun 2024 20:34:11 -0400
Subject: [PATCH 1/8] remove isClass and stack frame attributes and embed them
 as types

---
 memory-viz/src/automate.ts         | 14 ++++----
 memory-viz/src/memory_model.ts     |  6 ++--
 memory-viz/src/style.ts            |  2 +-
 memory-viz/src/tests/draw.spec.tsx | 51 +++++++++++-------------------
 4 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/memory-viz/src/automate.ts b/memory-viz/src/automate.ts
index 6f42b770..82a1aa1f 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.name !== ".blank") {
             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.name !== ".blank") {
             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;
 
@@ -254,7 +254,7 @@ function separateObjects(objects) {
 
     for (const item of objects) {
         if (
-            item.type === "BLANK" &&
+            item.type === ".blank" &&
             (item.width === undefined || item.height === undefined)
         ) {
             console.log(
@@ -262,7 +262,7 @@ function separateObjects(objects) {
                     "(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 (item.type === ".frame") {
             stackFrames.push(item);
         } else {
             otherItems.push(item);
diff --git a/memory-viz/src/memory_model.ts b/memory-viz/src/memory_model.ts
index 5b21fc51..0467ac4d 100644
--- a/memory-viz/src/memory_model.ts
+++ b/memory-viz/src/memory_model.ts
@@ -817,14 +817,16 @@ export class MemoryModel {
 
             obj.style = populateStyleObject(obj, this.seed);
 
-            if (obj.isClass) {
+            if (obj.type === ".class" || obj.type === ".frame") {
+                let is_frame = obj.type === ".frame";
+
                 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 84734741..3ff381e8 100644
--- a/memory-viz/src/style.ts
+++ b/memory-viz/src/style.ts
@@ -72,7 +72,7 @@ function populateStyleObject(object, seed) {
         object_type = "primitive";
     } else if (collections.includes(object.type)) {
         object_type = "collection";
-    } else if (object.stack_frame) {
+    } else if (object.type === ".frame") {
         object_type = "stackframe";
     } else {
         object_type = "class";
diff --git a/memory-viz/src/tests/draw.spec.tsx b/memory-viz/src/tests/draw.spec.tsx
index 63a43f15..c6c79ff8 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<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-                stack_frame: true,
             },
             {
                 type: "str",
@@ -209,7 +208,7 @@ describe("draw function", () => {
 
     it("renders a blank space", () => {
         const objects: Array<Object> = [
-            { type: "BLANK", width: 100, height: 200 },
+            { type: ".blank", width: 100, height: 200 },
         ];
         const m: InstanceType<typeof MemoryModel> = draw(objects, true, {
             width: 1300,
@@ -222,13 +221,12 @@ describe("draw function", () => {
     it("renders a stack frame and an int", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     my_int: 13,
                 },
-                stack_frame: true,
             },
             {
                 type: "int",
@@ -247,16 +245,15 @@ describe("draw function", () => {
     it("renders a stack frame using manual layout", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
                 x: 200,
                 y: 200,
                 name: "__main__",
+                type: ".frame",
                 id: null,
                 value: {
                     lst1: 82,
                     lst2: 84,
                 },
-                stack_frame: true,
             },
         ];
         const m: InstanceType<typeof MemoryModel> = draw(objects, false, {
@@ -291,7 +288,7 @@ describe("draw function", () => {
                 value: 42,
             },
             {
-                type: "BLANK",
+                type: ".blank",
                 width: 100,
                 height: 200,
             },
@@ -317,7 +314,7 @@ describe("draw function", () => {
                 value: 42,
             },
             {
-                isClass: true,
+                type: ".class",
                 name: "fruit",
                 id: 23,
                 value: {
@@ -346,23 +343,21 @@ describe("draw function", () => {
     it("formats a mix of stack frame/non-stack frame objects in automatic layout", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     a: 7,
                 },
-                stack_frame: true,
             },
             {
-                isClass: true,
+                type: ".frame",
                 name: "func",
                 id: null,
                 value: {
                     x: 1,
                     y: 17,
                 },
-                stack_frame: true,
             },
             {
                 type: "list",
@@ -411,13 +406,12 @@ describe("draw function", () => {
     it("renders 'highlight' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["highlight"],
             },
             {
@@ -438,13 +432,12 @@ describe("draw function", () => {
     it("renders 'highlight_id' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["highlight_id"],
             },
             {
@@ -465,13 +458,12 @@ describe("draw function", () => {
     it("renders 'highlight_type' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["highlight_type"],
             },
             {
@@ -492,13 +484,12 @@ describe("draw function", () => {
     it("renders 'hide' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["hide"],
             },
             {
@@ -519,13 +510,12 @@ describe("draw function", () => {
     it("renders 'hide_id' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["hide_id"],
             },
             {
@@ -546,13 +536,12 @@ describe("draw function", () => {
     it("renders 'hide_container' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["hide_container"],
             },
             {
@@ -573,13 +562,12 @@ describe("draw function", () => {
     it("renders 'fade' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["fade"],
             },
             {
@@ -600,13 +588,12 @@ describe("draw function", () => {
     it("renders 'fade_type' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["fade_type"],
             },
             {
@@ -627,13 +614,12 @@ describe("draw function", () => {
     it("renders 'fade_id' style preset", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["fade_id"],
             },
             {
@@ -653,13 +639,12 @@ describe("draw function", () => {
     it("renders combinations of style presets", () => {
         const objects: Array<Object> = [
             {
-                isClass: true,
+                type: ".frame",
                 name: "__main__",
                 id: null,
                 value: {
                     item: 45,
                 },
-                stack_frame: true,
                 style: ["highlight", "fade", "hide_id"],
             },
             {

From ce533f83037f33dfc60adbbc2c880926e5fa34d0 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Mon, 3 Jun 2024 21:25:32 -0400
Subject: [PATCH 2/8] update documentation and examples

---
 CHANGELOG.md                                  |  2 ++
 README.md                                     |  3 +-
 demo/src/__tests__/SvgDisplay.spec.tsx        |  3 +-
 demo/src/sample/automated-layout/data.json    | 10 +++---
 demo/src/sample/blanks/data.json              | 20 ++++++------
 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         |  4 +--
 .../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/memory_model.ts                | 16 +++-------
 22 files changed, 62 insertions(+), 99 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ca450d8..9d8bb2b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@ 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`.
 
 ### ✨ 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..d26c9ef0 100644
--- a/demo/src/sample/blanks/data.json
+++ b/demo/src/sample/blanks/data.json
@@ -1,23 +1,21 @@
 [
     {
-        "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": ".frame",
+        "name": ".blank",
         "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 +34,7 @@
         "value": 1969
     },
     {
-        "type": "BLANK",
+        "type": ".blank",
         "width": 100,
         "height": 200
     },
@@ -51,7 +49,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..b0559f0b 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": ".frame", "name": ".blank", "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..5bf3b35b 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,7 +96,7 @@ 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 `name=".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
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..de5877e7 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: ".class",
         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..d5930de8 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", name: ".blank", 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..8798a48a 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: ".class",
         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/memory_model.ts b/memory-viz/src/memory_model.ts
index 0467ac4d..d6e03419 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

From 5f5cbc1e567be38c98bd027d4329579437b04e75 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Mon, 3 Jun 2024 21:36:33 -0400
Subject: [PATCH 3/8] fixes incorrect classes

---
 .../examples/automation_demo/more_specific_demos/demo_A.js      | 2 +-
 docs/docs/99-api/examples/style_demo/presets_demo.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 de5877e7..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,7 +14,7 @@ const WIDTH = 1300;
 
 const listOfObjs = [
     {
-        type: ".class",
+        type: ".frame",
         name: "Person",
         id: 99,
         value: { age: 12, name: 17 },
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 8798a48a..d2071340 100644
--- a/docs/docs/99-api/examples/style_demo/presets_demo.js
+++ b/docs/docs/99-api/examples/style_demo/presets_demo.js
@@ -20,7 +20,7 @@ const objs = [
         value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
     },
     {
-        type: ".class",
+        type: ".frame",
         x: 350,
         y: 10,
         name: "tuple",

From 1dd76ed932017315cb0afa28cc9015a2d64dd618 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Tue, 4 Jun 2024 13:06:57 -0400
Subject: [PATCH 4/8] add test for drawing a blank stack frame

---
 docs/docs/03-automation_algorithms.md               |  5 +++--
 .../src/tests/__snapshots__/draw.spec.tsx.snap      |  2 ++
 memory-viz/src/tests/draw.spec.tsx                  | 13 +++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docs/docs/03-automation_algorithms.md b/docs/docs/03-automation_algorithms.md
index 5bf3b35b..acb81605 100644
--- a/docs/docs/03-automation_algorithms.md
+++ b/docs/docs/03-automation_algorithms.md
@@ -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=".frame"` and `name=".blank"`.
 
 ## Summary
 
diff --git a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
index e1627135..71e6bfb0 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`] = `"<svg width=
 
 exports[`draw function renders a blank space 1`] = `"<svg width="1300" height="350" xmlns="http://www.w3.org/2000/svg"/>"`;
 
+exports[`draw function renders a blank stack frame 1`] = `"<svg width="1300" height="325" xmlns="http://www.w3.org/2000/svg"><g><path d="M149.17355003153145 24.356621653946977 C222.5382236377637 24.947406849723766, 295.0726904068935 26.293984355476926, 431.29316109119344 24.528112997598058 M150.17069006151135 25.35861761391075 C258.99606475245344 25.337586696140363, 369.8469356741233 26.399771663990368, 431.4499938284575 24.627478272038402 M430.6138933170587 24.244307739660144 C434.036963196937 59.11295747105032, 431.047526510898 94.5909650363028, 430.3120261300355 154.8133229445666 M432.8313265061006 25.96177598182112 C432.05591074684634 69.77587079815567, 431.5518674359657 114.02828291337937, 432.89466654416174 155.44875323120505 M432.63802922082954 155.825371462785 C354.45128302954663 156.67949778130574, 275.9588167486709 155.29624767011097, 149.27999099698476 153.85710025090478 M431.5412983848642 154.71630698103448 C363.47573882943 157.79131114667166, 295.91444031495297 156.85418010823733, 149.4918510227996 155.43383196015287 M150.14214079268277 156.27820358984172 C151.21292230626568 121.20502475183457, 152.3228622986935 85.18492933362721, 151.77512239106 23.932938857004046 M150.67811032291502 154.0633974308148 C148.0849534834735 115.83291779831052, 149.32690664781256 77.85893173422663, 150.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M173.91726206429303 89.15710548870265 C190.457930556871 89.4688816714473, 205.91093921363353 91.23304236413911, 232.07396535761654 89.38177750818431 M175.22362225409597 90.46982746664435 C196.6097253277898 89.39177608871833, 220.649445306696 90.78335211062804, 232.2794330334291 89.51195665542036 M231.61389331705868 89.24430773966014 C235.00123269716278 102.83524710033089, 232.0117960111238 117.03554429486394, 231.31202613003552 139.8133229445666 M233.8313265061006 90.96177598182112 C232.952838587109 107.12844209931791, 232.44879527622834 123.73342551570386, 233.89466654416174 140.44875323120505 M233.83588658459485 141.08132497780025 C217.5881071029231 141.29606103045865, 200.9398015744984 139.4838552985899, 174.05671112425625 138.50267897360027 M232.39905177708715 139.6283317739144 C218.23452811203896 141.42153838021682, 204.73064039517195 140.19379639370368, 174.3342704391107 140.56836631242186 M175.14214079268277 141.27820358984172 C175.56834565615281 127.0871600760147, 176.67828564858064 111.94919998198748, 176.77512239106 88.93293885700405 M175.67811032291502 139.0633974308148 C173.80644848523661 124.39918356761336, 175.04840164957568 109.99146327283233, 175.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="204" y="120">id19</text><g><path d="M231.91726206429303 89.15710548870265 C248.457930556871 89.4688816714473, 263.9109392136335 91.23304236413911, 290.07396535761654 89.38177750818431 M233.22362225409597 90.46982746664435 C254.6097253277898 89.39177608871833, 278.649445306696 90.78335211062804, 290.2794330334291 89.51195665542036 M289.6138933170587 89.24430773966014 C293.0012326971628 102.83524710033089, 290.0117960111238 117.03554429486394, 289.3120261300355 139.8133229445666 M291.8313265061006 90.96177598182112 C290.952838587109 107.12844209931791, 290.44879527622834 123.73342551570386, 291.89466654416174 140.44875323120505 M291.83588658459485 141.08132497780025 C275.5881071029231 141.29606103045865, 258.9398015744984 139.4838552985899, 232.05671112425625 138.50267897360027 M290.39905177708715 139.6283317739144 C276.23452811203896 141.42153838021682, 262.7306403951719 140.19379639370368, 232.3342704391107 140.56836631242186 M233.14214079268277 141.27820358984172 C233.56834565615281 127.0871600760147, 234.67828564858064 111.94919998198748, 234.77512239106 88.93293885700405 M233.67811032291502 139.0633974308148 C231.80644848523661 124.39918356761336, 233.04840164957568 109.99146327283233, 233.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="262" y="120">id43</text><g><path d="M289.917262064293 89.15710548870265 C306.457930556871 89.4688816714473, 321.9109392136335 91.23304236413911, 348.07396535761654 89.38177750818431 M291.223622254096 90.46982746664435 C312.60972532778976 89.39177608871833, 336.649445306696 90.78335211062804, 348.2794330334291 89.51195665542036 M347.6138933170587 89.24430773966014 C351.0012326971628 102.83524710033089, 348.0117960111238 117.03554429486394, 347.3120261300355 139.8133229445666 M349.8313265061006 90.96177598182112 C348.952838587109 107.12844209931791, 348.44879527622834 123.73342551570386, 349.89466654416174 140.44875323120505 M349.83588658459485 141.08132497780025 C333.5881071029231 141.29606103045865, 316.9398015744984 139.4838552985899, 290.05671112425625 138.50267897360027 M348.39905177708715 139.6283317739144 C334.23452811203896 141.42153838021682, 320.7306403951719 140.19379639370368, 290.3342704391107 140.56836631242186 M291.14214079268277 141.27820358984172 C291.5683456561528 127.0871600760147, 292.67828564858064 111.94919998198748, 292.77512239106 88.93293885700405 M291.678110322915 139.0633974308148 C289.8064484852366 124.39918356761336, 291.0484016495757 109.99146327283233, 291.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="320" y="120">id28</text><g><path d="M347.917262064293 89.15710548870265 C364.457930556871 89.4688816714473, 379.9109392136335 91.23304236413911, 406.07396535761654 89.38177750818431 M349.223622254096 90.46982746664435 C370.60972532778976 89.39177608871833, 394.649445306696 90.78335211062804, 406.2794330334291 89.51195665542036 M405.6138933170587 89.24430773966014 C409.0012326971628 102.83524710033089, 406.0117960111238 117.03554429486394, 405.3120261300355 139.8133229445666 M407.8313265061006 90.96177598182112 C406.952838587109 107.12844209931791, 406.44879527622834 123.73342551570386, 407.89466654416174 140.44875323120505 M407.83588658459485 141.08132497780025 C391.5881071029231 141.29606103045865, 374.9398015744984 139.4838552985899, 348.05671112425625 138.50267897360027 M406.39905177708715 139.6283317739144 C392.23452811203896 141.42153838021682, 378.7306403951719 140.19379639370368, 348.3342704391107 140.56836631242186 M349.14214079268277 141.27820358984172 C349.5683456561528 127.0871600760147, 350.67828564858064 111.94919998198748, 350.77512239106 88.93293885700405 M349.678110322915 139.0633974308148 C347.8064484852366 124.39918356761336, 349.0484016495757 109.99146327283233, 349.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="378" y="120">id49</text><text fill="rgb(150, 100, 28)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="180" y="55">id82</text><text fill="rgb(27, 14, 139)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="402" y="55">list</text><g><path d="M148.91726206429303 24.157105488702655 C165.96892660483718 24.47300859708339, 181.9329313095659 26.237169289775192, 209.07396535761654 24.381777508184314 M150.22362225409597 25.469827466644347 C172.3879350842908 24.40115554071963, 197.20586481969804 25.792731562629342, 209.2794330334291 24.511956655420363 M208.61389331705868 24.244307739660144 C212.00123269716278 37.83524710033089, 209.0117960111238 52.03554429486394, 208.31202613003552 74.81332294456661 M210.8313265061006 25.96177598182112 C209.952838587109 42.12844209931791, 209.44879527622834 58.73342551570386, 210.89466654416174 75.44875323120505 M210.83588658459485 76.08132497780025 C194.0346624031663 76.3041347881779, 176.8329121749848 74.49192905630916, 149.05671112425625 73.50267897360027 M209.39905177708715 74.6283317739144 C194.75285464618355 76.44149711281061, 180.7672934634611 75.21375512629747, 149.3342704391107 75.56836631242186 M150.14214079268277 76.27820358984172 C150.56834565615281 62.0871600760147, 151.67828564858064 46.949199981987476, 151.77512239106 23.932938857004046 M150.67811032291502 74.0633974308148 C148.80644848523661 59.39918356761336, 150.04840164957568 44.991463272832334, 150.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M370.917262064293 24.157105488702655 C387.9689266048372 24.47300859708339, 403.9329313095659 26.237169289775192, 431.07396535761654 24.381777508184314 M372.223622254096 25.469827466644347 C394.3879350842908 24.40115554071963, 419.20586481969804 25.792731562629342, 431.2794330334291 24.511956655420363 M430.6138933170587 24.244307739660144 C434.0012326971628 37.83524710033089, 431.0117960111238 52.03554429486394, 430.3120261300355 74.81332294456661 M432.8313265061006 25.96177598182112 C431.952838587109 42.12844209931791, 431.44879527622834 58.73342551570386, 432.89466654416174 75.44875323120505 M432.83588658459485 76.08132497780025 C416.0346624031663 76.3041347881779, 398.8329121749848 74.49192905630916, 371.05671112425625 73.50267897360027 M431.39905177708715 74.6283317739144 C416.75285464618355 76.44149711281061, 402.7672934634611 75.21375512629747, 371.3342704391107 75.56836631242186 M372.14214079268277 76.27820358984172 C372.5683456561528 62.0871600760147, 373.67828564858064 46.949199981987476, 373.77512239106 23.932938857004046 M372.678110322915 74.0633974308148 C370.8064484852366 59.39918356761336, 372.0484016495757 44.991463272832334, 372.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g></svg>"`;
+
 exports[`draw function renders a bool 1`] = `"<svg width="1300" height="292" xmlns="http://www.w3.org/2000/svg"><g><path d="M49.02556400905005 24.241416855089682 C101.67472883071045 24.78571024322009, 153.3450280792927 26.373408998464704, 249.1665928987556 24.44361583115067 M50.20125421450777 25.42283250446578 C126.958478717734 25.051943962083083, 206.10388944161187 26.304326200825255, 249.3515084648273 24.560773679005287 M248.61389331705868 24.244307739660144 C252.036963196937 59.11295747105032, 249.04752651089802 94.5909650363028, 248.31202613003552 154.8133229445666 M250.8313265061006 25.96177598182112 C250.05591074684634 69.77587079815567, 249.55186743596568 114.02828291337937, 250.89466654416174 155.44875323120505 M250.75227619308416 155.9731643655708 C195.22971649251488 156.68231944392923, 139.3466937635452 155.0513814025964, 49.1510645373414 153.65245000658692 M249.45916222403224 154.66550825989682 C201.1154268945954 157.554673751121, 153.36624674198694 156.4497378845508, 49.40086070416821 155.51151490365555 M50.14214079268277 156.27820358984172 C51.21292230626568 121.20502475183457, 52.32286229869351 85.18492933362721, 51.775122391059995 23.932938857004046 M50.67811032291502 154.0633974308148 C48.08495348347351 115.83291779831052, 49.32690664781258 77.85893173422663, 50.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M43.04722050014489 18.258276093946847 C98.72792319271825 18.81226224029811, 153.4515152491855 20.36467495903178, 255.1851150732587 18.45598127014297 M44.19678141163024 19.413435203408945 C125.64690594232708 19.100311479449005, 209.43214010978426 20.324859971231348, 255.36592095706587 18.57053532676623 M254.61389331705868 18.244307739660144 C258.0423227719031 56.304614026658236, 255.05288608586415 94.97427814751863, 254.31202613003552 160.8133229445666 M256.8313265061006 19.96177598182112 C256.07137157080695 67.92298510298133, 255.56732825992628 116.3225115230307, 256.89466654416174 161.44875323120505 M256.7355571239737 161.95153613589483 C197.8962872052512 162.68755860022557, 138.70456541990504 161.09286757305927, 43.16993182411847 159.68239882282856 M255.47118215000765 160.6729422190877 C204.24132620213217 163.60327584438917, 153.5928116551039 162.52289678193645, 43.41417636055329 161.50014666802102 M44.14214079268277 162.27820358984172 C45.30960880378261 124.07270445320755, 46.419548796210435 84.92028873637318, 45.775122391059995 17.932938857004046 M44.67811032291502 160.0633974308148 C41.97672923320904 118.29797793291509, 43.21868239754811 76.78905200343578, 44.94233041163534 18.231300049461424" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(27, 14, 139)" x="150" y="115">True</text><text fill="rgb(150, 100, 28)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="80" y="55">id32</text><text fill="rgb(27, 14, 139)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="220" y="55">bool</text><g><path d="M48.91726206429303 24.157105488702655 C65.96892660483718 24.47300859708339, 81.9329313095659 26.237169289775192, 109.07396535761654 24.381777508184314 M50.22362225409597 25.469827466644347 C72.3879350842908 24.40115554071963, 97.20586481969804 25.792731562629342, 109.27943303342909 24.511956655420363 M108.61389331705868 24.244307739660144 C112.00123269716278 37.83524710033089, 109.0117960111238 52.03554429486394, 108.31202613003552 74.81332294456661 M110.8313265061006 25.96177598182112 C109.952838587109 42.12844209931791, 109.44879527622834 58.73342551570386, 110.89466654416174 75.44875323120505 M110.83588658459485 76.08132497780025 C94.0346624031663 76.3041347881779, 76.83291217498481 74.49192905630916, 49.05671112425625 73.50267897360027 M109.39905177708715 74.6283317739144 C94.75285464618355 76.44149711281061, 80.7672934634611 75.21375512629747, 49.334270439110696 75.56836631242186 M50.14214079268277 76.27820358984172 C50.568345656152815 62.0871600760147, 51.67828564858064 46.949199981987476, 51.775122391059995 23.932938857004046 M50.67811032291502 74.0633974308148 C48.806448485236615 59.39918356761336, 50.04840164957568 44.991463272832334, 50.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M188.91726206429303 24.157105488702655 C205.96892660483718 24.47300859708339, 221.9329313095659 26.237169289775192, 249.07396535761654 24.381777508184314 M190.22362225409597 25.469827466644347 C212.3879350842908 24.40115554071963, 237.20586481969804 25.792731562629342, 249.2794330334291 24.511956655420363 M248.61389331705868 24.244307739660144 C252.00123269716278 37.83524710033089, 249.0117960111238 52.03554429486394, 248.31202613003552 74.81332294456661 M250.8313265061006 25.96177598182112 C249.952838587109 42.12844209931791, 249.44879527622834 58.73342551570386, 250.89466654416174 75.44875323120505 M250.83588658459485 76.08132497780025 C234.0346624031663 76.3041347881779, 216.8329121749848 74.49192905630916, 189.05671112425625 73.50267897360027 M249.39905177708715 74.6283317739144 C234.75285464618355 76.44149711281061, 220.7672934634611 75.21375512629747, 189.3342704391107 75.56836631242186 M190.14214079268277 76.27820358984172 C190.56834565615281 62.0871600760147, 191.67828564858064 46.949199981987476, 191.77512239106 23.932938857004046 M190.67811032291502 74.0633974308148 C188.80644848523661 59.39918356761336, 190.04840164957568 44.991463272832334, 190.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g></svg>"`;
 
 exports[`draw function renders a bool using manual layout 1`] = `"<svg width="1062" height="492" xmlns="http://www.w3.org/2000/svg"><g><path d="M749.0255640090501 249.24141685508968 C801.6747288307105 249.7857102432201, 853.3450280792927 251.37340899846473, 949.1665928987555 249.44361583115068 M750.2012542145078 250.4228325044658 C826.958478717734 250.05194396208307, 906.1038894416118 251.30432620082524, 949.3515084648274 249.56077367900528 M948.6138933170587 249.24430773966014 C952.036963196937 284.1129574710503, 949.047526510898 319.5909650363028, 948.3120261300355 379.8133229445666 M950.8313265061006 250.96177598182112 C950.0559107468464 294.77587079815567, 949.5518674359657 339.02828291337937, 950.8946665441617 380.44875323120505 M950.7522761930842 380.9731643655708 C895.2297164925149 381.68231944392926, 839.3466937635452 380.0513814025964, 749.1510645373414 378.65245000658695 M949.4591622240322 379.66550825989685 C901.1154268945954 382.55467375112096, 853.366246741987 381.4497378845508, 749.4008607041682 380.51151490365555 M750.1421407926828 381.2782035898417 C751.2129223062657 346.20502475183457, 752.3228622986935 310.1849293336272, 751.77512239106 248.93293885700405 M750.678110322915 379.0633974308148 C748.0849534834736 340.8329177983105, 749.3269066478126 302.85893173422664, 750.9423304116353 249.23130004946142" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M743.0472205001449 243.25827609394685 C798.7279231927182 243.81226224029814, 853.4515152491855 245.3646749590318, 955.1851150732587 243.45598127014296 M744.1967814116302 244.41343520340894 C825.6469059423271 244.100311479449, 909.4321401097843 245.32485997123135, 955.3659209570659 243.57053532676622 M954.6138933170587 243.24430773966014 C958.0423227719032 281.3046140266582, 955.0528860858642 319.97427814751865, 954.3120261300355 385.8133229445666 M956.8313265061006 244.96177598182112 C956.071371570807 292.92298510298133, 955.5673282599263 341.3225115230307, 956.8946665441617 386.44875323120505 M956.7355571239738 386.95153613589486 C897.8962872052513 387.68755860022554, 838.7045654199051 386.09286757305927, 743.1699318241185 384.6823988228286 M955.4711821500076 385.6729422190877 C904.2413262021321 388.6032758443892, 853.5928116551039 387.5228967819364, 743.4141763605533 386.500146668021 M744.1421407926828 387.2782035898417 C745.3096088037826 349.07270445320756, 746.4195487962104 309.9202887363732, 745.77512239106 242.93293885700405 M744.678110322915 385.0633974308148 C741.9767292332091 343.2979779329151, 743.2186823975482 301.7890520034358, 744.9423304116353 243.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(27, 14, 139)" x="850" y="340">True</text><text fill="rgb(150, 100, 28)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="780" y="280">id32</text><text fill="rgb(27, 14, 139)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="920" y="280">bool</text><g><path d="M748.917262064293 249.15710548870265 C765.9689266048372 249.47300859708338, 781.9329313095659 251.23716928977518, 809.0739653576165 249.3817775081843 M750.223622254096 250.46982746664435 C772.3879350842908 249.40115554071963, 797.205864819698 250.79273156262934, 809.2794330334291 249.51195665542036 M808.6138933170587 249.24430773966014 C812.0012326971628 262.8352471003309, 809.0117960111238 277.03554429486394, 808.3120261300355 299.8133229445666 M810.8313265061006 250.96177598182112 C809.952838587109 267.1284420993179, 809.4487952762283 283.73342551570386, 810.8946665441617 300.44875323120505 M810.8358865845948 301.08132497780025 C794.0346624031663 301.3041347881779, 776.8329121749848 299.4919290563092, 749.0567111242563 298.50267897360027 M809.3990517770872 299.6283317739144 C794.7528546461836 301.4414971128106, 780.7672934634611 300.2137551262975, 749.3342704391107 300.56836631242186 M750.1421407926828 301.2782035898417 C750.5683456561528 287.0871600760147, 751.6782856485806 271.9491999819875, 751.77512239106 248.93293885700405 M750.678110322915 299.0633974308148 C748.8064484852366 284.39918356761336, 750.0484016495757 269.99146327283233, 750.9423304116353 249.23130004946142" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M888.917262064293 249.15710548870265 C905.9689266048372 249.47300859708338, 921.9329313095659 251.23716928977518, 949.0739653576165 249.3817775081843 M890.223622254096 250.46982746664435 C912.3879350842908 249.40115554071963, 937.205864819698 250.79273156262934, 949.2794330334291 249.51195665542036 M948.6138933170587 249.24430773966014 C952.0012326971628 262.8352471003309, 949.0117960111238 277.03554429486394, 948.3120261300355 299.8133229445666 M950.8313265061006 250.96177598182112 C949.952838587109 267.1284420993179, 949.4487952762283 283.73342551570386, 950.8946665441617 300.44875323120505 M950.8358865845948 301.08132497780025 C934.0346624031663 301.3041347881779, 916.8329121749848 299.4919290563092, 889.0567111242563 298.50267897360027 M949.3990517770872 299.6283317739144 C934.7528546461836 301.4414971128106, 920.7672934634611 300.2137551262975, 889.3342704391107 300.56836631242186 M890.1421407926828 301.2782035898417 C890.5683456561528 287.0871600760147, 891.6782856485806 271.9491999819875, 891.77512239106 248.93293885700405 M890.678110322915 299.0633974308148 C888.8064484852366 284.39918356761336, 890.0484016495757 269.99146327283233, 890.9423304116353 249.23130004946142" stroke="#000" stroke-width="1" fill="none"/></g></svg>"`;
diff --git a/memory-viz/src/tests/draw.spec.tsx b/memory-viz/src/tests/draw.spec.tsx
index c6c79ff8..ce971d68 100644
--- a/memory-viz/src/tests/draw.spec.tsx
+++ b/memory-viz/src/tests/draw.spec.tsx
@@ -280,6 +280,19 @@ describe("draw function", () => {
         expect(svg).toMatchSnapshot();
     });
 
+    it("renders a blank stack frame", () => {
+        const objects: Array<Object> = [
+            { type: ".frame", name: ".blank", width: 100, height: 200 },
+            { type: "list", id: 82, value: [19, 43, 28, 49] },
+        ];
+        const m: InstanceType<typeof MemoryModel> = draw(objects, true, {
+            width: 1300,
+            seed: 12345,
+        });
+        const svg: String = m.serializeSVG();
+        expect(svg).toMatchSnapshot();
+    });
+
     it("renders blank spaces in automatic layout", () => {
         const objects: Array<Object> = [
             {

From 10634d89f793f62154698418d576608d49e70c2e Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Tue, 4 Jun 2024 23:58:59 -0400
Subject: [PATCH 5/8] update snapshot tests

---
 memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
index f5210978..df6021fd 100644
--- a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
+++ b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`draw function renders 'highlight_type' style preset 1`] = `"<svg width=
 
 exports[`draw function renders a blank space 1`] = `"<svg width="1300" height="350" xmlns="http://www.w3.org/2000/svg"/>"`;
 
-exports[`draw function renders a blank stack frame 1`] = `"<svg width="1300" height="325" xmlns="http://www.w3.org/2000/svg"><g><path d="M149.17355003153145 24.356621653946977 C222.5382236377637 24.947406849723766, 295.0726904068935 26.293984355476926, 431.29316109119344 24.528112997598058 M150.17069006151135 25.35861761391075 C258.99606475245344 25.337586696140363, 369.8469356741233 26.399771663990368, 431.4499938284575 24.627478272038402 M430.6138933170587 24.244307739660144 C434.036963196937 59.11295747105032, 431.047526510898 94.5909650363028, 430.3120261300355 154.8133229445666 M432.8313265061006 25.96177598182112 C432.05591074684634 69.77587079815567, 431.5518674359657 114.02828291337937, 432.89466654416174 155.44875323120505 M432.63802922082954 155.825371462785 C354.45128302954663 156.67949778130574, 275.9588167486709 155.29624767011097, 149.27999099698476 153.85710025090478 M431.5412983848642 154.71630698103448 C363.47573882943 157.79131114667166, 295.91444031495297 156.85418010823733, 149.4918510227996 155.43383196015287 M150.14214079268277 156.27820358984172 C151.21292230626568 121.20502475183457, 152.3228622986935 85.18492933362721, 151.77512239106 23.932938857004046 M150.67811032291502 154.0633974308148 C148.0849534834735 115.83291779831052, 149.32690664781256 77.85893173422663, 150.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M173.91726206429303 89.15710548870265 C190.457930556871 89.4688816714473, 205.91093921363353 91.23304236413911, 232.07396535761654 89.38177750818431 M175.22362225409597 90.46982746664435 C196.6097253277898 89.39177608871833, 220.649445306696 90.78335211062804, 232.2794330334291 89.51195665542036 M231.61389331705868 89.24430773966014 C235.00123269716278 102.83524710033089, 232.0117960111238 117.03554429486394, 231.31202613003552 139.8133229445666 M233.8313265061006 90.96177598182112 C232.952838587109 107.12844209931791, 232.44879527622834 123.73342551570386, 233.89466654416174 140.44875323120505 M233.83588658459485 141.08132497780025 C217.5881071029231 141.29606103045865, 200.9398015744984 139.4838552985899, 174.05671112425625 138.50267897360027 M232.39905177708715 139.6283317739144 C218.23452811203896 141.42153838021682, 204.73064039517195 140.19379639370368, 174.3342704391107 140.56836631242186 M175.14214079268277 141.27820358984172 C175.56834565615281 127.0871600760147, 176.67828564858064 111.94919998198748, 176.77512239106 88.93293885700405 M175.67811032291502 139.0633974308148 C173.80644848523661 124.39918356761336, 175.04840164957568 109.99146327283233, 175.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="204" y="120">id19</text><g><path d="M231.91726206429303 89.15710548870265 C248.457930556871 89.4688816714473, 263.9109392136335 91.23304236413911, 290.07396535761654 89.38177750818431 M233.22362225409597 90.46982746664435 C254.6097253277898 89.39177608871833, 278.649445306696 90.78335211062804, 290.2794330334291 89.51195665542036 M289.6138933170587 89.24430773966014 C293.0012326971628 102.83524710033089, 290.0117960111238 117.03554429486394, 289.3120261300355 139.8133229445666 M291.8313265061006 90.96177598182112 C290.952838587109 107.12844209931791, 290.44879527622834 123.73342551570386, 291.89466654416174 140.44875323120505 M291.83588658459485 141.08132497780025 C275.5881071029231 141.29606103045865, 258.9398015744984 139.4838552985899, 232.05671112425625 138.50267897360027 M290.39905177708715 139.6283317739144 C276.23452811203896 141.42153838021682, 262.7306403951719 140.19379639370368, 232.3342704391107 140.56836631242186 M233.14214079268277 141.27820358984172 C233.56834565615281 127.0871600760147, 234.67828564858064 111.94919998198748, 234.77512239106 88.93293885700405 M233.67811032291502 139.0633974308148 C231.80644848523661 124.39918356761336, 233.04840164957568 109.99146327283233, 233.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="262" y="120">id43</text><g><path d="M289.917262064293 89.15710548870265 C306.457930556871 89.4688816714473, 321.9109392136335 91.23304236413911, 348.07396535761654 89.38177750818431 M291.223622254096 90.46982746664435 C312.60972532778976 89.39177608871833, 336.649445306696 90.78335211062804, 348.2794330334291 89.51195665542036 M347.6138933170587 89.24430773966014 C351.0012326971628 102.83524710033089, 348.0117960111238 117.03554429486394, 347.3120261300355 139.8133229445666 M349.8313265061006 90.96177598182112 C348.952838587109 107.12844209931791, 348.44879527622834 123.73342551570386, 349.89466654416174 140.44875323120505 M349.83588658459485 141.08132497780025 C333.5881071029231 141.29606103045865, 316.9398015744984 139.4838552985899, 290.05671112425625 138.50267897360027 M348.39905177708715 139.6283317739144 C334.23452811203896 141.42153838021682, 320.7306403951719 140.19379639370368, 290.3342704391107 140.56836631242186 M291.14214079268277 141.27820358984172 C291.5683456561528 127.0871600760147, 292.67828564858064 111.94919998198748, 292.77512239106 88.93293885700405 M291.678110322915 139.0633974308148 C289.8064484852366 124.39918356761336, 291.0484016495757 109.99146327283233, 291.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="320" y="120">id28</text><g><path d="M347.917262064293 89.15710548870265 C364.457930556871 89.4688816714473, 379.9109392136335 91.23304236413911, 406.07396535761654 89.38177750818431 M349.223622254096 90.46982746664435 C370.60972532778976 89.39177608871833, 394.649445306696 90.78335211062804, 406.2794330334291 89.51195665542036 M405.6138933170587 89.24430773966014 C409.0012326971628 102.83524710033089, 406.0117960111238 117.03554429486394, 405.3120261300355 139.8133229445666 M407.8313265061006 90.96177598182112 C406.952838587109 107.12844209931791, 406.44879527622834 123.73342551570386, 407.89466654416174 140.44875323120505 M407.83588658459485 141.08132497780025 C391.5881071029231 141.29606103045865, 374.9398015744984 139.4838552985899, 348.05671112425625 138.50267897360027 M406.39905177708715 139.6283317739144 C392.23452811203896 141.42153838021682, 378.7306403951719 140.19379639370368, 348.3342704391107 140.56836631242186 M349.14214079268277 141.27820358984172 C349.5683456561528 127.0871600760147, 350.67828564858064 111.94919998198748, 350.77512239106 88.93293885700405 M349.678110322915 139.0633974308148 C347.8064484852366 124.39918356761336, 349.0484016495757 109.99146327283233, 349.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="378" y="120">id49</text><text fill="rgb(150, 100, 28)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="180" y="55">id82</text><text fill="rgb(27, 14, 139)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="402" y="55">list</text><g><path d="M148.91726206429303 24.157105488702655 C165.96892660483718 24.47300859708339, 181.9329313095659 26.237169289775192, 209.07396535761654 24.381777508184314 M150.22362225409597 25.469827466644347 C172.3879350842908 24.40115554071963, 197.20586481969804 25.792731562629342, 209.2794330334291 24.511956655420363 M208.61389331705868 24.244307739660144 C212.00123269716278 37.83524710033089, 209.0117960111238 52.03554429486394, 208.31202613003552 74.81332294456661 M210.8313265061006 25.96177598182112 C209.952838587109 42.12844209931791, 209.44879527622834 58.73342551570386, 210.89466654416174 75.44875323120505 M210.83588658459485 76.08132497780025 C194.0346624031663 76.3041347881779, 176.8329121749848 74.49192905630916, 149.05671112425625 73.50267897360027 M209.39905177708715 74.6283317739144 C194.75285464618355 76.44149711281061, 180.7672934634611 75.21375512629747, 149.3342704391107 75.56836631242186 M150.14214079268277 76.27820358984172 C150.56834565615281 62.0871600760147, 151.67828564858064 46.949199981987476, 151.77512239106 23.932938857004046 M150.67811032291502 74.0633974308148 C148.80644848523661 59.39918356761336, 150.04840164957568 44.991463272832334, 150.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M370.917262064293 24.157105488702655 C387.9689266048372 24.47300859708339, 403.9329313095659 26.237169289775192, 431.07396535761654 24.381777508184314 M372.223622254096 25.469827466644347 C394.3879350842908 24.40115554071963, 419.20586481969804 25.792731562629342, 431.2794330334291 24.511956655420363 M430.6138933170587 24.244307739660144 C434.0012326971628 37.83524710033089, 431.0117960111238 52.03554429486394, 430.3120261300355 74.81332294456661 M432.8313265061006 25.96177598182112 C431.952838587109 42.12844209931791, 431.44879527622834 58.73342551570386, 432.89466654416174 75.44875323120505 M432.83588658459485 76.08132497780025 C416.0346624031663 76.3041347881779, 398.8329121749848 74.49192905630916, 371.05671112425625 73.50267897360027 M431.39905177708715 74.6283317739144 C416.75285464618355 76.44149711281061, 402.7672934634611 75.21375512629747, 371.3342704391107 75.56836631242186 M372.14214079268277 76.27820358984172 C372.5683456561528 62.0871600760147, 373.67828564858064 46.949199981987476, 373.77512239106 23.932938857004046 M372.678110322915 74.0633974308148 C370.8064484852366 59.39918356761336, 372.0484016495757 44.991463272832334, 372.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g></svg>"`;
+exports[`draw function renders a blank stack frame 1`] = `"<svg width="1300" height="325" xmlns="http://www.w3.org/2000/svg"><g><path d="M149.17355003153145 24.356621653946977 C222.5382236377637 24.947406849723766, 295.0726904068935 26.293984355476926, 431.29316109119344 24.528112997598058 M150.17069006151135 25.35861761391075 C258.99606475245344 25.337586696140363, 369.8469356741233 26.399771663990368, 431.4499938284575 24.627478272038402 M430.6138933170587 24.244307739660144 C434.036963196937 59.11295747105032, 431.047526510898 94.5909650363028, 430.3120261300355 154.8133229445666 M432.8313265061006 25.96177598182112 C432.05591074684634 69.77587079815567, 431.5518674359657 114.02828291337937, 432.89466654416174 155.44875323120505 M432.63802922082954 155.825371462785 C354.45128302954663 156.67949778130574, 275.9588167486709 155.29624767011097, 149.27999099698476 153.85710025090478 M431.5412983848642 154.71630698103448 C363.47573882943 157.79131114667166, 295.91444031495297 156.85418010823733, 149.4918510227996 155.43383196015287 M150.14214079268277 156.27820358984172 C151.21292230626568 121.20502475183457, 152.3228622986935 85.18492933362721, 151.77512239106 23.932938857004046 M150.67811032291502 154.0633974308148 C148.0849534834735 115.83291779831052, 149.32690664781256 77.85893173422663, 150.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M173.91726206429303 89.15710548870265 C190.457930556871 89.4688816714473, 205.91093921363353 91.23304236413911, 232.07396535761654 89.38177750818431 M175.22362225409597 90.46982746664435 C196.6097253277898 89.39177608871833, 220.649445306696 90.78335211062804, 232.2794330334291 89.51195665542036 M231.61389331705868 89.24430773966014 C235.00123269716278 102.83524710033089, 232.0117960111238 117.03554429486394, 231.31202613003552 139.8133229445666 M233.8313265061006 90.96177598182112 C232.952838587109 107.12844209931791, 232.44879527622834 123.73342551570386, 233.89466654416174 140.44875323120505 M233.83588658459485 141.08132497780025 C217.5881071029231 141.29606103045865, 200.9398015744984 139.4838552985899, 174.05671112425625 138.50267897360027 M232.39905177708715 139.6283317739144 C218.23452811203896 141.42153838021682, 204.73064039517195 140.19379639370368, 174.3342704391107 140.56836631242186 M175.14214079268277 141.27820358984172 C175.56834565615281 127.0871600760147, 176.67828564858064 111.94919998198748, 176.77512239106 88.93293885700405 M175.67811032291502 139.0633974308148 C173.80644848523661 124.39918356761336, 175.04840164957568 109.99146327283233, 175.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="204" y="120">id19</text><g><path d="M231.91726206429303 89.15710548870265 C248.457930556871 89.4688816714473, 263.9109392136335 91.23304236413911, 290.07396535761654 89.38177750818431 M233.22362225409597 90.46982746664435 C254.6097253277898 89.39177608871833, 278.649445306696 90.78335211062804, 290.2794330334291 89.51195665542036 M289.6138933170587 89.24430773966014 C293.0012326971628 102.83524710033089, 290.0117960111238 117.03554429486394, 289.3120261300355 139.8133229445666 M291.8313265061006 90.96177598182112 C290.952838587109 107.12844209931791, 290.44879527622834 123.73342551570386, 291.89466654416174 140.44875323120505 M291.83588658459485 141.08132497780025 C275.5881071029231 141.29606103045865, 258.9398015744984 139.4838552985899, 232.05671112425625 138.50267897360027 M290.39905177708715 139.6283317739144 C276.23452811203896 141.42153838021682, 262.7306403951719 140.19379639370368, 232.3342704391107 140.56836631242186 M233.14214079268277 141.27820358984172 C233.56834565615281 127.0871600760147, 234.67828564858064 111.94919998198748, 234.77512239106 88.93293885700405 M233.67811032291502 139.0633974308148 C231.80644848523661 124.39918356761336, 233.04840164957568 109.99146327283233, 233.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="262" y="120">id43</text><g><path d="M289.917262064293 89.15710548870265 C306.457930556871 89.4688816714473, 321.9109392136335 91.23304236413911, 348.07396535761654 89.38177750818431 M291.223622254096 90.46982746664435 C312.60972532778976 89.39177608871833, 336.649445306696 90.78335211062804, 348.2794330334291 89.51195665542036 M347.6138933170587 89.24430773966014 C351.0012326971628 102.83524710033089, 348.0117960111238 117.03554429486394, 347.3120261300355 139.8133229445666 M349.8313265061006 90.96177598182112 C348.952838587109 107.12844209931791, 348.44879527622834 123.73342551570386, 349.89466654416174 140.44875323120505 M349.83588658459485 141.08132497780025 C333.5881071029231 141.29606103045865, 316.9398015744984 139.4838552985899, 290.05671112425625 138.50267897360027 M348.39905177708715 139.6283317739144 C334.23452811203896 141.42153838021682, 320.7306403951719 140.19379639370368, 290.3342704391107 140.56836631242186 M291.14214079268277 141.27820358984172 C291.5683456561528 127.0871600760147, 292.67828564858064 111.94919998198748, 292.77512239106 88.93293885700405 M291.678110322915 139.0633974308148 C289.8064484852366 124.39918356761336, 291.0484016495757 109.99146327283233, 291.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="320" y="120">id28</text><g><path d="M347.917262064293 89.15710548870265 C364.457930556871 89.4688816714473, 379.9109392136335 91.23304236413911, 406.07396535761654 89.38177750818431 M349.223622254096 90.46982746664435 C370.60972532778976 89.39177608871833, 394.649445306696 90.78335211062804, 406.2794330334291 89.51195665542036 M405.6138933170587 89.24430773966014 C409.0012326971628 102.83524710033089, 406.0117960111238 117.03554429486394, 405.3120261300355 139.8133229445666 M407.8313265061006 90.96177598182112 C406.952838587109 107.12844209931791, 406.44879527622834 123.73342551570386, 407.89466654416174 140.44875323120505 M407.83588658459485 141.08132497780025 C391.5881071029231 141.29606103045865, 374.9398015744984 139.4838552985899, 348.05671112425625 138.50267897360027 M406.39905177708715 139.6283317739144 C392.23452811203896 141.42153838021682, 378.7306403951719 140.19379639370368, 348.3342704391107 140.56836631242186 M349.14214079268277 141.27820358984172 C349.5683456561528 127.0871600760147, 350.67828564858064 111.94919998198748, 350.77512239106 88.93293885700405 M349.678110322915 139.0633974308148 C347.8064484852366 124.39918356761336, 349.0484016495757 109.99146327283233, 349.94233041163534 89.23130004946142" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(150, 100, 28)" x="378" y="120">id49</text><g><path d="M148.91726206429303 24.157105488702655 C165.96892660483718 24.47300859708339, 181.9329313095659 26.237169289775192, 209.07396535761654 24.381777508184314 M150.22362225409597 25.469827466644347 C172.3879350842908 24.40115554071963, 197.20586481969804 25.792731562629342, 209.2794330334291 24.511956655420363 M208.61389331705868 24.244307739660144 C212.00123269716278 37.83524710033089, 209.0117960111238 52.03554429486394, 208.31202613003552 74.81332294456661 M210.8313265061006 25.96177598182112 C209.952838587109 42.12844209931791, 209.44879527622834 58.73342551570386, 210.89466654416174 75.44875323120505 M210.83588658459485 76.08132497780025 C194.0346624031663 76.3041347881779, 176.8329121749848 74.49192905630916, 149.05671112425625 73.50267897360027 M209.39905177708715 74.6283317739144 C194.75285464618355 76.44149711281061, 180.7672934634611 75.21375512629747, 149.3342704391107 75.56836631242186 M150.14214079268277 76.27820358984172 C150.56834565615281 62.0871600760147, 151.67828564858064 46.949199981987476, 151.77512239106 23.932938857004046 M150.67811032291502 74.0633974308148 C148.80644848523661 59.39918356761336, 150.04840164957568 44.991463272832334, 150.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M370.917262064293 24.157105488702655 C387.9689266048372 24.47300859708339, 403.9329313095659 26.237169289775192, 431.07396535761654 24.381777508184314 M372.223622254096 25.469827466644347 C394.3879350842908 24.40115554071963, 419.20586481969804 25.792731562629342, 431.2794330334291 24.511956655420363 M430.6138933170587 24.244307739660144 C434.0012326971628 37.83524710033089, 431.0117960111238 52.03554429486394, 430.3120261300355 74.81332294456661 M432.8313265061006 25.96177598182112 C431.952838587109 42.12844209931791, 431.44879527622834 58.73342551570386, 432.89466654416174 75.44875323120505 M432.83588658459485 76.08132497780025 C416.0346624031663 76.3041347881779, 398.8329121749848 74.49192905630916, 371.05671112425625 73.50267897360027 M431.39905177708715 74.6283317739144 C416.75285464618355 76.44149711281061, 402.7672934634611 75.21375512629747, 371.3342704391107 75.56836631242186 M372.14214079268277 76.27820358984172 C372.5683456561528 62.0871600760147, 373.67828564858064 46.949199981987476, 373.77512239106 23.932938857004046 M372.678110322915 74.0633974308148 C370.8064484852366 59.39918356761336, 372.0484016495757 44.991463272832334, 372.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><text fill="rgb(150, 100, 28)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="180" y="55">id82</text><text fill="rgb(27, 14, 139)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="402" y="55">list</text></svg>"`;
 
 exports[`draw function renders a bool 1`] = `"<svg width="1300" height="292" xmlns="http://www.w3.org/2000/svg"><g><path d="M49.02556400905005 24.241416855089682 C101.67472883071045 24.78571024322009, 153.3450280792927 26.373408998464704, 249.1665928987556 24.44361583115067 M50.20125421450777 25.42283250446578 C126.958478717734 25.051943962083083, 206.10388944161187 26.304326200825255, 249.3515084648273 24.560773679005287 M248.61389331705868 24.244307739660144 C252.036963196937 59.11295747105032, 249.04752651089802 94.5909650363028, 248.31202613003552 154.8133229445666 M250.8313265061006 25.96177598182112 C250.05591074684634 69.77587079815567, 249.55186743596568 114.02828291337937, 250.89466654416174 155.44875323120505 M250.75227619308416 155.9731643655708 C195.22971649251488 156.68231944392923, 139.3466937635452 155.0513814025964, 49.1510645373414 153.65245000658692 M249.45916222403224 154.66550825989682 C201.1154268945954 157.554673751121, 153.36624674198694 156.4497378845508, 49.40086070416821 155.51151490365555 M50.14214079268277 156.27820358984172 C51.21292230626568 121.20502475183457, 52.32286229869351 85.18492933362721, 51.775122391059995 23.932938857004046 M50.67811032291502 154.0633974308148 C48.08495348347351 115.83291779831052, 49.32690664781258 77.85893173422663, 50.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M43.04722050014489 18.258276093946847 C98.72792319271825 18.81226224029811, 153.4515152491855 20.36467495903178, 255.1851150732587 18.45598127014297 M44.19678141163024 19.413435203408945 C125.64690594232708 19.100311479449005, 209.43214010978426 20.324859971231348, 255.36592095706587 18.57053532676623 M254.61389331705868 18.244307739660144 C258.0423227719031 56.304614026658236, 255.05288608586415 94.97427814751863, 254.31202613003552 160.8133229445666 M256.8313265061006 19.96177598182112 C256.07137157080695 67.92298510298133, 255.56732825992628 116.3225115230307, 256.89466654416174 161.44875323120505 M256.7355571239737 161.95153613589483 C197.8962872052512 162.68755860022557, 138.70456541990504 161.09286757305927, 43.16993182411847 159.68239882282856 M255.47118215000765 160.6729422190877 C204.24132620213217 163.60327584438917, 153.5928116551039 162.52289678193645, 43.41417636055329 161.50014666802102 M44.14214079268277 162.27820358984172 C45.30960880378261 124.07270445320755, 46.419548796210435 84.92028873637318, 45.775122391059995 17.932938857004046 M44.67811032291502 160.0633974308148 C41.97672923320904 118.29797793291509, 43.21868239754811 76.78905200343578, 44.94233041163534 18.231300049461424" stroke="rgb(0, 0, 0)" stroke-width="1" fill="none"/></g><text text-anchor="middle" font-family="Consolas, Courier" font-size="20" fill="rgb(27, 14, 139)" x="150" y="115">True</text><g><path d="M48.91726206429303 24.157105488702655 C65.96892660483718 24.47300859708339, 81.9329313095659 26.237169289775192, 109.07396535761654 24.381777508184314 M50.22362225409597 25.469827466644347 C72.3879350842908 24.40115554071963, 97.20586481969804 25.792731562629342, 109.27943303342909 24.511956655420363 M108.61389331705868 24.244307739660144 C112.00123269716278 37.83524710033089, 109.0117960111238 52.03554429486394, 108.31202613003552 74.81332294456661 M110.8313265061006 25.96177598182112 C109.952838587109 42.12844209931791, 109.44879527622834 58.73342551570386, 110.89466654416174 75.44875323120505 M110.83588658459485 76.08132497780025 C94.0346624031663 76.3041347881779, 76.83291217498481 74.49192905630916, 49.05671112425625 73.50267897360027 M109.39905177708715 74.6283317739144 C94.75285464618355 76.44149711281061, 80.7672934634611 75.21375512629747, 49.334270439110696 75.56836631242186 M50.14214079268277 76.27820358984172 C50.568345656152815 62.0871600760147, 51.67828564858064 46.949199981987476, 51.775122391059995 23.932938857004046 M50.67811032291502 74.0633974308148 C48.806448485236615 59.39918356761336, 50.04840164957568 44.991463272832334, 50.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><g><path d="M188.91726206429303 24.157105488702655 C205.96892660483718 24.47300859708339, 221.9329313095659 26.237169289775192, 249.07396535761654 24.381777508184314 M190.22362225409597 25.469827466644347 C212.3879350842908 24.40115554071963, 237.20586481969804 25.792731562629342, 249.2794330334291 24.511956655420363 M248.61389331705868 24.244307739660144 C252.00123269716278 37.83524710033089, 249.0117960111238 52.03554429486394, 248.31202613003552 74.81332294456661 M250.8313265061006 25.96177598182112 C249.952838587109 42.12844209931791, 249.44879527622834 58.73342551570386, 250.89466654416174 75.44875323120505 M250.83588658459485 76.08132497780025 C234.0346624031663 76.3041347881779, 216.8329121749848 74.49192905630916, 189.05671112425625 73.50267897360027 M249.39905177708715 74.6283317739144 C234.75285464618355 76.44149711281061, 220.7672934634611 75.21375512629747, 189.3342704391107 75.56836631242186 M190.14214079268277 76.27820358984172 C190.56834565615281 62.0871600760147, 191.67828564858064 46.949199981987476, 191.77512239106 23.932938857004046 M190.67811032291502 74.0633974308148 C188.80644848523661 59.39918356761336, 190.04840164957568 44.991463272832334, 190.94233041163534 24.231300049461424" stroke="#000" stroke-width="1" fill="none"/></g><text fill="rgb(150, 100, 28)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="80" y="55">id32</text><text fill="rgb(27, 14, 139)" text-anchor="middle" font-family="Consolas, Courier" font-size="20" x="220" y="55">bool</text></svg>"`;
 

From 9990e4db29f8c8b81cba1ca207960ab5b485031e Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Wed, 5 Jun 2024 15:45:04 -0400
Subject: [PATCH 6/8] add type .blank-frame

---
 CHANGELOG.md                                                | 1 +
 demo/src/sample/blanks/data.json                            | 3 +--
 docs/docs/02-object_structure.md                            | 2 +-
 docs/docs/03-automation_algorithms.md                       | 2 +-
 .../99-api/examples/blankspaces_demo/blankspaces_demo.js    | 2 +-
 memory-viz/src/automate.ts                                  | 6 +++---
 memory-viz/src/memory_model.ts                              | 5 +++--
 memory-viz/src/style.ts                                     | 2 +-
 memory-viz/src/tests/draw.spec.tsx                          | 2 +-
 9 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03b79848..cf1dfd33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 -   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 draw blank stack frames.
 
 ### ✨ Enhancements
 
diff --git a/demo/src/sample/blanks/data.json b/demo/src/sample/blanks/data.json
index d26c9ef0..76e1a959 100644
--- a/demo/src/sample/blanks/data.json
+++ b/demo/src/sample/blanks/data.json
@@ -6,8 +6,7 @@
         "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
     },
     {
-        "type": ".frame",
-        "name": ".blank",
+        "type": ".blank-frame",
         "width": 100,
         "height": 200
     },
diff --git a/docs/docs/02-object_structure.md b/docs/docs/02-object_structure.md
index b0559f0b..9d9780d4 100644
--- a/docs/docs/02-object_structure.md
+++ b/docs/docs/02-object_structure.md
@@ -49,7 +49,7 @@ must contain the following attributes:
     "value": {"age": 12, "name": 17}
 }
 
-{"type": ".frame", "name": ".blank", "width": 100, "height": 200}
+{"type": ".blank-frame", "width": 100, "height": 200}
 
 {"type": "list", "id": 82, "value": [19, 43, 28, 49]}
 
diff --git a/docs/docs/03-automation_algorithms.md b/docs/docs/03-automation_algorithms.md
index acb81605..1e4d9355 100644
--- a/docs/docs/03-automation_algorithms.md
+++ b/docs/docs/03-automation_algorithms.md
@@ -101,7 +101,7 @@ 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). Note that if a blank stack frame is being drawn, the input should
-have `type=".frame"` and `name=".blank"`.
+have `type=".blank-frame"`.
 
 ## Summary
 
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 d5930de8..6c0f9711 100644
--- a/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js
+++ b/docs/docs/99-api/examples/blankspaces_demo/blankspaces_demo.js
@@ -26,7 +26,7 @@ const listOfObjs = [
         id: null,
         value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
     },
-    { type: ".frame", name: ".blank", width: 100, height: 200 },
+    { type: ".frame", width: 100, height: 200 },
     {
         type: ".frame",
         name: "func",
diff --git a/memory-viz/src/automate.ts b/memory-viz/src/automate.ts
index 82a1aa1f..119a4215 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);
@@ -262,7 +262,7 @@ function separateObjects(objects) {
                     "(either the width or the height is missing). This object will be omitted in the memory model" +
                     " diagram."
             );
-        } else if (item.type === ".frame") {
+        } else if (item.type.includes("frame")) {
             stackFrames.push(item);
         } else {
             otherItems.push(item);
diff --git a/memory-viz/src/memory_model.ts b/memory-viz/src/memory_model.ts
index 693b4606..1c6f7cfa 100644
--- a/memory-viz/src/memory_model.ts
+++ b/memory-viz/src/memory_model.ts
@@ -809,8 +809,9 @@ export class MemoryModel {
 
             obj.style = populateStyleObject(obj, this.seed);
 
-            if (obj.type === ".class" || obj.type === ".frame") {
-                let is_frame = obj.type === ".frame";
+            let non_objects = [".class", ".frame", ".blank-frame"];
+            if (non_objects.includes(obj.type)) {
+                let is_frame = obj.type.includes("frame");
 
                 const size = this.drawClass(
                     obj.x,
diff --git a/memory-viz/src/style.ts b/memory-viz/src/style.ts
index 7162a7ce..7c3ba621 100644
--- a/memory-viz/src/style.ts
+++ b/memory-viz/src/style.ts
@@ -72,7 +72,7 @@ function populateStyleObject(object, seed) {
         object_type = "primitive";
     } else if (collections.includes(object.type)) {
         object_type = "collection";
-    } else if (object.type === ".frame") {
+    } else if (object.type.includes("frame")) {
         object_type = "stackframe";
     } else {
         object_type = "class";
diff --git a/memory-viz/src/tests/draw.spec.tsx b/memory-viz/src/tests/draw.spec.tsx
index ce971d68..cc92fcea 100644
--- a/memory-viz/src/tests/draw.spec.tsx
+++ b/memory-viz/src/tests/draw.spec.tsx
@@ -282,7 +282,7 @@ describe("draw function", () => {
 
     it("renders a blank stack frame", () => {
         const objects: Array<Object> = [
-            { type: ".frame", name: ".blank", width: 100, height: 200 },
+            { type: ".blank-frame", width: 100, height: 200 },
             { type: "list", id: 82, value: [19, 43, 28, 49] },
         ];
         const m: InstanceType<typeof MemoryModel> = draw(objects, true, {

From d7700f5f417928c98b20d312b86dd417a2ea2370 Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Wed, 5 Jun 2024 15:49:57 -0400
Subject: [PATCH 7/8] update documentation

---
 CHANGELOG.md                          | 2 +-
 docs/docs/03-automation_algorithms.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf1dfd33..7018fbf1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,7 +12,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 -   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 draw blank stack frames.
+-   Created new type `.blank-frame` to denote blank stack frames.
 
 ### ✨ Enhancements
 
diff --git a/docs/docs/03-automation_algorithms.md b/docs/docs/03-automation_algorithms.md
index 1e4d9355..cb4e18fe 100644
--- a/docs/docs/03-automation_algorithms.md
+++ b/docs/docs/03-automation_algorithms.md
@@ -101,7 +101,7 @@ 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). Note that if a blank stack frame is being drawn, the input should
-have `type=".blank-frame"`.
+have `type=".blank-frame"` and the `name` attribute should be excluded from the input.
 
 ## Summary
 

From 348a366d1fa28f62b9d1a636e386af39478304dc Mon Sep 17 00:00:00 2001
From: Sarah Wang <sarahxp.wang@mail.utoronto.ca>
Date: Thu, 6 Jun 2024 18:36:31 -0400
Subject: [PATCH 8/8] define frame_types

---
 memory-viz/src/automate.ts     | 6 ++++--
 memory-viz/src/memory_model.ts | 6 +++---
 memory-viz/src/style.ts        | 6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/memory-viz/src/automate.ts b/memory-viz/src/automate.ts
index 119a4215..6dcf1357 100644
--- a/memory-viz/src/automate.ts
+++ b/memory-viz/src/automate.ts
@@ -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.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.type.includes("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 1c6f7cfa..7b5a0861 100644
--- a/memory-viz/src/memory_model.ts
+++ b/memory-viz/src/memory_model.ts
@@ -809,9 +809,9 @@ export class MemoryModel {
 
             obj.style = populateStyleObject(obj, this.seed);
 
-            let non_objects = [".class", ".frame", ".blank-frame"];
-            if (non_objects.includes(obj.type)) {
-                let is_frame = obj.type.includes("frame");
+            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,
diff --git a/memory-viz/src/style.ts b/memory-viz/src/style.ts
index 7c3ba621..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.type.includes("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.