Fix for issues #451 & #454

[lumos309]

Issue #451: List viewport not resizing in y-direction.

Issue was caused by a previous bug fix that enabled overflow in the list visualiser panel, but limited the maximum height of the panel itself. Since overflow and scrolling now works properly even without the bug fix (tested on Chrome and Edge), it can be commented out to fix this current issue.

[coveralls]

Pull Request Test Coverage Report for Build 1239

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 7.851%

---

Totals
Change from base Build 1202:	0.0%
Covered Lines:	280
Relevant Lines:	2994

---

💛 - Coveralls

[lumos309]

Fix for Issue #454 also: visualizer.js script now calculates the height of the list before using it to create the Kinetic Stage.

[jiachen247]

Can you yarn format and push again please! @lumos309

[lumos309]

@jiachen247 done!

[jiachen247]

Generally looks okay but for some reasons the CI is still breaking please make sure you yarn format and ensure all test cases are passing before pushing. Are you pushing with the no-verify flag?

[lumos309]

@jiachen247 I made the changes you suggested and also edited the commenting style in the .scss file, and now it passes! yarn format didn't pick up on any problems, but I suspect it was an extra newline and/or using // in consecutive lines.

[martin-henz]

Hmm, trying to build and run, but am getting this. Any idea what's happening?

TypeError: Cannot read property 'init' of undefined
ListVisualizer.componentDidMount
src/components/workspace/side-content/ListVisualizer.tsx:8
5 |
6 | public componentDidMount() {
7 | if (this.$parent) {

8 | (window as any).ListVisualizer.init(this.$parent);
9 | }
10 | }
11 |
View compiled
▶ 13 stack frames were collapsed.

missed width.

[jiachen247]

Can I ask why width defaults to 1000? With simple lists, this creates some padding on the right that shouldnt be there. It would be good if we could dynamically calculate the width at runtime as well!

[lumos309]

I'm not really sure how to go about finding the width. It seems like it would be tricky for lists that contains pointers to other lists...

[martin-henz]

I think you can find the width of the required window by visiting the lowest node on the right fringe of the tree. You start at the root and go right at each step until you reach a leaf. I think with the current tree drawing algorithm, you will find that that leaf is the node with the rightmost position.

[lumos309]

The problem is drawings like these, where there are both left and right nodes to account for, as well as multiple references to the same object. Nonetheless I think I may have a solution, which I'm working on now.

[lumos309]

Ok, I've sorted it out! Both width and height are now calculated dynamically.

[martin-henz]

The problem is drawings like these, where there are both left and right nodes to account for, as well as multiple references to the same object. Nonetheless I think I may have a solution, which I'm working on now.

Wow, that's a weird example. Great that you worked it out.

[martin-henz]

For this program

const a = list(list(1, 2, list(3), list(4, 5), pair(6, 7)), 2, 3);
const b = list(a, a, 10, 11, a);
draw_list(b);

I get:

Line 3: ReferenceError: is_empty_list is not defined

Note that we have replaced the function is_empty_list with is_null.

[lumos309]

Oh right, I'd forgotten about that. Updated.

[martin-henz]

Working fine.

[jiachen247]

Good job @lumos309!!

[lumos309]

Thanks @jiachen247 ! I can delete the branch now right?

[martin-henz]

Please don't delete the branch. I have merged it already with the master branch. So you can just checkout the master branch, and your changes should be in there. We keep merged branches in the repo, for future reference.