feat: add matching database card to the search page; refs #81

Author: elainefan331

src/components/SearchPage/DatabaseCard.tsx

@@ -0,0 +1,166 @@
+import {
+  Box,
+  Typography,
+  Chip,
+  Card,
+  CardContent,
+  Stack,
+  Avatar,
+} from "@mui/material";
+import { Colors } from "design/theme";
+import React from "react";
+import { Link } from "react-router-dom";
+import RoutesEnum from "types/routes.enum";
+
+type Props = {
+  dbName?: string;
+  fullName?: string;
+  datasets?: number;
+  modalities?: string[];
+  logo?: string;
+  keyword?: string;
+  onChipClick: (key: string, value: string) => void;
+};
+
+const DatabaseCard: React.FC<Props> = ({
+  dbName,
+  fullName,
+  datasets,
+  modalities,
+  logo,
+  keyword,
+  onChipClick,
+}) => {
+  const databaseLink = `${RoutesEnum.DATABASES}/${dbName}`;
+  // keyword hightlight functional component
+  const highlightKeyword = (text: string, keyword?: string) => {
+    if (!keyword || !text?.toLowerCase().includes(keyword.toLowerCase())) {
+      return text;
+    }
+
+    const regex = new RegExp(`(${keyword})`, "gi"); // for case-insensitive and global
+    const parts = text.split(regex);
+
+    return (
+      <>
+        {parts.map((part, i) =>
+          part.toLowerCase() === keyword.toLowerCase() ? (
+            <mark
+              key={i}
+              style={{ backgroundColor: "yellow", fontWeight: 600 }}
+            >
+              {part}
+            </mark>
+          ) : (
+            <React.Fragment key={i}>{part}</React.Fragment>
+          )
+        )}
+      </>
+    );
+  };
+
+  return (
+    <Card sx={{ mb: 3, position: "relative" }}>
+      <CardContent>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            gap: 2,
+          }}
+        >
+          {/* Logo as Avatar */}
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            {logo && (
+              <Avatar
+                variant="square"
+                src={logo}
+                alt={fullName || "Database Logo"}
+                sx={{
+                  width: 60,
+                  height: 60,
+                  mb: 1,
+                  "& img": {
+                    objectFit: "contain", // show full image inside
+                  },
+                }}
+              />
+            )}
+          </Box>
+          {/* database card */}
+          <Box>
+            <Typography
+              variant="h6"
+              sx={{
+                fontWeight: 600,
+                color: Colors.darkPurple,
+                textDecoration: "none",
+                ":hover": { textDecoration: "underline" },
+              }}
+              component={Link}
+              to={databaseLink}
+              target="_blank"
+            >
+              Database:{" "}
+              {highlightKeyword(fullName || "Untitled Database", keyword)}
+            </Typography>
+            <Stack spacing={2} margin={1}>
+              <Stack
+                direction="row"
+                spacing={1}
+                flexWrap="wrap"
+                gap={1}
+                alignItems="center"
+              >
+                <Typography variant="body2" mt={1}>
+                  <strong>Modalities:</strong>
+                </Typography>
+
+                {Array.isArray(modalities) && modalities.length > 0 ? (
+                  modalities.map((mod, idx) => (
+                    <Chip
+                      key={idx}
+                      label={mod}
+                      variant="outlined"
+                      onClick={() => onChipClick("modality", mod)}
+                      sx={{
+                        "& .MuiChip-label": {
+                          paddingX: "6px",
+                          fontSize: "0.8rem",
+                        },
+                        height: "24px",
+                        color: Colors.darkPurple,
+                        border: `1px solid ${Colors.darkPurple}`,
+                        fontWeight: "bold",
+                        transition: "all 0.2s ease",
+                        "&:hover": {
+                          backgroundColor: `${Colors.purple} !important`,
+                          color: "white",
+                          borderColor: Colors.purple,
+                        },
+                      }}
+                    />
+                  ))
+                ) : (
+                  <Typography variant="body2" mt={1}>
+                    N/A
+                  </Typography>
+                )}
+              </Stack>
+
+              <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
+                <Typography variant="body2" mt={1}>
+                  <strong>Datasets:</strong> {datasets ?? "N/A"}
+                </Typography>
+              </Stack>
+            </Stack>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DatabaseCard;

src/pages/SearchPage.tsx

@@ -14,6 +14,7 @@ import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import Form from "@rjsf/mui";
 import validator from "@rjsf/validator-ajv8";
+import DatabaseCard from "components/SearchPage/DatabaseCard";
 import DatasetCard from "components/SearchPage/DatasetCard";
 import SubjectCard from "components/SearchPage/SubjectCard";
 import { Colors } from "design/theme";
@@ -30,6 +31,25 @@ import { RootState } from "redux/store";
 import { generateUiSchema } from "utils/SearchPageFunctions/generateUiSchema";
 import { modalityValueToEnumLabel } from "utils/SearchPageFunctions/modalityLabels";
 
+type RegistryItem = {
+  id: string;
+  name?: string;
+  fullname?: string;
+  datatype?: string[];
+  datasets?: number;
+  logo?: string;
+};
+
+const matchesKeyword = (item: RegistryItem, keyword: string) => {
+  if (!keyword) return false;
+  const needle = keyword.toLowerCase();
+  return (
+    item.name?.toLowerCase().includes(needle) ||
+    item.fullname?.toLowerCase().includes(needle) ||
+    item.datatype?.some((dt) => dt.toLowerCase().includes(needle))
+  );
+};
+
 const SearchPage: React.FC = () => {
   const dispatch = useAppDispatch();
   const [hasSearched, setHasSearched] = useState(false);
@@ -54,6 +74,17 @@ const SearchPage: React.FC = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
+  // for database card
+  const keywordInput = String(formData?.keyword ?? "").trim();
+  console.log("keyword", keywordInput);
+
+  const registryMatches: RegistryItem[] = React.useMemo(() => {
+    if (!Array.isArray(registry) || !keywordInput) return [];
+    return (registry as RegistryItem[]).filter((r) =>
+      matchesKeyword(r, keywordInput)
+    );
+  }, [registry, keywordInput]);
+
   // to show the applied chips on the top of results
   const activeFilters = Object.entries(appliedFilters).filter(
     ([key, value]) =>
@@ -298,13 +329,14 @@ const SearchPage: React.FC = () => {
 
   return (
     <Container
+      maxWidth={false}
       style={{
         marginTop: "2rem",
         marginBottom: "2rem",
         backgroundColor: Colors.white,
         padding: "2rem",
         borderRadius: 4,
-        width: "100%",
+        width: "95%",
       }}
     >
       <Box // box for title and show filters button(mobile version)
@@ -465,6 +497,30 @@ const SearchPage: React.FC = () => {
             </Box>
           )}
 
+          {/* matching databases */}
+          {keywordInput && registryMatches.length > 0 && (
+            <Box sx={{ mb: 3 }}>
+              <Typography
+                variant="h6"
+                sx={{ mb: 1.5, mt: 1.5, fontWeight: "600" }}
+              >
+                Matching Databases
+              </Typography>
+              {registryMatches.map((db) => (
+                <DatabaseCard
+                  key={db.id}
+                  dbName={db.name}
+                  fullName={db.fullname}
+                  datasets={db.datasets}
+                  modalities={db.datatype}
+                  logo={db.logo}
+                  keyword={formData.keyword} // for keyword highlight
+                  onChipClick={handleChipClick}
+                />
+              ))}
+            </Box>
+          )}
+
           {/* results */}
           {hasSearched && (
             <Box mt={4}>

src/pages/UpdatedDatasetDetailPage.tsx

@@ -272,10 +272,16 @@ const UpdatedDatasetDetailPage: React.FC = () => {
           index, // Assign index correctly
         })
       );
-      const bytes = new TextEncoder().encode(
-        JSON.stringify(datasetDocument)
-      ).length;
-      setJsonSize(bytes);
+
+      const bytes = new Blob([JSON.stringify(datasetDocument)], {
+        type: "application/json",
+      });
+      setJsonSize(bytes.size);
+
+      //   const bytes = new TextEncoder().encode(
+      //     JSON.stringify(datasetDocument)
+      //   ).length;
+      //   setJsonSize(bytes);
       // Extract Internal Data & Assign `index`
       const internalData = extractInternalData(datasetDocument).map(
         (data, index) => ({