Make non-critical warnings less intrusive

[surchs]

Is there an existing issue for this?

• I have searched the existing issues

New feature

I would like to have a way of removing / hiding the non-critical warnings from the UI. Right now I get a lot of warnings even if nothing is really broken - and as a regular user I cannot do anything about these warnings (other than click them away one by one):

I propose we make the current behaviour a "debug" mode and make it default to "off". In the new "normal mode", I would either see only critical error messages (i.e. no results / something broken) or I see only a little counter of warnings and errors - e.g. with a badge https://mui.com/material-ui/react-badge/

I can then do some UI action (e.g. click the badge) to expand these warnings and look at them.

Unclear documentation

No response

[Tusharjamdade]

@surchs I can take this up and try to fix the issue. Please assign it to me.

[surchs]

Hey @Tusharjamdade, thanks for your interest in contributing. I think the best way to do this is to discuss in the issue a bit how you want to implement it, and then we can discuss the details in a draft PR.

[Tusharjamdade]

Hi @surchs,

To implement MUI Badges like the one shown in the example image, we can add them to the navbar (Navbar.tsx). In App.tsx, we can store all the warnings or non-critical issues in a state variable and pass these warnings as props to the Navbar component. The badge value can then be dynamically updated based on the warnings.

Additionally, we can add a dropdown to the badge to display non-critical warnings. For critical warnings, we can display them as we did previously. Please let me know if my approach is irrelevant or needs improvement.

[surchs]

Hey @Tusharjamdade , that sounds cool to me. @rmanaem, do you have any opinions on the placement for the warnings-badge? Navbar makes sense?

[Tusharjamdade]

Hi @surchs @rmanaem,

I have implemented the mail badge as discussed. Please let me know if any improvements or additional changes are needed. Once I receive confirmation, I will open a PR.

Thank you!

Neurobagel.Query.Tool.mp4

[Tusharjamdade]

Hi @rmanaem and @surchs,

I hope you’re doing well. I wanted to kindly check in to see if there are any updates or feedback regarding the mail badge implementation I shared earlier. Please let me know if there’s anything else needed from my side.

Thank You!

[rmanaem]

Hi @Tusharjamdade,
Thanks for taking this!
Storing notifications in a badge is a good idea and your implementation looks great. I'd suggest using bell/notification icon instead of mail. See this page for the list of Material UI icons.

[Tusharjamdade]

@rmanaem, following your suggestion, I have implemented the notification badge and also added a test for it

Below are some of the screenshots:

[rmanaem]

@surchs I know the issue mentions warnnigs only but do we want to consider have the same behavior for all notistack notifications?

[surchs]

I think it would be good to have both warnings and info be hidden in the badge.

[Tusharjamdade]

Hi @surchs and @rmanaem,
Should I update the PR to add the info message to the badge as well, according to your suggestion?

[surchs]

Hey @Tusharjamdade that would be amazing, yes, thanks! But maybe hold off until @rmanaem has submitted his review of your PR, I think there was another thing we noticed re clearing popups, might be easier to address both

[rmanaem]

@Tusharjamdade I just submitted my review, feel free to ping us with any questions.

[Tusharjamdade]

Hi @surchs and @rmanaem,

As per the suggested changes, I have updated the implementation to include

Delete functionality for each notification. When the user clicks the close icon, the respective notification will be removed.

Added a Clear All feature. When the "Clear All" button is clicked, all notifications will be cleared.

Added custom colors for warning and info notifications.

Is there anything else that needs improvement or any additional changes I should work on?

Thank you.

Below are some of the screenshots:

[rmanaem]

Hi @Tusharjamdade,
Thanks for making the changes!
Yes, that's all the improvements mentioned in review.
The other thing that requires attention is the tests, I left comments regarding those in my review as well.
essentially:

• Update the Navbar component test with assertions for the new features you've added
• Update the tests (both e2e and component) that have failed as result of the changes made