Skip to content

Commit 9a2b79a

Browse files
elainefan331elainefan331
committed
refactor: extract search page utility functions and constants into separate files for clarity; refs #53 
1 parent 6b3db02 commit 9a2b79a

File tree

4 files changed

+162
-152
lines changed

4 files changed

+162
-152
lines changed

‎src/pages/SearchPage.tsx‎

Lines changed: 7 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { generateSchemaWithDatabaseEnum } from "../utils/searchformSchema";
1+
import { generateSchemaWithDatabaseEnum } from "../utils/SearchPageFunctions/searchformSchema";
22
import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
33
import {
44
Typography,
@@ -27,22 +27,8 @@ import {
2727
fetchRegistry,
2828
} from "redux/neurojson/neurojson.action";
2929
import { RootState } from "redux/store";
30-
31-
const modalityValueToEnumLabel: Record<string, string> = {
32-
anat: "Structural MRI (anat)",
33-
func: "fMRI (func)",
34-
dwi: "DWI (dwi)",
35-
fmap: "Field maps (fmap)",
36-
perf: "Perfusion (perf)",
37-
meg: "MEG (meg)",
38-
eeg: "EEG (eeg)",
39-
ieeg: "Intracranial EEG (ieeg)",
40-
beh: "Behavioral (beh)",
41-
pet: "PET (pet)",
42-
micr: "microscopy (micr)",
43-
nirs: "fNIRS (nirs)",
44-
motion: "motion (motion)",
45-
};
30+
import { generateUiSchema } from "utils/SearchPageFunctions/generateUiSchema";
31+
import { modalityValueToEnumLabel } from "utils/SearchPageFunctions/modalityLabels";
4632

4733
const SearchPage: React.FC = () => {
4834
const dispatch = useAppDispatch();
@@ -128,141 +114,10 @@ const SearchPage: React.FC = () => {
128114
: [];
129115

130116
// form UI
131-
const uiSchema = useMemo(() => {
132-
const activeStyle = {
133-
"ui:options": {
134-
style: {
135-
backgroundColor: Colors.lightBlue,
136-
},
137-
},
138-
};
139-
140-
// hide subject-level filter
141-
const invisibleStyle = {
142-
"ui:options": {
143-
style: {
144-
display: "none",
145-
},
146-
},
147-
};
148-
149-
const hiddenStyle = {
150-
"ui:options": {
151-
style: {
152-
display: showSubjectFilters ? "block" : "none",
153-
},
154-
},
155-
};
156-
157-
return {
158-
keyword: formData["keyword"] ? activeStyle : {},
159-
database:
160-
formData["database"] && formData["database"] !== "any"
161-
? activeStyle
162-
: {},
163-
// dataset: formData["dataset"] ? activeStyle : {},
164-
// limit: formData["limit"] ? activeStyle : {},
165-
// skip: formData["skip"] ? activeStyle : {},
166-
limit: invisibleStyle,
167-
skip: invisibleStyle,
168-
169-
// subject-level filters
170-
subject_filters_toggle: {
171-
"ui:field": "subjectFiltersToggle",
172-
},
173-
modality: showSubjectFilters
174-
? formData["modality"] && formData["modality"] !== "any"
175-
? activeStyle
176-
: {}
177-
: hiddenStyle,
178-
179-
age_min: showSubjectFilters
180-
? formData["age_min"]
181-
? activeStyle
182-
: {}
183-
: hiddenStyle,
184-
age_max: showSubjectFilters
185-
? formData["age_max"]
186-
? activeStyle
187-
: {}
188-
: hiddenStyle,
189-
190-
gender: showSubjectFilters
191-
? formData["gender"] && formData["gender"] !== "any"
192-
? activeStyle
193-
: {}
194-
: hiddenStyle,
195-
196-
sess_min: showSubjectFilters
197-
? formData["sess_min"]
198-
? activeStyle
199-
: {}
200-
: hiddenStyle,
201-
sess_max: showSubjectFilters
202-
? formData["sess_max"]
203-
? activeStyle
204-
: {}
205-
: hiddenStyle,
206-
207-
task_min: showSubjectFilters
208-
? formData["task_min"]
209-
? activeStyle
210-
: {}
211-
: hiddenStyle,
212-
task_max: showSubjectFilters
213-
? formData["task_max"]
214-
? activeStyle
215-
: {}
216-
: hiddenStyle,
217-
218-
run_min: showSubjectFilters
219-
? formData["run_min"]
220-
? activeStyle
221-
: {}
222-
: hiddenStyle,
223-
run_max: showSubjectFilters
224-
? formData["run_max"]
225-
? activeStyle
226-
: {}
227-
: hiddenStyle,
228-
229-
task_name: showSubjectFilters
230-
? formData["task_name"]
231-
? activeStyle
232-
: {}
233-
: hiddenStyle,
234-
type_name: showSubjectFilters
235-
? formData["type_name"]
236-
? activeStyle
237-
: {}
238-
: hiddenStyle,
239-
session_name: showSubjectFilters
240-
? formData["session_name"]
241-
? activeStyle
242-
: {}
243-
: hiddenStyle,
244-
run_name: showSubjectFilters
245-
? formData["run_name"]
246-
? activeStyle
247-
: {}
248-
: hiddenStyle,
249-
250-
"ui:submitButtonOptions": {
251-
props: {
252-
sx: {
253-
backgroundColor: Colors.purple,
254-
color: Colors.white,
255-
"&:hover": {
256-
backgroundColor: Colors.secondaryPurple,
257-
transform: "scale(1.05)",
258-
},
259-
},
260-
},
261-
submitText: "Submit",
262-
norender: true,
263-
},
264-
};
265-
}, [formData, showSubjectFilters]);
117+
const uiSchema = useMemo(
118+
() => generateUiSchema(formData, showSubjectFilters),
119+
[formData, showSubjectFilters]
120+
);
266121

267122
// Create the "Subject-level Filters" button as a custom field
268123
const customFields = {

‎src/utils/SearchPageFunctions/generateUiSchema.ts‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { Colors } from "design/theme";
2+
3+
// Controls the background highlight of selected fields
4+
// Controls the visibility of subject-level filters
5+
export const generateUiSchema = (
6+
formData: Record<string, any>,
7+
showSubjectFilters: boolean
8+
) => {
9+
const activeStyle = {
10+
"ui:options": {
11+
style: {
12+
backgroundColor: Colors.lightBlue,
13+
},
14+
},
15+
};
16+
17+
// hide subject-level filter
18+
const invisibleStyle = {
19+
"ui:options": {
20+
style: {
21+
display: "none",
22+
},
23+
},
24+
};
25+
26+
const hiddenStyle = {
27+
"ui:options": {
28+
style: {
29+
display: showSubjectFilters ? "block" : "none",
30+
},
31+
},
32+
};
33+
34+
return {
35+
keyword: formData["keyword"] ? activeStyle : {},
36+
database:
37+
formData["database"] && formData["database"] !== "any" ? activeStyle : {},
38+
// dataset: formData["dataset"] ? activeStyle : {},
39+
// limit: formData["limit"] ? activeStyle : {},
40+
// skip: formData["skip"] ? activeStyle : {},
41+
limit: invisibleStyle,
42+
skip: invisibleStyle,
43+
44+
// subject-level filters
45+
subject_filters_toggle: {
46+
"ui:field": "subjectFiltersToggle",
47+
},
48+
modality: showSubjectFilters
49+
? formData["modality"] && formData["modality"] !== "any"
50+
? activeStyle
51+
: {}
52+
: hiddenStyle,
53+
54+
age_min: showSubjectFilters
55+
? formData["age_min"]
56+
? activeStyle
57+
: {}
58+
: hiddenStyle,
59+
age_max: showSubjectFilters
60+
? formData["age_max"]
61+
? activeStyle
62+
: {}
63+
: hiddenStyle,
64+
65+
gender: showSubjectFilters
66+
? formData["gender"] && formData["gender"] !== "any"
67+
? activeStyle
68+
: {}
69+
: hiddenStyle,
70+
71+
sess_min: showSubjectFilters
72+
? formData["sess_min"]
73+
? activeStyle
74+
: {}
75+
: hiddenStyle,
76+
sess_max: showSubjectFilters
77+
? formData["sess_max"]
78+
? activeStyle
79+
: {}
80+
: hiddenStyle,
81+
82+
task_min: showSubjectFilters
83+
? formData["task_min"]
84+
? activeStyle
85+
: {}
86+
: hiddenStyle,
87+
task_max: showSubjectFilters
88+
? formData["task_max"]
89+
? activeStyle
90+
: {}
91+
: hiddenStyle,
92+
93+
run_min: showSubjectFilters
94+
? formData["run_min"]
95+
? activeStyle
96+
: {}
97+
: hiddenStyle,
98+
run_max: showSubjectFilters
99+
? formData["run_max"]
100+
? activeStyle
101+
: {}
102+
: hiddenStyle,
103+
104+
task_name: showSubjectFilters
105+
? formData["task_name"]
106+
? activeStyle
107+
: {}
108+
: hiddenStyle,
109+
type_name: showSubjectFilters
110+
? formData["type_name"]
111+
? activeStyle
112+
: {}
113+
: hiddenStyle,
114+
session_name: showSubjectFilters
115+
? formData["session_name"]
116+
? activeStyle
117+
: {}
118+
: hiddenStyle,
119+
run_name: showSubjectFilters
120+
? formData["run_name"]
121+
? activeStyle
122+
: {}
123+
: hiddenStyle,
124+
125+
"ui:submitButtonOptions": {
126+
props: {
127+
sx: {
128+
backgroundColor: Colors.purple,
129+
color: Colors.white,
130+
"&:hover": {
131+
backgroundColor: Colors.secondaryPurple,
132+
transform: "scale(1.05)",
133+
},
134+
},
135+
},
136+
submitText: "Submit",
137+
norender: true,
138+
},
139+
};
140+
};

‎src/utils/SearchPageFunctions/modalityLabels.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const modalityValueToEnumLabel: Record<string, string> = {
2+
anat: "Structural MRI (anat)",
3+
func: "fMRI (func)",
4+
dwi: "DWI (dwi)",
5+
fmap: "Field maps (fmap)",
6+
perf: "Perfusion (perf)",
7+
meg: "MEG (meg)",
8+
eeg: "EEG (eeg)",
9+
ieeg: "Intracranial EEG (ieeg)",
10+
beh: "Behavioral (beh)",
11+
pet: "PET (pet)",
12+
micr: "microscopy (micr)",
13+
nirs: "fNIRS (nirs)",
14+
motion: "motion (motion)",
15+
};

src/utils/searchformSchema.ts renamed to src/utils/SearchPageFunctions/searchformSchema.ts

File renamed without changes.

0 commit comments

Comments
 (0)