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?

In T207203#4672680, @Samwilson wrote:

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.

In T207203#4672603, @Mooeypoo wrote:

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.

In T207203#4672603, @Mooeypoo wrote:

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.

In T207203#4672680, @Samwilson wrote:

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.

In T207203#4682186, @Mooeypoo wrote:

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.

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

In T207203#4741269, @Prtksxna wrote:

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.

In T207203#4744986, @Niharika wrote:

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.

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.