html`
  <h3>${virus}</h3>
  <p>&nbsp;</p>
`

Symptoms

YFV infection exhibits a broad spectrum of clinical presentations. Some individuals experienced a self-limited or mild febrile illness and a significant portion progress to severe manifestation, including complication of severe hemorrhage and liver diseases.

Among those who developed several diseases 30-60% dies.

Transmission

Medical relevance

Data reported at: Reno, E., Quan, N. G., Franco-Paredes, C., Chastain, D. B., Chauhan, L., Rodriguez-Morales, A. J., & Henao-Martínez, A. F. (2020). Prevention of yellow fever in travellers: an update. The Lancet Infectious Diseases, 20(6), e129–e137. https://doi.org/10.1016/S1473-3099(20)30170-5

Yellow fever virus is estimated to cause 200,000 cases of disease and 30,000 deaths each year, with 90% occurring in Africa.

40 countries are considered endemic and at high-risk for YF outbreaks.

The vaccine from Sanofi Pauster (YF-VAX) is available, the vaccination coverage remains inadequate in endemic areas, especially during outbreaks.

There is any antiviral available to support on the treatment.

Toolbox

renderVirusToolbox("flaviviruses", "YFV")

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>
    `
   }
}