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()

Hemorrhagic phase progression with bruising, nosebleeds, and bleeding at injection sites can be seen. Beginning 4 days after illness and lasting for about two weeks.

Other clinical signs include: tachycardia, lymphadenopathy, and a petechiae (a rash caused by bleeding into the skin) on internal mucosal surfaces, such as in the mouth and throat, and on the skin. Hepatitis, and severely ill patients may experience rapid kidney deterioration, liver failure or pulmonary failure after 5 days of illness.

The virus was first observed in Crimea in the 1940s and was later identified as the same agent of what had been called Congo Hemorrhagic Fever.

CCHFV is among the most widely distributed hemorrhagic fever viruses with cases reported through Africa, the Middle East, Asia, and Southern and Eastern Europe.

The fatality rate is typically between 10 and 40%, though fatalities as high as 80% have been observed in some outbreaks.

CCHF is on WHO’s priority list for Research and Development and the US National Institute of Allergy and Infectious Diseases (NIH/NIAID) priority A list, as a disease posing the highest level of risk to national security and public health.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "CCHFV")

open virus page / reload family page

It is named for Bunyamwera, a town in western Uganda, where it was isolated in 1943.

In endemic areas such as sub-Saharan Africa, seroprevalence has been recorded as high as 82% in some areas.

Bunyamwera virus (BUNV) is present on both the African and South American continents.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "BUNV")

open virus page / reload family page

In the United States, about 80–100 LACV disease cases are reported each year, although it is believed to be under-reported due to minimal symptoms experienced by many of those affected.

LAC encephalitis is rare. Death from LAC encephalitis occurs in less than 1% of clinical cases

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "LACV")

open virus page / reload family page

This disease is named after the region where it was first discovered and isolated at the Trinidad Regional Virus Laboratory in 1955 by the Oropouche River in Trinidad and Tobago.

The virus is considered a public health threat in tropical and subtropical areas of Central and South America, with over half a million infected people as of 2005. >30 epidemics during 1960–2009.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "OROV")

open virus page / reload family page

In 1976, the first pathogenic hantavirus, the Hantaan orthohantavirus, was isolated from rodents near the Hantan River in South Korea.

It is the causative agent of Korean hemorrhagic fever in humans. Regions especially affected by HFRS include China, the Korean Peninsula and Russia.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "HTNV")

open virus page / reload family page

Andes orthohantavirus was first identified when outbreaks of this new infection spread throughout Chile and Argentina. It is named for the Andes mountains of Chile and Argentina, where it was first discovered.

In 1995, it was finally characterized in Argentina on the basis of specimens from a patient who had died from HPS complications, a severe consequence of infection from Andes viruses.

As an emerging virus, it is more lethal than that of some of the other hantaviruses having a mortality rate between 40% and 50% in South America.

By far, it has been responsible for the most recorded cases of HPS in Argentina, Chile, and Uruguay combined and contributes to a large number of kidney failure cases.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "ANDV")

open virus page / reload family page

Some people also have lower than normal counts of white blood cells, also called leukopenia and thromobocytopenia.

As of November 2022, more than 60 cases of Heartland virus disease have been reported from states in the Midwestern, Northeastern, and Southern United States.

Most people diagnosed with the disease became sick from May through September.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "HRTV")

open virus page / reload family page

SFTS is an emerging infectious disease that was first described in northeast and central China 2009 and now has also been discovered in Japan, South Korea, Vietnam and Taiwan in 2015.

Another outbreak occurred in East China in the early half of 2020.

SFTS has a fatality rate of 12% and as high as over 30% in some areas.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "SFTSV")

open virus page / reload family page

Most people infected are asymptomatic .

In serious cases that go undiagnosed, acute meningitis, meningoencephalitis and encephalitis may occur. In rare instance, fatal encephalitis has been reported.

Toscana virus was first isolated in 1971 from sand flies collected in the Tuscany region of Italy and first evidence for its propensity to cause human disease was reported in 1983.

This virus is a leading cause of acute meningitis between May and October in Central Italy and in other northern Mediterranean countries (Croatia, France, Greece, Portugal and Spain) as well as several of the eastern Mediterranean countries (Cyprus and Turkey).

It is among the 3 most prevalent viruses associated with meningitis during the warm seasons: the other two are enteroviruses and herpesviruses.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "TOSV")

open virus page / reload family page

Patient are asymptomatic or only a mild illness with fever, headache, muscle pains, and liver abnormalities.

< 2% of cases, the illness can progress to hemorrhagic fever syndrome, meningoencephalitis or affect the eye.

People recover within 2-7 days after onset of symptoms.

1% of people with the disease die of it. Those who have bleeding have a chance of death as high as 50%.

Rift Valley fever virus (RVFV) was originally discovered as the causative agent of an outbreak of ‘enzootic hepatitis’ in 1930 near Lake Naivasha in the Rift Valley of Kenya.

The virus is now endemic throughout multiple African countries and the Arabian Peninsula.

Outbreaks of the disease have only occurred in Africa and Arabia. Outbreaks usually occur during periods of increased rain which increase the number of mosquitoes.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "RVFV")

open virus page / reload family page

The onset of the second phase occurs several days after recovery, and consists of symptoms of meningitis or encephalitis.

The entire illness usually lasts 1 to 3 weeks, nonetheless, temporary or permanent neurological damage is possible in all central nervous system infections, especially in cases of meningoencephalitis.

Chronic infections have not been reported in humans and deaths rarely occur.

Lymphocytic choriomeningitis mammarenavirus (LCMV), was isolated in 1933 by Charles Armstrong during a study of an epidemic in St. Louis. Although not the cause of the outbreak, LCMV was found to be a cause of nonbacterial or aseptic meningitis.

Cases of lymphocytic choriomeningitis have been reported in North and South America, Europe, Australia, and Japan, particularly during the 1900s.

LCMV occurs now worldwide and its natural host, the rodent, has become established on all continents, except Antarctica.

Studies have indicated that human infection of the virus occurs primarily during the fall and winter months, presumably due to the movement of mice indoors.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "LCMV")

open virus page / reload family page

The virus was first described in 1969 from a case in the town of Lassa, in Borno State, Nigeria.

Lassa fever is relatively common in West Africa including the countries of Nigeria, Liberia, Sierra Leone, Guinea, and Ghana.

There are about 300,000 to 500,000 cases which result in 5,000 deaths a year.

Approximately 15%-20% of those who have required hospitalization for Lassa fever die.

The risk of death is greater in those who are pregnant.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "LASV")

open virus page / reload family page

Junin virus infection has a mortality rate between 20 and 30%.

Argentinian mammarenavirus, better known as the Junin virus or Junín virus (JUNV), is an arenavirus that causes Argentine hemorrhagic fever (AHF).

The virus took its original name from the city of Junín, around which the first cases of infection were reported, in 1958.

Since the discovery of Argentinian mammarenavirus in 1958, the geographical distribution of the pathogen, although still confined to Argentina, has expanded. At the time of discovery, Argentinian mammarenavirus was confined to an area of around 15,000 km2. At the beginning of 2000, the region with reported cases grew to around 150,000 km2.

The toolbox for this virus is currently in development. Please contact us via info@virusbankplatform.be for more information.

renderVirusToolbox("bunyaviruses", "JUNV")

open virus page / reload family page