Merge pull request #101 from NeuroJSON/dev-fan

feat: add copyable preview URLs in dataset detail page

Author: elainefan331

src/components/DatasetDetailPage/FileTree/FileTree.tsx

@@ -8,28 +8,28 @@ import React from "react";
 type Props = {
   title: string;
   tree: TreeNode[];
-  filesCount: number;
-  totalBytes: number;
+  // filesCount: number;
+  // totalBytes: number;
   // for preview in tree row
   onPreview: (src: string | any, index: number, isInternal?: boolean) => void;
   getInternalByPath: (path: string) => { data: any; index: number } | undefined;
   getJsonByPath?: (path: string) => any;
   highlightText?: string;
 };
 
-const formatSize = (n: number) => {
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 ** 2) return `${(n / 1024).toFixed(1)} KB`;
-  if (n < 1024 ** 3) return `${(n / 1024 ** 2).toFixed(2)} MB`;
-  if (n < 1024 ** 4) return `${(n / 1024 ** 3).toFixed(2)} GB`;
-  return `${(n / 1024 ** 4).toFixed(2)} TB`;
-};
+// const formatSize = (n: number) => {
+//   if (n < 1024) return `${n} B`;
+//   if (n < 1024 ** 2) return `${(n / 1024).toFixed(1)} KB`;
+//   if (n < 1024 ** 3) return `${(n / 1024 ** 2).toFixed(2)} MB`;
+//   if (n < 1024 ** 4) return `${(n / 1024 ** 3).toFixed(2)} GB`;
+//   return `${(n / 1024 ** 4).toFixed(2)} TB`;
+// };
 
 const FileTree: React.FC<Props> = ({
   title,
   tree,
-  filesCount,
-  totalBytes,
+  // filesCount,
+  // totalBytes,
   onPreview,
   getInternalByPath,
   getJsonByPath,

src/components/DatasetDetailPage/FileTree/FileTreeRow.tsx

@@ -123,26 +123,14 @@ const FileTreeRow: React.FC<Props> = ({
   const externalUrl = node.link?.url;
 
   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);
+  // Highlight only if this row is exactly the same as the focus highlightText
   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 +282,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/DatasetDetailPage/FileTree/utils.ts

@@ -87,8 +87,15 @@ export const buildTreeFromDoc = (
   if (Array.isArray(doc)) {
     doc.forEach((item, i) => {
       const path = `${curPath}/[${i}]`;
+      if (linkMap.has(path)) {
+        // console.log("PATH", path);
+        // console.log("has exact", linkMap.has(path));
+        // console.log("has _DataLink_", linkMap.has(`${path}/_DataLink_`));
+      } else {
+        // console.log("nothing matching in array docs");
+      }
+
       const linkHere = linkMap.get(path) || linkMap.get(`${path}/_DataLink_`);
-      // For primitive items, show "1: value" in the *name*
       const isPrimitive =
         item === null || ["string", "number", "boolean"].includes(typeof item);
       const label = isPrimitive ? `${i}: ${formatLeafValue(item)}` : String(i); // objects/arrays just show "1", "2", ...
@@ -97,7 +104,7 @@ export const buildTreeFromDoc = (
         out.push({
           kind: "folder",
           //   name: `[${i}]`,
-          name: label,
+          name: label, // For primitive items, show "1: value" in the name
           path,
           link: linkHere,
           children: buildTreeFromDoc(item, linkMap, path),
@@ -113,12 +120,21 @@ export const buildTreeFromDoc = (
         });
       }
     });
+    // console.log("out", out);
     return out;
   }
 
   Object.keys(doc).forEach((key) => {
     const val = doc[key];
     const path = `${curPath}/${key}`;
+    if (linkMap.has(path)) {
+      // console.log("PATH", path);
+      // console.log("has exact", linkMap.has(path));
+      // console.log("has _DataLink_", linkMap.has(`${path}/_DataLink_`));
+    } else {
+      // console.log("nothing match in object keys");
+    }
+
     const linkHere = linkMap.get(path) || linkMap.get(`${path}/_DataLink_`);
 
     if (val && typeof val === "object") {

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 />