Merge branch 'master' of https://github.com/david-yz-liu/memory-viz i…

…nto highlight-box-bug
david-yz-liu · Jun 2, 2024 · ddddaf3 · ddddaf3
2 parents efe3d47 + 189c5b4
commit ddddaf3
Show file tree

Hide file tree

Showing 24 changed files with 154 additions and 219 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,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.
+
 ### ✨ Enhancements
 
 ### 🐛 Bug fixes

diff --git a/README.md b/README.md
@@ -30,13 +30,13 @@ const objects = [
         stack_frame: true,
     },
     {
-        name: "str",
+        type: "str",
         id: 19,
         value: "David is cool!",
         style: ["highlight"],
     },
     {
-        name: "int",
+        type: "int",
         id: 13,
         value: 7,
     },

diff --git a/demo/src/__tests__/SvgDisplay.spec.tsx b/demo/src/__tests__/SvgDisplay.spec.tsx
@@ -36,15 +36,13 @@ describe("SvgDisplay", () => {
                     stack_frame: true,
                 },
                 {
-                    isClass: false,
-                    name: "str",
+                    type: "str",
                     id: 19,
                     value: "David is cool!",
                     style: ["highlight"],
                 },
                 {
-                    isClass: false,
-                    name: "int",
+                    type: "int",
                     id: 13,
                     value: 7,
                 },

diff --git a/demo/src/sample/automated-layout/data.json b/demo/src/sample/automated-layout/data.json
@@ -14,11 +14,10 @@
         "stack_frame": true
     },
     {
-        "isClass": false,
-        "name": "list",
+        "type": "list",
         "id": 84,
         "value": [32, 10, 90, 57],
         "show_indexes": true
     },
-    { "isClass": false, "name": "None", "id": 13, "value": "None" }
+    { "type": "None", "id": 13, "value": "None" }
 ]
diff --git a/demo/src/sample/blanks/data.json b/demo/src/sample/blanks/data.json
@@ -7,7 +7,7 @@
         "stack_frame": true
     },
     {
-        "name": "BLANK",
+        "type": "BLANK",
         "width": 100,
         "height": 200,
         "stack_frame": true
@@ -20,49 +20,43 @@
         "stack_frame": true
     },
     {
-        "isClass": false,
-        "name": "list",
+        "type": "list",
         "id": 82,
         "value": [19, 43, 28, 49]
     },
     {
-        "isClass": false,
-        "name": "list",
+        "type": "list",
         "id": 84,
         "value": [32, 10, 90, 57],
         "show_indexes": true
     },
     {
-        "isClass": false,
-        "name": "int",
+        "type": "int",
         "id": 19,
         "value": 1969
     },
     {
-        "name": "BLANK",
+        "type": "BLANK",
         "width": 100,
         "height": 200
     },
     {
-        "isClass": false,
-        "name": "bool",
+        "type": "bool",
         "id": 32,
         "value": true
     },
     {
-        "isClass": false,
-        "name": "str",
+        "type": "str",
         "id": 43,
         "value": "David is cool"
     },
     {
-        "name": "BLANK",
+        "type": "BLANK",
         "width": 200,
         "height": 150
     },
     {
-        "isClass": false,
-        "name": "tuple",
+        "type": "tuple",
         "id": 11,
         "value": [82, 76]
     }

diff --git a/demo/src/sample/manual-layout/data.json b/demo/src/sample/manual-layout/data.json
@@ -9,26 +9,23 @@
         "stack_frame": true
     },
     {
-        "isClass": false,
         "x": 1050,
         "y": 500,
-        "name": "dict",
+        "type": "dict",
         "id": 10,
         "value": { "x": 81, "y": 100, "z": 121 }
     },
     {
-        "isClass": false,
         "x": 1050,
         "y": 40,
-        "name": "tuple",
+        "type": "tuple",
         "id": 11,
         "value": [82, 76]
     },
     {
-        "isClass": false,
         "x": 750,
         "y": 250,
-        "name": "bool",
+        "type": "bool",
         "id": 32,
         "value": true
     }

diff --git a/demo/src/sample/simple/data.json b/demo/src/sample/simple/data.json
@@ -7,15 +7,13 @@
         "stack_frame": true
     },
     {
-        "isClass": false,
-        "name": "str",
+        "type": "str",
         "id": 19,
         "value": "David is cool!",
         "style": ["highlight"]
     },
     {
-        "isClass": false,
-        "name": "int",
+        "type": "int",
         "id": 13,
         "value": 7
     }

diff --git a/demo/src/sample/styling/data.json b/demo/src/sample/styling/data.json
@@ -10,47 +10,42 @@
         "style": ["highlight"]
     },
     {
-        "isClass": false,
         "x": 350,
         "y": 350,
-        "name": "list",
+        "type": "list",
         "id": 54,
         "value": [19, 43, 28, 49],
         "style": {
             "text_id": { "font-style": "italic", "font-size": "x-large" }
         }
     },
     {
-        "isClass": false,
         "x": 750,
         "y": 500,
-        "name": "str",
+        "type": "str",
         "id": 43,
         "value": "David is cool",
         "style": "highlight"
     },
     {
-        "isClass": false,
         "x": 1050,
         "y": 260,
-        "name": "set",
+        "type": "set",
         "id": 90,
         "value": [36, 49, 64]
     },
     {
-        "isClass": false,
         "x": 1050,
         "y": 500,
-        "name": "dict",
+        "type": "dict",
         "id": 10,
         "value": { "x": 81, "y": 100, "z": 121 },
         "style": { "text_id": { "font-style": "italic" } }
     },
     {
-        "isClass": false,
         "x": 750,
         "y": 750,
-        "name": "None",
+        "type": "None",
         "id": 13,
         "value": "None",
         "style": {

diff --git a/docs/docs/02-object_structure.md b/docs/docs/02-object_structure.md
@@ -10,23 +10,23 @@ 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. Pass true to draw a class or a stack-frame, and false to draw any built-in types.
--   `name` - `string`: denotes the type of the object to draw (if `isClass===true`, then this is the name of the
-    corresponding class or stackframe).
--   If the user want to hardcode the coordinates (implying the `automation` parameter of `draw` is false), each object
+-   `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.
+-   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 StackFrame, then this MUST be `null`.
+-   `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
-    stackframe, or a dictionary.
-    **Note that in such cases where we want to do draw a 'container'
+    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,
+    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
@@ -40,31 +40,43 @@ must contain the following attributes:
 ### Examples
 
 ```javascript
-{"isClass": true, "name": "__main__", "id": null, "value": {"lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11}, "stack_frame": true},
-{"name": "BLANK", "width": 100, "height": 200, "stack_frame" : true},
-{"isClass": true, "name": "func", "id": null, "value": {"age": 12, "name": 17}, "stack_frame": true},
+{
+    "isClass": true,
+    "name": "__main__",
+    "id": null,
+    "value": {"lst1": 82, "lst2": 84, "p": 99, "d": 10, "t": 11},
+    "stack_frame": true
+}
+
+{
+    "isClass": true,
+    "name": "func",
+    "id": null,
+    "value": {"age": 12, "name": 17},
+    "stack_frame": true
+}
 
-{"name": "BLANK", "width": 100, "height": 200, "stack_frame" : true}
+{"type": "BLANK", "width": 100, "height": 200, "stack_frame" : true}
 
-{"isClass": false, "name": "list", "id": 82, "value": [19, 43, 28, 49]}
+{"type": "list", "id": 82, "value": [19, 43, 28, 49]}
 
-{"isClass": false, "name": "list", "id": 84, "value": [32, 10, 90, 57], "show_indexes": true}
+{"type": "list", "id": 84, "value": [32, 10, 90, 57], "show_indexes": true}
 
-{"isClass": false, "name": "int", "id": 19, "value": 1969}
+{"type": "int", "id": 19, "value": 1969}
 
-{"isClass": false, "name": "bool", "id": 32, "value": true}
+{"type": "bool", "id": 32, "value": true}
 
-{"name": "BLANK", "width": 200, "height": 100}
+{"type": "BLANK", "width": 200, "height": 100}
 
-{"isClass": false, "name": "str", "id": 43, "value": "David is cool"}
+{"type": "str", "id": 43, "value": "David is cool"}
 
-{"isClass": false, "name": "tuple", "id": 11, "value": [82, 76]}
+{"type": "tuple", "id": 11, "value": [82, 76]}
 
-{"isClass": false, "name": "set", "id": 90, "value": [36, 49, 64]}
+{"type": "set", "id": 90, "value": [36, 49, 64]}
 
-{"isClass": false, "name": "dict", "id": 10, "value": {"x": 81, "y": 100, "z": 121}}
+{"type": "dict", "id": 10, "value": {"x": 81, "y": 100, "z": 121}}
 
-{"isClass": false, "name": "None", "id": 13, "value": "None",
+{"type": "None", "id": 13, "value": "None",
     "style": {
       "text_value" : {"font-style": "italic"},
       "box_id": {"fill": "red", "fillStyle": "dots"},

diff --git a/docs/docs/99-api/examples/automation_demo/automation_demo.json b/docs/docs/99-api/examples/automation_demo/automation_demo.json
@@ -14,11 +14,10 @@
         "stack_frame": true
     },
     {
-        "isClass": false,
-        "name": "list",
+        "type": "list",
         "id": 84,
         "value": [32, 10, 90, 57],
         "show_indexes": true
     },
-    { "isClass": false, "name": "None", "id": 13, "value": "None" }
+    { "type": "None", "id": 13, "value": "None" }
 ]
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
@@ -20,8 +20,8 @@ const listOfObjs = [
         value: { age: 12, name: 17 },
         stack_frame: false,
     },
-    { isClass: false, name: "list", id: 82, value: [19, 43, 28, 49] },
-    { isClass: false, name: "int", id: 19, value: 1969 },
+    { type: "list", id: 82, value: [19, 43, 28, 49] },
+    { type: "int", id: 19, value: 1969 },
 ];
 
 const { objs, canvas_height, canvas_width } = drawAutomatedOtherItems(

diff --git a/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_C.js b/docs/docs/99-api/examples/automation_demo/more_specific_demos/demo_C.js
@@ -10,13 +10,7 @@
  *      - ~/examples/automation_demo/more_specific_demos/draw_automated.svg
  */
 
-const {
-    drawAutomated,
-    separateJSON,
-    getSize,
-    drawAutomatedOtherItems,
-    MemoryModel,
-} = require("memory-viz");
+const { drawAutomated } = require("memory-viz");
 const fs = require("fs");
 
 const WIDTH = 1300;