0f349359a8bebbd67c7bd7bb732285dee71905fc
chmalee
  Tue May 7 08:43:51 2024 -0700
Start of requiring hub,genome,and file type with each file submission

diff --git src/hg/js/hgMyData.js src/hg/js/hgMyData.js
index dff2ea5..0882dd3 100644
--- src/hg/js/hgMyData.js
+++ src/hg/js/hgMyData.js
@@ -193,54 +193,95 @@
         };
 
         let onError = function(err) {
             removeCancelAllButton();
             if (err.originalResponse !== null) {
                 alert(err.originalResponse._xhr.responseText);
             } else {
                 alert(err);
             }
         };
 
         let onProgress = function(bytesSent, bytesTotal) {
             this.updateProgress((bytesSent / bytesTotal) * 100);
         };
 
+        let createdHubs = {}; // object of {name, db} objects keyed by file names
+        let allSameHub = true; // by default, for multiple files, put them in the same hub
+        let getOrCreateHub = function(fileName) {
+            let valueStr = document.getElementById(`${fileName}#hubInput`).selectedOptions[0].value;
+            if (valueStr !== "Create New") {
+                return valueStr;
+            }
+            let hubName = "test"; // default to test
+            let db = "hg38";
+            // create a dialog:
+            let dialog = document.createElement("dialog");
+            dialog.id = "hubCreate";
+            let closeBtn = document.createElement("button");
+            closeBtn.textContent = "Create Hub";
+            let cancelBtn = document.createElement("button");
+            cancelBtn.textContent = "Cancel";
+            dialog.appendChild(closeBtn);
+            dialog.appendChild(cancelBtn);
+            document.body.appendChild(dialog);
+
+            // open the dialog in modal mode to block the rest of the page:
+            if (allSameHub)
+                dialog.showModal();
+
+            // on close update the right variables
+            closeBtn.addEventListener("click", () => {
+                createdHubs[fileName] = {"name": hubName, "db": db};
+                dialog.close();
+            });
+            // on cancel do nothing and don't submit:
+            cancelBtn.addEventListener("click", () => {
+                dialog.close();
+            });
+        };
+
         for (let f in uiState.toUpload) {
             file = uiState.toUpload[f];
             if (useTus) {
                 let progMeter = makeNewProgMeter(file.name);
                 let tusOptions = {
                     endpoint: tusdServer,
                     metadata: {
                         filename: file.name,
-                        fileType: file.type,
-                        fileSize: file.size
+                        fileSize: file.size,
+                        fileType: document.getElementById(`${file.name}#typeInput`).selectedOptions[0].value,
+                        hub: getOrCreateHub(file.name),
+                        genome: document.getElementById(`${file.name}#genomeInput`).selectedOptions[0].value,
                     },
                     onProgress: onProgress.bind(progMeter),
                     onBeforeRequest: onBeforeRequest,
                     onSuccess: onSuccess.bind(null, file),
                     onError: onError,
                     retryDelays: [1000],
                 };
                 // TODO: get the uploadUrl from the tusd server
                 // use a pre-create hook to validate the user
                 // and get an uploadUrl
+                if (tusOptions.metadata.hub !== null)  {
                     let tusUpload = new tus.Upload(file, tusOptions);
                     uiState.pendingQueue.push([tusUpload, file]);
                     tusUpload.start();
                 } else {
+                    break; // cancel button was clicked when creating a hub, stop uploads for now
+                }
+            } else {
                 // make a new XMLHttpRequest for each file, if tusd-tusclient not supported
                 new sendFile(file);
             }
         }
         addCancelAllButton();
         return;
     }
 
     function clearPickedFiles() {
         while (uiState.pickedList.firstChild) {
             uiState.pickedList.removeChild(uiState.pickedList.firstChild);
         }
         uiState.input = createInput();
         uiState.toUpload = {};
         togglePickStateMessage(true);
@@ -268,62 +309,97 @@
     }
 
     function removeClearSubmitButtons() {
         let btn = document.getElementById("clearPicked");
         btn.parentNode.removeChild(btn);
         btn = document.getElementById("submitPicked");
         btn.parentNode.removeChild(btn);
     }
 
     function makeGenomeSelect(formName, fileName) {
         let genomeInp = document.createElement("select");
         genomeInp.classList.add("genomePicker");
         genomeInp.name = `${fileName}#genomeInput`;
         genomeInp.id = `${fileName}#genomeInput`;
         genomeInp.form = formName;
+        let labelChoice = document.createElement("option");
+        labelChoice.label = "Choose Genome";
+        labelChoice.value = "Choose Genome";
+        labelChoice.selected = true;
+        labelChoice.disabled = true;
+        genomeInp.appendChild(labelChoice);
+        let choices = ["Human hg38", "Human T2T", "Human hg19", "Mouse mm39", "Mouse mm10"];
+        choices.forEach( (e) =>  {
+            let choice = document.createElement("option");
+            choice.id = e;
+            choice.label = e;
+            choice.value = e;
+            genomeInp.appendChild(choice);
+        });
         return genomeInp;
     }
 
     function makeTypeSelect(formName, fileName) {
         let typeInp = document.createElement("select");
         typeInp.classList.add("typePicker");
         typeInp.name = `${fileName}#typeInput`;
         typeInp.id = `${fileName}#typeInput`;
+        typeInp.form = formName;
+        let labelChoice = document.createElement("option");
+        labelChoice.label = "Choose File Type";
+        labelChoice.value = "Choose File Type";
+        labelChoice.selected = true;
+        labelChoice.disabled = true;
+        typeInp.appendChild(labelChoice);
         let choices = ["hub.txt", "bigBed", "bam", "vcf", "bigWig"];
         choices.forEach( (e) =>  {
             let choice = document.createElement("option");
             choice.id = e;
             choice.label = e;
             choice.value = e;
             typeInp.appendChild(choice);
         });
-        typeInp.form = formName;
         return typeInp;
     }
 
     function makeHubSelect(formName, fileName) {
         let hubInp = document.createElement("select");
         hubInp.classList.add("hubPicker");
         hubInp.name = `${fileName}#hubInput`;
         hubInp.id = `${fileName}#hubInput`;
         hubInp.form = formName;
+        let labelChoice = document.createElement("option");
+        labelChoice.label = "Choose Hub";
+        labelChoice.value = "Choose Hub";
+        labelChoice.selected = true;
+        labelChoice.disabled = true;
+        hubInp.appendChild(labelChoice);
+        let choices = ["Create New", "temp"];
+        choices.forEach( (e) =>  {
+            let choice = document.createElement("option");
+            choice.id = e;
+            choice.label = e;
+            choice.value = e;
+            hubInp.appendChild(choice);
+        });
+        return hubInp;
     }
 
     function makeFormControlsForFile(li, formName, fileName) {
         typeInp = makeTypeSelect(formName, fileName);
         genomeInp = makeGenomeSelect(formName, fileName);
-        hubInp = makeGenomeSelect(formName, fileName);
+        hubInp = makeHubSelect(formName, fileName);
         li.append(typeInp);
         li.append(genomeInp);
         li.append(hubInp);
     }
 
     function listPickedFiles() {
         // let the user choose files:
         if (uiState.input.files.length === 0) {
             console.log("not input");
             return;
         } else {
             let displayList;
             let displayListForm = document.getElementsByClassName("pickedFilesForm");
             if (displayListForm.length === 0) {
                 displayListForm = document.createElement("form");