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:

• [x] 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.
• [x] I have updated the project Changelog (this is required for all changes).

After opening your pull request:

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

[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%
<!--	Total:	10	11	90.91%	-->

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