Skip to content

Commit a3c5291

Browse files
erinz2020erinz2020
authored
Merge pull request #1021 from WildMeOrg/1007_encounter_search_tab_change_display_issue
1007 encounter search tab change display issue
2 parents bef6e05 + a8ce617 commit a3c5291

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1438
-1080
lines changed

‎frontend/src/AuthenticatedSwitch.jsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Footer from "./components/Footer";
88
import AuthenticatedAppHeader from "./components/AuthenticatedAppHeader";
99
import useGetMe from "./models/auth/users/useGetMe";
1010
import AlertBanner from "./components/AlertBanner";
11-
import EncounterSearch from "./pages/EncounterSearch";
11+
import EncounterSearch from "./pages/SearchPages/EncounterSearch";
1212
import Citation from "./pages/Citation";
1313
import AdminLogs from "./pages/AdminLogs";
1414
import ReportEncounter from "./pages/ReportsAndManagamentPages/ReportEncounter";
@@ -68,10 +68,8 @@ export default function AuthenticatedSwitch({
6868
<Route path="/reportConfirm" element={<ReportConfirm />} />
6969
<Route path="/encounter-search" element={<EncounterSearch />} />
7070
<Route path="/admin/logs" element={<AdminLogs />} />
71-
<Route path="/manual-annotation" element={<ManualAnnotation
72-
73-
/>} />
74-
71+
<Route path="/manual-annotation" element={<ManualAnnotation />} />
72+
7573
<Route path="/login" element={<Login />} />
7674
<Route path="/" element={<Home />} />
7775
<Route path="*" element={<NotFound setHeader={setHeader} />} />

‎frontend/src/components/AndSelector.jsx‎

Lines changed: 16 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import Select from "react-select";
22
import React from "react";
3-
import { useEffect, useState } from "react";
4-
import { useRef } from "react";
53
import { FormattedMessage } from "react-intl";
64
import { FormGroup, FormLabel } from "react-bootstrap";
75
import Description from "./Form/Description";
@@ -22,53 +20,29 @@ export default function AndSelector({
2220
label,
2321
isMulti,
2422
options,
25-
onChange,
2623
field,
2724
filterKey,
25+
store,
26+
value,
2827
}) {
29-
const [selectedOptions, setSelectedOptions] = useState([]);
30-
const selectedOptionsRef = useRef(selectedOptions);
31-
32-
useEffect(() => {
33-
onChange(null, field);
34-
return () => {
35-
options.forEach((option) => {
36-
onChange(null, `${field}.${option.value}`);
37-
});
38-
};
39-
}, []);
28+
const valuesSet = new Set(value);
29+
const selectedOptions = options.filter((item) => valuesSet.has(item.value));
4030

4131
const handleChange = (selected) => {
42-
const addedOptions = selected.filter(
43-
(option) => !selectedOptions.includes(option),
44-
);
45-
const removedOptions = selectedOptions.filter(
46-
(option) => !selected.includes(option),
47-
);
48-
49-
setSelectedOptions(selected || []);
50-
selectedOptionsRef.current = selected || [];
32+
store.removeFilterByFilterKey(filterKey);
5133

52-
if (addedOptions.length > 0) {
53-
addedOptions.forEach((option) => {
54-
onChange({
55-
filterId: `${field}.${option.value}`,
56-
clause: "filter",
57-
filterKey: filterKey,
58-
query: {
59-
term: {
60-
[field]: option.value,
61-
},
34+
selected.forEach((option) => {
35+
store.addFilter(
36+
`${field}.${option.value}`,
37+
"filter",
38+
{
39+
term: {
40+
[field]: option.value,
6241
},
63-
});
64-
});
65-
}
66-
67-
if (removedOptions.length > 0) {
68-
removedOptions.forEach((option) => {
69-
onChange(null, `${field}.${option.value}`);
70-
});
71-
}
42+
},
43+
filterKey,
44+
);
45+
});
7246
};
7347

7448
return (

‎frontend/src/components/Chip.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,7 @@ function Chip({ children }) {
7474
entries.push(`${filterKey || key} contains "${value}"`);
7575
});
7676
} else if (query?.exists) {
77-
// eslint-disable-next-line no-unused-vars
78-
Object.entries(query.exists).forEach(([key, value]) => {
77+
Object.entries(query.exists).forEach(([, value]) => {
7978
entries.push(`${filterKey || value} filter is set`);
8079
});
8180
} else if (query?.term) {
@@ -99,8 +98,7 @@ function Chip({ children }) {
9998
`${filterKey || filterId} is any of [${uniqueLabels.join(", ")}]`,
10099
);
101100
} else if (query?.biologicalMeasurements) {
102-
// eslint-disable-next-line no-unused-vars
103-
Object.entries(query).forEach(([key, value]) => {
101+
Object.entries(query).forEach(([key, _]) => {
104102
entries.push(`${filterKey || key} filter is set`);
105103
});
106104
}
@@ -113,6 +111,13 @@ function Chip({ children }) {
113111
});
114112
});
115113
}
114+
if (query.bool.should) {
115+
Object.entries(query.bool.should[0].wildcard).forEach(
116+
([key, value]) => {
117+
entries.push(`${filterKey || key} matches "${value}"`);
118+
},
119+
);
120+
}
116121
}
117122

118123
if (query?.geo_distance) {

‎frontend/src/components/FilterPanel.jsx‎

Lines changed: 15 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -7,47 +7,17 @@ import BrutalismButton from "./BrutalismButton";
77
import useGetSiteSettings from "../models/useGetSiteSettings";
88
import { Col, Row } from "react-bootstrap";
99
import { FormattedMessage } from "react-intl";
10-
11-
function setFilter(newFilter, tempFormFilters, setTempFormFilters) {
12-
const matchingFilterIndex = tempFormFilters.findIndex(
13-
(f) => f.filterId === newFilter.filterId,
14-
);
15-
if (matchingFilterIndex === -1) {
16-
if (newFilter?.filterId?.startsWith("microsatelliteMarkers.loci")) {
17-
tempFormFilters.splice(
18-
0,
19-
tempFormFilters.length,
20-
newFilter,
21-
...tempFormFilters,
22-
);
23-
} else {
24-
setTempFormFilters([...tempFormFilters, newFilter]);
25-
}
26-
} else {
27-
if (
28-
newFilter?.filterId?.startsWith("microsatelliteMarkers.loci") ||
29-
newFilter?.filterId?.startsWith("measurements")
30-
) {
31-
tempFormFilters[matchingFilterIndex] = newFilter;
32-
} else {
33-
const newFormFilters = [...tempFormFilters];
34-
newFormFilters[matchingFilterIndex] = newFilter;
35-
setTempFormFilters(newFormFilters);
36-
}
37-
}
38-
}
10+
import { useSearchParams } from "react-router-dom";
3911

4012
export default function FilterPanel({
4113
schemas,
42-
formFilters = [],
43-
setFormFilters = () => {},
4414
setFilterPanel,
4515
style = {},
4616
handleSearch = () => {},
47-
setSearchParams = () => {},
48-
setQueryID = "",
17+
refetch = () => {},
18+
setTempFormFilters = () => {},
19+
store,
4920
}) {
50-
const [tempFormFilters, setTempFormFilters] = useState([]);
5121
const { data } = useGetSiteSettings();
5222
const safeSchemas = schemas || [];
5323
const [clicked, setClicked] = useState(safeSchemas[0]?.id);
@@ -56,6 +26,7 @@ export default function FilterPanel({
5626
const schemaRefs = useRef([]);
5727
const isScrollingByClick = useRef(false);
5828
const scrollTimeout = useRef(null);
29+
const [, setSearchParams] = useSearchParams();
5930

6031
useEffect(() => {
6132
safeSchemas.forEach((schema, index) => {
@@ -97,28 +68,6 @@ export default function FilterPanel({
9768
});
9869
};
9970

100-
useEffect(() => {
101-
setTempFormFilters(formFilters);
102-
}, [formFilters]);
103-
104-
useEffect(() => {}, [tempFormFilters]);
105-
106-
const handleFilterChange = (filter = null, remove) => {
107-
if (remove) {
108-
setTempFormFilters((prevFilters) => {
109-
const newFilters = prevFilters.filter((f) => f.filterId !== remove);
110-
return newFilters;
111-
});
112-
} else {
113-
setFilter(filter, tempFormFilters, setTempFormFilters);
114-
}
115-
};
116-
117-
const clearFilter = (filterId) => {
118-
const newFormFilters = formFilters.filter((f) => f.filterId !== filterId);
119-
setTempFormFilters(newFormFilters);
120-
};
121-
12271
return (
12372
<Container
12473
style={{
@@ -142,7 +91,6 @@ export default function FilterPanel({
14291
backdropFilter: "blur(3px)",
14392
WebkitBackdropFilter: "blur(2px)",
14493
fontSize: "20px",
145-
// flexWrap: "wrap",
14694
}}
14795
>
14896
{safeSchemas.map((schema, index) => {
@@ -195,25 +143,17 @@ export default function FilterPanel({
195143
backgroundColor={theme.primaryColors.primary700}
196144
borderColor={theme.primaryColors.primary700}
197145
onClick={() => {
198-
const uniqueFilters = Array.from(
199-
new Map(
200-
tempFormFilters.map((filter) => [
201-
filter.filterId,
202-
filter,
203-
]),
204-
).values(),
146+
setTempFormFilters([...store.formFilters]);
147+
refetch().then(({ data }) => {
148+
console.log("Refetched data:", data);
149+
});
150+
setSearchParams(new URLSearchParams());
151+
sessionStorage.setItem(
152+
"formData",
153+
JSON.stringify(store.formFilters),
205154
);
206-
setFormFilters(uniqueFilters);
207155
setFilterPanel(false);
208156
handleSearch();
209-
setQueryID(null);
210-
setSearchParams((prevSearchParams) => {
211-
const newSearchParams = new URLSearchParams(
212-
prevSearchParams,
213-
);
214-
newSearchParams.delete("searchQueryId");
215-
return newSearchParams;
216-
});
217157
}}
218158
noArrow={true}
219159
style={{
@@ -231,8 +171,7 @@ export default function FilterPanel({
231171
}}
232172
borderColor={theme.primaryColors.primary700}
233173
onClick={() => {
234-
setFormFilters([]);
235-
setTempFormFilters([]);
174+
store.resetFilters();
236175
setSearchParams(new URLSearchParams());
237176
window.location.reload();
238177
}}
@@ -271,13 +210,9 @@ export default function FilterPanel({
271210
<schema.FilterComponent
272211
key={schema.id}
273212
labelId={schema.labelId}
274-
onChange={handleFilterChange}
275-
onClearFilter={clearFilter}
276213
{...schema.filterComponentProps}
277214
data={data}
278-
tempFormFilters={tempFormFilters}
279-
setFormFilters={setFormFilters}
280-
formFilters={formFilters}
215+
store={store}
281216
/>
282217
) : (
283218
<div>

0 commit comments

Comments
 (0)