Upload 2 files

depth_interactive_map_alpha.R

@@ -259,13 +259,21 @@ POBREZA_COLS <- list(
 TEMPORAL_LAYERS <- list(
   "migrants-pts" = list(label = "Missing migrants", color = COL_YEL,
                         table = "migrants",     year_col = "incident_year",
-                        kind  = "point"),
+                        # 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",
+                        kind = "point"),
   "ocved-pts"    = list(label = "OCVED violence",  color = COL_AMBER,
                         table = "ocved_events", year_col = "year",
-                        kind  = "point"),
+                        year_expr      = "CAST(SUBSTR(date_str, 1, 4) AS INTEGER)",
+                        point_yr_expr  = "CAST(SUBSTR(date_str, 1, 4) AS INTEGER)",
+                        kind = "point"),
   "ged-pts"      = list(label = "GED conflict",    color = COL_LIGHT_BLUE,
                         table = "ged_events",   year_col = "year",
-                        kind  = "point"),
+                        year_expr      = "CAST(date_part('year', date_start) AS INTEGER)",
+                        point_yr_expr  = "CAST(date_part('year', date_start) AS INTEGER)",
+                        kind = "point"),
   "pam-choro"    = list(label = "PAM events",      color = COL_COUNT,
                         table = "dim_pam_mun",
                         year_col  = "yr",
@@ -330,6 +338,16 @@ 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 =
+    "SELECT row_number() OVER () AS row_id, lon, lat,
+            {yr_expr} AS yr
+     FROM {tbl}
+     WHERE lon IS NOT NULL AND lat IS NOT NULL
+     LIMIT {limit}",
+
   load_infra_pts =
     "SELECT row_number() OVER () AS row_id, lon, lat,
             CASE
@@ -835,13 +853,11 @@ ddb_minmax <- function(con, tbl, col, filter_zero = TRUE) {
     # 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.
     temporal = lapply(TEMPORAL_LAYERS, function(info) {
-      yr_expr   <- info$year_expr %||% info$year_col
-      yr_chk    <- info$year_col   %||% "yr"
-      yr_chk    <- if (is.null(info$year_expr)) info$year_col else info$year_expr
-      agg_expr  <- info$agg %||% "COUNT(*)"
+      yr_expr  <- info$year_expr %||% info$year_col
+      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_chk),
+             tbl = info$table, yr_col_or_expr = yr_expr),
         WEB_SQL_TEMPLATES$ts_yr_counts,
         .open = "{", .close = "}"
       )
@@ -1456,10 +1472,13 @@ LUCIDE_JS <- tags$head(
     // 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).
     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.
     var TEMPORAL_POINT_COL = {
-      'migrants-pts': 'incident_year',
-      'ocved-pts':    'year',
-      'ged-pts':      'year'
+      'migrants-pts': 'yr',
+      'ocved-pts':    'yr',
+      'ged-pts':      'yr'
     };
     var _temporal = {
       active: [],   // most-recent-first
@@ -1470,8 +1489,15 @@ LUCIDE_JS <- tags$head(
     };
 
     function syncTemporalStrip(checkedIds) {
+      // Derive the active layer set from the DOM if the caller didn't pass it.
+      if (!checkedIds) {
+        checkedIds = [];
+        document.querySelectorAll('.layer-check:checked').forEach(function(cb) {
+          checkedIds.push(cb.value);
+        });
+      }
       var prevActive = _temporal.active.slice();
-      var nowOn = (checkedIds || []).filter(function(id) {
+      var nowOn = checkedIds.filter(function(id) {
         return TEMPORAL_LAYER_IDS.indexOf(id) !== -1;
       });
       // Keep MRU order: anything newly turned on goes to the front; anything
@@ -1479,8 +1505,23 @@ LUCIDE_JS <- tags$head(
       var stillOn = prevActive.filter(function(id) { return nowOn.indexOf(id) !== -1; });
       var newOnes = nowOn.filter(function(id)   { return stillOn.indexOf(id) === -1; });
       _temporal.active = newOnes.concat(stillOn).slice(0, 2);
+
+      // Hide the strip when grid mode is on -- the year filter applies to the
+      // mun-level point/polygon layers, which are not visible in grid mode.
+      // (Grid layers aggregate all years; per-year grid filtering would need
+      // a server re-aggregation pass that isn't built yet.)
+      var stripVisible = (_temporal.active.length > 0) &&
+                         !(typeof gridActive !== 'undefined' && gridActive);
       var strip = document.getElementById('temporal-strip');
-      if (strip) strip.style.display = _temporal.active.length ? 'flex' : 'none';
+      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);
+      }
       // Tell Shiny which layers the chart should draw (server reactive)
       if (typeof Shiny !== 'undefined') {
         Shiny.setInputValue('temporal_active', _temporal.active, { priority: 'event' });
@@ -1755,6 +1796,8 @@ LUCIDE_JS <- tags$head(
       var iconBtn = document.getElementById('grid-icon-btn');
       if (iconBtn) iconBtn.classList.toggle('active', gridActive);
       closeGridPanel();
+      // Strip auto-hides in grid mode; refresh visibility now.
+      if (typeof syncTemporalStrip === 'function') syncTemporalStrip();
     }
 
     // -- Legend filter: click a categorical swatch to toggle that category --
@@ -3342,6 +3385,18 @@ 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) {
+    tryCatch({
+      DBI::dbGetQuery(con, web_sql("load_pts_with_year",
+                                    tbl = tbl, yr_expr = yr_expr, limit = limit)) |>
+        sf::st_as_sf(coords = c("lon", "lat"), crs = 4326)
+    }, error = function(e) {
+      message("  [pts+yr] ", tbl, ": ", e$message); NULL
+    })
+  }
+
   load_pts <- function(tbl, limit = 80000) {
     tryCatch({
       DBI::dbGetQuery(con, web_sql("load_pts", tbl = tbl, limit = limit)) |>
@@ -3806,9 +3861,11 @@ server <- function(input, output, session) {
       lazy_added[[key]] <<- TRUE
     }
   }
-  lazy_add_pts <- function(key, tbl, id, color, radius = 2, limit = 80000) {
+  lazy_add_pts <- function(key, tbl, id, color, radius = 2, limit = 80000,
+                            yr_expr = NULL) {
     if (isTRUE(lazy_added[[key]]) || is.null(con)) return()
-    pts <- load_pts(tbl, limit)
+    pts <- if (!is.null(yr_expr)) load_pts_with_year(tbl, yr_expr, limit)
+           else                   load_pts(tbl, limit)
     if (!is.null(pts)) {
       maplibre_proxy("map") |>
         add_circle_layer(
@@ -3954,11 +4011,14 @@ server <- function(input, output, session) {
             line_dasharray = c(4, 2)))
 
       # Point layers
-      if ("migrants-pts" %in% active) lazy_add_pts("migrants", "migrants",               "migrants-pts", COL_YEL,        2, 8000)
+      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)
       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)
-      if ("ged-pts"      %in% active) lazy_add_pts("ged",      "ged_events",             "ged-pts",      COL_LIGHT_BLUE, 1, 80000)
+      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)
+      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)
 
       # 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
@@ -4540,7 +4600,7 @@ server <- function(input, output, session) {
     "n_incidents", "n_fatalities", "n_graves", "n_facilities", "n_events",
     "ocved_n", "n_ged", "n_mun", "n_desap", "n_pam", "n_fosas", "n_cuerpos",
     "sub_incidents", "sub_fatalities", "panel_subtitle", "mun_section_lbl",
-    "mun_list"
+    "mun_list", "temporal_strip_chart"
   )) {
     outputOptions(output, .oid, suspendWhenHidden = FALSE)
   }

styles.css

@@ -2469,21 +2469,36 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
    ========================================================================= */
 .temporal-strip {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 950;                    /* below nav (1000) + popovers, above map */
+  bottom: 18px;
+  /* Leave room for the layer panel on the bottom-left and avoid covering
+     the map controls on the right. Strip floats centred above the bottom. */
+  left: 320px;
+  right: 90px;
+  max-width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 950;
   background: oklch(15% 0.012 250 / 0.92);
   backdrop-filter: blur(12px) saturate(140%);
   -webkit-backdrop-filter: blur(12px) saturate(140%);
-  border-top: 1px solid oklch(100% 0 0 / 0.08);
-  padding: 6px 14px 8px;
+  border: 1px solid oklch(100% 0 0 / 0.12);
+  border-radius: var(--radius-md);
+  box-shadow: var(--depth-3);
+  padding: 6px 12px 8px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
   pointer-events: auto;
 }
 
+/* On narrower viewports, give the strip the full bottom width */
+@media (max-width: 1100px) {
+  .temporal-strip {
+    left: 16px;
+    right: 16px;
+  }
+}
+
 .temporal-strip-chart {
   width: 100%;
 }