From a7f02df7d07842f1cd4f00fa41ac5daa0437f28c Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Tue, 31 Mar 2020 16:11:35 +0300 Subject: [PATCH 1/3] Added dialog window with some help info about filters --- cvat-core/src/session.js | 5 +- .../annotations-filters-input.tsx | 110 ++++++++++++++++-- 2 files changed, 106 insertions(+), 9 deletions(-) diff --git a/cvat-core/src/session.js b/cvat-core/src/session.js index 987b3fae..548dd191 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 (