#209 allow for arrowing through graph screen values/tabs

[somshrivastava]

Changes

In the graph-page component, I added a Host Listener that is listening for any keyboard events... if it is a down or up arrow, I wrote some logic (pretty long, I'm not sure if there is a more efficient way to write it) that will change the selected data type to show the graph of.

From the graph-page component, I passed the selectedDataType value through its child components all the way to the graph-sidebar-desktop component where it can then use the selectedDataType to figure out which dropdown (node) to open.

To Do

There is still a small bug right now. Let's say you open the graph page and click the down arrow, it will open the first dropdown and open the first data type, but it won't show that data type as highlighted to show that it is selected. This happens to the first data type of every dropdown... I'm not sure why. I put a screenshot below of the error.

Checklist

It can be helpful to check the Checks and Files changed tabs. Please review the contributor guide and reach out to your Tech Lead if anything is unclear. Please request reviewers and ping on slack only after you've gone through this whole checklist.

• [x] All commits are tagged with the ticket number
• [x] No linting errors / newline at end of file warnings
• [x] All code follows repository-configured prettier formatting
• [x] No merge conflicts
• [x] All checks passing
• [x] Screenshots of UI changes (see Screenshots section)
• [x] Remove any non-applicable sections of this template
• [x] Assign the PR to yourself
• [x] No package-lock.json changes (unless dependencies have changed)
• [x] Request reviewers & ping on Slack
• [x] PR is linked to the ticket (fill in the closes line below)

Closes # (issue #)

[somshrivastava]

When arrowing through the tabs, if you are on the first data type of any node, it won't show it as selected... not sure why yet, still trying to fix it.