feat: add DatasetCard component to display dataset-level search results

elainefan331 · elainefan331 · commit 3de04fcbbf16 · 2025-04-08T16:42:10.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -50,7 +50,6 @@
     /> -->
 
     <title>NeuroJSON.io - Free Data Worth Sharing</title>
-    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
@@ -3,7 +3,6 @@ import DatabasePage from "pages/DatabasePage";
 import DatasetDetailPage from "pages/DatasetDetailPage";
 import DatasetPage from "pages/DatasetPage";
 import Home from "pages/Home";
-import SearchForm from "pages/SearchForm";
 import SearchPage from "pages/SearchPage";
 import React from "react";
 import { Navigate, Route, Routes as RouterRoutes } from "react-router-dom";
@@ -32,7 +31,6 @@ const Routes = () => (
 
       {/* Search Page */}
       <Route path={RoutesEnum.SEARCH} element={<SearchPage />} />
-      {/* <Route path={RoutesEnum.SEARCH} element={<SearchForm />} /> */}
     </Route>
   </RouterRoutes>
 );
diff --git a/src/components/SearchPage/DatasetCard.tsx b/src/components/SearchPage/DatasetCard.tsx
@@ -0,0 +1,91 @@
+import {
+  Box,
+  Typography,
+  Card,
+  CardContent,
+  Stack,
+  Chip,
+  Grid,
+  Link,
+} from "@mui/material";
+import { Colors } from "design/theme";
+import React from "react";
+
+interface DatasetCardProps {
+  dbname: string;
+  dsname: string;
+  parsedJson: {
+    key: string;
+    value: {
+      name?: string;
+      readme?: string;
+      modality?: string[];
+      subj?: string[];
+      info?: {
+        Authors?: string[];
+        DatasetDOI?: string;
+      };
+    };
+  };
+}
+
+const DatasetCard: React.FC<DatasetCardProps> = ({
+  dbname,
+  dsname,
+  parsedJson,
+}) => {
+  const { name, readme, modality, subj, info } = parsedJson.value;
+
+  // prepare DOI URL
+  const rawDOI = info?.DatasetDOI?.replace(/^doi:/, "");
+  const doiLink = rawDOI ? `https://doi.org/${rawDOI}` : null;
+
+  return (
+    <Card sx={{ mb: 3 }}>
+      <CardContent>
+        <Typography variant="h6" sx={{ color: "#6C6C8E", fontWeight: 600 }}>
+          {name || "Untitled Dataset"}
+        </Typography>
+
+        <Typography variant="body2" color="text.secondary" gutterBottom>
+          ID: {dsname}
+        </Typography>
+
+        <Stack>
+          {subj && <Chip label={`${subj.length} subjects`} color="primary" />}
+          {modality?.map((mod, idx) => (
+            <Chip key={idx} label={mod} color="info" />
+          ))}
+        </Stack>
+
+        {readme && (
+          <Typography variant="body2" paragraph>
+            <strong>Summary:</strong> {readme}
+          </Typography>
+        )}
+
+        {info?.Authors?.length && (
+          <Typography>
+            <strong>Authors:</strong> {info?.Authors?.join(", ")}
+          </Typography>
+        )}
+
+        {doiLink && (
+          <Stack mt={1}>
+            <Chip
+              label="DOI"
+              component="a"
+              href={doiLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              clickable
+              sx={{ backgroundColor: "#c9a636", color: "white" }}
+            />
+          </Stack>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DatasetCard;
diff --git a/src/components/SearchPage/SubjectCard.tsx b/src/components/SearchPage/SubjectCard.tsx
@@ -0,0 +1,8 @@
+import { Box, Card, CardContent, Grid, Link } from "@mui/material";
+import { Colors } from "design/theme";
+
+const SubjectCard: React.FC = () => {
+  return <></>;
+};
+
+export default SubjectCard;
diff --git a/src/pages/SearchForm.tsx b/src/pages/SearchForm.tsx
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
@@ -1,5 +1,4 @@
 import { generateSchemaWithDatabaseEnum } from "./searchformSchema";
-// schema
 import { Typography, Container, Box } from "@mui/material";
 import Form from "@rjsf/mui";
 import validator from "@rjsf/validator-ajv8";
@@ -8,7 +7,6 @@ import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
 import React from "react";
 import { useState, useEffect, useMemo } from "react";
-// useEffect useMemo
 import { Link } from "react-router-dom";
 import {
   fetchMetadataSearchResults,
@@ -27,14 +25,26 @@ const SearchPage: React.FC = () => {
     (state: RootState) => state.neurojson.registry
   );
 
-  console.log("registry:", registry);
   console.log("result:", searchResults);
+  if (Array.isArray(searchResults)) {
+    searchResults.forEach((item, idx) => {
+      //   console.log(`Raw item #${idx}:`, item);
+      try {
+        const parsed = JSON.parse(item.json);
+        console.log(`Result #${idx}:`, { ...item, parsedJson: parsed });
+      } catch (e) {
+        console.error(`Failed to parse JSON for item #${idx}`, e);
+      }
+    });
+  } else {
+    console.warn("searchResults is not an array:", searchResults);
+  }
 
   useEffect(() => {
     dispatch(fetchRegistry());
   }, [dispatch]);
 
-  // dynamic add database enum to schema
+  // dynamically add database enum to schema
   const schema = useMemo(() => {
     const dbList = registry?.length
       ? [...registry.map((item: any) => item.id), "any"]
@@ -49,7 +59,6 @@ const SearchPage: React.FC = () => {
 
   return (
     <Container
-      //   maxWidth="md"
       style={{
         marginTop: "2rem",
         // backgroundColor: "rgba(97, 109, 243, 0.4)",
@@ -62,18 +71,13 @@ const SearchPage: React.FC = () => {
     >
       <Box
         sx={{
-          //   backgroundColor: "white",
-          //   p: 3,
-          //   borderRadius: 2,
-          //   boxShadow: 1,
           display: "flex",
           gap: 3,
           alignItems: "flex-start",
         }}
       >
         <Box
           sx={{
-            // flex: "0 0 300px", // fixed width
             flex: 1,
             backgroundColor: "white",
             p: 3,
@@ -85,7 +89,7 @@ const SearchPage: React.FC = () => {
             schema={schema}
             onSubmit={handleSubmit}
             validator={validator}
-            liveValidate
+            // liveValidate
           />
         </Box>
 
diff --git a/src/pages/searchformSchema.ts b/src/pages/searchformSchema.ts
@@ -137,6 +137,7 @@ export const baseSchema: JSONSchema7 = {
     //   default: false,
     // },
   },
+  required: ["keyword"],
 };
 
 // Helper to inject dynamic "database" enum
diff --git a/src/types/json-editor.d.ts b/src/types/json-editor.d.ts
