Update item Filter in User Guide (#3020)

* update user_guide.md and images

* fix mistakes in user_guide.md

* fix mistakes in user_guide.md

cvat/apps/documentation/user_guide.md

@@ -1196,13 +1196,6 @@ Press `Esc` to cancel editing.
 
 It is used for semantic / instance segmentation.
 
-The Z-Order flag defines the order of drawing. It is necessary to
-get the right annotation mask without extra work (additional drawing of borders).
-Z-Order can be changed by pressing `+`/`-` which set maximum/minimum z-order
-accordingly.
-
-![](static/documentation/images/image074.jpg)
-
 Before starting, you need to select `Polygon` on the controls sidebar and choose the correct Label.
 
 ![](static/documentation/images/image084.jpg)
@@ -1564,70 +1557,86 @@ Shapes that don't have `group_id`, will be highlighted in white.
 
 ## Filter
 
-![](static/documentation/images/image059.jpg)
-
 There are some reasons to use the feature:
 
 1. When you use a filter, objects that don't match the filter will be hidden.
 1. The fast navigation between frames which have an object of interest.
    Use the `Left Arrow` / `Right Arrow` keys for this purpose
-   or customize the UI buttons by right-clicking and select "switching by filter".
+   or customize the UI buttons by right-clicking and select `switching by filter`.
    If there are no objects which correspond to the filter,
    you will go to the previous / next frame which contains any annotated objects.
-1. The list contains frequently used and recent filters.
 
-To use the function, it is enough to specify a value inside the `Filter` text
-field and press `Enter`. After that, the filter will be applied.
+To apply filters you need to click on the button on the top panel.
 
----
+![](static/documentation/images/image059.jpg)
+
+It will open a window for filter input. Here you will find two buttons: `Add rule` and `Add group`.
+
+![](static/documentation/images/image202.jpg)
+
+### Rules
+
+The "Add rule" button adds a rule for objects display. A rule may use the following properties:
+
+![](static/documentation/images/image204.jpg)
 
 **Supported properties:**
 
-| Properties | Supported values                                       | Description                                                                                                |
-| ---------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
-| `width`    | number of px or `height`                               | shape width                                                                                                |
-| `height`   | number of px or `width`                                | shape height                                                                                               |
-| `label`    | `"text"` or `["text"]`                                 | label name                                                                                                 |
-| `serverID` | number                                                 | ID of the object on server <br> (You can find out by forming a link to the object through the Action menu) |
-| `clientID` | number                                                 | ID of the object in your client (indicated on the objects sidebar)                                         |
-| `type`     | `"shape"`, `"track"`, `"tag"`                          | type of object                                                                                             |
-| `shape`    | `"rectangle"`,`"polygon"`, <br>`"polyline"`,`"points"` | type of shape                                                                                              |
-| `occluded` | `true` or `false`                                      | occluded properties                                                                                        |
-| `attr`     | `"text"`                                               | attribute name                                                                                             |
+| Properties  | Supported values                                       | Description                                 |
+| ----------- | ------------------------------------------------------ | --------------------------------------------|
+| `Label`     | all the label names that are in the task               | label name                                  |
+| `Type`      | shape, track or tag                                    | type of object                              |
+| `Shape`     | all shape types                                        | type of shape                               |
+| `Occluded`  | true or false                                          | occluded ([read more](#shape-mode-advanced))|
+| `Width`     | number of px or field                                  | shape width                                 |
+| `Height`    | number of px or field                                  | shape height                                |
+| `ServerID`  | number or field                                        | ID of the object on the server <br>(You can find out by forming a link to the object through the Action menu)|
+| `ObjectID`  | number or field                                        | ID of the object in your client <br>(indicated on the objects sidebar)|
+| `Attributes`| some other fields including attributes with a <br>similar type or a specific attribute value| any fields specified by a label |
 
-**Supported operators:**
+**Supported operators for properties:**
 
-`==` - Equally; `!=` - Not equal; `>` - More; `>=` - More or equal; `<` - Less; `<=` - Less or equal;
-`()` - Brackets; `&` - And; `|`- Or.
+`==` - Equally; `!=` - Not equal; `>` - More; `>=` - More or equal; `<` - Less; `<=` - Less or equal;
 
-If you have double quotes in your query string, please escape them using backslash: `\"` (see the latest example)
-All properties and values are case-sensitive. CVAT uses json queries to perform search.
+`Any in`; `Not in` - these operators allow you to set multiple values in one rule;
 
----
+![](static/documentation/images/image203.jpg)
+
+`Is empty`; `is not empty` – these operators don't require to input a value.
+
+`Between`; `Not between` – these operators allow you to choose a range between two values.
+
+Some properties support two types of values that you can choose:
+
+![](static/documentation/images/image205.jpg)
+
+You can add multiple rules, to do so click the add rule button and set another rule. Once you've set a new rule, you'll be able to choose which operator they will be connected by: `And` or `Or`.
+
+![](static/documentation/images/image206.jpg)
+
+All subsequent rules will be joined by the chosen operator. Click `Submit` to apply the filter or if you want multiple rules to be connected by different operators, use groups.
+
+### Groups
+
+To add a group, click the "add group" button. Inside the group you can create rules or groups.
+
+![](static/documentation/images/image207.jpg)
+
+If there is more than one rule in the group, they can be connected by `And` or `Or` operators.
+The rule group will work as well as a separate rule outside the group and will be joined by an
+ operator outside the group.
+You can create groups within other groups, to do so you need to click the add group button within the group.
+
+You can move rules and groups. To move the rule or group, drag it by the button.
+To remove the rule or group, click on the `Delete` button.
+
+![](static/documentation/images/image208.jpg)
+
+If you activate the `Not` button, objects that don't match the group will be filtered out.
+Click `Submit` to apply the filter.
+The "Cancel" button undoes the filter. The `Clear filter` button removes the filter.
 
-**Examples filters**
-
-- `label=="car" | label==["road sign"]` - this filter will show only objects with the car or road sign label.
-- `shape == "polygon"` - this filter will show only polygons.
-- `width >= height` - this filter will show only those objects whose width will be greater than
-  or equal to the height.
-- `attr["color"] == "black"` - this filter will show objects whose color attribute is black.
-- `clientID == 50` - this filter will show the object with id equal to 50 (e.g. rectangle 50).
-- `(label=="car" & attr["parked"]==true) | (label=="pedestrian" & width > 150)` - this filter will display objects
-  with the “car” label and the parking attribute enabled or objects with the “pedestrian” label with a height of more
-  than 150 pixels
-- `(( label==["car \"mazda\""]) | (attr["parked"]==true & width > 150)) & (height > 150 & (clientID == serverID)))` -
-  This filter will show objects with the label "car" mazda "" or objects that have the parked attribute turned on
-  and have a width of more than 150 pixels, and those listed should have a height of more than 150 pixels
-  and their clientID is equal to serverID.
-
-**Filter history**
-
-![](static/documentation/images/image175.jpg)
-
-You can add previously entered filters and combine them. To do so, click on the input field and a list of previously
-entered filters will open. Click on the filters to add them to the input field.
-Combined filters occur with the "or" operator.
+Once applied filter automatically appears in `Recent used` list. Maximum length of the list is 10.
 
 ---