29:null 2a:["$","title",null,{"children":"Pham Matrices for Selected Phages | Maddie Bendele | Observable"}] 2f:T9a9,chart = { const type = Form.radios; if (selectedPhageGenes.length > 0) { if (type == "startSite") { // Cell chart based on start position const chart = Plot.plot({ width: width * Form1.width, height: Form.selectedPhages.length * (Form1.height) + 170, marginTop: 50, marginLeft: 120, x: { axis: null}, y: { label : `Cluster ${selectedCluster} Phages`, type: 'band'}, marks: [ Plot.cell(selectedPhageGenes, { // x: "phamName", x: "start", y: "phageID", fill: "phamColor", insetTop: Form1.insetTop, insetLeft: Form1.insetLeft, // sort: {y: null, x:null}, sort: {y:null}, stroke: d => d['phamColor'] === '#FFFFFF' ? 'gray' : d['phamColor'], title: (d) => `${d.phageID} \n phamily: ${d.phamName} \n start: ${d.start}\n gene: ${d.name} ` }) ] }) // code for scroll bar chart.classList.add("chart"); const scrollbar = html`

`; scrollbar.append(chart); const div = html`

`; div.append(scrollbar); return div; return chart // Cell Plot: Mean Pham Position } else if (type == "meanPhamPosition") { const chart = Plot.plot({ width: width * Form1.width, height: Form.selectedPhages.length * (Form1.height) + 170, marginTop: 50, marginLeft: 120, x: { axis: null}, y: { label : `Cluster ${selectedCluster} Phages`, type: 'band'}, marks: [ Plot.cell(selectedPhageGenes, { x: "meanPhamPosition", y: "phageID", fill: "phamColor", insetTop: Form1.insetTop, insetLeft: Form1.insetLeft, sort: {y: null}, stroke: d => d['phamColor'] === '#FFFFFF' ? 'gray' : d['phamColor'], title: (d) => `${d.phageID} \n phamily: ${d.phamName} \n gene: ${d.name} ` }) ] }) // code for scroll bar chart.classList.add("chart"); const scrollbar = html`

`; scrollbar.append(chart); const div = html`

`; div.append(scrollbar); return div; return chart } } else { return displayCaution("Please select a phage from the menu above.") } }30:T9c1,chart1 = { const type = Form.radios; if (phagesbyPahm.length > 0) { if (type == "startSite") { // Cell chart based on start position const chart = Plot.plot({ width: width * Form1.width, height: Form.phagesbyPahm.length * Form1.height + 170, marginTop: 50, marginLeft: 120, x: { axis: null }, y: { label: `Cluster ${selectedCluster} Phages`, type: "band" }, marks: [ Plot.cell(phagesbyPahm, { // x: "phamName", x: "start", y: "phageID", fill: "phamColor", insetTop: Form1.insetTop, insetLeft: Form1.insetLeft, // sort: {y: null, x:null}, sort: { y: null }, stroke: (d) => d["phamColor"] === "#FFFFFF" ? "gray" : d["phamColor"], title: (d) => `${d.phageID} \n phamily: ${d.phamName} \n start: ${d.start}\n gene: ${d.name} ` }) ] }); // code for scroll bar chart.classList.add("chart"); const scrollbar = html`

`; scrollbar.append(chart); const div = html`

`; div.append(scrollbar); return div; return chart; // Cell Plot: Mean Pham Position } else if (type == "meanPhamPosition") { const chart = Plot.plot({ width: width * Form1.width, height: Form.phagesbyPahm.length * Form1.height + 170, marginTop: 50, marginLeft: 120, x: { axis: null }, y: { label: `Cluster ${selectedCluster} Phages`, type: "band" }, marks: [ Plot.cell(phagesbyPahm, { x: "meanPhamPosition", y: "phageID", fill: "phamColor", insetTop: Form1.insetTop, insetLeft: Form1.insetLeft, sort: { y: null }, stroke: (d) => d["phamColor"] === "#FFFFFF" ? "gray" : d["phamColor"], title: (d) => `${d.phageID} \n phamily: ${d.phamName} \n gene: ${d.name} ` }) ] }); // code for scroll bar chart.classList.add("chart"); const scrollbar = html`

`; scrollbar.append(chart); const div = html`

`; div.append(scrollbar); return div; return chart; } } else { return displayCaution( "Please select a phage from the menu above." ); } }31:Tc27,// Each section of code has comments at the bottom of this cell. selectedPhageGenes = { //1-3 let geneData = await getPhameratorData( dataset, `/genesbycluster/${selectedCluster}`, user.email, user.password ); geneData.map(d => d.phamName = +d.phamName); geneData.map(d => d.name = +d.name); geneData.map(d => d.genefunction = (d.genefunction === "" ? "unknown" : d.genefunction).toLowerCase()); //4 {let reorderedPhages = (reorderPhages).reduce((acc, obj1) => { const obj2 = phageGenomes.find(obj2 => obj2.phagename === obj1); return [...acc,{ ...obj2}];}, []); // 5 {let clusterAndGenes = (geneData).reduce((acc, obj1) => { const obj2 = phageGenomes.find(obj2 => obj2.phagename === obj1.phageID); return [...acc, { ...obj1, ...obj2 }];}, []); // 6 {let rows = reorderedPhages.reduce((acc, obj1) => { const obj2 = clusterAndGenes.filter(obj2 => obj2.phagename === obj1.phagename); return [...acc,...obj2 ];}, []); // 7 {let data = rows let phamNames = Array.from(new Set(data.map(d => d.phamName))) for (let phamName of phamNames) { let genes = data.filter(d => d.phamName === phamName) let meanPhamPosition = d3.mean(genes, d => d.midpoint) genes.map(d => d.meanPhamPosition = meanPhamPosition) } // 8 return clusterAndGenes.length > 0 ? data : [columns] } } } } } // 1. Get the genes by cluster data from the Phamerator API for the cluster that the user selects. // 2. Change the pham name and gene number to an integer. // 3. Then any gene functions that are empty strings should be replaced with "unknown" for the function. If the gene function is not an empty string, set it all to lowercase (this is to help remove any duplicate functions based on capitalization that will make a huge difference once we start looking for the target genes.) // 4. reduce phageGenomes based on the phagename in the reoderPhages list (this will just be obj1 because the reorderPhages list returns an array of strings). Then return the phageGenome information for each phage. // 5. reduce phageGenomes based on the phage name in geneData so that we only return phages in the selected cluster. Then return the geneData information and the phageGenome information (we need cluster and genome length). // 6. Based on the phages that the user selects from the menu, reduce the clusterAndGenes data based on phagename so that we only return the gene/cluster information for the selected phages. The data will be ordered based on the reorderPhages list. // 7. For every phamily in the selected phages, calculate the mean phamPosition and then return the meanPhamPosition variable. This is how we will determine the order of genes in the chart. //8. if the length of clusterAndGenes is greater than 0 (meaning that there is at least one row of gene information for a selected phage), then return data. If the length of clusterAndGenes is less than or equal to 0, return columns (which will trigger the displayCaution cell that signals the user to select a phage.)32:[] 2d:{"id":"3207d080c4176579","slug":null,"title":"Pham Matrices for Selected Phages","thumbnail":"95633fba8c1042b9a7bdad37f4d52edd95dbf438fdbe63fd08569c6b6ef0c351","access_level":"public","create_time":"$D2023-10-09T16:36:08.146Z","update_time":"$D2023-10-10T17:19:45.360Z","view_time":null,"first_public_time":"$D2023-10-09T16:36:08.146Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f5a60deb983d2ac1","login":"mbendele","name":"Maddie Bendele","avatar_url":"https://avatars-next.observableusercontent.com/eda08aa21264f41360de6456790ae57ec6fa4ab04010c83e854f643516c54538","tier":"starter_2024"},"version":2454,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"24c6369a6fc83150","login":"mbendele","name":"Maddie Bendele","avatar_url":"https://avatars-next.observableusercontent.com/df056cb5c50bb95442f5984e912a3fdad13fb13fc423a0b8e54da82de553579a","tier":null}],"members":[{"type":"individual","id":"24c6369a6fc83150","login":"mbendele","name":"Maddie Bendele","avatar_url":"https://avatars-next.observableusercontent.com/df056cb5c50bb95442f5984e912a3fdad13fb13fc423a0b8e54da82de553579a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Pham Matrices for Selected Phages","cells":[{"id":0,"value":"# Pham Matrices for Selected Phages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1166,"value":"### Authors\nIsobel Cobb, Madison Bendele, Ria Fisher, Zelda Shifflett, Steven G. Cresawn","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1164,"value":"terms","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`### *Welcome${user.name ? \", \" + user.name.split(\" \")[0] : \"\"}!* :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof formData = {\n let formData = \"Signed In\";\n formData = formWithSubmit(html`\n \n`);\n return formData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// this is where you select what dataset you want to pull your data from with the Phamerator API.\n\nviewof dataset = Inputs.select(user.datasets.sort(), {\n label: \"Select a data set\",\n value: \"Actino_Draft\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// this is where you select what cluster you want to pull your data from under the selected dataset.\n\nviewof selectedCluster = Inputs.select(\n clusters.map((cluster) => cluster.name),\n { label: \"Cluster\", value: \"Q\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2081,"value":"menus = html`\n \n \n \n \n \n \n \n \n

Select specific phages from Cluster ${selectedCluster}	Drag to reorder the phages
${viewof Form}\n${viewof Form1}	${viewof reorderPhages}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2421,"value":"menus1 = html`\n \n \n \n \n \n \n \n \n

Select specific phages from Cluster ${selectedCluster}	Drag to reorder the phages
${viewof Form}\n${viewof Form1}	${viewof reorderPhages}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2445,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"// this returns the cluster and the number of phages in the cluster\nclusters = getPhameratorData(\n dataset, \n \"/clusters\", \n user.email, \n user.password\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// This code returns an array of objects with the phage name and cluster/subcluster information for the phages in the cluster you selected.\n\nphagesByCluster ={\n let result = [];\n await getPhameratorData(\n dataset,\n `/phagesbycluster/${selectedCluster}`,\n user.email,\n user.password\n ).then(arr => {\n for (let phage of arr) {\n phage.cluster === \"\" ? phage.cluster = \"Singletons\" : null\n phage.phagename = phage.phagename.replace(\"_Draft\", \"\")\n result.push(phage)\n }\n })\n return result\n}\n\n// 1. in the for loop, we turn the phagesbycluster data into an array and for every phage in the array we replace the empty strings in the cluster key with \"singletons\", if the cluster column does not contain an empty string, we ignore it. \n// 2. then we replace any phagename that contains \"_Draft\" with an empty string so it only lists the phage name\n// 3. finally we push the changes that we made in each row back to the results and return the results array","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"// this code returns an array of objects with the phage name, cluster/subcluster, genome length, and dataset information for all phages in Phamerator.\n\n\nphageGenomes = {\n let result = [];\n await getPhameratorData(\n dataset,\n `/genomes`,\n user.email,\n user.password\n ).then(arr => {\n for (let phage of arr) {\n phage.cluster === \"\" ? phage.cluster = \"Singletons\" : null\n phage.phagename = phage.phagename.replace(\"_Draft\", \"\")\n result.push(phage)\n }\n })\n return result\n}\n\n// 1. In the for loop, we turn the phagesbycluster data into an array and for every phage in the array we replace the empty strings in the cluster key with \"singletons\", if the cluster column does not contain an empty string, we ignore it. \n// 2. then we replace any phagename that contains \"_Draft\" with an empty string so it only lists the phage name\n// 3. finally we push the changes that we made in each row back to the results and return the results array","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"// this code prevents a runtime error from occurring when no phages are selected. \ncolumns = ({\n \"phageID\": null,\n \"accession\": null,\n \"dataset\": null,\n \"name\": null,\n \"start\": null,\n \"stop\": null,\n \"midpoint\": null,\n \"gap\": null,\n \"direction\": null,\n \"phamColor\": null,\n \"phamName\": null,\n \"translation\": null,\n \"genefunction\": null,\n \"geneID\": null,\n \"LocusTag\": null,\n \"domainCount\": null,\n \"tmDomainCount\": null,\n \"meanPhamPosition\": null,\n \"_id\": null,\n \"phagename\": null,\n \"genomelength\": null,\n \"cluster\": null,\n \"subcluster\": null,\n \"clusterSubcluster\": null,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"viewof Form = { \n const inputs = (\n Inputs.form({\n selectedPhages: Inputs.select(phagesByCluster, {format: x => x.phagename, multiple: true}),\n radios: Inputs.radio([\"meanPhamPosition\",\"startSite\"], {label: \"Select a way to organize the genes\", value: \"meanPhamPosition\"}),\n }));\n return inputs\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2046,"value":"viewof Form1 = Inputs.form({\n width: Inputs.range([1, 10], {label: \"Chart width\", step: 0.25, value: 3.5}),\n height: Inputs.range([1, 50], {label: \"Chart height\", step: 1, value: 15}),\n insetTop: Inputs.range([0, 5], {label: \"Vertical spacing\", value: 1,step: 1}),\n insetLeft: Inputs.range([0, 5], {label: \"Horizontal spacing\", value: 0,step: 1})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"viewof reorderPhages = {\n let data = [];\n let orderPhage = [];\n let phageData = d3.group(Form.selectedPhages, d => d.phagename);\n for (let phage of phageData) {\n data.push({phageID: phage[0], clusterInfo: phage[1]})\n }\n orderPhage = selectOrder(data.map(d => d.phageID))\n\n if (orderPhage.length === 0) {\n return displayCaution(\"Please select a phage from the menu to the left.\")\n } else{\n return orderPhage\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2427,"value":"viewof reorderPhams = {\n let data = [];\n let orderPham = [];\n let phageData = d3.group(Form.selectedPhageGenes, (d) => d.phamName);\n for (let pham of phageData) {\n data.push({ phamName: pham[0], clusterInfo: phage[1] });\n }\n orderPham = selectOrder(data.map((d) => d.phamName));\n\n if (orderPham.length === 0) {\n return displayCaution(\n \"Please select a phage from the menu to the left.\"\n );\n } else {\n return orderPham;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2441,"value":"phagesbyPham = d3.group(selectedPhageGenes, (d) => d.phamName)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2454,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2450,"value":"html`\n \n \n \n ${Array.from(\n phagesbyPham,\n ([key, values]) => html`\n \n \n \n `\n )}\n

phamName	PhageID
${key}	${values.map((d) => d.phageID).join(\", \")}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2448,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2423,"value":"viewof reorderPhages1 = {\n let data = [];\n let orderPhage = [];\n let phageData = d3.group(Form.selectedPhages, d => d.phagename);\n for (let phage of phageData) {\n data.push({phageID: phage[0], clusterInfo: phage[1]})\n }\n orderPhage = selectOrder(data.map(d => d.phageID))\n\n if (orderPhage.length === 0) {\n return displayCaution(\"Please select a phage from the menu to the left.\")\n } else{\n return orderPhage\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"import {\n terms,\n getPhameratorData,\n user,\n formWithSubmit,\n styles\n} with { formData } from \"@scresawn/phamerator-api-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"import { displayCaution } from \"@mkfreeman/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"import {selectOrder} from \"@cresawn-labs/reorder-a-list\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"---\n\n## References\n\n- The code below comes from [Drag an Observable Plot chart to pan it](https://observablehq.com/@skybrian/drag-an-observable-plot-chart-to-pan-it). **Credit:** Brian Slesinsky.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"{\n chart;\n chartElt?.addEventListener(\"mousedown\", () => {\n mutable dragging = true;\n });\n\n function mousemove(e) {\n if (mutable dragging) {\n scrollElt.scrollLeft -= e.movementX;\n }\n }\n\n function mouseup(e) {\n mousemove(e);\n mutable dragging = false;\n }\n\n window.addEventListener(\"mouseup\", mouseup);\n window.addEventListener(\"mousemove\", mousemove);\n invalidation.then(() => {\n window.removeEventListener(\"mouseup\", mouseup);\n window.removeEventListener(\"mousemove\", mousemove);\n });\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"scrollElt = chart.getElementsByClassName(\"scrollbar\")[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"chartElt = {\n chart;\n scrollElt?.getElementsByClassName(\"chart\")[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"mutable dragging = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

Phamerator.org Login