search

GMOD / Apollo3

JBrowse 2 plugin for editing annotations on an Apollo server
Apache License 2.0
7 stars 4 forks source link

Add progress to file uploading #410

Open garrettjstevens opened 3 months ago

garrettjstevens commented 3 months ago

In the CLI code, when we upload a file, the request body is a stream, and so we're able to listen in on the stream and output progress. We should do the same where possible in the UI. Currently in the UI, the request body is FormData.

Reference code for the CLI can be found here: https://github.com/GMOD/Apollo3/blob/2698455c22171c30d14d8f2104d311af05fedf87/packages/apollo-cli/src/utils.ts#L453-L505

This change in the UI will need to happen in packages/jbrowse-plugin-apollo/src/components/AddAssembly.tsx and packages/jbrowse-plugin-apollo/src/components/ImportFeatures.tsx.

To update the progress percentage, call jobsManager.update(job.name, 'message', percent). jobsManager and job already exist in those files, so you won't need to create them.

Unfortunately, currently only Chrome (and other Chromium-based browsers) allow streams in request bodies. So we'll need to do feature detection and fall back to the current method if the browser doesn't support it.

I found some code here that should work to detect if the browser supports streams in request bodies: https://github.com/web-platform-tests/wpt/blob/d90f52b5215dca9fd334314b7353a4b57b4719c9/fetch/api/basic/request-upload.h2.any.js#L130-L142 If supported is true after running that code, it should use streams, otherwise fall back to FormData.

garrettjstevens commented 3 months ago

More clear example of feature detection: https://developer.chrome.com/docs/capabilities/web-apis/fetch-streaming-requests#feature_detection

garrettjstevens commented 2 months ago

Since this can only be done on HTTP2, we'll need to see if it's possible for our server to support HTTP2. We have a couple different options to try this.

One option is to use the spdy package to add HTTP2 support to express, as is described here.

The other option is to use fastify instead of express. This is supported natively by NestJS as is described here, but with the http2 option set as new FastifyAdapter({http2: true}).

In either case, we should test this locally to see if it works in a development environment without a key and cert file.