[front] feat: display voting right on vouch page

[sigmike]

Related issue: #1061

You most likely want to change the wording, and maybe the design.

[sigmike]

I tried to test that the value is correctly displayed as a percentage but I failed. I could not make the interpolated value rendered in the test, even following the instructions on https://react.i18next.com/misc/testing. It would be nice to be able to use the English translations in some tests, or at least verify the values passed as interpolation, but it's not very important.

Another way to test it would be to write a function in a module that takes t as argument and mock it, but it's probably not worth the hassle.

[GresilleSiffle]

I'd suggest to not display the user's voting right at the end of the page, as this is a metric the users may want to see and read quickly.

Because the page height is dynamic, if the lists of vouchers grow the voting right will be pushed down even further. This is not a problem on Desktop as the information may be directly displayed on the screen with high resolutions, this will not be the case for mobile user.

To make the voting right very accessible, we can display it right at the beginning, horizontally aligned with the voucher form. This form doesn't need 100 % horizontal space. We can also display it with a huge font size and even completely remove the explanation text. A circular interrogation mark icon, next to the voting right could display a dialog box with more information, as this is an information you don't need to see again once if you have read it.

+-----------------------------------------------------------+------------------+
|  By vouching for other users...                           |             (?)  |
|  [Username *]  [I VOUCH FOR THIS USER]                    | HUGE NUMBER HERE |
+-----------------------------------------------------------+------------------+

--- given and received vouchers lists ---

If we want to push it even further, the voting right widget can list all actions required to acquire more voting rights and display a green or grey status icon depending on if yes or no these conditions are fulfilled. Example:

Voting right (?) 

                            :grey thumb down: [trusted email address]
76 %                        :green thumb up: [vouched by users]

This can reduce a lot the amount of text, makes it clear that actions can be taken, and enumerates precisely which actions are available

[GresilleSiffle]

Here is a dummy image to see how the grid can look like (without title, help icon, or action, simply proportions).

The objective is to achieve:

• minimal textual explanations, only layout, icons, and title
• high visibility
• no scroll required

[GresilleSiffle]

Voting right (?) 

                      :grey thumb down: [trusted email address]
LOW                   :grey thumb down: [vouched by users]

Voting right (?) 

                         :grey thumb down: [trusted email address]
MEDIUM                   :green thumb up: [vouched by users]

Voting right (?) 

                       :green thumb up: [trusted email address]
HIGH                   :green thumb up: [vouched by users]

Green thumb up could be a TaskAltIcon.

Grey thumb down could be a RadioButtonUncheckedIcon.

[sigmike]

I made the changes:

[sigmike]

I moved the voting right description tooltip into a dialog and added the note about the public dataset (https://github.com/tournesol-app/tournesol/issues/1071#issuecomment-1268239920).

[GresilleSiffle]

Thank you @sigmike for using a dialog box, it will allow us to write more text without overloading the UI.

I think you can try to use the component <DialogBox> located in src/components. It has nice title banner and a close button already included.

[sigmike]

@GresilleSiffle the DialogBox component seems pretty specific, it's only able to display a list of paragraphs. It's perfect for the current dialog here, but if we want to change the content of this dialog later (for example add an explanation for the icons with the icons, add buttons for more info, etc.), we will either have to make DialogBox much more complex (like a dialog engine or something), or get rid of it and switch back to a custom dialog.

Still, having a common design for the dialog boxes would be nice. What do you you think about having a component that takes a title and children, and just renders a dialog with the right header and puts the children in the dialog content? DialogBox and the voting right dialog would both use it.

[GresilleSiffle]

It's true, the current <DialogBox> has been used for only one case now and is able to display only a lists of paragraphs which is quite limiting.

If it works for the current PR, I'd suggest to use the <DialogBox> as is for now. Then to rework it in a second PR. As you said, we can have a component taking a title and a children, that's a good idea.

[sigmike]

Actually DialogBox is already not compatible with the current dialog because I used the Trans component to render the translation with line breaks, and DialogBox only accept strings. It can easily be fixed by splitting the translation into multiple keys though.

But since the wordings of this whole PR will be changed to talk about "trust score" instead of "voting right", I'll wait for this new wording to be decided.

[GresilleSiffle]

Hello @aidanjungo @lfaucon @lenhoanglnh @aidanjungo @sigmike

Now that the trust scores are computed by the algorithm, should we consider this PR unlocked? Or do we want to wait for the trust scores to be used by the back end before?

Also, since we want to display these scores as low, medium or high, what scales of trust score are considered low, medium and high?

For instance we could have this.

• [0.0 ; 0.39[ for low
• [0.4 ; 0.69[ for medium
• [0.7 ; 1.0] for high

[amatissart]

For instance we could have this.

• [0.0 ; 0.39[ for low
• [0.4 ; 0.69[ for medium
• [0.7 ; 1.0] for high

My 2 cents: I think the threshold between low and medium should be lower.
For example, with a threshold at 0.2, a non-pretrusted user could reach "medium" after receiving 2 or 3 vouchers in most cases. Then, it would be more encouraging for them to get/give more vouchers, instead of being stuck at "low" for a long time.

[lfaucon]

Hello @aidanjungo @lfaucon @lenhoanglnh @aidanjungo @sigmike

Now that the trust scores are computed by the algorithm, should we consider this PR unlocked? Or do we want to wait for the trust scores to be used by the back end before?

Yes! Let's consider it unlocked.

Also, since we want to display these scores as low, medium or high, what scales of trust score are considered low, medium and high?

For instance we could have this.

• [0.0 ; 0.39[ for low
• [0.4 ; 0.69[ for medium
• [0.7 ; 1.0] for high

I propose

[0; 0.1[ for low ------------> No efforts
[0.1; 0.5[ for medium -------> Some effort made, received a few vouch
[0.5, 1.0] for high ---------> Great efforts, either lots of vouches or certified email

(agreed in vocal chat with @amatissart, weakly debated by @aidanjungo)

[sigmike]

I made the changes.

There are still a few places where "voting right" is used, but I'm not sure whether you want to change them nor how:

• https://github.com/tournesol-app/tournesol/blob/main/frontend/public/locales/en/translation.json#L239 (not sure this one is about the trust score though)
• https://github.com/tournesol-app/tournesol/blob/main/frontend/public/locales/en/translation.json#L354-L355
• https://github.com/tournesol-app/tournesol/blob/main/frontend/public/locales/en/translation.json#L507

Screenshots:

The new dialog:

[GresilleSiffle]

Thanks for the work! I'll have a final look this afternoon so we can merge soon.