Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to include tabix-js directly in html #146

Closed
bw2 opened this issue Aug 6, 2024 · 9 comments
Closed

How to include tabix-js directly in html #146

bw2 opened this issue Aug 6, 2024 · 9 comments

Comments

@bw2
Copy link

bw2 commented Aug 6, 2024

Hi, would it be possible to build a single minified tabix-js source and make it available via CDN so it can be added to an html page without requiring an npm build?
@cmdcolin
Copy link
Contributor

cmdcolin commented Aug 6, 2024

currently we don't have a single minified source for tabix. we do have one for cram-js though so we could consider making one for tabix....

@bw2
Copy link
Author

bw2 commented Aug 6, 2024 •
edited
Loading

thanks. I would like to use it on spliceai-lookup.

@cmdcolin
Copy link
Contributor

cmdcolin commented Aug 6, 2024

i copied the cram approach here in this PR #147

there is a gzip download example. it is a "UMD" bundle that sets a variable called "gmodTABIX"

an example source code using it

<html>
  <head>
    <script src="tabix-bundle.js"></script>
    <script type="text/javascript">
      ;(async () => {
        const { TabixIndexedFile } = window.gmodTABIX

        const tbiIndexed = new TabixIndexedFile({
          url: 'yourfile.vcf.gz',
          tbiUrl: 'yourfile.vcf.gz.tbi',
        })
        const lines = []
        await tbiIndexed.getLines('ctgA', 0, 10000, line =>
          lines.push(line),
        )
        document.getElementById('output').innerHTML = lines.join('\n')
      })()
    </script>
  </head>
  <body>
    <h1>Hello world</h1>
    <pre id="output" />
  </body>
</html>

misc note: note that url and tbiUrl were added on this branch, not on master currently. that avoids needing to bundle a separate generic-filehandle bundle.

attachment:
tabix-bundle.js.gz
is like this

@cmdcolin
Copy link
Contributor

cmdcolin commented Aug 6, 2024

(note that if something like that works for you, then we can merge and then it can be available from the unpkg cdn which hosts stuff that is published on npm)

@bw2
Copy link
Author

bw2 commented Aug 6, 2024

Thanks for the quick response and example!
I'm able to run the test example.

Ps. Currently, when I try to point it at a tabixed text file in a public google storage bucket, I get a CORS error.
image
image

even though the data file and tabix index exist.

I will see if I can troubleshoot this. For now, I've tried running

gcloud storage buckets update gs://spliceai-lookup-reference-data

[
{
"origin": ["*"],
"method": ["GET"],
"responseHeader": ["Content-Type"],
"maxAgeSeconds": 3600
}
]

but still get the error.

@cmdcolin
Copy link
Contributor

cmdcolin commented Aug 6, 2024

CORS errors are tricky. it generally comes down to a server side config. if you responseHeader is something related to cors you might also need to enable Content-Length and Content-Range...this is an example we use for amazon s3 buckets https://jbrowse.org/docs/cors.html

it is a little more detailed than a typical cors config due to the need for content-length (might be skippable in some cases) and ranges (requires)

@bw2
Copy link
Author

bw2 commented Aug 7, 2024

It works! I needed to change the url from

https://storage.cloud.google.com/bucket-name/file.bed.gz

to

https://storage.googleapis.com/bucket-name/file.bed.gz

Thanks again for your help!

The google bucket CORS config I'm using now is

[
    {
	"origin": ["*"],
	"method": ["GET","POST","HEAD"],
	"responseHeader": ["*"],
	"maxAgeSeconds": 3600,
    }
]

and I set it by running

gsutil cors set config.json  gs://bucket-name

@cmdcolin
Copy link
Contributor

went ahead and merged this PR, you can now get it remotely from remote CDN like unpkg (if interested...certainly can download and vendor it also)

latest https://unpkg.com/@gmod/tabix/dist/tabix-bundle.js
specific version https://unpkg.com/@gmod/tabix@1.5.15/dist/tabix-bundle.js

let me know if you run into any issues :)

@bw2
Copy link
Author

bw2 commented Aug 30, 2024

thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bw2 @cmdcolin