Page MenuHomePhabricator

Image preview functionality
Closed, ResolvedPublic5 Story Points

Description

Value proposition (why do we need to do this)?

As a user I want to be able to preview the translated SVG before I upload it to Commons so I can be sure it renders fine.

Functionality/software changes

  • The image by default shows the labels in the language chosen by the user in the 'From' column (or default if none picked)
  • When a user adds a translation and focuses out of the input box and the input contains some translation (not blank), the label in the image changes to the added translation. Note that the preview is not after every added character but after every completed label to reduce the number of roundtrips we need to do for rendering the SVG.

User interface changes

Does this need QA?

Yes.

Event Timeline

Niharika triaged this task as Medium priority.Oct 16 2018, 6:44 PM
Niharika created this task.
Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptOct 16 2018, 6:44 PM
Niharika updated the task description. (Show Details)Oct 16 2018, 7:18 PM
Niharika added subscribers: aezell, Samwilson, Mooeypoo, MaxSem.

I wrote in the spec that the preview rendering happens after a label has been completely translated instead of every character being entered.

Question for @Mooeypoo @Samwilson @aezell @MaxSem Is this ideal or can we do rendering after every character input? What about if we do rendering after the user has stopped typing for a couple seconds or more (like on other websites)?
Also about the focus on the label - how much work do we reckon that is?

Our current implementation plan is that all SVG reading and writing happens in the back end. If you wanted to render a preview every character, that is a LOT of round-trips to the server and many, many unused files laying around. That leads me to say that I don't think it's feasible.

We could move the SVG parsing and previewing into the client-side (JavaScript) which would save all those server round trips. We decided against this as we would have to write the parsing code from scratch and introduce a library dependency. That is a lot of work and would be fraught with learning what we don't know about parsing SVGs with JS.

Given that @MaxSem was able to incorporate the older PHP SVG parsing code in a matter of a couple of days, I think this approach has borne the fruit of speed we'd hoped for.

I'll leave it to someone else to answer about focusing the label.

@aezell To clarify, you think preview after each label has been completely translated is more feasible, correct?
I'm not in favor of doing the preview in JS because that would could mean that the JS preview doesn't match with the PHP preview and the user ends up uploading something they didn't intend to.

@Niharika Yes, I think per-label is much more feasible. If we build toward that ideal and we find performance issues, we can back off but I wouldn't anticipate that.

I agree with @aezell's analysis.

Also, we've talked a bit about this, but I'm not sure if it was captured in a ticket -- the "effect" that's happening in the prototype (highlighting the words that were changed) will likely be very difficult to add. If anything, we'll need to investigate how to do that, or remove that expectation.

I agree that previewing the SVG when blurring a changed translation input sounds best (also when changing the source or destination languages too).

Although I think also doing it after a pause of 3 seconds or something could be good too (this wouldn't really be a big change, and could be looked into down the track if we wanted to).

@aezell one minor point: there won't be lots of cached files lying around, because we'll generate the new SVG, send it to the client, who will add it to the DOM, and nothing at any stage needs to get written to a filesystem.

Does this ticket include adding any indication that the SVG is being refreshed? e.g. a progress bar or whatnot?

Does this ticket include adding any indication that the SVG is being refreshed? e.g. a progress bar or whatnot?

Nope, that will be a new ticket after @Prtksxna has completed user testing on the progress bar.

@Samwilson Thanks for clarifying that about the files. I wasn't sure if there'd be SVGs or PNGs lying around.

Niharika updated the task description. (Show Details)Oct 17 2018, 3:54 PM

Also, we've talked a bit about this, but I'm not sure if it was captured in a ticket -- the "effect" that's happening in the prototype (highlighting the words that were changed) will likely be very difficult to add. If anything, we'll need to investigate how to do that, or remove that expectation.

I removed the highlighting effect from this ticket.

Also, we've talked a bit about this, but I'm not sure if it was captured in a ticket -- the "effect" that's happening in the prototype (highlighting the words that were changed) will likely be very difficult to add. If anything, we'll need to investigate how to do that, or remove that expectation.

I agree with @Niharika, we can drop this for now.

Does this ticket include adding any indication that the SVG is being refreshed? e.g. a progress bar or whatnot?

Just to clarify you mean a progress bar for loading the SVG itself (and not the progress of the translation in general), right?

The reloading of the SVG will be round tripping from the server. It should be quick, but we will be asking the server for the new svg output each time with Ajax, so there might be a need for a loading animation of the fetching takes a noticeable amount of time.

It should, theoretically, be quick.

The reloading of the SVG will be round tripping from the server. It should be quick, but we will be asking the server for the new svg output each time with Ajax, so there might be a need for a loading animation of the fetching takes a noticeable amount of time.

Understood, and we'll keep showing the previous image (doesn't help to hide or obscure it) while we load the current one. I'll come up with designs for this.

Niharika set the point value for this task to 5.Nov 7 2018, 12:17 AM
Niharika moved this task from To be estimated/discussed to Estimated on the Community-Tech board.

Is it ok to have an indeterminate progress bar below the image while it updates. Adding anything on top of the image might obscure part of what the person is translating โ€” https://codepen.io/anon/pen/WYoVNy

Is it ok to have an indeterminate progress bar below the image while it updates. Adding anything on top of the image might obscure part of what the person is translating โ€” https://codepen.io/anon/pen/WYoVNy

I like it. We should make this into a separate ticket though. We can discuss there whether this specific design is feasible to implement or not.

I like it. We should make this into a separate ticket though. We can discuss there whether this specific design is feasible to implement or not.

Sure! Let's discuss on T209672: Show loading indicator when fetching a new version of the image.

Samwilson moved this task from Ready to In Development on the Community-Tech-Sprint board.

WIP PR: https://github.com/wikimedia/svgtranslate/pull/42

Is mostly working, but still shall be polished maybe.

This is ready for code review.

Famous last words, but: this is now ready for review. :)

Staging site updated.

I though this change had introduced a bug, because I first tested with https://tools.wmflabs.org/svgtranslate-test/Tywyn_Wharf_layout_1964_deutsch.svg and got a "Undefined index: text5998" error from SvgFile.php (line 456).

However, it seems to work on other images like https://tools.wmflabs.org/svgtranslate-test/File:100_Years_War_France_1435.svg and (the enormous) https://tools.wmflabs.org/svgtranslate-test/File:Strategyprocess_chart_pl.svg

So I thin this is ready for QA.

Niharika closed this task as Resolved.Jan 16 2019, 1:38 PM
Niharika moved this task from QA to Q2 2018-19 on the Community-Tech-Sprint board.

This looks good to me. I filed a bug - T213669: [BUG] Fonts missing for some languages on SVG Translate tool. I'll be able to test more once that's fixed.

Niharika moved this task from In progress to Done on the SVG Translate Tool board.Jan 17 2019, 3:22 AM