Audio workspace: automatically select newly created interval (#11013)

<!-- Raise an issue to propose your change
(https://github.com/cvat-ai/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution guide](https://docs.cvat.ai/docs/contributing/).
-->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->
Currently, after drawing interval via "Draw" button, double click no
longer plays it. It is perceived as a bug and not convenient. The cause
is that the audio workspace stays in the "Draw" mode which forbids this
and some other actions.

This PR implements the following changes.
When an audio region is added by any means (draw/extend/record) it
automatically:
1. Changes the mode to "Cursor". This effectively resolves the
aforementioned bug. Also, makes all similar functions available right
away.

NOTE: This changes the existing behavior of the audio canvas where one
was able to select "Draw" mode and add multiple regions without any
additional efforts. The rationale behind this change is:
* It doesn't seem common for one to be willing to annotate multiple
regions right away as it depends on listening. It's hard to listen to
and remember boundaries for multiple intervals in one playback.
* It becomes consistent with the standard image canvas behavior which
doesn't persist the draw mode after an annotation is added.
* It's still very easy to add multiple annotations with shortcuts: **n**
shortcut -> Draw Interval -> **n** -> Draw ... It might be useful for
tasks where one needs to add multiple annotations with different labels
for the same track fragment.

2. Selects the interval as active so the attributes can be filled right
away.
* This change simply eliminates the need for the explicit natural next
step to select it to be able to fill transcription and other attributes
which is assumed to be a very common next step.
* It doesn't make other scenarios worse where one wouldn't select the
interval right away as the next step

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->
Tested manually, adjusted e2e tests to account for the change.

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [X] I submit my changes into the `develop` branch
- [x] I have created a changelog fragment <!-- see top comment in
CHANGELOG.md -->
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))

### License

- [X] I submit _my code changes_ under the same [MIT License](
https://github.com/cvat-ai/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

Author: lexiv0re

changelog.d/20260807_154016_aleksey.zinovyev_active_new_interval.md

@@ -0,0 +1,5 @@
+### Changed
+
+- Updated the audio interval creation UX to always switch to "Cursor" mode and
+  automatically make the newly added interval active
+  (<https://github.com/cvat-ai/cvat/pull/11013>)

cvat-ui/src/actions/annotation-actions.ts

@@ -1314,8 +1314,8 @@ export function changeWorkspaceAsync(workspace: Workspace): ThunkAction {
 export function createAnnotationsAsync(
     statesToCreate: (ObjectState | AudioIntervalState)[],
     source: AnnotationSource = AnnotationSource.OTHER,
-): ThunkAction {
-    return async (dispatch: ThunkDispatch): Promise<void> => {
+): ThunkAction<Promise<number[]>> {
+    return async (dispatch: ThunkDispatch): Promise<number[]> => {
         try {
             const { jobInstance } = receiveAnnotationsParameters();
             const clientIds = await jobInstance.annotations.put(statesToCreate);
@@ -1325,13 +1325,16 @@ export function createAnnotationsAsync(
                 const [clientId] = clientIds;
                 dispatch(switchSimplifyVisibility(clientId));
             }
+
+            return clientIds;
         } catch (error) {
             dispatch({
                 type: AnnotationActionTypes.CREATE_ANNOTATIONS_FAILED,
                 payload: {
                     error,
                 },
             });
+            return [];
         }
     };
 }

cvat-ui/src/actions/audio-actions.ts

@@ -8,10 +8,12 @@ import {
 import {
     AudioIntervalState, FramesMetaData, Job, Source, fetchAndAssembleAudio,
 } from 'cvat-core-wrapper';
+import { ActiveControl } from 'reducers';
 import { clamp } from 'utils/math';
 import {
     cacheAudioData, removeCachedAudioData,
 } from 'audio/utils/audio-data-cache';
+import { updateActiveControl } from './annotation-actions';
 
 export enum AudioActionTypes {
     SWITCH_AUDIO_PLAY = 'SWITCH_AUDIO_PLAY',
@@ -231,7 +233,10 @@ export function createAudioIntervalAsync(start: number, stop: number, labelID: n
         });
 
         const { createAnnotationsAsync } = await import('./annotation-actions');
-        await dispatch(createAnnotationsAsync([state]));
+        const [clientID] = await dispatch(createAnnotationsAsync([state]));
+
+        dispatch(updateActiveControl(ActiveControl.CURSOR));
+        dispatch(audioActions.setAudioActiveInterval(clientID));
     };
 }
 

cvat-ui/src/audio/components/annotation-page/audio-workspace/hooks/use-audio-recording.ts

@@ -7,11 +7,11 @@ import {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { audioActions, createAudioIntervalAsync } from 'actions/audio-actions';
-import { updateActiveControl } from 'actions/annotation-actions';
+import { createAudioIntervalAsync } from 'actions/audio-actions';
 import { ActiveControl, CombinedState } from 'reducers';
 import { AudioIntervalState, Source } from 'cvat-core-wrapper';
 import { shallowEqual, ThunkDispatch } from 'utils/redux';
+import { usePrevious } from 'utils/hooks';
 import { MIN_INTERVAL_DURATION, MIN_RECORDING_DURATION } from 'audio/utils/waveform-geometry';
 
 import { getAudioRegionColor } from '../audio-region-colors';
@@ -57,7 +57,7 @@ export function useAudioRecording({ playback, regions, ready }: Params): void {
         duration, labels, activeLabelID, colorBy, opacity, selectedOpacity,
     };
     const sessionRef = useRef<RecordingSession | null>(null);
-    const wasPlayingRef = useRef(playing);
+    const prevPlaying = usePrevious(playing);
 
     const startSession = useCallback((): void => {
         if (sessionRef.current) return;
@@ -105,8 +105,6 @@ export function useAudioRecording({ playback, regions, ready }: Params): void {
         sessionRef.current = null;
         if (end - session.start < MIN_RECORDING_DURATION) return;
 
-        // TODO: is dropping active interval needed here?
-        dispatch(audioActions.setAudioActiveInterval(null));
         dispatch(createAudioIntervalAsync(session.start, end, session.labelID));
     }, []);
 
@@ -131,12 +129,12 @@ export function useAudioRecording({ playback, regions, ready }: Params): void {
     }, [activeControl, ready]);
 
     useEffect(() => {
-        const wasPlaying = wasPlayingRef.current;
-        wasPlayingRef.current = playing;
-        if (wasPlaying && !playing && activeControl === ActiveControl.AUDIO_REGION_RECORD) {
-            dispatch(updateActiveControl(ActiveControl.CURSOR));
+        if (activeControl !== ActiveControl.AUDIO_REGION_RECORD) return;
+
+        if (prevPlaying && !playing) {
+            finishSession();
         }
-    }, [activeControl, playing]);
+    }, [activeControl, playing, prevPlaying]);
 
     // update preview region along with playback time updates
     useEffect(() => subscribeTimeUpdates(updateSession), []);

tests/cypress/e2e/audio_workspace/case_audio_05_create_via_button.js

@@ -19,7 +19,9 @@ context('Audio annotation. Create region via toolbar button.', () => {
             cy.get('.cvat-audio-region-item').should('have.length', 0);
             cy.audioCreateRegionViaButton(firstLabelName, 100, 250);
             cy.get('.cvat-audio-region-item', { timeout: 5000 }).should('have.length', 1);
-            cy.get('.cvat-audio-region-item').first().should('contain.text', firstLabelName);
+            cy.get('.cvat-audio-region-item').first()
+                .should('contain.text', firstLabelName)
+                .and('have.class', 'cvat-audio-region-item-active');
         });
     });
 });

tests/cypress/e2e/audio_workspace/case_audio_06_create_via_hotkey.js

@@ -19,6 +19,8 @@ context('Audio annotation. Create region via hotkey.', () => {
             cy.get('.cvat-audio-region-item').should('have.length', 0);
             cy.audioCreateRegionViaHotkey(80, 220);
             cy.get('.cvat-audio-region-item', { timeout: 5000 }).should('have.length', 1);
+            cy.get('.cvat-cursor-control').should('have.class', 'cvat-active-canvas-control');
+            cy.get('.cvat-audio-region-item').first().should('have.class', 'cvat-audio-region-item-active');
         });
     });
 });

tests/cypress/e2e/audio_workspace/case_audio_13_select_region_canvas_click.js

@@ -13,12 +13,15 @@ context('Audio annotation. Click region on canvas activates it.', () => {
         cy.prepareUserSession();
         cy.openAudioJob(taskName);
         cy.audioCreateRegionViaButton(firstLabelName, 100, 250);
+        cy.audioCreateRegionViaButton(firstLabelName, 300, 450);
     });
 
     describe(`Testing case "${caseId}"`, () => {
         it('Selecting via list updates the active class on the item', () => {
+            cy.get('.cvat-audio-region-item').eq(1).should('have.class', 'cvat-audio-region-item-active');
             cy.clickRegionOnWaveform((100 + 250) / 2);
             cy.get('.cvat-audio-region-item').first().should('have.class', 'cvat-audio-region-item-active');
+            cy.get('.cvat-audio-region-item').eq(1).should('not.have.class', 'cvat-audio-region-item-active');
             cy.get('.cvat-audio-region-details').should('be.visible');
         });
     });

tests/cypress/e2e/audio_workspace/case_audio_25_extend_via_button.js

@@ -44,6 +44,8 @@ context('Audio annotation. Extend region via toolbar button.', () => {
             cy.audioExtendViaButton(firstLabelName);
 
             cy.get('.cvat-audio-region-item', { timeout: 5000 }).should('have.length', 3);
+            cy.get('.cvat-cursor-control').should('have.class', 'cvat-active-canvas-control');
+            cy.get('.cvat-audio-region-item').last().should('have.class', 'cvat-audio-region-item-active');
             getRegionRects().then(([left, extended, right]) => {
                 expect(extended.left).to.be.closeTo(left.right, REGION_POSITION_TOLERANCE_PX);
                 expect(extended.right).to.be.lessThan(right.left);
@@ -71,7 +73,10 @@ context('Audio annotation. Extend region via toolbar button.', () => {
 
             cy.audioExtendViaButton(firstLabelName);
             cy.get('.cvat-audio-region-item', { timeout: 5000 }).should('have.length', 1);
-            cy.get('.cvat-audio-region-item').first().should('contain.text', firstLabelName);
+            cy.get('.cvat-cursor-control').should('have.class', 'cvat-active-canvas-control');
+            cy.get('.cvat-audio-region-item').first()
+                .should('contain.text', firstLabelName)
+                .and('have.class', 'cvat-audio-region-item-active');
             cy.get('@pausedCursorPosition').then((pausedCursorPosition) => {
                 getWaveformWrapper().then(($wrapper) => {
                     const wrapperLeft = $wrapper[0].getBoundingClientRect().left;

tests/cypress/e2e/audio_workspace/case_audio_26_extend_via_hotkey.js

@@ -20,7 +20,6 @@ context('Audio annotation. Extend region via Shift+E hotkey.', () => {
                 const initial = $body.find('.cvat-audio-region-item').length;
                 cy.audioCreateRegionViaButton(firstLabelName, 100, 250);
                 cy.get('.cvat-audio-region-item').should('have.length', initial + 1);
-                cy.get('body').type('{esc}');
                 cy.get('.cvat-cursor-control').should('have.class', 'cvat-active-canvas-control');
                 cy.get('.cvat-audio-waveform-wrapper').first().then(($el) => {
                     const rect = $el[0].getBoundingClientRect();
@@ -33,7 +32,10 @@ context('Audio annotation. Extend region via Shift+E hotkey.', () => {
                 cy.get('.cvat-audio-interval-region-popover-content').should('not.be.visible');
                 cy.get('.cvat-audio-region-item', { timeout: 5000 })
                     .should('have.length', initial + 2);
-                cy.get('.cvat-audio-region-item').last().should('contain.text', firstLabelName);
+                cy.get('.cvat-cursor-control').should('have.class', 'cvat-active-canvas-control');
+                cy.get('.cvat-audio-region-item').last()
+                    .should('contain.text', firstLabelName)
+                    .and('have.class', 'cvat-audio-region-item-active');
             });
         });
     });

tests/cypress/e2e/audio_workspace/case_audio_30_recording_lifecycle.js

@@ -30,7 +30,8 @@ context('Audio annotation. Recording lifecycle.', () => {
             cy.get('.cvat-player-pause-button').click();
 
             cy.get('.cvat-cursor-control').should('have.class', 'cvat-active-canvas-control');
-            cy.get('.cvat-audio-region-item').should('have.length', 1);
+            cy.get('.cvat-audio-region-item').should('have.length', 1)
+                .and('have.class', 'cvat-audio-region-item-active');
         });
 
         it('Cancels a recording on Escape without creating an interval', () => {