32:T41a,md`# COVID-19 Transcriptional Signature Tenoever Data: A549 Landscape This notebook visualizes data from the BioRxiv pre-print: *SARS-CoV-2 launches a unique transcriptional signature from in vitro, ex vivo, and in vivo systems* ([Blanco-Melo et al. 2020](https://www.biorxiv.org/content/10.1101/2020.03.24.004655v1.full.pdf+html)). The heatmap below shows the differentially expressed genes after COVID-19 stimulation of A549 cells. The heatmap uses [Enrichr](http://amp.pharm.mssm.edu/Enrichr/) to perform enrichment analyis on the differentially expressed genes (initialize to all 120 differentially expressed genes). You can re-define the gene list by zooming into a region and clicking the heatmap or by clicking on a row dendrogram. You can also choose from different enrichment libraries and adjust the number of enriched terms showm. Clicking on enrichment bars highlights genes that are associated with an enriched term ann clicking on a gene shows its full name and description (via [Harmonizome](http://amp.pharm.mssm.edu/Harmonizome/)). `33:T6d5,viewof cgm = { // Clustergrammer-GL uses query selectors to re-find the container, so if we // might want multiple instances of Clustergrammer-GL on the page, they’ll // need unique identifiers! (It’d be better if Clustergrammer-GL used // element.querySelector instead of document.querySelector and didn’t depend // on these identifiers.) const containerId = DOM.uid("container"); const container = html`

`; // Clustergrammer-GL depends on the container having been inserted into the // document before it’s initialized. We can do this by yielding! However, // since we’re defining this cell as a view, we don’t want the view’s value // to resolve until CGM has initialized. Hence we define the view’s value as // a promise that resolves immediately after. We could simplify this if // Clustergrammer-GL allowed you to pass in a detached container. let resolve; container.value = new Promise(r => resolve = r); yield container; // Initialize CGM. // (We might want to use Observable’s reactive width here?) const cgm = CGM({ network, viz_width: 900, viz_height: 900, container }); // Redefine the order parameters as getters and setters, so that we can intercept // when these change and emit an event. That will allow other cells to listen for // these changes are react accordingly. Object.defineProperties(cgm.params.order.new, { row: reactiveValue(container, "row", cgm.params.order.new.row), col: reactiveValue(container, "col", cgm.params.order.new.col) }); // Resolve the view’s value so that downstream cells can run. resolve(cgm); d3.select('.row_search_container').remove() }34:T5c1,viewof new_chart = { const svg = d3.create("svg") .attr("width", width) .attr("height", y_new.range()[1]) .attr("font-family", "sans-serif") .attr("font-size", "16") .attr("text-anchor", "end"); // initialized svg.property('value', { 'term_name': 'Select Term', 'term_genes': [] }) const bar = svg.selectAll("g") .data(bar_data) .join("g") .attr("transform", (d, i) => `translate(0,${y_new(i)})`) .on('click', function(d){ // from https://twitter.com/darth_mall/status/961770045826371584?s=20 let term_genes = d.genes.map(x => x.toLowerCase()) let value_dict = {} value_dict.term_genes = term_genes value_dict.term_name = d.name value_dict.score = d.value svg.property("value", value_dict) .dispatch("input"); svg.selectAll("g") .attr('font-weight', 'normal') d3.select(this) .attr('font-weight', 'bold') }) bar.append("rect") .attr("fill", "steelblue") .attr('opacity', 0.25) .attr("width", function(d){return x_new(d.value)}) .attr("height", y_new.bandwidth() - 1); bar.append("text") .attr("fill", 'black') //.attr("x", d => x_new(d.value) - 3) .attr("x", '5px') .attr("y", y_new.bandwidth() / 2) .attr("dy", "0.35em") .attr('text-anchor', 'start') .text(d => d.name); return svg.node(); }35:T4e1,viewof gene_of_interest = { const element = html`

`; d3.select(element) .append('h3') .text(new_chart.term_name) d3.select(element) .append('h5') .text('Combined Score ' + new_chart.score) // element.value = 'Click on a gene to obtain detailed information' element.value = ini_gene // d3.select(element) d3.select(element) .selectAll('div') .data(gene_list.map(x=>x + ', ')) .join('span') .text(d => d) .style('font-weight', '550') .style('color', function(d){ let inst_gene = d.toLowerCase().replace(', ','') let inst_color if (common_genes.length > 0){ if (common_genes.includes(inst_gene)){ inst_color = 'blue' } else { inst_color = '#2F4F4F'// '#808080' } } else { inst_color = 'black' } return inst_color }) .on('click', function(d){ d3.select(element).selectAll('span') .style('font-weight', '550') d3.select(this) .style('font-weight', 'bold') element.value = d.replace(', ', '') element.dispatchEvent(new CustomEvent("input")); }) return element; }36:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }37:[{"id":"f95e194c8e9193edd60f1c5a4fcabc24e9e5e255a59e0d8398b84f6dc02a1d3319984bdc4eab042837cb7870a5bffd9c0706467299b9ae77b6a931230e831240","href":"https://static.observableusercontent.com/files/f95e194c8e9193edd60f1c5a4fcabc24e9e5e255a59e0d8398b84f6dc02a1d3319984bdc4eab042837cb7870a5bffd9c0706467299b9ae77b6a931230e831240","name":"clustergrammer-gl.0.15.1.packd.js","type":"application/javascript","lastModified":1665542979138.131,"size":1011300}] 30:{"title":"COVID-19 Transcriptional Signature Tenoever Data: A549 Landscape","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"dashboard = html`\n \n

\n \n

${viewof num_enr_terms}

${viewof inst_lib}

${viewof new_chart}

${viewof gene_of_interest}

${gene_info}

\n \n \n

\n \n

\n ${viewof cgm}\n

\n\n

\n \n

\n \n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":1421,"value":"mutable latest_inst_gene_name = md`\n### ${gene_of_interest}: ${inst_gene_name}\n${inst_gene_description}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1423,"value":"typeof(inst_gene_name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1432,"value":"ini_gene = network.row_nodes[0].name","pinned":true,"hidden":false,"mode":"ojs"},{"id":1401,"value":"// mutable gene_info = md`something`","pinned":true,"hidden":false,"mode":"ojs"},{"id":909,"value":"mutable gene_info = md`\n### ${gene_of_interest}: ${inst_gene_name}\n${inst_gene_description}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"viewof num_enr_terms = slider({\n min: 0, \n max: 30, \n step: 1, \n value: 10, \n title: 'Enrichr Results: ' + inst_lib, \n description: \"Slide to Adjust the number of enriched terms that are shown.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"viewof inst_lib = DOM.select(available_libs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"gene_list_height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":1461,"value":"refseq_height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1388,"value":"inst_gene_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":1391,"value":"inst_gene_description","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`# Enrichr Libraries\nUsers can add in additional libraries to the list and all libraries can be found here:\nhttp://amp.pharm.mssm.edu/Enrichr/#stats.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"available_libs = [\n 'CellMarker_2024',\n 'Azimuth_Cell_Types_2021', \n 'Descartes_Cell_Types_and_Tissue_2021',\n 'GO_Biological_Process_2018', \n 'GO_Cellular_Component_2018', \n 'GO_Molecular_Function_2018',\n 'KEGG_2019_Human',\n 'ARCHS4_Tissues',\n 'ChEA_2016', \n 'MGI_Mammalian_Phenotype_Level_4_2019',\n 'Disease_Perturbations_from_GEO_up', \n 'Ligand_Perturbations_from_GEO_up',\n 'LINCS_L1000_Chem_Pert_down',\n 'Ligand_Perturbations_from_GEO_down',\n 'GTEx_Tissue_Expression_Up',\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"common_genes = new_chart.term_genes","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`# Clustergrammer-GL Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"function reactiveValue(container, name, value) {\n return {\n get() {\n return value;\n },\n set(v) {\n value = v;\n container.dispatchEvent(new CustomEvent(\"input\", {detail: {name, value}}));\n return value;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"cgm.params.order.new // This is now updates on interaction!","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"dmouseover_row_name = Generators.observe(notify => {\n const mousemove = () => notify(cgm.params.int.mouseover.row.name);\n viewof cgm.addEventListener(\"mousemove\", mousemove);\n notify(cgm.params.int.mouseover.row.name);\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"mouseover_col_name = Generators.observe(notify => {\n const mousemove = () => notify(cgm.params.int.mouseover.col.name);\n viewof cgm.addEventListener(\"mousemove\", mousemove);\n notify(cgm.params.int.mouseover.col.name);\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"which_list = 'viz'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"list_type = Generators.observe(notify => {\n\n const mousemove = () => notify(cgm.params.tooltip.tooltip_type);\n \n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.tooltip.tooltip_type);\n \n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"dendro_gene_list = Generators.observe(notify => {\n\n const mousemove = () => notify(cgm.params.dendro.selected_clust_names);\n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.dendro.selected_clust_names);\n \n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"viz_gene_list = Generators.observe(notify => {\n const mouse_click = () => notify(cgm.params.labels.visible_labels.row);\n viewof cgm.addEventListener(\"click\", mouse_click);\n notify(cgm.params.labels.visible_labels.row);\n return () => viewof cgm.removeEventListener(\"mousemove\", mouse_click);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"gene_list = define_gene_list(dendro_gene_list, viz_gene_list)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"function define_gene_list(dendro_gene_list, viz_gene_list){\n let gene_list\n \n console.log('list_type', list_type)\n if (list_type === 'row-dendro'){\n gene_list = dendro_gene_list\n }\n else if (list_type === 'matrix-cell'){\n gene_list = viz_gene_list\n } else {\n \n // default to all visible genes\n gene_list = viz_gene_list\n }\n \n \n return gene_list\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"sorted_gene_list = gene_list.sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"network = JSON.parse(viz_json_response.body)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"viz_json_response = {\n const response = await fetch(viz_json_url);\n return {\n ok: response.ok,\n body: await response.text()\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"viz_json_url = 'https://raw.githubusercontent.com/ismms-himc/covid-19_tenoever/master/jsons/A549_diff_genes.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`# Enrichr Code\n\n### To Do\n- make separate notebook that can be imported\n- get library metadata from: https://amp.pharm.mssm.edu/Enrichr/datasetStatistics and https://amp.pharm.mssm.edu/Enrichr/json/libraries.json\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`#### Post list to Enrichr`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"// list_id = JSON.parse(new_post_response.body).userListId.toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"list_id = get_new_list_id(new_post_response)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"function get_new_list_id(new_post_response){\n console.log('get_new_list_id')\n let new_list_id \n try{\n new_list_id = JSON.parse(new_post_response.body).userListId.toString()\n } catch(err){\n new_list_id = 'some-id'\n }\n return new_list_id\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"new_post_response = {\n \n let post_url = 'https://amp.pharm.mssm.edu/Enrichr/addList'\n let form_data = new FormData();\n let gene_str = gene_list.join('\\n')\n \n form_data.append('list', gene_str)\n \n const response = await fetch(post_url, {\n method: 'POST',\n body: form_data\n }\n );\n \n return {\n ok: response.ok, \n body: await response.text()\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"// bar_data.sort(function(a,b){\n// let a_val = a['value']\n// let b_val = b['value'] \n// return b_val - a_val\n// })\n\nenr_arr.sort(function(a,b){\n let a_val = a['value']\n let b_val = b['value'] \n return b_val - a_val\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"bar_data_ini = enr_arr//slice(0, num_enr_terms)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1300,"value":"bar_data = bar_data_ini.slice(0, num_enr_terms)","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"// width = 1250\nwidth = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"margin = ({top: 30, right: 0, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"term_list = bar_data.map(x => x.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"score_list = bar_data.map(x => x.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"bar_data_values = bar_data.map(x => x.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"enr_arr = enr_arr_ini.map(x => ({'name': x[1], 'value': x[4], 'genes': x[5]}) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"// enr_arr_ini = JSON.parse(fetch_enrichment.body)[inst_lib]\nenr_arr_ini = get_enr_arr_ini(fetch_enrichment, inst_lib)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"function get_enr_arr_ini(fetch_enrichment, inst_lib){\n let enr_arr_ini\n try{\n enr_arr_ini = JSON.parse(fetch_enrichment.body)[inst_lib]\n } catch(err){\n enr_arr_ini = []\n }\n return enr_arr_ini\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"fetch_enrichment = {\n \n let base_url = 'https://amp.pharm.mssm.edu/Enrichr/enrich?';\n let library_string = 'backgroundType=' + inst_lib;\n let list_id_string = 'userListId=' + String(list_id);\n let full_url = base_url + library_string + '&' + list_id_string;\n \n const response = await fetch(\n full_url, {\n method: 'GET'\n }\n );\n return {\n ok: response.ok, \n body: await response.text()\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`### Load Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"// network = FileAttachment(\"pre-calc-viz.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`### Require Clustergrammer-GL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// CGM = require(await FileAttachment(\"clustergrammer-gl-0.11.9.js\").url())\n// CGM = require(await FileAttachment(\"clustergrammer-gl.0.11.10.packd.js\").url())\nCGM = require(await FileAttachment(\"clustergrammer-gl.0.15.1.packd.js\").url())\n\n// CGM = require(\"https://bundle.run/clustergrammer-gl@0.11.9\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"md`# Harmonizome Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"mutable inst_gene_name = {\n return JSON.parse(fetch_hzome.body).name\n}\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"inst_gene_description = JSON.parse(fetch_hzome.body).description","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"fetch_hzome = {\n \n let base_url = 'https://amp.pharm.mssm.edu/Harmonizome/api/1.0/gene/' ;\n let full_url = base_url + gene_of_interest;\n \n const response = await fetch(\n full_url, {\n method: 'GET'\n }\n );\n return {\n ok: response.ok, \n body: await response.text()\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`### Alternate Bar Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"y_new = d3.scaleBand()\n .domain(d3.range(bar_data_values.length))\n .range([0, 22 * bar_data_values.length])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"max_bar_width = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"x_new = d3.scaleLinear()\n .domain([0, d3.max(bar_data_values)])\n .range([0, max_bar_width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"md`### Div Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"md`### Old Vertical Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"md`### Div Text`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"d3 = {\n // const d3 = require('d3')\n const d3 = await require(\"d3@5\", \"d3-array@2\");\n // d3.cloud = await require(\"d3-cloud@1\");\n return d3\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`### Current mouseover: ${mouseover_row_name}, ${mouseover_col_name}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"md`### Styling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"// set table style to full width \nhtml`\n