Feature/dataset deatils page (#5)

* Webpage building

* [Fix][Remove package-lock

* [Fix][Validation]

* [Fix][Validation]

* [Fix][Validation]

* [Fix][Validation]

* [Fix][Validation]

* [Fix][Code]Structure update

* [Fix][Code]Structure update

* [Fix][Code]Structure update

* [Fix][Slice]Return setLoading

* [Fix][Slice]Return setLoading

* [Fix][Slice]Return setLoading

* DatasetDetailsPage features

---------

Co-authored-by: Hari Kiran <[email protected]>
Co-authored-by: MarSHub <[email protected]>

Author: 3 people

build/favicon.ico

@@ -203,10 +203,11 @@ const FullScreen = () => {
 			<Box
 				sx={{
 					width: "100%",
-					minHeight: "calc(100vh - 6rem)", // Ensure full height minus the AppBar height (6rem)
+					height: "calc(100vh - 6rem)",
 					boxSizing: "border-box",
 					marginTop: "6rem",
 					background: "#f0f0f0",
+					overflow: "auto",
 				}}
 			>
 				<Outlet />

build/io_fav.png

@@ -143,9 +143,10 @@ const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
 			ref={graphRef}
 			style={{
 				width: "100%",
-				height: "100vh",
+				maxHeight: "99%",
 				backgroundColor: "transparent",
 				position: "relative",
+				overflow: "hidden",
 			}}
 		/>
 	);

build/robots.txt

@@ -5,17 +5,62 @@ import {
 	CircularProgress,
 	Alert,
 	Button,
+	Card,
+	CardContent,
 } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import ReactJson from "react-json-view";
 import { useParams, useNavigate } from "react-router-dom";
 
+interface ExternalDataLink {
+	name: string;
+	size: string;
+	path: string;
+	url: string;
+}
+
 const DatasetDetailPage: React.FC = () => {
 	const { dbName, docId } = useParams<{ dbName: string; docId: string }>();
 	const navigate = useNavigate();
 	const [document, setDocument] = useState<any>(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [externalLinks, setExternalLinks] = useState<ExternalDataLink[]>([]);
+
+	// Recursive function to find `_DataLink_`
+	const extractDataLinks = (obj: any, path: string): ExternalDataLink[] => {
+		const links: ExternalDataLink[] = [];
+
+		if (typeof obj === "object" && obj !== null) {
+			for (const key in obj) {
+				if (obj.hasOwnProperty(key)) {
+					if (key === "_DataLink_" && typeof obj[key] === "string") {
+						// Use regex to remove anything starting from ':$' (non-greedy)
+						let correctedUrl = obj[key].replace(/:\$.*$/, ""); // Replace `:$<anything>` with ''
+
+						const sizeMatch = obj[key].match(/size=(\d+)/); // Extract size from the link
+						const size = sizeMatch
+							? `${(parseInt(sizeMatch[1], 10) / 1024 / 1024).toFixed(2)} MB`
+							: "Unknown Size";
+
+						const subMatch = path.match(/sub-\d+/); // Match the sub-field path
+						const subPath = subMatch ? subMatch[0] : "Unknown Sub";
+
+						links.push({
+							name: `NIFTIData (${size}) [/${subPath}]`,
+							size,
+							path: subPath,
+							url: correctedUrl, // Use the corrected URL
+						});
+					} else if (typeof obj[key] === "object") {
+						links.push(...extractDataLinks(obj[key], `${path}/${key}`));
+					}
+				}
+			}
+		}
+
+		return links;
+	};
 
 	useEffect(() => {
 		const fetchData = async () => {
@@ -25,6 +70,10 @@ const DatasetDetailPage: React.FC = () => {
 				if (dbName && docId) {
 					const data = await fetchDocumentById(dbName, docId);
 					setDocument(data);
+
+					// Extract external links
+					const links = extractDataLinks(data, "");
+					setExternalLinks(links);
 				}
 			} catch (err) {
 				console.error("Error fetching document:", err);
@@ -101,6 +150,69 @@ const DatasetDetailPage: React.FC = () => {
 					</Typography>
 				)}
 			</Box>
+
+			{/* External Data Section */}
+			{externalLinks.length > 0 && (
+				<Box sx={{ marginTop: 4 }}>
+					<Typography variant="h5" gutterBottom>
+						External Data ({externalLinks.length} links)
+					</Typography>
+					<Box
+						sx={{
+							display: "grid",
+							gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+							gap: 2,
+						}}
+					>
+						{externalLinks.map((link, index) => (
+							<Card
+								key={index}
+								sx={{
+									border: "1px solid #ddd",
+									borderRadius: "8px",
+									padding: 2,
+									backgroundColor: "#f9f9f9",
+								}}
+							>
+								<CardContent>
+									<Typography>{link.name}</Typography>
+									<Box sx={{ marginTop: 2, display: "flex", gap: 1 }}>
+										<Button
+											variant="contained"
+											size="small"
+											onClick={() => window.open(link.url, "_blank")}
+										>
+											Download
+										</Button>
+										<Button
+											variant="outlined"
+											size="small"
+											onClick={() => console.log("Preview", link.url)}
+										>
+											Preview
+										</Button>
+										<Button
+											variant="outlined"
+											size="small"
+											onClick={() => console.log("URL", link.url)}
+										>
+											URL
+										</Button>
+										<Button
+											variant="text"
+											size="small"
+											color="error"
+											onClick={() => console.log("Close", link.url)}
+										>
+											Close
+										</Button>
+									</Box>
+								</CardContent>
+							</Card>
+						))}
+					</Box>
+				</Box>
+			)}
 		</Box>
 	);
 };