Merge pull request #1339 from opencv/bs/added_filters_help_dialog

React UI: Added dialog window with some help info about filters
cvat-ai · Apr 2, 2020 · bc11af9 · bc11af9
2 parents 075ee50 + cb2c82d
commit bc11af9
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 10 deletions.
diff --git 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
@@ -441,7 +441,7 @@
                 * Returns the ranges of cached frames
                 * @method ranges
                 * @memberof Session.frames
-                * @returns {Array{string}}
+                * @returns {Array.<string>}
                 * @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.<string|number>>}
+                * 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
@@ -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,27 +68,111 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
     };
 }
 
+function filtersHelpModalContent(
+    searchForwardShortcut: string,
+    searchBackwardShortcut: string,
+): JSX.Element {
+    return (
+        <>
+            <Paragraph>
+                <Title level={3}>General</Title>
+            </Paragraph>
+            <Paragraph>
+                You can use filters to display only subset of objects on a frame
+                    or to search objects that satisfy the filters using hotkeys
+                <Text strong>
+                    {` ${searchForwardShortcut} `}
+                </Text>
+                and
+                <Text strong>
+                    {` ${searchBackwardShortcut} `}
+                </Text>
+            </Paragraph>
+            <Paragraph>
+                <Text strong>Supported properties: </Text>
+                width, height, label, serverID, clientID, type, shape, occluded
+                <br />
+                <Text strong>Supported operators: </Text>
+                    ==, !=, &gt;, &gt;=, &lt;, &lt;=, ~=, (), &amp; and |
+                <br />
+                <Text strong>
+                    If you have double quotes in your query string,
+                     please escape them using back slash: \&quot; (see the latest example)
+                </Text>
+                <br />
+                All properties and values are case-sensitive.
+                CVAT uses json queries to perform search.
+            </Paragraph>
+            <Paragraph>
+                <Title level={3}>Examples</Title>
+                <ul>
+                    <li>label==&quot;car&quot; | label==[&quot;road sign&quot;]</li>
+                    <li>width &gt;= height</li>
+                    <li>attr[&quot;Attribute 1&quot;] == attr[&quot;Attribute 2&quot;]</li>
+                    <li>clientID == 50</li>
+                    <li>
+                        (label==&quot;car&quot; &amp; attr[&quot;parked&quot;]==true)
+                        | (label==&quot;pedestrian&quot; &amp; width &gt; 150)
+                    </li>
+                    <li>
+                        (( label==[&quot;car \&quot;mazda\&quot;&quot;])
+                        &amp; (attr[&quot;sunglasses&quot;]==true
+                        | (width &gt; 150 | height &gt; 150 &amp; (clientID == serverID)))))
+                    </li>
+                </ul>
+            </Paragraph>
+        </>
+    );
+}
+
 function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Element {
     const {
         annotationsFilters,
         annotationsFiltersHistory,
+        searchForwardShortcut,
+        searchBackwardShortcut,
         changeAnnotationsFilters,
     } = props;
 
+    const [underCursor, setUnderCursor] = useState(false);
+
     return (
         <Select
             className='cvat-annotations-filters-input'
             allowClear
             value={annotationsFilters}
             mode='tags'
             style={{ width: '100%' }}
-            placeholder={(
-                <>
-                    <Icon type='filter' />
-                    <span style={{ marginLeft: 5 }}>Annotations filter</span>
-                </>
-            )}
+            placeholder={
+                underCursor ? (
+                    <>
+                        <Tooltip title='Click to open help'>
+                            <Icon
+                                type='filter'
+                                onClick={(e: React.MouseEvent) => {
+                                    e.stopPropagation();
+                                    Modal.info({
+                                        width: 700,
+                                        title: 'How to use filters?',
+                                        content: filtersHelpModalContent(
+                                            searchForwardShortcut,
+                                            searchBackwardShortcut,
+                                        ),
+                                    });
+                                }}
+                            />
+                        </Tooltip>
+                    </>
+                ) : (
+                    <>
+                        <Icon style={{ transform: 'scale(0.9)' }} type='filter' />
+                        <span style={{ marginLeft: 5 }}>Annotations filters</span>
+                    </>
+                )
+            }
             onChange={changeAnnotationsFilters}
+            onMouseEnter={() => setUnderCursor(true)}
+            onMouseLeave={() => setUnderCursor(false)}
         >
             {annotationsFiltersHistory.map((element: string): JSX.Element => (
                 <Select.Option key={element} value={element}>{element}</Select.Option>