React-UI: settings

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

@@ -27,18 +27,19 @@ function getStore(): Store<CombinedState> {
     return store;
 }
 
-function receiveAnnotationsParameters(): { filters: string[]; frame: number } {
+function receiveAnnotationsParameters(): { filters: string[]; frame: number, showAllInterpolationTracks: boolean } {
     if (store === null) {
         store = getCVATStore();
     }
 
     const state: CombinedState = getStore().getState();
     const { filters } = state.annotation.annotations;
     const frame = state.annotation.player.frame.number;
-
+    const { showAllInterpolationTracks } = state.settings.workspace;
     return {
         filters,
         frame,
+        showAllInterpolationTracks,
     };
 }
 
@@ -115,8 +116,8 @@ export function fetchAnnotationsAsync(sessionInstance: any):
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters, frame } = receiveAnnotationsParameters();
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const { filters, frame, showAllInterpolationTracks } = receiveAnnotationsParameters();
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
             dispatch({
                 type: AnnotationActionTypes.FETCH_ANNOTATIONS_SUCCESS,
                 payload: {
@@ -147,12 +148,12 @@ export function undoActionAsync(sessionInstance: any, frame: number):
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters } = receiveAnnotationsParameters();
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
 
             // TODO: use affected IDs as an optimization
             await sessionInstance.actions.undo();
             const history = await sessionInstance.actions.get();
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
 
             dispatch({
                 type: AnnotationActionTypes.UNDO_ACTION_SUCCESS,
@@ -176,12 +177,12 @@ export function redoActionAsync(sessionInstance: any, frame: number):
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters } = receiveAnnotationsParameters();
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
 
             // TODO: use affected IDs as an optimization
             await sessionInstance.actions.redo();
             const history = await sessionInstance.actions.get();
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
 
             dispatch({
                 type: AnnotationActionTypes.REDO_ACTION_SUCCESS,
@@ -242,7 +243,7 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
             const state: CombinedState = getStore().getState();
-            const { filters } = receiveAnnotationsParameters();
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
 
             if (state.tasks.activities.loads[job.task.id]) {
                 throw Error('Annotations is being uploaded for the task');
@@ -276,7 +277,7 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
             await job.annotations.clear(true);
             await job.actions.clear();
             const history = await job.actions.get();
-            const states = await job.annotations.get(frame, false, filters);
+            const states = await job.annotations.get(frame, showAllInterpolationTracks, filters);
 
             setTimeout(() => {
                 dispatch({
@@ -540,12 +541,12 @@ export function switchPlay(playing: boolean): AnyAction {
     };
 }
 
-export function changeFrameAsync(toFrame: number):
+export function changeFrameAsync(toFrame: number, frameChangeTime: number | null):
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         const state: CombinedState = getStore().getState();
         const { instance: job } = state.annotation.job;
-        const { filters, frame } = receiveAnnotationsParameters();
+        const { filters, frame, showAllInterpolationTracks } = receiveAnnotationsParameters();
 
         try {
             if (toFrame < job.startFrame || toFrame > job.stopFrame) {
@@ -559,6 +560,7 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
                         number: state.annotation.player.frame.number,
                         data: state.annotation.player.frame.data,
                         states: state.annotation.annotations.states,
+                        frameChangeTime,
                     },
                 });
 
@@ -572,13 +574,14 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
             });
 
             const data = await job.frames.get(toFrame);
-            const states = await job.annotations.get(toFrame, false, filters);
+            const states = await job.annotations.get(toFrame, showAllInterpolationTracks, filters);
             dispatch({
                 type: AnnotationActionTypes.CHANGE_FRAME_SUCCESS,
                 payload: {
                     number: toFrame,
                     data,
                     states,
+                    frameChangeTime,
                 },
             });
         } catch (error) {
@@ -640,6 +643,7 @@ export function getJobAsync(
         try {
             const state: CombinedState = getStore().getState();
             const filters = initialFilters;
+            const { showAllInterpolationTracks } = state.settings.workspace;
 
             // First check state if the task is already there
             let task = state.tasks.current
@@ -660,7 +664,7 @@ export function getJobAsync(
 
             const frameNumber = Math.max(Math.min(job.stopFrame, initialFrame), job.startFrame);
             const frameData = await job.frames.get(frameNumber);
-            const states = await job.annotations.get(frameNumber, false, filters);
+            const states = await job.annotations.get(frameNumber, showAllInterpolationTracks, filters);
             const colors = [...cvat.enums.colors];
 
             dispatch({
@@ -798,8 +802,8 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
                 },
             });
         } catch (error) {
-            const { filters } = receiveAnnotationsParameters();
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
             dispatch({
                 type: AnnotationActionTypes.UPDATE_ANNOTATIONS_FAILED,
                 payload: {
@@ -815,9 +819,9 @@ export function createAnnotationsAsync(sessionInstance: any, frame: number, stat
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters } = receiveAnnotationsParameters();
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
             await sessionInstance.annotations.put(statesToCreate);
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
             const history = await sessionInstance.actions.get();
 
             dispatch({
@@ -842,9 +846,9 @@ export function mergeAnnotationsAsync(sessionInstance: any, frame: number, state
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters } = receiveAnnotationsParameters();
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
             await sessionInstance.annotations.merge(statesToMerge);
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
             const history = await sessionInstance.actions.get();
 
             dispatch({
@@ -869,9 +873,9 @@ export function groupAnnotationsAsync(sessionInstance: any, frame: number, state
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters } = receiveAnnotationsParameters();
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
             await sessionInstance.annotations.group(statesToGroup);
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
             const history = await sessionInstance.actions.get();
 
             dispatch({
@@ -895,10 +899,10 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
 export function splitAnnotationsAsync(sessionInstance: any, frame: number, stateToSplit: any):
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
-        const { filters } = receiveAnnotationsParameters();
+        const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
         try {
             await sessionInstance.annotations.split(stateToSplit, frame);
-            const states = await sessionInstance.annotations.get(frame, false, filters);
+            const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
             const history = await sessionInstance.actions.get();
 
             dispatch({
@@ -927,10 +931,10 @@ export function changeLabelColorAsync(
 ): ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters } = receiveAnnotationsParameters();
+            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
             const updatedLabel = label;
             updatedLabel.color = color;
-            const states = await sessionInstance.annotations.get(frameNumber, false, filters);
+            const states = await sessionInstance.annotations.get(frameNumber, showAllInterpolationTracks, filters);
             const history = await sessionInstance.actions.get();
 
             dispatch({

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

@@ -14,6 +14,16 @@ export enum SettingsActionTypes {
     CHANGE_SELECTED_SHAPES_OPACITY = 'CHANGE_SELECTED_SHAPES_OPACITY',
     CHANGE_SHAPES_COLOR_BY = 'CHANGE_SHAPES_COLOR_BY',
     CHANGE_SHAPES_BLACK_BORDERS = 'CHANGE_SHAPES_BLACK_BORDERS',
+    CHANGE_FRAME_STEP = 'CHANGE_FRAME_STEP',
+    CHANGE_FRAME_SPEED = 'CHANGE_FRAME_SPEED',
+    SWITCH_RESET_ZOOM = 'SWITCH_RESET_ZOOM',
+    CHANGE_BRIGHTNESS_LEVEL = 'CHANGE_BRIGHTNESS_LEVEL',
+    CHANGE_CONTRAST_LEVEL = 'CHANGE_CONTRAST_LEVEL',
+    CHANGE_SATURATION_LEVEL = 'CHANGE_SATURATION_LEVEL',
+    SWITCH_AUTO_SAVE = 'SWITCH_AUTO_SAVE',
+    CHANGE_AUTO_SAVE_INTERVAL = 'CHANGE_AUTO_SAVE_INTERVAL',
+    CHANGE_AAM_ZOOM_MARGIN = 'CHANGE_AAM_ZOOM_MARGIN',
+    SWITCH_SHOWNIG_INTERPOLATED_TRACKS = 'SWITCH_SHOWNIG_INTERPOLATED_TRACKS',
 }
 
 export function changeShapesOpacity(opacity: number): AnyAction {
@@ -96,3 +106,93 @@ export function changeGridOpacity(gridOpacity: number): AnyAction {
         },
     };
 }
+
+export function changeFrameStep(frameStep: number): AnyAction {
+    return {
+        type: SettingsActionTypes.CHANGE_FRAME_STEP,
+        payload: {
+            frameStep,
+        },
+    };
+}
+
+export function changeFrameSpeed(frameSpeed: number): AnyAction {
+    return {
+        type: SettingsActionTypes.CHANGE_FRAME_SPEED,
+        payload: {
+            frameSpeed,
+        },
+    };
+}
+
+export function switchResetZoom(resetZoom: boolean): AnyAction {
+    return {
+        type: SettingsActionTypes.SWITCH_RESET_ZOOM,
+        payload: {
+            resetZoom,
+        },
+    };
+}
+
+export function changeBrightnessLevel(level: number): AnyAction {
+    return {
+        type: SettingsActionTypes.CHANGE_BRIGHTNESS_LEVEL,
+        payload: {
+            level,
+        },
+    };
+}
+
+export function changeContrastLevel(level: number): AnyAction {
+    return {
+        type: SettingsActionTypes.CHANGE_CONTRAST_LEVEL,
+        payload: {
+            level,
+        },
+    };
+}
+
+export function changeSaturationLevel(level: number): AnyAction {
+    return {
+        type: SettingsActionTypes.CHANGE_SATURATION_LEVEL,
+        payload: {
+            level,
+        },
+    };
+}
+
+export function switchAutoSave(autoSave: boolean): AnyAction {
+    return {
+        type: SettingsActionTypes.SWITCH_AUTO_SAVE,
+        payload: {
+            autoSave,
+        },
+    };
+}
+
+export function changeAutoSaveInterval(autoSaveInterval: number): AnyAction {
+    return {
+        type: SettingsActionTypes.CHANGE_AUTO_SAVE_INTERVAL,
+        payload: {
+            autoSaveInterval,
+        },
+    };
+}
+
+export function changeAAMZoomMargin(aamZoomMargin: number): AnyAction {
+    return {
+        type: SettingsActionTypes.CHANGE_AAM_ZOOM_MARGIN,
+        payload: {
+            aamZoomMargin,
+        },
+    };
+}
+
+export function switchShowingInterpolatedTracks(showAllInterpolationTracks: boolean): AnyAction {
+    return {
+        type: SettingsActionTypes.SWITCH_SHOWNIG_INTERPOLATED_TRACKS,
+        payload: {
+            showAllInterpolationTracks,
+        },
+    };
+}

cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx

@@ -39,6 +39,9 @@ interface Props {
     gridOpacity: number;
     activeLabelID: number;
     activeObjectType: ObjectType;
+    brightnessLevel: number;
+    contrastLevel: number;
+    saturationLevel: number;
     onSetupCanvas: () => void;
     onDragCanvas: (enabled: boolean) => void;
     onZoomCanvas: (enabled: boolean) => void;
@@ -325,6 +328,9 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             onActivateObject,
             onUpdateContextMenu,
             onEditShape,
+            brightnessLevel,
+            contrastLevel,
+            saturationLevel,
         } = this.props;
 
         // Size
@@ -343,6 +349,12 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         }
         canvasInstance.grid(gridSize, gridSize);
 
+        // Filters
+        const backgroundElement = window.document.getElementById('cvat_canvas_background');
+        if (backgroundElement) {
+            backgroundElement.style.filter = `brightness(${brightnessLevel/50}) contrast(${contrastLevel/50}) saturate(${saturationLevel/50})`;
+        }
+
         // Events
         canvasInstance.html().addEventListener('mousedown', (e: MouseEvent): void => {
             const {