Convert class based to functional components

[Rashmil-1999]

This PR converts the Data Viewer and DFR3 Viewer components to Functional components from Class-based.

[longshuicy]

@Vismayak could you take a first pass review of this PR? Since your keycloak PR might need this. Thank you so much!

[Vismayak]

@Rashmil-1999 I get an error when I first go the DFR3Viewer, then to any other Viewer(Data, Hazard or Semantic Viewer) and back to the DFR3FViewer. This is the console error messages I am getting. Are you also getting the same error?

[Rashmil-1999]

So it seems like a side effect of using async await. if you wait like 5 seconds before jumping to other component, everything works fine otherwise it basically mutates a state even though the component was unmounted... classbased didn't cause such issues but using hooks you've got to be more careful it seems :( anyways good catch! let me see how to fix this.

[longshuicy]

Thank you for putting so much effort in refactoring this to hooks!
All the functionality works, just some minor comments.

Do we have task for refactoring SemanticViewer, Profile, and hazardViewer? If not could you help create separate task so in the future we could distribute the work looking at your example.

[ywkim312]

The red boxed text should be aligned? If you compare with prod, you will probably see what I mean

[ywkim312]

how do I test this page? This is */playbook url right?

[ywkim312]

@Rashmil-1999 I briefly checked the code but I am not very good at react. So if you let me know what to checked in terms of functionality, I can perform that. I have deployed this to dev and checked some viewers and it looks okay

[longshuicy]

Code looks good.

A few thing I noticed:

• Search seems weird. E.g. When search an item doesn't exist; I clear the search box then search again, the search action is actually never fired leaving the page stuck on empty results.

---

• 3D fragility is not searchable and not showing up properly. e.g. search 6303c9e2cef2881193f226bd

---

• certain fragility breaks. e.g. 6489ba3355647c1f4968bbb8

[Rashmil-1999]

Code looks good.

A few thing I noticed:

• Search seems weird. E.g. When search an item doesn't exist; I clear the search box then search again, the search action is actually never fired leaving the page stuck on empty results.

* [ ] 3D fragility is not searchable and not showing up properly. e.g. search 6303c9e2cef2881193f226bd * [ ] certain fragility breaks. e.g. 6489ba3355647c1f4968bbb8

For the 1st one, everything seems to be working on my end I tried garbage val, got to the empty page and cleared the search bar and tried another string, it worked. Still I replaced the deprecated onKeyPressed with onKeyDown and it should work :/ could you please try this again.

For the 2nd and the 3rd one, I fixed the error, I have no clue how it is working in production lol but it is. I have replaced the check for is3dPlot property on the curve with is3dCurve function that we have defined. With this it seems to be showing up. For the search, I can search the ID's you gave me. Could you let me know what Issues you are facing related to search?

[longshuicy]

3d Fragility curves should have a different icon e.g. 6303c9e2cef2881193f226bd

[longshuicy]

Everything works well. Approve.

[navarroc]

Functionality of the updated components seems to be working as expected and matches the behavior of the latest on production so I have approved this change, but I have two general comments/questions:

1. There are a lot of warnings/errors about style in the console, should these be addressed at some point or the style/linting updated?

2. When selecting filters (e.g. in the DFR3 viewer), should they stay selected when doing a search? Production clears them out as well when entering text and hitting search so just asking what the better behavior is since I would think filters would stay and it would search the filtered results.

[Rashmil-1999]

Functionality of the updated components seems to be working as expected and matches the behavior of the latest on production so I have approved this change, but I have two general comments/questions:

1. There are a lot of warnings/errors about style in the console, should these be addressed at some point or the style/linting updated?
2. When selecting filters (e.g. in the DFR3 viewer), should they stay selected when doing a search? Production clears them out as well when entering text and hitting search so just asking what the better behavior is since I would think filters would stay and it would search the filtered results.

1. Yeah, those should be addressed but if we do plan to upgrade to MUI 5 or even 6 then we can address them all together.
2. Yes, that was the intended behaviour. From what I remember, search is across the database for name, type, id etc. all together where as the filters were meant to be used separately. Ideally we should have search working with the filters but I don't remember why this design choice was made.