index.qmd

---
pagetitle: "eDNA Expeditions dashboard"
format: 
  html:
    theme: cosmo
    scss: www/custom.scss
    css:
      - www/styles.css
    page-layout: custom
include-in-header:
  - text: |
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
      <link rel="shortcut icon" href="www/favicon.ico"/>
      <script async src="https://www.googletagmanager.com/gtag/js?id=G-F20G736SGB"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-F20G736SGB');
      </script>      
mainfont: Mulish
server: shiny
---

<!-- Header block -->
<div id="title-header">
<img class="me-3" src="www/logos/ioc_white_small.png" />
<div class="d-inline-block"><a href="#" id="home-link">eDNA Expeditions Dashboard</a></div>
</div>

``` {r include=FALSE}
suppressPackageStartupMessages(library(shiny))
suppressPackageStartupMessages(library(leaflet))
suppressPackageStartupMessages(library(dplyr))
suppressPackageStartupMessages(library(DT))
suppressPackageStartupMessages(library(reactable))
suppressPackageStartupMessages(library(bslib))
source("R/iucn.R")
source("R/groups.R")

# Load json
sites <- jsonlite::read_json("https://raw.githubusercontent.com/iobis/edna-tracker-data/data/generated.json")
sites_list <- sites$sites
sites_samples <- sites$samples

sites_names <- sapply(sites_list, function(x) x$name)
sites_names <- sites_names[sites_names != "Sanganeb Marine National Park and Dungonab Bay – Mukkawar Island Marine National Park"]
sites_names <- sites_names[order(sites_names)]

localities <- sites_samples %>% bind_rows() %>% select(area_name, area_locality, parent_area_name, station, lon = area_longitude, lat = area_latitude)

taxonLevels <- c("ASV", "kingdom", "phylum", "order", "class", "family", "genus", "species")

alpha_measure <- c("Observed", "Chao1", "Shannon", "Simpson")

beta_measure <- c("bray", "jaccard")

plot_type <- c("relative abundance", "reads")
```

``` {r}
#| height: 200px
htmltools::includeScript("www/script.js")
waiter::useWaiter()
leafletOutput("mainMap")
```

<!-- Selector block -->
::: {id='post-map'}
``` {r}
htmltools::div(
htmltools::tags$div(
  htmltools::div(
    selectInput("higherGeography", "Site:", c("Select a site" = "", sites_names)),
    class = "navbar-dropdown-top",
    id = "top-selector-new"
   ), id = "top-selector-parent"
),
htmltools::span(
  htmltools::span(
    textOutput("whs_front_code"),
    style = "display: flex; font-weight: bold; font-color: #cccccc;"
  ), htmltools::HTML("&nbsp;"), htmlOutput("whs_front_website"),  class = "tab-post-map-add"
), class = "tab-post-map")
```
:::

<!-- Start of content -->
::: {id='content'}

`r tags$div(class="site-title", textOutput("higherGeography"))`

<!-- Start of top grid -->
::: {.grid}

<!-- Text column -->
::: {id='text-column'}

`r tags$div(class="site-text", uiOutput("siteDescription"))`

<br>

``` {r}
shiny::conditionalPanel("input.higherGeography != ''",
htmltools::div(
  tags$div(HTML(paste0('<span><i class="fa fa-calendar" style = "color:#8e8e8e;"></i> Sampling date: ', textOutput("eventDate", inline = T), '</span>'))),
  tags$div(HTML(paste0('<span><i class="fa fa-dna" style = "color:#8e8e8e;"></i> Number of samples: ', textOutput("eventSamples", inline = T), '</span>')))
), style = "color: #8e8e8e;"
)
```

<br>

:::

<!-- Stats column -->
::: {id='stats-column'}

::: {.panel-tabset}

## Statistics

``` {r}
source("R/value_box_gen.R")

htmltools::div(
  uiOutput("valueBoxes", style = "width: 100%;"),
  style = "display: flex; flex-direction: column;  align-items: center; width: 100%; "
)

```

## Pictures

`r htmlOutput("imageGalleryFront")`

## Data

<!-- Download for general case-->
::: {id="data-front" data-display-if="input.higherGeography == ''"}
You can download all data from the eDNA expeditions through our <span class="data-links">[AWS S3 bucket](https://obis-edna-lists.s3.amazonaws.com/index.html){target='_blank'} </span>.

You can also explore the technical documentation on our GitHub repository:<br> `r htmltools::span(bsicons::bs_icon("github"), htmltools::a("iobis/edna-expeditions", href="https://github.com/iobis/edna-expeditions", target="_blank"), class="data-links")`
:::

<!-- Download for sites case-->
::: {id="data-front" data-display-if="input.higherGeography != ''"}

``` {r}
htmltools::div(
        htmltools::span(
            bsicons::bs_icon("list-columns-reverse"),
            shiny::htmlOutput("dataDownload", inline = T),
        class="data-links-black"), htmltools::br(), htmltools::br(),
        htmltools::span(
            bsicons::bs_icon("github"),
            htmltools::a("Check the documentation", href="https://github.com/iobis/edna-expeditions",
            target="_blank"),
        class="data-links-black")
    )
```

:::

:::

:::

:::

<!-- End of content-->
:::

<!-- Start of tabset -->
::: {id='tabset-container'} 

<span class='results-title'>Explore the results</span>

::: {data-display-if="input.higherGeography == ''" id="home-waiting"}
<span style="font-size: 24px;">Select a site to start at the top of this page.</span>
:::

::: {id='tabset-inside' data-display-if="input.higherGeography != ''"}

::: {.panel-tabset}

## Species

{{< include modules/species.qmd >}}

## Taxonomy

{{< include modules/taxonomy.qmd >}}

## Diversity metrics

{{< include modules/diversity.qmd >}}

## Samples

{{< include modules/sample.qmd >}}

## Climate

{{< include modules/climate.qmd >}}

:::

:::

:::

{{< include modules/server.qmd >}}

<div id="footer-tab">
<div class="grid">
<div class="g-col-12 g-col-md-5" id="logos">
<img src="www/logos/ioc.png" />
<img src="www/logos/flanders.png" />
</div>
<div class="g-col-12 g-col-md-7">
<p>eDNA Expeditions is a global, citizen science initiative that will help measure marine biodiversity, and the impacts climate change might have on the distribution patterns of marine life, across UNESCO World Heritage marine sites. The UNESCO eDNA Expeditions is a three year project (2022-2024) funded by the Flanders Government, through the Flanders UNESCO Science Trust Fund (FUST) and the General Trust Fund (FUT).</p>
</div>
</div>
</div>