Ignore not relevant tasks/projects/jobs responses

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

@@ -34,7 +34,9 @@ interface JobsList extends Array<any> {
 }
 
 const jobsActions = {
-    getJobs: (query: Partial<JobsQuery>) => createAction(JobsActionTypes.GET_JOBS, { query }),
+    getJobs: (query: Partial<JobsQuery>, fetchingTimestamp: number) => (
+        createAction(JobsActionTypes.GET_JOBS, { query, fetchingTimestamp })
+    ),
     getJobsSuccess: (jobs: JobsList) => (
         createAction(JobsActionTypes.GET_JOBS_SUCCESS, { jobs })
     ),
@@ -73,16 +75,26 @@ const jobsActions = {
 
 export type JobsActions = ActionUnion<typeof jobsActions>;
 
-export const getJobsAsync = (query: JobsQuery): ThunkAction => async (dispatch) => {
+export const getJobsAsync = (query: JobsQuery): ThunkAction => async (dispatch, getState) => {
+    const requestedOn = Date.now();
+    const isRequestRelevant = (): boolean => (
+        getState().jobs.fetchingTimestamp === requestedOn
+    );
+
     try {
         // We remove all keys with null values from the query
         const filteredQuery = filterNull(query);
 
-        dispatch(jobsActions.getJobs(filteredQuery as JobsQuery));
+        dispatch(jobsActions.getJobs(filteredQuery as JobsQuery, requestedOn));
         const jobs = await cvat.jobs.get(filteredQuery);
-        dispatch(jobsActions.getJobsSuccess(jobs));
+
+        if (isRequestRelevant()) {
+            dispatch(jobsActions.getJobsSuccess(jobs));
+        }
     } catch (error) {
-        dispatch(jobsActions.getJobsFailed(error));
+        if (isRequestRelevant()) {
+            dispatch(jobsActions.getJobsFailed(error));
+        }
     }
 };
 

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

@@ -33,7 +33,7 @@ export enum ProjectsActionTypes {
 }
 
 const projectActions = {
-    getProjects: () => createAction(ProjectsActionTypes.GET_PROJECTS),
+    getProjects: (fetchingTimestamp: number) => createAction(ProjectsActionTypes.GET_PROJECTS, { fetchingTimestamp }),
     getProjectsSuccess: (array: any[], count: number) => (
         createAction(ProjectsActionTypes.GET_PROJECTS_SUCCESS, { array, count })
     ),
@@ -86,8 +86,13 @@ export function getProjectTasksAsync(tasksQuery: Partial<TasksQuery> = {}): Thun
 export function getProjectsAsync(
     query: Partial<ProjectsQuery>, tasksQuery: Partial<TasksQuery> = {},
 ): ThunkAction {
-    return async (dispatch: ThunkDispatch): Promise<void> => {
-        dispatch(projectActions.getProjects());
+    return async (dispatch: ThunkDispatch, getState): Promise<void> => {
+        const requestedOn = Date.now();
+        const isRequestRelevant = (): boolean => (
+            getState().projects.fetchingTimestamp === requestedOn
+        );
+
+        dispatch(projectActions.getProjects(requestedOn));
         dispatch(projectActions.updateProjectsGettingQuery(query, tasksQuery));
 
         // Clear query object from null fields
@@ -100,20 +105,22 @@ export function getProjectsAsync(
         try {
             result = await cvat.projects.get(filteredQuery);
         } catch (error) {
-            dispatch(projectActions.getProjectsFailed(error));
+            if (isRequestRelevant()) {
+                dispatch(projectActions.getProjectsFailed(error));
+            }
             return;
         }
 
-        const array = Array.from(result);
-
-        dispatch(projectActions.getProjectsSuccess(array, result.count));
-
-        // Appropriate tasks fetching process needs with retrieving only a single project
-        if (Object.keys(filteredQuery).includes('id') && typeof filteredQuery.id === 'number') {
-            dispatch(getProjectTasksAsync({
-                ...tasksQuery,
-                projectId: filteredQuery.id,
-            }));
+        if (isRequestRelevant()) {
+            const array = Array.from(result);
+            dispatch(projectActions.getProjectsSuccess(array, result.count));
+            // Appropriate tasks fetching process needs with retrieving only a single project
+            if (Object.keys(filteredQuery).includes('id') && typeof filteredQuery.id === 'number') {
+                dispatch(getProjectTasksAsync({
+                    ...tasksQuery,
+                    projectId: filteredQuery.id,
+                }));
+            }
         }
     };
 }

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

@@ -32,10 +32,11 @@ export enum TasksActionTypes {
     UPDATE_TASK_IN_STATE = 'UPDATE_TASK_IN_STATE',
 }
 
-function getTasks(query: Partial<TasksQuery>, updateQuery: boolean): AnyAction {
+function getTasks(query: Partial<TasksQuery>, updateQuery: boolean, fetchingTimestamp: number): AnyAction {
     const action = {
         type: TasksActionTypes.GET_TASKS,
         payload: {
+            fetchingTimestamp,
             updateQuery,
             query,
         },
@@ -69,23 +70,30 @@ export function getTasksAsync(
     query: Partial<TasksQuery>,
     updateQuery = true,
 ): ThunkAction {
-    return async (dispatch: ThunkDispatch): Promise<void> => {
-        dispatch(getTasks(query, updateQuery));
+    return async (dispatch: ThunkDispatch, getState): Promise<void> => {
+        const requestedOn = Date.now();
+        const isRequestRelevant = (): boolean => (
+            getState().tasks.fetchingTimestamp === requestedOn
+        );
 
+        dispatch(getTasks(query, updateQuery, requestedOn));
         const filteredQuery = filterNull(query);
 
         let result = null;
         try {
             result = await cvat.tasks.get(filteredQuery);
         } catch (error) {
-            dispatch(getTasksFailed(error));
+            if (isRequestRelevant()) {
+                dispatch(getTasksFailed(error));
+            }
             return;
         }
 
-        const array = Array.from(result);
-
-        dispatch(getInferenceStatusAsync());
-        dispatch(getTasksSuccess(array, result.count));
+        if (isRequestRelevant()) {
+            const array = Array.from(result);
+            dispatch(getInferenceStatusAsync());
+            dispatch(getTasksSuccess(array, result.count));
+        }
     };
 }
 

cvat-ui/src/containers/tasks-page/task-item.tsx

@@ -6,11 +6,9 @@
 import { connect } from 'react-redux';
 
 import { Task, Request } from 'cvat-core-wrapper';
-import {
-    TasksQuery, CombinedState, ActiveInference, PluginComponent,
-} from 'reducers';
+import { CombinedState, ActiveInference, PluginComponent } from 'reducers';
 import TaskItemComponent from 'components/tasks-page/task-item';
-import { getTasksAsync, updateTaskInState as updateTaskInStateAction, getTaskPreviewAsync } from 'actions/tasks-actions';
+import { updateTaskInState as updateTaskInStateAction, getTaskPreviewAsync } from 'actions/tasks-actions';
 import { cancelInferenceAsync } from 'actions/models-actions';
 
 interface StateToProps {
@@ -22,7 +20,6 @@ interface StateToProps {
 }
 
 interface DispatchToProps {
-    getTasks(query: TasksQuery): void;
     updateTaskInState(task: Task): void;
     cancelAutoAnnotation(): void;
 }
@@ -53,9 +50,6 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
 
 function mapDispatchToProps(dispatch: any, own: OwnProps): DispatchToProps {
     return {
-        getTasks(query: TasksQuery): void {
-            dispatch(getTasksAsync(query));
-        },
         cancelAutoAnnotation(): void {
             dispatch(cancelInferenceAsync(own.taskID));
         },

cvat-ui/src/containers/tasks-page/tasks-list.tsx

@@ -1,39 +1,24 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { TasksState, TasksQuery, CombinedState } from 'reducers';
+import { TasksState, CombinedState } from 'reducers';
 import TasksListComponent from 'components/tasks-page/task-list';
-import { getTasksAsync } from 'actions/tasks-actions';
 
 interface StateToProps {
     tasks: TasksState;
 }
 
-interface DispatchToProps {
-    getTasks: (query: TasksQuery) => void;
-}
-
 function mapStateToProps(state: CombinedState): StateToProps {
     return {
         tasks: state.tasks,
     };
 }
 
-function mapDispatchToProps(dispatch: any): DispatchToProps {
-    return {
-        getTasks: (query: TasksQuery): void => {
-            dispatch(getTasksAsync(query));
-        },
-    };
-}
-
-type TasksListContainerProps = StateToProps & DispatchToProps;
-
-function TasksListContainer(props: TasksListContainerProps): JSX.Element {
+function TasksListContainer(props: StateToProps): JSX.Element {
     const { tasks } = props;
 
     return (
@@ -43,4 +28,4 @@ function TasksListContainer(props: TasksListContainerProps): JSX.Element {
     );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(TasksListContainer);
+export default connect(mapStateToProps)(TasksListContainer);

cvat-ui/src/reducers/index.ts

@@ -38,6 +38,7 @@ interface Preview {
 }
 
 export interface ProjectsState {
+    fetchingTimestamp: number;
     initialized: boolean;
     fetching: boolean;
     count: number;
@@ -75,6 +76,7 @@ export interface JobsQuery {
 }
 
 export interface JobsState {
+    fetchingTimestamp: number;
     query: JobsQuery;
     fetching: boolean;
     count: number;
@@ -90,6 +92,7 @@ export interface JobsState {
 }
 
 export interface TasksState {
+    fetchingTimestamp: number;
     initialized: boolean;
     fetching: boolean;
     moveTask: {

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

@@ -7,6 +7,7 @@ import { JobsActions, JobsActionTypes } from 'actions/jobs-actions';
 import { JobsState } from '.';
 
 const defaultState: JobsState = {
+    fetchingTimestamp: Date.now(),
     fetching: false,
     count: 0,
     query: {
@@ -27,6 +28,7 @@ export default (state: JobsState = defaultState, action: JobsActions): JobsState
         case JobsActionTypes.GET_JOBS: {
             return {
                 ...state,
+                fetchingTimestamp: action.payload.fetchingTimestamp,
                 fetching: true,
                 query: {
                     ...defaultState.query,

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

@@ -12,6 +12,7 @@ import { AuthActionTypes } from 'actions/auth-actions';
 import { ProjectsState } from '.';
 
 const defaultState: ProjectsState = {
+    fetchingTimestamp: Date.now(),
     initialized: false,
     fetching: false,
     count: 0,
@@ -59,6 +60,7 @@ export default (state: ProjectsState = defaultState, action: AnyAction): Project
         case ProjectsActionTypes.GET_PROJECTS:
             return {
                 ...state,
+                fetchingTimestamp: action.payload.fetchingTimestamp,
                 initialized: false,
                 fetching: true,
                 count: 0,

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

@@ -12,6 +12,7 @@ import { ProjectsActionTypes } from 'actions/projects-actions';
 import { TasksState } from '.';
 
 const defaultState: TasksState = {
+    fetchingTimestamp: Date.now(),
     initialized: false,
     fetching: false,
     moveTask: {
@@ -43,6 +44,7 @@ export default (state: TasksState = defaultState, action: AnyAction): TasksState
                     ...state.activities,
                     deletes: {},
                 },
+                fetchingTimestamp: action.payload.fetchingTimestamp,
                 initialized: false,
                 fetching: true,
                 count: 0,