Feature/compact scoreboard

[Benyeemin]

UI enhancements for the competition viewer, focusing on scalability for larger runs.

Changes

New Viewer Components

The following components are implemented and can be selected in the viewer (not replacing the original components by default):

• Compact Team Viewer: Bottom component dynamically fitting many users on the screen. The original team score viewer has problems showing all the players in larger competitions.
• Scoreboard: Side component ranking the users by their total scores (also shown). It's made to fit as many users as possible while being readable.
• Compact Score Graph: Side component replacing the Task Type Score graph, which is unreadable for too many users. Functionally similar, also showing colored bars composed out of scores for individual task types for each user.
• Recent Submissions: Since the compact team viewer doesn't have space for showing the player submissions, this side component displays a list of the most recent submissions showing the submitting user, their correctness, and timestamp (from the start of the task if the task is still running).

Viewer Layout Presets

To help with setting up a layout, the viewer now has the option to select a preset (next to the component selection button), instead of manually changing each component. Selecting a preset changes each component to the one specified by it.

Error Dialog Compilation Flag

Added a showErrorPopups boolean to the environment and environment.prod configurations. This flag controls whether the ErrorDialogService displays the error passed to it or only logs it into the browser console. Since the error popups block the screen of the viewer and there are errors during normal runs of the competitions, this behavior is not desirable for the production environment.

[sauterl]

Hi @Benyeemin

First of all, thank you for your work and effort you put into the new viewer.
I do like the idea of a more flexible setup.

There are some minor changes I'd like you to do ahead of merging. Since I do not have the opportunity to actually run DRES properly, I simply assume that it does work as intended.

Could you please also add a couple of screenshots to this MR, such that it is clear what happens from a user's perspective? Those screenshots then could be passed on to the wiki. Speaking of which: Do you plan to update the wiki page accordingly?

[Benyeemin]

Thank you for the review!

I have updated the code with the requested changes. Here are also some screenshots of the viewer and the layout preset dropdown.

• Scoreboard on the left, Recent Submissions on the right, and Compact Team Viewer as the bottom component:

• Recent Submissions replaced by the Compact Score Graph:

• Preset dropdown shown:

As to the wiki page, from what I can see it could be added to the Run Management section, but that contains only one sentence (unless I am missing something). To me, explaining the possible actions in the admin panel is much more relevant (since it's much less intuitive), but that part is also missing. I can definitely update the page, but shouldn't the other components that are missing also be added in that case (I can definitely try to update those too if needed)?

[Benyeemin]

I am sorry, I didn't see the last change request, so I fixed it in the last commit.

[sauterl]

Thank you for the quick reaction to the review. I have seen some screenshots before and am glad that you provided some here.

Again, thanks for your work, this looks good to me.