89 Allow the display of tiff files

[ChromaticPanic]

Fixes #89 Solution uses UTIF js from Photopea The advantage over other Tiff libraries is that it is actively maintained. Other libraries have not had any new commits for 5+ years. Photopea is a browser based photo editing software project so using this library may give other benefits in the future if we need to support other image formats.

Modification to loadToCanvas function

• Updated interface to avoid "as Number" type casting
• Cleanup redundant code in bounding box drawing section
• created an if else fork to handle Tiff Image canvas drawing
• extracted common bounding box drawing code outside of image.onload

New decodeTiff function

• uses UTIF js to decodeTiff files

Fixed infinite render loop issues

• Renders down to 8/5s from 445+/5s
• RAM reduction in Chrome 1800 down to 200ish
• Significant Profiler improvement >80%

[ChromaticPanic]

Before fixing the render loop we see the performance consuming a lot of CPU even with 1 jpg loaded 18.9s of CPU on scripts in 19.2s of runtime and we see 400+ renders in 5s

After fixing the render loop we see minimal cpu even with multiple images and switching between jpg and tiff files. 1.4s of CPU on scripts in 29.9s of runtime Only 39 renders in 22s

[Francois-Werbrouck]

@ChromaticPanic Is this in Waiting for review?

[ChromaticPanic]

@ChromaticPanic Is this in Waiting for review?

Yes it is!

[ChromaticPanic]

Before the render loop was fixed, that issue was unnoticeable because a statehook kept flipping back and forth forcing re-renders. But since that was fixed this issue became visible.

@CFIALeronB I actually fixed the first one here #124 commit https://github.com/ai-cfia/nachet-frontend/pull/124/commits/fe5a9e63cbdbe26da5dd0d9be80290ace13b17e0 . The second one is also fixed in the commit right before this one.

Can you checkout branch 123-body-index-refactor-modularization to see if it's fixed on your end too?

I had to untangle / simplify the useEffect dependencies, so might have to wait off on this PR until the other one is done too.

PNG

TIFF

[CFIALeronB]

Perfect! Everything looks good to me now, except for a few build errors I've noticed:

Everything else (Linting, Testing) works as expected

[rngadam]

only one test being run?

[CFIALeronB]

Seems like there is 16 on branch 123-body-index-refactor-modularization:

[ChromaticPanic]

only one test being run?

I think there was only one test in this branch I think I'll have the function modules I extracted from Body fully tested by end of week in #124 There are 16 tests currently

[rngadam]

@ChromaticPanic what are the build errors @CFIALeronB reported relating to?

[ChromaticPanic]

@ChromaticPanic what are the build errors @CFIALeronB reported relating to?

Looks like I need to add more explicit types to the test files

[ChromaticPanic]

Perfect! Everything looks good to me now, except for a few build errors I've noticed:

Issue is fixed in #124 I'll be merging in sequence #89 then #124