Skip to content

Commit

Permalink
fix: Fixed examples access and added stats monitoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaiborjosue
gaiborjosue committed Oct 31, 2024
1 parent b70297e commit 193d1a0
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 72 deletions.
47 changes: 0 additions & 47 deletions reload/dropHandler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,57 +26,10 @@ class DropZoneHandler {
this.fileInput.addEventListener("change", this.handleFileSelect.bind(this));
}

injectPowerBoost() {
const loadBoostlet = (url) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error("Failed to load PowerBoost"));
}
}
};
xhr.send(null);
});
};

const compileAndExecuteBoostlet = (code) => {
// Remove any existing script to avoid duplicates
const existingScript = document.getElementById("powerboost-script");
if (existingScript) {
existingScript.remove();
}

// Create and execute the script
const script = document.createElement("script");
script.id = "powerboost-script";
script.textContent = `(function(){${code.trim()}})();`;
document.body.appendChild(script);
};

const baseurl =
"https://raw.githubusercontent.com/mpsych/powerboost/refs/heads/main/";
const scriptName = "floatingUI.js";

// Load and execute PowerBoost
loadBoostlet(baseurl + scriptName)
.then(compileAndExecuteBoostlet)
.catch((error) => console.error("Error loading PowerBoost:", error));
}

showViewer() {
this.landingContainer.classList.add("hidden");
this.viewerContainer.classList.remove("hidden");
this.drawerContainer.classList.add("visible");

setTimeout(() => {
this.injectPowerBoost();
}, 100);

}

handleDragEnter(e) {
Expand Down
42 changes: 34 additions & 8 deletions reload/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap"
rel="stylesheet"
/>
<script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>

<link rel="stylesheet" href="styles.css" />
</head>
<body>
Expand All @@ -22,7 +24,11 @@
<!-- Header -->
<header class="header">
<div class="header-content">
<img src="./images/SliceDropReloaded.svg" alt="Slice:Drop Logo" class="logo" />
<img
src="./images/SliceDropReloaded.svg"
alt="Slice:Drop Logo"
class="logo"
/>
<div class="header-text">
<h1>Slice:Drop</h1>
<p>Instantly view scientific and medical imaging data in 3D</p>
Expand All @@ -34,30 +40,30 @@ <h2>Try the examples...</h2>

<!-- Row of example images -->
<div class="examples-grid">
<div
class="example-card"
data-caption="A 14-year-old healthy male brain. The patient was scanned using a structural MRI and a diffusion MRI to highlight connecting brain fibers. Loading time: +++"
>
<div class="example-card" data-example="1" data-caption="A 14-year-old healthy male brain. The patient was scanned using a structural MRI and a diffusion MRI to highlight connecting brain fibers. Loading time: +++">
<img src="./images/14yrold.png" alt="Brain MRI Example" />
</div>

<div
class="example-card"
data-caption="A contrast-enhanced 3D MR image showing an arteriovenous fistula, a bypass created by joining an artery and a vein, located in an arm. Loading time: +"
data-example="2"
>
<img src="./images/avf_small.png" alt="Arteriovenous Fistula" />
</div>

<div
class="example-card"
data-caption="The surface of the left hemisphere of a 2-year-old healthy brain. The scalar overlay shows the bending energy based on Curvedness. Loading time: ++"
data-example="3"
>
<img src="./images/2yrold_small.png" alt="Brain Surface" />
</div>

<div
class="example-card"
data-caption="A region of the brainstem of a human adult including an automatically generated segmentation as a label map colorized using an anatomical color table. Loading time: +"
data-example="4"
>
<img src="./images/brainstem_small.png" alt="Brainstem" />
</div>
Expand All @@ -70,7 +76,6 @@ <h2>Try the examples...</h2>
structural MRI and a diffusion MRI to highlight connecting brain
fibers. Loading time: +++
</p>
<button class="view-example-button">View Example</button>
</div>
</div>
</header>
Expand All @@ -90,7 +95,8 @@ <h2>Try the examples...</h2>
type="file"
id="fileInput"
class="hidden"
accept=".nii,.nii.gz,.mz3"
multiple

/>
</label>
</div>
Expand Down Expand Up @@ -120,7 +126,11 @@ <h3>Models</h3>
<!-- Footer -->
<footer class="footer">
<div class="footer-links">
<a href="https://github.com/slicedrop/slicedrop.github.com" target="_blank">Source Code</a>
<a
href="https://github.com/slicedrop/slicedrop.github.com"
target="_blank"
>Source Code</a
>
<span class="separator">|</span>
<a href="https://mpsych.org/" target="_blank">Machine Psychology</a>
<span class="separator">|</span>
Expand Down Expand Up @@ -451,6 +461,22 @@ <h3>Models</h3>
<script type="module" src="./viewer.js"></script>
<script type="module" src="./dropHandler.js"></script>
<script>
// Add performance stats
const script = document.createElement("script");
script.onload = function () {
const stats = new Stats();
stats.dom.style.top = "0";
stats.dom.style.right = "0";
stats.dom.style.left = "";
document.body.appendChild(stats.dom);
requestAnimationFrame(function loop() {
stats.update();
requestAnimationFrame(loop);
});
};
script.src = "https://mrdoob.github.io/stats.js/build/stats.min.js";
document.head.appendChild(script);

// Set the default caption to the first example
document.getElementById("dynamic-caption").innerText = document
.querySelector(".example-card")
Expand Down
125 changes: 108 additions & 17 deletions reload/viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,62 @@ export class NiiVueViewer {

// Make viewer accessible globally as nv
window.nv = this.viewer;

this.exampleData = {
example1: [
"https://fly.cs.umb.edu/data/X/example1/streamlineres.small.trk",
"https://fly.cs.umb.edu/data/X/example1/T1sub.nii.gz",
],
example2: [
"https://fly.cs.umb.edu/data/X/example2/avf.vtk",
"https://fly.cs.umb.edu/data/X/example2/avf.nii",
],
example3: ["https://fly.cs.umb.edu/data/X/example3/lh.smoothwm"],
example4: [
"https://fly.cs.umb.edu/data/X/example4/seg.nii.gz",
"https://fly.cs.umb.edu/data/X/example4/vol.nii.gz",
],
};

this.setupExampleHandlers();
}

setupExampleHandlers() {
const examples = document.querySelectorAll(".example-card");
const drawerContainer = document.querySelector(".drawer-container");
const landingContainer = document.getElementById("landingContainer");
const viewerContainer = document.getElementById("viewerContainer");

// Handle both the card click and view button click
[...examples].forEach((element, index) => {
element.addEventListener("click", async (e) => {
e.preventDefault();

// Hide landing, show viewer
landingContainer.classList.add("hidden");
viewerContainer.classList.remove("hidden");

// Load the data
const urls = this.exampleData[`example${index + 1}`];

try {
const loadPromises = urls.map((url) =>
fetch(url)
.then((response) => response.blob())
.then((blob) => {
const file = new File([blob], url.split("/").pop());
return this.loadFile(file);
})
);

await Promise.all(loadPromises);
drawerContainer.classList.add("visible");
this.updateDrawerStates();
} catch (error) {
console.error("Error loading example data:", error);
}
});
});
}

updateDrawerStates() {
Expand Down Expand Up @@ -73,11 +129,10 @@ export class NiiVueViewer {
onOverlayLoaded: () => {
this.updateDrawerStates();
},

onMeshLoaded: () => {
this.updateDrawerStates();
}

},
});

this.viewer.attachTo(this.canvasId);
Expand Down Expand Up @@ -662,30 +717,66 @@ export class NiiVueViewer {
}
}

loadBoostlet = (url) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error("Failed to load PowerBoost"));
}
}
};
xhr.send(null);
});
};

async loadFile(file) {
try {
// Initial load or subsequent loads
if (this.viewer.volumes?.length > 0 || this.viewer.meshes?.length > 0) {
// For subsequent loads, just add the new file
await this.viewer.loadFromFile(file);
} else {
// For first load
await this.viewer.loadFromFile(file);

// Set initial states
if (this.viewer.volumes && this.viewer.volumes.length > 0) {
const sliceTypeSelect = document.getElementById("sliceType");
if (sliceTypeSelect) {
this.setSliceType(sliceTypeSelect.value);
}
await this.viewer.loadFromFile(file);

// Set initial states
if (this.viewer.volumes && this.viewer.volumes.length > 0) {
const sliceTypeSelect = document.getElementById("sliceType");
if (sliceTypeSelect) {
this.setSliceType(sliceTypeSelect.value);
}
}

// Update drawer states after any file load
this.updateDrawerStates();

const compileAndExecuteBoostlet = (code) => {
// Remove any existing script to avoid duplicates
let existingScript = document.getElementById("powerboost-script");
if (existingScript) {
existingScript.remove();
}

// Create and execute the script
let script = document.createElement("script");
script.id = "powerboost-script";
script.textContent = `(function(){${code.trim()}})();`;
document.body.appendChild(script);
};

const baseurl =
"https://raw.githubusercontent.com/mpsych/powerboost/refs/heads/main/";
const scriptName = "floatingUI.js";

// Load and execute PowerBoost
this.loadBoostlet(baseurl + scriptName)
.then(compileAndExecuteBoostlet)
.catch((error) => console.error("Error loading PowerBoost:", error));

return true;

} catch (error) {
console.error("Error loading file:", error);

return false;
}
}
Expand Down

0 comments on commit 193d1a0

Please sign in to comment.