Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Subject viewer changes size during classification when 'limit subject height' is enabled #6275

Open
eatyourgreens opened this issue Sep 10, 2024 · 5 comments · May be fixed by #6276
Open

Subject viewer changes size during classification when 'limit subject height' is enabled #6275

eatyourgreens opened this issue Sep 10, 2024 · 5 comments · May be fixed by #6276

Comments

@eatyourgreens
Copy link
Contributor

eatyourgreens commented Sep 10, 2024 •
edited
Loading

FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):

FEM_imagesizechange_Firefox.mov

Originally posted by @snblickhan in #6271 (comment)

EDIT: after some playing around in the project builder, I was able to reproduce this by checking the 'limit subject height' box for a workflow (#6275 (comment).) Checking that box styles the image with max-height, which means the image height can vary during a workflow, as long as it never exceeds the maximum. Styling the image with height fixes this bug.
@eatyourgreens
Copy link
Contributor Author

FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):

This is caused by the viewer layout changing when you move from one task to another (which is weird because the viewer styling is supposed to be independent of the task.) Watch how grid-template-columns changes here. In particular, the width of the first column changes from 90px (drawing task) to 75px (question task.) The subject controls are switching into small-screen layout for some reason.

Screen.Recording.2024-09-07.at.11.38.33.mov

The height of the task navigation buttons, and the width of the subject controls (play button etc.) change from the drawing task to the question task. Design and layout should be consistent!

EDIT: the drawing tasks (drawing and transcription) modify the subject viewer by adding and removing an SVG <rect> that acts as the drawing canvas. The layout is changing when that rectangle is removed, so maybe that is causing the bug?

Instead of adding and removing that rectangle, it might be better to deactivate it by adding the inert attribute in modern browsers.

@eatyourgreens
Copy link
Contributor Author

Sorry, something else I've noticed in that Science Scribbler video. On the question task, the pencil button is active, even though drawing is disabled.

The layout reflow bug is also specific to Science Scribbler. I have a workflow with two drawing tasks followed by a question task:
https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3370?env=staging

That workflow does not reflow the layout when you go from the drawing tasks to the question task.

@eatyourgreens
Copy link
Contributor Author

the drawing tasks (drawing and transcription) modify the subject viewer by adding and removing an SVG that acts as the drawing canvas. The layout is changing when that rectangle is removed, so maybe that is causing the bug?

Instead of adding and removing that rectangle, it might be better to deactivate it by adding the inert attribute in modern browsers.

I played around with this in a local branch. The sizing bug is still there even if you don't remove the drawing canvas for question tasks.

@eatyourgreens eatyourgreens changed the title Science Scribbler: subject viewer changes size during classification Science Scribbler: subject viewer changes size during classification when 'limit subject height' is enabled Sep 10, 2024
@eatyourgreens eatyourgreens changed the title Science Scribbler: subject viewer changes size during classification when 'limit subject height' is enabled Subject viewer changes size during classification when 'limit subject height' is enabled Sep 10, 2024
@eatyourgreens
Copy link
Contributor Author

eatyourgreens commented Sep 10, 2024 •
edited
Loading

I can reproduce this bug on my staging workflow (single image viewer) if I tick the lab checkbox that limits the subject height.
https://localhost:8080/?project=908&workflow=3832

Screen.Recording.2024-09-10.at.13.22.18.mov

https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3832?env=staging

Screen.Recording.2024-09-10.at.13.28.28.mov

@eatyourgreens eatyourgreens linked a pull request Sep 10, 2024 that will close this issue
Open
12 tasks
@eatyourgreens
Copy link
Contributor Author

Fixed by styling the image with height, not max-height, in #6276.

This was referenced Sep 11, 2024
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(classifier): proportional height for subject images eatyourgreens/front-end-monorepo
1 participant
@eatyourgreens