Page MenuHomePhabricator

Section Translation: Compare the contents before translating
Open, MediumPublic

Description

As part of the Section translation workflow (T243495), allow users to preview the contents of the section to translate and the contents already present in the target article, to confirm their initial selection.

This is an intermediate step that is the continuation of the initial section selection (T241587) and leads to the translation editor (on desktop: the one-section mode of Content Translation; on mobile: a custom mobile editor).

View this step in prototype for a general overview.

General concept

Once users have selected a section, they can compare the contents in both languages. In this way, they can check what they are going to translate and how that fits in the current contents of the target article. From this point, users can confirm the selection to start translating, or go back to pick a different section.

OverviewLayout diagramLayout detail
Compare contents - Overview.png (768×1 px, 152 KB)
Compare contents - Layout.png (768×1 px, 86 KB)
Compare contents - Layout mocks.png (768×1 px, 347 KB)

As part of the Section translation workflow, users are provided a view to preview the contents before starting the translation:

  • Tabs are provided for the user so view the source section and the whole target article.
    • A placeholder is shown in the target article view to indicate where the translated section will be added.
  • Navigation: users can go back to the section selection menu (T241587), or move through the next/previous section.
  • "Translate this section" option leads users to the translation view to translate the section (Content translation editor on desktop, or the mobile translation editor, when available, on mobile).
    • When scrolling a sticky header will keep the translation action visible.
  • The solution will be responsive to support both mobile and desktop devices.

Below are described in more detail the different pieces supporting this step.

Header

Compare contents - Header.png (768×1 px, 200 KB)
Compare contents - Header responsive.png (768×1 px, 79 KB)
Compare contents - Header Dimensions.png (768×1 px, 98 KB)

Source and Target selector

Compare contents - Source and Target.png (768×1 px, 105 KB)
Compare contents - Source and Target Dimensions.png (768×1 px, 65 KB)

Contents

Compare contents - Contents.png (768×1 px, 226 KB)
Compare contents - Contents Dimensions.png (768×1 px, 162 KB)

Sticky Header

Contents to review can be long. As users get immersed in reviewing these contents it is useful to keep the main actions at hand. A sticky header will be shown to provide easy access as the user scrolls down past the main actions.

Compare contents - Sticky header.png (768×1 px, 192 KB)

Sections already present

Most of the time, users will pick a section that is missing in the target article in the "Pick a section" step (T241587). However, it is possible for them to select an existing section. In those cases, the user will be informed of the implications and provided an option to ignore the section found in case it was mapped incorrectly.

Compare contents - Present section.png (768×1 px, 166 KB)
Compare contents - Present section discard.png (768×1 px, 79 KB)
Compare contents - Present section Measurements.png (768×1 px, 172 KB)

Related Objects

Event Timeline

Pginer-WMF renamed this task from Section Translation: Preview section before translating to Section Translation: Compare the contents before translating.Apr 14 2020, 9:58 AM
Pginer-WMF updated the task description. (Show Details)

Change 606169 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SX Compare Contents: Create component skeleton

https://gerrit.wikimedia.org/r/606169

Change 612369 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SXContentComparor: Add support for present sections

https://gerrit.wikimedia.org/r/612369

Change 612386 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SXContentComparor: Add section navigation

https://gerrit.wikimedia.org/r/612386

Change 606169 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SX Compare Contents: Create component skeleton

https://gerrit.wikimedia.org/r/606169

Change 615222 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SXContentComparator: Add discard section functionality

https://gerrit.wikimedia.org/r/615222

Change 615223 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SXContentComparator: Add new section placeholder for present sections

https://gerrit.wikimedia.org/r/615223

Change 612369 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SXContentComparator: Add support for present sections

https://gerrit.wikimedia.org/r/612369

Change 612386 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SXContentComparator: Add section navigation

https://gerrit.wikimedia.org/r/612386

Change 615222 merged by Nik Gkountas:
[mediawiki/extensions/ContentTranslation@master] SXContentComparator: Add discard section functionality

https://gerrit.wikimedia.org/r/615222

Change 615223 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SXContentComparator: Add new section placeholder for present sections

https://gerrit.wikimedia.org/r/615223

I cannot start a translation in https://sx.wmflabs.org/

See the main page of that wiki for instructions. The big "New Translation" button is not implemented yet. You need to use URL params - an example is given in the main page of that wiki

When I try to follow the example in the testing sever to translate the "Legal status" section of the Moon article, I'm able to view the target article, but the source tab hows blank with a console error:

Screenshot 2020-09-09 at 13.54.01.png (826×1 px, 177 KB)

Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null

at new t (load.php?lang=es&modules=jquery|mw.cx3&skin=vector&version=1m4gn:156)
at load.php?lang=es&modules=jquery|mw.cx3&skin=vector&version=1m4gn:156
at Array.map (<anonymous>)
at load.php?lang=es&modules=jquery|mw.cx3&skin=vector&version=1m4gn:156

When I try to follow the example in the testing sever to translate the "Legal status" section of the Moon article, I'm able to view the target article, but the source tab hows blank with a console error:

Screenshot 2020-09-09 at 13.54.01.png (826×1 px, 177 KB)

Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null

at new t (load.php?lang=es&modules=jquery|mw.cx3&skin=vector&version=1m4gn:156)
at load.php?lang=es&modules=jquery|mw.cx3&skin=vector&version=1m4gn:156
at Array.map (<anonymous>)
at load.php?lang=es&modules=jquery|mw.cx3&skin=vector&version=1m4gn:156

I see the same issue as you.
for testing I've been told by the devs to use this link
https://sx.wmflabs.org/index.php?title=Special%3AContentTranslation&from=en&to=es&sx=true&page=Vlasovite&targettitle=Vlasovite#/sx/content-comparator
and click the Vlasovite article under Expand with new sections

@Pginer-WMF I can't see this section in sx.wmflabs.org, is this not implemented yet (as in, will be in another task) or should be implementedin this task?

image.png (292×1 px, 80 KB)

@Pginer-WMF I can't see this section in sx.wmflabs.org, is this not implemented yet (as in, will be in another task) or should be implementedin this task?

image.png (292×1 px, 80 KB)

Yes. That's covered in T259492: Compare the contents: Show new section placeholder where the new section will be added

For large tickets (most of those starting with "Section Translation: ___" in the title, I was creating sub-tasks to have more specific tickets. The general ones are kept to provide a more holistic overview. As Nik pointed, we may want to keep the large ones in the backlog, until the small ones are completed. Then, the large ones can be useful as a general review.