Revamp Bite Selection Visualization

[amalnanavati]

Describe this pull request. Link to relevant GitHub issues, if any.

In our pilot study, we found the following issues with bite selection:

1. Sometimes SegmentFromPoint segmented two food items together, and it was hard for the user to realize that the fork would skewer the middle.
2. Sometimes SegmentFromPoint would mask the entire plate as one of the masks. Because we ensured all masks we equal size, this resulted in the other masks being very small and hard to see.

This PR addresses both of these as follows:

1. Renders a small red dot in the middle of the image to display the center. Note that this is the center of the roi, not the center of mass of the mask. Although these are close, they aren't quite the same, so even this rendered point will be slightly off.
2. Allows each mask to be scaled differently to fill up the button.

The above image shows what Bite Selection looked like before this PR.

The above image shows what Bite Selection looks like now.

The above image illustrates the benefit of this approach.

Explain how this pull request was tested, including but not limited to the below checkmarks.

• Setup:
  • ros2 launch feeding_web_app_ros2_test feeding_web_app_dummy_nodes_launch.xml run_food_detection:=false
  • ros2 launch ada_feeding_perception ada_feeding_perception.launch.py
  • cd src/feeding_web_interface/feedingwebapp/; npm start
• Testing:
  • Go to bite selection.
  • Click a point on the image.
  • Verify that the masks scale to fill the button, and that a red point is rendered in the center of each mask.
  • Repeat for multiple food items.

---

Before creating a pull request

• Format React code with npm run format
• [N/A] Format Python code by running python3 -m black . in the top-level of this repository
• Thoroughly test your code's functionality, including unintended uses.
• Fully test the responsiveness of the feature as documented in the Responsiveness Testing Guidelines. If you deviate from those guidelines, document above why you deviated and what you did instead.
• [N/A] Consider the user flow between states that this feature introduces, consider different situations that might occur for the user, and ensure that there is no way for the user to get stuck in a loop.

Before merging a pull request

• Squash all your commits into one (or Squash and Merge)

[taylorkf]

This is ready to merge. However, it may be helpful to add something on the screen to indicate what the red dot means to users (if it won't clutter up the screen too much). @amalnanavati , if you agree, can you add an issue?