diff --git a/CHANGELOG.md b/CHANGELOG.md index b28a1502..f6469ca2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [1.0.0-beta] - Unreleased ### Added -- +- Dialog window with some helpful information about using filters ### Changed - diff --git a/cvat-core/src/session.js b/cvat-core/src/session.js index 987b3fae..0ae7fb1a 100644 --- a/cvat-core/src/session.js +++ b/cvat-core/src/session.js @@ -441,7 +441,7 @@ * Returns the ranges of cached frames * @method ranges * @memberof Session.frames - * @returns {Array{string}} + * @returns {Array.} * @instance * @async */ @@ -520,7 +520,8 @@ * @returns {HistoryActions} * @throws {module:API.cvat.exceptions.PluginError} * @throws {module:API.cvat.exceptions.ArgumentError} - * @returns {[string, number][]} array of pairs [action name, frame number] + * @returns {Array.>} + * array of pairs [action name, frame number] * @instance * @async */ diff --git a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx index 39ff37b6..b6e98198 100644 --- a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx +++ b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx @@ -2,9 +2,14 @@ // // SPDX-License-Identifier: MIT -import React from 'react'; +import React, { useState } from 'react'; import { connect } from 'react-redux'; import Select, { SelectValue, LabeledValue } from 'antd/lib/select'; +import Title from 'antd/lib/typography/Title'; +import Text from 'antd/lib/typography/Text'; +import Paragraph from 'antd/lib/typography/Paragraph'; +import Tooltip from 'antd/lib/tooltip'; +import Modal from 'antd/lib/modal'; import Icon from 'antd/lib/icon'; import { @@ -16,6 +21,8 @@ import { CombinedState } from 'reducers/interfaces'; interface StateToProps { annotationsFilters: string[]; annotationsFiltersHistory: string[]; + searchForwardShortcut: string; + searchBackwardShortcut: string; } interface DispatchToProps { @@ -30,11 +37,16 @@ function mapStateToProps(state: CombinedState): StateToProps { filtersHistory: annotationsFiltersHistory, }, }, + shortcuts: { + normalizedKeyMap, + }, } = state; return { annotationsFilters, annotationsFiltersHistory, + searchForwardShortcut: normalizedKeyMap.SEARCH_FORWARD, + searchBackwardShortcut: normalizedKeyMap.SEARCH_BACKWARD, }; } @@ -56,13 +68,74 @@ function mapDispatchToProps(dispatch: any): DispatchToProps { }; } +function filtersHelpModalContent( + searchForwardShortcut: string, + searchBackwardShortcut: string, +): JSX.Element { + return ( + <> + + General + + + You can use filters to display only subset of objects on a frame + or to search objects that satisfy the filters using hotkeys + + {` ${searchForwardShortcut} `} + + and + + {` ${searchBackwardShortcut} `} + + + + Supported properties: + width, height, label, serverID, clientID, type, shape, occluded +
+ Supported operators: + ==, !=, >, >=, <, <=, ~=, (), & and | +
+ + If you have double quotes in your query string, + please escape them using back slash: \" (see the latest example) + +
+ All properties and values are case-sensitive. + CVAT uses json queries to perform search. +
+ + Examples +
    +
  • label=="car" | label==["road sign"]
  • +
  • width >= height
  • +
  • attr["Attribute 1"] == attr["Attribute 2"]
  • +
  • clientID == 50
  • +
  • + (label=="car" & attr["parked"]==true) + | (label=="pedestrian" & width > 150) +
  • +
  • + (( label==["car \"mazda\""]) + & (attr["sunglasses"]==true + | (width > 150 | height > 150 & (clientID == serverID))))) +
  • +
+
+ + ); +} + function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Element { const { annotationsFilters, annotationsFiltersHistory, + searchForwardShortcut, + searchBackwardShortcut, changeAnnotationsFilters, } = props; + const [underCursor, setUnderCursor] = useState(false); + return (