Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

40 retrieve config files from GitHub to display as default #46

Merged
merged 9 commits into from
Apr 10, 2023
Merged

40 retrieve config files from GitHub to display as default #46

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a138583
add helper functions to populate config file from github
vulongphan Apr 6, 2023
c01da95
update readConfigFile
vulongphan Apr 6, 2023
178d05b
update style for selector
vulongphan Apr 6, 2023
8f7cdce
update styling for config file selector
vulongphan Apr 6, 2023
d5d2140
refactor sendRequest and config-related functions
vulongphan Apr 7, 2023
3fc39dc
add comments
vulongphan Apr 7, 2023
bb95f78
change id from snake case to camel case
vulongphan Apr 7, 2023
45f21e5
update configFileHandler filename
vulongphan Apr 8, 2023
44c593a
change config file handler filename
vulongphan Apr 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,7 @@ section textarea {
resize: none;
}

.upload input {
.upload input, .upload select{
float: left;
margin: 3px 0px 2px 30px;
}
Expand Down
37 changes: 24 additions & 13 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ var main = function () {
view([$("#download"), $("#linktext"), $("#listing")], hideComponents);
findStorage();
$(".upload").show();
populateConfigFileSelector();
};

function hideComponents(ComponentsList) {
Expand Down Expand Up @@ -211,22 +212,32 @@ function loadFile(file) {

//Read the config file
var readConfigFile = async function () {
var x = document.getElementById("configFile");
var input = "";

if ("files" in x) {
if (x.files.length == 0) {
var morphoLabel = document.getElementById("labelspMorphoFeats");
morphoLabel.style.visibility = "hidden";
txt = "Select config file.";
} else {
var file = x.files[0];
if (!alreadyReadConfigFiles.includes(file)) {
alreadyReadConfigFiles.push(file);
await loadFile(file);
var selectList = document.getElementById("config_file_selector");
var file;
// default config file
if (selectList.selectedIndex > 0 && selectList.selectedIndex < selectList.options.length - 1) {
file = defaultConfigFiles[selectList.selectedIndex-1];
}
else if (selectList.selectedIndex == selectList.options.length - 1){ // user uploaded config file
var x = document.getElementById("configFile");
var input = "";
if ("files" in x) {
if (x.files.length == 0) {
var morphoLabel = document.getElementById("labelspMorphoFeats");
morphoLabel.style.visibility = "hidden";
txt = "Select config file.";
return;
} else {
file = x.files[0];
}
}
}
else return; // no config file selected

if (!alreadyReadConfigFiles.includes(file)) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you add a comment explaining what this does?

Copy link
Collaborator Author

@vulongphan vulongphan Apr 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The condition check if (!alreadyReadConfigFiles.includes(file)){} is from the original code. I guess the purpose is to only read each config file once. However, this does not seem necessary at the moment since we can only read maximum of 1 config file in the upload screen before going to the edit screen. When we want to go back to upload screen again to upload another config file, the window reloads and alreadyReadConfigFiles array is reset to empty.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean add a comment in the code, so that when someone wants to go over the code, instead of unpacking code blocks, they read comments.

alreadyReadConfigFiles.push(file);
await loadFile(file);
}
return;
};

Expand Down
74 changes: 73 additions & 1 deletion viewtree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,11 @@
<div class="container" style="width:100%">
<section id="upload3" class="upload" >
<p>Optional Config File:</p>
<input style="float:left" type="file" value="catib.config" name="configFile" id="configFile"/>
<select id="config_file_selector">
<option>Choose File</option>
<option>Upload your config file</option>
</select>
<input style="float:left; display:none" type="file" name="configFile" id="configFile"/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When defining IDs sometimes camel case is used, while other times snake case is used. Please be consistent.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will consistently define ids in camel case (as is with the original code)

</section>
</div>

Expand Down Expand Up @@ -150,6 +154,74 @@
<script src="scripts/saveSvgAsPng.js"></script>
<script src="scripts/underscore-min.js"></script>
<script src="scripts/cycle.js"></script>
<script>
var defaultConfigFiles = [];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move this to a JS file (preferably a new file).


function populateConfigFileSelectorHelper(files) {
let option;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add comments explaining what each of these functions does?

let selectList = document.getElementById("config_file_selector");
let lastOption = selectList.lastElementChild;
// pop last child element of selectList
selectList.removeChild(lastOption);
for (let file of files) {
option = document.createElement("option");
option.text = file.name;
selectList.appendChild(option);
};
selectList.appendChild(lastOption);
// set the default value to the first option
selectList.selectedIndex = 0;
}

function retrieveConfigFiles() {
return new Promise((resolve, reject) => {
let fileObjects = [];
let rsp;
sendRequest('GET', 'https://api.github.com/repos/CAMeL-Lab/palmyra/contents/palmyraSampleFiles/config').then(async rsp => {
let files = JSON.parse(rsp);
for (let file of files) {
rsp = await sendRequest('GET', file.download_url);
let fileObject = new File([rsp], file.name, {type: "text/plain"});
fileObjects.push(fileObject);
}
resolve(fileObjects);
}).catch(err => {
reject(err);
});
})
}

function populateConfigFileSelector() {
let selectList = document.getElementById("config_file_selector");
selectList.onchange = () => {
if (selectList.selectedIndex == selectList.options.length - 1) document.getElementById("configFile").style.display = "block";
else document.getElementById("configFile").style.display = "none"
}
retrieveConfigFiles().then(files => {
defaultConfigFiles = files;
populateConfigFileSelectorHelper(files);
}).catch(err => {
console.log(err);
});
}

function sendRequest(method, url, headerName="", headerValue="") {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(method, url);
if (headerName !== "" && headerValue !== "") xhr.setRequestHeader(headerName, headerValue);
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.responseText);
}
else {
reject(xhr.statusText);
}
};
xhr.send();
});
}
</script>
<script src="main.js"></script>

<script>
Expand Down