Website layout

[yoonieaj]

Proposed Changes

Changed the website design to have a horizontal layout and to include the MemoryViz logo.

Website screenshot

Type of Change

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)	X
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
📚 Documentation update (change that only updates documentation)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

Before opening your pull request:

• I have performed a self-review of my changes.
  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.
• I have updated the project Changelog (this is required for all changes).

After opening your pull request:

• I have verified that the CI tests have passed.
• I have reviewed the test coverage changes reported by Coveralls.
• I have requested a review from a project maintainer.

[david-yz-liu]

@yoonieaj @sarahsonder this is a good start, but you should not have created new components. Instead, you should modify the existing components, as they already contain the required functionality (and testing).

[coveralls]

Pull Request Test Coverage Report for Build 10447705512

Details

• 10 of 11 (90.91%) changed or added relevant lines in 4 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.01%) to 89.799%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
demo/src/MemoryModelsMenu.tsx	6	7	85.71%

Totals
Change from base Build 10344924734:	-0.01%
Covered Lines:	405
Relevant Lines:	435

---

💛 - Coveralls

[sarahsonder]

Hi Professor Liu, below are some notes and questions about this round of changes.

Notes

Testing changes: For tests involving Menu components, I've added a fireEvent to simulate opening the menu.

New files: When importing the logo, I ran into two problems.

1. I was getting a module not found error on the import
2. When I ran the tests, Jest displayed unexpected token errors

The new files declarations.d.ts and fileMock.js, as well as updates to jest.config.ts are my solutions to the above problems. For the first problem, I referenced this Stack Overflow post and the second problem was solved using ChatGPT. Please let me know if you would like me to implement new solutions.

---

Questions

Input Layout: Since we tried our best to follow the existing structure of the code, we decided not to change the layout of the input in this update. However, we are wondering if we could move the Sample Inputs and Rendering Options menus to one row (instead of the two components sandwiching the file input). Please let us know if this change makes sense and if it's ok for us to use MemoryModelsSample.tsx in MemoryModelsUserInput.tsx.

Menu Components: There are curently two Menu components, one in MemoryModelsSample.tsx for sample inputs and another in MemoryModelsUserInput.tsx for rendering options. At the moment, there is some duplicate code. Should I refactor the code and create a new MemoryModelsMenu component?

[david-yz-liu]

@yoonieaj and @sarahsonder good work; I'll do a full review soon, but in response to your immediate questions:

1. Having both sample inputs and rendering option menus in one row is good (that said, this is the kind of question that's better asked by providing screenshots)
2. Creating one MemoryModelsMenu component is a good idea

[david-yz-liu]

@yoonieaj and @sarahsonder okay this is looking better. I left some review comments.

I'll highlight one general point: because we are using a UI component library, we should use custom CSS sparingly. It appears that you've been trying to use CSS to achieve a specific look that matches your initial design, which is understandable but creates extra work because you're adding new custom CSS that is finicky and would need to be maintained over time. I didn't comment everywhere you used custom CSS, but for your next iteration you should try to remove as much custom CSS as possible so that we allow the mui library's defaults to kick in and set the look of our website, while still achieving the overall goals of this pull request (modifying the layout, adding the logo).

[david-yz-liu]

@yoonieaj and @sarahsonder I accidentally ended a review too early and went for lunch, which is why you'll see this second review (focused mainly on layout).

[david-yz-liu]

@sarahsonder and @yoonieaj okay looking good. I left a few last minor comments. Also, please update the pull request description with final screenshots, and make sure you fill out the checklist.