2a:null 2b:["$","title",null,{"children":"Gene annotations autocomplete-like widget | Alex Reynolds | Observable"}] 31:T5fc,class Request { constructor(url, options = {}) { this._url = url; this._options = options; } contentType(contentType) { return this.option("contentType", contentType); } debug() { return this.option("debug", true); } headers(headers) { return this.option("headers", headers); } method(method) { return this.option("method", method); } path(path) { return new Request(this.url() + path, this.options()); } query(params) { return this.option("params", params); } queryString() { return this.query() ? _encodeParams(this.query()) : ""; } body(body) { return this.option("body", body); } mode(mode) { return this.option("mode", mode); } option(key, value) { if (!value) return this._options[key]; this._options[key] = value; return this; } options(options) { if (!options) return this._options; this._options = options; return this; } url(url) { if (!url) return this._url; this._url = url; return this; } async json() { return (await this.perform()).json(); } async perform() { const url = this.url() + (this.query() ? "?" + this.queryString() : ""); //this._log((this.method() || 'get').toUpperCase(), url) //this._log('Headers', this.headers()) //this._log('Options', this.options()) const response = await fetch(url, this.options()); //this._log('Response', response.getContentText()) //return new Response(response) return response; } }32:[] 2e:{"id":"633b4311921f5683","slug":"gene-annotations-autocomplete-like-widget","title":"Gene annotations autocomplete-like widget","thumbnail":"db78231a2b47dc5556187d2cc08d451fc48bc35ce2ca770feab2ad16cf033735","access_level":"public","create_time":"$D2021-06-04T22:53:49.900Z","update_time":"$D2021-08-05T19:13:29.011Z","view_time":null,"first_public_time":"$D2021-06-05T00:01:53.046Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c37303cdd0850875","login":"alexpreynolds","name":"Alex Reynolds","avatar_url":"https://avatars-next.observableusercontent.com/d65c5655ec5460fd3f3e991b39388f7f7bc6fd994a450ca1cd6723004caa728c","tier":"starter_2024"},"version":226,"publish_version":226,"role":null,"authored":false,"authors":[{"type":"individual","id":"2e14005bda844aa3","login":"alexpreynolds","name":"Alex Reynolds","avatar_url":"https://avatars-next.observableusercontent.com/d65c5655ec5460fd3f3e991b39388f7f7bc6fd994a450ca1cd6723004caa728c","tier":null}],"members":[{"type":"individual","id":"2e14005bda844aa3","login":"alexpreynolds","name":"Alex Reynolds","avatar_url":"https://avatars-next.observableusercontent.com/d65c5655ec5460fd3f3e991b39388f7f7bc6fd994a450ca1cd6723004caa728c","tier":null,"role":"editor"},{"type":"individual","id":"90bdd7dca1feecc2","login":"jquon","name":"Jacob Quon","avatar_url":"https://avatars-next.observableusercontent.com/f6707dd7ed7f40c5efa1ef7a6ce94d2a177d885ebda261fe6d9d919a9de4bcc6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Gene annotations autocomplete-like widget","cells":[{"id":0,"value":"# Gene annotations autocomplete-like widget","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"md`As you modify the gene prefix, the contents of the gene selection pull-down menu will change. Select the desired gene and click on \"Select gene\" to retrieve that gene's genomic interval. \n\nThe code block for the genomic interval shows the properties of the selected hit, used to obtain chromosome, start, and stop coordinates. \n\nSuch properties could be used to modify the range of what is shown in another panel (such as a Manhattan plot, which might initially show a whole-genome range).\n\nBy default, this shows gene annotations for hg19, and this can be changed to hg38 or mm10, for which we have other annotation datasets. Take a look at the _Constants_ section for setting the desired assembly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"## Input","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"viewof prefix = Inputs.text({\n label: html`Gene prefix`,\n placeholder: \"Enter gene prefix\",\n value: \"gat\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"## Output","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"viewof selectedHitName = Inputs.select(names, {\n value: \"\",\n label: html`Gene selection`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof confirm = Inputs.button(\"Select gene\", {\n value: null,\n label: \"Confirm gene selection\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"confirm\n ? selectedHitName !== \"No genes found\"\n ? htl.html`Range: ${\n hits[selectedHitName][0].chrom +\n \":\" +\n hits[selectedHitName][0].start +\n \"-\" +\n hits[selectedHitName][0].stop\n }`\n : null\n : htl.html`Click \"Select gene\" to obtain genomic range`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"To view other properties of a selected gene, take a look at the `hits` helper parameter below.","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"annotationScheme = \"https\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"annotationHost = \"annotations.altius.org\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"annotationPort = \"8443\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"annotationAssembly = \"hg19\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"## Helper parameters","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"annotationUrl = annotationScheme +\n \"://\" +\n annotationHost +\n \":\" +\n annotationPort +\n \"/sets?q=\" +\n prefix +\n \"&assembly=\" +\n annotationAssembly","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"selectedHitAttributes = !hits ? null : hits[selectedHitName][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"result = prefix.length > 1 ? request(annotationUrl).json() : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"hits = result && result.hits ? result.hits : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"names = hits ? Object.keys(hits) : [\"No genes found\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"## Helper classes","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"class Response {\n constructor(response) {\n this.response = response;\n }\n\n get headers() {\n return this.response.headers;\n }\n\n get body() {\n return this.response.body;\n }\n\n get contentType() {\n return this.headers[\"Content-Type\"];\n }\n\n get status() {\n return this.response.status;\n }\n\n get success() {\n return 200 <= this.status && this.status < 300;\n }\n\n json() {\n if (this.contentType.indexOf(\"application/json\") >= 0) {\n return this.response.json();\n } else {\n throw new Error(`Unexpected response format: ${this.contentType}`);\n }\n }\n\n _wrapJSON(json) {\n let result = JSON.parse(json);\n\n // based on https://medium.com/javascript-inside/safely-accessing-deeply-nested-values-in-javascript-99bf72a0855a\n result.get = (...path) =>\n path.reduce((xs, x) => (xs && xs[x] ? xs[x] : null), result);\n\n return result;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"class Options {\n static from(obj) {\n return Object.fromEntries(\n Object.entries(obj).filter(([key, val]) => val !== null && val !== void 0)\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"request = {\n function request(url, options = {}) {\n return new Request(url, options);\n }\n\n [\"get\", \"put\", \"patch\", \"post\", \"delete\"].forEach((method) => {\n request[method] = function (url, options = {}) {\n return request(url, Object.assign(options, { method }));\n };\n });\n\n return request;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"function _encodeParams(params) {\n return Object.keys(params)\n .map((k) => encodeURIComponent(k) + \"=\" + encodeURIComponent(params[k]))\n .join(\"&\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"function _log(...args) {\n if (this.constructor.DEBUG || this.option(\"debug\")) console.log(...args);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"