Transcriptions in the new sentence design

[trang]

This PR implements the transcriptions in the new sentence design.

For the major part, it works the same as in the old design.

• Transcriptions are displayed in grey below the sentence (or translation), except furigana which works a bit differently and is displayed on the sentence itself.
• If the transcription is generated by a script that is prone to mistakes, a warning icon is displayed in front of the transcription.
• When a transcription has a warning icon, it is not displayed by default. But enabling the option "Always show transcriptions and alternate script" in the Settings will make these transcriptions displayed all the time.
• The permissions on editing transcriptions remain the same:
  • Every contributors can edit transcriptions of their own sentences.
  • Advanced contributors can edit unreviewed transcriptions of other people's sentences.
  • Advanced contributors can re-edit transcriptions as long as the sentence owner didn't edit the transcriptions themselves.
  • Corpus maintainers can edit any transcription.

Things that changed

• There were various custom icons used to identify the type of transcription. I felt it was a bit too complicated and used a more generic icon (the subdirectory_arrow_right material icon). This makes Change the colors of the "editable transcription" icon. (Reverse the colors.) #952 obsolete.
• The hidden unreviewed transcriptions are displayed when expanding the sentence menu rather than by clicking some transcription button in the sentence menu.
  • The transcription icon would have been part of the hidden icons in the menu otherwise. Instead of having to expand the menu then click this transcription icon, I figured we could just display the hidden transcription directly after clicking the "Expand menu" icon.
• On the search page, when the main sentence has furigana, the furigana will always be displayed on a cloned sentence below the actual sentence. This is a temporary solution for Blended furigana hides search results highlighting #1087.
• When a transcription could not be saved, an error message is displayed in red below the text input.
• The warning tooltips are displayed when hovering over the transcription rather than when hovering over the warning icon.
  • There was a bit of redundancy between the info tooltip (on the transcription) and the warning tooltip (on the warning icon), so I just factorized it into the info tooltip.

Todo for another time

• Find a long term solution for Blended furigana hides search results highlighting #1087, to make it possible to have search highlight and furigana at the same time.
• Non-authenticated users currently still have no way to see unreviewed transcriptions. They used to be able to reveal these transcriptions by clicking the transcription icon in the sentence menu. I'm still thinking of what is the best way to integrate this in the new design.

[jiru]

I’m very happy about that! 🎉

I havn't reviewed the code yet so I'll just comment on the visible part first.

Transcriptions are displayed in grey below the sentence (or translation), except furigana which works a bit differently and is displayed on the sentence itself.

It looks like your implementation is a little bit different. Consider a Japanese sentence with reviewed furigana. I have the option "Always show transcriptions" turned on. I go on the sentence page. In the old design, the furigana appears on the top of the sentence. In the new design, it appears below.

Another problem: when the furigana is on the top, I can’t see figure out how to edit the transcription.

There were various custom icons used to identify the type of transcription. I felt it was a bit too complicated and used a more generic icon (the subdirectory_arrow_right material icon). This makes #952 obsolete.

I think it’s okay. I realized in UX test 3 that some of these icons needed to be changed anyway.

Non-authenticated users currently still have no way to see unreviewed transcriptions

That would probably annoy learners of Japanese who don’t have account.

The transcriptions button on the right are easily seen as belonging to a single group. It is not very intuitive which button is acting on what. Probably gray background on hover makes it even more non intuitive. I guess it’s a similar feeling to what agrodet mentioned about eye-matching the (i) icon with the sentence text.

I have no idea right now on how to improve that but I’ll think about it.

I think I would look more consistent if the transcription text (if reviewed) is aligned with the sentence text.

[trang]

It looks like your implementation is a little bit different. Consider a Japanese sentence with reviewed furigana. I have the option "Always show transcriptions" turned on. I go on the sentence page. In the old design, the furigana appears on the top of the sentence. In the new design, it appears below.

This should be fixed.

The transcriptions button on the right are easily seen as belonging to a single group.

The best solution I have for this is to combine the editing of the transcription with the editing of the sentence. I had already considered doing it since the beginning but it complexifies the "Edit" feature so I was a bit reluctant to go for it. But I also really don't like having these extra buttons next to the transcription text.

One consequence is that it's no longer possible to edit the transcriptions of translations. I think users will be okay with that. They cannot edit the translations text so it shouldn't feel too annoying that they can no longer edit the transcriptions of translations. They probably rarely did it anyway.

One other consequence is that it takes more steps to mark a transcription as reviewed. It requires to first click on the "Edit" button then click on the check icon next to the transcription in the sentence form. But I'd rather go for a longer term solution here rather than try to squeeze one more button in the sentence component view. The ideal solution, I think, would be to have page "Review transcriptions" where people can efficiently proofread transcriptions.

My implementation does not take into account yet that there can be several editable transcriptions for a same sentence. It will probably have to be implemented as part of #2189.

Non-authenticated users currently still have no way to see unreviewed transcriptions

I have added a button for non-authenticated users. For lack of a better idea, I reused the same button as for expanding or collapsing the sentence menu.

I think I would look more consistent if the transcription text (if reviewed) is aligned with the sentence text.

This should be fixed.

[jiru]

Good job! I think you solved the buttons problem in a smart way. 😸

I’m still commenting the visible part only.

Problem: After I click the review button of a transcription, the tooltip of that transcription says that it has been generated by a piece of software. Only after I reload the page, the tooltip correctly says "last edited...".

Problem: On a Japanese sentence, I click on the edit button, I modify both the sentence text and the transcription in a way that makes the transcription invalid. I click save, the sentence is saved, but the transcription isn’t saved and the edition box stays open, showing the autogenerated transcription. Instead, it should show me an error and prefill the transcription field with what I last entered.

By the way, do we want to allow editing both sentence and transcription? I can imagine a scenario when the autogenerated transcription is known to be wrong and the user wants to both edit the sentence and the transcription to avoid fixing every single place the autogenerated transcription would be wrong after editing the sentence. Your current implementation allows that, which I think is great.

I have added a button for non-authenticated users. For lack of a better idea, I reused the same button as for expanding or collapsing the sentence menu.

I think it’s good enough. 👍 On a side note, I think this change may make the "always show transcriptions" setting less useful, because people could now quickly show all transcriptions on a page by clicking on "expand all menus for all sentences". Since this "expanded state" is remembered across pages, it could almost replace the "always show transcriptions" setting. I am not sure we want users to use the "expand" feature in this way though.

[jiru]

The position of the tooltips feels a bit off on this sentence. The tooltip over the simplified characters is right on the middle of the text, however on the pinyin it’s off on the right. Since the pinyin spans on two lines, the tooltip is positioned on the center of the card, even though there is quite some blank on the right.

[trang]

I fixed the two problems you mentioned.

By the way, do we want to allow editing both sentence and transcription?

Yes, we definitely want to allow it. Editing the transcription is a way to mark it as reviewed.

• If I edit the sentence but not the transcription → the transcription is auto-generated to match the new sentence text and it will not be marked as reviewed.
• If I edit the sentence and the transcription → the transcription is saved and marked as reviewed.

This way of marking the transcription as reviewed is not necessarily ideal. If I make significant changes on the sentence, I may want to first get the auto-generated transcription and then apply the necessary fixes on top of it. But that can be an improvement for another time.

On a side note, I think this change may make the "always show transcriptions" setting less useful, because people could now quickly show all transcriptions on a page by clicking on "expand all menus for all sentences". Since this "expanded state" is remembered across pages, it could almost replace the "always show transcriptions" setting. I am not sure we want users to use the "expand" feature in this way though.

It's still a bit too early to tell but I think I wouldn't be against using the "expand" feature in this way.

The position of the tooltips feels a bit off on this sentence.

I changed the position of the tooltip to be above instead of below the transcription.

[jiru]

Could you make PinyinHelper and TranscriptionsHelper use your new PinyinTrait and FuriganaTrait so that we avoid keeping duplicate code?

[jiru]

Thanks for the quick update, Trang. Please have a look at my new comments. 👆

I think your implementation is feature-complete, except that the detailed error messages are not displayed when an invalid transcription is submitted. I think these detailed error messages are quite necessary because a number of autogenerated transcriptions are invalid already (in particular Japanese sentences that include numbers). It means an error can be produced just by clicking on the "Mark as reviewed" button.

[trang]

The comments have been addressed 🙂

[jiru]

Thank you, Trang! 👍
I left a few other comments. We are almost there! ☺️

[jiru]

Thanks for the update, Trang. I think the error handling part may be improved a bit but I’ll merge it now so that UI translators can start working already. We can continue to work on it in the dev branch.