VirusBank

import { encodeTool } from '/_js/functions.js'

FA = FileAttachment

// Load the toolbox
families = await FA("/families.json").json()
_toolbox = await FileAttachment("/toolbox/toolbox.json").json()
toolbox = _toolbox.map( tool => encodeTool(tool) )

// console.log(toolbox)

addEncodedTools = (virus) => {
  return ({ ... virus, tools: toolbox.flatMap( tool => virus[tool.encoded] ? tool.id : []) }) 
}

// Load all Newick tree file and create a dictionary `family -> tree`
nwks = await Promise.all(
  families.map(async (family) => { 
    let tree = await FA("/"+ family + "/tree.newick").text()
    return ({ family: family, nwk: tree })
  }))
nwksAsMap = Object.fromEntries(nwks.map( el => [el.family, el.nwk] ))

// console.log(nwks)

// Load annotations for viruses for each family
_annotations = await Promise.all(
  families.map( async (family) => {
    let xls = await FA("/"+ family + "/family.xlsx").xlsx()
    let _annotations = xls.sheet(0, { headers: true, range: ":L" })

    let _trimmed = _annotations.map( virus => {
      let trimmed = {}
      Object.keys(virus).forEach( key => {
        trimmed[key] = virus[key].trim()
      })
      return trimmed
    })

    return _trimmed.map( virus => ({... virus, family: family }) )
  }))

// console.log(_annotations)

// Add tools information, just the list of tools ids
annotations = _annotations
  .flat()
  .map( virus => addEncodedTools(virus) )

familyAnnotations = annotations
  .filter(virus => virus.family == virusFamily)

function virusInfo(_family, _virus) {
  const info = 
    familyAnnotations.filter(row => row.abbreviation == _virus && row.family == _family)
  return info[0]
}

// Handle grouped viruses by extending the model with isGroup: false/true
addGrouped = (virus) => {
  const isGroup = (typeof virus.group_abbreviation !== "undefined") && (virus.group_abbreviation !== "")
  const virus_pointer = (isGroup) ? virus.group_abbreviation : virus.abbreviation 
  return (
    { ... virus,
      isGroup: isGroup,
      virusPointer: virus_pointer,
      resVirusId: (isGroup) ? virus.group_abbreviation : virus.abbreviation,
      resAbbreviation: (isGroup) ? virus.group_abbreviation : virus.abbreviation,
      resVirusName: (isGroup) ? virus.group_virus_name : virus.virus_name 
    }
  )
}

// Create a list of all viruses of interest in the Excel file
// Add group information early on
annotatedViruses =
  familyAnnotations
    .filter(virus => virus.virus_of_interest == "Yes")
    .map(virus => addGrouped(virus))

// Create a sublist of viruses with toolbox
// Take into account groups by selecting unique entries
toolboxAnnotatedViruses =
  annotatedViruses
    .filter(virus => virus.availability_in_toolbox == "Yes")
    .filter((value, index, self) => {
      return self.findIndex(v => v.resAbbreviation === value.resAbbreviation) === index;
    })

// Derive a virus object from the ID
// The ID can be either a virus_id (from the ictv tree) or a group_abbreviation
virusIdToVirus = (virus_id) => {

  // lookup the virus_id in the full list of viruses
  const fullList =
    annotatedViruses
      .filter(v => v.virus_id.replace(/^'+|'+$/g, '') == virus_id || v.abbreviation == virus_id)
      //.filter(v => v.virus_id == virus_id || v.abbreviation == virus_id)

  // lookup the abbreviation for the group
  const groupList =
    toolboxAnnotatedViruses
      .filter(v => v.group_abbreviation == virus_id)

  if (fullList.length > 0) {
    return fullList[0]
  }
  if (groupList.length > 0) {
    return groupList[0]
  }
}

// Return all matches for a virus ID
virusIdToViruses = (virus_id) => {
  // lookup the virus_id in the full list of viruses
  const single_virus =
    annotatedViruses
      .filter(v => v.virus_id.replace(/^'+|'+$/g, '') == virus_id || v.abbreviation == virus_id)
      [0]

  if (single_virus.isGroup) {
    return annotatedViruses
      .filter(v => v.group_abbreviation == single_virus.group_abbreviation)
  } else {
    return [ single_virus ]
  }
}

function renderVirusToolbox(family, virus_id) {

  // First extract the virus object from the ID or abbreviation
  // This takes into account the groups
  const virus = virusIdToVirus(virus_id)

  if (typeof virus.tools !== "undefined" && virus.tools.length > 0) {
    return html`
      ${toolbox.filter(tool => virus.tools.includes(tool.id) ).map(tool => 
        html`
        <h2 id="${tool.id}-section">${tool.name}</h2>
        <div class="container grid">
          <div class="g-col-12 g-col-md-3 toolbox one-tool" style="text-align:center;">
            <div id="toolbox-contents" class="tool-container">
              <a href="/toolbox/index.html#${tool.id}-section">
                <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>
            </div>
          </div>
          <div class="g-col-12 g-col-md-9">
            <p>${tool.description}</p>
          </div>
          <div class="g-col-1" style="text-align:center;">
          </div>
        </div>
        <div class="col-xs-12" style="height:20px;"></div>
        `
      )}
    `
  }
   else {
    return html`
      <p>&nbsp;</p>
    `
   }
}

import { virusInfoOrUndefinedF } from "/_js/functions.js"
import { availableVirusInfoF } from "/_js/functions.js"
import { availableToolsF } from "/_js/functions.js"
import { virusOfInterestF } from "/_js/functions.js"

// Initialize a container to contain the containers for the tree and annotation window
html`

<!-- 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>&nbsp;</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>
`

phylotree = await require("phylotree@1.1/dist/phylotree.js");

virusInfoOrUndefined = virusInfoOrUndefinedF(familyAnnotations)
availableVirusInfo = availableVirusInfoF(familyAnnotations)
availableTools = availableToolsF(familyAnnotations, toolbox)
virusOfInterest = virusOfInterestF(familyAnnotations)

// Initialize the toolbox when the data is loaded
init_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 Toolbox
clearToolbox = () => {

  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 object
updateToolbox = (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 tabs
rawTabs = d3.select("#vb-tabset").select("ul").selectAll("li").select("a").nodes()
nrTabs = rawTabs.length

function indexToTab(i, length) {
  const pre = "tabset-" + (length + 1) + "-"
  const post = "-tab"
  return pre + (i+1) + post
}
 
tabsetAnchor = indexToTab(0, nrTabs)

virusIdToTabMap = new Map(
  toolboxAnnotatedViruses
    .map( (virus,i) => [ virus.resAbbreviation, indexToTab(i, nrTabs) ] )
)

tabToVirusIdMap = new Map(
  Array.from(virusIdToTabMap, a => a.reverse())
)

// Hide virus information tabset
function hideTabset() {
  const virusInfo = document.getElementById(tabsetAnchor).parentNode.parentNode.parentNode
  virusInfo.style.display = "none"
}

hide = hideTabset()

// Instantiate tree
nwk = 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.name
    const isLeaf = tree.isLeafNode(node)

    if (isLeaf) {
      const virus = virusIdToVirus(virus_id)
      const isVirusOfInterest = (typeof virus !== "undefined") ? (virus.virus_of_interest == "Yes") : false
      if (isVirusOfInterest) {
        const currentName = virus_id
        const 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 file
    const virus_id = data.data.name  
    
    // At this stage in the process, every node should have information
    const information = virusIdToVirus(virus_id) // virusInfoOrUndefined(virus_id)

    const inToolbox = (typeof information !== "undefined") && (information.availability_in_toolbox == "Yes")

    // Styling based on available information
    const 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 name
    if (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 tabset
          const virusInfo = document.getElementById(tabsetAnchor).parentNode.parentNode.parentNode
          virusInfo.style.display = "block"
          virusInfo.scrollIntoView(true)
          // Now get the proper tab and open it
          const thisVirusInfo = document.getElementById(virusIdToTabMap.get(information.virusPointer))  // either the virus_id or the group abbreviation
          thisVirusInfo.click();

          // Experiments
          clearNodes()
          highlightNodes(virus_id)

          // Render the toolbox for this virus
          updateToolbox(information);
        })
      : element.on('click', function() {
          hideTabset()
          clearToolbox()
        })

  })
  .layout(true)

// Based on a virus ID (abbreviation), highlight the virus or the whole group it belongs to
highlightNodes = (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 tree
clearNodes = () => {
  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 hover
virusHoverIn = (data, information, is_available) => () => {
  // First, populate the content
  const 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 info
feedbackToolbox = 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 selected
    if (typeof _virus_id !== "undefined") {
      const _virus = virusIdToVirus(_virus_id)
      clearToolbox();
      updateToolbox(_virus)
      clearNodes()
      highlightNodes(_virus_id)
    }
  })
     
// Add SVG to the DOM
tmp = 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) {
      return 600 * (0.95 * 600 / curSize)
    } else {
        return curSize
    }
  }

newSize = newSizeF(renderedTree.size[0])
updateSize = renderedTree.set_size([newSize,newSize]).update()

Influenza, commonly referred to as the flu, has the potential to induce a range of symptoms, spanning from mild discomfort to severe illness, and in some instances, fatality. Typically, flu symptoms manifest abruptly.

Not all individuals experiencing the flu will necessarily have a fever.

Influenza (Flu) primarily spreads through respiratory droplets released when infected individuals cough, sneeze, or engage in conversation.

Additionally, it can be contracted by touching contaminated surfaces and subsequently touching one’s face.

The highest level of contagion among individuals with the flu typically occurs during the initial 3-4 days of their illness.

In some cases, otherwise healthy adults can begin transmitting the virus to others as early as one day before they start showing symptoms, and this contagious period may persist for up to five to seven days after the onset of illness.

It’s important to note that certain individuals, particularly young children and those with weakened immune systems, may remain contagious for an extended duration.

Seasonal flu

Above, influenza virus detection within Europe was shown using the data obtained from the World Health Organisation (WHO) and Global Influenza Surveillance & Response System (GIRS). For more information about the global virus circulation, please visit this link.

Each year, global populations experience annual flu outbreaks, with seasonal flu epidemics recurring annually. An exception was seen during the 2021 season due to the infection control measurements during the COVID-19 pandemic.
Influenza results in between 3 and 5 million serious cases and 250,000 to 500,000 deaths per year in the world (WHO).
H1N1 flu, also known as swine flu, caused a 2009-2010 pandemic with approximately 284,400 global deaths. Although the pandemic officially ended in 2010, the H1N1pdm09 strain remains part of seasonal flu infections.
While two influenza B virus lineages emerged in the 1970s and have been co-circulated since 2001, B/Yamagata-lineage circulation has not been confirmed since March 2020.

Pandemic flu

A flu pandemic is a worldwide emergence of a novel influenza viruses in humans. Over the last century, we have witnessed the occurrence of four influenza pandemics. Therefore, the occurrence of another pandemic is inevitable.

Please visit this link for more information about seaonal and pandemic influenza (flu).

If you are interested in assessing testing capabilities for a particular influenza strain, kindly get in touch with us through info@virusbankplatform.be to inquire about the availability of our toolbox.’

renderVirusToolbox("orthomyxoviruses", "Flu")

open virus page / reload family page

Bird flu, also known as avian influenza or AI, is a highly contagious viral disease that affects a variety of bird species used in food production, as well as ornamental and wild birds. Avian influenza viruses induce two distinct forms of illness:

Highly Pathogenic Avian Influenza (HPAI): This results from extremely virulent viruses and leads to a . high mortality rate among affected birds.
Low Pathogenic Avian Influenza (LPAI): This is caused by viruses associated with milder respiratory symptoms, reduced egg production, and a moderate increase in mortality.

The presence of avian flu poses a significant threat to the poultry industry, resulting in substantial economic consequences. Notably, only viruses of subtypes H5 and H7 have the potential to evolve into highly pathogenic forms.

Additionally, certain avian influenza viruses are zoonotic, meaning they can infect humans.

The virus is transmitted between animals, directly via saliva, nasal secretions, and feces of infected animals, or indirectly, through exposure to contaminated food, water, agricultural equipment, etc..

Trade, transport of poultry, migrations of wild birds are equally means of longer-distance transmission

Zoonotic transmission usually occurs during local farming, animal husbandry in industrial settings, i.e. direct or indirect contact during animal breeding, farming, management etc. or in animal markets in which animals are handled, especially without proper protection or care.

Please click to access the interactive map from Sciensano

A very large number of wild birds have tested positive for highly pathogenic avian influenza; the infectious pressure in the wild is thereby high. The number of infections in the poultry sector is not negligible (38 holdings since September 1, 2022, including 17 professional farms, 20 private owners and 1 zoologic park). Ferrets were also positively detected with the virus at a private keeper where an outbreak in chickens and ducks was detected. Fifteen wild foxes and three wild polecats were also found positive. This underlines the very high level of vigilance and biosecurity needed in order to avoid the introduction of the virus into its facilities.

(info from Sciensano, https://tinyurl.com/yo362qhd)

If you are interested in assessing testing capabilities for a particular avian influenza strain, kindly get in touch with us through info@virusbankplatform.be to inquire about the availability of our toolbox.’

renderVirusToolbox("orthomyxoviruses", "AI")

open virus page / reload family page