refactor: dynamically generate database options in search form from registry

Author: elainefan331

src/pages/SearchPage.tsx

@@ -1,14 +1,19 @@
-import { schema } from "./searchformSchema";
+import { generateSchemaWithDatabaseEnum } from "./searchformSchema";
+// schema
 import { Typography, Container, Box } from "@mui/material";
 import Form from "@rjsf/mui";
 import validator from "@rjsf/validator-ajv8";
 import { Colors } from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
 import React from "react";
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
+// useEffect useMemo
 import { Link } from "react-router-dom";
-import { fetchMetadataSearchResults } from "redux/neurojson/neurojson.action";
+import {
+  fetchMetadataSearchResults,
+  fetchRegistry,
+} from "redux/neurojson/neurojson.action";
 import { RootState } from "redux/store";
 import RoutesEnum from "types/routes.enum";
 
@@ -18,6 +23,24 @@ const SearchPage: React.FC = () => {
   const searchResults = useAppSelector(
     (state: RootState) => state.neurojson.searchResults
   );
+  const registry = useAppSelector(
+    (state: RootState) => state.neurojson.registry
+  );
+
+  console.log("registry:", registry);
+  console.log("result:", searchResults);
+
+  useEffect(() => {
+    dispatch(fetchRegistry());
+  }, [dispatch]);
+
+  // dynamic add database enum to schema
+  const schema = useMemo(() => {
+    const dbList = registry?.length
+      ? [...registry.map((item: any) => item.id), "any"]
+      : ["any"];
+    return generateSchemaWithDatabaseEnum(dbList);
+  }, [registry]);
 
   const handleSubmit = ({ formData }: any) => {
     dispatch(fetchMetadataSearchResults(formData));
@@ -100,6 +123,7 @@ const SearchPage: React.FC = () => {
                                 textDecoration: "none",
                                 color: Colors.blue,
                               }}
+                              target="_blank"
                             >
                               {label}
                             </Link>

src/pages/searchformSchema.ts

@@ -1,26 +1,26 @@
 import { JSONSchema7 } from "json-schema";
 
-export const schema: JSONSchema7 = {
+export const baseSchema: JSONSchema7 = {
   title: "Metadata Search",
   type: "object",
   properties: {
     keyword: {
       title: "Search keyword",
       type: "string",
     },
-    database: {
-      title: "Search database",
-      type: "string",
-      default: "any",
-      enum: [
-        "openneuro",
-        "abide",
-        "abide2",
-        "datalad-registry",
-        "adhd200",
-        "any",
-      ],
-    },
+    // database: {
+    //   title: "Search database",
+    //   type: "string",
+    //   default: "any",
+    //   enum: [
+    //     "openneuro",
+    //     "abide",
+    //     "abide2",
+    //     "datalad-registry",
+    //     "adhd200",
+    //     "any",
+    //   ],
+    // },
     dataset: {
       title: "Search dataset",
       type: "string",
@@ -138,3 +138,21 @@ export const schema: JSONSchema7 = {
     // },
   },
 };
+
+// Helper to inject dynamic "database" enum
+export const generateSchemaWithDatabaseEnum = (
+  databaseEnum: string[]
+): JSONSchema7 => {
+  return {
+    ...baseSchema,
+    properties: {
+      database: {
+        title: "Search database",
+        type: "string",
+        default: "any",
+        enum: databaseEnum,
+      },
+      ...baseSchema.properties,
+    },
+  };
+};

src/services/neurojson.service.ts

@@ -73,6 +73,7 @@ export const NeurojsonService = {
     };
 
     const params = new URLSearchParams();
+    params.append("_get", "dbname, dsname, json");
     Object.keys(formData).forEach((key) => {
       let val = formData[key];
       if (val === "" || val === "any" || val === undefined || val === null)