Speed up ROI drawing for users

[niksirbi]

Closes #98

This PR implements several improvements in the ROI drawing process:

Major features

• In addition to "closepath" (free-hand polygon drawing), users can now draw rectangular and circular shapes, based on @sannatitus 's feedback. I had to introduce several changes under the hood to make rectangles and circles compatible with our way of storing and handling ROIs. Right after a rectangle or a circle is drawn, I automatically convert it to a "closepath" polygon and save it as for previously allowed shapes. For rectangles, this is accomplished by connecting the 4 corner vertices, as well as 1 vertex at each edge's midpoint. The circles are converted into a regular n-gon, with n depending on the radius (larger circles - more n - "smoother" polygons). Users can still modify the shapes after their creation, by moving each vertex independently of others, deleting redundant vertices (by double-clicking), or moving (translating) the entire shape as a whole. The rectangle shape is now the default tool selected for any new ROI, but other shapes can be freely chosen from the toolbar.
• there is now a "Copy from" button combined with the video-name dropdown. The dropdown lists all videos for which ROIs have been drawn (and are thus stored in the app). The user can select one of these videos and, by clicking on the "Copy from" button, copy them to the currently shown video. This should significantly speed up ROI drawing, since most videos in a project are from a similar perspective. It's much easier to draw the ROIs once, and then copy them to other videos and tweak them. If there are no videos with ROIs to copy from, the button is deactivated.

Minor tweaks

• Before I was storing the ROI's name in the shape's dictionary, within a custom field named "roi_name". I discovered that dash shapes have a built-in property "name", so I now switched to using that one instead of a custom field.
• The above change now allowed me to displace the ROI's name alongside its shape on the video frame.
• The table listing the defined ROIs used to show the beginning of each shape's SVG path, e.g. M23.783,5.092L25.052..., which is not a particularly useful piece of information. I replaced that by showing the shape's area (in px), which is more useful to know. For example, one can compare the area of an ROI in one video vs other videos, to check if they are consistent in drawing (roughly) the same area.
• The above table also used to show a column named "on frame" - i.e. the frame on which the ROI was last drawn/edited. While this is a potentially useful piece of info, and we still save it, I don't think it's particularly useful to know for the user while drawing. This and the previous point also facilitate the next tweak, which is...
• Expanded the screen real-estate taken by the video frame, which makes drawing easier. The size of this area can be further adjusted by the user, via resizing the browser window and using Ctrl (Cmd on Mac) & +/-, to enlarge/shrink, respectively. This way, they can customize the experience depending on their screen size.
• Modified the arrangement of UI elements in the ROI table card, by moving the buttons to he header, and leaving the status alert in the footer (to be symmetric with the video frame card).

The UI now looks like this:

Still TODO

• Test the newly added functionalities, especially the new ROI-related utils which do most of the work under-the-hood
• The utils.py file is now very long and could benefit from some refactoring - i.e. split utilities into separate files, e.g. video_utils.py, roi_utils.py. This can be part of refactoring #56
• The ROI drawing process is now getting more feature-rich, and perhaps is not entirely self-explanatory. It would be useful to have an "ROI drawing manual" in the docs. This may be added here or left as a separate issue.

[codecov-commenter]

Codecov Report

Merging #103 (34404d9) into main (4a7dcbb) will increase coverage by 2.07%.
Report is 2 commits behind head on main.
The diff coverage is 51.11%.

@@            Coverage Diff             @@
##             main     #103      +/-   ##
==========================================
+ Coverage   39.94%   42.01%   +2.07%     
==========================================
  Files          12       13       +1     
  Lines         691      814     +123     
==========================================
+ Hits          276      342      +66     
- Misses        415      472      +57     

Files	Coverage Δ
wazp/pages/02_ROI.py	100.00% <100.00%> (ø)
wazp/datasets.py	86.04% <86.04%> (ø)
wazp/callbacks/roi.py	45.56% <54.16%> (+1.89%)	⬆️
wazp/utils.py	21.53% <14.03%> (-3.16%)	⬇️

📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today!