Upload 2 files

depth_interactive_map_alpha.R

@@ -847,13 +847,15 @@ WEB_SPEC <- list(
       list(id = "exposure", label = "Exposure", open = FALSE, cards = list(
         list(title = "Irregular Migration Events (PAM)", kind = "stat", chart = "temporal_pam",
              stats = list(list(id = "n_pam", label = "Recorded irregular migration events", color = COL_COUNT))),
-        list(title = "Migration Intensity (GIIM)", kind = "donut", chart = "donut_giim",
-             note  = "Share of Mexican municipalities by intensity of migration to the USA.")
+        list(title = "Migration Intensity (GIIM)", kind = "breakdown",
+             ui_id = "breakdown_giim",
+             note  = "Number of municipalities by intensity of migration to the USA. Filters apply.")
       )),
-      list(id = "vulnerability", label = "Vulnerability", open = FALSE, cards = list(
-        list(title = "Migrant Support Facilities", kind = "stat", chart = "donut_infra",
+      list(id = "vulnerability", label = "Vulnerability", open = TRUE, cards = list(
+        list(title = "Migrant Support Facilities", kind = "breakdown",
+             ui_id = "breakdown_infra",
              stats = list(list(id = "n_facilities", label = "Active support facilities", color = COL_GREEN)),
-             note  = "Composition of support facilities by type (national).")
+             note  = "Composition of support facilities by type. Filters apply.")
       ))
     )
   )
@@ -1152,8 +1154,15 @@ LUCIDE_JS <- tags$head(
     // We hide them via CSS but keep them in the DOM so .click() still triggers
     // the underlying draw.changeMode() / draw mode behaviour. Our Lucide-icon
     // buttons in #nav-tools-select call drawMode() which forwards the click.
+    // The mode key on our custom buttons matches the maplibre draw mode name
+    // ('polygon', 'rectangle', 'radius', 'line_string'), but the native button
+    // class for line_string is just '.mapbox-gl-draw_line' (no '_string').
+    function nativeDrawClass(modeKey) {
+      return '.mapbox-gl-draw_' + (modeKey === 'line_string' ? 'line' : modeKey);
+    }
+
     function drawMode(modeKey) {
-      var sel = '.mapbox-gl-draw_' + modeKey;
+      var sel = nativeDrawClass(modeKey);
       var nativeBtn = document.querySelector(sel);
       if (!nativeBtn) {
         // Native draw control not yet mounted -- retry briefly
@@ -1170,7 +1179,7 @@ LUCIDE_JS <- tags$head(
 
     function syncDrawButtonStates() {
       ['polygon', 'rectangle', 'radius', 'line_string'].forEach(function(mode) {
-        var native = document.querySelector('.mapbox-gl-draw_' + mode);
+        var native = document.querySelector(nativeDrawClass(mode));
         var custom = document.querySelector('[data-draw=\"' + mode + '\"]');
         if (native && custom) {
           custom.classList.toggle('active', native.classList.contains('active'));
@@ -1178,12 +1187,9 @@ LUCIDE_JS <- tags$head(
       });
     }
 
-    // Watch native draw buttons so our custom state mirrors mode changes
-    // triggered outside our buttons (e.g. when mapgl reverts to simple_select
-    // after a polygon is completed).
     function watchNativeDrawButtons() {
       var natives = document.querySelectorAll(
-        '.mapbox-gl-draw_polygon, .mapbox-gl-draw_rectangle, .mapbox-gl-draw_radius, .mapbox-gl-draw_line_string'
+        '.mapbox-gl-draw_polygon, .mapbox-gl-draw_rectangle, .mapbox-gl-draw_radius, .mapbox-gl-draw_line'
       );
       if (!natives.length) return false;
       var obs = new MutationObserver(syncDrawButtonStates);
@@ -1671,16 +1677,17 @@ render_panel_card <- function(card) {
     stat = tagList(
       lapply(card$stats, function(s)
         dp_stat(s$id, s$label, s$color %||% "#1e293b"))),
-    donut = NULL   # donut renders entirely via plotOutput(chart_id)
+    breakdown = tagList(
+      # Optional stat-row(s) above the list (e.g. total active facilities)
+      if (!is.null(card$stats)) lapply(card$stats, function(s)
+        dp_stat(s$id, s$label, s$color %||% "#1e293b")),
+      uiOutput(card$ui_id %||% paste0("breakdown_", card$ui_id)))
   )
-  # Donut cards are taller (the chart IS the body); other cards keep the
-  # compact 55px sparkline. Half cards have slightly less chrome.
-  chart_h <- if (identical(card$kind, "donut")) "180px" else "55px"
   ind_card(card$title, body,
            chart_id     = card$chart,
            note         = card$note,
            half         = isTRUE(card$half),
-           chart_height = chart_h)
+           chart_height = "55px")
 }
 
 render_panel_groups <- function() {
@@ -2178,9 +2185,29 @@ server <- function(input, output, session) {
     mun_df      = NULL,
     dl_list     = NULL,
     is_national = TRUE,
-    temporal_filter_wkt = NULL
+    temporal_filter_wkt = NULL,
+    # Category distributions for the breakdown cards (GIIM + infra). Both are
+    # data.frame(cat, n) -- repopulated by load_national_totals + run_analysis.
+    dist_giim   = NULL,
+    dist_infra  = NULL
   )
 
+  # Normalise the raw 13 `category` strings into 7 user-meaningful buckets
+  # (mirrors the SQL CASE in WEB_SQL_TEMPLATES$load_infra_pts).
+  normalize_infra_cat <- function(category) {
+    if (length(category) == 0) return(character(0))
+    c_low <- tolower(category)
+    out <- ifelse(category == "Shelter",                                "Shelter",
+          ifelse(c_low %in% c("food","restaurant","lodging"),           "Food & Lodging",
+          ifelse(c_low %in% c("government","embassy"),                  "Government",
+          ifelse(category == "Legal/NGO" | c_low == "charity",          "Legal & Aid",
+          ifelse(c_low == "police",                                     "Police",
+          ifelse(c_low %in% c("hospital","medical"),                    "Health",
+          ifelse(c_low %in% c("religious","place-of-worship"),          "Religious",
+                                                                        "Other")))))))
+    out
+  }
+
   # Quantile-break cache: pre-populated from the app-level cache (loaded at startup).
   # Falls back to an empty list if the cache failed; compute_qbreaks() fills gaps lazily.
   qb <- .APP_CACHE$qb
@@ -2411,6 +2438,12 @@ server <- function(input, output, session) {
 
     rv$mun_df <- tryCatch(DBI::dbGetQuery(con, web_sql("mun_table")),
       error = function(e) data.frame())
+
+    # National GIIM and infra distributions for the breakdown cards.
+    rv$dist_giim <- tryCatch(DBI::dbGetQuery(con, web_sql("donut_giim")),
+      error = function(e) data.frame(cat = character(0), n = integer(0)))
+    rv$dist_infra <- tryCatch(DBI::dbGetQuery(con, web_sql("donut_infra")),
+      error = function(e) data.frame(cat = character(0), n = integer(0)))
   }
 
   load_pts <- function(tbl, limit = 80000) {
@@ -2496,6 +2529,25 @@ server <- function(input, output, session) {
     rv$n_fosas   <- fmt_n(fosas_sum$fosas_n)
     rv$n_cuerpos <- fmt_n(fosas_sum$cuerpos_n)
 
+    # GIIM distribution among the selected municipalities (uses giim_mun from
+    # mun_df, which we already pulled via mun_in_poly).
+    rv$dist_giim <- if (nrow(mun_df) > 0 && "giim_mun" %in% names(mun_df)) {
+      tab <- as.data.frame(table(mun_df$giim_mun, useNA = "no"),
+                           stringsAsFactors = FALSE)
+      names(tab) <- c("cat", "n")
+      tab[order(-tab$n), , drop = FALSE]
+    } else data.frame(cat = character(0), n = integer(0))
+
+    # Infra distribution: count facility points inside the drawn polygon by
+    # normalised category bucket.
+    rv$dist_infra <- if (!is.null(infra_df) && nrow(infra_df) > 0 &&
+                         "category" %in% names(infra_df)) {
+      cats <- normalize_infra_cat(infra_df$category)
+      tab <- as.data.frame(table(cats, useNA = "no"), stringsAsFactors = FALSE)
+      names(tab) <- c("cat", "n")
+      tab[order(-tab$n), , drop = FALSE]
+    } else data.frame(cat = character(0), n = integer(0))
+
     rv$dl_list <- list(
       migrants = migrants_df, graves = graves_df,
       infra    = infra_df,    ocved  = ocved_df,
@@ -3340,51 +3392,69 @@ server <- function(input, output, session) {
       )
   }, bg = "transparent", res = 96)
 
-  # --- Donut helper -----------------------------------------------------------
-  # Renders a transparent-background donut with category-coloured slices.
-  # `df` columns: cat (chr) and n (numeric). `palette` is a named vector
-  # mapping category -> hex.
-  donut_plot <- function(df, palette, center_text = NULL) {
-    if (is.null(df) || nrow(df) == 0) return(NULL)
-    df$cat <- factor(df$cat, levels = names(palette))
-    df <- df[!is.na(df$cat) & df$n > 0, , drop = FALSE]
-    if (nrow(df) == 0) return(NULL)
+  # --- Breakdown card builder ------------------------------------------------
+  # Renders a coloured-text list: swatch | label | tabular value | proportion
+  # bar. Inspired by GitHub's language-breakdown widget. Each row uses the
+  # palette colour for the swatch + bar so the card is visually paired with
+  # the matching map layer.
+  build_breakdown <- function(df, palette, total_label = "Total") {
+    if (is.null(df) || nrow(df) == 0) {
+      return(div(class = "breakdown-empty", "No data in the current selection"))
+    }
+    df  <- df[!is.na(df$cat) & df$n > 0, , drop = FALSE]
+    if (nrow(df) == 0)
+      return(div(class = "breakdown-empty", "No data in the current selection"))
+    # Order: keep the palette order so the visual matches the layer legend.
+    ord <- match(df$cat, names(palette))
+    df  <- df[order(ord, na.last = TRUE), , drop = FALSE]
     total <- sum(df$n)
-    p <- ggplot(df, aes(x = 2, y = n, fill = cat)) +
-      geom_col(width = 1, color = "#ffffff", linewidth = 0.4) +
-      coord_polar(theta = "y", start = 0) +
-      scale_fill_manual(values = palette, drop = FALSE, guide = "none") +
-      xlim(0.4, 2.5) +
-      theme_void() +
-      theme(plot.background  = element_rect(fill = "transparent", color = NA),
-            panel.background = element_rect(fill = "transparent", color = NA),
-            plot.margin      = margin(2, 2, 2, 2))
-    if (!is.null(center_text)) {
-      p <- p + annotate("text", x = 0.4, y = 0,
-                        label = center_text,
-                        family = "Inter", fontface = "bold",
-                        size = 4, color = "#0f172a")
-    }
-    p
+    max_n <- max(df$n)
+    rows  <- lapply(seq_len(nrow(df)), function(i) {
+      nm  <- df$cat[i]
+      n   <- df$n[i]
+      pct <- if (total > 0) n / total else 0
+      bar <- if (max_n > 0) n / max_n else 0
+      col <- palette[nm] %||% "#94a3b8"
+      div(class = "breakdown-row",
+        span(class = "breakdown-swatch", style = paste0("background:", col)),
+        span(class = "breakdown-label", nm),
+        span(class = "breakdown-val",
+             format(n, big.mark = ",", scientific = FALSE)),
+        span(class = "breakdown-pct",
+             formatC(pct * 100, format = "f", digits = 1), "%"),
+        div(class = "breakdown-bar",
+            div(class = "breakdown-fill",
+                style = paste0("width:", bar * 100, "%; background:", col)))
+      )
+    })
+    tagList(
+      div(class = "breakdown-list", rows),
+      div(class = "breakdown-total",
+        span(class = "breakdown-total-label", total_label),
+        span(class = "breakdown-total-val",
+             format(total, big.mark = ",", scientific = FALSE)))
+    )
   }
 
-  # --- GIIM donut (municipalities by migration-intensity category) -----------
-  output$donut_giim <- renderPlot({
-    req(con)
-    df <- tryCatch(DBI::dbGetQuery(con, web_sql("donut_giim")),
-                   error = function(e) NULL)
-    donut_plot(df, GIIM_COLORS,
-               center_text = if (!is.null(df)) format(sum(df$n), big.mark = ",") else NULL)
-  }, bg = "transparent", res = 96)
+  output$breakdown_giim <- renderUI({
+    build_breakdown(rv$dist_giim, GIIM_COLORS,
+                    total_label = "Total municipalities")
+  })
 
-  # --- Infra donut (facilities by INFRA_CATS bucket) -------------------------
-  output$donut_infra <- renderPlot({
-    req(con)
-    df <- tryCatch(DBI::dbGetQuery(con, web_sql("donut_infra")),
-                   error = function(e) NULL)
-    donut_plot(df, INFRA_CATS,
-               center_text = if (!is.null(df)) format(sum(df$n), big.mark = ",") else NULL)
-  }, bg = "transparent", res = 96)
+  output$breakdown_infra <- renderUI({
+    build_breakdown(rv$dist_infra, INFRA_CATS,
+                    total_label = "Total facilities")
+  })
+
+  # Keep all plots/UIs computing even when their parent group is collapsed so
+  # they're ready the moment the user expands the group (no "blank on first
+  # expand"). Cost: a single extra render per session.
+  outputOptions(output, "temporal_pam",    suspendWhenHidden = FALSE)
+  outputOptions(output, "temporal_plot",   suspendWhenHidden = FALSE)
+  outputOptions(output, "temporal_ocved",  suspendWhenHidden = FALSE)
+  outputOptions(output, "temporal_ged",    suspendWhenHidden = FALSE)
+  outputOptions(output, "breakdown_giim",  suspendWhenHidden = FALSE)
+  outputOptions(output, "breakdown_infra", suspendWhenHidden = FALSE)
 
   output$dl_xlsx <- downloadHandler(
     filename = function()

styles.css

@@ -1194,7 +1194,7 @@
 button.mapbox-gl-draw_polygon,
 button.mapbox-gl-draw_rectangle,
 button.mapbox-gl-draw_radius,
-button.mapbox-gl-draw_line_string,
+button.mapbox-gl-draw_line,
 button.mapbox-gl-draw_point,
 button.mapbox-gl-draw_trash,
 button.mapbox-gl-draw_combine,
@@ -2264,3 +2264,128 @@ button.mapbox-gl-draw_uncombine { display: none !important; }
   box-shadow: none !important;
   border: none !important;
 }
+
+/* =========================================================================
+   Breakdown card  -- coloured-text list, replaces donut plots.
+   Each row: swatch | label | tabular value | percentage | proportion bar.
+   ========================================================================= */
+.breakdown-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--space-1) 0 var(--space-2) 0;
+}
+
+.breakdown-row {
+  display: grid;
+  grid-template-columns: 12px 1fr auto auto;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  row-gap: 4px;
+  align-items: center;
+  padding: 4px 2px;
+  border-radius: var(--radius-sm);
+  transition: background var(--t-fast) var(--ease-out);
+}
+
+.breakdown-row:hover {
+  background: var(--c-glass-hover);
+}
+
+.breakdown-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  border: 1px solid oklch(20% 0.01 250 / 0.10);
+  grid-row: 1;
+  grid-column: 1;
+  margin-top: 2px;
+}
+
+.breakdown-label {
+  grid-row: 1;
+  grid-column: 2;
+  font-family: var(--font-ui);
+  font-size: 12px;
+  color: var(--c-text);
+  line-height: 1.35;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.breakdown-val {
+  grid-row: 1;
+  grid-column: 3;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text);
+  letter-spacing: -0.01em;
+  text-align: right;
+}
+
+.breakdown-pct {
+  grid-row: 1;
+  grid-column: 4;
+  font-family: var(--font-ui);
+  font-size: 10.5px;
+  color: var(--c-text-mid);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  min-width: 38px;
+}
+
+.breakdown-bar {
+  grid-row: 2;
+  grid-column: 2 / -1;
+  height: 4px;
+  background: oklch(94% 0.004 250);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.breakdown-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width var(--t-base) var(--ease-out);
+  opacity: 0.85;
+}
+
+.breakdown-empty {
+  padding: var(--space-3) var(--space-2);
+  font-family: var(--font-ui);
+  font-size: 11.5px;
+  color: var(--c-text-dim);
+  text-align: center;
+  font-style: italic;
+}
+
+.breakdown-total {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 8px 4px 2px;
+  margin-top: 6px;
+  border-top: 1px solid var(--c-glass-stroke);
+}
+
+.breakdown-total-label {
+  font-family: var(--font-ui);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text-mid);
+}
+
+.breakdown-total-val {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--c-text);
+  letter-spacing: -0.01em;
+}