feat: add revision select dropdown menu with link in dataset detail page

elainefan331 · elainefan331 · commit 1ce5acc2a7cb · 2025-09-10T11:57:50.000-04:00
diff --git a/src/components/DatasetDetailPage/MetaDataPanel.tsx b/src/components/DatasetDetailPage/MetaDataPanel.tsx
@@ -1,13 +1,44 @@
-import { Box, Typography } from "@mui/material";
+import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import {
+  Box,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Chip,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
 import { Colors } from "design/theme";
-import React from "react";
+import React, { useMemo, useState } from "react";
 
 type Props = {
   dbViewInfo: any;
   datasetDocument: any;
+  dbName: string | undefined;
+  docId: string | undefined;
 };
 
-const MetaDataPanel: React.FC<Props> = ({ dbViewInfo, datasetDocument }) => {
+type RevInfo = { rev: string };
+
+const MetaDataPanel: React.FC<Props> = ({
+  dbViewInfo,
+  datasetDocument,
+  dbName,
+  docId,
+}) => {
+  const revs: RevInfo[] = useMemo(
+    () =>
+      Array.isArray(datasetDocument?.["_revs_info"])
+        ? (datasetDocument!["_revs_info"] as RevInfo[])
+        : [],
+    [datasetDocument]
+  );
+  const [revIdx, setRevIdx] = useState(0);
+  const selected = revs[revIdx];
+
   return (
     <Box
       sx={{
@@ -39,7 +70,6 @@ const MetaDataPanel: React.FC<Props> = ({ dbViewInfo, datasetDocument }) => {
             {dbViewInfo?.rows?.[0]?.value?.modality?.join(", ") ?? "N/A"}
           </Typography>
         </Box>
-
         <Box>
           <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
             DOI
@@ -76,7 +106,6 @@ const MetaDataPanel: React.FC<Props> = ({ dbViewInfo, datasetDocument }) => {
             })()}
           </Typography>
         </Box>
-
         <Box>
           <Typography sx={{ color: Colors.darkPurple, fontWeight: "600" }}>
             Subjects
@@ -120,6 +149,87 @@ const MetaDataPanel: React.FC<Props> = ({ dbViewInfo, datasetDocument }) => {
                   ?.ReferencesAndLinks ?? "N/A"}
           </Typography>
         </Box>
+
+        {revs.length > 0 && (
+          <Box
+            sx={{
+              mt: 2,
+              p: 2,
+              border: `1px solid ${Colors.lightGray}`,
+              borderRadius: 1,
+            }}
+          >
+            <Typography
+              //   variant="subtitle1"
+              sx={{ mb: 1, fontWeight: 600, color: Colors.darkPurple }}
+            >
+              Revisions
+            </Typography>
+
+            <FormControl fullWidth size="small" sx={{ mb: 1 }}>
+              <InputLabel id="rev-select-label">Select revision</InputLabel>
+              <Select
+                labelId="rev-select-label"
+                label="Select revision"
+                value={revIdx}
+                onChange={(e) => setRevIdx(Number(e.target.value))}
+              >
+                {revs.map((r, idx) => (
+                  <MenuItem key={r.rev} value={idx}>
+                    <Typography
+                      component="span"
+                      sx={{ fontFamily: "monospace" }}
+                    >
+                      {r.rev.slice(0, 8)}…{r.rev.slice(-4)}
+                    </Typography>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+
+            {selected && (
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 1,
+                }}
+              >
+                <Box sx={{ minWidth: 0 }}>
+                  <Typography variant="body2" sx={{ color: "text.secondary" }}>
+                    Selected rev:
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{ fontFamily: "monospace", wordBreak: "break-all" }}
+                    title={selected.rev}
+                  >
+                    {selected.rev}
+                  </Typography>
+                </Box>
+                <Tooltip title="Open this revision in NeuroJSON.io">
+                  <IconButton
+                    size="small"
+                    onClick={() =>
+                      window.open(
+                        `https://neurojson.io:7777/${dbName}/${docId}?rev=${selected.rev}`,
+                        "_blank"
+                      )
+                    }
+                  >
+                    <ArrowCircleRightIcon
+                      fontSize="small"
+                      sx={{
+                        color: Colors.purple,
+                      }}
+                    />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            )}
+          </Box>
+        )}
       </Box>
     </Box>
   );
diff --git a/src/components/DatasetPageCard.tsx b/src/components/DatasetPageCard.tsx
@@ -51,7 +51,7 @@ const DatasetPageCard: React.FC<DatasetPageCardProps> = ({
   const navigate = useNavigate();
   const datasetIndex = (page - 1) * pageSize + index + 1;
   const sizeInBytes = React.useMemo(() => {
-    const len = (doc as any)?.value?.length; // bytes from backend (full doc)
+    const len = (doc as any)?.value?.length; // bytes from length key
     if (typeof len === "number" && Number.isFinite(len)) return len;
     return jsonBytes(doc.value); // fallback: summary object size
   }, [doc.value]);
diff --git a/src/pages/UpdatedDatasetDetailPage.tsx b/src/pages/UpdatedDatasetDetailPage.tsx
@@ -26,7 +26,7 @@ import { Colors } from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
 import React, { useEffect, useMemo, useState } from "react";
-import ReactJson from "react-json-view";
+// import ReactJson from "react-json-view";
 import { useParams, useNavigate } from "react-router-dom";
 import {
   fetchDocumentDetails,
@@ -74,22 +74,16 @@ const UpdatedDatasetDetailPage: React.FC = () => {
   const [previewIndex, setPreviewIndex] = useState<number>(0);
   const aiSummary = datasetDocument?.[".datainfo"]?.AISummary ?? "";
 
-  useEffect(() => {
-    if (!datasetDocument) {
-      setJsonSize(0);
-      return;
-    }
-    const bytes = new TextEncoder().encode(
-      JSON.stringify(datasetDocument)
-    ).length;
-    setJsonSize(bytes);
-  }, [datasetDocument]);
-
-  // 1) detect subjects at the top level, return true or false
-  const hasTopLevelSubjects = useMemo(
-    () => Object.keys(datasetDocument || {}).some((k) => /^sub-/i.test(k)),
-    [datasetDocument]
-  );
+  //   useEffect(() => {
+  //     if (!datasetDocument) {
+  //       setJsonSize(0);
+  //       return;
+  //     }
+  //     const bytes = new TextEncoder().encode(
+  //       JSON.stringify(datasetDocument)
+  //     ).length;
+  //     setJsonSize(bytes);
+  //   }, [datasetDocument]);
 
   const linkMap = useMemo(() => makeLinkMap(externalLinks), [externalLinks]);
 
@@ -98,26 +92,6 @@ const UpdatedDatasetDetailPage: React.FC = () => {
     [datasetDocument, linkMap]
   );
 
-  // “rest” JSON only when we actually have subjects
-  //   const rest = useMemo(() => {
-  //     if (!datasetDocument || !hasTopLevelSubjects) return {};
-  //     const r: any = {};
-  //     Object.keys(datasetDocument).forEach((k) => {
-  //       if (!/^sub-/i.test(k)) r[k] = (datasetDocument as any)[k];
-  //     });
-  //     return r;
-  //   }, [datasetDocument, hasTopLevelSubjects]);
-
-  // JSON panel should always render:
-  // - if we have subjects -> JSON show "rest" (everything except sub-*)
-  // - if we don't have subjects -> JSON show the whole document
-  //   const jsonPanelData = useMemo(
-  //     () => (hasTopLevelSubjects ? rest : datasetDocument || {}),
-  //     [hasTopLevelSubjects, rest, datasetDocument]
-  //   );
-
-  // 5) header title + counts also fall back
-  //   const treeTitle = hasTopLevelSubjects ? "Subjects" : "Files";
   const treeTitle = "Files";
   const filesCount = externalLinks.length;
   const totalBytes = useMemo(() => {
@@ -268,15 +242,24 @@ const UpdatedDatasetDetailPage: React.FC = () => {
     return internalLinks;
   };
 
+  //   useEffect(() => {
+  //     const fetchData = async () => {
+  //       if (dbName && docId) {
+  //         await dispatch(fetchDocumentDetails({ dbName, docId }));
+  //         await dispatch(fetchDbInfoByDatasetId({ dbName, docId }));
+  //       }
+  //     };
+
+  //     fetchData();
+  //   }, [dbName, docId, dispatch]);
+
   useEffect(() => {
-    const fetchData = async () => {
-      if (dbName && docId) {
-        await dispatch(fetchDocumentDetails({ dbName, docId }));
-        await dispatch(fetchDbInfoByDatasetId({ dbName, docId }));
-      }
-    };
+    if (!dbName || !docId) return;
 
-    fetchData();
+    (async () => {
+      await dispatch(fetchDocumentDetails({ dbName, docId })); // render tree ASAP
+      dispatch(fetchDbInfoByDatasetId({ dbName, docId })); // don't await
+    })();
   }, [dbName, docId, dispatch]);
 
   useEffect(() => {
@@ -289,7 +272,10 @@ const UpdatedDatasetDetailPage: React.FC = () => {
           index, // Assign index correctly
         })
       );
-
+      const bytes = new TextEncoder().encode(
+        JSON.stringify(datasetDocument)
+      ).length;
+      setJsonSize(bytes);
       // Extract Internal Data & Assign `index`
       const internalData = extractInternalData(datasetDocument).map(
         (data, index) => ({
@@ -414,18 +400,7 @@ const UpdatedDatasetDetailPage: React.FC = () => {
       if (typeof window !== "undefined" && (window as any).__previewType) {
         return (window as any).__previewType === "2d";
       }
-      // if (window.__previewType) {
-      //   console.log("work~~~~~~~");
-      //   return window.__previewType === "2d";
-      // }
-      //   console.log("is 2d preview candidate !== 2d");
-      //   console.log("obj", obj);
-      // if (typeof obj === "string" && obj.includes("db=optics-at-martinos")) {
-      //   return false;
-      // }
-      // if (typeof obj === "string" && obj.endsWith(".jdb")) {
-      //   return true;
-      // }
+
       if (!obj || typeof obj !== "object") {
         return false;
       }
@@ -434,8 +409,6 @@ const UpdatedDatasetDetailPage: React.FC = () => {
         return false;
       }
       const dim = obj._ArraySize_;
-      //   console.log("array.isarray(dim)", Array.isArray(dim));
-      //   console.log("dim.length", dim.length === 1 || dim.length === 2);
 
       return (
         Array.isArray(dim) &&
@@ -512,18 +485,6 @@ const UpdatedDatasetDetailPage: React.FC = () => {
         typeof dataOrUrl === "string" ? extractFileName(dataOrUrl) : "";
       if (isPreviewableFile(fileName)) {
         (window as any).previewdataurl(dataOrUrl, idx);
-        // const is2D = is2DPreviewCandidate(dataOrUrl);
-        // const panel = document.getElementById("chartpanel");
-        // console.log("is2D", is2D);
-        // console.log("panel", panel);
-
-        // if (is2D) {
-        //   //   console.log("📊 2D data → rendering inline with dopreview()");
-        //   if (panel) panel.style.display = "block"; // Show it!
-        //   setPreviewOpen(false); // Don't open modal
-        // } else {
-        //   if (panel) panel.style.display = "none"; // Hide chart panel on 3D external
-        // }
       } else {
         console.warn("⚠️ Unsupported file format for preview:", dataOrUrl);
       }
@@ -871,6 +832,8 @@ const UpdatedDatasetDetailPage: React.FC = () => {
             <MetaDataPanel
               datasetDocument={datasetDocument}
               dbViewInfo={dbViewInfo}
+              dbName={dbName}
+              docId={docId}
             />
           </Box>
         </Box>
diff --git a/src/services/neurojson.service.ts b/src/services/neurojson.service.ts
@@ -30,7 +30,9 @@ export const NeurojsonService = {
   },
   getDocumentById: async (dbName: string, documentId: string): Promise<any> => {
     try {
-      const response = await api.get(`${baseURL}/${dbName}/${documentId}`);
+      const response = await api.get(
+        `${baseURL}/${dbName}/${documentId}?revs_info=true`
+      );
       return response.data;
     } catch (error) {
       console.error(
