2c:null 2d:["$","title",null,{"children":"VCFremote[Code][YouTube][Web Application][Why Observable?] | Jonas Almeida | Observable"}] 32:T4fe,

VCF_remote^{[Code][YouTube][Web Application][Why Observable?]}

Remote traversal of VCF files. This observable notebook tests in real-time the remote traversal algorithm JavaScript implementation SDK (Sofwtare Development Toolkit). Note this is an in-browser implementation so you can both engage public and private VCF files remotely. As also reviewed in the YouTube video above, the SDK command line interface can be engaged from a web application, from the browser console, or from this notebook. To explore private remote files include a authorized bearer token as a method in the HTTP call.

33:[] 30:{"id":"b9dd7f9d2dd7efbe","slug":"vcf","title":"VCFremote[Code][YouTube][Web Application][Why Observable?]","thumbnail":"c8947a71eb6b77a7187ad9f7821a64e3ad8e01c443ef414669b85184a2524d37","access_level":"public","create_time":"$D2020-10-05T20:12:34.057Z","update_time":"$D2023-01-27T20:11:29.111Z","view_time":null,"first_public_time":"$D2020-10-05T20:12:39.260Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0f2e596d5bd6ef6e","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":"starter_2024"},"version":790,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null}],"members":[{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"VCFremote[Code][YouTube][Web Application][Why Observable?]","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"# Loading Library\nThe vcf.js library can be loaded by any of the three mechanisms: \n1. Script tag loading\n```HTML\n\n```\nThe global Vcf variable is added to the global space. * c = await Vcf(url)* can be used to create a connection to the remote file, which can then be operated, for example, by * q = await c.query('7:151040280')*\n\n* Require (as a CommonJS module)\n```javascript\nV = require(\"https://episphere.github.io/vcf/vcf.js\")\n```\n\nRequire was used in this Observable Notebook. See below how the use of *V.Vcf(url)* is asynchronous by default, as characteristic of reactive notebooks like Observable..\n* ES6 import\n```javascript\nVcf = await(await import('https://episphere.github.io/vcf/export.js')).Vcf\n```\nThis is the most modern and versatile of the module loading routes. For example, it can be used to only load the method(s) that are needed scoped as seen fit.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"## Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"### Load vcf.js\nHere wel'll be loading vcf object as variable ```V```, where the Vcf asynchronous function that will operate remote VCF file can be found. See further below how individual ```v``` connections are created by ```V.Vcf```. See also demonstration in YouTube webcast above for execution of this remote operator in different environments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"V = require(\"https://episphere.github.io/vcf/vcf.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"### Create a local instance of vcf for a remote VCF file\nHere, we create and instance of the remote VCF file operator by providing the URL for the remote volume. Note the input text box below where the URL can be updated, triggering the creation of a new remote operator for *v1*. You can also add new cells defining any number of operators, say *v2*, *v3*, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"viewof url = Inputs.text({\n label: \"URL of remote VCF:\",\n value: \"https://ftp.ncbi.nih.gov/snp/organisms/human_9606/VCF/00-All.vcf.gz\",\n width: \"40em\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"v1 = V.Vcf(url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"### Positions retrieved during searches\nSee webcast for an example. See figure 2 in the manuscript for an illustration of the search procedure.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":575,"value":"remoteRetrievalDiv = {\n let div = DOM.element(\"div\");\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"viewof refreshPlot = Inputs.button([\n [\"refresh plot\", (value) => pltRetrieval()]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"pltRetrieval()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"pltRetrieval = (div = remoteRetrievalDiv) => {\n let trace = {\n x: v1.ii00,\n y: v1.idxx.map((yi) => v1.chrCode.indexOf(yi.chrStart) + 1),\n text: v1.idxx.map(\n (ix) =>\n `Chr: ${ix.chrStart}-${ix.chrEnd}
Pos: ${ix.posStart}-${ix.posEnd}`\n ),\n hovertemplate: \"%{text}\",\n mode: \"markers\",\n type: \"scatter\"\n };\n plt.newPlot(div, [trace], {\n title: `Positions operated on remote VCF file (size:${v1.size})
${url} `,\n width: 600,\n height: 600,\n //height: 700,\n xaxis: {\n title: \"Position in the compressed file (B=billions)\",\n nticks: 20\n },\n yaxis: {\n title: \"Chromossome\",\n tickvals: [...Array(v1.chrCode.length + 1)].map((_, i) => i),\n ticktext: [\"\"].concat(v1.chrCode)\n }\n });\n return \"click button above to refresh plot of positions retrieved during searches done below\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"### Querying for a specific variation at, say, chr`${variation.replace(',',':')}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"viewof variation = Inputs.text({\n label: \"Target Chr:Position:\",\n value: \"5:52520\",\n width: \"6em\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"Q1_1 = v1.query(variation.replace(\":\", \",\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"{\n let div = DOM.element(\"div\");\n div.innerHTML = `

${Q1_1.hit.length} variants found at that location:

`;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"arr2obj = function (x, cols) {\n let y = [];\n x.forEach((xi) => {\n let obj = {};\n cols.forEach((c, j) => {\n obj[c] = xi[j];\n });\n y.push(obj);\n });\n return y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"hitsTable = Inputs.table(arr2obj(Q1_1.hit, v1.cols))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"Closest cache:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":761,"value":"rangeTable2 = Inputs.table(arr2obj(Q1_1.range.dt || Q1_1.range, v1.cols))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"

Plotly library

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"plt = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"