Skip to content

Commit

Permalink
Merge pull request #136 from labsyspharm/upload_form
Browse files Browse the repository at this point in the history 
import routes changed
  • Loading branch information
@simonwarchol
simonwarchol authored Apr 11, 2024
2 parents 5adcb81 + 9324e68 commit dbf4a12
Show file tree
Hide file tree
Showing 3 changed files with 240 additions and 99 deletions.
204 changes: 146 additions & 58 deletions minerva_analysis/client/src/js/services/importFormValidation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,30 @@

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}else{
onupload();
}
form.classList.add('was-validated')
}, true)
})
'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
} else {
onupload();
}
form.classList.add('was-validated')
}, true)
})
})()

//add listener
d3.select("#import_type").on("change",update);
d3.select("#import_type").on("change", update);

function update(){
if(d3.select("#import_type").property("checked")){
function update() {
if (d3.select("#import_type").property("checked")) {
console.log('is checked');
d3.select('#mcmicro_form').style("display", 'inline');
d3.select('#custom_form').style("display", 'none');
Expand All @@ -36,15 +36,15 @@ function update(){
}

//check if path and channel file exist in the specified MCMICRO output foder
async function checkMCOutputFolder(caller){
async function checkMCOutputFolder(caller) {
let path_res = await checkPathExistence(caller);
if (path_res == true){
if (path_res == true) {
let channel_res = await checkChannelExistence(caller)
if (channel_res == false){
d3.select("#" + 'mcmicro_path_validation_text').html('No image channel file found under this path.')
}
}else{
d3.select("#" + 'mcmicro_path_validation_text').html('Please provide a valid path.')
if (channel_res == false) {
d3.select("#" + 'mcmicro_path_validation_text').html('No image channel file found under this path.')
}
} else {
d3.select("#" + 'mcmicro_path_validation_text').html('Please provide a valid path.')
}
}

Expand All @@ -53,11 +53,11 @@ async function checkCSVFileExistence(caller) {
const self = this;

//get folder path from the input text field
let maskSelectionField = d3.select('#'+ caller.id);
let maskSelectionField = d3.select('#' + caller.id);
let mask = maskSelectionField.property("value");

//get selected mask type from the selection field
let pathInputField = d3.select('#'+ 'mcmicro_output_folder');
let pathInputField = d3.select('#' + 'mcmicro_output_folder');
let path = pathInputField.property("value");

try {
Expand All @@ -71,15 +71,15 @@ async function checkCSVFileExistence(caller) {
body: JSON.stringify(
{
path: path,
mask : mask
mask: mask
}
)
});
let response_data = await response.json();
if (response_data == true){
if (response_data == true) {
maskSelectionField.attr("class", "form-control is-valid");
maskSelectionField.node().setCustomValidity('');
}else{
} else {
d3.select("#" + 'mcmicro_mask_validation_text').html('No corresponding csv file found.')
maskSelectionField.attr("class", "form-control is-invalid");
maskSelectionField.node().setCustomValidity('Invalid');
Expand All @@ -95,9 +95,12 @@ async function checkChannelExistence(caller) {
const self = this;

//get folder path from the input text field
let pathInputField = d3.select('#'+ caller.id);
let pathInputField = d3.select('#' + caller.id);
let path = pathInputField.property("value");

let imageSelectionField = d3.select('#' + caller.id);
let image = imageSelectionField.property("value");

try {
//check if corresponsindg csv file exists
let response = await fetch('/check_mc_channel_file_existence', {
Expand All @@ -109,14 +112,15 @@ async function checkChannelExistence(caller) {
body: JSON.stringify(
{
path: path,
image: image
}
)
});
let response_data = await response.json();
if (response_data == true){
if (response_data == true) {
pathInputField.attr("class", "form-control is-valid");
pathInputField.node().setCustomValidity('');
}else{
} else {
// d3.select("#" + 'mcmicro_path_validation_text').html('No image channel file found under this path.')
pathInputField.attr("class", "form-control is-invalid");
pathInputField.node().setCustomValidity('No image channel file found under this path.');
Expand All @@ -132,11 +136,11 @@ async function checkChannelExistence(caller) {
//check if path exists (mcmicro naming specific)
async function checkFileExistence(caller) {
const self = this;
let inputField = d3.select('#'+ caller.id);
let inputField = d3.select('#' + caller.id);
//get segmentation folder path from the input text field
let path = inputField.property("value");

try {
try {
//get available segmentation masks in mcmicro directory from server
let response = await fetch('/check_file_existence', {
method: 'POST',
Expand All @@ -151,12 +155,12 @@ try {
)
});
let response_data = await response.json();
if (response_data == true){
if (response_data == true) {
inputField.attr("class", "form-control is-valid");
inputField.node().setCustomValidity('');
}else{
inputField.attr("class", "form-control is-invalid");
inputField.node().setCustomValidity('Invalid');
} else {
inputField.attr("class", "form-control is-invalid");
inputField.node().setCustomValidity('Invalid');
}
return response_data;
} catch (e) {
Expand All @@ -169,11 +173,11 @@ try {
//check if path exists (mcmicro naming specific)
async function checkDatasetExistence(caller) {
const self = this;
let inputField = d3.select('#'+ caller.id);
let inputField = d3.select('#' + caller.id);
//get segmentation folder path from the input text field
let datasetName = inputField.property("value");

try {
try {
//get available segmentation masks in mcmicro directory from server
let response = await fetch('/dataset_existence', {
method: 'POST',
Expand All @@ -188,12 +192,12 @@ try {
)
});
let response_data = await response.json();
if (response_data == false){
if (response_data == false) {
inputField.attr("class", "form-control is-valid");
inputField.node().setCustomValidity('');
}else{
inputField.attr("class", "form-control is-invalid");
inputField.node().setCustomValidity('Dataset name already exists. Choose a different name.');
} else {
inputField.attr("class", "form-control is-invalid");
inputField.node().setCustomValidity('Dataset name already exists. Choose a different name.');
}
// inputField.node().reportValidity();
return response_data;
Expand All @@ -205,11 +209,11 @@ try {
//check if path exists (mcmicro naming specific)
async function checkPathExistence(caller) {
const self = this;
let inputField = d3.select('#'+ caller.id);
let inputField = d3.select('#' + caller.id);
//get segmentation folder path from the input text field
let path = inputField.property("value");

try {
try {
//get available segmentation masks in mcmicro directory from server
let response = await fetch('/check_path_existence', {
method: 'POST',
Expand All @@ -224,12 +228,12 @@ try {
)
});
let response_data = await response.json();
if (response_data == true){
if (response_data == true) {
inputField.attr("class", "form-control is-valid");
inputField.node().setCustomValidity('');
}else{
inputField.attr("class", "form-control is-invalid");
inputField.node().setCustomValidity('Path does not exist.');
} else {
inputField.attr("class", "form-control is-invalid");
inputField.node().setCustomValidity('Path does not exist.');
}
// inputField.node().reportValidity();
return response_data;
Expand All @@ -239,17 +243,56 @@ try {
}

//get a list of available files in a folder (mcmicro naming specific)
async function fillSegFileList() {
async function fillCSVFileList() {
const self = this;

//get segmentation folder path from the input text field
let path = d3.select('#mcmicro_output_folder').property("value");

//remove old selection options as soon as path changes
var select_field = document.getElementById("mcmicro_masks");
while (select_field.length > 0) {
select_field.remove(0);


try {
//get available segmentation masks in mcmicro directory from server
let response = await fetch('/get_mc_csv_file_list', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(
{
path: path,
}
)
});
let response_data = await response.json();
var select_field = document.getElementById("mcmicro_masks");
select_field.innerHTML = "";
//fill select form field with new options
response_data.forEach(function (option_value) {
var option = document.createElement("option");
option.text = option_value;
option.value = option_value;
select_field.add(option);
})

//return the filled field
return response_data;
} catch (e) {
console.log("Error Getting Segmentation File List", e);
}
}

//get a list of available files in a folder (mcmicro naming specific)
async function fillImgFileList() {
const self = this;

//get segmentation folder path from the input text field
let path = d3.select('#mcmicro_output_folder').property("value");




try {
//get available segmentation masks in mcmicro directory from server
Expand All @@ -266,9 +309,53 @@ async function fillSegFileList() {
)
});
let response_data = await response.json();
//remove old selection options as soon as path changes
var select_field = document.getElementById("mcmicro_images");
select_field.innerHTML = "";
//fill select form field with new options
response_data.forEach(function (option_value) {
var option = document.createElement("option");
option.text = option_value;
option.value = option_value;
select_field.add(option);
})

//return the filled field
return response_data;
} catch (e) {
console.log("Error Getting Channel File List", e);
}
}

//get a list of available files in a folder (mcmicro naming specific)
async function fillSegFileList() {
const self = this;

//get segmentation folder path from the input text field
let path = d3.select('#mcmicro_output_folder').property("value");

//remove old selection options as soon as path changes


try {
//get available segmentation masks in mcmicro directory from server
let response = await fetch('/get_mc_segmentation_file_list', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(
{
path: path,
}
)
});
let response_data = await response.json();
var select_field = document.getElementById("mcmicro_seg");
select_field.innerHTML = "";
//fill select form field with new options
response_data.forEach(function(option_value){
response_data.forEach(function (option_value) {
var option = document.createElement("option");
option.text = option_value;
option.value = option_value;
Expand All @@ -282,6 +369,7 @@ async function fillSegFileList() {
}
}


let uploadPercentage = 0;
let ajaxForm = $('form').ajaxForm({
uploadProgress: function (event, position, total, percentComplete) {
Expand Down
Loading

0 comments on commit dbf4a12

Please sign in to comment.