Annotations filters new UI (#2871)
* Filters new UI implemented * Build fix * ESLint unmached pattern error fix * ESLint unmached pattern error fix in cvat-ui * ESLint unmached pattern error fix in github action workflow * Old test exclude from jest scope * Build fix * Build fix 1 * Build fix 2 * Tests failure fix * Review comments fix 1 and lock-hide test fix * lock-hide test fix * packages fix for cor & ui * Review comments fix * Top bar right group layout justify fix * Annotation page header responsive fix * Filters modal layout fix * Build fix. E2E case 13 workaround * Linters fix * Recently used empty rows fix * Comparable fields config fix * Build linters fix * Minor fixes * Fixed broken navigation * Fixed createObjectURL * Removed extra import * Fixed issues with attributes * Extra line were removed * Fixed typos * All renamed clientID -> objectID * Fixed small issues * Code refactoring * Fixed dot-contained names * Reordered import Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>main
Vitaliy Nishukov
5 years ago
committed by
GitHub
parent
ce1666f6f8
commit
11d818dac2
@ -1,121 +0,0 @@
|
|||||||
// Copyright (C) 2020 Intel Corporation
|
|
||||||
//
|
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
|
|
||||||
// Setup mock for a server
|
|
||||||
jest.mock('../../src/server-proxy', () => {
|
|
||||||
const mock = require('../mocks/server-proxy.mock');
|
|
||||||
return mock;
|
|
||||||
});
|
|
||||||
|
|
||||||
const AnnotationsFilter = require('../../src/annotations-filter');
|
|
||||||
// Initialize api
|
|
||||||
window.cvat = require('../../src/api');
|
|
||||||
|
|
||||||
// Test cases
|
|
||||||
describe('Feature: toJSONQuery', () => {
|
|
||||||
test('convert filters to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
const [groups, query] = annotationsFilter.toJSONQuery([]);
|
|
||||||
expect(Array.isArray(groups)).toBeTruthy();
|
|
||||||
expect(typeof query).toBe('string');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert empty fitlers to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
const [, query] = annotationsFilter.toJSONQuery([]);
|
|
||||||
expect(query).toBe('$.objects[*].clientID');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert wrong fitlers (empty string) to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
expect(() => {
|
|
||||||
annotationsFilter.toJSONQuery(['']);
|
|
||||||
}).toThrow(window.cvat.exceptions.ArgumentError);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert wrong fitlers (wrong number argument) to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
expect(() => {
|
|
||||||
annotationsFilter.toJSONQuery(1);
|
|
||||||
}).toThrow(window.cvat.exceptions.ArgumentError);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert wrong fitlers (wrong array argument) to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
expect(() => {
|
|
||||||
annotationsFilter.toJSONQuery(['clientID ==6', 1]);
|
|
||||||
}).toThrow(window.cvat.exceptions.ArgumentError);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert wrong filters (wrong expression) to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
expect(() => {
|
|
||||||
annotationsFilter.toJSONQuery(['clientID=5']);
|
|
||||||
}).toThrow(window.cvat.exceptions.ArgumentError);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert filters to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
const [groups, query] = annotationsFilter.toJSONQuery(['clientID==5 & shape=="rectangle" & label==["car"]']);
|
|
||||||
expect(groups).toEqual([['clientID==5', '&', 'shape=="rectangle"', '&', 'label==["car"]']]);
|
|
||||||
expect(query).toBe('$.objects[?((@.clientID==5&@.shape=="rectangle"&@.label==["car"]))].clientID');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert filters to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
const [groups, query] = annotationsFilter.toJSONQuery(['label=="car" | width >= height & type=="track"']);
|
|
||||||
expect(groups).toEqual([['label=="car"', '|', 'width >= height', '&', 'type=="track"']]);
|
|
||||||
expect(query).toBe('$.objects[?((@.label=="car"|@.width>=@.height&@.type=="track"))].clientID');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert filters to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
const [groups, query] = annotationsFilter.toJSONQuery([
|
|
||||||
'label=="person" & attr["Attribute 1"] ==attr["Attribute 2"]',
|
|
||||||
]);
|
|
||||||
expect(groups).toEqual([['label=="person"', '&', 'attr["Attribute 1"] ==attr["Attribute 2"]']]);
|
|
||||||
expect(query).toBe('$.objects[?((@.label=="person"&@.attr["Attribute 1"]==@.attr["Attribute 2"]))].clientID');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert filters to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
const [groups, query] = annotationsFilter.toJSONQuery([
|
|
||||||
'label=="car" & attr["parked"]==true',
|
|
||||||
'label=="pedestrian" & width > 150',
|
|
||||||
]);
|
|
||||||
expect(groups).toEqual([
|
|
||||||
['label=="car"', '&', 'attr["parked"]==true'],
|
|
||||||
'|',
|
|
||||||
['label=="pedestrian"', '&', 'width > 150'],
|
|
||||||
]);
|
|
||||||
expect(query).toBe(
|
|
||||||
'$.objects[?((@.label=="car"&@.attr["parked"]==true)|(@.label=="pedestrian"&@.width>150))].clientID',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('convert filters to a json query', () => {
|
|
||||||
const annotationsFilter = new AnnotationsFilter();
|
|
||||||
const [groups, query] = annotationsFilter.toJSONQuery([
|
|
||||||
// eslint-disable-next-line
|
|
||||||
'(( label==["car \\"mazda\\""]) & (attr["sunglass ( help ) es"]==true | (width > 150 | height > 150 & (clientID == serverID))))) ',
|
|
||||||
]);
|
|
||||||
expect(groups).toEqual([
|
|
||||||
[
|
|
||||||
[
|
|
||||||
['label==["car `mazda`"]'],
|
|
||||||
'&',
|
|
||||||
[
|
|
||||||
'attr["sunglass ( help ) es"]==true',
|
|
||||||
'|',
|
|
||||||
['width > 150', '|', 'height > 150', '&', ['clientID == serverID']],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
]);
|
|
||||||
expect(query).toBe(
|
|
||||||
// eslint-disable-next-line
|
|
||||||
'$.objects[?((((@.label==["car `mazda`"])&(@.attr["sunglass ( help ) es"]==true|(@.width>150|@.height>150&(@.clientID==serverID))))))].clientID',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,183 +0,0 @@
|
|||||||
// Copyright (C) 2020-2021 Intel Corporation
|
|
||||||
//
|
|
||||||
// SPDX-License-Identifier: MIT
|
|
||||||
|
|
||||||
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 Modal from 'antd/lib/modal';
|
|
||||||
import { FilterOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
import {
|
|
||||||
changeAnnotationsFilters as changeAnnotationsFiltersAction,
|
|
||||||
fetchAnnotationsAsync,
|
|
||||||
} from 'actions/annotation-actions';
|
|
||||||
import CVATTooltip from 'components/common/cvat-tooltip';
|
|
||||||
import { CombinedState } from 'reducers/interfaces';
|
|
||||||
|
|
||||||
interface StateToProps {
|
|
||||||
annotationsFilters: string[];
|
|
||||||
annotationsFiltersHistory: string[];
|
|
||||||
searchForwardShortcut: string;
|
|
||||||
searchBackwardShortcut: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DispatchToProps {
|
|
||||||
changeAnnotationsFilters(value: SelectValue): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapStateToProps(state: CombinedState): StateToProps {
|
|
||||||
const {
|
|
||||||
annotation: {
|
|
||||||
annotations: { filters: annotationsFilters, filtersHistory: annotationsFiltersHistory },
|
|
||||||
},
|
|
||||||
shortcuts: { normalizedKeyMap },
|
|
||||||
} = state;
|
|
||||||
|
|
||||||
return {
|
|
||||||
annotationsFilters,
|
|
||||||
annotationsFiltersHistory,
|
|
||||||
searchForwardShortcut: normalizedKeyMap.SEARCH_FORWARD,
|
|
||||||
searchBackwardShortcut: normalizedKeyMap.SEARCH_BACKWARD,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
|
||||||
return {
|
|
||||||
changeAnnotationsFilters(value: SelectValue) {
|
|
||||||
if (typeof value === 'string') {
|
|
||||||
dispatch(changeAnnotationsFiltersAction([value]));
|
|
||||||
dispatch(fetchAnnotationsAsync());
|
|
||||||
} else if (
|
|
||||||
Array.isArray(value) &&
|
|
||||||
!value.some((element: string | number | LabeledValue): boolean => typeof element !== 'string')
|
|
||||||
) {
|
|
||||||
dispatch(changeAnnotationsFiltersAction(value as string[]));
|
|
||||||
dispatch(fetchAnnotationsAsync());
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
==, !=, >, >=, <, <=, (), & and |
|
|
||||||
<br />
|
|
||||||
<Text strong>
|
|
||||||
If you have double quotes in your query string, please escape them using back slash: \" (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=="car" | label==["road sign"]</li>
|
|
||||||
<li>shape == "polygon"</li>
|
|
||||||
<li>width >= height</li>
|
|
||||||
<li>attr["Attribute 1"] == attr["Attribute 2"]</li>
|
|
||||||
<li>clientID == 50</li>
|
|
||||||
<li>
|
|
||||||
(label=="car" & attr["parked"]==true) | (label=="pedestrian"
|
|
||||||
& width > 150)
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
(( label==["car \"mazda\""]) & (attr["sunglasses"]==true |
|
|
||||||
(width > 150 | height > 150 & (clientID == serverID)))))
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</Paragraph>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Element {
|
|
||||||
const {
|
|
||||||
annotationsFilters,
|
|
||||||
annotationsFiltersHistory,
|
|
||||||
searchForwardShortcut,
|
|
||||||
searchBackwardShortcut,
|
|
||||||
changeAnnotationsFilters,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const [underCursor, setUnderCursor] = useState<boolean>(false);
|
|
||||||
const [dropdownVisible, setDropdownVisible] = useState<boolean>(true);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Select
|
|
||||||
className='cvat-annotations-filters-input'
|
|
||||||
allowClear
|
|
||||||
value={annotationsFilters}
|
|
||||||
mode='tags'
|
|
||||||
disabled={!dropdownVisible}
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
placeholder={
|
|
||||||
underCursor ? (
|
|
||||||
<>
|
|
||||||
<CVATTooltip title='Click to open help'>
|
|
||||||
<FilterOutlined
|
|
||||||
style={{ pointerEvents: 'all' }}
|
|
||||||
onClick={() => {
|
|
||||||
// also opens the select dropdown
|
|
||||||
// looks like it is done on capturing state
|
|
||||||
// so we cannot cancel it somehow via the event handling
|
|
||||||
// to avoid it we use also onMouseEnter, onMouseLeave below
|
|
||||||
Modal.info({
|
|
||||||
width: 700,
|
|
||||||
title: 'How to use filters?',
|
|
||||||
content: filtersHelpModalContent(searchForwardShortcut, searchBackwardShortcut),
|
|
||||||
className: 'cvat-annotations-filters-help-modal-window',
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onMouseEnter={() => setDropdownVisible(false)}
|
|
||||||
onMouseLeave={() => setDropdownVisible(true)}
|
|
||||||
/>
|
|
||||||
</CVATTooltip>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<FilterOutlined style={{ transform: 'scale(0.9)' }} />
|
|
||||||
<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}
|
|
||||||
className='cvat-annotations-filters-input-history-element'
|
|
||||||
>
|
|
||||||
{element}
|
|
||||||
</Select.Option>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</Select>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(AnnotationsFiltersInput);
|
|
||||||
@ -0,0 +1,288 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import {
|
||||||
|
Builder, Config, ImmutableTree, JsonLogicTree, Query, Utils as QbUtils,
|
||||||
|
} from 'react-awesome-query-builder';
|
||||||
|
import AntdWidgets from 'react-awesome-query-builder/lib/components/widgets/antd';
|
||||||
|
import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
|
||||||
|
import 'react-awesome-query-builder/lib/css/styles.css';
|
||||||
|
import { DownOutlined } from '@ant-design/icons';
|
||||||
|
import { Dropdown, Menu } from 'antd';
|
||||||
|
import Button from 'antd/lib/button';
|
||||||
|
import Modal from 'antd/lib/modal';
|
||||||
|
import { omit } from 'lodash';
|
||||||
|
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
import { changeAnnotationsFilters, fetchAnnotationsAsync, showFilters } from 'actions/annotation-actions';
|
||||||
|
|
||||||
|
const { FieldDropdown } = AntdWidgets;
|
||||||
|
|
||||||
|
const FILTERS_HISTORY = 'annotationFiltersHistory';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
visible: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StoredFilter {
|
||||||
|
id: string;
|
||||||
|
logic: JsonLogicTree;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FiltersModalComponent(props: Props): JSX.Element {
|
||||||
|
const { visible } = props;
|
||||||
|
const { labels } = useSelector((state: CombinedState) => state.annotation.job);
|
||||||
|
const { filters: activeFilters } = useSelector((state: CombinedState) => state.annotation.annotations);
|
||||||
|
|
||||||
|
const getConvertedInputType = (inputType: string): string => {
|
||||||
|
switch (inputType) {
|
||||||
|
case 'checkbox':
|
||||||
|
return 'boolean';
|
||||||
|
case 'radio':
|
||||||
|
return 'select';
|
||||||
|
default:
|
||||||
|
return inputType;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const adjustName = (name: string): string => name.replaceAll('.', '\u2219');
|
||||||
|
|
||||||
|
const getAttributesSubfields = (): Record<string, any> => {
|
||||||
|
const subfields: Record<string, any> = {};
|
||||||
|
labels.forEach((label: any): void => {
|
||||||
|
const adjustedLabelName = adjustName(label.name);
|
||||||
|
subfields[adjustedLabelName] = {
|
||||||
|
type: '!struct', // nested complex field
|
||||||
|
label: label.name,
|
||||||
|
subfields: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelSubfields = subfields[adjustedLabelName].subfields;
|
||||||
|
label.attributes.forEach((attr: any): void => {
|
||||||
|
const adjustedAttrName = adjustName(attr.name);
|
||||||
|
labelSubfields[adjustedAttrName] = {
|
||||||
|
label: attr.name,
|
||||||
|
type: getConvertedInputType(attr.inputType),
|
||||||
|
};
|
||||||
|
if (labelSubfields[adjustedAttrName].type === 'select') {
|
||||||
|
labelSubfields[adjustedAttrName] = {
|
||||||
|
...labelSubfields[adjustedAttrName],
|
||||||
|
fieldSettings: {
|
||||||
|
listValues: attr.values,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return subfields;
|
||||||
|
};
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
...AntdConfig,
|
||||||
|
fields: {
|
||||||
|
label: {
|
||||||
|
label: 'Label',
|
||||||
|
type: 'select',
|
||||||
|
valueSources: ['value'],
|
||||||
|
fieldSettings: {
|
||||||
|
listValues: labels.map((label: any) => label.name),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
label: 'Type',
|
||||||
|
type: 'select',
|
||||||
|
fieldSettings: {
|
||||||
|
listValues: [
|
||||||
|
{ value: 'shape', title: 'Shape' },
|
||||||
|
{ value: 'track', title: 'Track' },
|
||||||
|
{ value: 'tag', title: 'Tag' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
shape: {
|
||||||
|
label: 'Shape',
|
||||||
|
type: 'select',
|
||||||
|
fieldSettings: {
|
||||||
|
listValues: [
|
||||||
|
{ value: 'rectangle', title: 'Rectangle' },
|
||||||
|
{ value: 'points', title: 'Points' },
|
||||||
|
{ value: 'polyline', title: 'Polyline' },
|
||||||
|
{ value: 'polygon', title: 'Polygon' },
|
||||||
|
{ value: 'cuboids', title: 'Cuboids' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
occluded: {
|
||||||
|
label: 'Occluded',
|
||||||
|
type: 'boolean',
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
label: 'Width',
|
||||||
|
type: 'number',
|
||||||
|
fieldSettings: { min: 0 },
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
label: 'Height',
|
||||||
|
type: 'number',
|
||||||
|
fieldSettings: { min: 0 },
|
||||||
|
},
|
||||||
|
objectID: {
|
||||||
|
label: 'ObjectID',
|
||||||
|
type: 'number',
|
||||||
|
hideForCompare: true,
|
||||||
|
fieldSettings: { min: 0 },
|
||||||
|
},
|
||||||
|
serverID: {
|
||||||
|
label: 'ServerID',
|
||||||
|
type: 'number',
|
||||||
|
hideForCompare: true,
|
||||||
|
fieldSettings: { min: 0 },
|
||||||
|
},
|
||||||
|
attr: {
|
||||||
|
label: 'Attributes',
|
||||||
|
type: '!struct',
|
||||||
|
subfields: getAttributesSubfields(),
|
||||||
|
fieldSettings: {
|
||||||
|
treeSelectOnlyLeafs: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
...AntdConfig.settings,
|
||||||
|
renderField: (_props: any) => (
|
||||||
|
<FieldDropdown {...omit(_props)} customProps={omit(_props.customProps, 'showSearch')} />
|
||||||
|
),
|
||||||
|
// using FieldDropdown because we cannot use antd because of antd-related bugs
|
||||||
|
// https://github.com/ukrbublik/react-awesome-query-builder/issues/224
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
tree: QbUtils.checkTree(
|
||||||
|
QbUtils.loadTree({ id: QbUtils.uuid(), type: 'group' }),
|
||||||
|
config as Config,
|
||||||
|
) as ImmutableTree,
|
||||||
|
config,
|
||||||
|
};
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const [state, setState] = useState(initialState);
|
||||||
|
const [filters, setFilters] = useState([] as StoredFilter[]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const filtersHistory = window.localStorage.getItem(FILTERS_HISTORY)?.trim() || '[]';
|
||||||
|
try {
|
||||||
|
setFilters(JSON.parse(filtersHistory));
|
||||||
|
} catch (_) {
|
||||||
|
setFilters([]);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.localStorage.setItem(FILTERS_HISTORY, JSON.stringify(filters));
|
||||||
|
}, [filters]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (visible) {
|
||||||
|
const treeFromActiveFilters = activeFilters.length ?
|
||||||
|
QbUtils.checkTree(QbUtils.loadFromJsonLogic(activeFilters[0], config), config) :
|
||||||
|
null;
|
||||||
|
setState({
|
||||||
|
tree: treeFromActiveFilters || initialState.tree,
|
||||||
|
config,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
const applyFilters = (filtersData: any[]): void => {
|
||||||
|
dispatch(changeAnnotationsFilters(filtersData));
|
||||||
|
dispatch(fetchAnnotationsAsync());
|
||||||
|
dispatch(showFilters(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmModal = (): void => {
|
||||||
|
const currentFilter: StoredFilter = {
|
||||||
|
id: QbUtils.uuid(),
|
||||||
|
logic: QbUtils.jsonLogicFormat(state.tree, config).logic || {},
|
||||||
|
};
|
||||||
|
const updatedFilters = filters.filter(
|
||||||
|
(filter) => JSON.stringify(filter.logic) !== JSON.stringify(currentFilter.logic),
|
||||||
|
);
|
||||||
|
setFilters([currentFilter, ...updatedFilters].slice(0, 10));
|
||||||
|
applyFilters([QbUtils.jsonLogicFormat(state.tree, config).logic]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isModalConfirmable = (): boolean =>
|
||||||
|
QbUtils.queryString(state.tree, config)?.trim().length > 0 && QbUtils.isValidTree(state.tree);
|
||||||
|
|
||||||
|
const renderBuilder = (builderProps: any): JSX.Element => (
|
||||||
|
<div className='query-builder-container'>
|
||||||
|
<div className='query-builder qb-lite'>
|
||||||
|
<Builder {...builderProps} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const onChange = (tree: ImmutableTree): void => {
|
||||||
|
setState({ tree, config });
|
||||||
|
};
|
||||||
|
|
||||||
|
const menu = (
|
||||||
|
<Menu>
|
||||||
|
{filters
|
||||||
|
.filter((filter: StoredFilter) => {
|
||||||
|
const tree = QbUtils.loadFromJsonLogic(filter.logic, config);
|
||||||
|
return !!QbUtils.queryString(tree, config);
|
||||||
|
})
|
||||||
|
.map((filter: StoredFilter) => {
|
||||||
|
const tree = QbUtils.loadFromJsonLogic(filter.logic, config);
|
||||||
|
return (
|
||||||
|
<Menu.Item key={filter.id} onClick={() => setState({ tree, config })}>
|
||||||
|
{QbUtils.queryString(tree, config)}
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Menu>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
className='cvat-filters-modal'
|
||||||
|
visible={visible}
|
||||||
|
closable={false}
|
||||||
|
width={800}
|
||||||
|
centered
|
||||||
|
onCancel={() => dispatch(showFilters(false))}
|
||||||
|
footer={[
|
||||||
|
<Button key='clear' disabled={!activeFilters.length} onClick={() => applyFilters([])}>
|
||||||
|
Clear filters
|
||||||
|
</Button>,
|
||||||
|
<Button key='cancel' onClick={() => dispatch(showFilters(false))}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key='submit' type='primary' disabled={!isModalConfirmable()} onClick={confirmModal}>
|
||||||
|
Submit
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
key='used'
|
||||||
|
className='recently-used-wrapper'
|
||||||
|
style={{ display: filters.length ? 'inline-block' : 'none' }}
|
||||||
|
>
|
||||||
|
<Dropdown overlay={menu}>
|
||||||
|
<Button type='text'>
|
||||||
|
Recently used
|
||||||
|
{' '}
|
||||||
|
<DownOutlined />
|
||||||
|
</Button>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
<Query {...config} value={state.tree} onChange={onChange} renderBuilder={renderBuilder} />
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
import FiltersModalComponent from 'components/annotation-page/top-bar/filters-modal';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
visible: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = (state: CombinedState): StateToProps => {
|
||||||
|
const {
|
||||||
|
annotation: { filtersPanelVisible: visible },
|
||||||
|
} = state;
|
||||||
|
return { visible };
|
||||||
|
};
|
||||||
|
|
||||||
|
function FiltersModalContainer(props: StateToProps): JSX.Element {
|
||||||
|
const { visible } = props;
|
||||||
|
return <FiltersModalComponent visible={visible} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, null)(FiltersModalContainer);
|
||||||
@ -1,183 +1,185 @@
|
|||||||
// Copyright (C) 2020 Intel Corporation
|
// Copyright (C) 2020-2021 Intel Corporation
|
||||||
//
|
//
|
||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
/// <reference types="cypress" />
|
// /// <reference types="cypress" />
|
||||||
|
|
||||||
import { taskName } from '../../support/const';
|
// import { taskName } from '../../support/const';
|
||||||
|
|
||||||
context('Filters functionality.', () => {
|
// TODO: Update with new filters UI
|
||||||
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 = {
|
// context('Filters functionality.', () => {
|
||||||
reDraw: false,
|
// const caseId = '18';
|
||||||
type: 'Shape',
|
// const labelShape = 'shape 3 points';
|
||||||
labelName: labelShape,
|
// const additionalAttrsLabelShape = [
|
||||||
pointsMap: [
|
// { additionalAttrName: 'type', additionalValue: 'shape', typeAttribute: 'Text' },
|
||||||
{ x: 200, y: 200 },
|
// { additionalAttrName: 'count points', additionalValue: '3', typeAttribute: 'Text' },
|
||||||
{ x: 250, y: 200 },
|
// { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' },
|
||||||
{ x: 250, y: 240 },
|
// ];
|
||||||
],
|
// const labelTrack = 'track 4 points';
|
||||||
complete: true,
|
// const additionalAttrsLabelTrack = [
|
||||||
numberOfPoints: null,
|
// { additionalAttrName: 'type', additionalValue: 'track', typeAttribute: 'Text' },
|
||||||
};
|
// { additionalAttrName: 'polygon', additionalValue: 'True', typeAttribute: 'Checkbox' },
|
||||||
const createRectangleTrack2Points = {
|
// { additionalAttrName: 'count points', additionalValue: '4', typeAttribute: 'Text' },
|
||||||
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 = [];
|
// const createPolygonShape = {
|
||||||
let cvatFiltesList = [];
|
// 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,
|
||||||
|
// };
|
||||||
|
|
||||||
function checkingFilterApplication(ids) {
|
// let cvatCanvasShapeList = [];
|
||||||
for (let i = 0; i < cvatCanvasShapeList.length; i++) {
|
// let cvatFiltesList = [];
|
||||||
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(() => {
|
// function checkingFilterApplication(ids) {
|
||||||
cy.openTask(taskName);
|
// for (let i = 0; i < cvatCanvasShapeList.length; i++) {
|
||||||
cy.addNewLabel(labelShape, additionalAttrsLabelShape);
|
// if (ids.indexOf(cvatCanvasShapeList[i]) > -1) {
|
||||||
cy.addNewLabel(labelTrack, additionalAttrsLabelTrack);
|
// cy.get(`#cvat_canvas_shape_${cvatCanvasShapeList[i]}`).should('exist');
|
||||||
cy.openJob();
|
// 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');
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
describe(`Testing case "${caseId}"`, () => {
|
// before(() => {
|
||||||
it('Draw several objects (different shapes, tracks, labels)', () => {
|
// cy.openTask(taskName);
|
||||||
cy.createPolygon(createPolygonShape);
|
// cy.addNewLabel(labelShape, additionalAttrsLabelShape);
|
||||||
cy.createRectangle(createRectangleTrack2Points);
|
// cy.addNewLabel(labelTrack, additionalAttrsLabelTrack);
|
||||||
cy.createRectangle(createRectangleShape4Points);
|
// cy.openJob();
|
||||||
cy.createPolygon(createPolygonTrack);
|
// });
|
||||||
cy.get('.cvat_canvas_shape').then(($cvatCanvasShapeList) => {
|
|
||||||
for (let i = 0; i < $cvatCanvasShapeList.length; i++) {
|
// describe(`Testing case "${caseId}"`, () => {
|
||||||
cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/)));
|
// it('Draw several objects (different shapes, tracks, labels)', () => {
|
||||||
}
|
// cy.createPolygon(createPolygonShape);
|
||||||
});
|
// cy.createRectangle(createRectangleTrack2Points);
|
||||||
});
|
// cy.createRectangle(createRectangleShape4Points);
|
||||||
it('Filter: shape=="polygon". Only the polygon exist.', () => {
|
// cy.createPolygon(createPolygonTrack);
|
||||||
const textFilter = 'shape=="polygon"';
|
// cy.get('.cvat_canvas_shape').then(($cvatCanvasShapeList) => {
|
||||||
cvatFiltesList.push(textFilter);
|
// for (let i = 0; i < $cvatCanvasShapeList.length; i++) {
|
||||||
cy.writeFilterValue(false, textFilter); // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4
|
// cvatCanvasShapeList.push(Number($cvatCanvasShapeList[i].id.match(/\d+$/)));
|
||||||
checkingFilterApplication([1, 4]);
|
// }
|
||||||
});
|
// });
|
||||||
it('Filter: shape=="polygon" | shape=="rectangle". Only the rectangle and polygon exist.', () => {
|
// });
|
||||||
const textFilter = 'shape=="polygon" | shape=="rectangle"';
|
// it('Filter: shape=="polygon". Only the polygon exist.', () => {
|
||||||
cvatFiltesList.push(textFilter);
|
// const textFilter = 'shape=="polygon"';
|
||||||
cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4
|
// cvatFiltesList.push(textFilter);
|
||||||
checkingFilterApplication([1, 2, 3, 4]);
|
// cy.writeFilterValue(false, textFilter); // #cvat_canvas_shape_1,4, #cvat-objects-sidebar-state-item-1,4
|
||||||
});
|
// checkingFilterApplication([1, 4]);
|
||||||
it('Filter: type=="shape". Only the objects with shape type exist.', () => {
|
// });
|
||||||
const textFilter = 'type=="shape"';
|
// it('Filter: shape=="polygon" | shape=="rectangle". Only the rectangle and polygon exist.', () => {
|
||||||
cvatFiltesList.push(textFilter);
|
// const textFilter = 'shape=="polygon" | shape=="rectangle"';
|
||||||
cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
|
// cvatFiltesList.push(textFilter);
|
||||||
checkingFilterApplication([1, 3]);
|
// 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: label=="track 4 points". Only the polygon exist.', () => {
|
// });
|
||||||
const textFilter = `label=="${labelTrack}"`;
|
// it('Filter: type=="shape". Only the objects with shape type exist.', () => {
|
||||||
cvatFiltesList.push(textFilter);
|
// const textFilter = 'type=="shape"';
|
||||||
cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
|
// cvatFiltesList.push(textFilter);
|
||||||
checkingFilterApplication([2, 4]);
|
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
|
||||||
});
|
// checkingFilterApplication([1, 3]);
|
||||||
it('Filter: attr["count points"] == "4". Only the objects with same attr exist.', () => {
|
// });
|
||||||
const textFilter = 'attr["count points"] == "4"';
|
// it('Filter: label=="track 4 points". Only the polygon exist.', () => {
|
||||||
cvatFiltesList.push(textFilter);
|
// const textFilter = `label=="${labelTrack}"`;
|
||||||
cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
|
// cvatFiltesList.push(textFilter);
|
||||||
checkingFilterApplication([2, 4]);
|
// 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';
|
// it('Filter: attr["count points"] == "4". Only the objects with same attr exist.', () => {
|
||||||
cvatFiltesList.push(textFilter);
|
// const textFilter = 'attr["count points"] == "4"';
|
||||||
cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_1,2,3,4, #cvat-objects-sidebar-state-item-1,2,3,4
|
// cvatFiltesList.push(textFilter);
|
||||||
checkingFilterApplication([1, 2, 3, 4]);
|
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
|
||||||
});
|
// checkingFilterApplication([2, 4]);
|
||||||
it('Filter: clientID == 4. Only the objects with same id exist (polygon track).', () => {
|
// });
|
||||||
const textFilter = 'clientID == 4';
|
// it('Filter: width >= height. All objects exist.', () => {
|
||||||
cvatFiltesList.push(textFilter);
|
// const textFilter = 'width >= height';
|
||||||
cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4
|
// cvatFiltesList.push(textFilter);
|
||||||
checkingFilterApplication([4]);
|
// 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: (label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60). Only the objects polygon and rectangle exist.', () => {
|
// });
|
||||||
const textFilter =
|
// it('Filter: clientID == 4. Only the objects with same id exist (polygon track).', () => {
|
||||||
'(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)';
|
// const textFilter = 'clientID == 4';
|
||||||
cvatFiltesList.push(textFilter);
|
// cvatFiltesList.push(textFilter);
|
||||||
cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
|
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4
|
||||||
checkingFilterApplication([2, 4]);
|
// checkingFilterApplication([4]);
|
||||||
});
|
// });
|
||||||
it('Filter: (( label==["shape 3 points"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID))). All objects not exist.', () => {
|
// it('Filter: (label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60). Only the objects polygon and rectangle exist.', () => {
|
||||||
const textFilter =
|
// const textFilter =
|
||||||
'(( label==["points shape"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID)))';
|
// '(label=="shape 3 points" & attr["polylines"]==true) | (label=="track 4 points" & width > 60)';
|
||||||
cvatFiltesList.push(textFilter);
|
// cvatFiltesList.push(textFilter);
|
||||||
cy.writeFilterValue(true, textFilter);
|
// cy.writeFilterValue(true, textFilter); // #cvat_canvas_shape_2,4, #cvat-objects-sidebar-state-item-2,4
|
||||||
checkingFilterApplication([]);
|
// checkingFilterApplication([2, 4]);
|
||||||
});
|
// });
|
||||||
it('Verify to show all filters', () => {
|
// it('Filter: (( label==["shape 3 points"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID))). All objects not exist.', () => {
|
||||||
cvatFiltesList.forEach(function (filterValue) {
|
// const textFilter =
|
||||||
cy.contains('.cvat-annotations-filters-input-history-element', filterValue);
|
// '(( label==["points shape"]) | (attr["type"]=="shape" & width > 50)) & (height > 50 & (clientID == serverID)))';
|
||||||
});
|
// cvatFiltesList.push(textFilter);
|
||||||
});
|
// cy.writeFilterValue(true, textFilter);
|
||||||
it('Select filter: type=="shape"', () => {
|
// checkingFilterApplication([]);
|
||||||
cy.selectFilterValue(true, 'type=="shape"'); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
|
// });
|
||||||
checkingFilterApplication([1, 3]);
|
// it('Verify to show all filters', () => {
|
||||||
});
|
// cvatFiltesList.forEach(function (filterValue) {
|
||||||
it('Select filter: clientID == 4', () => {
|
// cy.contains('.cvat-annotations-filters-input-history-element', filterValue);
|
||||||
cy.selectFilterValue(true, 'clientID == 4'); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4
|
// });
|
||||||
checkingFilterApplication([4]);
|
// });
|
||||||
});
|
// it('Select filter: type=="shape"', () => {
|
||||||
it('Select two filters', () => {
|
// cy.selectFilterValue(true, 'type=="shape"'); // #cvat_canvas_shape_1,3, #cvat-objects-sidebar-state-item-1,3
|
||||||
const textFirstFilter =
|
// checkingFilterApplication([1, 3]);
|
||||||
'(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
|
// it('Select filter: clientID == 4', () => {
|
||||||
cy.selectFilterValue(true, textFirstFilter);
|
// cy.selectFilterValue(true, 'clientID == 4'); // #cvat_canvas_shape_7, #cvat-objects-sidebar-state-item-4
|
||||||
cy.selectFilterValue(false, textSecondFilter);
|
// checkingFilterApplication([4]);
|
||||||
checkingFilterApplication([1, 2, 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]);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|||||||
Loading…
Reference in New Issue