InstantTranslate: If multi-segment: Highlight different resources in result

In InstantTranslate we so far have segmentation on the server side.

Via regular expressions the segmentation rules from srx (in our file format and segmentation settings) are used to split the segments.

Then the segments are send segmented to the language resources and TM and TermCollection are queried once per segment.

And afterwards the complete text is constructed from the best translations:

If a segment could be translated by a TermCollection, it is taken from there. Else if there is a 100% match from a TM, it is taken from there. Else from the MT.

Since
TRANSLATE-4039: InstantTranslate - Request assigned languageResources in InstantTranslate in the Frontend

we are now doing what the issue says. Thus the construction of the text from the different language resources has to be done in the front-end.

This should be done as follows:

Imagine the translated text would be this:

Überschrift dieses Textes

Dies ist mein Text. Und das ist mein Test. Und dies ist ein weiterer Text.

Then it would be rendered in a div-block like follows. Each segment would be in a span like follows, with a background-color that has the color that is associated with the language resource of which it stems:{}

<div class="translation-result" id="1" data-languageresource-type="mt"><span id="seg1" style="background-color: rgba(0, 128, 0, 0.3);">Überschrift dieses Textes</span>
<br><br><span id="seg2" style="background-color: rgba(0, 0, 255, 0.3);">Dies ist mein Text.</span> <span id="seg3" style="background-color: rgba(255, 255, 0, 0.3);">Und das ist mein Test. </span><span id="seg4" style="background-color: rgba(0, 0, 255, 0.3);">Und dies ist ein weiterer Text.</span></div>

In the UI this would look like this. So with only one result div.

Please mind: In contrast to above screenshot for all MT resources we do not show any back-ground color for the segment, because this should look like the default text, and the highlighted ones like enhancements.

To achieve this, the code should do the following in the UI:

• Querying the back-end by the different resources happens like implemented with TRANSLATE-4039
• As soon as the first result returns, it is evaluted, if it consists of more than one segments.
  • If no, everything happens like implemented with TRANSLATE-4039
  • If yes:
    • All other divs that will contain the results of the other queried language resources are set to hidden, AS SOON AS they return a result (not earlier to show the user, that the request for them is still running)
    • The current one is displayed in the look and feel of the screenshot (so without the language resource name displayed below it; please also do NOT do the bottom border of the div stronger, like the screen shows it)
    • As highlight color the color of the current language resource is used with an opacity of 0.3 (30%)
    • As soon as other language resources return their results to the front-end
      • If they are of type TM: Segments that so far stem from an MT resource AND that are translated in the current language resource result are replaced in the DOM of the current div with the contents of the TM. As is the background-color
      • If they are of type TermCollection: Segments that so far stem from an MT OR TM resource are replaced in the same manner as explained in the previous bullet
      • Each segment has a tool-tip that shows the name and resource type of the used language resource

What happens in case of errors / time outs / no translation found

If single segment:

• if no translation found: area hidden of the resource; no info that nothing is found is shown anywhere. Special case: none of the resources delivers match and no MT assigned (or MT has error): show text in source language in red and info "No translation found"
• If language resource could not be reached: Solution like currently with "manual"-button and explaining text
• If language resource returns an error: Area is shown as before and error displayed as before

If multi-segment 

• one or more of the segments not found for translation: Display source text for that segment(s) with red background opacity 0.3 and tooltip: No translation found.
• If language resource could not be reached: Display same box below the multi-segment box that would be shown with single segment in that case
• If language resource returns an error: Display same box below the multi-segment box that would be shown with single segment in that case

Copying of result

Please make sure, that if multi-segment result is selected via mouse or keyboard and copied, that the format is not copied (background-color), but only the pure text.

Segmentation process in the back-end

So far the segmentation process is running in the back-end. This stays.

Since now we are not only sending one request to the back-end, but multiple, the first request will be doing the segmentation and the others will used its cached result.

The condition, that segmentation is only done, if at least one TM or TermCollection resource is queried, should stay.