Pause/resume for lawnmower by yannik131 · Pull Request #1491 · biigle/core

yannik131 · 2026-06-17T11:17:46Z

Closes #547

yannik131 · 2026-06-18T15:45:44Z

Architectural sketch of what I implemented:

introduce a PlayPause component for the two buttons
annotatorContainer defines
- currentLawnmowerState, which is passed as a prop to annotationModesTab -> playPause
- lawnmowerSaveState (load, save, discard), passed as a prop to annotationCanvas/lawnmower.vue, watcher for changes
data flow is then:
1. user requests change in playPause.vue (emit lawnmowerStateChangeRequested)
2. annotationModesTab.vue re-emits
3. annotatorContainer.vue changes the state if possible and updates both props
4. change is reflected in playPause via the currentLawnmowerState prop, annotationModesTab.vue updates the mode
5. annotationCanvas/lawnmower.vue loads/saves/discards the state (current image, current section) from local storage tied to volume ID
then do the same for label review mode

yannik131 · 2026-06-20T12:43:56Z

@mzur It's working now, but the architecture is not really consistent (mixin/options API for lawnmower, composable for volare). I managed to move the volare-logic from the AnnotatorContainer into the composable and would like to do the same for the lawnmower, but would first like to get some feedback from you regarding the overall structure. I'll mark it ready for review anyways.

Edit: Oh, and also I've run out of AI credits, so I can't use copilot for reviews right now. Since the switch to the new credits-based pricing model a single larger AI code review uses up about 25% of my $2.00 worth of free credits.

Edit 2: I also noticed a bug in the original behaviour that is still present: Focus annotation in volare, filter annotations that keeps the focussed annotation on the screen, remove filter -> wrong annotation is focussed. I will resume development once I get your feedback regarding the structure, though.

mzur · 2026-06-25T12:13:22Z

I'll skip the review until we finished the discussion in the issue. Let me know if I should request an AI review for you here.

yannik131 · 2026-07-28T11:55:40Z

@mzur I don't think volare should be paused when the viewport is changed, that would likely break workflows where users zoom in while in volare. Otherwise this is as we discussed. Let me know what you think about the volare.js structure and I will turn lawnmower.vue into a similar composable.

mzur · 2026-07-29T09:00:19Z

Do you need/want an AI review first?

yannik131 · 2026-07-29T09:34:27Z

@mzur Sure, but I'd also like feedback from you on the composable structure overall. I will use that feedback for the upcoming lawnmower composable.

Copilot

Pull request overview

This PR adds pause/resume behavior to the annotation “cycling” modes (Lawnmower and Volume Label Review/Volare), including persisting/restoring state so users can zoom/pan to inspect details without the modes jumping unpredictably.

Changes:

Replace simple on/off toggles with a Play/Pause UI for Volare and Lawnmower, including “paused at” timestamps.
Persist/restore Lawnmower (viewport/section) and Volare (focused annotation) state via localStorage across pausing and page reloads.
Add plumbing/events between annotationCanvas and annotatorContainer to auto-pause Lawnmower on user viewport changes while avoiding pauses during programmatic moves.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
resources/views/annotations/show/tabs/annotationModes.blade.php	Switch Volare/Lawnmower controls to the new Play/Pause component and display pause timestamps.
resources/views/annotations/show.blade.php	Wire new lawnmower save-state prop and new canvas events for pause/restore coordination.
resources/assets/sass/annotations/sidebar/_main.scss	Add styling for the new “paused at” timestamp text.
resources/assets/js/utils.js	Add `required()` helper for composable argument validation and export it.
resources/assets/js/core/components/powerToggle.vue	Add separate `iconOn`/`iconOff` props and switch icon based on active state.
resources/assets/js/core/components/playPause.vue	Introduce a new Play/Pause button pair component and `PlayPauseState`.
resources/assets/js/annotations/components/annotationModesTab.vue	Add paused modes + timestamps, and emit new `annotation-mode-changed` signals.
resources/assets/js/annotations/components/annotationCanvas/volare.js	New composable to manage Volare cycling + pause/resume persistence.
resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue	Add save/load/discard state for Lawnmower and emit events around programmatic viewport changes.
resources/assets/js/annotations/components/annotationCanvas.vue	Emit `movestart` from the underlying map to support auto-pausing behavior.
resources/assets/js/annotations/annotatorContainer.vue	Integrate new Volare composable, wire pause/resume flows, and add auto-pause-on-viewport-change logic.

Suppressed comments (2)

resources/views/annotations/show/tabs/annotationModes.blade.php:34

Same issue as above: in an in-DOM template, @transitionRequested will be lowercased and the handler may never run. Use a kebab-case listener so it compiles to onTransitionRequested.

                @transitionRequested="onLawnmowerPlayPauseTransitionRequested"

resources/assets/js/annotations/components/annotationModesTab.vue:99

pauseLawnmower() is called without a timestamp (e.g. from updateLawnmowerState and from viewport-change pausing), which makes lawnmowerPausedAtText blank. Default to Date.now() so pauses always record when they happened.

        pauseLawnmower(timestamp) {

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

mzur

This is not a full review, just my take on the composable approach with volare. I like a composable approach like this in general. The main benefit could be that logic can be shared across similar parts of BIIGLE (e.g. image and video annotation tools). All the current mixins that are used more than once are possible candidates for refactoring. Also the mixins of the annotationCanvas and videoScreen could maybe be (partially) merged and reused.

However in the case of volare it "just" moves code from one file to another. It makes the annotatorContainer slightly smaller but also introduces inconsistent architecture now (as the other annotation modes don't use the composable approach). And since the annotation modes are exclusive to the image annotation tool, I don't really see a benefit in making them all composable. It will be mostly refactoring for it's own sake which we should only do with our little resources if there is a real benefit in terms of code complexity.

So in summary I like the composable approach but volare and lawnmower mode may be the wrong features to pilot this. But please feel free to argue your point. We can also discuss this in a VC if you like.

yannik131 · 2026-08-23T17:25:48Z

@mzur I like the composable approach because of the separation of concerns it offers. Decoupling things from the rest of the codebase makes code testable and easier to reason about. This helps other developers to understand the code, including myself in the future. I do agree that the time investment is probably not worth it here. But I will start considering separating code into composables more often from now on and might default to it for new functionality.
I'll leave lawnmower as it is for now. Ready for review.

mzur

The time ("40s ago") should appear immediately if pause is activated. It can show "just now" if the time is <60s. Also it should tick/update (maybe once a minute).

The title of the play buttons should change if the mode is paused (e.g. "continue...").

The title of the pause buttons should change if the mode is paused (e.g. "cancel...").

The title of the inactive pause buttons should explain what it does (save the state so user can resume here later).

This behavior should also be explained in the manual article.

Images can be missing if they were deleted from the volume or a volume filter is active. What happens if a volare/lawnmower state is restored but the image is missing?

Esc doesn't seem to cancel an active volare/lawnmower mode.

Collapsing the sidebar or resizing the browser window (i.e. resizing the map) pauses lawnmower mode but it should not.

mzur · 2026-09-18T07:32:25Z

+                    this.$emit('annotation-mode-changed', newMode);
            }
        },
+        timeAgo(timestamp) {


This looks like it could be a good util method.

mzur · 2026-09-18T07:40:30Z

+                playButtonTitleText="Start cycling through all annotations"
+                stopButtonTitleText="Stop cycling through all annotations 𝗘𝘀𝗰"
+                pauseButtonTitleText="Pause Volare"


The convention is to use kebab-case for attributes.

mzur · 2026-09-18T07:40:38Z

+                playButtonTitleText="Start cycling through image sections"
+                stopButtonTitleText="Stop cycling through image sections 𝗘𝘀𝗰"
+                pauseButtonTitleText="Pause Lawnmower"
+                :state="currentLawnmowerState"


mzur · 2026-09-18T07:43:53Z

+            selectedAnnotations: computed(() => this.selectedAnnotations),
+            focusAnnotationInCanvas: this.focusAnnotation,
+            fitImageInCanvas: (...args) => this.$refs.canvas.fitImage(...args),
+            annotationFilter: this.annotationFilter,


This is usually null, so the volare watcher would not pick up any changes.

Suggested change

annotationFilter: this.annotationFilter,

annotationFilter: computed( () => this.annotationFilter),

mzur · 2026-09-18T07:47:53Z

                // would automatically update when the resolution changes. But we
                // need the old value to compute the new image section in the
                // resolution watcher first!
                this.imageSectionCenter = this.getImageSectionCenter(section);


This comment is stale.

mzur · 2026-09-18T08:00:05Z

+        discardSavedVolareState();
+        resuming = false;
+
+        focussedAnnotationIndex.value = null;


Loading/resuming always focuses on annotation 0 first before switching to the actual saved annotation (after nextTick). Maybe this can be updated to avoid the unneeded focus.

mzur · 2026-09-18T08:02:27Z

+                this.imageSectionCenter = state.center;
+                this.imageSection = state.imageSection;


Does this also work as expected if the state is restored on a resized map (e.g. if the sidebar is now expanded or the window size changed)?

mzur · 2026-09-18T08:07:14Z

+        lawnmowerSaveState: {
+            type: String,
+            required: true
+        }


I'm not sure about this. This prop really acts like a command. Elsewhere this is done with direct method calls on a ref. If we don't want this, maybe this could be a hint that the lawnmower logic should also be moved up to the annotatorContainer which just tells the canvas which image section to show? Maybe migrate lawnmower mode to a composable after all?

mzur · 2026-09-18T08:08:46Z

This file is no longer a canvas mixin but logic of the container. Put it into a "composables" dir?

mzur · 2026-09-18T08:10:49Z

-        focussedAnnotation() {
-            return this.filteredAnnotations[this.focussedAnnotationIndex];
-        },
        isDefaultAnnotationMode() {


This name is now misleading. Since it's only used for the highlight, maybe negate it and call it "should HighlightAnnotationMode", then update the use in the template.

mzur

One more thing: If volare is enabled but the currently focussed annotation disappears because of a filter in the annotations tab, the focussed annotation and viewport is updated correctly. But if the filter is then disabled again, the original annotation is focussed but the viewport does not jump back.

Screencast.From.2026-09-18.10-19-13.webm

yannik131 added 10 commits June 17, 2026 13:17

Fixed lawnmower center section first bug

8abe79b

Added playPause widget

319d081

Wiring of lawnmower states

f2ddc1f

play/pause for lawnmower works

e179513

Renamed play/pause states

5f732cb

More concise naming

3bae58f

Fixed some naming issues

7e8a51d

Fixed renaming issues

e2a6fdc

Unified annotation mode buttons

f67e736

Wait for next tick to resume lawnmower

c9425ba

yannik131 added 12 commits June 18, 2026 17:46

Prefer @ over relative paths

7808884

Fixed wrong lawnmower position after resume

cfd6e25

Function name reflects signal emitted

c45cec0

Restore last lawnmower section, remove unused code

d85ca64

Removed unused code

755071f

Refactored volare into composable

5e3d249

Moved more code to volare component

1f6e235

Implemented load/save for volare

f866ab5

TODO for removing watchers maybe

b27e065

Fixing volare pause/resume bugs

befcb4b

Use ID instead of index for resuming volare

dfc92ad

Fixed linter errors

4dba4c3

yannik131 marked this pull request as ready for review June 20, 2026 12:43

yannik131 requested a review from mzur June 20, 2026 12:44

mzur removed their request for review June 25, 2026 12:12

yannik131 added 2 commits July 17, 2026 12:11

Merge branch 'master' into 547-pause-resume-for-lawnmower

628b63f

trying to pause lawnmower with viewport change

64f02e5

yannik131 added 7 commits July 22, 2026 14:04

Use only a single mode state for paused

95969d6

lawnmower pause/resume

4c45aa8

Pause/resume for lawnmower is now working

bf5985e

Muted text for lawnmower, playPause works for lawnmower

6a4dac9

Volare pause stated muted text

1a001dc

linter fixes, don't overwrite saved state

424ce7d

Undid auto formatting

a12106b

yannik131 requested a review from mzur July 28, 2026 11:55

mzur requested a review from Copilot July 31, 2026 12:20

Copilot started reviewing on behalf of mzur July 31, 2026 12:21 View session

Copilot AI reviewed Jul 31, 2026

View reviewed changes

mzur reviewed Jul 31, 2026

View reviewed changes

Comment thread resources/assets/js/annotations/annotatorContainer.vue Outdated

Comment thread resources/assets/js/annotations/annotatorContainer.vue Outdated

yannik131 added 4 commits August 23, 2026 18:29

kebab-case for vue signals

1d65214

fixed volare mode check

a95884a

Removed todo comment

f4cad92

fixed timestamp typo

3bba13c

yannik131 requested a review from mzur August 23, 2026 18:29

mzur reviewed Sep 18, 2026

View reviewed changes

	annotationFilter: this.annotationFilter,
	annotationFilter: computed( () => this.annotationFilter),

		this.imageSectionCenter = state.center;
		this.imageSection = state.imageSection;

Conversation

yannik131 commented Jun 17, 2026

Uh oh!

yannik131 commented Jun 18, 2026

Uh oh!

yannik131 commented Jun 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mzur commented Jun 25, 2026

Uh oh!

yannik131 commented Jul 28, 2026

Uh oh!

mzur commented Jul 29, 2026

Uh oh!

yannik131 commented Jul 29, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mzur left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

yannik131 commented Aug 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mzur left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mzur left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yannik131 commented Jun 20, 2026 •

edited

Loading

yannik131 commented Aug 23, 2026 •

edited

Loading

mzur left a comment •

edited

Loading