Control Page Layout

[Tyler-Lentz]

closes #88

This PR includes the design layout of the Controls Page with some mock values for display purposes.

Changes Implemented:

• design layout of the control page with all the required parameters displayed.
• a map to display the location of the flight in real-time.
• changing units by clicking data' feature.

Pending features:

• Checkbox to trace the plane's path on the map.
• Checkbox to center the map on the plane
• Checkbox to enable Text-to-speech warnings.
• Compass

Pending Review Changes:

• Remerge refactor/frontend
• Replace the map component with the new TUAS map component
• Delete package-lock.json at the top level
• Scale Differently with a small window size
• Implement Dynamic size for rendering map and other components for different heights
• Unit Indicator for Telemetry
• Add comments for threshold values and index state variables.

The following kinds of feedback would be greatly appreciated:

1. Run in your web browser with your screen size and see if anything seems weird.
2. Any unclear / uncommented code that you think should have an explanation.
3. Any suggestion to improve the code from a readability/reusability/redundancy/design standpoint
4. Any suggestion for the units' color combo. I personally think it isn't great, and the colors could be better for UX, but I also can't think of a good combo, given the aesthetics of the rest of the page. Please let me know if you have an idea for a better color combo.

[atar13]

Love the control page. It looks great and the clicking to change units is a great feature.

Before this gets merged in the package-lock.json in the top level of the project should be deleted. We only need those files inside the houston folder.

As far as suggestions go, I think it would be great if the control page could scale differently with a smaller window size. During test flights we often have logs or another window pulled up side to side with the GCS control page. Kinda like this:

In these cases, it would be great if the map could scale to take up all the horizontal space and the telemetry generators could go underneath. This isn't super necessary but I think it would be quite useful. I'm cool if this goes into another PR since it could be a lot more work. I'm not a CSS expert but maybe you could change the flex direction of the controls-page class on some media query connected to the page width. But again, I think it's fine if this happens in another PR.

[Tyler-Lentz]

To add onto what Anthony said,

I'm really loving everything that's going on. I especially like how in the code you organized all of the different parameters, it seems very extensible and easy to change which is a huge plus. Also, the look of the page is very nice. This is definitely ready to merge in at the moment, but I do have some additional nitpicky things we could potentially fix, either in this PR or I or you could do a second pass later:

1. On my machine the height of the page is a little different, so if we could instead of specifying the 88 dvh value on the page let it take up the space that is there, that would be ideal. I know the rendering of the map gets a little messed up if you don't specify a height value, but I'm pretty sure you can do it if you place the map as the sole element inside of a flex container, then make the map flex: 1. If you're having trouble I can take a pass at it
2. It would be neat if the value gauges you can change units for had a little indicator on them. Maybe when you hover over toggleable ones, the units do a little hover effect, or change color, or something

Also, I'm a little bit confused on how the threshold value for the parameters works specifically, with the values of 80, 160 and the other decimal calculations. Maybe a comment in there would help me & future developers in this codebase. Also, a comment explaining what the index state variable means might help, since it isn't apparent immediately from reading the variable name.

👍 👍

[Tyler-Lentz]

One more note:

The connections page PR was just merged in, so you will likely need to remerge refactor/frontend into this branch before ready. In this connections PR I added a new folder called components and inside this folder I define a component called TuasMap. Basically this will synchronize how all of our maps look throughout the app, so you should include this TuasMap and replace the direct call to the leaflet map with the TuasMap. For an example, you can see the antenna tracker page in refactor/frontend, or for a more complicated example you can look at the new feat/input-design branch (not sure if that is the exact name but it is something like that).

So, to summarize everything:

Fix before merging:

1. delete the extraneous package files that anthony pointed out
2. remerge with refactor/frontend

Part of the original spec, but it's fine if we merge this in without them since we can add them later:

1. the checkbox controls
2. the compass

Nice to have if you have the time and desire:

1. touch up horizontal scaling of the map (what anthony described)
2. touch up vertical scaling of the whole page (what I described)
3. potentially add some signifier which shows which gauges you can hover over
4. the comments I described in my first msg
5. replace your leaflet map with the new TuasMap component (so that it has the same tileset as everything else without copied code)

[Samir-Rashid]

This page looks very good. All the functionality works on my machine. There is some weird CSS on the bottom row, but nothing serious (Mission State and Save Map are overlapping).
The other reviewers left some good feedback, but I think some of what Anthony said is serious feature creep. I am a fan of merging early and often. Move whatever isn't completed in this PR to a new issue after merging.
The fixes you committed look good, and the overall code quality is very readable.

[shree-venkatesh]

I've updated the top comment with this note, but I'm writing this here, just in case someone overlooks it:

• Any suggestion for the units' color combo. I personally think it isn't great, and the colors could be better for UX, but I also can't think of a good combo, given the aesthetics of the rest of the page. Please let me know if you have an idea for a better color combo.

[Tyler-Lentz]

I've updated the top comment with this note, but I'm writing this here, just in case someone overlooks it:

• Any suggestion for the units' color combo. I personally think it isn't great, and the colors could be better for UX, but I also can't think of a good combo, given the aesthetics of the rest of the page. Please let me know if you have an idea for a better color combo.

Everything looks amazing, the additional comments are really helpful. As for the color combination, I'm honestly in the same boat as you. I can't think of anything else, maybe in the future we can rethink it. Ready to merge at your click, then we can talk about the next page.