import {virusInfoOrUndefinedF as virusInfoOrUndefinedF} from"/_js/functions.js"
import {availableVirusInfoF as availableVirusInfoF} from"/_js/functions.js"
import {availableToolsF as availableToolsF} from"/_js/functions.js"
import {virusOfInterestF as virusOfInterestF} from"/_js/functions.js"
// Initialize a container to contain the containers for the tree and annotation windowhtml`<!-- Show information on hovered virus, reuse the same class for convenience --><div class="phylo-container"> <!-- Left part --> <div class="left"> <div id="info-container" class="text-center" style="visibility:hidden;"> <div id="name" class="g-col-md-12 bold"> name </div> <div id="toolbox" class="g-col-md-12"> no tools yet for this virus </div> </div> </div> <!-- Right part --> <div id="annotation-container" class="right no-gutter"> <p> </p> </div></div><div class="phylo-container"> <!-- Left part --> <div class="left"> <div id="tree-container" class="tree-container"> <svg id="tree-svg" class="tree-svg"></svg> </div> <div id="legend-container" class="text-center mb-2"> <div class="grid"> <div class="g-col-md-12 small"> <span class="phylotree-node-text" style="font-size:15px !important;">HOVER</span> for more information / <span class="phylotree-node-text-hl" style="font-size:15px !important;">BOLD NODES</span> are present in collection and can be selected </div> </div> </div> </div> <!-- Right part --> <div id="annotation-container" class="right no-gutter"> <div class="container grid small" align="center" style="--bs-gap: 1.0rem;font-weight:500;"> <div class="g-col-md-12 g-col-sm-12 card card-body tool-header opacity-100" id="virus"> Viral Toolbox </div> </div> <div class="container"> <div class="toolbox"> <div id="toolbox-contents" class="tool-container"> </div> </div> </div> </div></div>`
name
no tools yet for this virus
HOVER for more information /
BOLD NODES are present in collection and can be selected
virusInfoOrUndefined =virusInfoOrUndefinedF(familyAnnotations)availableVirusInfo =availableVirusInfoF(familyAnnotations)availableTools =availableToolsF(familyAnnotations, toolbox)virusOfInterest =virusOfInterestF(familyAnnotations)// Initialize the toolbox when the data is loadedinit_toolbox = toolbox.map(tool => d3.select("#toolbox-contents").node().append(html` <a href=${get_link("toolbox","#"+ tool.id+"-section")} target="_top"> <div class="tool-wrapper"> <div id="${tool.id}" class="tool"> <div class="tool-tooltip-text">${tool.name}</div>${tool.icon.map( i =>html`<img class="tool-icon" height="${(tool.icon.length>1) ?150/tool.icon.length:100}%" src="${i}"/>` )} </div> </div> </a> ` ) )// Reset the tools in the ToolboxclearToolbox = () => { d3.select("#virus").text("Viral Toolbox") toolbox.map(tool => { d3.select("#"+ tool.id).attr("class","tool") })}// Update the tools in the toolbox based on the provided virus objectupdateToolbox = (virus) => { d3.select("#virus").text(virus.resVirusName) toolbox.filter(tool => virus.tools.includes(tool.id)).map(tool => d3.select("#"+ tool.id).attr("class","tool tool-selected") )}// Handle tabset depending on the number of tabsrawTabs = d3.select("#vb-tabset").select("ul").selectAll("li").select("a").nodes()nrTabs = rawTabs.lengthfunctionindexToTab(i, length) {const pre ="tabset-"+ (length +1) +"-"const post ="-tab"return pre + (i+1) + post}tabsetAnchor =indexToTab(0, nrTabs)virusIdToTabMap =newMap( toolboxAnnotatedViruses.map( (virus,i) => [ virus.resAbbreviation,indexToTab(i, nrTabs) ] ))tabToVirusIdMap =newMap(Array.from(virusIdToTabMap, a => a.reverse()))// Hide virus information tabsetfunctionhideTabset() {const virusInfo =document.getElementById(tabsetAnchor).parentNode.parentNode.parentNode virusInfo.style.display="none"}hide =hideTabset()// Instantiate treenwk = nwksAsMap[virusFamily]tree =new phylotree.phylotree(nwk) // class Phylotree// https://github.com/veg/phylotree.js/blob/master/src/main.js#L90// import { update_tree } from "/_js/functions.js"renderedTree = tree// Transform the tree (translate and prune)// based on the input Excel file for this virus family.traverse_and_compute(node => {const virus_id = node.data.nameconst isLeaf = tree.isLeafNode(node)if (isLeaf) {const virus =virusIdToVirus(virus_id)const isVirusOfInterest = (typeof virus !=="undefined") ? (virus.virus_of_interest=="Yes") :falseif (isVirusOfInterest) {const currentName = virus_idconst newName = virus.abbreviation.trim() node.data.name= newName } else { node.data.name="remove_me" tree.deleteANode(node) } } }).render({'width':600,'height':600,'left-right-spacing':'fit-to-size','top-bottom-spacing':'fit-to-size','is-radial':true,'selectable':false,'collapsible':false,'transitions':false,'show-menu':false,'show-scale':false,'align-tips':true,'zoom':false,'brush':false,'draw-size-bubbles':false,'maximum-per-node-spacing':500,'minimum-per-node-spacing':100,'maximum-per-level-spacing':500,'minimum-per-level-spacing':100,'container':"#tree-container" }).style_nodes( (element, data) => {// the virus_id is how the virus is encoded in phylotree newick fileconst virus_id = data.data.name// At this stage in the process, every node should have informationconst information =virusIdToVirus(virus_id) // virusInfoOrUndefined(virus_id)const inToolbox = (typeof information !=="undefined") && (information.availability_in_toolbox=="Yes")// Styling based on available informationconst updtElement1 = information ? element.select("text").attr("class","phylotree-node-text"): element.select("text").attr("class","phylotree-node-text-inactive")const updtElement = inToolbox ? element.select("text").attr("class","phylotree-node-text-hl") : element// Hover functionality - Virus nameif (information) element.on("mouseover",virusHoverIn(data, information, inToolbox)).on("mouseout", virusHoverOut)// Click functionality - Toolbox inToolbox? element.on('click',function(el) {clearToolbox();// Select the first tab in order to get to the root of the tabsetconst virusInfo =document.getElementById(tabsetAnchor).parentNode.parentNode.parentNode virusInfo.style.display="block" virusInfo.scrollIntoView(true)// Now get the proper tab and open itconst thisVirusInfo =document.getElementById(virusIdToTabMap.get(information.virusPointer)) // either the virus_id or the group abbreviation thisVirusInfo.click();// ExperimentsclearNodes()highlightNodes(virus_id)// Render the toolbox for this virusupdateToolbox(information); }): element.on('click',function() {hideTabset()clearToolbox() }) }).layout(true)// Based on a virus ID (abbreviation), highlight the virus or the whole group it belongs tohighlightNodes = (virus_id) => {const abbreviations =virusIdToViruses(virus_id).map(v => v.abbreviation) d3.selectAll("g").filter(function (d) { return (typeof d.data!=="undefined") ? abbreviations.includes(d.data.name) :false}).select("text").attr("class","phylotree-node-text-selected")}// Initialize all viruses in the treeclearNodes = () => {const inLst = annotatedViruses.map(v => v.abbreviation)const inToolboxLst = annotatedViruses.filter(v => v.availability_in_toolbox=="Yes").map(v => v.abbreviation)// Initialize all text d3.selectAll("g").filter(function (d) { return (typeof d.data!=="undefined") }).select("text").attr("class","phylotree-node-text")// Update toolbox entries d3.selectAll("g").filter(function (d) { return (typeof d.data!=="undefined") ? inToolboxLst.includes(d.data.name) :false}).select("text").attr("class","phylotree-node-text-hl")}// console.log(renderedTree)showTree = renderedTree.svg.node()// Show small virus information box on hovervirusHoverIn = (data, information, is_available) => () => {// First, populate the contentconst virusNameToShow = (information.resVirusName)? information.resVirusName: (typeof information.virus_name!=="undefined")? information.virus_name:"" d3.select("#name").text(virusNameToShow)if (information.tools.length>0) d3.select("#toolbox").text("Viral tools are available, please select the virus for more information")else d3.select("#toolbox").text("No viral tools have been developed yet")// ... then show the content d3.select("#info-container").attr("style","visibility:visible;")}virusHoverOut = () => { d3.select("#info-container").attr("style","visibility:hidden;")}// Clicking on the tabs feeds the info back to the toolbox infofeedbackToolbox = d3.selectAll(".nav-item").on('click',function(){const _id = d3.select(this).select("a").attr('id')const _virus_id = tabToVirusIdMap.get(_id)// We should only update the toolbox if an actual virus is selected// not if for instance the 'toolbox' tab is selectedif (typeof _virus_id !=="undefined") {const _virus =virusIdToVirus(_virus_id)clearToolbox();updateToolbox(_virus)clearNodes()highlightNodes(_virus_id) } })// Add SVG to the DOMtmp = d3.select("#tree-container").node().appendChild(showTree)// If the size of the SVG is smaller than the allocated 600px// then resize it relatively to the fraction// Allow for a bit of padding, hence the .95 factor.newSizeF = (curSize) => {if (curSize <600) {return600* (0.95*600/ curSize) } else {return curSize } }newSize =newSizeF(renderedTree.size[0])updateSize = renderedTree.set_size([newSize,newSize]).update()
The estimated incubation period is 3 to 6 days, and the median duration of illness can vary depending upon severity but is similar to other respiratory infections caused by viruses.
Secretions from coughing and sneezing.
Close personal contact, such as touching or shaking hands.
Touching objects or surfaces that have the viruses on them then touching the mouth, nose, or eyes.
The peak age of hospitalization for infants with hMPV occurs between 6–12 months of age, slightly older than the peak of RSV, which is around 2–3 months.
The clinical features and severity of HMPV are similar to those of RSV.
hMPV is associated with 5% to 40% of respiratory tract infections in hospitalized and outpatient children
HTS is an approach in antiviral drug discovery involving the use of automated equipment to rapidly test huge libraries of chemical or biological materials with the aim of identifying hit molecules against specific viruses. HTS is usually done in culture plates with 384 or 1536 wells format using high performance liquid/plate handling devices.
Respiratory syncytial virus, or RSV, is a common respiratory virus that usually causes mild, cold-like symptoms.
Most people recover in a week or two, but RSV can be serious, especially for infants and older adults.
RSV is the most common cause of bronchiolitis (inflammation of the small airways in the lung) and pneumonia (infection of the lungs) in children younger than 1 year of age in the United States.
People infected with RSV are usually contagious for 3 to 8 days and may become contagious a day or two before they start showing signs of illness. However, some infants, and people with weakened immune systems, can continue to spread the virus even after they stop showing symptoms, for as long as 4 weeks.
RSV can survive for many hours on hard surfaces such as tables and crib rails. It typically lives on soft surfaces such as tissues and hands for shorter amounts of time.
(Reference: Graphs pertaining to RSV seasonality in Belgium have been sourced from Sciensano.)
This antiviral assay measures the ability of a tested compound to protect infected cells from virus-induced cytopathic effects (mostly virus-induced cell death). The cell viability can be determined in a colorimetric assay using MTS/PMS method.
Virus yield assay
This antiviral assay measures the ability of a tested compound to inhibit the viral replication in an infected cell culture through quantifying the viral RNA and the infectious virus loads released in the supernatant. This assay can be used for validation of compounds that show efficacy in CPE-reduction assays and to confirm that the compounds have direct effect on viral replication (not only cytoprotective).
Delay of treatment assay (Time-of-addition)
This a test to determine the stage(s) of the viral replication cycle at which the compound exerts its antiviral effect. Briefly, cells are treated with the compound at different time points prior or after the infection with the virus then cells are incubated for example until the end of one or 2 replication cycles. At the end of incubation, the intracellular and extracellular viral RNA loads at each time point are quantified by qRT-PCR to determine at which stage(s) the compound is still effective and when it loses its antiviral efficacy.
Plaque assay
This assay is a standard method to quantify infectious virus titers in a sample. Briefly, the test sample is serially diluted then aliquot of each dilution is added to a well in a cell culture plate with incubation to allow virus attachment followed by removal of the viral input and adding overlay of agarose or similar viscous material that limit the spread of viral infection. Under this condition, the attached virion will start to replicate producing more virions that will kill surrounding cells to generate a hole or plaque in the cell monolayer. By removal of the overlay and staining the live cells for e.g. by Crystal violet or methylene blue, this will provide a dark background for clear visualization of plaques. By counting the plaques at certain dilution(s), the plaque forming units (PFU)/mL can be calculated.
HTS is an approach in antiviral drug discovery involving the use of automated equipment to rapidly test huge libraries of chemical or biological materials with the aim of identifying hit molecules against specific viruses. HTS is usually done in culture plates with 384 or 1536 wells format using high performance liquid/plate handling devices.
A reverse genetic system is mostly a plasmid-based system that can be used to insert the desired mutations in the viral genome to study the effect of these mutations on viral replication, virulence, sensitivity to antiviral compounds in vitro and in vivo.
Reporter viruses
Reporter viruses are recombinant viruses engineered to carry reporter genes such as the one coding for fluorescent or luminescent proteins for development of high throughput antiviral assays or easily detection method for in vivo replication.
These cultures present several advantages over cell lines, including a better representation of the cellular heterogeneity of tissues, a more faithful transcriptomic and proteomic profile (especially when cultured in 3D) and more realistic functional responses, including drug responses.
Organoids
An organoid is a 3D tissue that is mostly derived from stem cells (pluripotent, fetal or adult), and which mimics the key functional, structural and biological complexity of a specified organ. Human organoids are useful tools to study viral infection and efficacy of potential antiviral compounds in a relevant model without the need for more complex animal studies. One example is Human Airway Epithelial (HAE) Cell Cultures that are widely used to study respiratory viral infections.