Do not adjust opacity level each frame if there are masks

changelog.d/20240711_094827_boris_do_not_reset_opacity.md

@@ -0,0 +1,4 @@
+### Changed
+
+- Do not reset opacity level each time frame switched if there are masks on the frame
+  (<https://github.com/cvat-ai/cvat/pull/8149>)

cvat-canvas/src/typescript/canvasView.ts

@@ -2576,7 +2576,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             }
 
             if (drawnState.shapeType === 'mask') {
-                shape.attr('opacity', `${this.configuration.shapeOpacity}`);
+                shape.attr('opacity', `${Math.sqrt(this.configuration.shapeOpacity)}`);
             } else {
                 shape.attr('fill-opacity', `${this.configuration.shapeOpacity}`);
             }
@@ -2666,7 +2666,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         }
 
         if (state.shapeType === 'mask') {
-            shape.attr('opacity', `${this.configuration.selectedShapeOpacity}`);
+            shape.attr('opacity', `${Math.sqrt(this.configuration.selectedShapeOpacity)}`);
         } else {
             shape.attr('fill-opacity', `${this.configuration.selectedShapeOpacity}`);
         }
@@ -3169,7 +3169,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
             id: `cvat_canvas_shape_${state.clientID}`,
             'shape-rendering': 'geometricprecision',
             'data-z-order': state.zOrder,
-            opacity: colorization['fill-opacity'],
+            // apply sqrt function to colorization to enhance displaying the mask on the canvas
+            opacity: Math.sqrt(colorization['fill-opacity']),
             stroke: colorization.stroke,
         }).addClass('cvat_canvas_shape');
         image.move(this.geometry.offset + left, this.geometry.offset + top);

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

@@ -894,7 +894,6 @@ export function getJobAsync({
 
             const {
                 settings: {
-                    workspace: { showAllInterpolationTracks },
                     player: { showDeletedFrames },
                 },
             } = state;
@@ -939,7 +938,8 @@ export function getJobAsync({
                 // do nothing, user will be notified when data request is done
             }
 
-            const states = await job.annotations.get(frameNumber, showAllInterpolationTracks, filters);
+            await job.annotations.clear({ reload: true });
+
             const issues = await job.issues();
             const colors = [...cvat.enums.colors];
 
@@ -974,7 +974,6 @@ export function getJobAsync({
                     groundTruthInstance: gtJob || null,
                     groundTruthJobFramesMeta,
                     issues,
-                    states,
                     conflicts,
                     frameNumber,
                     frameFilename: frameData.filename,

cvat-ui/src/reducers/settings-reducer.ts

@@ -1,18 +1,16 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2023 CVAT.ai Corporation
+// Copyright (C) 2023-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import { AnyAction } from 'redux';
 
-import { BoundariesActionTypes } from 'actions/boundaries-actions';
 import { AuthActionTypes } from 'actions/auth-actions';
 import { SettingsActionTypes } from 'actions/settings-actions';
 import { AnnotationActionTypes } from 'actions/annotation-actions';
 import {
     SettingsState, GridColor, FrameSpeed, ColorBy,
 } from 'reducers';
-import { clampOpacity } from 'utils/clamp-opacity';
 
 const defaultState: SettingsState = {
     shapes: {
@@ -438,38 +436,15 @@ export default (state = defaultState, action: AnyAction): SettingsState => {
                 imageFilters: [],
             };
         }
-        case AnnotationActionTypes.FETCH_ANNOTATIONS_SUCCESS:
-        case AnnotationActionTypes.CHANGE_FRAME_SUCCESS: {
-            const { states } = action.payload;
-            const { shapes } = state;
-            const [clampedOpacity, clampedSelectedOpacity] = clampOpacity(states, shapes);
-            return {
-                ...state,
-                shapes: {
-                    ...state.shapes,
-                    opacity: clampedOpacity,
-                    selectedOpacity: clampedSelectedOpacity,
-                },
-            };
-        }
-        case BoundariesActionTypes.RESET_AFTER_ERROR:
         case AnnotationActionTypes.GET_JOB_SUCCESS: {
-            const { job, states } = action.payload;
-            const { shapes } = state;
             const filters = [...state.imageFilters];
             filters.forEach((imageFilter) => {
                 imageFilter.modifier.currentProcessedImage = null;
             });
 
-            const [clampedOpacity, clampedSelectedOpacity] = clampOpacity(states, shapes, job);
-
             return {
                 ...state,
-                shapes: {
-                    ...defaultState.shapes,
-                    opacity: clampedOpacity,
-                    selectedOpacity: clampedSelectedOpacity,
-                },
+
                 imageFilters: filters,
             };
         }

tests/cypress/e2e/actions_objects/regression_tests.js

@@ -44,7 +44,7 @@ context('Regression tests', () => {
             taskID = response.taskID;
             [jobID] = response.jobIDs;
 
-            cy.headlessCreateObject([rectanglePayload], jobID);
+            cy.headlessCreateObjects([rectanglePayload], jobID);
             cy.visit(`/tasks/${taskID}/jobs/${jobID}`);
         });
     });

tests/cypress/support/commands.js

@@ -266,7 +266,7 @@ Cypress.Commands.add('headlessLogin', (username = Cypress.env('user'), password
     });
 });
 
-Cypress.Commands.add('headlessCreateObject', (objects, jobID) => {
+Cypress.Commands.add('headlessCreateObjects', (objects, jobID) => {
     cy.window().then(async ($win) => {
         const job = (await $win.cvat.jobs.get({ jobID }))[0];
         await job.annotations.clear({ reload: true });