Skip to content

Commit

Permalink
Merging changes
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronge-2020 committed Jan 9, 2024
1 parent 9585cf2 commit 90c0df5
Show file tree
Hide file tree
Showing 6 changed files with 802 additions and 48 deletions.
14 changes: 14 additions & 0 deletions UI.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,18 @@ function getHyperparametersFromUI() {
imageWidth,
};
}

// Function to show the popup
function showPopup(id) {
document.getElementById(id).style.display = "block";
}

// Function to close the popup
function closePopup(id) {
document.getElementById(id).style.display = "none";
}


function makeElementDraggable(element) {
let isDragging = false;
let initialMouseX, initialMouseY, initialElementX, initialElementY;
Expand Down Expand Up @@ -287,4 +299,6 @@ export {
positionSidebarNextToCore,
hideSidebar,
makeElementDraggable,
showPopup,
closePopup,
};
4 changes: 3 additions & 1 deletion drawCanvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { runTravelingAlgorithm } from "./data_processing.js";

import { preprocessCores } from "./delaunay_triangulation.js";

import { positionSidebarNextToCore, hideSidebar } from "./UI.js";
import { positionSidebarNextToCore, hideSidebar, showPopup } from "./UI.js";

import * as tf from "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.14.0/+esm";

Expand Down Expand Up @@ -914,6 +914,8 @@ function obtainHyperparametersAndDrawVirtualGrid() {
startingX,
startingY
);

showPopup("popupGridding");
}

function createVirtualGrid(
Expand Down
122 changes: 75 additions & 47 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@ <h2>2) Load Metadata (optional)</h2>
<p style="text-align: center;">OR</p>
<br>
<label for="metadataUrlInput">Paste in .csv/.xls URL:</label>
<input type="text" id="metadataUrlInput" placeholder="Enter metadata URL"
value="https://aaronge-2020.github.io/Microarray-Dearraying/hpv%20rnascope%20cores%20R1.xlsx" />
<input type="text" id="metadataUrlInput" placeholder="Enter metadata URL" value="" />
<button id="loadMetadataUrlBtn" type="button" class="load-img-btn">Load .xls/.csv</button>
<br>
</div>
Expand Down Expand Up @@ -268,10 +267,10 @@ <h2>Virtual Grid Configuration</h2>

<!-- Tab Links -->
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'ImageSegmentation')"
<button class="tablinks"
id="imageSegmentationTabButton">Image Segmentation</button>
<button class="tablinks" onclick="openTab(event, 'RawData')" id="rawDataTabButton">Gridding</button>
<button class="tablinks" onclick="openTab(event, 'VirtualGrid')" id="virtualGridTabButton">Virtual
<button class="tablinks" id="rawDataTabButton">Gridding</button>
<button class="tablinks" id="virtualGridTabButton">Virtual
Grid</button>
</div>

Expand All @@ -283,15 +282,19 @@ <h2>Virtual Grid Configuration</h2>
<button class="close-instructions"></button>
<h2>Completing Core Segmentation</h2>
<p>Begin by fine-tuning the segmentation parameters to ensure the algorithm detects most of the
cores. Make any manual adjustments if needed to capture all cores accurately. Once you're
satisfied with the segmentation, click the "Finalize Segmentation" button. You can then proceed
cores. Make any manual adjustments if needed to capture all cores accurately. </p>
<p>
Once you're satisfied with the segmentation, click the "Finalize Segmentation" button. You can
then proceed
to the Gridding tab to continue.</p>
</div>

<div class="instructions-container">
<button class="close-instructions"></button>
<h2>Interactive Core Editing</h2>
<p>To add a core, simply click on the desired location within the image. If you wish to remove a
<p>To add a core, simply click on the desired location within the image.
</p>
<p> If you wish to remove a
core, hold the <kbd>Shift</kbd> key and click on the core you want to remove.</p>
</div>

Expand All @@ -316,8 +319,28 @@ <h2>Interactive Core Editing</h2>
<button class="close-instructions">×</button> <!-- This is the close button -->
<h2>Gridding Instructions</h2>
<p>First, ensure that the image is rotated correctly. If not, adjust the image rotation parameter.
To adjust the size of each core, hold the <kbd>Alt</kbd> key and move the cursor. To edit the
properties of a core, double-click on the core to open the edit menu. </p>
</p>
<p> To adjust the size of each core, hold the <kbd>Alt</kbd> key and move the cursor.
</p>

<p> To edit the
properties of a core, double-click on the core to open the edit menu. By default, manual edits
of the column value is disabled. To enable manual edits of the column value, uncheck the "Auto
Update Columns" checkbox. </p>
</div>

<div class="instructions-container">
<button class="close-instructions">×</button> <!-- This is the close button -->
<h2>Adding Cores</h2>
<p>To add a core, click on the desired location within the image. Your first click will set the
center of the core, and your second click will set the radius. </p>
To adjust the size of added cores, hold the <kbd>Alt</kbd> key and move the cursor.
</p>
<p> To edit the properties of a core, use the edit menu to the right. Make sure to set the correct
row of added cores</p>



</div>
<div class="core-edit-container" id="main-container"> <!-- This is the new flex container -->

Expand All @@ -339,6 +362,13 @@ <h2 class="title">Add Core</h2>
<label for="addColumnInput">Column:</label>
<input type="number" id="addColumnInput" name="addColumnInput" disabled>


<div class="checkbox-group">
<input type="checkbox" id="addAutoUpdateColumnsCheckbox"
name="addAutoUpdateColumnsCheckbox" checked>
<label for="addAutoUpdateColumnsCheckbox">Auto Update Columns</label>
</div>

<label for="addXInput">X Position:</label>
<input type="number" id="addXInput" name="addXInput">

Expand All @@ -359,11 +389,6 @@ <h2 class="title">Add Core</h2>
<label for="addImaginaryInput" class="radio-button">Missing</label>
</div>

<div class="checkbox-group">
<input type="checkbox" id="addAutoUpdateColumnsCheckbox"
name="addAutoUpdateColumnsCheckbox" checked>
<label for="addAutoUpdateColumnsCheckbox">Auto Update Columns</label>
</div>

<div class="button-group">
<button type="button" id="addCoreButton">Add Core</button>
Expand All @@ -387,6 +412,13 @@ <h2 class="title">Edit Core</h2>
<label for="editColumnInput">Column:</label>
<input type="number" id="editColumnInput" name="editColumnInput" disabled>


<div class="checkbox-group">
<input type="checkbox" id="editAutoUpdateColumnsCheckbox"
name="editAutoUpdateColumnsCheckbox" checked>
<label for="editAutoUpdateColumnsCheckbox">Auto Update Columns</label>
</div>

<label for="editXInput">X Position:</label>
<input type="number" id="editXInput" name="editXInput">

Expand All @@ -408,11 +440,7 @@ <h2 class="title">Edit Core</h2>
<input type="radio" id="editImaginaryInput" name="coreType" value="imaginary">
<label for="editImaginaryInput" class="radio-button">Missing</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="editAutoUpdateColumnsCheckbox"
name="editAutoUpdateColumnsCheckbox" checked>
<label for="editAutoUpdateColumnsCheckbox">Auto Update Columns</label>
</div>


<div class="button-group">
<button type="button" id="saveCoreEdits">Save Edits</button>
Expand All @@ -433,38 +461,38 @@ <h2 class="title">Edit Core</h2>
</div>

</div>
<script>
// Call this function to open the default tab
function openDefaultTab() {
// Get the element with id="defaultOpen" and click on it
document.getElementById("imageSegmentationTabButton").click();
}

// The openTab function as before
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

// When the window loads, open the default tab
window.onload = openDefaultTab;


</script>



</div>


<!-- Popup HTML -->
<div id="popupSegmentation" class="popup" style="display: none;">
<div class="popup-content">
<h2>Segmentation Finalized</h2>
<p>Segmentation is now finalized. You can proceed to gridding or continue editing.</p>
<button id="openGriddingButton">Open Gridding Tab</button>
<button id="segmentationClosePopupButton">Continue Editing</button>
</div>
</div>

<div id="popupGridding" class="popup" style="display: none;">
<div class="popup-content">
<h2>Gridding Finalized</h2>
<p>Gridding is now finalized. You can download the results, proceed to the virtual grid, or continue editing.</p>
<button id="openVirtualGridButton">Open Virtual Grid</button>
<button id="griddingClosePopupButton">Continue Editing</button>
</div>
</div>


<script type="module" src="main.js"></script>
<script>



</script>

</body>

Expand Down
70 changes: 70 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
updateStatusMessage,
resetApplication,
makeElementDraggable,
showPopup,
closePopup,
} from "./UI.js";

import {
Expand All @@ -27,12 +29,52 @@ import { loadModel, runPipeline, loadOpenCV } from "./core_detection.js";

import { getPNGFromWSI, getRegionFromWSI } from "./wsi.js"


const MAX_DIMENSION_FOR_DOWNSAMPLING = 1024

// Initialize image elements
const originalImageContainer = document.getElementById("originalImage");
const processedImageCanvasID = "segmentationResultsCanvas";



// Call this function to open the default tab
function openDefaultTab() {
// Get the element with id="defaultOpen" and click on it
document.getElementById("imageSegmentationTabButton").click();
}

// The openTab function as before
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

// When the window loads, open the default tab
window.onload = openDefaultTab;

// Function to switch to the gridding tab
function switchToGridding() {
closePopup("popupSegmentation");
document.getElementById("rawDataTabButton").click(); // Activate the gridding tab
// Deactivate the segmentation tab if needed
}

function switchToVirtualGrid() {
closePopup("popupGridding");
document.getElementById("virtualGridTabButton").click(); // Activate the gridding tab
// Deactivate the segmentation tab if needed
}

// Load dependencies and return updated state
const loadDependencies = async () => ({
model: await loadModel("./tfjs_model/model.json"),
Expand Down Expand Up @@ -474,6 +516,32 @@ function bindEventListeners() {
this.parentElement.style.display = 'none';
});
});

document.getElementById("rawDataTabButton").addEventListener("click", function (event) {
openTab(event, 'RawData');
});
document.getElementById("imageSegmentationTabButton").addEventListener("click", function (event) {
openTab(event, 'ImageSegmentation');
});

document.getElementById("virtualGridTabButton").addEventListener("click", function (event) {
openTab(event, 'VirtualGrid');
});


document.getElementById("segmentationClosePopupButton").addEventListener("click", function(event){

closePopup("popupSegmentation");
} );
document.getElementById("griddingClosePopupButton").addEventListener("click", function (event){
closePopup("popupGridding");

});

document.getElementById("openGriddingButton").addEventListener("click", switchToGridding);
document.getElementById("openVirtualGridButton").addEventListener("click", switchToVirtualGrid);


}

// Initialize and bind events
Expand Down Expand Up @@ -540,6 +608,8 @@ const initSegmentation = async () => {
}

preprocessForTravelingAlgorithm();
showPopup("popupSegmentation");

});
};

Expand Down
Loading

0 comments on commit 90c0df5

Please sign in to comment.