Annotations filters UI

.stylelintrc.json

@@ -8,7 +8,7 @@
     "at-rule-no-unknown": [
       true,
       {
-        "ignoreAtRules": ["extend"]
+        "ignoreAtRules": ["extend", "for"]
       }
     ],
     "selector-type-no-unknown": [

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - CVAT-3D: Load all frames corresponding to the job instance
   (<https://github.com/openvinotoolkit/cvat/pull/2645>)
 - Intelligent scissors with OpenCV javascript (<https://github.com/openvinotoolkit/cvat/pull/2689>)
+- Annotations Filters UI (<https://github.com/openvinotoolkit/cvat/issues/1418>)
 
 ### Changed
 

cvat-canvas/src/typescript/canvasView.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2020 Intel Corporation
+// Copyright (C) 2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

cvat-ui/package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@babel/core": "^7.6.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
@@ -58,6 +59,7 @@
     "@types/react-router-dom": "^5.1.7",
     "@types/react-share": "^3.0.3",
     "@types/redux-logger": "^3.0.8",
+    "@types/uuid": "8.3.0",
     "antd": "^4.10.2",
     "copy-to-clipboard": "^3.3.1",
     "cvat-canvas3d": "file:../cvat-canvas3d",
@@ -81,6 +83,7 @@
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "uuid": "8.3.1"
   }
 }

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

@@ -1362,10 +1362,7 @@ export function pasteShapeAsync(): ThunkAction {
     };
 }
 
-export function interactWithCanvas(
-    activeInteractor: Model | OpenCVTool,
-    activeLabelID: number,
-): AnyAction {
+export function interactWithCanvas(activeInteractor: Model | OpenCVTool, activeLabelID: number): AnyAction {
     return {
         type: AnnotationActionTypes.INTERACT_WITH_CANVAS,
         payload: {

cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-item/annotation-filter-item.tsx

@@ -0,0 +1,115 @@
+// Copyright (C) 2020-2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import { Tag } from 'antd';
+import PropTypes from 'prop-types';
+import React, { ReactElement, useEffect, useReducer } from 'react';
+
+interface State {
+    id: string;
+    concatenator: string;
+    filterBy: string;
+    operator: string;
+    value: string;
+    attribute: string;
+    attributeOperator: string;
+    attributeValue: string;
+    anotherAttributeLabel: string;
+    anotherAttributeValue: string;
+    left: string[];
+    right: string[];
+}
+
+interface Props {
+    item: State;
+    onEdit: Function;
+    onDelete: Function;
+    onGrouping: Function;
+}
+
+enum ActionType {
+    addLeft,
+    addRight,
+    removeLeft,
+    removeRight,
+}
+
+const reducer = (state: State, action: { type: ActionType; payload?: any }): State => {
+    switch (action.type) {
+        case ActionType.addLeft:
+            return { ...state, left: [...state.left, '('] };
+        case ActionType.addRight:
+            return { ...state, right: [...state.right, ')'] };
+        case ActionType.removeLeft:
+            state.left.pop();
+            return { ...state };
+        case ActionType.removeRight:
+            state.right.pop();
+            return { ...state };
+        default:
+            return state;
+    }
+};
+function AnnotationFilterItem({
+    item, onEdit, onDelete, onGrouping,
+}: Props): ReactElement {
+    const [state, dispatch] = useReducer(reducer, item);
+
+    useEffect(() => {
+        onGrouping(state);
+    }, [state]);
+
+    return (
+        <>
+            {state.concatenator && ` ${state.concatenator} `}
+            <span className='group'>{state.left?.map((leftItem: string) => leftItem)}</span>
+            <Tag
+                style={{ cursor: 'context-menu' }}
+                onClick={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+                    e.stopPropagation();
+                    if (e.shiftKey) {
+                        dispatch({ type: ActionType.addLeft });
+                    } else if (e.altKey) {
+                        dispatch({ type: ActionType.removeLeft });
+                    } else {
+                        onEdit(state);
+                    }
+                }}
+                onContextMenu={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+                    e.preventDefault();
+                    if (e.shiftKey || e.altKey) e.stopPropagation();
+                    if (e.shiftKey) {
+                        dispatch({ type: ActionType.addRight });
+                    } else if (e.altKey) {
+                        dispatch({ type: ActionType.removeRight });
+                    }
+                }}
+                onClose={(e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+                    e.preventDefault();
+                    onDelete(state);
+                }}
+                closable
+            >
+                {!state.attribute && `${state.filterBy}${state.operator}"${state.value}"`}
+
+                {state.attribute &&
+                    !state.anotherAttributeLabel &&
+                    `attr["${state.attribute}"]${state.attributeOperator}"${state.attributeValue}"`}
+
+                {state.anotherAttributeLabel &&
+                    `attr["${state.attribute}"]${state.attributeOperator}attr["${state.anotherAttributeValue}"]`}
+            </Tag>
+            <span className='group'>{state.right?.map((rightItem: string) => rightItem)}</span>
+        </>
+    );
+}
+
+AnnotationFilterItem.propTypes = {
+    item: PropTypes.objectOf(PropTypes.any),
+    onEdit: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onGrouping: PropTypes.func,
+};
+
+export default AnnotationFilterItem;

cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.scss

@@ -0,0 +1,46 @@
+// Copyright (C) 2020-2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+@import '../../../../base.scss';
+
+.annotation-filters-pane {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: $grid-unit-size * 5;
+    max-height: $grid-unit-size * 15;
+    padding: $grid-unit-size/2;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: $grid-unit-size/2;
+    user-select: none;
+    overflow: auto;
+
+    & > *:not(.group) {
+        margin: $grid-unit-size/2;
+    }
+
+    &.invalid {
+        border-color: #f00;
+    }
+
+    .add-more {
+        cursor: pointer;
+    }
+
+    .no-filters {
+        color: #999;
+
+        .no-filters-icon {
+            margin-right: $grid-unit-size/2;
+        }
+    }
+
+    .pop-confirm-wrapper {
+        position: absolute;
+        top: 0;
+        left: 45%;
+    }
+}