\n \n
\n `}({key:e.key,size:t(e)});const r=n.querySelector("."+m.CARET_ICON);e.dispose=function(e,n,t){return e.addEventListener(n,t),()=>e.removeEventListener(n,t)}(r,"click",(()=>N(e)))}else n.innerHTML=function(e={}){const{key:n,value:t,type:r}=e;return`\n ${n}
\n ${t}
\n \n \n
\n `}({key:e.key,value:e.value,type:"{}"===e.value?"object":typeof e.value});const r=n.children[0];return null!==e.parent&&r.classList.add(m.HIDDEN),r.style="margin-left: "+18*e.depth+"px;",r}(e),t.appendChild(e.el)})),n.appendChild(t)}function D(e){C(e,(function(e){e.el.classList.remove(m.HIDDEN),e.isExpanded=!0,j(e)}))}function A(e){C(e,(function(n){n.isExpanded=!1,n.depth>e.depth&&n.el.classList.add(m.HIDDEN),E(n)}))}function L(e){var n;C(e,(e=>{e.dispose&&e.dispose()})),(n=e.el.parentNode).parentNode.removeChild(n)}const H={toggleNode:N,render:w,create:S,renderJSON:k,expand:D,collapse:A,traverse:C,destroy:L}})(),r})()));
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index fb09efa..92a3d73 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,24 @@
+import { GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import Routes from "components/Routes";
import theme from "design/theme";
import { BrowserRouter } from "react-router-dom";
const App = () => {
- return (
- ${n}
\n :
\n ${t}
\n
+ {value === index && {children} }
+
+ );
+ };
+
+ const CopyableCodeBlock = ({
+ code,
+ language = "python",
+ }: {
+ code: string;
+ language?: string;
+ }) => {
+ // const handleCopy = () => {
+ // navigator.clipboard.writeText(code);
+ // };
+ const [copied, setCopied] = useState(false);
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(code);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 3000); // reset after 3s
+ } catch (err) {
+ console.error("Failed to copy:", err);
+ }
+ };
+
+ return (
+ pip install jdata bjdata numpy
+
+ {`import jdata as jd
+data = jd.loadurl('${datasetUrl}')
+
+# List all externally linked files
+links = jd.jsonpath(data, '$.._DataLink_')
+
+# Download & cache anatomical nii.gz data for sub-01/sub-02
+jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\\.nii'})`}
+
+ Download and addpath to JSONLab
+
+ {`data = loadjson('${datasetUrl}');
+
+% or without JSONLab (webread cannot decode JData annotations)
+data = webread('${datasetUrl}');
+
+% List all externally linked files
+links = jsonpath(data, '$.._DataLink_');
+
+% Download & cache anatomical nii.gz data for sub-01/sub-02
+niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
+
+
+ {`data = loadjd('${docname}.json');`}
+
+
+ {`data.(encodevarname('${onekey}'))`}
+
+
+ {`import jdata as jd
+data = jd.load('${docname}.json')`}
+
+
+ {`data["${onekey}"]`}
+
+
+ Download JSON for Modern C++ json.hpp
+
+
+ {`#include "json.hpp"
+using json=nlohmann::ordered_json;
+
+std::ifstream datafile("${docname}.json");
+json data(datafile);`}
+
+
+ {`std::cout << data["${onekey}"];`}
+
+ npm install jda numjs pako atob
+
+ {`const fs = require("fs");
+const jd = require("jda");
+global.atob = require("atob");
+
+const fn = "${docname}.json";
+var jstr = fs.readFileSync(fn).toString().replace(/\\n/g, "");
+var data = new jd(JSON.parse(jstr));
+data = data.decode();`}
+
+
+ {`console.log(data.data["${onekey}"]);`}
+
+ 
+ 
+ 
+
+
+
+ {/* Spinner overlay */}
+ {/* {isLoading && (
+
+ );
+};
+
+export default PreviewModal;
diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
index a2dc9f2..b1918ee 100644
--- a/src/components/Routes.tsx
+++ b/src/components/Routes.tsx
@@ -1,15 +1,44 @@
import FullScreen from "design/Layouts/FullScreen";
+import AboutPage from "pages/AboutPage";
+import DatabasePage from "pages/DatabasePage";
+import DatasetDetailPage from "pages/DatasetDetailPage";
+import DatasetPage from "pages/DatasetPage";
import Home from "pages/Home";
-import { Navigate, Route, Routes as RoutesFromRouter } from "react-router-dom";
+import SearchPage from "pages/SearchPage";
+import NewDatasetPage from "pages/UpdatedDatasetPage";
+import React from "react";
+import { Navigate, Route, Routes as RouterRoutes } from "react-router-dom";
import RoutesEnum from "types/routes.enum";
const Routes = () => (
-
+ {/* --- NEW: Conditional rendering of the spinner --- */}
+ {/* {isLoading &&
+ {/*
+ {isLoading &&
*/}
+
+ {/* Control Panel */}
+
+ {/* Close Button */}
+
+
+ {/* Header */}
+
+
+ + +
+ + + + View +
+ + + + + + +
+ Preview
+ + {/* Render Panel */} +
+ Display Mode
+
+ + + + + + Colormap +
+ + +
+ + +
+ + +
+
+ Cross Sections
+ + + + + + + Colormap +
+ + +
+ + +
+ + +
+
+ X
+
+
+
+
+
+ Y
+
+
+
+
+
+ Z
+
+
+
+
+
+ T
+
+
+
+ Clip Plane
+ + + +
+ + + + View +
+ + + + + + +
Loading...
;
- if (error) return Error: {error}
;
-
- return (
-
- );
+// Define the datatype to color mapping
+export const DATA_TYPE_COLORS: Record${value}`;
+ } else if (typeof value === "object") {
+ transformed[key] = transformJsonForDisplay(value);
+ } else {
+ transformed[key] = value;
+ }
+ }
+
+ return transformed;
+};
+
+const formatAuthorsWithDOI = (
+ authors: string[] | string,
+ doi: string
+): JSX.Element => {
+ let authorText = "";
+
+ if (Array.isArray(authors)) {
+ if (authors.length === 1) {
+ authorText = authors[0];
+ } else if (authors.length === 2) {
+ authorText = authors.join(", ");
+ } else {
+ authorText = `${authors.slice(0, 2).join("; ")} et al.`;
+ }
+ } else {
+ authorText = authors;
+ }
+
+ let doiUrl = "";
+ if (doi) {
+ if (/^[0-9]/.test(doi)) {
+ doiUrl = `https://doi.org/${doi}`;
+ } else if (/^doi\./.test(doi)) {
+ doiUrl = `https://${doi}`;
+ } else if (/^doi:/.test(doi)) {
+ doiUrl = doi.replace(/^doi:/, "https://doi.org/");
+ } else {
+ doiUrl = doi;
+ }
+ }
+
+ return (
+ <>
+ {authorText}
+ {doiUrl && (
+
+ (e.currentTarget.style.textDecoration = "underline")
+ }
+ onMouseLeave={(e) => (e.currentTarget.style.textDecoration = "none")}
+ >
+ {doiUrl}
+
+ )}
+
+ );
+};
+
+const DatasetDetailPage: React.FC = () => {
+ const { dbName, docId } = useParams<{ dbName: string; docId: string }>();
+ const navigate = useNavigate();
+ const dispatch = useAppDispatch();
+ const {
+ selectedDocument: datasetDocument,
+ loading,
+ error,
+ } = useAppSelector(NeurojsonSelector);
+
+ const [externalLinks, setExternalLinks] = useState')) {
+ // Inject as HTML so it renders code block correctly
+ el.innerHTML = el.textContent ?? "";
+ }
+ });
+ }, [transformedDataset]);
+
+ const handleDownloadDataset = () => {
+ if (!datasetDocument) return;
+ const jsonData = JSON.stringify(datasetDocument);
+ const blob = new Blob([jsonData], { type: "application/json" });
+ const link = document.createElement("a");
+ link.href = URL.createObjectURL(blob);
+ link.download = `${docId}.json`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
+ const handleDownloadScript = () => {
+ const blob = new Blob([downloadScript], { type: "text/plain" });
+ const link = document.createElement("a");
+ link.href = URL.createObjectURL(blob);
+ link.download = `${docId}.sh`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
+ const handlePreview = (
+ dataOrUrl: string | any,
+ idx: number,
+ isInternal: boolean = false
+ ) => {
+ console.log(
+ "🟢 Preview button clicked for:",
+ dataOrUrl,
+ "Index:",
+ idx,
+ "Is Internal:",
+ isInternal
+ );
+ // fix spinner
+ setIsPreviewLoading(true); // Show the spinner overlay
+ setPreviewIndex(idx);
+ setPreviewDataKey(dataOrUrl);
+ setPreviewIsInternal(isInternal);
+
+ // setPreviewOpen(false); // IMPORTANT: Keep modal closed for now
+
+ // This callback will be triggered by the legacy script when data is ready
+ // (window as any).__onPreviewReady = (decodedData: any) => {
+ // console.log("✅ Data is ready! Opening modal.");
+ // setReadyPreviewData(decodedData); // Store the final data for the modal
+ // setIsPreviewLoading(false); // Hide the spinner
+ // setPreviewOpen(true); // NOW it's time to open the modal
+ // };
+
+ const is2DPreviewCandidate = (obj: any): boolean => {
+ if (!obj || typeof obj !== "object") return false;
+ if (!obj._ArrayType_ || !obj._ArraySize_ || !obj._ArrayZipData_)
+ return false;
+ const dim = obj._ArraySize_;
+ return (
+ Array.isArray(dim) &&
+ (dim.length === 1 || dim.length === 2) &&
+ dim.every((v) => typeof v === "number" && v > 0)
+ );
+ };
+ // for add spinner ---- start
+ // When legacy preview is actually ready, turn off spinner & open modal
+ window.__onPreviewReady = () => {
+ setIsPreviewLoading(false);
+ // Only open modal for 3D data
+ if (!is2DPreviewCandidate(dataOrUrl)) {
+ setPreviewOpen(true);
+ }
+ delete window.__onPreviewReady;
+ };
+ // -----end
+
+ const extractFileName = (url: string): string => {
+ const match = url.match(/file=([^&]+)/);
+ // return match ? decodeURIComponent(match[1]) : url;
+ if (match) {
+ // Strip any trailing query parameters
+ const raw = decodeURIComponent(match[1]);
+ return raw.split("?")[0].split("&")[0];
+ }
+ // fallback: try to get last path part if no 'file=' param
+ try {
+ const u = new URL(url);
+ const parts = u.pathname.split("/");
+ return parts[parts.length - 1];
+ } catch {
+ return url;
+ }
+ };
+
+ const fileName =
+ typeof dataOrUrl === "string" ? extractFileName(dataOrUrl) : "";
+ console.log("🔍 Extracted fileName:", fileName);
+
+ const isPreviewableFile = (fileName: string): boolean => {
+ return /\.(nii\.gz|jdt|jdb|bmsh|jmsh|bnii)$/i.test(fileName);
+ };
+ console.log("🧪 isPreviewableFile:", isPreviewableFile(fileName));
+
+ // test for add spinner
+ // if (isInternal) {
+ // if (is2DPreviewCandidate(dataOrUrl)) {
+ // // inline 2D
+ // window.dopreview(dataOrUrl, idx, true);
+ // } else {
+ // // 3D
+ // window.previewdata(dataOrUrl, idx, true, []);
+ // }
+ // } else {
+ // // external
+ // window.previewdataurl(dataOrUrl, idx);
+ // }
+
+ // for test so command out the below
+ // setPreviewIndex(idx);
+ // setPreviewDataKey(dataOrUrl);
+ // setPreviewIsInternal(isInternal);
+ // setPreviewOpen(true);
+
+ if (isInternal) {
+ try {
+ if (!(window as any).intdata) {
+ (window as any).intdata = [];
+ }
+ if (!(window as any).intdata[idx]) {
+ (window as any).intdata[idx] = ["", "", null, `Internal ${idx}`];
+ }
+ (window as any).intdata[idx][2] = JSON.parse(JSON.stringify(dataOrUrl));
+
+ const is2D = is2DPreviewCandidate(dataOrUrl);
+
+ if (is2D) {
+ console.log("📊 2D data → rendering inline with dopreview()");
+ (window as any).dopreview(dataOrUrl, idx, true);
+ const panel = document.getElementById("chartpanel");
+ if (panel) panel.style.display = "block"; // 🔓 Show it!
+ setPreviewOpen(false); // ⛔ Don't open modal
+ // setPreviewLoading(false); // stop spinner
+ } else {
+ console.log("🎬 3D data → rendering in modal");
+ (window as any).previewdata(dataOrUrl, idx, true, []);
+ // add spinner
+ // setPreviewDataKey(dataOrUrl);
+ // setPreviewOpen(true);
+ // setPreviewIsInternal(true);
+ }
+ } catch (err) {
+ console.error("❌ Error in internal preview:", err);
+ // setPreviewLoading(false); // add spinner
+ }
+ } else {
+ // external
+ // if (/\.(nii\.gz|jdt|jdb|bmsh|jmsh|bnii)$/i.test(dataOrUrl)) {
+ const fileName =
+ typeof dataOrUrl === "string" ? extractFileName(dataOrUrl) : "";
+ if (isPreviewableFile(fileName)) {
+ (window as any).previewdataurl(dataOrUrl, idx);
+ const panel = document.getElementById("chartpanel");
+ if (panel) panel.style.display = "none"; // 🔒 Hide chart panel on 3D external
+ //add spinner
+ // setPreviewDataKey(dataOrUrl);
+ // setPreviewOpen(true);
+ // setPreviewIsInternal(false);
+ } else {
+ console.warn("⚠️ Unsupported file format for preview:", dataOrUrl);
+ // setPreviewLoading(false); // add spinner
+ }
+ }
+ };
+
+ // const handleClosePreview = () => {
+ // console.log("🛑 Closing preview modal.");
+ // setPreviewOpen(false);
+ // setPreviewDataKey(null);
+
+ // // Stop any Three.js rendering when modal closes
+ // if (typeof (window as any).update === "function") {
+ // cancelAnimationFrame((window as any).reqid);
+ // }
+
+ // const panel = document.getElementById("chartpanel");
+ // if (panel) panel.style.display = "none"; // 🔒 Hide 2D chart if modal closes
+ // };
+ const handleClosePreview = () => {
+ console.log("🛑 Closing preview modal.");
+ setPreviewOpen(false);
+ setPreviewDataKey(null);
+
+ // Cancel animation frame loop
+ if (typeof window.reqid !== "undefined") {
+ cancelAnimationFrame(window.reqid);
+ window.reqid = undefined;
+ }
+
+ // Stop 2D chart if any
+ const panel = document.getElementById("chartpanel");
+ if (panel) panel.style.display = "none";
+
+ // Remove canvas children
+ // const canvasDiv = document.getElementById("canvas");
+ // if (canvasDiv) {
+ // while (canvasDiv.firstChild) {
+ // canvasDiv.removeChild(canvasDiv.firstChild);
+ // }
+ // }
+
+ // Reset Three.js global refs
+ window.scene = undefined;
+ window.camera = undefined;
+ window.renderer = undefined;
+ };
+
+ const handleSearch = (e: React.ChangeEvent) => {
+ setSearchTerm(e.target.value);
+ setHighlightedIndex(-1);
+ highlightMatches(e.target.value);
+ };
+
+ const highlightMatches = (keyword: string) => {
+ const spans = document.querySelectorAll(
+ ".react-json-view span.string-value, .react-json-view span.object-key"
+ );
+
+ // Clean up all existing highlights
+ spans.forEach((el) => {
+ const element = el as HTMLElement;
+ if (originalTextMap.has(element)) {
+ element.innerHTML = originalTextMap.get(element)!; // Restore original HTML
+ element.classList.remove("highlighted");
+ }
+ });
+
+ // Clear old state
+ setMatches([]);
+ setHighlightedIndex(-1);
+ setExpandedPaths([]);
+ setOriginalTextMap(new Map());
+
+ if (!keyword.trim() || keyword.length < 3) return;
+
+ const regex = new RegExp(`(${keyword})`, "gi");
+ const matchedElements: HTMLElement[] = [];
+ const matchedPaths: Set = new Set();
+ const newOriginalMap = new Map();
+
+ spans.forEach((el) => {
+ const element = el as HTMLElement;
+ const original = element.innerHTML;
+ const text = element.textContent || "";
+
+ if (text.toLowerCase().includes(keyword.toLowerCase())) {
+ newOriginalMap.set(element, original); // Store original HTML
+ const highlighted = text.replace(
+ regex,
+ `$1`
+ );
+ element.innerHTML = highlighted;
+ matchedElements.push(element);
+
+ const parent = element.closest(".variable-row");
+ const path = parent?.getAttribute("data-path");
+ if (path) matchedPaths.add(path);
+ }
+ });
+
+ // Update state
+ setOriginalTextMap(newOriginalMap);
+ setMatches(matchedElements);
+ setExpandedPaths(Array.from(matchedPaths));
+ };
+
+ const findNext = () => {
+ if (matches.length === 0) return;
+
+ setHighlightedIndex((prevIndex) => {
+ const nextIndex = (prevIndex + 1) % matches.length;
+
+ matches.forEach((match) => {
+ match
+ .querySelector("mark")
+ ?.setAttribute("style", "background: yellow; color: black;");
+ });
+
+ const current = matches[nextIndex];
+ current.scrollIntoView({ behavior: "smooth", block: "center" });
+
+ current
+ .querySelector("mark")
+ ?.setAttribute("style", "background: orange; color: black;");
+
+ return nextIndex;
+ });
+ };
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ {error}
+
+
+ );
+ }
+ console.log("datasetDocument", datasetDocument);
+ const onekey = datasetDocument
+ ? datasetDocument.hasOwnProperty("README")
+ ? "README"
+ : datasetDocument.hasOwnProperty("dataset_description.json")
+ ? "dataset_description.json"
+ : "_id"
+ : "_id";
+
+ return (
+ <>
+ {/* 🔧 Inline CSS for string formatting */}
+
+
+
+
+
+ {/* ✅ Dataset Title (From dataset_description.json) */}
+
+ {datasetDocument?.["dataset_description.json"]?.Name ??
+ `Dataset: ${docId}`}
+
+
+ {/* ✅ Dataset Author (If Exists) */}
+ {datasetDocument?.["dataset_description.json"]?.Authors && (
+
+ {Array.isArray(
+ datasetDocument["dataset_description.json"].Authors
+ )
+ ? datasetDocument["dataset_description.json"].Authors.join(", ")
+ : datasetDocument["dataset_description.json"].Authors}
+
+ )}
+
+ {/* ✅ Breadcrumb Navigation (🏠 Home → Database → Dataset) */}
+
+ {/* 🏠 Home Icon Button */}
+
+
+
+ »
+
+
+ {/* Database Name (Clickable) */}
+
+
+
+ »
+
+
+ {/* Dataset Name (_id field) */}
+
+ {docId}
+
+
+
+
+ }
+ onClick={handleDownloadDataset}
+ sx={{
+ backgroundColor: Colors.purple,
+ color: Colors.lightGray,
+ "&:hover": { backgroundColor: Colors.secondaryPurple },
+ }}
+ >
+ {/* Download Dataset (1 Mb) */}
+ {/* Download Dataset ({(jsonSize / 1024).toFixed(0)} MB) */}
+ Download Matadata ({formatSize(jsonSize)})
+
+
+ }
+ onClick={handleDownloadScript}
+ sx={{
+ backgroundColor: Colors.purple,
+ color: Colors.lightGray,
+ "&:hover": { backgroundColor: Colors.secondaryPurple },
+ }}
+ >
+ {/* Script to Download All Files ({downloadScript.length} Bytes) */}
+ Script to Download All Files ({formatSize(downloadScriptSize)})
+ {/* (links: {externalLinks.length}) */}
+ {externalLinks.length > 0 &&
+ ` (links: ${externalLinks.length}, total: ${formatSize(
+ totalFileSize
+ )})`}
+
+
+
+
+
+
+
+
+
+ {/* ✅ JSON Viewer (left panel) */}
+
+ = 3 ? false : 1} // 🔍 Expand during search
+ style={{ fontSize: "14px", fontFamily: "monospace" }}
+ />
+
+
+ {/* ✅ Data panels (right panel) */}
+
+
+ {/* ✅ Collapsible header */}
+ setIsInternalExpanded(!isInternalExpanded)}
+ >
+
+ Internal Data ({internalLinks.length} objects)
+
+ {isInternalExpanded ?
+
+
+ {/* ✅ Scrollable area */}
+
+ {internalLinks.length > 0 ? (
+ internalLinks.map((link, index) => (
+
+
+ {link.name}{" "}
+ {link.arraySize
+ ? `[${link.arraySize.join("x")}]`
+ : ""}
+
+
+
+ ))
+ ) : (
+
+ No internal data found.
+
+ )}
+
+
+
+
+ {/* ✅ Header with toggle */}
+ setIsExternalExpanded(!isExternalExpanded)}
+ >
+
+ External Data ({externalLinks.length} links)
+
+ {isExternalExpanded ?
+
+
+ {/* Scrollable card container */}
+
+ {externalLinks.length > 0 ? (
+ externalLinks.map((link, index) => {
+ const match = link.url.match(/file=([^&]+)/);
+ const fileName = match ? match[1] : "";
+ const isPreviewable =
+ /\.(nii(\.gz)?|bnii|jdt|jdb|jmsh|bmsh)$/i.test(
+ fileName
+ );
+
+ return (
+
+
+ {link.name}
+
+
+
+ {isPreviewable && (
+
+ )}
+
+
+ );
+ })
+ ) : (
+
+ No external links found.
+
+ )}
+
+
+
+
+
+ {/* ✅ ADD FLASHCARDS COMPONENT HERE ✅ */}
+
+ {/* */}
+
+
+
+ {/* Preview Modal Component - Add Here */}
+
+
+ );
+};
+
+export default DatasetDetailPage;
diff --git a/src/pages/DatasetPage.tsx b/src/pages/DatasetPage.tsx
new file mode 100644
index 0000000..978eb6d
--- /dev/null
+++ b/src/pages/DatasetPage.tsx
@@ -0,0 +1,476 @@
+import {
+ fetchDbInfo,
+ loadPaginatedData,
+} from "../redux/neurojson/neurojson.action";
+import { Row } from "../redux/neurojson/types/neurojson.interface";
+import {
+ Box,
+ Typography,
+ CircularProgress,
+ Alert,
+ Card,
+ CardContent,
+ Grid,
+ Link,
+ Chip,
+ Stack,
+ Button,
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+} from "@mui/material";
+import { Colors } from "design/theme";
+import { useAppDispatch } from "hooks/useAppDispatch";
+import { useAppSelector } from "hooks/useAppSelector";
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import RoutesEnum from "types/routes.enum";
+
+const DatasetPage: React.FC = () => {
+ const navigate = useNavigate();
+ const { dbName } = useParams<{ dbName: string }>();
+ const dispatch = useAppDispatch();
+ const { loading, error, data, limit, hasMore } = useAppSelector(
+ (state: { neurojson: any }) => state.neurojson
+ );
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+ const totalPages = Math.ceil(limit / pageSize);
+ const [searchQuery, setSearchQuery] = useState("");
+
+ useEffect(() => {
+ if (dbName) {
+ dispatch(fetchDbInfo(dbName.toLowerCase()));
+ dispatch(
+ loadPaginatedData({
+ dbName: dbName.toLowerCase(),
+ offset: (currentPage - 1) * pageSize,
+ limit: pageSize,
+ })
+ );
+ }
+ }, [dbName, dispatch, currentPage, pageSize]);
+
+ const handlePageChange = (page: number) => {
+ if (!dbName || loading) return;
+
+ setCurrentPage(page);
+ dispatch(
+ loadPaginatedData({
+ dbName: dbName.toLowerCase(),
+ offset: (page - 1) * pageSize,
+ limit: pageSize,
+ })
+ );
+ };
+
+ const handlePageSizeChange = (event: any) => {
+ setPageSize(event.target.value);
+ setCurrentPage(1); // Reset offset when changing page size
+ };
+
+ const getVisiblePageNumbers = () => {
+ const visiblePages: (number | string)[] = [];
+ const maxVisible = 6;
+
+ if (totalPages <= maxVisible + 2) {
+ for (let i = 1; i <= totalPages; i++) visiblePages.push(i);
+ } else {
+ const start = Math.max(2, currentPage - 2);
+ const end = Math.min(totalPages - 1, currentPage + 2);
+
+ visiblePages.push(1);
+ if (start > 2) visiblePages.push("...");
+
+ for (let i = start; i <= end; i++) visiblePages.push(i);
+ if (end < totalPages - 1) visiblePages.push("...");
+
+ visiblePages.push(totalPages);
+ }
+
+ return visiblePages;
+ };
+
+ const handlePrevNextPage = (direction: "prev" | "next") => {
+ if (direction === "prev" && currentPage > 1) {
+ handlePageChange(currentPage - 1);
+ } else if (direction === "next" && currentPage < totalPages) {
+ handlePageChange(currentPage + 1);
+ }
+ };
+
+ const filteredData = data.filter((doc: Row) =>
+ (doc.value.name || "").toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ return (
+
+
+ {/* Left: Title */}
+
+ Database: {dbName || "N/A"}
+
+
+ {/* Right: Total + Dropdown + Pagination */}
+
+ {/* Left: Total datasets */}
+
+ Total datasets: {limit}
+
+
+ {/* Search in page input */}
+
+
+ Search in page:
+
+ setSearchQuery(e.target.value)}
+ style={{
+ padding: "6px 10px",
+ borderRadius: "4px",
+ border: `2px solid ${Colors.primary.main}`,
+ fontSize: "0.95rem",
+ minWidth: "200px",
+ }}
+ />
+
+
+ {/* Right: Label + Select in one line */}
+
+ Dataset per page:
+
+ {/* Dataset per page dropdown */}
+
+
+
+
+ {/* Pagination buttons */}
+ {!loading && (
+
+
+
+ {getVisiblePageNumbers().map((item, idx) =>
+ item === "..." ? (
+
+ ...
+
+ ) : (
+
+ )
+ )}
+
+
+
+ )}
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {loading && (
+
+ {filteredData.map((doc: any, index: number) => {
+ const datasetIndex = (currentPage - 1) * pageSize + index + 1;
+ return (
+
+
+ {/* Dataset index number on top-right corner */}
+
+ {datasetIndex}
+
+
+
+
+
+ ID: {doc.id}
+
+
+
+
+ {doc.value.subj && (
+
+
+
+ Summary:{" "}
+ {doc.value.readme || "No description available"}
+
+
+
+ Authors:{" "}
+ {Array.isArray(doc.value.info?.Authors)
+ ? doc.value.info.Authors.join(", ")
+ : doc.value.info?.Authors || "Unknown"}
+
+
+
+
+ Size:{" "}
+ {doc.value.length
+ ? `${(doc.value.length / 1024 / 1024).toFixed(
+ 2
+ )} MB`
+ : "Unknown"}
+
+
+ {doc.value.info?.DatasetDOI && (
+
+
+
+
+
+
+ );
+ })}
+
+ )}
+
+ {!loading && !error && data.length === 0 && (
+
+ No database information available.
+
+ )}
+
+ );
+};
+
+export default DatasetPage;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 6e0982c..ff922d8 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,21 +1,121 @@
-import { Container } from "@mui/material";
+import { Box, Container } from "@mui/material";
+import Section1 from "components/HomePageComponents/Section1";
+import Section2 from "components/HomePageComponents/Section2";
+import Section3 from "components/HomePageComponents/Section3";
+import Section4 from "components/HomePageComponents/Section4";
+import NodeInfoPanel from "components/NodeInfoPanel";
import { useAppDispatch } from "hooks/useAppDispatch";
import { useAppSelector } from "hooks/useAppSelector";
-import NeuroJsonGraph from "modules/universe/NeuroJsonGraph";
-import React, { useEffect } from "react";
+import { NodeObject } from "modules/universe/NeuroJsonGraph";
+import React, {
+ useEffect,
+ useState,
+ useCallback,
+ useMemo,
+ useRef,
+} from "react";
import { fetchRegistry } from "redux/neurojson/neurojson.action";
import { NeurojsonSelector } from "redux/neurojson/neurojson.selector";
const Home: React.FC = () => {
- const dispatch = useAppDispatch();
- const { registry } = useAppSelector(NeurojsonSelector);
-
- useEffect(() => {
- dispatch(fetchRegistry());
- }, [dispatch]);
- return (
- {registry &&
- );
+ const dispatch = useAppDispatch();
+ const section2Ref = useRef(null);
+ const section3Ref = useRef(null);
+ const section4Ref = useRef(null);
+ const { registry, loading } = useAppSelector(NeurojsonSelector);
+
+ // State for selected node and panel visibility
+ const [selectedNode, setSelectedNode] = useState(null);
+ const [panelOpen, setPanelOpen] = useState(false);
+ const [filterKeyword, setFilterKeyword] = useState(""); // State for filter input
+ const [selectedModalities, setSelectedModalities] = useState([]);
+
+ useEffect(() => {
+ dispatch(fetchRegistry());
+ }, [dispatch]);
+
+ // Handle node click: Set selected node and open panel
+ const handleNodeClick = useCallback((node: NodeObject) => {
+ setSelectedNode(node);
+ setPanelOpen(true);
+ }, []);
+
+ // filter logic
+ const filteredRegistry = useMemo(() => {
+ return registry
+ ? registry.filter((node) => {
+ const matchKeyword = node.name
+ .toLowerCase()
+ .includes(filterKeyword.toLowerCase());
+ const matchModalities =
+ selectedModalities.length === 0 ||
+ selectedModalities.some((modality) =>
+ Array.isArray(node.datatype)
+ ? node.datatype.includes(modality)
+ : node.datatype === modality
+ );
+ return matchKeyword && matchModalities;
+ })
+ : [];
+ }, [registry, filterKeyword, selectedModalities]);
+
+ return (
+
+ {/* section 1 */}
+
+
+ section2Ref.current?.scrollIntoView({ behavior: "smooth" })
+ }
+ />
+
+
+ {/* section 2 */}
+
+
+ section3Ref.current?.scrollIntoView({ behavior: "smooth" })
+ }
+ />
+
+
+ {/* section 3 */}
+
+
+ section4Ref.current?.scrollIntoView({ behavior: "smooth" })
+ }
+ />
+
+
+ {/* section 4*/}
+
+
+
+ setPanelOpen(false)}
+ nodeData={selectedNode}
+ />
+
+ );
};
export default Home;
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
new file mode 100644
index 0000000..005fb10
--- /dev/null
+++ b/src/pages/SearchPage.tsx
@@ -0,0 +1,634 @@
+import { generateSchemaWithDatabaseEnum } from "../utils/SearchPageFunctions/searchformSchema";
+import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
+import {
+ Typography,
+ Container,
+ Box,
+ Button,
+ CircularProgress,
+ Pagination,
+ Chip,
+ Drawer,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Form from "@rjsf/mui";
+import validator from "@rjsf/validator-ajv8";
+import DatasetCard from "components/SearchPage/DatasetCard";
+import SubjectCard from "components/SearchPage/SubjectCard";
+import { Colors } from "design/theme";
+import { useAppDispatch } from "hooks/useAppDispatch";
+import { useAppSelector } from "hooks/useAppSelector";
+import pako from "pako";
+import React from "react";
+import { useState, useEffect, useMemo } from "react";
+import {
+ fetchMetadataSearchResults,
+ fetchRegistry,
+} from "redux/neurojson/neurojson.action";
+import { RootState } from "redux/store";
+import { generateUiSchema } from "utils/SearchPageFunctions/generateUiSchema";
+import { modalityValueToEnumLabel } from "utils/SearchPageFunctions/modalityLabels";
+
+const SearchPage: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const [hasSearched, setHasSearched] = useState(false);
+ const searchResults = useAppSelector(
+ (state: RootState) => state.neurojson.searchResults
+ );
+ const registry = useAppSelector(
+ (state: RootState) => state.neurojson.registry
+ );
+ const loading = useAppSelector((state: RootState) => state.neurojson.loading);
+
+ const [formData, setFormData] = useState>({});
+ const [showSubjectFilters, setShowSubjectFilters] = useState(false);
+ const [results, setResults] = useState<
+ any[] | { status: string; msg: string }
+ >([]);
+ const [skip, setSkip] = useState(0);
+ const [page, setPage] = useState(1);
+ const [queryLink, setQueryLink] = useState("");
+ const [appliedFilters, setAppliedFilters] = useState>({});
+ const [showMobileFilters, setShowMobileFilters] = useState(false);
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+ // to show the applied chips on the top of results
+ const activeFilters = Object.entries(appliedFilters).filter(
+ ([key, value]) =>
+ key !== "skip" &&
+ key !== "limit" &&
+ value !== undefined &&
+ value !== null &&
+ value !== "" &&
+ value !== "any"
+ );
+
+ // parse query from url on page load
+ useEffect(() => {
+ const hash = window.location.hash;
+ if (hash.startsWith("#query=")) {
+ const encoded = hash.replace("#query=", "");
+ try {
+ const decoded = pako.inflate(
+ Uint8Array.from(atob(encoded), (c) => c.charCodeAt(0)),
+ { to: "string" }
+ );
+ const parsed = JSON.parse(decoded);
+ setFormData(parsed);
+ setAppliedFilters(parsed);
+ const requestData = { ...parsed, skip: 0, limit: 50 };
+ setSkip(0);
+ setHasSearched(true);
+ dispatch(fetchMetadataSearchResults(requestData)).then((res: any) => {
+ if (res.payload) {
+ setResults(res.payload);
+ }
+ });
+ } catch (e) {
+ console.error("Failed to parse query from URL", e);
+ }
+ }
+ }, [dispatch]);
+
+ // generate a direct link to the query
+ const updateQueryLink = (queryData: Record) => {
+ const deflated = pako.deflate(JSON.stringify(queryData));
+ const encoded = btoa(String.fromCharCode(...deflated));
+ const link = `${window.location.origin}${window.location.pathname}#query=${encoded}`;
+ setQueryLink(link);
+ };
+
+ // setting pagination
+ const itemsPerPage = 10;
+
+ const handlePageChange = (
+ event: React.ChangeEvent,
+ value: number
+ ) => {
+ setPage(value);
+ };
+
+ const paginatedResults = Array.isArray(results)
+ ? results.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+ : [];
+
+ // form UI
+ const uiSchema = useMemo(
+ () => generateUiSchema(formData, showSubjectFilters),
+ [formData, showSubjectFilters]
+ );
+
+ // Create the "Subject-level Filters" button as a custom field
+ const customFields = {
+ subjectFiltersToggle: () => (
+
+
+
+ ),
+ };
+
+ // determine the results are subject-level or dataset-level
+ let isDataset: boolean | null = null;
+
+ if (Array.isArray(searchResults) && searchResults.length > 0) {
+ try {
+ const parsed = JSON.parse(searchResults[0].json);
+ isDataset = parsed?.value?.subj && Array.isArray(parsed.value.subj);
+ } catch {
+ isDataset = null;
+ }
+ }
+
+ // get the database list from registry
+ useEffect(() => {
+ dispatch(fetchRegistry());
+ }, [dispatch]);
+
+ // dynamically add database enum to schema
+ const schema = useMemo(() => {
+ const dbList = registry?.length
+ ? [...registry.map((item: any) => item.id), "any"]
+ : ["any"];
+ return generateSchemaWithDatabaseEnum(dbList);
+ }, [registry]);
+
+ // submit function
+ const handleSubmit = ({ formData }: any) => {
+ const requestData = { ...formData, skip: 0 };
+ setFormData(requestData);
+ setSkip(0);
+ setAppliedFilters(requestData); // for chips on the top of results
+
+ dispatch(fetchMetadataSearchResults(requestData)).then((res: any) => {
+ setResults(res.payload);
+ });
+ setHasSearched(true);
+ setPage(1);
+ updateQueryLink(formData);
+ };
+
+ // reset function
+ const handleReset = () => {
+ setFormData({});
+ setResults([]);
+ setHasSearched(false);
+ setSkip(0);
+ dispatch(fetchMetadataSearchResults({}));
+ setPage(1);
+ setQueryLink("");
+ setAppliedFilters({});
+ };
+
+ // load more function
+ const handleLoadMore = () => {
+ const newSkip = skip + 50;
+ const requestData = { ...formData, skip: newSkip };
+ setSkip(newSkip);
+ dispatch(fetchMetadataSearchResults(requestData)).then((res: any) => {
+ if (Array.isArray(res.payload)) {
+ setResults((prev) =>
+ Array.isArray(prev) ? [...prev, ...res.payload] : res.payload
+ );
+ }
+ });
+ };
+
+ // handle chips click function
+ const handleChipClick = (key: string, value: string) => {
+ const updatedFormData: Record = {
+ ...formData,
+ [key]:
+ key === "modality" ? modalityValueToEnumLabel[value] || value : value,
+ skip: 0,
+ };
+ setFormData(updatedFormData);
+ setSkip(0);
+ setPage(1);
+ updateQueryLink(updatedFormData);
+ dispatch(fetchMetadataSearchResults(updatedFormData)).then((res: any) => {
+ setResults(res.payload);
+ });
+ setHasSearched(true);
+ setAppliedFilters(updatedFormData); // for chips on top of results
+ };
+
+ // form rendering
+ const renderFilterForm = () => (
+ <>
+ {queryLink && activeFilters.length > 0 && (
+
+
+
+ Direct Link to This Query
+
+
+
+ )}
+
+
+
+
+