Upload 2 files

depth_interactive_map_alpha.R

@@ -256,34 +256,37 @@ POBREZA_COLS <- list(
 #                sums pam_n so the line tracks total events not muni-row count)
 #   color     -- line/series colour matching the map layer paint
 #   kind      -- "point" (client-side set_filter) or "polygon" (server re-query)
+# Temporal layers carry month-level resolution. The encoding `ym = year*12 +
+# month - 1` packs (year, month) into a single integer the Shiny slider can
+# step through one month at a time. Decode: `year = ym %/% 12`, `month = ym %% 12 + 1`.
+# Example: Jan 2010 = 24120, Dec 2026 = 24323.
 TEMPORAL_LAYERS <- list(
   "migrants-pts" = list(label = "Missing migrants", color = COL_YEL,
-                        table = "migrants",     year_col = "incident_year",
-                        # year_expr drives both cache + point loader. Same DuckDB
-                        # expression in both places so the chart and the map agree.
-                        year_expr      = "incident_year",
-                        point_yr_expr  = "incident_year",
+                        table = "migrants",
+                        # ym_expr drives both the chart cache and the point
+                        # loader; same DuckDB expression in both places so the
+                        # chart axis and the map filter agree.
+                        ym_expr        = "incident_year * 12 + CAST(SUBSTR(month, 6, 2) AS INTEGER) - 1",
+                        point_ym_expr  = "incident_year * 12 + CAST(SUBSTR(month, 6, 2) AS INTEGER) - 1",
                         kind = "point"),
   "ocved-pts"    = list(label = "OCVED violence",  color = COL_AMBER,
-                        table = "ocved_events", year_col = "year",
-                        year_expr      = "CAST(SUBSTR(date_str, 1, 4) AS INTEGER)",
-                        point_yr_expr  = "CAST(SUBSTR(date_str, 1, 4) AS INTEGER)",
+                        table = "ocved_events",
+                        ym_expr        = "CAST(SUBSTR(date_str, 1, 4) AS INTEGER) * 12 + CAST(SUBSTR(date_str, 6, 2) AS INTEGER) - 1",
+                        point_ym_expr  = "CAST(SUBSTR(date_str, 1, 4) AS INTEGER) * 12 + CAST(SUBSTR(date_str, 6, 2) AS INTEGER) - 1",
                         kind = "point"),
   "ged-pts"      = list(label = "GED conflict",    color = COL_LIGHT_BLUE,
-                        table = "ged_events",   year_col = "year",
-                        year_expr      = "CAST(date_part('year', date_start) AS INTEGER)",
-                        point_yr_expr  = "CAST(date_part('year', date_start) AS INTEGER)",
+                        table = "ged_events",
+                        ym_expr        = "CAST(date_part('year', date_start) AS INTEGER) * 12 + CAST(date_part('month', date_start) AS INTEGER) - 1",
+                        point_ym_expr  = "CAST(date_part('year', date_start) AS INTEGER) * 12 + CAST(date_part('month', date_start) AS INTEGER) - 1",
                         kind = "point"),
   "pam-choro"    = list(label = "PAM events",      color = COL_COUNT,
                         table = "dim_pam_mun",
-                        year_col  = "yr",
-                        year_expr = "CAST(date_part('year', date) AS INTEGER)",
+                        ym_expr   = "CAST(date_part('year', date) AS INTEGER) * 12 + CAST(date_part('month', date) AS INTEGER) - 1",
                         agg       = "SUM(pam_n)",
                         kind      = "polygon")
 )
-# Outer bounds for the slider (union across the four tables, with a safety
-# margin). Inner per-layer ranges are computed at startup from the data.
-TEMPORAL_RANGE <- c(2010L, 2026L)
+# Outer bounds for the slider in ym encoding: Jan 2010 .. Dec 2026.
+TEMPORAL_RANGE <- c(2010L * 12L, 2026L * 12L + 11L)
 
 #######################################################################################
 # WEB_SQL -- canonical query templates (single source for Shiny + docs converter)
@@ -338,12 +341,11 @@ WEB_SQL_TEMPLATES <- list(
      WHERE lon IS NOT NULL AND lat IS NOT NULL
      LIMIT {limit}",
 
-  # Year-bearing variant: returns a `yr` column the client filter can read.
-  # `yr_expr` is whatever DuckDB expression yields the integer year for that
-  # table (e.g. plain column, SUBSTR of date_str, date_part of timestamp).
-  load_pts_with_year =
+  # Month-year variant: returns a `ym` column the client filter can read.
+  # `ym_expr` is the DuckDB expression that yields ym = year*12 + month - 1.
+  load_pts_with_ym =
     "SELECT row_number() OVER () AS row_id, lon, lat,
-            {yr_expr} AS yr
+            {ym_expr} AS ym
      FROM {tbl}
      WHERE lon IS NOT NULL AND lat IS NOT NULL
      LIMIT {limit}",
@@ -587,20 +589,20 @@ WEB_SQL_TEMPLATES <- list(
      WHERE CVEGEO IN ({cvegeo_list})",
 
   # --- Temporal strip support -----------------------------------------------
-  # Counts per year for each of the 4 temporal layers. Used to draw the
-  # histogram in the strip. `yr_expr` is either the raw year column or a
-  # date_part() expression; `agg` is COUNT(*) for point tables / SUM(pam_n)
-  # for PAM. Cached at startup -- they don't change.
-  ts_yr_counts =
-    "SELECT {yr_expr} AS yr, {agg} AS n
+  # Counts per (year, month) for each of the 4 temporal layers. Drives the
+  # mini-chart in the strip. `ym_expr` yields ym = year*12 + month - 1; `agg`
+  # is COUNT(*) for points / SUM(pam_n) for PAM. Cached at startup.
+  ts_ym_counts =
+    "SELECT {ym_expr} AS ym, {agg} AS n
      FROM {tbl}
-     WHERE {yr_col_or_expr} IS NOT NULL
-     GROUP BY yr HAVING yr >= 2000 AND yr <= 2030
-     ORDER BY yr",
-
-  # Year-window-filtered PAM aggregate (used when the user moves the strip
-  # handles). Same shape as src_pam but with a WHERE on date_part(year).
-  src_pam_year =
+     WHERE {ym_expr} IS NOT NULL
+     GROUP BY ym
+     HAVING ym BETWEEN 24000 AND 24400
+     ORDER BY ym",
+
+  # ym-window-filtered PAM aggregate (used when the user moves the strip
+  # handles). Same shape as src_pam but with a WHERE on the ym expression.
+  src_pam_ym =
     "SELECT c.municipio, c.entidad, c.CVEGEO,
             COALESCE(CAST(p.pam_total AS INTEGER), 0) AS pam_n,
             c.wkt
@@ -609,7 +611,8 @@ WEB_SQL_TEMPLATES <- list(
        SELECT CVEGEO, SUM(pam_n) AS pam_total
        FROM dim_pam_mun
        WHERE date IS NOT NULL
-         AND CAST(date_part('year', date) AS INTEGER) BETWEEN {yr_lo} AND {yr_hi}
+         AND (CAST(date_part('year', date) AS INTEGER) * 12 +
+              CAST(date_part('month', date) AS INTEGER) - 1) BETWEEN {ym_lo} AND {ym_hi}
        GROUP BY CVEGEO
      ) p ON c.CVEGEO = p.CVEGEO",
 
@@ -850,15 +853,14 @@ ddb_minmax <- function(con, tbl, col, filter_zero = TRUE) {
       fosas  = ddb_minmax(con, "dim_fosas_mun",  "fosas_total",                TRUE),
       envipe = ddb_minmax(con, "state_polygons", "perception_insecurity_perc", FALSE)
     ),
-    # Per-year counts for each temporal-strip layer. Each entry is a tidy
-    # data.frame(yr, n) or NULL when the table isn't available.
+    # Per-month counts for each temporal-strip layer. Each entry is a tidy
+    # data.frame(ym, n) or NULL when the table isn't available.
     temporal = lapply(TEMPORAL_LAYERS, function(info) {
-      yr_expr  <- info$year_expr %||% info$year_col
+      ym_expr  <- info$ym_expr
       agg_expr <- info$agg %||% "COUNT(*)"
       sql <- glue::glue_data(
-        list(yr_expr = yr_expr, agg = agg_expr,
-             tbl = info$table, yr_col_or_expr = yr_expr),
-        WEB_SQL_TEMPLATES$ts_yr_counts,
+        list(ym_expr = ym_expr, agg = agg_expr, tbl = info$table),
+        WEB_SQL_TEMPLATES$ts_ym_counts,
         .open = "{", .close = "}"
       )
       tryCatch(DBI::dbGetQuery(con, sql),
@@ -1445,11 +1447,24 @@ LUCIDE_JS <- tags$head(
       icon.innerHTML = hidden ? '&#9650;' : '&#9660;';
     }
 
+    // Flag: first call comes from the init() pass and just reflects the default
+    // map state -- no lazy-load fires for those layers, so don't spin.
+    var _uaLayersInited = false;
     function updateActiveLayers() {
       var checked = [];
       document.querySelectorAll('.layer-check:checked').forEach(function(cb) {
         checked.push(cb.value);
+        var wrap = cb.closest('.acc-item-wrap');
+        if (!wrap) return;
+        if (!_uaLayersInited) {
+          // Default-on layers are already on the map at startup -- no spinner.
+          wrap.classList.add('is-loaded');
+        } else if (!wrap.classList.contains('is-loaded')) {
+          // First-time toggle: show spinner until the server confirms.
+          wrap.classList.add('is-loading');
+        }
       });
+      _uaLayersInited = true;
       // Sync legend visibility: use class so CSS controls display type per legend shape
       document.querySelectorAll('.acc-item-wrap').forEach(function(wrap) {
         var input    = wrap.querySelector('.acc-toggle-input');
@@ -1467,27 +1482,51 @@ LUCIDE_JS <- tags$head(
       if (typeof syncTemporalStrip === 'function') syncTemporalStrip(checked);
     }
 
-    // -- Temporal strip: bottom-of-map year-range filter ------------------------
-    // _temporal.active holds the LAST 2 toggled-on temporal layers (most recent
-    // first). The chart and the dual y-axis follow them. yrLo/yrHi drive the
-    // map filter for those layers (client-side for points, server for PAM).
+    // Server sends `layer_loaded` after a lazy_add_* finishes the first dbGetQuery
+    // + add_layer round-trip. Clear the spinner and remember the layer as loaded
+    // so re-toggles don't show the spinner again.
+    if (typeof Shiny !== 'undefined' && Shiny.addCustomMessageHandler) {
+      Shiny.addCustomMessageHandler('layer_loaded', function(msg) {
+        if (!msg || !msg.layer_id) return;
+        var wraps = document.querySelectorAll('.acc-item-wrap');
+        for (var i = 0; i < wraps.length; i++) {
+          if (wraps[i].getAttribute('data-layer-id') === msg.layer_id) {
+            wraps[i].classList.remove('is-loading');
+            wraps[i].classList.add('is-loaded');
+            break;
+          }
+        }
+      });
+    }
+
+    // -- Temporal strip: bottom-of-map month-year range filter ------------------
+    // _temporal.active holds the LAST 2 toggled-on temporal layers (most-recent
+    // first). The chart follows only the most-recent one. ymLo/ymHi drive the
+    // map filter (client-side for points, server for PAM). ym encoding:
+    // ym = year * 12 + month - 1  (Jan 2010 = 24120, Dec 2026 = 24323).
     var TEMPORAL_LAYER_IDS = ['migrants-pts','ocved-pts','ged-pts','pam-choro'];
-    // All three point layers now load a unified 'yr' property via the
-    // load_pts_with_year SQL template, so the client filter doesn't have to
-    // know each table's underlying year column.
+    // Point layers carry a unified 'ym' feature property via load_pts_with_ym
+    // so the client filter doesn't need to know each table's date format.
     var TEMPORAL_POINT_COL = {
-      'migrants-pts': 'yr',
-      'ocved-pts':    'yr',
-      'ged-pts':      'yr'
+      'migrants-pts': 'ym',
+      'ocved-pts':    'ym',
+      'ged-pts':      'ym'
     };
     var _temporal = {
       active: [],   // most-recent-first
-      yrLo: null,
-      yrHi: null,
+      ymLo: null,
+      ymHi: null,
       playing: false,
       playTimer: null
     };
 
+    // Format a ym integer back to year-dash-month (e.g. 2014-03) for the label.
+    function _ymFmt(v) {
+      var y = Math.floor(v / 12);
+      var m = (v % 12) + 1;
+      return y + '-' + (m < 10 ? '0' + m : '' + m);
+    }
+
     function syncTemporalStrip(checkedIds) {
       // Derive the active layer set from the DOM if the caller didn't pass it.
       if (!checkedIds) {
@@ -1516,11 +1555,12 @@ LUCIDE_JS <- tags$head(
       var becameVisible = stripVisible &&
                           (!strip || strip.style.display !== 'flex');
       if (strip) strip.style.display = stripVisible ? 'flex' : 'none';
-      // First time the strip is shown in this session, ensure Lucide swapped
-      // the play-icon placeholder into an SVG. After that, refresh on every
-      // paint so the play/pause toggle stays up to date.
-      if (becameVisible && window.lucide) {
-        setTimeout(function() { lucide.createIcons(); }, 30);
+      // First time the strip is shown in this session, refresh Lucide so the
+      // play placeholder swaps into an SVG, and force the label + fill to
+      // reflect the current slider values (server-side renders a placeholder).
+      if (becameVisible) {
+        if (window.lucide) setTimeout(function() { lucide.createIcons(); }, 30);
+        onTemporalSliderInput();
       }
       // Tell Shiny which layers the chart should draw (server reactive)
       if (typeof Shiny !== 'undefined') {
@@ -1536,7 +1576,7 @@ LUCIDE_JS <- tags$head(
       return widget.map || (widget.getMap && widget.getMap()) || null;
     }
 
-    function applyTemporalFilterClient(layerId, yrLo, yrHi) {
+    function applyTemporalFilterClient(layerId, ymLo, ymHi) {
       var m = _getMap();
       if (!m || !m.getLayer || !m.getLayer(layerId)) return;
       var col = TEMPORAL_POINT_COL[layerId];
@@ -1544,12 +1584,12 @@ LUCIDE_JS <- tags$head(
       // Full-range = clear the filter so feature culling is fastest
       var startMin = parseInt(document.getElementById('temporal-start').min, 10);
       var endMax   = parseInt(document.getElementById('temporal-end').max, 10);
-      if (yrLo <= startMin && yrHi >= endMax) {
+      if (ymLo <= startMin && ymHi >= endMax) {
         m.setFilter(layerId, null);
       } else {
         m.setFilter(layerId, ['all',
-          ['>=', ['to-number', ['get', col]], yrLo],
-          ['<=', ['to-number', ['get', col]], yrHi]
+          ['>=', ['to-number', ['get', col]], ymLo],
+          ['<=', ['to-number', ['get', col]], ymHi]
         ]);
       }
     }
@@ -1558,18 +1598,18 @@ LUCIDE_JS <- tags$head(
       var startEl = document.getElementById('temporal-start');
       var endEl   = document.getElementById('temporal-end');
       if (!startEl || !endEl) return;
-      var yrLo = parseInt(startEl.value, 10);
-      var yrHi = parseInt(endEl.value,   10);
-      if (yrLo > yrHi) { var t = yrLo; yrLo = yrHi; yrHi = t; }
-      _temporal.yrLo = yrLo; _temporal.yrHi = yrHi;
+      var ymLo = parseInt(startEl.value, 10);
+      var ymHi = parseInt(endEl.value,   10);
+      if (ymLo > ymHi) { var t = ymLo; ymLo = ymHi; ymHi = t; }
+      _temporal.ymLo = ymLo; _temporal.ymHi = ymHi;
       // Client: apply for each active POINT layer
       _temporal.active.forEach(function(id) {
-        if (TEMPORAL_POINT_COL[id]) applyTemporalFilterClient(id, yrLo, yrHi);
+        if (TEMPORAL_POINT_COL[id]) applyTemporalFilterClient(id, ymLo, ymHi);
       });
       // Server: send range so PAM can re-query if it's active
       if (typeof Shiny !== 'undefined') {
         Shiny.setInputValue('temporal_filter', {
-          start: yrLo, end: yrHi, active: _temporal.active, ts: Date.now()
+          start: ymLo, end: ymHi, active: _temporal.active, ts: Date.now()
         }, { priority: 'event' });
       }
     }
@@ -1587,7 +1627,7 @@ LUCIDE_JS <- tags$head(
         if (document.activeElement === startEl) { hi = lo; endEl.value = hi; }
         else                                     { lo = hi; startEl.value = lo; }
       }
-      if (label) label.textContent = lo + ' — ' + hi;
+      if (label) label.textContent = _ymFmt(lo) + '  --  ' + _ymFmt(hi);
       if (fill) {
         var min = parseInt(startEl.min, 10);
         var max = parseInt(startEl.max, 10);
@@ -2135,6 +2175,7 @@ acc_group <- function(id, label, items_list, open = TRUE) {
 acc_layer <- function(value, label, tooltip = NULL, legend = NULL, checked = FALSE,
                       legend_extras = NULL) {
   div(class = "acc-item-wrap",
+    `data-layer-id` = value,
     div(class = "acc-item",
       tags$label(class = "acc-toggle-label",
         tags$input(
@@ -2712,7 +2753,7 @@ ui <- page_fillable(
       div(id = "temporal-strip", class = "temporal-strip",
           style = "display:none;",
           role  = "region",
-          `aria-label` = "Temporal year-range filter",
+          `aria-label` = "Temporal month-year range filter",
           div(class = "temporal-strip-chart",
               plotOutput("temporal_strip_chart",
                          width = "100%", height = "85px")),
@@ -2736,7 +2777,7 @@ ui <- page_fillable(
                              step  = "1",
                              value = TEMPORAL_RANGE[1],
                              oninput = "onTemporalSliderInput()",
-                             `aria-label` = "Start year"),
+                             `aria-label` = "Start month"),
                   tags$input(type  = "range",
                              id    = "temporal-end",
                              class = "temporal-slider-input temporal-slider-end",
@@ -2745,16 +2786,17 @@ ui <- page_fillable(
                              step  = "1",
                              value = TEMPORAL_RANGE[2],
                              oninput = "onTemporalSliderInput()",
-                             `aria-label` = "End year")),
+                             `aria-label` = "End month")),
               tags$span(id = "temporal-year-label",
                         class = "temporal-year-label",
-                        paste0(TEMPORAL_RANGE[1], " — ", TEMPORAL_RANGE[2])),
+                        # Placeholder; JS fills with "YYYY-MM -- YYYY-MM" on init.
+                        "----"),
               tags$button(id = "temporal-reset-btn",
                           type = "button",
                           class = "temporal-reset-btn",
                           onclick = "resetTemporalRange()",
                           `aria-label` = "Reset to full range",
-                          title = "Reset to all years",
+                          title = "Reset to full range",
                           "All"))
       ),
 
@@ -3385,15 +3427,15 @@ server <- function(input, output, session) {
       error = function(e) data.frame(cat = character(0), n = integer(0)))
   }
 
-  # Year-bearing point loader: selects `yr` as an extra column so the client
-  # filter can read it via ['get', 'yr'].
-  load_pts_with_year <- function(tbl, yr_expr, limit = 80000) {
+  # Month-year point loader: selects `ym` as an extra column so the client
+  # filter can read it via ['get', 'ym'].
+  load_pts_with_ym <- function(tbl, ym_expr, limit = 80000) {
     tryCatch({
-      DBI::dbGetQuery(con, web_sql("load_pts_with_year",
-                                    tbl = tbl, yr_expr = yr_expr, limit = limit)) |>
+      DBI::dbGetQuery(con, web_sql("load_pts_with_ym",
+                                    tbl = tbl, ym_expr = ym_expr, limit = limit)) |>
         sf::st_as_sf(coords = c("lon", "lat"), crs = 4326)
     }, error = function(e) {
-      message("  [pts+yr] ", tbl, ": ", e$message); NULL
+      message("  [pts+ym] ", tbl, ": ", e$message); NULL
     })
   }
 
@@ -3848,7 +3890,7 @@ server <- function(input, output, session) {
     }
   }, ignoreNULL = TRUE, ignoreInit = TRUE)
 
-  # Lazy layer loader helpers — load on first use via proxy.
+  # Lazy layer loader helpers -- load on first use via proxy.
   lazy_add_fill <- function(key, sql_name, id, make_layer_fn) {
     if (isTRUE(lazy_added[[key]]) || is.null(con)) return()
     sf_data <- tryCatch({
@@ -3859,12 +3901,13 @@ server <- function(input, output, session) {
     if (!is.null(sf_data)) {
       make_layer_fn(maplibre_proxy("map"), sf_data)
       lazy_added[[key]] <<- TRUE
+      session$sendCustomMessage("layer_loaded", list(layer_id = id))
     }
   }
   lazy_add_pts <- function(key, tbl, id, color, radius = 2, limit = 80000,
-                            yr_expr = NULL) {
+                            ym_expr = NULL) {
     if (isTRUE(lazy_added[[key]]) || is.null(con)) return()
-    pts <- if (!is.null(yr_expr)) load_pts_with_year(tbl, yr_expr, limit)
+    pts <- if (!is.null(ym_expr)) load_pts_with_ym(tbl, ym_expr, limit)
            else                   load_pts(tbl, limit)
     if (!is.null(pts)) {
       maplibre_proxy("map") |>
@@ -3877,6 +3920,7 @@ server <- function(input, output, session) {
           visibility = if (id %in% (input$active_layers %||% "")) "visible" else "none"
         )
       lazy_added[[key]] <<- TRUE
+      session$sendCustomMessage("layer_loaded", list(layer_id = id))
     }
   }
 
@@ -3898,6 +3942,7 @@ server <- function(input, output, session) {
           visibility   = if ("infra-pts" %in% (input$active_layers %||% "")) "visible" else "none"
         )
       lazy_added$infra <<- TRUE
+      session$sendCustomMessage("layer_loaded", list(layer_id = "infra-pts"))
     }
   }
   lazy_add_grid <- function(nv_chr) {
@@ -4012,13 +4057,13 @@ server <- function(input, output, session) {
 
       # Point layers
       if ("migrants-pts" %in% active) lazy_add_pts("migrants", "migrants",               "migrants-pts", COL_YEL,        2, 8000,
-                                                    yr_expr = TEMPORAL_LAYERS[["migrants-pts"]]$point_yr_expr)
+                                                    ym_expr = TEMPORAL_LAYERS[["migrants-pts"]]$point_ym_expr)
       if ("graves-pts"   %in% active) lazy_add_pts("graves",   "graves",                 "graves-pts",   COL_RED,        2, 5000)
       if ("infra-pts"    %in% active) lazy_add_infra()
       if ("ocved-pts"    %in% active) lazy_add_pts("ocved",    "ocved_events",           "ocved-pts",    COL_AMBER,      1, 80000,
-                                                    yr_expr = TEMPORAL_LAYERS[["ocved-pts"]]$point_yr_expr)
+                                                    ym_expr = TEMPORAL_LAYERS[["ocved-pts"]]$point_ym_expr)
       if ("ged-pts"      %in% active) lazy_add_pts("ged",      "ged_events",             "ged-pts",      COL_LIGHT_BLUE, 1, 80000,
-                                                    yr_expr = TEMPORAL_LAYERS[["ged-pts"]]$point_yr_expr)
+                                                    ym_expr = TEMPORAL_LAYERS[["ged-pts"]]$point_ym_expr)
 
       # Grid: only load the nivel the user actually selected. Loading all three
       # eagerly used to make first-click block the session on HF (3 sequential
@@ -4378,101 +4423,74 @@ server <- function(input, output, session) {
   output$temporal_ocved <- make_temporal_yr("ocved_events", "year", COL_AMBER)
   output$temporal_ged   <- make_temporal_yr("ged_events",   "year", COL_LIGHT_BLUE)
 
-  # --- Temporal strip chart (bottom-of-map year-range filter) ---------------
-  # Renders up to 2 lines from .APP_CACHE$temporal, one per active temporal
-  # layer (active list driven by input$temporal_active). When 2 are active,
-  # the chart has dual y-axes (left = first/primary, right = secondary)
-  # because event magnitudes differ wildly (PAM ~1.6M vs migrants ~6k).
+  # --- Temporal strip chart (bottom-of-map month-year range filter) -----------
+  # Single layer (the most-recently toggled). Mirrors the analysis-panel
+  # temporal plots: subtle area, full line for the in-range window, ghost line
+  # for out-of-range months. No dual y-axis, no legend.
   output$temporal_strip_chart <- renderPlot({
     active <- input$temporal_active %||% character(0)
     if (length(active) == 0) return(NULL)
-    yr_range  <- TEMPORAL_RANGE
-    rect_df   <- {
-      pl <- input$temporal_filter
-      if (is.null(pl)) NULL
-      else data.frame(xmin = (pl$start %||% yr_range[1]) - 0.5,
-                      xmax = (pl$end   %||% yr_range[2]) + 0.5)
-    }
-    pull_df <- function(id) {
-      df <- .APP_CACHE$temporal[[id]]
-      if (is.null(df) || nrow(df) == 0) return(NULL)
-      info <- TEMPORAL_LAYERS[[id]]
-      data.frame(yr = df$yr, n = df$n, layer = info$label,
-                 color = info$color, stringsAsFactors = FALSE)
-    }
-    primary   <- pull_df(active[1])
-    secondary <- if (length(active) >= 2) pull_df(active[2]) else NULL
-    if (is.null(primary)) return(NULL)
+    primary_id <- active[1]
+    df_all <- .APP_CACHE$temporal[[primary_id]]
+    if (is.null(df_all) || nrow(df_all) == 0) return(NULL)
+    info <- TEMPORAL_LAYERS[[primary_id]]
+    line_color <- info$color
+
+    ym_range <- TEMPORAL_RANGE
+    pl <- input$temporal_filter
+    ym_lo <- if (is.null(pl)) ym_range[1] else (pl$start %||% ym_range[1])
+    ym_hi <- if (is.null(pl)) ym_range[2] else (pl$end   %||% ym_range[2])
+    df_sel <- df_all[df_all$ym >= ym_lo & df_all$ym <= ym_hi, , drop = FALSE]
+
+    # Year-only x ticks: pick every Jan in the data range.
+    yr_lo <- ym_range[1] %/% 12L
+    yr_hi <- ym_range[2] %/% 12L
+    yr_seq <- seq(yr_lo, yr_hi, by = if (yr_hi - yr_lo > 12) 2L else 1L)
+    yr_breaks <- yr_seq * 12L
+    yr_labels <- as.character(yr_seq)
+
+    p <- ggplot(df_all, aes(x = ym, y = n)) +
+      geom_area(fill = line_color, alpha = 0.10, color = NA) +
+      geom_line(color = line_color, linewidth = 0.5, alpha = 0.35)
+    if (nrow(df_sel) > 0)
+      p <- p + geom_line(data = df_sel, aes(x = ym, y = n),
+                          color = line_color, linewidth = 1.1)
 
-    base_thm <- theme_minimal(base_size = 9) +
+    p +
+      scale_x_continuous(breaks = yr_breaks, labels = yr_labels,
+                         limits = c(ym_range[1] - 0.5, ym_range[2] + 0.5),
+                         expand = expansion(mult = c(0, 0))) +
+      scale_y_continuous(expand = expansion(mult = c(0, 0.08))) +
+      labs(x = NULL, y = NULL) +
+      theme_minimal(base_size = 9) +
       theme(plot.background    = element_rect(fill = "transparent", color = NA),
             panel.background   = element_rect(fill = "transparent", color = NA),
             panel.grid         = element_blank(),
-            panel.grid.major.y = element_line(color = "#ffffff20", linewidth = 0.3),
-            axis.title.x       = element_blank(),
+            panel.grid.major.y = element_line(color = "#ffffff14", linewidth = 0.25),
+            axis.title         = element_blank(),
             axis.text.x        = element_text(size = 8, color = "#cbd5e1"),
-            axis.title.y       = element_text(size = 8, color = "#cbd5e1"),
-            axis.text.y        = element_text(size = 7, color = "#94a3b8"),
-            axis.title.y.right = element_text(size = 8, color = "#cbd5e1"),
-            axis.text.y.right  = element_text(size = 7, color = "#94a3b8"),
+            axis.text.y        = element_blank(),
             axis.ticks         = element_blank(),
             legend.position    = "none",
-            plot.margin        = margin(2, 8, 2, 8))
-
-    p <- ggplot()
-    if (!is.null(rect_df))
-      p <- p + geom_rect(data = rect_df,
-                         aes(xmin = xmin, xmax = xmax,
-                             ymin = -Inf,   ymax = Inf),
-                         fill = "#ffffff", alpha = 0.06,
-                         inherit.aes = FALSE)
-
-    if (is.null(secondary)) {
-      p <- p +
-        geom_line(data = primary, aes(x = yr, y = n),
-                  color = primary$color[1], linewidth = 1) +
-        geom_point(data = primary, aes(x = yr, y = n),
-                   color = primary$color[1], size = 1.4) +
-        scale_y_continuous(primary$layer[1])
-    } else {
-      max_p <- max(primary$n,   na.rm = TRUE)
-      max_s <- max(secondary$n, na.rm = TRUE)
-      scale_factor <- if (max_s > 0) max_p / max_s else 1
-      p <- p +
-        geom_line(data = primary, aes(x = yr, y = n),
-                  color = primary$color[1], linewidth = 1) +
-        geom_point(data = primary, aes(x = yr, y = n),
-                   color = primary$color[1], size = 1.4) +
-        geom_line(data = secondary, aes(x = yr, y = n * scale_factor),
-                  color = secondary$color[1], linewidth = 1, linetype = "32") +
-        geom_point(data = secondary, aes(x = yr, y = n * scale_factor),
-                   color = secondary$color[1], size = 1.4) +
-        scale_y_continuous(
-          name     = primary$layer[1],
-          sec.axis = sec_axis(~ . / scale_factor, name = secondary$layer[1]))
-    }
-    p +
-      scale_x_continuous(breaks = scales::pretty_breaks(n = 6),
-                         limits = c(yr_range[1] - 0.5, yr_range[2] + 0.5)) +
-      base_thm
+            plot.margin        = margin(1, 6, 1, 6))
   }, bg = "transparent", res = 110)
 
-  # PAM year-window re-aggregation: when the strip range changes and PAM is
-  # active, re-query src_pam_year + push the new fill via the proxy. The
-  # current layer is removed and re-added with the year-filtered source.
+  # PAM month-window re-aggregation: when the strip range changes and PAM is
+  # active, re-query src_pam_ym + push the new fill via the proxy. The current
+  # layer is removed and re-added with the ym-filtered source.
   observeEvent(input$temporal_filter, {
     pl <- input$temporal_filter
     if (is.null(pl)) return()
     active <- pl$active %||% character(0)
     if (!("pam-choro" %in% active) || !isTRUE(lazy_added$pam)) return()
-    yr_lo <- pl$start %||% TEMPORAL_RANGE[1]
-    yr_hi <- pl$end   %||% TEMPORAL_RANGE[2]
+    ym_lo <- pl$start %||% TEMPORAL_RANGE[1]
+    ym_hi <- pl$end   %||% TEMPORAL_RANGE[2]
     sf_data <- tryCatch({
       DBI::dbGetQuery(con,
-        web_sql("src_pam_year", yr_lo = yr_lo, yr_hi = yr_hi)) |>
+        web_sql("src_pam_ym", ym_lo = ym_lo, ym_hi = ym_hi)) |>
         sf::st_as_sf(wkt = "wkt", crs = 4326) |>
         dplyr::select(-wkt)
-    }, error = function(e) { message("PAM year re-query: ", e$message); NULL })
+    }, error = function(e) { message("PAM ym re-query: ", e$message); NULL })
     if (is.null(sf_data)) return()
     maplibre_proxy("map") |>
       remove_layer("pam-choro") |>

styles.css

@@ -878,6 +878,27 @@
   color: var(--c-text);
 }
 
+/* -- Loading indicator (first-time fetch of a heavy layer) ------------------ */
+/* Spinner sits in the toggle-track, on top of the thumb. Cleared by the
+   `layer_loaded` custom message from the server. */
+.acc-item-wrap.is-loading .acc-toggle-text::after {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-left: 6px;
+  vertical-align: -1px;
+  border: 1.5px solid var(--c-accent);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: acc-spin 0.7s linear infinite;
+}
+.acc-item-wrap.is-loading .acc-toggle-text {
+  color: var(--c-text);
+  opacity: 0.85;
+}
+@keyframes acc-spin { to { transform: rotate(360deg); } }
+
 .acc-info-wrap {
   flex-shrink: 0;
   cursor: help;