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",