Skip to content

Commit af74f29

Browse files
elainefan331elainefan331
authored
Merge pull request #61 from NeuroJSON/dev_hari
Fix: preview feature rendering in dataset detail page
2 parents ff5af0b + 97e4b36 commit af74f29

File tree

6 files changed

+1484
-655
lines changed

6 files changed

+1484
-655
lines changed

‎package.json‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,23 @@
2020
"@testing-library/react": "^13.0.0",
2121
"@testing-library/user-event": "^13.2.1",
2222
"@types/jest": "^27.0.1",
23+
"@types/numjs": "^0.16.8",
2324
"@types/react": "^18.0.0",
2425
"@types/react-dom": "^18.0.0",
25-
"@types/three": "^0.174.0",
26+
"@types/three": "^0.176.0",
2627
"ajv": "^8",
2728
"ajv-keywords": "^5",
2829
"axios": "^1.4.0",
2930
"bda": "^1.0.0",
3031
"bjd": "^0.3.2",
31-
"buffer": "^6.0.3",
32+
"buffer": "6.0.3",
3233
"dayjs": "^1.11.10",
3334
"jquery": "^3.7.1",
3435
"json-stringify-safe": "^5.0.1",
3536
"jwt-decode": "^3.1.2",
37+
"lzma": "^2.3.2",
38+
"numjs": "^0.16.1",
39+
"pako": "1.0.11",
3640
"path-browserify": "^1.0.1",
3741
"pako": "^2.1.0",
3842
"query-string": "^8.1.0",
@@ -44,8 +48,10 @@
4448
"react-scripts": "^5.0.1",
4549
"sharp": "^0.33.5",
4650
"stats-js": "^1.0.1",
51+
"stats.js": "0.17.0",
52+
"three": "0.145.0",
4753
"typescript": "^5.1.6",
48-
"uplot": "^1.6.31",
54+
"uplot": "1.6.17",
4955
"web-vitals": "^2.1.0"
5056
},
5157
"devDependencies": {

‎src/components/PreviewModal.tsx‎

Lines changed: 42 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,57 @@
1+
/// <reference types="three" />
12
import React, { useEffect } from "react";
23

4+
// Tell TS that THREE is available globally
5+
declare const THREE: typeof import("three");
6+
7+
declare global {
8+
interface Window {
9+
scene: any;
10+
camera: any;
11+
renderer: any;
12+
previewdata: (...args: any[]) => void;
13+
[key: string]: any;
14+
}
15+
}
16+
317
const PreviewModal: React.FC<{
418
isOpen: boolean;
519
dataKey: any;
620
isInternal: boolean;
721
onClose: () => void;
822
}> = ({ isOpen, dataKey, isInternal, onClose }) => {
9-
useEffect(() => {
10-
if (isOpen) {
11-
console.log("🟢 Opening PreviewModal for:", dataKey);
12-
13-
setTimeout(() => {
14-
// let canvas = document.querySelector("#canvas");
15-
16-
// if (!canvas) {
17-
// console.error("❌ Error: #canvas element not found in DOM!");
18-
// return;
19-
// }
20-
21-
if (typeof (window as any).previewdata === "function") {
22-
console.log("Calling previewdata to handle Three.js init...");
23-
(window as any).previewdata(dataKey, 0, isInternal, false);
24-
} else {
25-
console.error("❌ previewdata() is not defined!");
26-
}
27-
}, 100); // Small delay ensures modal is rendered first
23+
useEffect(() => {
24+
if (isOpen) {
25+
console.log("🟢 Opening PreviewModal for:", dataKey);
26+
27+
// 1. Clear previous canvas
28+
const canvasDiv = document.getElementById("canvas");
29+
if (canvasDiv) {
30+
while (canvasDiv.firstChild) {
31+
canvasDiv.removeChild(canvasDiv.firstChild);
32+
}
2833
}
29-
}, [isOpen, dataKey]);
34+
35+
// 2. Clear global references
36+
window.scene = undefined;
37+
window.camera = undefined;
38+
window.renderer = undefined;
39+
40+
// 3. Reinitialize preview
41+
setTimeout(() => {
42+
if (typeof window.previewdata === "function") {
43+
console.log("Calling previewdata to handle Three.js init...");
44+
window.previewdata(dataKey, 0, isInternal, false);
45+
} else {
46+
console.error("❌ previewdata() is not defined!");
47+
}
48+
}, 100);
49+
console.log("⏳ Calling previewdata for", dataKey);
50+
}
51+
}, [isOpen, dataKey]);
3052

3153
if (!isOpen) return null;
3254
return (
33-
// <div className="preview-modal">
34-
// <div className="modal-header">
35-
// <h3>Preview</h3>
36-
// <button className="close-btn" onClick={onClose}>×</button>
37-
// </div>
38-
39-
// {/* ✅ Display Mode Section */}
40-
// <div id="renderpanel" style={{ width: "100%", backgroundColor: "#222", padding: "10px", color: "#fff" }}>
41-
// <b>Display Mode</b><br />
42-
// <input type="radio" id="mip-radio-button" name="displaymode" value="mip" defaultChecked />
43-
// <label htmlFor="mip-radio-button">MIP</label>
44-
// <input type="radio" id="iso-radio-button" name="displaymode" value="iso" />
45-
// <label htmlFor="iso-radio-button">Isosurface</label>
46-
47-
// {/* ✅ Colormap Section */}
48-
// <b>Colormap</b><br />
49-
// <label htmlFor="clim-low">Lower-bound</label>
50-
// <input id="clim-low" type="range" min="1" step="0.25" max="100" defaultValue="50" disabled /><br />
51-
// <label htmlFor="clim-hi">Upper-bound</label>
52-
// <input id="clim-hi" type="range" min="1" step="0.25" max="100" defaultValue="50" disabled /><br />
53-
// <label htmlFor="isothreshold">Threshold</label>
54-
// <input id="isothreshold" type="range" min="0" step="0.01" max="1" defaultValue="0.5" disabled />
55-
// </div>
56-
57-
// {/* ✅ Cross Sections Section */}
58-
// <b>Cross Sections</b><br />
59-
// <div className="controlrow">
60-
// X
61-
// <label htmlFor="cross-x-low">Min</label>
62-
// <input id="cross-x-low" type="range" min="0" max="1" defaultValue="0" step="any" />
63-
// <label htmlFor="cross-x-hi">Max</label>
64-
// <input id="cross-x-hi" type="range" min="0" max="1" defaultValue="1" step="any" />
65-
// </div>
66-
// <div className="controlrow">
67-
// Y
68-
// <label htmlFor="cross-y-low">Min</label>
69-
// <input id="cross-y-low" type="range" min="0" max="1" defaultValue="0" step="any" />
70-
// <label htmlFor="cross-y-hi">Max</label>
71-
// <input id="cross-y-hi" type="range" min="0" max="1" defaultValue="1" step="any" />
72-
// </div>
73-
// <div className="controlrow">
74-
// Z
75-
// <label htmlFor="cross-z-low">Min</label>
76-
// <input id="cross-z-low" type="range" min="0" max="1" defaultValue="0" step="any" />
77-
// <label htmlFor="cross-z-hi">Max</label>
78-
// <input id="cross-z-hi" type="range" min="0" max="1" defaultValue="1" step="any" />
79-
// </div>
80-
// <div id="taxis">
81-
// T
82-
// <label htmlFor="cross-t">Time</label>
83-
// <input id="cross-t" type="range" min="0" max="1" defaultValue="0" step="1" />
84-
// </div>
85-
86-
// {/* ✅ Clip Plane Section */}
87-
// <b>Clip Plane</b><br />
88-
// <label htmlFor="camera-near">Near</label>
89-
// <input id="camera-near" type="range" min="1" max="100" defaultValue="50" /><br />
90-
// <label htmlFor="camera-far">Far</label>
91-
// <input id="camera-far" type="range" min="1" max="100" defaultValue="50" />
92-
93-
// {/* ✅ View Section */}
94-
// <b>View</b><br />
95-
// <button id="neg-x-view">-X</button>
96-
// <button id="pos-x-view">+X</button>
97-
// <button id="neg-y-view">-Y</button>
98-
// <button id="pos-y-view">+Y</button>
99-
// <button id="neg-z-view">-Z</button>
100-
// <button id="pos-z-view">+Z</button>
101-
102-
// {/* ✅ Ensure proper rendering with <canvas> */}
103-
// <div
104-
// id="canvas"
105-
// style={{
106-
// backgroundColor: '#000',
107-
// width: '937px',
108-
// height: '750px',
109-
// border: '1px solid black',
110-
// padding: 0,
111-
// float: 'left',
112-
// }}
113-
// ></div>
114-
// </div>
11555
<div
11656
className="preview-modal"
11757
style={{

0 commit comments

Comments
 (0)