From d0e13781b5c594bb926fa13f77ffd004435e5088 Mon Sep 17 00:00:00 2001 From: Rob Currie Date: Fri, 6 Dec 2024 09:43:39 -0700 Subject: [PATCH] Fix sample file loading to work on any base url, add loading libraries notifcation --- main.js | 58 ++++++++++++++++++++++++++++--------------------------- worker.js | 1 + 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/main.js b/main.js index 6cb2268..da73c48 100644 --- a/main.js +++ b/main.js @@ -146,36 +146,38 @@ async function main() { event.target.files[0].name; }); - // DEBUGGING - // If localhost then fill in a remote file so we can just hit enter vs. selecting each reload - // and set the percentage to 1% for quick testing - if (location.host === "localhost:3000") { - async function urlToFile(url, fileName) { - const response = await fetch(url); - const blob = await response.blob(); - const file = new File([blob], fileName, { type: blob.type }); - return file; - } - - const fileUrl = "http://localhost:3000/sample.h5ad"; // Replace with actual file URL - const fileName = "sample.h5ad"; // Replace with desired file name - - try { - const file = await urlToFile(fileUrl, fileName); - console.log("File:", file); + // Fill in a sample file so a user can just hit predict to try out + async function urlToFile(url, fileName) { + const response = await fetch(url); + const blob = await response.blob(); + const file = new File([blob], fileName, { type: blob.type }); + return file; + } - // You can now use this file as if it was selected from an HTML input element - // For example, you can set it to an input element - const fileInput = document.getElementById("file_input"); - const dataTransfer = new DataTransfer(); - dataTransfer.items.add(file); - fileInput.files = dataTransfer.files; + const sitePath = + window.location.origin + + window.location.pathname.slice( + 0, + window.location.pathname.lastIndexOf("/") + ); + const fileUrl = `${sitePath}/sample.h5ad`; + const fileName = "sample.h5ad"; - // Update the label to show the file name - document.getElementById("file_input_label").innerText = file.name; - } catch (error) { - console.error("Error:", error); - } + try { + const file = await urlToFile(fileUrl, fileName); + console.log("File:", file); + + // You can now use this file as if it was selected from an HTML input element + // For example, you can set it to an input element + const fileInput = document.getElementById("file_input"); + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(file); + fileInput.files = dataTransfer.files; + + // Update the label to show the file name + document.getElementById("file_input_label").innerText = file.name; + } catch (error) { + console.error("Error:", error); } // Add slider event handler to update displayed cell count and percentage diff --git a/worker.js b/worker.js index 37b8cc7..a1ac289 100644 --- a/worker.js +++ b/worker.js @@ -47,6 +47,7 @@ function inflateGenes( self.onmessage = async function (event) { try { + self.postMessage({ type: "status", message: "Loading libraries" }); const { FS } = await h5wasm.ready; console.log("h5wasm loaded");