From 0f79d3a25c81d57db427c709c0332302a08a1b0c Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Fri, 29 Jan 2021 16:11:35 +0300 Subject: [PATCH 1/8] Filters UI feature implemented --- .stylelintrc.json | 2 +- cvat-ui/package-lock.json | 27 +- cvat-ui/package.json | 4 +- .../annotation-filter-item.tsx | 115 ++++ .../annotation-filter-pane.scss | 46 ++ .../annotation-filter-pane.tsx | 185 ++++++ .../annotation-filter-help.tsx | 76 +++ .../annotation-filter-panel.scss | 202 ++++++ .../annotation-filter-panel.tsx | 576 ++++++++++++++++++ .../annotation-filter.const.ts | 57 ++ .../annotation-filter.enum.ts | 100 +++ .../objects-side-bar/objects-list-header.tsx | 19 +- .../objects-side-bar/styles.scss | 10 +- 13 files changed, 1396 insertions(+), 23 deletions(-) create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-item/annotation-filter-item.tsx create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.scss create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.tsx create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-help.tsx create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.scss create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.tsx create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.const.ts create mode 100644 cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.enum.ts diff --git a/.stylelintrc.json b/.stylelintrc.json index 44333abf546..84b1c4c2b5b 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -8,7 +8,7 @@ "at-rule-no-unknown": [ true, { - "ignoreAtRules": ["extend"] + "ignoreAtRules": ["extend", "for"] } ], "selector-type-no-unknown": [ diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 31ff2a23a27..a173b492d25 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1329,6 +1329,11 @@ "redux": "^4.0.0" } }, + "@types/uuid": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz", + "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==" + }, "@typescript-eslint/eslint-plugin": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.5.0.tgz", @@ -12886,6 +12891,7 @@ "requires": { "axios": "^0.21.1", "browser-or-node": "^1.2.1", + "cvat-data": "file:../cvat-data", "detect-browser": "^5.2.0", "error-stack-parser": "^2.0.2", "form-data": "^2.5.0", @@ -29473,6 +29479,12 @@ "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", "dev": true + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true } } }, @@ -31672,10 +31684,9 @@ "dev": true }, "uuid": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", - "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==", - "dev": true + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, "v8-compile-cache": { "version": "2.0.3", @@ -32218,6 +32229,14 @@ "requires": { "ansi-colors": "^3.0.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "dev": true + } } }, "webpack-sources": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 2945ab9b3a5..8560ac6cf4a 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -58,6 +58,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-canvas": "file:../cvat-canvas", @@ -80,6 +81,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" } } diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-item/annotation-filter-item.tsx b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-item/annotation-filter-item.tsx new file mode 100644 index 00000000000..7f9f9a74690 --- /dev/null +++ b/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} `} + {state.left?.map((leftItem: string) => leftItem)} + ) => { + e.stopPropagation(); + if (e.shiftKey) { + dispatch({ type: ActionType.addLeft }); + } else if (e.altKey) { + dispatch({ type: ActionType.removeLeft }); + } else { + onEdit(state); + } + }} + onContextMenu={(e: React.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) => { + 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}"]`} + + {state.right?.map((rightItem: string) => rightItem)} + + ); +} + +AnnotationFilterItem.propTypes = { + item: PropTypes.objectOf(PropTypes.any), + onEdit: PropTypes.func.isRequired, + onDelete: PropTypes.func.isRequired, + onGrouping: PropTypes.func, +}; + +export default AnnotationFilterItem; diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.scss b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.scss new file mode 100644 index 00000000000..f071a704624 --- /dev/null +++ b/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%; + } +} diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.tsx b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.tsx new file mode 100644 index 00000000000..645b0fd8e45 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-pane/annotation-filter-pane.tsx @@ -0,0 +1,185 @@ +// Copyright (C) 2020-2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ + +import { FilterOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons'; +import { + changeAnnotationsFilters as changeAnnotationsFiltersAction, + fetchAnnotationsAsync, +} from 'actions/annotation-actions'; +import { Popconfirm, Tag, Tooltip } from 'antd'; +import React, { + ReactElement, useEffect, useRef, useState, +} from 'react'; +import { connect } from 'react-redux'; +import { v4 as uuidv4 } from 'uuid'; +import AnnotationFilterItem from '../annotation-filter-item/annotation-filter-item'; +import AnnotationFilterPanel from '../annotation-filter-panel/annotation-filter-panel'; +import './annotation-filter-pane.scss'; + +interface DispatchToProps { + changeAnnotationsFilters(value: any): void; +} + +function mapDispatchToProps(dispatch: any): DispatchToProps { + return { + changeAnnotationsFilters(value: any) { + dispatch(changeAnnotationsFiltersAction(value)); + dispatch(fetchAnnotationsAsync()); + }, + }; +} + +const AnnotationFilterPane = (props: DispatchToProps): ReactElement => { + const { changeAnnotationsFilters } = props; + + const [editItem, setEditItem] = useState(); + const [filters, setFilters] = useState([] as any); + const [filterPanelVisible, setFilterPanelVisible] = useState(false); + + const filtersPaneRef = useRef(null); + const filtersEndRef = useRef(null); + const clearFiltersRef = useRef(null); + + const scrollFiltersToBottom = (): void => { + setTimeout(() => filtersEndRef?.current?.scrollIntoView({ block: 'center', behavior: 'smooth' }), 100); + }; + + const resetFilters = (e: React.MouseEvent): void => { + e.preventDefault(); + setFilters([]); + }; + + const confirmClearFilters = (e: React.MouseEvent): void => { + e.preventDefault(); + clearFiltersRef?.current?.click(); + }; + + const isGroupingValid = (): boolean => { + let openBraces = 0; + let closeBraces = 0; + filters.forEach((filter: any) => { + openBraces += filter.left.length; + closeBraces += filter.right.length; + }); + return openBraces === closeBraces; + }; + + useEffect(() => { + if (isGroupingValid()) { + const filtersStr = filtersPaneRef.current?.innerText.replace(/(?:\r\n|\r|\n)/g, ''); + changeAnnotationsFilters(filters.length ? [filtersStr] : []); + } + scrollFiltersToBottom(); + }, [filters]); + + useEffect(() => { + if (!filterPanelVisible) setEditItem(undefined); + }, [filterPanelVisible]); + + const addFilter = (filter: any): void => { + const newFilter = { ...filter }; + newFilter.id = uuidv4(); + newFilter.left = []; + newFilter.right = []; + setFilters([...filters, newFilter]); + }; + + const editFilter = (filter: any): void => { + let filterToEditIndex = -1; + filters.find((filterItem: any, filterItemIndex: number): boolean => { + filterToEditIndex = filterItemIndex; + return filterItem.id === filter.id; + }); + if (filterToEditIndex >= 0) { + filters[filterToEditIndex] = { ...filter, id: uuidv4() }; + setFilters([...filters]); + } + setFilterPanelVisible(false); + }; + + return ( + <> + +
{ + if (!filters.length) { + setFilterPanelVisible(true); + } + }} + style={{ cursor: filters.length ? 'default' : 'pointer' }} + onContextMenu={(e: React.MouseEvent) => confirmClearFilters(e)} + > + {filters?.length ? ( + <> + {filters.map((item: any) => ( + { + const filterIndex = filters.findIndex( + (filterItem: any) => filterItem.id === filter.id, + ); + filters[filterIndex] = { ...filters[filterIndex], left: filter.left }; + filters[filterIndex] = { ...filters[filterIndex], right: filter.right }; + setFilters([...filters]); + }} + onEdit={(filterToEdit: any) => { + setEditItem(filterToEdit); + setFilterPanelVisible(true); + }} + onDelete={(filterToDelete: any) => { + const newFilters = filters.filter( + (filterItem: any) => filterItem.id !== filterToDelete.id, + ); + if (newFilters.length) { + newFilters[0].id = uuidv4(); + newFilters[0].concatenator = null; + } + setFilters(newFilters); + }} + /> + ))} +
e.stopPropagation()}> + } + onConfirm={(e: any) => resetFilters(e)} + okText='Yes' + cancelText='No' + > + + +
+ setFilterPanelVisible(true)}> + + +
+ + ) : ( +
+ + Annotations filters +
+ )} +
+ setFilterPanelVisible(false)} + onAdd={(filter: any) => addFilter(filter)} + onEdit={(filter: any) => editFilter(filter)} + /> + + + ); +}; + +export default connect(null, mapDispatchToProps)(AnnotationFilterPane); diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-help.tsx b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-help.tsx new file mode 100644 index 00000000000..c8db5c87022 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-help.tsx @@ -0,0 +1,76 @@ +// Copyright (C) 2020-2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +import Paragraph from 'antd/lib/typography/Paragraph'; +import Text from 'antd/lib/typography/Text'; +import Title from 'antd/lib/typography/Title'; +import PropTypes from 'prop-types'; +import React, { ReactElement } from 'react'; +import './annotation-filter-panel.scss'; + +interface Props { + searchForwardShortcut: string; + searchBackwardShortcut: string; +} + +const AnnotationFilterHelp = ({ searchForwardShortcut, searchBackwardShortcut }: Props): ReactElement => ( + + + 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: + label, width, height, serverID, clientID, type, shape, occluded, attribute, empty frame +
+ 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. + + + Filters grouping + Inside filters pane you can group filters +
+
+ Shift + Left click: + Add an open brace before clicked item +
+ Shift + Right click: + Add a close brace after clicked item +
+ Alt (Option for Mac users) + Left click: + Remove an open brace before clicked item +
+ Alt (Option for Mac users) + Right click: + Remove a close brace after clicked item +
+
+ If grouping is invalid you will see the red border across the pane +
+
+ To clean up the filters use + Right click + in any place of the pane + + +); + +AnnotationFilterHelp.propTypes = { + searchForwardShortcut: PropTypes.string.isRequired, + searchBackwardShortcut: PropTypes.string.isRequired, +}; + +export default AnnotationFilterHelp; diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.scss b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.scss new file mode 100644 index 00000000000..5729728033e --- /dev/null +++ b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.scss @@ -0,0 +1,202 @@ +// Copyright (C) 2020-2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +@import '../../../../base.scss'; + +$panel-width: 300px; +$panel-padding: $grid-unit-size * 2; + +$panel-top-offset: 110px; +$panel-right-offset: $panel-width; + +$label-width: $grid-unit-size * 9; +$label-concatenator-width: $grid-unit-size * 23; + +$option-popup-width: $panel-width - $label-width - ($panel-padding * 2); +$option-popup-concatenator-width: $panel-width - $label-concatenator-width - ($panel-padding * 2); + +$option-operator-width: $grid-unit-size * 7; +$option-value-width: $panel-width - $label-concatenator-width - ($panel-padding * 2); + +$options-quantity-limit: 10; + +.annotation-filters-panel { + position: absolute; + top: $panel-top-offset; + right: $panel-right-offset; + user-select: none; + + .ant-modal-content { + background-color: $background-color-2; + outline: 1px solid $border-color-1; + border-radius: 0; + + .ant-modal-help { + position: absolute; + top: $grid-unit-size * 2; + right: $grid-unit-size * 5; + font-size: $grid-unit-size * 2; + color: #848484; + cursor: pointer; + } + + .ant-modal-close { + top: $grid-unit-size * 2; + right: $grid-unit-size * 2; + + .ant-modal-close-x { + width: $grid-unit-size * 2; + height: $grid-unit-size * 2; + line-height: 1; + } + } + + .ant-modal-body { + padding: $panel-padding; + line-height: 1; + + .filter-option-wrapper { + margin: ($grid-unit-size * 2) 0; + + .filter-option { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + &:not(:first-of-type) { + margin-top: $grid-unit-size; + } + + .filter-option-label { + width: $label-width; + + &.concatenator { + width: $label-concatenator-width; + } + } + + .filter-option-value-wrapper { + display: flex; + flex-direction: row; + align-items: center; + flex: 1; + + .filter-option-value { + flex: 1; + + & > * { + width: 100%; + } + + &.operator { + flex: none; + width: $option-operator-width; + } + + .ant-radio-group { + display: flex; + flex-direction: row; + justify-content: flex-end; + + .ant-radio-wrapper:last-of-type { + margin-right: 0; + + span.ant-radio + * { + padding-right: 0; + } + } + } + + .numeric-autocomplete { + .ant-input { + text-align: right; + } + } + } + + & > :not(:last-child) { + margin-right: $grid-unit-size; + } + } + } + } + + .filter-action-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + + & > *:not(:last-of-type) { + margin-right: $grid-unit-size * 2; + } + } + } + } +} + +.cascader-popup { + $cascader-popup-item-height: $grid-unit-size * 4; + + width: $option-popup-width; + + @for $i from 1 through $options-quantity-limit { + &.options-#{$i} { + ul { + height: $grid-unit-size + ($cascader-popup-item-height * $i); + } + } + } + + ul { + min-width: unset; + max-width: unset; + width: $option-popup-width; + + li { + height: $cascader-popup-item-height; + } + } + + &.concatenator { + width: $option-popup-concatenator-width; + + ul { + width: $option-popup-concatenator-width; + } + } + + &.operator { + width: $option-operator-width; + + ul { + width: $option-operator-width; + } + } + + &.value { + $value-width: ($panel-width - $label-width - ($panel-padding * 2) - $option-operator-width - $grid-unit-size); + + width: $value-width; + + ul { + width: $value-width; + } + } + + &.value-label-postfix { + width: $grid-unit-size * 19.5; + + ul { + width: $grid-unit-size * 19.5; + } + } +} + +.ant-select-dropdown { + ul { + max-height: $grid-unit-size * 40; + } +} diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.tsx b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.tsx new file mode 100644 index 00000000000..9ee4708e430 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter-panel/annotation-filter-panel.tsx @@ -0,0 +1,576 @@ +// Copyright (C) 2020-2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +import { QuestionCircleOutlined } from '@ant-design/icons'; +import { + AutoComplete, Button, Cascader, Modal, Radio, +} from 'antd'; +import { RadioChangeEvent } from 'antd/lib/radio'; +import { SelectValue } from 'antd/lib/select'; +import PropTypes from 'prop-types'; +import React, { + ReactElement, useEffect, useReducer, useState, +} from 'react'; +import { useSelector } from 'react-redux'; +import { AnnotationState, CombinedState, ShortcutsState } from 'reducers/interfaces'; +import { + concatenatorOptions, + filterByBooleanOptions, + filterByOptions, + filterByShapeOptions, + filterByTypeOptions, + operatorOptions, +} from '../annotation-filter.const'; +import { + ActionType, + BooleanFilterByOptions, + ConcatenatorOptionsValues, + FilterByValues, + NumericFilterByOptions, + OperatorOptionsValues, + PixelFilterByOptions, + StateFields, + StateLevels, +} from '../annotation-filter.enum'; +import AnnotationFilterHelp from './annotation-filter-help'; +import './annotation-filter-panel.scss'; + +interface Props { + editItem: any; + isFirst?: boolean; + isVisible: boolean; + onClose: Function; + onAdd: Function; + onEdit: Function; +} + +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[]; +} + +const reducer = (state: State, action: { type: ActionType; payload?: any }): State => { + switch (action.type) { + case ActionType.concatenator: + return { ...state, concatenator: action.payload }; + case ActionType.filterBy: + return { ...state, filterBy: action.payload }; + case ActionType.operator: + return { ...state, operator: action.payload }; + case ActionType.value: + return { ...state, value: action.payload }; + case ActionType.attribute: + return { ...state, attribute: action.payload }; + case ActionType.attributeOperator: + return { ...state, attributeOperator: action.payload }; + case ActionType.attributeValue: + return { ...state, attributeValue: action.payload }; + case ActionType.anotherAttributeLabel: + return { ...state, anotherAttributeLabel: action.payload }; + case ActionType.anotherAttributeValue: + return { ...state, anotherAttributeValue: action.payload }; + case ActionType.fillState: + return { ...action.payload }; + case ActionType.partialReset: + if (!action.payload || action.payload.id) return state; + return { + ...state, + operator: action.payload < StateLevels.operator ? '' : state.operator, + value: action.payload < StateLevels.operator ? '' : state.value, + attribute: action.payload < StateLevels.attribute ? '' : state.attribute, + attributeOperator: action.payload < StateLevels.attributeOperator ? '' : state.attributeOperator, + attributeValue: action.payload < StateLevels.attributeOperator ? '' : state.attributeValue, + anotherAttributeLabel: + action.payload < StateLevels.anotherAttributeLabel && + action.payload !== StateLevels.attributeOperator ? + '' : + state.anotherAttributeLabel, + anotherAttributeValue: + action.payload < StateLevels.anotherAttributeValue && + action.payload !== StateLevels.attributeOperator ? + '' : + state.anotherAttributeValue, + }; + case ActionType.reset: + return {} as State; + default: + return state; + } +}; + +const AnnotationFilterPanel = ({ + isFirst, isVisible, onClose, onAdd, onEdit, editItem, +}: Props): ReactElement => { + const [state, dispatch] = useReducer(reducer, {} as State); + const [isFormValid, setFormValid] = useState(false); + const [editModeInitiated, setEditModeInitiated] = useState(false); + const annotation: AnnotationState = useSelector((globalState: CombinedState) => globalState.annotation); + const shortcuts: ShortcutsState = useSelector((globalState: CombinedState) => globalState.shortcuts); + + const isFilled = (fieldName: StateFields): boolean => state[fieldName]?.toString().trim().length > 0; + + const isAttributeFilterBy = (): boolean => FilterByValues.attribute === state.filterBy; + const isBooleanFilterBy = (): boolean => Object.values(BooleanFilterByOptions).includes(state.filterBy); + const isNumericFilterBy = (): boolean => Object.values(NumericFilterByOptions).includes(state.filterBy); + const isPixelFilterBy = (): boolean => Object.values(PixelFilterByOptions).includes(state.filterBy); + + const getMemorizedFilterOptions = (): any[] => { + const memorizedFilters = JSON.parse(localStorage.getItem('filters') ?? '{}'); + const memorizedFilterOptions: string[] = memorizedFilters[state.filterBy] ?? []; + return memorizedFilterOptions.map((mf: string) => ({ label: mf, value: mf })); + }; + + const setMemorizedFilters = (): void => { + const filters = JSON.parse(localStorage.getItem('filters') ?? '{}'); + filters[state.filterBy] = [state.value, ...(filters[state.filterBy] ?? [])]; + filters[state.filterBy] = filters[state.filterBy] + .filter((value: string) => value) + .filter((value: string, index: number, self: string[]) => self.indexOf(value) === index) + .slice(0, 10); + localStorage.setItem('filters', JSON.stringify(filters)); + }; + + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.concatenator }); + if (isBooleanFilterBy()) dispatch({ type: ActionType.operator, payload: OperatorOptionsValues.eq }); + }, [state.concatenator]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.filterBy }); + if (isBooleanFilterBy()) dispatch({ type: ActionType.operator, payload: OperatorOptionsValues.eq }); + }, [state.filterBy]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.operator }); + }, [state.operator]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.value }); + }, [state.value]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.attribute }); + }, [state.attribute]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.attributeOperator }); + }, [state.attributeOperator]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.attributeValue }); + }, [state.attributeValue]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.anotherAttributeLabel }); + }, [state.anotherAttributeLabel]); + useEffect(() => { + if (editModeInitiated) return; + dispatch({ type: ActionType.partialReset, payload: StateLevels.anotherAttributeValue }); + }, [state.anotherAttributeValue]); + + useEffect(() => { + let isValid = isFilled(StateFields.filterBy) && isFilled(StateFields.value); + if (isAttributeFilterBy()) { + isValid = + isValid && + isFilled(StateFields.attribute) && + isFilled(StateFields.attributeOperator) && + isFilled(StateFields.attributeValue); + if (state.attributeValue === 'anotherAttribute') { + isValid = + isValid && + isFilled(StateFields.anotherAttributeLabel) && + isFilled(StateFields.anotherAttributeValue); + } + } else { + isValid = isValid && isFilled(StateFields.operator); + } + setFormValid(isFirst ? isValid : isValid && isFilled(StateFields.concatenator)); + }, [state]); + + useEffect(() => { + setTimeout(() => { + dispatch({ type: ActionType.reset }); + if (editItem) { + setEditModeInitiated(true); + dispatch({ type: ActionType.fillState, payload: editItem }); + setEditModeInitiated(false); + return; + } + if (!isFirst) dispatch({ type: ActionType.concatenator, payload: ConcatenatorOptionsValues.and }); + }, 100); + }, [isVisible]); + + useEffect(() => { + if (isNumericFilterBy()) setMemorizedFilters(); + dispatch({ type: ActionType.reset }); + if (!isFirst) dispatch({ type: ActionType.concatenator, payload: ConcatenatorOptionsValues.and }); + }, [onAdd]); + + const getOperatorOptions = (): Record[] => { + if (!Object.values(NumericFilterByOptions).includes(state.filterBy)) { + return operatorOptions.filter((option) => option.any); + } + return operatorOptions; + }; + + const getValueOptions = (): Record[] => { + switch (state.filterBy) { + case FilterByValues.label: + case FilterByValues.attribute: + return [{ label: 'All', value: 'all' }].concat( + ...annotation.job.labels.map((item: Record) => ({ + label: item.name, + value: item.name, + })), + ); + case FilterByValues.type: + return filterByTypeOptions; + case FilterByValues.shape: + return filterByShapeOptions; + case FilterByValues.occluded: + case FilterByValues.emptyFrame: + return filterByBooleanOptions; + default: + return []; + } + }; + + const getAttributeOptions = (stateValue: string): Record[] => { + let attributeOptions: Record[]; + if (stateValue === 'all') { + attributeOptions = [].concat(...(Object.values(annotation.job.attributes) as any[])); + } else { + attributeOptions = + annotation.job.labels.find((item: Record) => item.name === stateValue)?.attributes ?? []; + } + return attributeOptions.map((attr: Record) => ({ + label: attr.name, + value: attr.name, + type: attr.inputType, + })); + }; + + const getAttributeOperatorOptions = (): Record[] => { + const currentAttr = getAttributeOptions(state.value).find( + (attr: Record) => attr.label === state.attribute, + ); + if (currentAttr?.type !== 'number') { + return operatorOptions.filter((option) => option.any); + } + return operatorOptions; + }; + + const getAttributeValueOptions = (): Record[] => { + const valueOptions: any[] = [] + .concat(...(Object.values(annotation.job.attributes) as any[])) + .find((attr: Record) => attr.name === state.attribute) + ?.values.map((val: any) => ({ label: val.toString(), value: val.toString() })); + valueOptions.unshift({ label: 'Another attribute', value: 'anotherAttribute' }); + return valueOptions; + }; + + return ( + onClose()} + visible={isVisible} + footer={false} + mask={false} + width={300} + > + { + e.stopPropagation(); + Modal.info({ + width: 700, + title: 'How to use filters?', + content: ( + + ), + }); + }} + /> + {!editItem &&

Add new filter

} + {editItem &&

Update filter

} +
+
+ + {!editItem && 'Add as new '} + {editItem && 'Update '} + with operator + +
+
+ + dispatch({ type: ActionType.concatenator, payload: value[0] })} + value={[state.concatenator]} + popupClassName={`cascader-popup options-${concatenatorOptions.length} concatenator`} + disabled={isFirst} + allowClear={false} + placeholder='' + size='small' + /> +
+
+
+
+ Filter by +
+
+ dispatch({ type: ActionType.filterBy, payload: value[0] })} + value={[state.filterBy]} + popupClassName={`cascader-popup options-${filterByOptions.length}`} + allowClear={false} + placeholder='' + size='small' + /> +
+
+
+ {state.filterBy && !isBooleanFilterBy() && !isAttributeFilterBy() && ( +
+ + {filterByOptions.find((option) => option.value === state.filterBy)?.label} + +
+
+ + dispatch({ type: ActionType.operator, payload: value[0] })} + value={[state.operator]} + popupClassName={`cascader-popup options-${getOperatorOptions()?.length} operator`} + allowClear={false} + placeholder='' + size='small' + /> +
+ {!isNumericFilterBy() && ( +
+ + dispatch({ type: ActionType.value, payload: value[0] })} + value={[state.value]} + popupClassName={`cascader-popup options-${getValueOptions()?.length} value`} + allowClear={false} + placeholder='' + size='small' + /> +
+ )} + {isNumericFilterBy() && ( +
+ + `${option?.value}`.indexOf(inputValue) >= 0} + onChange={(value: SelectValue) => + dispatch({ type: ActionType.value, payload: value })} + value={state.value} + placeholder='' + size='small' + /> +
+ )} + {isPixelFilterBy() && px} +
+
+ )} + {state.filterBy && isBooleanFilterBy() && ( +
+ + {filterByOptions.find((option) => option.value === state.filterBy)?.label} + +
+
+ + dispatch({ type: ActionType.value, payload: e.target.value })} + value={state.value} + > + {filterByBooleanOptions.map((option) => ( + + {option.label} + + ))} + +
+
+
+ )} + {isAttributeFilterBy() && ( +
+ List for +
+
+ dispatch({ type: ActionType.value, payload: value[0] })} + value={[state.value]} + popupClassName={`cascader-popup options-${ + getValueOptions()?.length + } value-label-postfix`} + allowClear={false} + placeholder='' + size='small' + /> +
+ + label + {state.value === 'all' ? 's' : ''} + +
+
+ )} + {isAttributeFilterBy() && state.value && ( +
+ Attribute +
+
+ + dispatch({ type: ActionType.attribute, payload: value[0] })} + value={[state.attribute]} + popupClassName={`cascader-popup options-${ + getAttributeOptions(state.value)?.length + }`} + allowClear={false} + placeholder='' + size='small' + /> +
+
+
+ )} + {isAttributeFilterBy() && state.attribute && ( + <> +
+ Value +
+
+ + dispatch({ type: ActionType.attributeOperator, payload: value[0] })} + value={[state.attributeOperator]} + popupClassName={`cascader-popup options-${ + getAttributeOperatorOptions()?.length + } operator`} + allowClear={false} + placeholder='' + size='small' + /> +
+
+ + dispatch({ type: ActionType.attributeValue, payload: value[0] })} + value={[state.attributeValue]} + popupClassName={`cascader-popup options-${ + getAttributeValueOptions()?.length + } value`} + allowClear={false} + placeholder='' + size='small' + /> +
+
+
+ {state.attributeValue === 'anotherAttribute' && ( +
+ List for +
+
+ + dispatch({ type: ActionType.anotherAttributeLabel, payload: value[0] })} + value={[state.anotherAttributeLabel]} + popupClassName={`cascader-popup options-${ + getValueOptions()?.length + } value-label-postfix`} + allowClear={false} + placeholder='' + size='small' + /> +
+ + label + {state.anotherAttributeLabel === 'all' ? 's' : ''} + +
+
+ )} + {state.anotherAttributeLabel && ( +
+ Attribute +
+
+ + dispatch({ type: ActionType.anotherAttributeValue, payload: value[0] })} + value={[state.anotherAttributeValue]} + popupClassName={`cascader-popup options-${ + getAttributeOptions(state.anotherAttributeLabel)?.length + }`} + allowClear={false} + placeholder='' + size='small' + /> +
+
+
+ )} + + )} +
+
+ +
+ + ); +}; + +AnnotationFilterPanel.propTypes = { + editItem: PropTypes.objectOf(PropTypes.any), + isFirst: PropTypes.bool, + isVisible: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + onAdd: PropTypes.func.isRequired, + onEdit: PropTypes.func.isRequired, +}; + +export default AnnotationFilterPanel; diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.const.ts b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.const.ts new file mode 100644 index 00000000000..08b52d80617 --- /dev/null +++ b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.const.ts @@ -0,0 +1,57 @@ +// Copyright (C) 2020-2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +import { + ConcatenatorOptionsValues, + FilterByShapeValues, + FilterByTypeValues, + FilterByValues, + OperatorOptionsValues, +} from './annotation-filter.enum'; + +export const concatenatorOptions: Record[] = [ + { label: 'and (&)', value: ConcatenatorOptionsValues.and }, + { label: 'or (|)', value: ConcatenatorOptionsValues.or }, +]; + +export const filterByOptions: Record[] = [ + { label: 'Label', value: FilterByValues.label }, + { label: 'Width', value: FilterByValues.width }, + { label: 'Height', value: FilterByValues.height }, + { label: 'Server ID', value: FilterByValues.serverID }, + { label: 'Client ID', value: FilterByValues.clientID }, + { label: 'Type', value: FilterByValues.type }, + { label: 'Shape', value: FilterByValues.shape }, + { label: 'Occluded', value: FilterByValues.occluded }, + { label: 'Attribute', value: FilterByValues.attribute }, + { label: 'Empty Frame', value: FilterByValues.emptyFrame }, +]; + +export const filterByBooleanOptions: Record[] = [ + { label: 'True', value: true }, + { label: 'False', value: false }, +]; + +export const filterByTypeOptions: Record[] = [ + { label: 'Shape', value: FilterByTypeValues.shape }, + { label: 'Track', value: FilterByTypeValues.track }, +]; + +export const filterByShapeOptions: Record[] = [ + { label: 'Rectangle', value: FilterByShapeValues.rectangle }, + { label: 'Points', value: FilterByShapeValues.points }, + { label: 'Polyline', value: FilterByShapeValues.polyline }, + { label: 'Polygon', value: FilterByShapeValues.polygon }, + { label: 'Cuboids', value: FilterByShapeValues.cuboids }, + { label: 'Tag', value: FilterByShapeValues.tag }, +]; + +export const operatorOptions: Record[] = [ + { label: OperatorOptionsValues.eq, value: OperatorOptionsValues.eq, any: true }, + { label: OperatorOptionsValues.neq, value: OperatorOptionsValues.neq, any: true }, + { label: OperatorOptionsValues.gt, value: OperatorOptionsValues.gt, any: false }, + { label: OperatorOptionsValues.gte, value: OperatorOptionsValues.gte, any: false }, + { label: OperatorOptionsValues.lt, value: OperatorOptionsValues.lt, any: false }, + { label: OperatorOptionsValues.lte, value: OperatorOptionsValues.lte, any: false }, +]; diff --git a/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.enum.ts b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.enum.ts new file mode 100644 index 00000000000..df84390d3ce --- /dev/null +++ b/cvat-ui/src/components/annotation-page/annotation-filter/annotation-filter.enum.ts @@ -0,0 +1,100 @@ +// Copyright (C) 2020-2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +export enum StateLevels { + concatenator, + filterBy, + operator, + value, + attribute, + attributeOperator, + attributeValue, + anotherAttributeLabel, + anotherAttributeValue, +} + +export enum ActionType { + concatenator, + filterBy, + operator, + value, + attribute, + attributeOperator, + attributeValue, + anotherAttributeLabel, + anotherAttributeValue, + fillState, + partialReset, + reset, +} + +export enum ConcatenatorOptionsValues { + or = '|', + and = '&', +} + +export enum FilterByValues { + label = 'label', + width = 'width', + height = 'height', + serverID = 'serverID', + clientID = 'clientID', + type = 'type', + shape = 'shape', + occluded = 'occluded', + attribute = 'attribute', + emptyFrame = 'empty_frame', +} + +export enum FilterByTypeValues { + shape = 'shape', + track = 'track', +} + +export enum FilterByShapeValues { + rectangle = 'rectangle', + points = 'points', + polyline = 'polyline', + polygon = 'polygon', + cuboids = 'cuboids', + tag = 'tag', +} + +export enum OperatorOptionsValues { + eq = '==', + neq = '!=', + gt = '>', + gte = '>=', + lt = '<', + lte = '<=', +} + +export enum NumericFilterByOptions { + width, + height, + serverID, + clientID, +} + +export enum PixelFilterByOptions { + width, + height, +} + +export enum BooleanFilterByOptions { + occluded, + empty_frame, +} + +export enum StateFields { + concatenator = 'concatenator', + filterBy = 'filterBy', + operator = 'operator', + value = 'value', + attribute = 'attribute', + attributeOperator = 'attributeOperator', + attributeValue = 'attributeValue', + anotherAttributeLabel = 'anotherAttributeLabel', + anotherAttributeValue = 'anotherAttributeValue', +} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx index 05c1272ace4..564ab148840 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx @@ -1,22 +1,21 @@ -// Copyright (C) 2020 Intel Corporation +// Copyright (C) 2021 Intel Corporation // // SPDX-License-Identifier: MIT -import React from 'react'; -import { Row, Col } from 'antd/lib/grid'; import { - LockFilled, - UnlockOutlined, - EyeInvisibleFilled, - EyeOutlined, CaretDownOutlined, CaretUpFilled, + EyeInvisibleFilled, + EyeOutlined, + LockFilled, + UnlockOutlined, } from '@ant-design/icons'; +import { Col, Row } from 'antd/lib/grid'; import Tooltip from 'antd/lib/tooltip'; - -import AnnotationsFiltersInput from 'components/annotation-page/annotations-filters-input'; import StatesOrderingSelector from 'components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector'; +import React from 'react'; import { StatesOrdering } from 'reducers/interfaces'; +import AnnotationFilterPane from '../../annotation-filter/annotation-filter-pane/annotation-filter-pane'; interface Props { readonly: boolean; @@ -87,7 +86,7 @@ function ObjectListHeader(props: Props): JSX.Element {
- + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss index c000b9046e7..d2e4339493b 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss @@ -129,19 +129,15 @@ .cvat-objects-sidebar-states-header { background: $objects-bar-tabs-color; - padding: 5px; - height: 80px; + padding: $grid-unit-size; - > div:nth-child(1) > div:nth-child(1) { - height: 32px; + > div:not(:first-of-type) { + margin-top: $grid-unit-size; } > div:nth-child(2) { - margin-top: $grid-unit-size; - > div { text-align: center; - margin: 0 2px; > span[role='img'] { @extend .cvat-object-sidebar-icon; From 6bf4f59b6055fd197aa6ea2761adbacb15f81624 Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Fri, 29 Jan 2021 16:39:22 +0300 Subject: [PATCH 2/8] CHANGELOG, version increment, babel nullish-coalescing-operator --- CHANGELOG.md | 1 + cvat-ui/package-lock.json | 37 ++++++++++++++++++++++++++++++++++++- cvat-ui/package.json | 3 ++- cvat-ui/webpack.config.js | 1 + 4 files changed, 40 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 76745df0696..fa616b1df38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - CVAT-3D: support lidar data on the server side () +- Annotations Filters UI () ### Changed diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index a173b492d25..7a5aec9a2ae 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.13.8", + "version": "1.14.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -428,6 +428,24 @@ "@babel/plugin-syntax-json-strings": "^7.2.0" } }, + "@babel/plugin-proposal-nullish-coalescing-operator": { + "version": "7.12.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz", + "integrity": "sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.10.4", + "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + } + } + }, "@babel/plugin-proposal-object-rest-spread": { "version": "7.6.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.6.2.tgz", @@ -514,6 +532,23 @@ "@babel/helper-plugin-utils": "^7.0.0" } }, + "@babel/plugin-syntax-nullish-coalescing-operator": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz", + "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "dependencies": { + "@babel/helper-plugin-utils": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz", + "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==", + "dev": true + } + } + }, "@babel/plugin-syntax-object-rest-spread": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 8560ac6cf4a..1ef876206a9 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.13.8", + "version": "1.14.0", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { @@ -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", diff --git a/cvat-ui/webpack.config.js b/cvat-ui/webpack.config.js index 50c13cfee39..b5cffaeb95a 100644 --- a/cvat-ui/webpack.config.js +++ b/cvat-ui/webpack.config.js @@ -45,6 +45,7 @@ module.exports = { plugins: [ '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining', + '@babel/plugin-proposal-nullish-coalescing-operator', [ 'import', { From 050eb942c96a36c5474f14e303bf39d3e65557b8 Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Mon, 1 Feb 2021 11:30:02 +0300 Subject: [PATCH 3/8] Build error fix --- cvat-ui/package-lock.json | 1 - 1 file changed, 1 deletion(-) diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 7a5aec9a2ae..16649996481 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -12926,7 +12926,6 @@ "requires": { "axios": "^0.21.1", "browser-or-node": "^1.2.1", - "cvat-data": "file:../cvat-data", "detect-browser": "^5.2.0", "error-stack-parser": "^2.0.2", "form-data": "^2.5.0", From 79feb875485bc1c73ff246f82302b59f32752778 Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Mon, 1 Feb 2021 17:27:20 +0300 Subject: [PATCH 4/8] Build error fix --- cvat-ui/package-lock.json | 6 +++--- cvat-ui/package.json | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 16649996481..8ec64520662 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -31718,9 +31718,9 @@ "dev": true }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + "version": "8.3.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz", + "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==" }, "v8-compile-cache": { "version": "2.0.3", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 1ef876206a9..a7f180e55ce 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -59,7 +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", + "@types/uuid": "8.3.0", "antd": "^4.10.2", "copy-to-clipboard": "^3.3.1", "cvat-canvas": "file:../cvat-canvas", @@ -83,6 +83,6 @@ "redux-devtools-extension": "^2.13.8", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0", - "uuid": "^8.3.1" + "uuid": "8.3.1" } } From a70e6079cacf02878f134837a7b15da3324daea9 Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Tue, 2 Feb 2021 15:42:44 +0300 Subject: [PATCH 5/8] package-lock update --- cvat-ui/package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 8ec64520662..e407cbfafb0 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -12926,6 +12926,7 @@ "requires": { "axios": "^0.21.1", "browser-or-node": "^1.2.1", + "cvat-data": "file:../cvat-data", "detect-browser": "^5.2.0", "error-stack-parser": "^2.0.2", "form-data": "^2.5.0", From 48170650de1bf7e9aba51d2d50a3a27b56af54e3 Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Tue, 2 Feb 2021 16:05:54 +0300 Subject: [PATCH 6/8] Merged with current develop --- cvat-ui/package-lock.json | 1 - 1 file changed, 1 deletion(-) diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index a9d17d028e8..c0f53ff68db 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -12926,7 +12926,6 @@ "requires": { "axios": "^0.21.1", "browser-or-node": "^1.2.1", - "cvat-data": "file:../cvat-data", "detect-browser": "^5.2.0", "error-stack-parser": "^2.0.2", "form-data": "^2.5.0", From 93407c89c185022d26f31b9b5c7f10a6f2280cee Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Thu, 4 Feb 2021 16:33:12 +0300 Subject: [PATCH 7/8] Old filters e2e tests skip --- .../case_18_filters_functionality.js | 346 +++++++++--------- 1 file changed, 173 insertions(+), 173 deletions(-) diff --git a/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js b/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js index 203155ed589..a489ff8eab5 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js +++ b/tests/cypress/integration/actions_tasks_objects/case_18_filters_functionality.js @@ -1,183 +1,183 @@ -// Copyright (C) 2020 Intel Corporation +// Copyright (C) 2021 Intel Corporation // // SPDX-License-Identifier: MIT -/// +// /// -import { taskName } from '../../support/const'; +// import { taskName } from '../../support/const'; -context('Filters functionality.', () => { - const caseId = '18'; - const labelShape = 'shape 3 points'; - const additionalAttrsLabelShape = [ - { additionalAttrName: 'type', additionalValue: 'shape', typeAttribute: 'Text' }, - { additionalAttrName: 'count points', additionalValue: '3', typeAttribute: 'Text' }, - { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' }, - ]; - const labelTrack = 'track 4 points'; - const additionalAttrsLabelTrack = [ - { additionalAttrName: 'type', additionalValue: 'track', typeAttribute: 'Text' }, - { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' }, - { additionalAttrName: 'count points', additionalValue: '4', typeAttribute: 'Text' }, - ]; +// context('Filters functionality.', () => { +// const caseId = '18'; +// const labelShape = 'shape 3 points'; +// const additionalAttrsLabelShape = [ +// { additionalAttrName: 'type', additionalValue: 'shape', typeAttribute: 'Text' }, +// { additionalAttrName: 'count points', additionalValue: '3', typeAttribute: 'Text' }, +// { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' }, +// ]; +// const labelTrack = 'track 4 points'; +// const additionalAttrsLabelTrack = [ +// { additionalAttrName: 'type', additionalValue: 'track', typeAttribute: 'Text' }, +// { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' }, +// { additionalAttrName: 'count points', additionalValue: '4', typeAttribute: 'Text' }, +// ]; - const createPolygonShape = { - reDraw: false, - type: 'Shape', - labelName: labelShape, - pointsMap: [ - { x: 200, y: 200 }, - { x: 250, y: 200 }, - { x: 250, y: 240 }, - ], - complete: true, - numberOfPoints: null, - }; - const createRectangleTrack2Points = { - points: 'By 2 Points', - type: 'Track', - labelName: labelTrack, - firstX: 260, - firstY: 200, - secondX: 360, - secondY: 250, - }; - const createRectangleShape4Points = { - points: 'By 4 Points', - type: 'Shape', - labelName: labelShape, - firstX: 550, - firstY: 350, - secondX: 650, - secondY: 350, - thirdX: 650, - thirdY: 450, - fourthX: 550, - fourthY: 450, - }; - const createPolygonTrack = { - reDraw: false, - type: 'Track', - labelName: labelTrack, - pointsMap: [ - { x: 700, y: 350 }, - { x: 850, y: 350 }, - { x: 850, y: 450 }, - { x: 700, y: 450 }, - ], - numberOfPoints: 4, - }; +// const createPolygonShape = { +// reDraw: false, +// type: 'Shape', +// labelName: labelShape, +// pointsMap: [ +// { x: 200, y: 200 }, +// { x: 250, y: 200 }, +// { x: 250, y: 240 }, +// ], +// complete: true, +// numberOfPoints: null, +// }; +// const createRectangleTrack2Points = { +// points: 'By 2 Points', +// type: 'Track', +// labelName: labelTrack, +// firstX: 260, +// firstY: 200, +// secondX: 360, +// secondY: 250, +// }; +// const createRectangleShape4Points = { +// points: 'By 4 Points', +// type: 'Shape', +// labelName: labelShape, +// firstX: 550, +// firstY: 350, +// secondX: 650, +// secondY: 350, +// thirdX: 650, +// thirdY: 450, +// fourthX: 550, +// fourthY: 450, +// }; +// const createPolygonTrack = { +// reDraw: false, +// type: 'Track', +// labelName: labelTrack, +// pointsMap: [ +// { x: 700, y: 350 }, +// { x: 850, y: 350 }, +// { x: 850, y: 450 }, +// { x: 700, y: 450 }, +// ], +// numberOfPoints: 4, +// }; - let cvatCanvasShapeList = []; - let cvatFiltesList = []; +// let cvatCanvasShapeList = []; +// let cvatFiltesList = []; - function checkingFilterApplication(ids) { - for (let i = 0; i < cvatCanvasShapeList.length; i++) { - if (ids.indexOf(cvatCanvasShapeList[i]) > -1) { - cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('exist'); - cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('exist'); - } else { - cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('not.exist'); - cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('not.exist'); - } - } - } +// function checkingFilterApplication(ids) { +// for (let i = 0; i < cvatCanvasShapeList.length; i++) { +// if (ids.indexOf(cvatCanvasShapeList[i]) > -1) { +// cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('exist'); +// cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('exist'); +// } else { +// cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('not.exist'); +// cy.get(`#cvat-objects-sidebar-state-item-${cvatCanvasShapeList[i]}`).should('not.exist'); +// } +// } +// } - before(() => { - cy.openTask(taskName); - cy.addNewLabel(labelShape, additionalAttrsLabelShape); - cy.addNewLabel(labelTrack, additionalAttrsLabelTrack); - cy.openJob(); - }); +// before(() => { +// cy.openTask(taskName); +// cy.addNewLabel(labelShape, additionalAttrsLabelShape); +// cy.addNewLabel(labelTrack, additionalAttrsLabelTrack); +// cy.openJob(); +// }); - describe(`Testing case "${caseId}"`, () => { - it('Draw several objects (different shapes, tracks, labels)', () => { - cy.createPolygon(createPolygonShape); - cy.createRectangle(createRectangleTrack2Points); - cy.createRectangle(createRectangleShape4Points); - cy.createPolygon(createPolygonTrack); - cy.get('.cvat_canvas_shape').then(($cvatCanvasShapeList) => { - for (let i = 0; i < $cvatCanvasShapeList.length; i++) { - cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/))); - } - }); - }); - it('Filter: shape=="polygon". Only the polygon exist.', () => { - const textFilter = 'shape=="polygon"'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(false, textFilter); // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4 - checkingFilterApplication([1, 4]); - }); - it('Filter: shape=="polygon" | shape=="rectangle". Only the rectangle and polygon exist.', () => { - const textFilter = 'shape=="polygon" | shape=="rectangle"'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4 - checkingFilterApplication([1, 2, 3, 4]); - }); - it('Filter: type=="shape". Only the objects with shape type exist.', () => { - const textFilter = 'type=="shape"'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3 - checkingFilterApplication([1, 3]); - }); - it('Filter: label=="track 4 points". Only the polygon exist.', () => { - const textFilter = `label=="${labelTrack}"`; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 - checkingFilterApplication([2, 4]); - }); - it('Filter: attr["count points"] == "4". Only the objects with same attr exist.', () => { - const textFilter = 'attr["count points"] == "4"'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 - checkingFilterApplication([2, 4]); - }); - it('Filter: width >= height. All objects exist.', () => { - const textFilter = 'width >= height'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4 - checkingFilterApplication([1, 2, 3, 4]); - }); - it('Filter: clientID == 4. Only the objects with same id exist (polygon track).', () => { - const textFilter = 'clientID == 4'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4 - checkingFilterApplication([4]); - }); - it('Filter: (label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60). Only the objects polygon and rectangle exist.', () => { - const textFilter = - '(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 - checkingFilterApplication([2, 4]); - }); - it('Filter: (( label==["shape 3 points"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID))). All objects not exist.', () => { - const textFilter = - '(( label==["points shape"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID)))'; - cvatFiltesList.push(textFilter); - cy.writeFilterValue(true, textFilter); - checkingFilterApplication([]); - }); - it('Verify to show all filters', () => { - cvatFiltesList.forEach(function (filterValue) { - cy.contains('.cvat-annotations-filters-input-history-element', filterValue); - }); - }); - it('Select filter: type=="shape"', () => { - cy.selectFilterValue(true, 'type=="shape"'); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3 - checkingFilterApplication([1, 3]); - }); - it('Select filter: clientID == 4', () => { - cy.selectFilterValue(true, 'clientID == 4'); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4 - checkingFilterApplication([4]); - }); - it('Select two filters', () => { - const textFirstFilter = - '(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)'; // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 - const textSecondFilter = 'shape=="polygon"'; // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4 - cy.selectFilterValue(true, textFirstFilter); - cy.selectFilterValue(false, textSecondFilter); - checkingFilterApplication([1, 2, 4]); - }); - }); -}); +// describe(`Testing case "${caseId}"`, () => { +// it('Draw several objects (different shapes, tracks, labels)', () => { +// cy.createPolygon(createPolygonShape); +// cy.createRectangle(createRectangleTrack2Points); +// cy.createRectangle(createRectangleShape4Points); +// cy.createPolygon(createPolygonTrack); +// cy.get('.cvat_canvas_shape').then(($cvatCanvasShapeList) => { +// for (let i = 0; i < $cvatCanvasShapeList.length; i++) { +// cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/))); +// } +// }); +// }); +// it('Filter: shape=="polygon". Only the polygon exist.', () => { +// const textFilter = 'shape=="polygon"'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(false, textFilter); // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4 +// checkingFilterApplication([1, 4]); +// }); +// it('Filter: shape=="polygon" | shape=="rectangle". Only the rectangle and polygon exist.', () => { +// const textFilter = 'shape=="polygon" | shape=="rectangle"'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4 +// checkingFilterApplication([1, 2, 3, 4]); +// }); +// it('Filter: type=="shape". Only the objects with shape type exist.', () => { +// const textFilter = 'type=="shape"'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3 +// checkingFilterApplication([1, 3]); +// }); +// it('Filter: label=="track 4 points". Only the polygon exist.', () => { +// const textFilter = `label=="${labelTrack}"`; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 +// checkingFilterApplication([2, 4]); +// }); +// it('Filter: attr["count points"] == "4". Only the objects with same attr exist.', () => { +// const textFilter = 'attr["count points"] == "4"'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 +// checkingFilterApplication([2, 4]); +// }); +// it('Filter: width >= height. All objects exist.', () => { +// const textFilter = 'width >= height'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4 +// checkingFilterApplication([1, 2, 3, 4]); +// }); +// it('Filter: clientID == 4. Only the objects with same id exist (polygon track).', () => { +// const textFilter = 'clientID == 4'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4 +// checkingFilterApplication([4]); +// }); +// it('Filter: (label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60). Only the objects polygon and rectangle exist.', () => { +// const textFilter = +// '(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 +// checkingFilterApplication([2, 4]); +// }); +// it('Filter: (( label==["shape 3 points"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID))). All objects not exist.', () => { +// const textFilter = +// '(( label==["points shape"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID)))'; +// cvatFiltesList.push(textFilter); +// cy.writeFilterValue(true, textFilter); +// checkingFilterApplication([]); +// }); +// it('Verify to show all filters', () => { +// cvatFiltesList.forEach(function (filterValue) { +// cy.contains('.cvat-annotations-filters-input-history-element', filterValue); +// }); +// }); +// it('Select filter: type=="shape"', () => { +// cy.selectFilterValue(true, 'type=="shape"'); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3 +// checkingFilterApplication([1, 3]); +// }); +// it('Select filter: clientID == 4', () => { +// cy.selectFilterValue(true, 'clientID == 4'); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4 +// checkingFilterApplication([4]); +// }); +// it('Select two filters', () => { +// const textFirstFilter = +// '(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)'; // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4 +// const textSecondFilter = 'shape=="polygon"'; // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4 +// cy.selectFilterValue(true, textFirstFilter); +// cy.selectFilterValue(false, textSecondFilter); +// checkingFilterApplication([1, 2, 4]); +// }); +// }); +// }); From 3eb8af843e562ac0654b85b334a23cdd28b9be95 Mon Sep 17 00:00:00 2001 From: Vitaliy Nishukov Date: Tue, 9 Feb 2021 15:31:36 +0300 Subject: [PATCH 8/8] Old filters-input tests --- .../issue_1444_filter_property_shape.js | 94 +++++++++---------- .../issue_2485_navigation_empty_frames.js | 12 +-- .../issue_2690_filters_help_window.js | 48 +++++----- 3 files changed, 77 insertions(+), 77 deletions(-) diff --git a/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js b/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js index c6dcfd79e01..4c1753ca430 100644 --- a/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js +++ b/tests/cypress/integration/actions_tasks_objects/issue_1444_filter_property_shape.js @@ -1,54 +1,54 @@ -// Copyright (C) 2020 Intel Corporation +// Copyright (C) 2021 Intel Corporation // // SPDX-License-Identifier: MIT -/// +// /// -import { taskName, labelName } from '../../support/const'; +// import { taskName, labelName } from '../../support/const'; -context('Filter property "shape" work correctly', () => { - const issueId = '1444'; - const createRectangleShape2Points = { - points: 'By 2 Points', - type: 'Shape', - labelName: labelName, - firstX: 250, - firstY: 350, - secondX: 350, - secondY: 450, - }; - const createPolygonShape = { - reDraw: false, - type: 'Shape', - labelName: labelName, - pointsMap: [ - { x: 300, y: 100 }, - { x: 400, y: 400 }, - { x: 400, y: 250 }, - ], - complete: true, - numberOfPoints: null, - }; +// context('Filter property "shape" work correctly', () => { +// const issueId = '1444'; +// const createRectangleShape2Points = { +// points: 'By 2 Points', +// type: 'Shape', +// labelName: labelName, +// firstX: 250, +// firstY: 350, +// secondX: 350, +// secondY: 450, +// }; +// const createPolygonShape = { +// reDraw: false, +// type: 'Shape', +// labelName: labelName, +// pointsMap: [ +// { x: 300, y: 100 }, +// { x: 400, y: 400 }, +// { x: 400, y: 250 }, +// ], +// complete: true, +// numberOfPoints: null, +// }; - before(() => { - cy.openTaskJob(taskName); - }); +// before(() => { +// cy.openTaskJob(taskName); +// }); - describe(`Testing issue "${issueId}"`, () => { - it('Create a rectangle shape', () => { - cy.createRectangle(createRectangleShape2Points); - cy.get('#cvat-objects-sidebar-state-item-1').should('contain', '1').and('contain', 'RECTANGLE SHAPE'); - }); - it('Create a polygon', () => { - cy.createPolygon(createPolygonShape); - cy.get('#cvat-objects-sidebar-state-item-2').should('contain', '2').and('contain', 'POLYGON SHAPE'); - }); - it('Input filter "shape == "polygon""', () => { - cy.get('.cvat-annotations-filters-input').type('shape == "polygon"{Enter}'); - }); - it('Only polygon is visible', () => { - cy.get('#cvat_canvas_shape_2').should('exist'); - cy.get('#cvat_canvas_shape_1').should('not.exist'); - }); - }); -}); +// describe(`Testing issue "${issueId}"`, () => { +// it('Create a rectangle shape', () => { +// cy.createRectangle(createRectangleShape2Points); +// cy.get('#cvat-objects-sidebar-state-item-1').should('contain', '1').and('contain', 'RECTANGLE SHAPE'); +// }); +// it('Create a polygon', () => { +// cy.createPolygon(createPolygonShape); +// cy.get('#cvat-objects-sidebar-state-item-2').should('contain', '2').and('contain', 'POLYGON SHAPE'); +// }); +// it('Input filter "shape == "polygon""', () => { +// cy.get('.cvat-annotations-filters-input').type('shape == "polygon"{Enter}'); +// }); +// it('Only polygon is visible', () => { +// cy.get('#cvat_canvas_shape_2').should('exist'); +// cy.get('#cvat_canvas_shape_1').should('not.exist'); +// }); +// }); +// }); diff --git a/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js b/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js index c29e0dd472e..1c5b3f27672 100644 --- a/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js +++ b/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js @@ -1,10 +1,10 @@ -// Copyright (C) 2020 Intel Corporation +// Copyright (C) 2021 Intel Corporation // // SPDX-License-Identifier: MIT /// -import { taskName, labelName } from '../../support/const'; +import { labelName, taskName } from '../../support/const'; context('Navigation to empty frames', () => { const issueId = '2485'; @@ -33,10 +33,10 @@ context('Navigation to empty frames', () => { cy.createRectangle(createRectangleShape2Points); }); - it('Input a filter to see the created objects.', () => { - cy.writeFilterValue(false, 'shape=="rectangle"'); - cy.get('#cvat_canvas_shape_2').should('exist'); - }); + // it('Input a filter to see the created objects.', () => { + // cy.writeFilterValue(false, 'shape=="rectangle"'); + // cy.get('#cvat_canvas_shape_2').should('exist'); + // }); it('Go to 3rd frame.', () => { cy.goCheckFrameNumber(3); diff --git a/tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js b/tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js index 3cd00cad5ee..132bb7e3d53 100644 --- a/tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js +++ b/tests/cypress/integration/actions_tasks_objects/issue_2690_filters_help_window.js @@ -2,32 +2,32 @@ // // SPDX-License-Identifier: MIT -/// +// /// -import { taskName } from '../../support/const'; +// import { taskName } from '../../support/const'; -context('Annotation filter help dialog window.', () => { - const issueId = '2690'; +// context('Annotation filter help dialog window.', () => { +// const issueId = '2690'; - before(() => { - cy.openTaskJob(taskName); - }); +// before(() => { +// cy.openTaskJob(taskName); +// }); - describe(`Testing issue "${issueId}"`, () => { - it('Open annotation filters help dialog window. The window is visible.', () => { - cy.get('.cvat-annotations-filters-input').within(() => { - // class="ant-select-selection-placeholder" has CSS pointer-events: none - cy.get('.ant-select-selection-placeholder').invoke('css', 'pointer-events', 'auto'); // Replace CSS "pointer-events" to auto - cy.get('[aria-label="filter"]').click(); - }); - cy.get('.cvat-annotations-filters-help-modal-window').should('exist').and('be.visible'); - }); +// describe(`Testing issue "${issueId}"`, () => { +// it('Open annotation filters help dialog window. The window is visible.', () => { +// cy.get('.cvat-annotations-filters-input').within(() => { +// // class="ant-select-selection-placeholder" has CSS pointer-events: none +// cy.get('.ant-select-selection-placeholder').invoke('css', 'pointer-events', 'auto'); // Replace CSS "pointer-events" to auto +// cy.get('[aria-label="filter"]').click(); +// }); +// cy.get('.cvat-annotations-filters-help-modal-window').should('exist').and('be.visible'); +// }); - it('Close annotation filters help dialog window. The window is closed.', () => { - cy.get('.cvat-annotations-filters-help-modal-window').within(() => { - cy.contains('button', 'OK').click(); - }); - cy.get('.cvat-annotations-filters-help-modal-window').should('not.exist'); - }); - }); -}); +// it('Close annotation filters help dialog window. The window is closed.', () => { +// cy.get('.cvat-annotations-filters-help-modal-window').within(() => { +// cy.contains('button', 'OK').click(); +// }); +// cy.get('.cvat-annotations-filters-help-modal-window').should('not.exist'); +// }); +// }); +// });