diff --git a/memory-viz/src/memory_model.ts b/memory-viz/src/memory_model.ts
index 8d4446ca..8060909f 100644
--- a/memory-viz/src/memory_model.ts
+++ b/memory-viz/src/memory_model.ts
@@ -539,6 +539,9 @@ export class MemoryModel {
box_height += 1.5 * this.item_min_height;
}
+ this.drawRect(x, y, box_width, box_height, style.box_container);
+ const SIZE = { x, y, width: box_width, height: box_height };
+
// A second loop, so that we can position the colon and value boxes correctly.
curr_y = y + this.prop_min_height + this.item_min_height / 2;
for (const k in obj) {
@@ -549,13 +552,6 @@ export class MemoryModel {
this.getTextLength(idv + 5)
);
- this.drawText(
- ":",
- x + box_width / 2,
- curr_y + this.item_min_height / 2 + this.font_size / 4,
- { fill: this.text_color }
- );
-
// Draw the rectangle for values.
this.drawRect(
x + box_width / 2 + this.font_size,
@@ -564,6 +560,13 @@ export class MemoryModel {
this.item_min_height
);
+ this.drawText(
+ ":",
+ x + box_width / 2,
+ curr_y + this.item_min_height / 2 + this.font_size / 4,
+ { fill: this.text_color }
+ );
+
this.drawText(
idv,
x + box_width / 2 + this.font_size + value_box / 2,
@@ -574,9 +577,6 @@ export class MemoryModel {
curr_y += this.item_min_height * 1.5;
}
- this.drawRect(x, y, box_width, box_height, style.box_container);
- const SIZE = { x, y, width: box_width, height: box_height };
-
this.drawProperties(id, "dict", x, y, box_width, style);
return SIZE;
diff --git a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
index 7d7c2990..424bfbff 100644
--- a/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
+++ b/memory-viz/src/tests/__snapshots__/draw.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`draw function renders a bool 1`] = `""`;
-exports[`draw function renders a dict 1`] = `""`;
+exports[`draw function renders a dict 1`] = `""`;
exports[`draw function renders a float 1`] = `""`;