Embed isClass and stack_frame as types (#40)

david-yz-liu · Jun 7, 2024 · 4e9a126 · 4e9a126
1 parent 636e261
commit 4e9a126
Show file tree

Hide file tree

Showing 26 changed files with 115 additions and 146 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,9 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### 🚨 Breaking changes
 
 -   Changed the `name` attribute to `type` when drawing objects.
+-   Removed the `isClass` and `stack_frame` attributes and embedded them as the types `.class` and `.frame`.
+-   Renamed the input for blank objects from `BLANK` to `.blank`.
+-   Created new type `.blank-frame` to denote blank stack frames.
 
 ### ✨ Enhancements
 

diff --git a/README.md b/README.md
@@ -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
@@ -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
@@ -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
@@ -1,23 +1,20 @@
 [
     {
-        "isClass": true,
+        "type": ".frame",
         "name": "__main__",
         "id": null,
-        "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 },
-        "stack_frame": true
+        "value": { "lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11 }
     },
     {
-        "type": "BLANK",
+        "type": ".blank-frame",
         "width": 100,
-        "height": 200,
-        "stack_frame": true
+        "height": 200
     },
     {
-        "isClass": true,
+        "type": ".frame",
         "name": "func",
         "id": null,
-        "value": { "age": 12, "name": 17 },
-        "stack_frame": true
+        "value": { "age": 12, "name": 17 }
     },
     {
         "type": "list",
@@ -36,7 +33,7 @@
         "value": 1969
     },
     {
-        "type": "BLANK",
+        "type": ".blank",
         "width": 100,
         "height": 200
     },
@@ -51,7 +48,7 @@
         "value": "David is cool"
     },
     {
-        "type": "BLANK",
+        "type": ".blank",
         "width": 200,
         "height": 150
     },

diff --git a/demo/src/sample/manual-layout/data.json b/demo/src/sample/manual-layout/data.json
@@ -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
@@ -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
@@ -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
@@ -10,53 +10,46 @@ the array of objects to be drawn.
 To be successfully rendered, the array must contain objects that strictly follow a specific structure. Every object
 must contain the following attributes:
 
--   `isClass` - `boolean`: denotes whether the object to be drawn is a user-defined class (or a stack frame) or a built-in
-    object. This has a default value of `false` and should be manually set to `true` only when drawing a class or stack frame.
--   `name` - `string`: The name of the class or stack frame to be drawn. Note that this attribute is only applicable if the object's `isClass` attribute is true. Otherwise, this attribute can be excluded from the input.
--   `type` - `string`: The type of the object to be drawn. If no objects are being drawn, this attribute can be excluded from the input.
+-   `type` - `string`: Specifies whether a class, stack frame, or object is being drawn. To draw a class, input `.class` and to draw a stack frame, input `.frame`. If an object is being drawn, input the type of the object.
+-   `name` - `string`: The name of the class or stack frame to be drawn. Note that this attribute is only
+    applicable if the object's type is `.class` or `.frame`. Otherwise, this attribute can be excluded from the input.
 -   If the user wants to hardcode the coordinates (implying the `automation` parameter of `draw` is false), each object
     must include `x` and `y` attributes (for x-y coordinates).
--   `id` - `string`|`number`: denotes the id value of this object. If we are to draw a stack frame, then this MUST be `null`.
--   `value` - `*`: denotes the value of the object. This could be anything, from an empty string to a JS object,
+-   `id` - `string`|`number`: Denotes the id value of this object. If we are to draw a stack frame, then this MUST be `null`.
+-   `value` - `*`: Denotes the value of the object. This could be anything, from an empty string to a JS object,
     which would be passed for the purpose of drawing a user-defined class object, a
     stack frame, or a dictionary.
     **Note that in such cases where we want to draw a 'container'
     object (an object that contains other objects), we pass a _JS object_ where the keys are the
     attributes/variables and the values are the id's of the corresponding objects (not the
     objects themselves)**.
--   `stack_frame` - `boolean`: denotes whether a stack frame will be drawn or not. NOTE that this is only
-    applicable if the object's `isClass` attribute is `true` (since the
-    `MemoryModel.drawClass` covers both classes and stack frames). By default,
-    `stack_frame` is set to null (_which is false_).
 -   `show_indexes` - `boolean`: This is applicable only when drawing tuples or lists (when drawSequence
     method will be used). It denotes whether the memory box of the underlying
     sequence will include indices (for sequences) or not. This
     has a default value of `false`, and it should be manually set to `true`
     only if the object corresponds to a sequence (list or
     tuple).
--   `style` - `object` | `array`: a JS object or array specifying the "style" of the object. See `style.md` for information
+-   `style` - `object` | `array`: A JS object or array specifying the "style" of the object. See `style.md` for information
     on the required structure (also see `presets.md` for the full capabilities).
 
 ### Examples
 
 ```javascript
 {
-    "isClass": true,
+    "type": ".frame",
     "name": "__main__",
     "id": null,
-    "value": {"lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11},
-    "stack_frame": true
+    "value": {"lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11}
 }
 
 {
-    "isClass": true,
+    "type": ".frame",
     "name": "func",
     "id": null,
-    "value": {"age": 12, "name": 17},
-    "stack_frame": true
+    "value": {"age": 12, "name": 17}
 }
 
-{"type": "BLANK", "width": 100, "height": 200, "stack_frame" : true}
+{"type": ".blank-frame", "width": 100, "height": 200}
 
 {"type": "list", "id": 82, "value": [19, 43, 28, 49]}
 
@@ -66,7 +59,7 @@ must contain the following attributes:
 
 {"type": "bool", "id": 32, "value": true}
 
-{"type": "BLANK", "width": 200, "height": 100}
+{"type": ".blank", "width": 200, "height": 100}
 
 {"type": "str", "id": 43, "value": "David is cool"}
 

diff --git a/docs/docs/03-automation_algorithms.md b/docs/docs/03-automation_algorithms.md
@@ -41,7 +41,7 @@ Below we thoroughly describe the steps for each of the two functions:
    required width for drawing all stack frames and a collection of stack frames that will be drawn.
 
 3. Afterward, we iterate through the given stack-frames objects. Inside the loop,
-   we first acquire the width and the height of the object. If the box is "BLANK", we obtain the height and width
+   we first acquire the width and the height of the object. If the box is ".blank", we obtain the height and width
    by accessing the attributes of the object. If not, we obtain the dimensions by using the `getSize` function. Refer
    to the function for details.
 
@@ -96,11 +96,12 @@ Below we thoroughly describe the steps for each of the two functions:
 
 4. Return the mutated list of objects.
 
-\*In case the object has `name="BLANK"`, it is assumed that the user has
+\*In case the object has `type=".blank"`, it is assumed that the user has
 also provided a width and a height attribute corresponding to the desired
 width and height of the blank space. If such dimensions have not been provided,
 a related warning is printed and the object is skipped (no blank space is
-recorded).
+recorded). Note that if a blank stack frame is being drawn, the input should
+have `type=".blank-frame"` and the `name` attribute should be excluded from the input.
 
 ## Summary
 

diff --git a/docs/docs/99-api/examples/automation_demo/automation_demo.json b/docs/docs/99-api/examples/automation_demo/automation_demo.json
@@ -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
@@ -14,11 +14,10 @@ const WIDTH = 1300;
 
 const listOfObjs = [
     {
-        isClass: true,
+        type: ".frame",
         name: "Person",
         id: 99,
         value: { age: 12, name: 17 },
-        stack_frame: false,
     },
     { type: "list", id: 82, value: [19, 43, 28, 49] },
     { type: "int", id: 19, value: 1969 },

diff --git a/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_B.js b/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_B.js
@@ -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
@@ -2,7 +2,7 @@
  * This file demonstrates the ability to leave "blanks" when the 'automated.md' option is on.
  *
  * To define a blank box, you specify it as an object in the array (the classic array of objects) with three attributes:
- * - type: This must be equal to "BLANK"
+ * - type: This must be equal to ".blank"
  * - width: the desired width of the blank box (I say box but in reality there aren't any borders)
  * - height: the desired height of the blank box
  *
@@ -21,19 +21,17 @@ const WIDTH = 1300;
 
 const listOfObjs = [
     {
-        isClass: true,
+        type: ".frame",
         name: "__main__",
         id: null,
         value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
     },
-    { type: "BLANK", width: 100, height: 200, stack_frame: true },
+    { type: ".frame", width: 100, height: 200 },
     {
-        isClass: true,
+        type: ".frame",
         name: "func",
         id: null,
         value: { age: 12, name: 17 },
-        stack_frame: true,
     },
     { type: "list", id: 82, value: [19, 43, 28, 49] },
     {
@@ -43,10 +41,10 @@ const listOfObjs = [
         show_indexes: true,
     },
     { type: "int", id: 19, value: 1969 },
-    { type: "BLANK", width: 100, height: 200 },
+    { type: ".blank", width: 100, height: 200 },
     { type: "bool", id: 32, value: true },
     { type: "str", id: 43, value: "David is cool" },
-    { type: "BLANK", width: 200, height: 150 },
+    { type: ".blank", width: 200, height: 150 },
     { type: "tuple", id: 11, value: [82, 76] },
 ];
 

diff --git a/docs/docs/99-api/examples/manual_demo/manual_demo.json b/docs/docs/99-api/examples/manual_demo/manual_demo.json
@@ -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
@@ -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
@@ -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,