Insight-Developers-Group / BCI4KidsMediapipe

7 stars 2 forks source link

Created ErrorResponse component #184

Closed PriyavartRajain closed 2 years ago

PriyavartRajain commented 2 years ago

Created ErrorResponse component that displays the errors received from the backend. Modified SampleClient and App components accordingly

Dylan-Wheeler commented 2 years ago

So there's still a couple errors remaining with this component that I'll address below:

  1. the component still remains even when there is no error, could fix this by adding a display: none; property when the state is empty
  2. the height of the component gets changed weirdly on smaller screen sizes. This is just because of the media queries at the bottom of index.css, could just remove these since they're not necessary (also maybe just set the height of the component to min-content and then set a max width so it could wrap with longer messages)
  3. the border radius of the component isn't consistent with the rest of the application, basically just set it so the right and left sides form a complete semi-circle (like border-radius: 1rem; if the height is 2 rem)
  4. The component isn't centered on screen. Right now it's just set to a specific point using the margins around, try to remove these margins (or use something with margin: auto;) and set the position based on the screen width so it always stays centered
  5. Add user friendly messages for each error. Instead of just things like multi_face_detected_exception, we should have kid-friendly messages displayed. These don't have to be fancy, just put in whatever you think would fit with the error
PriyavartRajain commented 2 years ago
  1. Fixed. The ErrorResponse component now uses useRef instead of useState to keep track of the error. I think this would be a better and lighter solution since we don't need to keep track of the error anyway. Also found that in the SampleClient component when the response from backend changes to a yes or a no, the error state is not changed, this might cause the error to stay on the screen even when there has been a response received from the backend. I set the error state to an empty string whenever a valid response has been received from the backend. This should address the potential bug.
  2. Fixed.
  3. I was unsure how to make it consistent with other components so I set it to 1rem.
  4. Fixed.
  5. I was unsure what a kid-friendly message for some errors like df generator, state generator, or answer generator failed, so I have left this unchanged.