Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit 2acc4f3

Browse files
juliosgarbiyyassi-heartex
juliosgarbi
and
yyassi-heartex
authored
feat: LSDV-3025-3: Integrate filter component into outliner (#1310)
* feat: LSDV-3025-3: Integrate filter component into outliner * change filter result when add new region * fix confidence score returning null * fix validations filter * Update src/components/Filter/Filter.tsx Co-authored-by: yyassi-heartex <[email protected]> * fix problem with change the selected field was breaking everything --------- Co-authored-by: yyassi-heartex <[email protected]>
1 parent de154eb commit 2acc4f3

File tree

9 files changed

+57
-39
lines changed

9 files changed

+57
-39
lines changed

‎src/components/Filter/Filter.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Block, Elem } from '../../utils/bem';
22
import { Dropdown } from '../../common/Dropdown/Dropdown';
33

4-
import { FC, useCallback, useMemo, useState } from 'react';
4+
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
55
import { Button } from '../../common/Button/Button';
66
import { IconFilter } from '../../assets/icons';
77

@@ -13,10 +13,16 @@ import { FilterItems } from './filter-util';
1313
export const Filter: FC<FilterInterface> = ({
1414
availableFilters,
1515
filterData,
16-
// onChange,
16+
onChange,
1717
}) => {
1818
const [filterList, setFilterList] = useState<FilterListInterface[]>([]);
1919

20+
useEffect(() => {
21+
if(filterList.length > 0) {
22+
onChange(FilterItems(filterData, filterList[0]));
23+
}
24+
}, [filterData]);
25+
2026
const addNewFilterListItem = useCallback(() => {
2127
setFilterList((filterList) => [
2228
...filterList,
@@ -42,7 +48,7 @@ export const Filter: FC<FilterInterface> = ({
4248
path: path ?? newList[index].path,
4349
};
4450

45-
FilterItems(filterData, newList[index]);
51+
onChange(FilterItems(filterData, newList[index]));
4652

4753
return newList;
4854
});

‎src/components/Filter/FilterInterfaces.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export interface FilterInterface {
22
availableFilters: AvailableFiltersInterface[];
3-
onChange?: () => void;
3+
onChange: (filter: any) => void;
44
filterData: any;
55
}
66

‎src/components/Filter/FilterRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const FilterRow: FC<FilterRowInterface> = ({
3333
const [_inputComponent, setInputComponent] = useState(null);
3434

3535
useEffect(() => {
36-
onChange(index, { field:availableFilters[_selectedField].label, path: availableFilters[_selectedField].path, operation:'' });
36+
onChange(index, { field:availableFilters[_selectedField].label, path: availableFilters[_selectedField].path, operation:'', value:'' });
3737
}, [_selectedField]);
3838

3939
useEffect(() => {

‎src/components/Filter/filter-util.ts‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FilterListInterface } from './FilterInterfaces';
2+
import { isDefined } from '../../utils/utilities';
23

34
export const FilterItems = (items: any[], filterItem: FilterListInterface) => {
45
switch (filterItem.operation) {
@@ -33,7 +34,7 @@ export const FilterItems = (items: any[], filterItem: FilterListInterface) => {
3334

3435

3536
const contains = (items: any[], filterItem: FilterListInterface) => {
36-
if (filterItem.value) {
37+
if (isDefined(filterItem.value)) {
3738
return items.filter((obj) => {
3839
const item = getFilteredPath(filterItem.path, obj);
3940

@@ -45,7 +46,7 @@ const contains = (items: any[], filterItem: FilterListInterface) => {
4546
};
4647

4748
const notcontains = (items: any[], filterItem: FilterListInterface) => {
48-
if (filterItem.value) {
49+
if (isDefined(filterItem.value)) {
4950
return items.filter((obj) => {
5051
const item = getFilteredPath(filterItem.path, obj);
5152

@@ -57,7 +58,7 @@ const notcontains = (items: any[], filterItem: FilterListInterface) => {
5758
};
5859

5960
const greater = (items: any[], filterItem: FilterListInterface) => {
60-
if (filterItem.value) {
61+
if (isDefined(filterItem.value)) {
6162
return items.filter((obj) => {
6263
const item = getFilteredPath(filterItem.path, obj);
6364

@@ -69,7 +70,7 @@ const greater = (items: any[], filterItem: FilterListInterface) => {
6970
};
7071

7172
const greaterOrEqual = (items: any[], filterItem: FilterListInterface) => {
72-
if (filterItem.value) {
73+
if (isDefined(filterItem.value)) {
7374
return items.filter((obj) => {
7475
const item = getFilteredPath(filterItem.path, obj);
7576

@@ -81,7 +82,7 @@ const greaterOrEqual = (items: any[], filterItem: FilterListInterface) => {
8182
};
8283

8384
const less = (items: any[], filterItem: FilterListInterface) => {
84-
if (filterItem.value) {
85+
if (isDefined(filterItem.value)) {
8586
return items.filter((obj) => {
8687
const item = getFilteredPath(filterItem.path, obj);
8788

@@ -93,7 +94,7 @@ const less = (items: any[], filterItem: FilterListInterface) => {
9394
};
9495

9596
const lessOrEqual = (items: any[], filterItem: FilterListInterface) => {
96-
if (filterItem.value) {
97+
if (isDefined(filterItem.value)) {
9798
return items.filter((obj) => {
9899
const item = getFilteredPath(filterItem.path, obj);
99100

@@ -105,31 +106,31 @@ const lessOrEqual = (items: any[], filterItem: FilterListInterface) => {
105106
};
106107

107108
const equal = (items: any[], filterItem: FilterListInterface) => {
108-
if (filterItem.value) {
109+
if (isDefined(filterItem.value)) {
109110
return items.filter((obj) => {
110111
const item = getFilteredPath(filterItem.path, obj);
111112

112-
return item.toString().toLowerCase() === filterItem.value.toLowerCase();
113+
return item?.toString().toLowerCase() === filterItem.value?.toString().toLowerCase();
113114
});
114115
} else {
115116
return items;
116117
}
117118
};
118119

119120
const notequal = (items: any[], filterItem: FilterListInterface) => {
120-
if (filterItem.value) {
121+
if (isDefined(filterItem.value)) {
121122
return items.filter((obj) => {
122123
const item = getFilteredPath(filterItem.path, obj);
123124

124-
return item.toString().toLowerCase() !== filterItem.value.toLowerCase();
125+
return item?.toString().toLowerCase() !== filterItem.value?.toLowerCase();
125126
});
126127
} else {
127128
return items;
128129
}
129130
};
130131

131132
const between = (items: any[], filterItem: FilterListInterface) => {
132-
if (filterItem.value) {
133+
if (isDefined(filterItem.value)) {
133134
return items.filter((obj) => {
134135
const item = getFilteredPath(filterItem.path, obj);
135136

@@ -141,7 +142,7 @@ const between = (items: any[], filterItem: FilterListInterface) => {
141142
};
142143

143144
const notbetween = (items: any[], filterItem: FilterListInterface) => {
144-
if (filterItem.value) {
145+
if (isDefined(filterItem.value)) {
145146
return items.filter((obj) => {
146147
const item = getFilteredPath(filterItem.path, obj);
147148

‎src/components/Filter/types/Boolean.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import { observer } from 'mobx-react';
66
const BaseInput = observer((props) => (
77
<FilterDropdown
88
onChange={(value) => {
9-
props.onChange(value);
9+
props.onChange(!value);
1010
}}
1111
items={[
12-
{ label: 'yes' },
13-
{ label: 'no' },
12+
{ label: 'true', key: true },
13+
{ label: 'false', key: false },
1414
]}
1515
/>
1616
));

‎src/components/Filter/types/Number.js‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,14 @@ import React from 'react';
33
import { FilterInput } from '../FilterInput';
44
import { Common } from './Common';
55

6-
const valueFilter = (value) => {
7-
if (value) {
8-
if (typeof value === 'number') {
9-
return value;
10-
} else if (typeof value === 'string') {
11-
return value.replace(/([^\d.,]+)/, '');
12-
} else {
13-
return value || null;
14-
}
15-
}
16-
17-
return null;
18-
};
19-
206
const NumberInput = observer(( props ) => {
217
return (
228
<FilterInput
239
{...props}
2410
type='number'
25-
onChange={(value) => props.onChange(valueFilter(value))}
11+
value={props.value}
12+
pattern={'[0-9*]'}
13+
onChange={props.onChange}
2614
/>
2715
);
2816
});

‎src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const OutlinerPanelComponent: FC<OutlinerPanelProps> = ({ regions, ...props }) =
2121
setGroup(value);
2222
}, [regions]);
2323

24+
const onFilterChange = useCallback((value) => {
25+
regions.setFilteredRegions(value);
26+
}, [regions]);
27+
2428
useEffect(() => {
2529
setGroup(regions.group);
2630
}, []);
@@ -36,6 +40,7 @@ const OutlinerPanelComponent: FC<OutlinerPanelProps> = ({ regions, ...props }) =
3640
orderingDirection={regions.sortOrder}
3741
onOrderingChange={onOrderingChange}
3842
onGroupingChange={onGroupingChange}
43+
onFilterChange={onFilterChange}
3944
/>
4045
{regions?.regions?.length > 0 ? (
4146
<OutlinerTree
@@ -62,6 +67,10 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions, ...props }) => {
6267
setGroup(value);
6368
}, [regions]);
6469

70+
const onFilterChange = useCallback((value) => {
71+
regions.setFilteredRegions(value);
72+
}, [regions]);
73+
6574
useEffect(() => {
6675
setGroup(regions.group);
6776
}, []);
@@ -77,6 +86,7 @@ const OutlinerStandAlone: FC<OutlinerPanelProps> = ({ regions, ...props }) => {
7786
orderingDirection={regions.sortOrder}
7887
onOrderingChange={onOrderingChange}
7988
onGroupingChange={onGroupingChange}
89+
onFilterChange={onFilterChange}
8090
/>
8191
{regions?.regions?.length > 0 ? (
8292
<OutlinerTree

‎src/components/SidePanels/OutlinerPanel/ViewControls.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface ViewControlsProps {
2626
regions: any;
2727
onOrderingChange: (ordering: OrderingOptions) => void;
2828
onGroupingChange: (grouping: GroupingOptions) => void;
29+
onFilterChange: (filter: any) => void;
2930
}
3031

3132
export const ViewControls: FC<ViewControlsProps> = ({
@@ -35,6 +36,7 @@ export const ViewControls: FC<ViewControlsProps> = ({
3536
orderingDirection,
3637
onOrderingChange,
3738
onGroupingChange,
39+
onFilterChange,
3840
}) => {
3941
const context = useContext(SidePanelsContext);
4042
const getGrouppingLabels = useCallback((value: GroupingOptions): LabelInfo => {
@@ -92,6 +94,7 @@ export const ViewControls: FC<ViewControlsProps> = ({
9294
)}
9395
{isFF(FF_DEV_3873) && (
9496
<Filter
97+
onChange={onFilterChange}
9598
filterData={regions?.regions}
9699
availableFilters={[{
97100
label: 'Annotation results',
@@ -105,12 +108,12 @@ export const ViewControls: FC<ViewControlsProps> = ({
105108
},
106109
{
107110
label: 'Boolean',
108-
path: 'score',
111+
path: 'hidden',
109112
type: 'Boolean',
110113
},
111114
{
112115
label: 'Common',
113-
path: 'score',
116+
path: 'isDrawing',
114117
type: 'Common',
115118
}]}
116119
/>

‎src/stores/RegionStore.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,8 @@ export default types.model('RegionStore', {
144144
() => window.localStorage.getItem(localStorageKeys.group) ?? 'manual',
145145
),
146146

147+
filter: types.maybeNull(types.array(types.safeReference(AllRegionsType)), null),
148+
147149
view: types.optional(
148150
types.enumeration(['regions', 'labels']),
149151
window.localStorage.getItem(localStorageKeys.view) ?? 'regions',
@@ -212,6 +214,10 @@ export default types.model('RegionStore', {
212214
return Array.from(self.annotation.areas.values()).filter(area => !area.classification);
213215
},
214216

217+
get filteredRegions() {
218+
return self.filter || self.regions;
219+
},
220+
215221
get suggestions() {
216222
return Array.from(self.annotation.suggestions.values()).filter(area => !area.classification);
217223
},
@@ -222,8 +228,8 @@ export default types.model('RegionStore', {
222228

223229
get sortedRegions() {
224230
const sorts = {
225-
date: isDesc => [...self.regions].sort(isDesc ? (a, b) => b.ouid - a.ouid : (a, b) => a.ouid - b.ouid),
226-
score: isDesc => [...self.regions].sort(isDesc ? (a, b) => b.score - a.score : (a, b) => a.score - b.score),
231+
date: isDesc => [...self.filteredRegions].sort(isDesc ? (a, b) => b.ouid - a.ouid : (a, b) => a.ouid - b.ouid),
232+
score: isDesc => [...self.filteredRegions].sort(isDesc ? (a, b) => b.score - a.score : (a, b) => a.score - b.score),
227233
};
228234

229235
const sorted = sorts[self.sort](self.sortOrder === 'desc');
@@ -448,6 +454,10 @@ export default types.model('RegionStore', {
448454
window.localStorage.setItem(localStorageKeys.group, self.group);
449455
},
450456

457+
setFilteredRegions(filter) {
458+
self.filter = filter;
459+
},
460+
451461
/**
452462
* Delete region
453463
* @param {obj} region

0 commit comments

Comments
 (0)