feat: add collapsible dataset-level filters to search page; closes #95

Author: elainefan331

src/pages/SearchPage.tsx

@@ -71,6 +71,8 @@ const SearchPage: React.FC = () => {
 
  const [formData, setFormData] = useState<Record<string, any>>({});
  const [showSubjectFilters, setShowSubjectFilters] = useState(false);
+ const [showDatasetFilters, setShowDatasetFilters] = useState(true); // for dataset-level filters
+
  const [results, setResults] = useState<
  any[] | { status: string; msg: string }
  >([]);
@@ -130,6 +132,8 @@ const SearchPage: React.FC = () => {
  setFormData(initial);
  setAppliedFilters(initial);
  setHasSearched(false); // set it to true if want to auto-run search
+ setShowSubjectFilters(true); // expand the subject-level section
+ setShowDatasetFilters(false); // collapse the dataset-level section
  }
  }, []);
 
@@ -184,8 +188,8 @@ const SearchPage: React.FC = () => {
 
  // form UI
  const uiSchema = useMemo(
- () => generateUiSchema(formData, showSubjectFilters),
- [formData, showSubjectFilters]
+ () => generateUiSchema(formData, showSubjectFilters, showDatasetFilters),
+ [formData, showSubjectFilters, showDatasetFilters]
  );
 
  // Create the "Subject-level Filters" button as a custom field
@@ -208,6 +212,22 @@ const SearchPage: React.FC = () => {
  </Button>
  </Box>
  ),
+ datasetFiltersToggle: () => (
+ <Box sx={{ mt: 1, mb: 1 }}>
+ <Button
+ variant="outlined"
+ onClick={() => setShowDatasetFilters((prev) => !prev)}
+ sx={{
+ color: Colors.purple,
+ borderColor: Colors.purple,
+ "&:hover": { transform: "scale(1.05)", borderColor: Colors.purple },
+ }}
+ aria-expanded={showDatasetFilters}
+ >
+ Dataset-Level Filters
+ </Button>
+ </Box>
+ ),
  };
 
  // determine the results are subject-level or dataset-level

src/utils/SearchPageFunctions/generateUiSchema.ts

@@ -4,7 +4,8 @@ import { Colors } from "design/theme";
 // Controls the visibility of subject-level filters
 export const generateUiSchema = (
  formData: Record<string, any>,
- showSubjectFilters: boolean
+ showSubjectFilters: boolean,
+ showDatasetFilters: boolean
 ) => {
  const activeStyle = {
  "ui:options": {
@@ -31,10 +32,58 @@ export const generateUiSchema = (
  },
  };
 
+ // collapsible sections (subject-level & dataset-level)
+ // const subjectHiddenStyle = {
+ // "ui:options": {
+ // style: { display: showSubjectFilters ? "block" : "none" },
+ // },
+ // };
+
+ const datasetHiddenStyle = {
+ "ui:options": {
+ style: { display: showDatasetFilters ? "block" : "none" },
+ },
+ };
+
  return {
- keyword: formData["keyword"] ? activeStyle : {},
- database:
- formData["database"] && formData["database"] !== "any" ? activeStyle : {},
+ "ui:order": [
+ "dataset_filters_toggle", // button first
+ "database",
+ "keyword",
+ "subject_filters_toggle",
+ "modality",
+ "gender",
+ "age_min",
+ "age_max",
+ "sess_min",
+ "sess_max",
+ "task_min",
+ "task_max",
+ "run_min",
+ "run_max",
+ "task_name",
+ "type_name",
+ "session_name",
+ "run_name",
+ "limit",
+ "skip",
+ "*", // anything else not listed
+ ],
+ // keyword: formData["keyword"] ? activeStyle : {},
+ dataset_filters_toggle: { "ui:field": "datasetFiltersToggle" },
+ keyword: showDatasetFilters
+ ? formData["keyword"]
+ ? activeStyle
+ : {}
+ : datasetHiddenStyle,
+ // database:
+ // formData["database"] && formData["database"] !== "any" ? activeStyle : {},
+ database: showDatasetFilters
+ ? formData["database"] && formData["database"] !== "any"
+ ? activeStyle
+ : {}
+ : datasetHiddenStyle,
+
  // dataset: formData["dataset"] ? activeStyle : {},
  // limit: formData["limit"] ? activeStyle : {},
  // skip: formData["skip"] ? activeStyle : {},

src/utils/SearchPageFunctions/searchformSchema.ts

@@ -4,6 +4,10 @@ export const baseSchema: JSONSchema7 = {
  title: "",
  type: "object",
  properties: {
+ dataset_filters_toggle: {
+ type: "null",
+ title: "Dataset Filters",
+ },
  keyword: {
  title: "Search keyword",
  type: "string",