a4ec09b5bbfbaf7c4f40053b24f42f075a5b6b85 chmalee Tue Nov 12 14:23:32 2024 -0800 Lots of changes after meeting, mostly to accomadate hubtools uploads: allow parentDir in upload request, make batch change dropdowns have the right options. TODO: remove type selection all together from UI, make hub name generation not be hardcoded in ui diff --git src/hg/js/hgMyData.js src/hg/js/hgMyData.js index 2c6c995..e4003ce 100644 --- src/hg/js/hgMyData.js +++ src/hg/js/hgMyData.js @@ -655,50 +655,32 @@ let delBtn = document.createElement("button"); delBtn.textContent = "Delete"; delBtn.type = 'button'; delBtn.addEventListener("click", function() { deleteFile(row.fileName, row.fileType, row.hub); }); // click to view hub/file in gb: let viewBtn = document.createElement("button"); viewBtn.textContent = "View in Genome Browser"; viewBtn.type = 'button'; viewBtn.addEventListener("click", function() { viewInGenomeBrowser(row.fileName, row.fileType, row.genome, row.hub); }); - // click to rename file or hub: - let renameBtn = document.createElement("button"); - renameBtn.textContent = "Rename"; - renameBtn.type = 'button'; - renameBtn.addEventListener("click", function() { - console.log("rename btn clicked!"); - }); - - // click to associate this track to a hub - let addToHubBtn = document.createElement("button"); - addToHubBtn.textContent = "Add to hub"; - addToHubBtn.type = 'button'; - addToHubBtn.addEventListener("click", function() { - addFileToHub(row); - }); - container.appendChild(delBtn); container.appendChild(viewBtn); - container.appendChild(renameBtn); - container.appendChild(addToHubBtn); return container; } }, { targets: 3, render: function(data, type, row) { return dataTablePrintSize(data); } }, { targets: 5, render: function(data, type, row) { return dataTablePrintGenome(data); } @@ -905,56 +887,55 @@ } removeBatchSelectsFromDashboard() { let batchSelectDiv = document.getElementById("batch-selector-div"); if (batchSelectDiv) { batchSelectDiv.remove(); } } addBatchSelectsToDashboard() { if (!document.getElementById("batch-selector-div")) { let batchSelectDiv = document.createElement("div"); batchSelectDiv.id = "batch-selector-div"; let batchDbSelect = document.createElement("select"); let batchTypeSelect = document.createElement("select"); - this.createOptsForSelect(batchDbSelect, [{id: "batchChangeDb", name: "batchChangeDb"}]); - this.createOptsForSelect(batchTypeSelect, [{id: "batchChangeType", name: "batchChangeType"}]); + this.createOptsForSelect(batchDbSelect, makeGenomeSelectOptions()); + this.createOptsForSelect(batchTypeSelect, makeTypeSelectOptions()); batchSelectDiv.textContent = "Change options for all files"; batchSelectDiv.appendChild(batchDbSelect); batchSelectDiv.appendChild(batchTypeSelect); batchSelectDiv.style.display = "flex"; batchSelectDiv.style.justifyContent = "center"; - let titleBarText = document.querySelector(".uppy-DashboardContent-title"); - if (titleBarText) { - batchSelectDiv.style.color = getComputedStyle(titleBarText).color; + if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + batchSelectDiv.style.color = "#eaeaea"; } // append the batch changes to the bottom of the file list, for some reason // I can't append to the actual Dashboard-files, it must be getting emptied // and re-rendered or something let uppyFilesDiv = document.querySelector(".uppy-Dashboard-progressindicators"); if (uppyFilesDiv) { uppyFilesDiv.insertBefore(batchSelectDiv, uppyFilesDiv.firstChild); } } } install() { this.uppy.on("file-added", (file) => { // add default meta data for genome and fileType console.log("file-added"); - this.uppy.setFileMeta(file.id, {"genome": defaultDb(), "fileType": defaultFileType(file.name), "hubName": hubNameDefault}); + this.uppy.setFileMeta(file.id, {"genome": defaultDb(), "fileType": defaultFileType(file.name), "parentDir": hubNameDefault}); if (this.uppy.getFiles().length > 1) { this.addBatchSelectsToDashboard(); } }); this.uppy.on("file-removed", (file) => { // remove the batch change selects if now <2 files present if (this.uppy.getFiles().length < 2) { this.removeBatchSelectsFromDashboard(); } }); this.uppy.on("dashboard:modal-open", () => { // check if there were already files chosen from before: if (this.uppy.getFiles().length > 2) { this.addBatchSelectsToDashboard(); @@ -1002,31 +983,31 @@ return h( 'select', {onChange: e => { if (e.target.value === "Auto-detect from extension") { onChange(detectFileType(file.name)); } else { onChange(e.target.value); } }}, makeTypeSelectOptions().map( (typeObj) => { return h('option', typeObj, typeObj.label); }) ); }, }); fields.push({ - id: 'hubName', + id: 'parentDir', name: 'Hub Name', render: ({value, onChange, required, form}, h) => { return h('input', {type: 'text', required: required, form: form, value: hubNameDefault, } ); }, }); return fields; }, restricted: {requiredMetaFields: ["genome", "fileType"]}, closeModalOnClickOutside: true, @@ -1040,31 +1021,31 @@ retryDelays: null, }; uppy.use(Uppy.Dashboard, uppyOptions); uppy.use(Uppy.Tus, tusOptions); uppy.use(BatchChangePlugin, {target: Uppy.Dashboard}); uppy.on('upload-success', (file, response) => { const metadata = file.meta; const d = new Date(metadata.lastModified); newReqObj = { "uploadTime": Date.now(), "lastModified": d.toJSON(), "fileName": metadata.fileName, "fileSize": metadata.fileSize, "fileType": metadata.fileType, "genome": metadata.genome, - "hub": metadata.hubName, + "parentDir": metadata.parentDir, }; addNewUploadedFileToTable(newReqObj); }); } return { init: init, uiState: uiState, }; }()); // when a user reaches this page from the back button we can display our saved state // instead of sending another network request window.onpopstate = function(event) { event.preventDefault();