Skip to content

Commit

Permalink
Fixed overlay with metadata editing
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronge-2020
aaronge-2020 committed Feb 26, 2024
1 parent 6f897e0 commit e886a43
Show file tree
Hide file tree
Showing 5 changed files with 332 additions and 118 deletions.
3 changes: 1 addition & 2 deletions data_processing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,11 +311,10 @@ async function loadDataAndDetermineParams(normalizedCores, params) {
}

function saveUpdatedCores(format) {
if (!window.sortedCoresData) {
if (!window.finalSaveData) {
alert("No data available to save.");
return;
}


// Save data as JSON or CSV
if (format === "json") {
Expand Down
130 changes: 69 additions & 61 deletions drawCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1695,7 +1695,7 @@ async function createVirtualGrid(
startingY
);

await drawVirtualGridFromWSI(imageSrc, sortedCoresData, 12);
await drawVirtualGridFromWSI(imageSrc, sortedCoresData, 64);
} else {
updateGridSpacingInVirtualGridForSVS(
horizontalSpacing,
Expand All @@ -1719,31 +1719,6 @@ async function createVirtualGrid(
}
}

// async function createImageForCore(svsImageURL, core, coreSize = 64) {
// const coreWidth = core.currentRadius * 2;
// const coreHeight = core.currentRadius * 2;

// const tileParams = {
// tileX: core.x - core.currentRadius,
// tileY: core.y - core.currentRadius,
// tileWidth: coreWidth,
// tileHeight: coreHeight,
// tileSize: 128,
// };

// const imageResp = await getRegionFromWSI(svsImageURL, tileParams, 1);
// const blob = await imageResp.blob();
// const img = new Image(coreSize, coreSize);
// return new Promise((resolve, reject) => {
// img.onload = function () {
// URL.revokeObjectURL(img.src); // Free memory
// resolve(img);
// };
// img.onerror = reject;
// img.src = URL.createObjectURL(blob);
// });
// }

// Move the initiateDownload function outside of createImageForCore
async function initiateDownload(
svsImageURL,
Expand Down Expand Up @@ -1774,11 +1749,9 @@ async function initiateDownload(
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
debugger
debugger;
}



// Create an array to store all the core containers
const coreContainers = [];

Expand Down Expand Up @@ -1807,54 +1780,81 @@ function populateAndEditMetadataForm(rowValue, colValue) {
// Get the form element
const form = document.getElementById("editMetadataForm");

const virtualGrid = document.getElementById("VirtualGrid");

// Clear existing form contents
form.innerHTML = "";
form.className = "space-y-4";

// Dynamically create form elements for each metadata property
for (const key in metadataObj) {
const value = metadataObj[key];

// Determine input type based on the value type
let inputType = "text"; // Default input type
if (typeof value === "number") {
inputType = "number";
} else if (typeof value === "boolean") {
inputType = "checkbox";
} // For more specific cases, like radio buttons, additional logic would be needed

// Create a div wrapper for styling
const div = document.createElement("div");
div.className = "flex flex-col justify-start";

// Create a label for the input
const label = document.createElement("label");
label.setAttribute("for", key);
label.textContent = key + ": ";
label.className = "mb-2 text-sm font-medium text-gray-900";
div.appendChild(label);

// Create an input element
const input = document.createElement("input");
input.type = inputType;
input.name = key;
input.id = key;
input.className =
"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5";

}

if (inputType === "checkbox") {
// Create the checkbox container div
const checkboxContainer = document.createElement("div");
checkboxContainer.className = "custom-checkbox";

// Create the hidden checkbox input
const input = document.createElement("input");
input.type = "checkbox";
input.id = key;
input.name = key;
input.checked = value;

// Create the label element for the checkbox
const label = document.createElement("label");
label.setAttribute("for", key);
label.className = "custom-checkbox-label";
label.textContent = `${key}: `;

// Create the custom checkmark span
const checkmark = document.createElement("span");
checkmark.className = "checkmark";

// Append the hidden checkbox and checkmark to the checkbox container
checkboxContainer.appendChild(input);
checkboxContainer.appendChild(checkmark);

// Append the checkbox container to the label
label.appendChild(checkboxContainer);

// Append the label to the form
form.appendChild(label);
} else {
// Create a label for non-checkbox inputs
const label = document.createElement("label");
label.setAttribute("for", key);
label.textContent = key + ": ";
label.className = "mb-2 text-sm font-medium text-gray-900";

// Create the text or number input
const input = document.createElement("input");
input.type = inputType;
input.name = key;
input.id = key;
input.value = value;
input.className = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5";

// Create a wrapper div for non-checkbox inputs
const inputDiv = document.createElement("div");
inputDiv.className = "flex flex-col mb-4";

// Append the label and input to the wrapper div
inputDiv.appendChild(label);
inputDiv.appendChild(input);

// Append the wrapper div to the form
form.appendChild(inputDiv);
}

div.appendChild(input);

form.appendChild(div);
}

// Create a submit button
const submitButton = document.createElement("input");
submitButton.type = "submit";
Expand Down Expand Up @@ -1900,7 +1900,7 @@ async function createImageForCore(svsImageURL, core, coreSize = 64) {
tileY: core.y - core.currentRadius,
tileWidth: coreWidth,
tileHeight: coreHeight,
tileSize: 128,
tileSize: coreSize,
};

const imageResp = await getRegionFromWSI(svsImageURL, tileParams, 1);
Expand All @@ -1922,15 +1922,23 @@ async function createImageForCore(svsImageURL, core, coreSize = 64) {

// Double-click event for initiating download
container.ondblclick = () => {
const fileName = `core_${core.row + 1}_${core.col + 1}.jpg`; // Construct file name
const fileName = `core_${core.row + 1}_${core.col + 1}.png`; // Construct file name

initiateDownload(svsImageURL, core, coreWidth, coreHeight, fileName);
};

container.onclick = () => {
// Select the core
core.isSelected = true;
populateAndEditMetadataForm(core.row + 1, core.col + 1);

// Remove the active class from all cores
coreContainers.forEach((container) => {
container.classList.remove("active");
});

// Add the active class to the selected core
container.classList.add("active");

};

// Append children to the container
Expand Down
19 changes: 9 additions & 10 deletions index2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -479,16 +479,6 @@ <h2 class="title">Configure Parameters</h2>
<button type="button" id="apply-hyperparameters"
class="px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">Apply</button>

<div class="flex gap-2"> <!-- Added gap-2 for spacing between buttons -->
<button type="button"
class="mb-4 w-full inline-flex items-center justify-center bg-green-600 hover:bg-green-700 text-white rounded-md focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 focus:outline-none shadow transition duration-150 ease-in-out px-4 py-2 text-sm"
id="saveResultsAsJson">Save JSON</button>
<button type="button"
class="mb-4 w-full inline-flex items-center justify-center bg-green-600 hover:bg-green-700 text-white rounded-md focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 focus:outline-none shadow transition duration-150 ease-in-out px-4 py-2 text-sm"
id="saveResultsAsCsv">Save CSV</button>
</div>


</form>

</aside>
Expand Down Expand Up @@ -623,6 +613,15 @@ <h2 class="title">Edit Metadata</h2>


</form>

<div class="flex gap-2"> <!-- Added gap-2 for spacing between buttons -->
<button type="button"
class="mb-4 w-full inline-flex items-center justify-center bg-green-600 hover:bg-green-700 text-white rounded-md focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 focus:outline-none shadow transition duration-150 ease-in-out px-4 py-2 text-sm"
id="saveResultsAsJson">Save JSON</button>
<button type="button"
class="mb-4 w-full inline-flex items-center justify-center bg-green-600 hover:bg-green-700 text-white rounded-md focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 focus:outline-none shadow transition duration-150 ease-in-out px-4 py-2 text-sm"
id="saveResultsAsCsv">Save CSV</button>
</div>
<fieldset style="display: none;">

<label for="horizontalSpacing">Horizontal Spacing:</label>
Expand Down
99 changes: 54 additions & 45 deletions main2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,6 @@ const handleImageLoad = (file, processCallback) => {

window.uploadedImageFileType = "simple";
} else if (file && file.name.endsWith(".svs")) {

updateImagePreview(
originalImageContainer.src,
originalImageContainer.width,
Expand Down Expand Up @@ -1174,67 +1173,77 @@ document.querySelectorAll("input[type='number']").forEach((e) => {
});

async function downloadAllCores(cores) {

const svsImageURL = document.getElementById("imageUrlInput").value
? document.getElementById("imageUrlInput").value
: document.getElementById("fileInput").files.length > 0
? document.getElementById("fileInput").files[0]
: window.boxFileInfo
? URL.createObjectURL(window.boxFile)
: "path/to/default/image.jpg";

const JSZip = window.JSZip || require('jszip');
? document.getElementById("imageUrlInput").value
: document.getElementById("fileInput").files.length > 0
? document.getElementById("fileInput").files[0]
: window.boxFileInfo
? URL.createObjectURL(window.boxFile)
: "path/to/default/image.jpg";

const JSZip = window.JSZip || require("jszip");
const zip = new JSZip();

// Show progress overlay
const overlay = document.getElementById('progressOverlay');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
overlay.style.display = 'flex';
progressBar.style.width = '0%';
progressText.innerText = 'Starting download...';

await Promise.all(cores.map(async (core, index) => {
const fullResTileParams = {
tileX: core.x - core.currentRadius,
tileY: core.y - core.currentRadius,
tileWidth: core.currentRadius * 2,
tileHeight: core.currentRadius * 2,
tileSize: core.currentRadius * 2,
};
const overlay = document.getElementById("progressOverlay");
const progressBar = document.getElementById("progressBar");
const progressText = document.getElementById("progressText");
overlay.style.display = "flex";
progressBar.style.width = "0%";
progressText.innerText = "Starting download...";

await Promise.all(
cores.map(async (core, index) => {
const fullResTileParams = {
tileX: core.x - core.currentRadius,
tileY: core.y - core.currentRadius,
tileWidth: core.currentRadius * 2,
tileHeight: core.currentRadius * 2,
tileSize: core.currentRadius * 2,
};

try {
const fullSizeImageResp = await getRegionFromWSI(svsImageURL, fullResTileParams);
const blob = await fullSizeImageResp.blob();
// Log the size of each blob
console.log(`Blob ${index + 1} size: ${blob.size} bytes`);
try {
const fullSizeImageResp = await getRegionFromWSI(
svsImageURL,
fullResTileParams
);
const blob = await fullSizeImageResp.blob();
// Log the size of each blob
console.log(`Blob ${index + 1} size: ${blob.size} bytes`);

zip.file(`$Core_${core.row}_${core.col}.png`, blob);
zip.file(`core_${core.row}_${core.col}.png`, blob);

// Update progress
const progress = ((index + 1) / cores.length) * 100;
progressBar.style.width = `${progress}%`;
progressText.innerText = `Downloading... ${progress.toFixed(2)}%`;
} catch (error) {
console.error("Error fetching or adding an image to the zip:", error);
}
}));
// Update progress
const progress = ((index + 1) / cores.length) * 100;
progressBar.style.width = `${progress}%`;
progressText.innerText = `Downloading... ${progress.toFixed(2)}%`;
} catch (error) {
console.error("Error fetching or adding an image to the zip:", error);
}
})
);

// Generate the zip file
zip.generateAsync({type:"blob"})
.then(function(content) {

zip
.generateAsync({
type: "blob",
compression: "DEFLATE",
compressionOptions: { level: 9 }, // Highest compression
})
.then(function (content) {
// Use a temporary link to download the zip file
const downloadLink = document.createElement('a');
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(content);
downloadLink.download = "cores.zip";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

// Hide progress overlay and reset progress bar
overlay.style.display = 'none';
progressBar.style.width = '0%';
progressText.innerText = 'Initializing...';
overlay.style.display = "none";
progressBar.style.width = "0%";
progressText.innerText = "Initializing...";
});
}

Expand Down
Loading

0 comments on commit e886a43

Please sign in to comment.