Start on WASM integration and immediately find we have no good way to load it

Author: adamnovak

src/APIInterface.mjs

@@ -12,6 +12,8 @@ export class APIInterface {
 
   // Returns files used to determine what options are available in the track picker.
   // Returns object with keys: files, bedFiles.
+  // files holds an array of objects like {  name: string; type: filetype;}, where filetype is a file type like "graph".
+  // bedFiles just holds an array of strings.
   // cancelSignal is an AbortSignal that can be used to cancel the request.
   async getFilenames(cancelSignal) {
     throw new Error("getFilenames function not implemented");

src/GBZBaseAPI.mjs

@@ -1,11 +1,32 @@
 import { APIInterface } from "./APIInterface.mjs";
 
+// TODO: The Webpack way to get the WASM would be something like:
+//import QueryWasm from "gbz-base/target/wasm32-wasi/release/query.wasm";
+// if the export mapping is broken, or
+//import QueryWasm from "gbz-base/query.wasm";
+// if it is working. In Jest, not only is the export mapping not working, but
+// also it can't get us a fetch-able string from the import like Webpack does.
+// So we will need some fancy Jest config to mock the WASM file into a js
+// module that does *something*, and also to mock fetch() into something that
+// can fetch it. Or else we need to hide that all behind something that can
+// fetch the WASM on either Webpack or Jest with its own strategies/by being
+// swapped out.
+
 /**
  * API implementation that uses tools compiled to WebAssembly, client-side.
  */
 export class GBZBaseAPI extends APIInterface {
   constructor() {
     super();
+
+    // We can take user uploads, in which case we need to hold on to them somewhere.
+    // This holds all the file objects.
+    this.files = [];
+
+    // We need to index all their names by type.
+    this.filesByType = {};
+
+    // We need to set up our WASM
   }
 
   async getChunkedData(viewTarget, cancelSignal) {
@@ -18,16 +39,46 @@ export class GBZBaseAPI extends APIInterface {
   }
 
   async getFilenames(cancelSignal) {
-    return {
+    // Set up an empty response.
+    let response = {
       files: [],
       bedFiles: []
     };
+
+    for (let type of this.filesByType) {
+      if (type == "bed") {
+        // Just send all these files in bedFiles.
+        response.bedFiles = this.filesByType[type];
+      } else {
+        for (let fileName of this.filesByType[type]) {
+          // We sens a name/type record for each non-BED file
+          response.files.push({name: fileName, type: type});
+        }
+      }
+    }
+
+    return response;
   }
 
   subscribeToFilenameChanges(handler, cancelSignal) {
     return {};
   }
 
+  async putFile(fileType, file, cancelSignal) {
+    // We track files just by array index.
+    let fileName = this.files.length.toString();
+    // Just hang on to the File object.
+    this.files.push(file);
+
+    if (this.filesByType[fileType] === undefined) {
+      this.filesByType[fileType] = [];
+    }
+    // Index the name we produced by type.
+    this.filesByType[fileType].push(fileName);
+
+    return fileName;
+  }
+
   async getBedRegions(bedFile, cancelSignal) {
     return {
       bedRegions: []

src/GBZBaseAPI.test.js

@@ -0,0 +1,33 @@
+import { GBZBaseAPI } from './GBZBaseAPI.mjs';
+
+import fs from "fs-extra";
+
+it("can be constructed", () => {
+  let api = new GBZBaseAPI();
+});
+
+it("can have a file uploaded", async () => {
+  let api = new GBZBaseAPI();
+
+  // We need to make sure we make a jsdom File (which is a jsdom Blob), and not
+  // a Node Blob, for our test file. Otherwise it doesn't work with jsdom's
+  // upload machinery.
+  // See for example <https://github.com/vitest-dev/vitest/issues/2078> for
+  // background on the many flavors of Blob.
+  const fileData = await fs.readFileSync("exampleData/cactus.vg");
+  // Since a Node Buffer is an ArrayBuffer, we can use it to make a jsdom File.
+  // We need to put the data block in an enclosing array, or else the block
+  // will be iterated and each byte will be stringified and *those* bytes will
+  // be uploaded.
+  const file = new window.File([fileData], "cactus.vg", {
+    type: "application/octet-stream",
+  });
+  
+  // Set up for canceling the upload
+  let controller = new AbortController();
+
+  let uploadName = await api.putFile("graph", file, controller.signal);
+
+  expect(uploadName).toBeTruthy(); 
+  
+});

src/components/HeaderForm.js

@@ -654,6 +654,10 @@ class HeaderForm extends Component {
 
     try {
       let fileName = await this.api.putFile(fileType, file, this.cancelSignal);
+      if (fileType == "graph") {
+        // Refresh the graphs right away
+        this.getMountedFilenames();
+      }
       this.setUploadInProgress(false);
       return fileName;
     } catch (e) {