inputs-form.qmd

---
title: "Gagarin City Scan Test"
format:
  html:
    theme: [custom.scss, none]
editor: source
execute:
  echo: false
  output: false
---

::: setup
{{< include scrollytelling.qmd >}}

```{ojs}
// Object of forms for interactively adding takeaway bullets
takeaway_inputs = ({})
```

```{r}
#| include: false
# Read functions & packages
# Only the github version of leaflet supports terra, in place of raster, which is now required as sp (on which raster depends) is being deprecated
# devtools::install_github('rstudio/leaflet')
source("fns.R")

# City parameters
city_params <- read_yaml("city_inputs.yml")
# cities <- list.files("cities")
city <- city_params$city_name
city_string <- tolower(city) %>% stringr::str_replace_all(" ", "-")
city_dir <- paste0("cities/", city_string, "/")
output_dir <- paste0(city_dir, "styled-maps/")
# raster_dir <- paste0(city_dir, "/output")
country <- city_params$country

# Visualization parameters
basemap_opacity <- 0.3
legend_opacity <- 0.8
vwidth <- 900
vheight <- vwidth

# this is to enable fractional zoom in mapshot
useragent <- 'Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0'

# Layers
layer_params <- read_yaml('layers.yml')
```


```{r}
#| include: false

# Define the AOI
aoi <- st_read(paste0(city_dir, "AOI"))
aoi_bounds <- st_bbox(aoi)

# Inititate the map here, will build on it in each "slide"
all_maps <- plot_basemap("vector")

# Keep track of added layers
added_layers <- c()
```
:::

::: topbar
# {{< meta title >}}

::: navigation
```{r}
#| output: asis
# Dynamically add sections to table of contents ... there's probably a better way?
sections <- readLines("/Users/bennotkin/Documents/world-bank/crp/city-scans/city-scan-automation/frontend/city-scan-html-sample/index.qmd") %>%
  subset(str_detect(., "^##")) %>% str_replace("# ", "- ") %>% str_replace_all("#", "  ")

anchors <- sections %>% str_extract("^\\s*- (.*$)", group = T) %>% tolower() %>% str_replace_all(c("[^a-z\\s]" = "", "\\s+" = "-")) %>%
  str_replace("(.*)", "(#\\1)")

paste0(str_replace(sections, "(^\\s*- )(.+$)", "\\1[\\2]"), anchors) %>% { cat("- <span id='dynamic-header'>City Scan</span>  &or;", ., sep = "\n") }
```

[Prewritten](https://bennotkin.quarto.pub/city-scan-html-sample/)
:::
:::

::: text-column
# {{< meta title >}}

## Setting the Context

### Basic City Information
```{r}
# Add a map layer? But it's just the AOI
```

```{ojs}
//| output: true
viewof basic_info = Inputs.textarea({placeholder: "Write a description of the city's geography, history, economy and culture. Add styling with markdown.", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.basic_info = basic_info
```

::: footnote
The black boundary marks the area of interest for the City Scan. 
:::

### The State of Urban Infrastructure and Service Delivery

_Insert the infrastructure text here._

## Population and Demographic Trends

### Growth

![](images/oxford-pop-growth.png)

```{ojs}
//| output: true
viewof population_growth = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.population_growth = population_growth
```

Population figures are typically used as a denominator for many indicators, and are a measure of demand for services. The line chart above summarizes the city's population change according to census and other public data. High growth of urban populations, caused by rates of natural increase (more births than deaths) in urban areas, migration from rural to urban areas, and the transformation of rural settlements into urban places, puts pressure on cities to meet the new demand.

### Density

![](images/oxford-pop-density-scatter.png)

```{ojs}
//| output: true
viewof population_density_chart = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.population_density_chart = population_density_chart
```

Density is calculated using the most recent census population recorded and the official land area occupied by the city, and is an important measure of how cities function. Higher population density enables governments to more easily deliver essential infrastructure and services in urban areas at relatively low cost per capita. However, such benefits do not materialize automatically or inevitably. Whether a city's population dynamics pose challenges or offer opportunities typically depends on the policies in play.

::: footnote
Populations and areas are from CityPopulation.de. Note that the extents used by CityPopulation.de may differ from the AOIs used by the City Scans. The area for Gagarin (Combined) uses the combined areas of each of the six included villages; it does not include the space in between.
:::

### Population Distribution by Age & Sex

![](images/world-pop-age-sex.png)

```{ojs}
//| output: true
viewof population_age_sex = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.population_age_sex = population_age_sex
```

This column chart classifies the city's population according to age group, forming the basis of population projections. Populations vary significantly in their proportions of young and old people, with growing populations generally appearing younger, and declining or slowly growing populations generally appearing older.

::: footnote
Data from WorldPop. Bondarenko, et al, Estimates of total number of people per grid square broken down by gender and age groupings for 51 countries across sub-Saharan Africa in 2020 using Ecopia.AI and Maxar Technologies building footprints, 2020.

Reproductive age is defined as 15--49. Working age is defined as 15--64.
:::

### Population Density

```{r}
#| include: false
# Read population data
pop <- fuzzy_read(city_dir, "population")
add_pop_layer <- create_layer_function(data = pop, yaml_key = "population")

all_maps <- add_pop_layer(all_maps)
  # This could be put into the add_*_layer() functions themselves
  # hideGroup("population-density")
added_layers <- c(added_layers, "population-density")
```

```{ojs}
//| output: true
viewof population_density = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.population_density = population_density
```

This map estimates population numbers per 10,000 m^2^ grid cell. It provides a more consistent representation of population distributions across different landscapes than administrative unit counts. Knowing where people are is critical for impact assessments and intervention plans, especially those focused on service delivery, food security, climate change, network systems and natural disasters.

### Relative Wealth Index

```{r}
#| include: false
# Read RWI
rwi <-
  st_read(paste0(city_dir, "output/relative_wealth_index"), quiet = T) %>%
  select(values = rwi, long = longitude, lat = latitude)

# # Using terra intead of sf for consistency
# # Except this doesn't work well because there are multiple value columns so it gets complicated to use programmatically 
# rwi <- vect(paste0(city_dir, "output/relative_wealth_index"))

# rwi_range <- max(c(abs(min(rwi$values)), max(rwi$values))) %>% {c(-., 0, .)}

# rwi_color_scale <- colorNumeric(
#   palette = colorRamp(
#     c('#ED431B', '#FF9169', '#FFFFBA', '#70C5AD', '#009E7A'),
#     interpolate = 'linear'),
#   domain = NULL,
#   na.color = 'transparent')
# 
# add_rwi_layer <- function(map) {
#   map %>% addPolygons(
#     data = rwi,
#     fillColor = ~ rwi_color_scale(values),
#     fillOpacity = 1,
#     stroke = F,
#     group = "rwi",
#     label = ~ values) %>%
#     addLegend(
#       'bottomright',
#       pal = rwi_color_scale,
#       values = c(min(rwi$values, na.rm = T), max(rwi$values, na.rm = T)),
#       opacity = legend_opacity,
#       # bins = 3,  # legend color ramp does not render if there are too many bins
#       title = layer_params$rwi$title,
#       labFormat = labelFormat(),
#       group = "rwi",
#       # Adding classname because hideGroup() doesn't hide legend; see workaround
#       # here: https://github.com/rstudio/leaflet/issues/477#issuecomment-678542769
#       className = "info legend rwi"
#       )
# }
# 
# plot_basemap() %>% add_rwi_layer() %>%
#    htmlwidgets::onRender("
#       function(el, x) {
#          var updateLegend = function () {
#             var selectedGroup = document.querySelectorAll('input:checked')[0].nextSibling.innerText.substr(1);
# 
#             document.querySelectorAll('.legend').forEach(a => a.hidden=true);
#             document.querySelectorAll('.legend').forEach(l => {
#                if (l.classList.contains(selectedGroup)) l.hidden=false;
#             });
#          };
#          updateLegend();
#          this.on('overlayremove', el => updateLegend());
#       }") %>%
#   hideGroup("rwi")

add_rwi_layer <- create_layer_function(
  data = rwi, yaml_key = "rwi",
  labFormat = labelFormat(digits = 1))

all_maps <- add_rwi_layer(all_maps)
  # This could be put into the add_*_layer() functions themselves
  # hideGroup("relative-wealth-index")
added_layers <- c(added_layers, layer_params[["rwi"]]$group)
```

```{ojs}
//| output: true
viewof rwi = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.rwi = rwi
```

This map shows micro-estimates of wealth and poverty relative to the whole country that cover the populated surface at a 2.4 km^2^ resolution. Many critical policy decisions, from strategic investments to the allocation of humanitarian aid, rely on data about the geographic distribution of wealth and poverty.

::: footnote
Map data from Meta Data for Good.
:::

## Economic Activity

### Economic Hotspots
```{r}
economic_activity <- fuzzy_read(city_dir, "avg_rad_sum")

add_economic_activity_layer <- create_layer_function(
  data = economic_activity, yaml_key = "economic-activity",
  labFormat = labelFormat(digits = 2))
all_maps <- add_economic_activity_layer(all_maps)
added_layers <- c(added_layers, layer_params[["economic-activity"]]$group)
```

```{ojs}
//| output: true
viewof economic_hotspots = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.economic_hotspots = economic_hotspots
```

This map measures the total emissions of nighttime lights from the monthly average of radiance for 2014 through 2022. Nighttime light radiance is a common proxy for economic activity: where there is more artificial light, there is generally more commercial activity.

::: footnote
Map data from NOAA, “VIIRS Daily Mosaic”.
:::

### Change in Economic Hotspots
```{r}
economic_change <- fuzzy_read(city_dir, "linfit")
add_economic_change_layer <- create_layer_function(data = economic_change, yaml_key = "economic-change")
all_maps <- add_economic_change_layer(all_maps)
added_layers <- c(added_layers, layer_params[["economic-change"]]$group)
```

```{ojs}
//| output: true
viewof economic_change = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.economic_change = economic_change
```

The map illustrates monthly temporal changes from 2014 to 2022 in the emission of nighttime lights, indicating changes in economic activity. Positive values represent an increase in the intensity of nighttime light emission and, by proxy, economic activity, while negative values represent a decrease in the intensity of nighttime light emission, and economic activity.

::: footnote
Map data from NOAA, “VIIRS Daily Mosaic”.
:::

## Built Form

### Urban Extent and Change
```{r}
wsf <- fuzzy_read(city_dir, "WSF.*4326")
values(wsf)[values(wsf) == 0] <- NA
add_wsf_layer <- create_layer_function(data = wsf, yaml_key = "wsf")
all_maps <- add_wsf_layer(all_maps)
added_layers <- c(added_layers, layer_params[["wsf"]]$group)
```

```{ojs}
//| output: true
viewof wsf = Inputs.textarea({placeholder: "What are the key takeaways from this data?", width: "100%"})
// I could set submit: true to require a submit button, but I think it's easier if they don't have to
// Only helpful if we're doing something other than letting them record everything at the end
```

```{ojs}
// This compiles the form results together
takeaway_inputs.wsf = wsf
```

::: footnote
Map data from DLR, 2015, “World Settlement Footprint Evolution - Landsat 5/7 - Global”.
:::

### Now with layers control

Add text

::: footnote
See https://rstudio.github.io/leaflet/showhide.html.
:::

### Land Cover
```{r}
# lc <- fuzzy_read(city_dir, "landcover")

#   lc_values <- c(
#     # 'No data' = 0,
#     'Tree cover' = 10,
#     'Shrubland' = 20,
#     'Grassland' = 30,
#     'Cropland' = 40,
#     'Built-up' = 50,
#     'Bare/sparse vegetation' = 60,
#     'Snow and ice' = 70,
#     'Permanent water bodies' = 80,
#     'Herbaceous wetland' = 90,
#     'Mangroves' = 95)
#   lc_colors <- colorFactor(
#     palette = c(
#       '0'  = 'transparent', # 'No data'
#       '10' = '#277242', # 'Tree cover'
#       '20' = '#DEBA59', # 'Shrubland'
#       '30' = '#79A54F', # 'Grassland'
#       '40' = '#E88B39', # 'Cropland'
#       '50' = '#C62421', # 'Built-up'
#       '60' = '#9C9085', # 'Bare/sparse vegetation'
#       '70' = '#DDDDDD', # 'Snow and ice'
#       '80' = '#2491D7', # 'Permanent water bodies'
#       '90' = '#707CBA', # 'Herbaceous wetland'
#       '95' = '#00C86E', # 'Mangroves'
#       '100' = '#f6e8a1' # 'Moss and Lichen'),
#     levels = c(10*0:9, 95),
#     na.color = '#00000000')

# add_lc_layer <- create_layer_function(data = lc, yaml_key = "lc", color_scale = lc_colors)
# add_lc_layer(all_maps)
```

## Another section

### And a "slide" within it

Text

## Download your bullets

*This should probably be moved to floating button.*

```{ojs}
//| output: true
// Taken from https://observablehq.com/@palewire/saving-json
function serialize (data) {
 let s = JSON.stringify(data);
 return new Blob([s], {type: "application/json"}) 
}

// This is the wrong way to do this. I am refreshing the takeaway_inputs every tenth of a second
// Instead it should only update when someone hits submit or the text changes
{
  DOM.download(serialize(takeaway_inputs), "city-scan-text.json", "Download JSON")
  while (true) {
  await Promises.delay(1000);
  yield DOM.download(serialize(takeaway_inputs), "city-scan-text.json", "Download JSON")
  }
}

// console.log(takeaway_inputs)

// DOM.download(serialize(takeaway_inputs), "city-scan-text.json", "Download JSON")
```
:::

::: maps
```{r}
#| output: true
all_maps %>%
  add_aoi() %>%
  addLayersControl(
    overlayGroups = added_layers,
    options = layersControlOptions(collapsed = FALSE))

  # If I want to use javascript directly I could use htmlwidgets::onRender(),
  # or maybe just an observable cell
```
:::