feat: add highlightKeyword function and apply it to authors field in DatasetCard for test; refs #60

Author: elainefan331

src/components/SearchPage/DatasetCard.tsx

@@ -22,6 +22,7 @@ interface DatasetCardProps {
   };
   index: number;
   onChipClick: (key: string, value: string) => void;
+  keyword?: string; // for keyword highlight
 }
 
 const DatasetCard: React.FC<DatasetCardProps> = ({
@@ -30,6 +31,7 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
   parsedJson,
   index,
   onChipClick,
+  keyword, //
 }) => {
   const { name, readme, modality, subj, info } = parsedJson.value;
   const datasetLink = `${RoutesEnum.DATABASES}/${dbname}/${dsname}`;
@@ -38,6 +40,33 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
   const rawDOI = info?.DatasetDOI?.replace(/^doi:/, "");
   const doiLink = rawDOI ? `https://doi.org/${rawDOI}` : null;
 
+  // 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");
+    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>
@@ -68,6 +97,7 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
           target="_blank"
         >
           {name || "Untitled Dataset"}
+          {/* {highlightKeyword(name || "Untitled Dataset", keyword)} */}
         </Typography>
         <Typography>
           Database: {dbname} &nbsp;&nbsp;|&nbsp;&nbsp; Dataset: {dsname}
@@ -130,6 +160,7 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
                 sx={{ textOverflow: "ellipsis" }}
               >
                 <strong>Summary:</strong> {readme}
+                {/* <strong>Summary:</strong> {highlightKeyword(readme, keyword)} */}
               </Typography>
             )}
           </Stack>
@@ -139,11 +170,14 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
                 {info?.Authors && (
                   <Typography variant="body2" mt={1}>
                     <strong>Authors:</strong>{" "}
-                    {Array.isArray(info.Authors)
-                      ? info.Authors.join(", ")
-                      : typeof info.Authors === "string"
-                      ? info.Authors
-                      : "N/A"}
+                    {highlightKeyword(
+                      Array.isArray(info.Authors)
+                        ? info.Authors.join(", ")
+                        : typeof info.Authors === "string"
+                        ? info.Authors
+                        : "N/A",
+                      keyword
+                    )}
                   </Typography>
                 )}
               </Typography>

src/pages/SearchPage.tsx

@@ -556,6 +556,7 @@ const SearchPage: React.FC = () => {
                             dsname={item.dsname}
                             parsedJson={parsedJson}
                             onChipClick={handleChipClick}
+                            keyword={formData.keyword} // for keyword highlight
                           />
                         ) : (
                           <SubjectCard