zooniverse / front-end-monorepo

A rebuild of the front-end for zooniverse.org
https://www.zooniverse.org
Apache License 2.0
104 stars 30 forks source link

Transcription Task modal is obscuring text being transcribed #2233

Closed snblickhan closed 2 years ago

snblickhan commented 3 years ago

FEM Transcription Task

Is your feature request related to a problem? Please describe.

Users on Beyond Borders are reporting (see this Talk thread) that the transcription task modal consistently obscures the text they're trying to transcribe. This was a similar report from ASM, though they note that it is nice that they can actually move the box around (an improvement from the beta version!).

Describe the solution you'd like

The modal should pop up below the placement of both dots. Whatever our current metric is for placement, we should increase it.

Describe alternatives you've considered

None

Additional context

This was a request from the ASM days, so it may be that whatever we put in place to address that wasn't enough. I think it's worse on projects with closely-spaced lines. For example, it's not that common on the Davy Notebooks Project, but I just tried a few pages on Beyond Borders and had to adjust every single modal because it consistently covered up the text I was trying to transcribe.

snblickhan commented 3 years ago

Additional information/context from a volunteer (via DM):

On the much belabored Transcription Box location in the Maine Land Document project, I've been trying to figure out how the placement is done by the software. Frankly, it makes no sense. Clearly, the box placement is related to the transcription line that it belongs to. However, there is no consistency whatsoever in that relationship that I can determine. It seems that, typically, the top of the box is below the line enough to recognize descenders and some punctuation - but only in the first few lines of a transcription (full page, 40-60 or more lines of text). It then shifts to just barely below the line and then could be creeping toward and past the line a pixel width per line or possibly be stable for a few lines before it moves up. At the bottom of the page, it often is covering half the line or more (on my monitor at least).

Now, I'm aware that there are many intermediate factors betwen what is planned and what is seen in this type of graphic interface. And different monitors (and hopefully to a lesser extent browsers and OSs) play a part. BUT, the location should consistent relative to every transcription line and not variable as it is. Then, one could adjust to however it appears on their set up. Now, there is no possible adjustment that will work for an entire document other than moving the box away from the transcription line.

eatyourgreens commented 2 years ago

Would something like this be preferable? This popup opened halfway off the bottom of the browser viewport, so I dragged it up into roughly the middle of the screen. It seems like it should be possible to write an algorithm that figures out the box position based on the position of the green SVG line and the viewport boundaries.

Screenshot of a page transcription, with a green line in progress towards the bottom of the page and a text input open in a modal about halfway up the screen, above and to the right of the text being transcribed.
snblickhan commented 2 years ago

Really like the idea of including the viewport boundaries in the settings, too -- a modal that appears partially offscreen isn't very useful at all. Nice idea.

I think the main thing I've gleaned from volunteer feedback on this issue is that we need to take both endpoints into consideration when it comes to the SVG line. It seems like the current settings likely consider the first point, as the transcription modal rarely covers the starting point of the line, but don't consider the second, since the modal often covers the end of the line of text. This becomes particularly annoying if the writer has a downward slope to their hand (which is very common).

snblickhan commented 2 years ago

FYI there are reported issues recently of the transcription box popping up OUTSIDE the viewport due to misplaced lines being pulled very very far to the edge... yeesh. Another good reason to explore your suggested viewport option. https://www.zooniverse.org/projects/mariaedgeworthletters/maria-edgeworth-letters/talk/4462/2474880?comment=4057579&page=1

eatyourgreens commented 2 years ago

The current code computes the mid-point of the green line, then tries to place the top left corner of the popup there. 🤔 https://github.com/zooniverse/front-end-monorepo/blob/605751fafe413da614d1c5e9677676249b2fbbdb/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/helpers/getDefaultPosition/getDefaultPosition.js#L22-L23

eatyourgreens commented 2 years ago

FYI there are reported issues recently of the transcription box popping up OUTSIDE the viewport due to misplaced lines being pulled very very far to the edge... yeesh. Another good reason to explore your suggested viewport option. https://www.zooniverse.org/projects/mariaedgeworthletters/maria-edgeworth-letters/talk/4462/2474880?comment=4057579&page=1

That's interesting, and useful to know. It must be using coordinates on the page itself, which includes any areas that need to be scrolled into view.

eatyourgreens commented 2 years ago

@snblickhan I've got a small adjustment to the position, which pushes the box towards the middle of the visible window when the line is towards the bottom of the screen. It's a very quick change, so can't be guaranteed to respond to every possible position of the transcribed lines, but I can open a PR. It looks like this, in the storybook, when the transcribed line is at the bottom of the window.

Screenshot of the transcription task, with a purple line at the bottom of the window and the text task popup positioned toward the centre of the visible window area.
eatyourgreens commented 2 years ago

Here's Maria Edgeworth Letters on my PR branch. The popup opened as shown. I didn't need to drag it up into place.

Screenshot of a letter from Maria Edgeworth Letters. The active line is towards the very bottom of the window and the text task popup is above it, more towards the centre of the viewport.
eatyourgreens commented 2 years ago

3320 is merged now. I'm not sure whether to close this.

eatyourgreens commented 2 years ago

I'm still seeing the bottom of the popup obscure the text on some Beyond Borders subjects, so I'll leave this open.

Beyond Borders: Coll. 60 and Coll. 26.

Screenshot of the transcription tools with a Beyond Borders page. The transcribed line is about halfway down the page. The bottom of the open transcription popup covers half of the text that's being transcribed.