{
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();
@@ -76,124 +129,135 @@ const DatasetDetailPage: React.FC = () => {
error,
} = useAppSelector(NeurojsonSelector);
- const [externalLinks, setExternalLinks] = useState
([]);
- const [internalLinks, setInternalLinks] = useState([]);
- const [isExpanded, setIsExpanded] = useState(false);
- const [isInternalExpanded, setIsInternalExpanded] = useState(true);
- const [searchTerm, setSearchTerm] = useState("");
- const [matches, setMatches] = useState([]);
- const [highlightedIndex, setHighlightedIndex] = useState(-1);
- const [downloadScript, setDownloadScript] = useState("");
- const [previewIsInternal, setPreviewIsInternal] = useState(false);
- const [isExternalExpanded, setIsExternalExpanded] = useState(true);
- const [expandedPaths, setExpandedPaths] = useState([]);
- const [originalTextMap, setOriginalTextMap] = useState<
- Map
- >(new Map());
- const [jsonViewerKey, setJsonViewerKey] = useState(0);
- const [jsonSize, setJsonSize] = useState(0);
- const [transformedDataset, setTransformedDataset] = useState(null);
-
- // Recursive function to find `_DataLink_`
- const extractDataLinks = (obj: any, path: string): ExternalDataLink[] => {
- const links: ExternalDataLink[] = [];
-
- const traverse = (node: any, currentPath: string) => {
- if (typeof node === "object" && node !== null) {
- for (const key in node) {
- if (key === "_DataLink_" && typeof node[key] === "string") {
- let correctedUrl = node[key].replace(/:\$.*$/, "");
-
- const sizeMatch = node[key].match(/size=(\d+)/);
- const size = sizeMatch
- ? `${(parseInt(sizeMatch[1], 10) / 1024 / 1024).toFixed(2)} MB`
- : "Unknown Size";
-
- const subMatch = currentPath.match(/sub-\d+/);
- const subPath = subMatch ? subMatch[0] : "Unknown Sub";
-
- links.push({
- name: `${
- currentPath.split("/").pop() || "ExternalData"
- } (${size}) [/${subPath}]`,
- size,
- path: currentPath, // keep full JSON path for file placement
- url: correctedUrl,
- index: links.length,
- });
- } else if (typeof node[key] === "object") {
- traverse(node[key], `${currentPath}/${key}`);
- }
- }
- }
- };
-
- traverse(obj, path);
- return links;
- };
-
- const extractInternalData = (obj: any, path = ""): InternalDataLink[] => {
- const internalLinks: InternalDataLink[] = [];
-
- if (obj && typeof obj === "object") {
- if (
- obj.hasOwnProperty("MeshNode") &&
- (obj.hasOwnProperty("MeshSurf") || obj.hasOwnProperty("MeshElem"))
- ) {
- if (
- obj.MeshNode.hasOwnProperty("_ArrayZipData_") &&
- typeof obj.MeshNode["_ArrayZipData_"] === "string"
- ) {
- internalLinks.push({
- name: `JMesh`,
- data: obj,
- index: internalLinks.length,
- arraySize: obj.MeshNode._ArraySize_,
- });
- }
- } else if (obj.hasOwnProperty("NIFTIData")) {
- if (
- obj.NIFTIData.hasOwnProperty("_ArrayZipData_") &&
- typeof obj.NIFTIData["_ArrayZipData_"] === "string"
- ) {
- internalLinks.push({
- name: `JNIfTI`,
- data: obj,
- index: internalLinks.length,
- arraySize: obj.NIFTIData._ArraySize_,
- });
- }
- } else if (
- obj.hasOwnProperty("_ArraySize_") &&
- !path.match("_EnumValue_$")
- ) {
- if (
- obj.hasOwnProperty("_ArrayZipData_") &&
- typeof obj["_ArrayZipData_"] === "string"
- ) {
- internalLinks.push({
- name: `JData`,
- data: obj,
- index: internalLinks.length,
- arraySize: obj._ArraySize_,
- });
- }
- } else {
- Object.keys(obj).forEach((key) => {
- if (typeof obj[key] === "object") {
- internalLinks.push(
- ...extractInternalData(
- obj[key],
- `${path}.${key.replace(/\./g, "\\.")}`
- )
- );
- }
- });
- }
- }
+ const [externalLinks, setExternalLinks] = useState([]);
+ const [internalLinks, setInternalLinks] = useState([]);
+ const [isExpanded, setIsExpanded] = useState(false);
+ const [isInternalExpanded, setIsInternalExpanded] = useState(true);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [matches, setMatches] = useState([]);
+ const [highlightedIndex, setHighlightedIndex] = useState(-1);
+ const [downloadScript, setDownloadScript] = useState("");
+ const [previewIsInternal, setPreviewIsInternal] = useState(false);
+ const [isExternalExpanded, setIsExternalExpanded] = useState(true);
+ const [expandedPaths, setExpandedPaths] = useState([]);
+ const [originalTextMap, setOriginalTextMap] = useState>(new Map());
+ const [jsonViewerKey, setJsonViewerKey] = useState(0);
+ const [jsonSize, setJsonSize] = useState(0);
+ const [transformedDataset, setTransformedDataset] = useState(null);
+ const [totalFileSize, setTotalFileSize] = useState(0);
+ const [scriptBlobSize, setScriptBlobSize] = useState(0);
+
+// Recursive function to find `_DataLink_`
+ const extractDataLinks = (obj: any, path: string): ExternalDataLink[] => {
+ const links: ExternalDataLink[] = [];
+
+ const traverse = (node: any, currentPath: string, parentKey: string = "") => {
+ if (typeof node === "object" && node !== null) {
+ for (const key in node) {
+ if (key === "_DataLink_" && typeof node[key] === "string") {
+ let correctedUrl = node[key].replace(/:\$.*$/, "");
+ const sizeMatch = node[key].match(/size=(\d+)/);
+ const size = sizeMatch
+ ? `${(parseInt(sizeMatch[1], 10) / 1024 / 1024).toFixed(2)} MB`
+ : "Unknown Size";
+
+ const parts = currentPath.split("/");
+ const subpath = parts.slice(-3).join("/");
+ const label = parentKey || "ExternalData";
+
+ links.push({
+ name: `${label} (${size}) [/${subpath}]`,
+ size,
+ path: currentPath, // keep full JSON path for file placement
+ url: correctedUrl,
+ index: links.length,
+ });
+ } else if (typeof node[key] === "object") {
+ const isMetaKey = key.startsWith("_");
+ const newLabel = !isMetaKey ? key : parentKey;
+ traverse(node[key], `${currentPath}/${key}`, newLabel);
+ }
+ }
+ }
+ };
+
+ traverse(obj, path);
+ // return links;
+ const seenUrls = new Set();
+ const uniqueLinks = links.filter((link) => {
+ if (seenUrls.has(link.url)) return false;
+ seenUrls.add(link.url);
+ return true;
+ });
+
+ return uniqueLinks;
+ };
+
+ const extractInternalData = (obj: any, path = ""): InternalDataLink[] => {
+ const internalLinks: InternalDataLink[] = [];
+
+ if (obj && typeof obj === "object") {
+ if (
+ obj.hasOwnProperty("MeshNode") &&
+ (obj.hasOwnProperty("MeshSurf") || obj.hasOwnProperty("MeshElem"))
+ ) {
+ if (
+ obj.MeshNode.hasOwnProperty("_ArrayZipData_") &&
+ typeof obj.MeshNode["_ArrayZipData_"] === "string"
+ ) {
+ internalLinks.push({
+ name: `JMesh`,
+ data: obj,
+ index: internalLinks.length,
+ arraySize: obj.MeshNode._ArraySize_,
+ });
+ }
+ } else if (obj.hasOwnProperty("NIFTIData")) {
+ if (
+ obj.NIFTIData.hasOwnProperty("_ArrayZipData_") &&
+ typeof obj.NIFTIData["_ArrayZipData_"] === "string"
+ ) {
+ internalLinks.push({
+ name: `JNIfTI`,
+ data: obj,
+ index: internalLinks.length,
+ arraySize: obj.NIFTIData._ArraySize_,
+ });
+ }
+ } else if (obj.hasOwnProperty("_ArraySize_") && !path.match("_EnumValue_$")) {
+ if (
+ obj.hasOwnProperty("_ArrayZipData_") &&
+ typeof obj["_ArrayZipData_"] === "string"
+ ) {
+ internalLinks.push({
+ name: `JData`,
+ data: obj,
+ index: internalLinks.length,
+ arraySize: obj._ArraySize_,
+ });
+ }
+ } else {
+ Object.keys(obj).forEach((key) => {
+ if (typeof obj[key] === "object") {
+ internalLinks.push(...extractInternalData(obj[key], `${path}.${key.replace(/\./g, "\\.")}`));
+ }
+ });
+ }
+ }
+
+ return internalLinks;
+ };
+
+ const formatFileSize = (bytes: number): string => {
+ if (bytes >= 1024 * 1024 * 1024) {
+ return `${Math.floor(bytes / (1024 * 1024 * 1024))} GB`;
+ } else if (bytes >= 1024 * 1024) {
+ return `${Math.floor(bytes / (1024 * 1024))} MB`;
+ } else {
+ return `${Math.floor(bytes / 1024)} KB`;
+ }
+ };
- return internalLinks;
- };
useEffect(() => {
const fetchData = async () => {
@@ -231,10 +295,28 @@ const DatasetDetailPage: React.FC = () => {
const transformed = transformJsonForDisplay(datasetDocument);
setTransformedDataset(transformed);
- const blob = new Blob([JSON.stringify(datasetDocument, null, 2)], {
- type: "application/json",
- });
- setJsonSize(blob.size);
+ let totalSize = 0;
+
+ // 1๏ธโฃ Sum external link sizes (from URL like ...?size=12345678)
+ links.forEach((link) => {
+ const sizeMatch = link.url.match(/size=(\d+)/);
+ if (sizeMatch) {
+ totalSize += parseInt(sizeMatch[1], 10);
+ }
+ });
+
+ // 2๏ธโฃ Estimate internal size from _ArraySize_ (assume Float32 = 4 bytes)
+ internalData.forEach((link) => {
+ if (link.arraySize && Array.isArray(link.arraySize)) {
+ const count = link.arraySize.reduce((acc, val) => acc * val, 1);
+ totalSize += count * 4;
+ }
+ });
+
+ setTotalFileSize(totalSize);
+
+ const minifiedBlob = new Blob([JSON.stringify(datasetDocument)], { type: "application/json" });
+ setJsonSize(minifiedBlob.size);
// // โ
Construct download script dynamically
let script = `curl -L --create-dirs "https://neurojson.io:7777/${dbName}/${docId}" -o "${docId}.json"\n`;
@@ -263,47 +345,47 @@ const DatasetDetailPage: React.FC = () => {
}
}, [datasetDocument]);
- const [previewOpen, setPreviewOpen] = useState(false);
- const [previewDataKey, setPreviewDataKey] = useState(null);
-
- useEffect(() => {
- highlightMatches(searchTerm);
-
- // Cleanup to reset highlights when component re-renders or unmounts
- return () => {
- document.querySelectorAll(".highlighted").forEach((el) => {
- const element = el as HTMLElement;
- const text = element.textContent || "";
- element.innerHTML = text;
- element.classList.remove("highlighted");
- });
- };
- }, [searchTerm, datasetDocument]);
-
- useEffect(() => {
- if (!transformedDataset) return;
-
- const spans = document.querySelectorAll(".string-value");
-
- spans.forEach((el) => {
- if (el.textContent?.includes('')) {
- // Inject as HTML so it renders code block correctly
- el.innerHTML = el.textContent ?? "";
- }
- });
- }, [transformedDataset]);
-
- const handleDownloadDataset = () => {
- if (!datasetDocument) return;
- const jsonData = JSON.stringify(datasetDocument, null, 2);
- 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 [previewOpen, setPreviewOpen] = useState(false);
+ const [previewDataKey, setPreviewDataKey] = useState(null);
+
+ useEffect(() => {
+ highlightMatches(searchTerm);
+
+ // Cleanup to reset highlights when component re-renders or unmounts
+ return () => {
+ document.querySelectorAll(".highlighted").forEach((el) => {
+ const element = el as HTMLElement;
+ const text = element.textContent || "";
+ element.innerHTML = text;
+ element.classList.remove("highlighted");
+ });
+ };
+ }, [searchTerm, datasetDocument]);
+
+ useEffect(() => {
+ if (!transformedDataset) return;
+
+ const spans = document.querySelectorAll(".string-value");
+
+ spans.forEach((el) => {
+ if (el.textContent?.includes("")) {
+ // 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" });
@@ -315,166 +397,182 @@ const DatasetDetailPage: React.FC = () => {
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
- );
- console.log("๐ข Preview button clicked:", {
- dataOrUrl,
- idx,
- isInternal,
- urlMatch: /\.(nii\.gz|jdt|jdb|bmsh|jmsh|bnii)$/i.test(dataOrUrl),
- });
-
- if (isInternal) {
- try {
- // ๐ Step 1: Ensure global intdata exists
- if (!(window as any).intdata) {
- (window as any).intdata = [];
- }
-
- // ๐ Step 2: Ensure intdata[idx] is at least a 4-element array
- if (!(window as any).intdata[idx]) {
- (window as any).intdata[idx] = ["", "", null, `Internal ${idx}`];
- }
-
- // ๐ Step 3: Replace the [2] slot with your actual data
- (window as any).intdata[idx][2] = JSON.parse(JSON.stringify(dataOrUrl));
-
- // โ
Call previewdata
- console.log(
- "๐งช Calling previewdata with intdata[idx]:",
- (window as any).intdata[idx]
- );
- (window as any).previewdata(
- (window as any).intdata[idx][2],
- idx,
- true,
- []
- );
- } catch (err) {
- console.error("โ Error in internal preview:", err);
- }
- } else {
- // โ
External Data Preview
- if (/\.(nii\.gz|jdt|jdb|bmsh|jmsh|bnii)$/i.test(dataOrUrl)) {
- if (typeof (window as any).previewdataurl === "function") {
- console.log("โ
Calling previewdataurl() for:", dataOrUrl);
- (window as any).previewdataurl(dataOrUrl, idx);
- } else {
- console.error("โ previewdataurl() is not defined!");
- }
- } else {
- console.warn("โ ๏ธ Unsupported file format for preview:", dataOrUrl);
- }
- }
-
- setPreviewDataKey(dataOrUrl); // โ
Store the preview key
- setPreviewOpen(true); // โ
Open the preview modal
- setPreviewIsInternal(isInternal); // โ
Save it
- };
-
- 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 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;
- });
- };
+ const handlePreview = (dataOrUrl: string | any, idx: number, isInternal: boolean = false) => {
+ console.log("๐ข Preview button clicked for:", dataOrUrl, "Index:", idx, "Is Internal:", isInternal);
+
+ 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)
+ );
+ };
+
+ 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));
+
+ 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
+ } else {
+ console.log("๐ฌ 3D data โ rendering in modal");
+ (window as any).previewdata(dataOrUrl, idx, true, []);
+ setPreviewDataKey(dataOrUrl);
+ setPreviewOpen(true);
+ setPreviewIsInternal(true);
+ }
+ } catch (err) {
+ console.error("โ Error in internal preview:", err);
+ }
+ } 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
+ setPreviewDataKey(dataOrUrl);
+ setPreviewOpen(true);
+ setPreviewIsInternal(false);
+ } else {
+ console.warn("โ ๏ธ Unsupported file format for preview:", dataOrUrl);
+ }
+ }
+ };
+
+ 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 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 (
@@ -705,7 +803,8 @@ const DatasetDetailPage: React.FC = () => {
-
+
+
0) {
+ const obj = window.scene.children[0];
+ window.scene.remove(obj);
+ if (obj.geometry) obj.geometry.dispose();
+ if (obj.material) obj.material.dispose();
+ }
+ }
+
+ if (window.renderer && window.renderer.domElement) {
+ window.renderer.domElement.remove();
+ window.renderer.dispose();
+ }
+
+ window.scene = undefined;
+ window.camera = undefined;
+ window.renderer = undefined;
+ window.controls = undefined;
+ window.reqid = undefined;
+}
+
function drawpreview(cfg){
console.log("๐ ๏ธ Rendering in drawpreview()");
console.log("๐ข Data received:", cfg);
+ initcanvas();
scene.remove.apply(scene, scene.children);
if(cfg.hasOwnProperty('Shapes')){
@@ -211,17 +222,6 @@ function dopreview(key, idx, isinternal, hastime) {
hastime=[];
if(isinternal === undefined)
isinternal=true;
- // let dataroot = (isinternal) ? window.intdata[idx][2] : key;
- // let dataroot = key;
- // if (isinternal) {
- // if (window.intdata && window.intdata[idx] && window.intdata[idx][2]) {
- // dataroot = window.intdata[idx][2];
- // } else {
- // console.error("โ Internal data not ready for index", idx);
- // return;
- // }
- // }
-
let dataroot;
if (isinternal) {
if (window.intdata && window.intdata[idx] && window.intdata[idx][2]) {
@@ -302,12 +302,6 @@ function dopreview(key, idx, isinternal, hastime) {
cancelAnimationFrame(reqid);
}
reqid=requestAnimationFrame(update);
-
- // if(isinternal)
- // intdata[idx][2] = drawpreview(dataroot);
- // else
- // extdata[idx][2] = drawpreview(dataroot);
- // window.scrollTo(0, 0);
if (isinternal) {
if (window.intdata && window.intdata[idx]) {
window.intdata[idx][2] = drawpreview(dataroot);
@@ -428,11 +422,6 @@ function drawsurf(node, tri){
geometry.setAttribute( 'position', new THREE.BufferAttribute(node.selection.data, 3 ) );
geometry.computeVertexNormals();
- // geometry.computeBoundingBox();
- // geometry.computeBoundingSphere();
- // console.log("๐ Computed Bounding Box:", geometry.boundingBox);
- // console.log("๐ Computed Bounding Sphere:", geometry.boundingSphere);
-
var material = new THREE.MeshBasicMaterial( {
color: 0xff0000,
polygonOffset: true,
@@ -443,24 +432,14 @@ function drawsurf(node, tri){
} );
console.log("๐ Mesh Material:", material);
lastvolume = new THREE.Mesh( geometry, material );
- // lastvolume.scale.set(1, 1, 1);
scene.add( lastvolume )
console.log("๐ข Mesh Added to Scene:", lastvolume);
console.log("๐ Mesh Position:", lastvolume.position);
console.log("๐ Mesh Bounding Box:", lastvolume.geometry.boundingBox);
console.log("๐ Mesh Bounding Sphere:", lastvolume.geometry.boundingSphere);
-
- // const center = geometry.boundingSphere.center;
- // const radius = geometry.boundingSphere.radius;
-
- // camera.position.set(center.x, center.y, center.z + radius * 5);
- // camera.lookAt(center);
- // controls.target.set(center);
- // controls.update();
-
- var geo = new THREE.WireframeGeometry( lastvolume.geometry ); // or WireframeGeometry
+ var geo = new THREE.WireframeGeometry( lastvolume.geometry );
var mat = new THREE.LineBasicMaterial( { color: 0x666666 } );
var wireframe = new THREE.LineSegments( geo, mat );
lastvolume.add( wireframe );
@@ -482,11 +461,6 @@ function drawsurf(node, tri){
console.log("๐ Mesh Pos:", lastvolume.position);
console.log("๐ Bounding Sphere:", geometry.boundingSphere);
console.log("๐ Canvas size:", canvas.width(), canvas.height());
-
-
- // โ
Ensure Scene Renders
- // renderer.render(scene, camera);
- // console.log("๐ Scene Render Triggered");
}
function resetscene(s){
@@ -519,7 +493,6 @@ function resetscene(s){
light3.position.set( -s[0]*1.5,-s[1]*1.5,-s[2]*1.5 );
scene.add( light3 );
- //light.position.set(s[0]*1.5,s[1]*1.5,s[2]*1.5);
camera.far=far;
camera.near=near;
camera.position.set(s[0]*2,s[1]*1.5,s[2]*1.5);
@@ -577,11 +550,8 @@ function drawvolume(volume){
texture = new THREE.DataTexture3D(lastvolumedata.selection.data, dim[0], dim[1], dim[2]);
texture.format = THREE.RedFormat;
- texture.type = THREE.FloatType; //texture_dtype[lastvolumedata.dtype];
+ texture.type = THREE.FloatType;
texture.minFilter = texture.magFilter = THREE.LinearFilter;
- // texture.format = RedFormat; // THREE.RedFormat
- // texture.type = FloatType; // THREE.FloatType
- // texture.minFilter = texture.magFilter = LinearFilter; // THREE.LinearFilter
texture.unpackAlignment = 1;
texture.needsUpdate = true;
@@ -589,17 +559,31 @@ function drawvolume(volume){
const cmtextures = {
viridis: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/cm_viridis.png', render ),
gray: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/cm_gray.png', render )
- };
-
- // Material
- const shader = document.getElementById('mip-radio-button').checked ? MipRenderShader : (document.getElementById('iso-radio-button').checked ? IsoRenderShader : InterpRenderShader());
-
+ };
+ let shader;
+
+try {
+ const mipRadio = document.getElementById('mip-radio-button');
+ const isoRadio = document.getElementById('iso-radio-button');
+
+ shader = mipRadio?.checked
+ ? MipRenderShader
+ : isoRadio?.checked
+ ? IsoRenderShader
+ : InterpRenderShader();
+} catch (e) {
+ console.warn("โ ๏ธ Shader selection failed, using MipRenderShader by default", e);
+ shader = MipRenderShader; // Safe fallback
+}
+
const uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "u_data" ].value = texture;
uniforms[ "u_size" ].value.set( dim[0], dim[1], dim[2] );
uniforms[ "u_clim" ].value.set( volume.min(), volume.max() );
- uniforms[ "u_renderstyle" ].value = document.getElementById('mip-radio-button').checked ? 0 : 1;
+ const mipRadio = document.getElementById('mip-radio-button');
+ uniforms["u_renderstyle"].value = mipRadio && mipRadio.checked ? 0 : 1;
+
uniforms[ "u_renderthreshold" ].value = 0.5;
uniforms[ "u_scale" ].value = texture_scale[lastvolumedata.dtype];
uniforms[ "u_cmdata" ].value = cmtextures[ "viridis" ];
@@ -641,7 +625,6 @@ function drawvolume(volume){
}
material.uniforms.cameraPos.value.copy( camera.position );
- // THREE.Mesh
const geometry = new THREE.BoxGeometry(dim[0], dim[1], dim[2]);
geometry.translate(dim[0]*0.5, dim[1]*0.5, dim[2]*0.5 );
@@ -655,10 +638,25 @@ function drawvolume(volume){
}
function initcanvas() {
+
+ const canvasDiv = document.getElementById("canvas");
+ if (canvasDiv) {
+ const oldCanvas = canvasDiv.querySelector("canvas");
+ if (oldCanvas) {
+ canvasDiv.removeChild(oldCanvas);
+ }
+ }
+
+ if (renderer) {
+ console.log("โป๏ธ Resetting renderer and canvas...");
+ renderer.dispose();
+ $("#canvas").empty();
+}
+ destroyPreview(); // ๐งน Clean up old canvas + scene first
+
scene = new THREE.Scene();
boundingbox=scene;
- //const camera = new THREE.PerspectiveCamera( 50, canvas.width()/canvas.height(), 1, 2000 );
canvas = $("#canvas");
camera = new THREE.OrthographicCamera(canvas.width() / -2, canvas.width() / 2, canvas.height() / 2, canvas.height() / -2, 1, 1000);
@@ -669,8 +667,8 @@ function initcanvas() {
renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( canvas.width(), canvas.height());
- //renderer.state.enable("logarithmicDepthBuffer");
canvas.append( renderer.domElement );
+ console.log("โ