feat: highlight and scroll for any row via focus param

Author: elainefan331

src/components/DatasetDetailPage/FileTree/FileTreeRow.tsx

@@ -124,25 +124,15 @@ const FileTreeRow: React.FC<Props> = ({
 
   const rowRef = React.useRef<HTMLDivElement | null>(null);
   // Highlight only if this row is exactly the subject folder (e.g., "sub-04")
-  const isSubjectFolder =
-    node.kind === "folder" && /^sub-[A-Za-z0-9]+$/i.test(node.name);
+  // const isSubjectFolder =
+  //   node.kind === "folder" && /^sub-[A-Za-z0-9]+$/i.test(node.name);
   const isExactHit =
     !!highlightText &&
-    isSubjectFolder &&
-    node.name.toLowerCase() === highlightText.toLowerCase();
+    node.name.trim().toLowerCase() === highlightText.trim().toLowerCase();
 
   React.useEffect(() => {
     if (isExactHit && rowRef.current) {
       rowRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
-      // subtle flash
-      // rowRef.current.animate(
-      //   [
-      //     { backgroundColor: `${Colors.yellow}`, offset: 0 }, // turn yellow
-      //     { backgroundColor: `${Colors.yellow}`, offset: 0.85 }, // stay yellow 85% of time
-      //     { backgroundColor: "transparent", offset: 1 }, // then fade out
-      //   ],
-      //   { duration: 8000, easing: "ease", fill: "forwards" }
-      // );
     }
   }, [isExactHit]);
 
@@ -294,7 +284,15 @@ const FileTreeRow: React.FC<Props> = ({
   // if the node is a file
   return (
     <Box
-      sx={{ display: "flex", alignItems: "flex-start", gap: 1, py: 0.5, px: 1 }}
+      ref={rowRef}
+      sx={{
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 1,
+        py: 0.5,
+        px: 1,
+        ...rowHighlightSx,
+      }}
     >
       <Box sx={{ pl: level * 1.25, pt: "2px" }}>
         <InsertDriveFileIcon

src/components/SearchPage/SubjectCard.tsx

@@ -34,12 +34,7 @@ const SubjectCard: React.FC<SubjectCardProps> = ({
 }) => {
   const { modalities, tasks, sessions, types } = parsedJson.value;
   const subjectLink = `${RoutesEnum.DATABASES}/${dbname}/${dsname}`;
-  const canonicalSubj = /^sub-/i.test(subj)
-    ? subj
-    : `sub-${String(subj)
-        .replace(/^sub-/i, "")
-        .replace(/^0+/, "")
-        .padStart(2, "0")}`;
+  const formattedSubj = /^sub-/i.test(subj) ? subj : `sub-${String(subj)}`;
 
   // get the gender of subject
   const genderCode = parsedJson?.key?.[1];
@@ -91,7 +86,7 @@ const SubjectCard: React.FC<SubjectCardProps> = ({
           }}
           component={Link}
           // to={subjectLink}
-          to={`${subjectLink}?focusSubj=${encodeURIComponent(canonicalSubj)}`}
+          to={`${subjectLink}?focus=${encodeURIComponent(formattedSubj)}`}
           // target="_blank"
         >
           <PersonOutlineIcon />

src/pages/UpdatedDatasetDetailPage.tsx

@@ -57,13 +57,8 @@ const UpdatedDatasetDetailPage: React.FC = () => {
   const { dbName, docId } = useParams<{ dbName: string; docId: string }>();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
-  // for subject highlight
-  const focusSubjRaw = searchParams.get("focusSubj") || undefined;
-  const focusSubj = !focusSubjRaw
-    ? undefined
-    : /^sub-/i.test(focusSubjRaw)
-    ? focusSubjRaw
-    : `sub-${focusSubjRaw.replace(/^0+/, "").padStart(2, "0")}`;
+  // for highlight
+  const focus = searchParams.get("focus") || undefined;
 
   // for revision
   const rev = searchParams.get("rev") || undefined;
@@ -902,7 +897,7 @@ const UpdatedDatasetDetailPage: React.FC = () => {
                   onPreview={handlePreview} // pass the function down to FileTree
                   getInternalByPath={getInternalByPath}
                   getJsonByPath={getJsonByPath}
-                  highlightText={focusSubj} // for subject highlight
+                  highlightText={focus} // for highlight
                 />
               </Box>
             </Box>