React UI: Filters history (#1225)

* Added filters history

* Fixed unclosed dropdown

* Added saving filters to localStrorage

cvat-canvas/src/typescript/canvasView.ts

@@ -629,7 +629,6 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 if (![Mode.ZOOM_CANVAS, Mode.GROUP].includes(this.mode) || event.which === 2) {
                     self.controller.enableDrag(event.clientX, event.clientY);
                 }
-                event.preventDefault();
             }
         });
 

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

@@ -179,10 +179,22 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
 }
 
 export function changeAnnotationsFilters(filters: string[]): AnyAction {
+    const state: CombinedState = getStore().getState();
+    const { filtersHistory, filters: oldFilters } = state.annotation.annotations;
+
+    filters.forEach((element: string) => {
+        if (!(filtersHistory.includes(element) || oldFilters.includes(element))) {
+            filtersHistory.push(element);
+        }
+    });
+
+    window.localStorage.setItem('filtersHistory', JSON.stringify(filtersHistory.slice(-10)));
+
     return {
         type: AnnotationActionTypes.CHANGE_ANNOTATIONS_FILTERS,
         payload: {
             filters,
+            filtersHistory: filtersHistory.slice(-10),
         },
     };
 }

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx

@@ -63,6 +63,7 @@ interface Props {
     statesCollapsed: boolean;
     statesOrdering: StatesOrdering;
     annotationsFilters: string[];
+    annotationsFiltersHistory: string[];
     changeStatesOrdering(value: StatesOrdering): void;
     changeAnnotationsFilters(value: SelectValue): void;
     lockAllStates(): void;
@@ -76,6 +77,7 @@ interface Props {
 function ObjectListHeader(props: Props): JSX.Element {
     const {
         annotationsFilters,
+        annotationsFiltersHistory,
         statesHidden,
         statesLocked,
         statesCollapsed,
@@ -105,9 +107,12 @@ function ObjectListHeader(props: Props): JSX.Element {
                                 <span style={{ marginLeft: 5 }}>Annotations filter</span>
                             </>
                         )}
-                        dropdownStyle={{ display: 'none' }}
                         onChange={changeAnnotationsFilters}
-                    />
+                    >
+                        {annotationsFiltersHistory.map((element: string): JSX.Element => (
+                            <Select.Option key={element} value={element}>{element}</Select.Option>
+                        ))}
+                    </Select>
                 </Col>
             </Row>
             <Row type='flex' justify='space-between' align='middle'>

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx

@@ -18,6 +18,7 @@ interface Props {
     statesOrdering: StatesOrdering;
     sortedStatesID: number[];
     annotationsFilters: string[];
+    annotationsFiltersHistory: string[];
     changeStatesOrdering(value: StatesOrdering): void;
     changeAnnotationsFilters(value: SelectValue): void;
     lockAllStates(): void;
@@ -37,6 +38,7 @@ function ObjectListComponent(props: Props): JSX.Element {
         statesOrdering,
         sortedStatesID,
         annotationsFilters,
+        annotationsFiltersHistory,
         changeStatesOrdering,
         changeAnnotationsFilters,
         lockAllStates,
@@ -63,6 +65,7 @@ function ObjectListComponent(props: Props): JSX.Element {
                 expandAllStates={expandAllStates}
                 hideAllStates={hideAllStates}
                 showAllStates={showAllStates}
+                annotationsFiltersHistory={annotationsFiltersHistory}
             />
             <div className='cvat-objects-sidebar-states-list'>
                 { sortedStatesID.map((id: number): JSX.Element => (

cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx

@@ -29,6 +29,7 @@ interface StateToProps {
     statesCollapsed: boolean;
     objectStates: any[];
     annotationsFilters: string[];
+    annotationsFiltersHistory: string[];
 }
 
 interface DispatchToProps {
@@ -43,6 +44,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
             annotations: {
                 states: objectStates,
                 filters: annotationsFilters,
+                filtersHistory: annotationsFiltersHistory,
                 collapsed,
             },
             job: {
@@ -78,6 +80,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         frameNumber,
         jobInstance,
         annotationsFilters,
+        annotationsFiltersHistory,
     };
 }
 
@@ -221,7 +224,10 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
     }
 
     public render(): JSX.Element {
-        const { annotationsFilters } = this.props;
+        const {
+            annotationsFilters,
+            annotationsFiltersHistory,
+        } = this.props;
         const {
             sortedStatesID,
             statesOrdering,
@@ -233,6 +239,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
                 statesOrdering={statesOrdering}
                 sortedStatesID={sortedStatesID}
                 annotationsFilters={annotationsFilters}
+                annotationsFiltersHistory={annotationsFiltersHistory}
                 changeStatesOrdering={this.onChangeStatesOrdering}
                 changeAnnotationsFilters={this.onChangeAnnotationsFilters}
                 lockAllStates={this.onLockAllStates}

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

@@ -61,6 +61,7 @@ const defaultState: AnnotationState = {
         collapsed: {},
         states: [],
         filters: [],
+        filtersHistory: JSON.parse(window.localStorage.getItem('filtersHistory') as string) || [],
         history: {
             undo: [],
             redo: [],
@@ -954,11 +955,13 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
             };
         }
         case AnnotationActionTypes.CHANGE_ANNOTATIONS_FILTERS: {
-            const { filters } = action.payload;
+            const { filters, filtersHistory } = action.payload;
+
             return {
                 ...state,
                 annotations: {
                     ...state.annotations,
+                    filtersHistory,
                     filters,
                 },
             };

cvat-ui/src/reducers/interfaces.ts

@@ -328,6 +328,7 @@ export interface AnnotationState {
         collapsed: Record<number, boolean>;
         states: any[];
         filters: string[];
+        filtersHistory: string[];
         history: {
             undo: string[];
             redo: string[];