Upload 2 files

depth_interactive_map_alpha.R

@@ -1555,12 +1555,16 @@ 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, 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).
+      // First time the strip is shown in this session: refresh Lucide so the
+      // play placeholder swaps into an SVG, force the label + fill to reflect
+      // the current slider values, and dispatch a resize so Shiny re-measures
+      // the plotOutput (it was 0-width while the strip was display:none).
       if (becameVisible) {
         if (window.lucide) setTimeout(function() { lucide.createIcons(); }, 30);
         onTemporalSliderInput();
+        setTimeout(function() {
+          window.dispatchEvent(new Event('resize'));
+        }, 60);
       }
       // Tell Shiny which layers the chart should draw (server reactive)
       if (typeof Shiny !== 'undefined') {
@@ -2756,7 +2760,7 @@ ui <- page_fillable(
           `aria-label` = "Temporal month-year range filter",
           div(class = "temporal-strip-chart",
               plotOutput("temporal_strip_chart",
-                         width = "100%", height = "85px")),
+                         width = "100%", height = "52px")),
           div(class = "temporal-strip-controls",
               tags$button(id = "temporal-play-btn",
                           type = "button",
@@ -4424,9 +4428,9 @@ server <- function(input, output, session) {
   output$temporal_ged   <- make_temporal_yr("ged_events",   "year", COL_LIGHT_BLUE)
 
   # --- 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.
+  # Honeycomb-style: monthly bars across the full timespan, dim outside the
+  # selected window and saturated inside it. Single layer (most-recently
+  # toggled). No y-axis, no legend, compact theme.
   output$temporal_strip_chart <- renderPlot({
     active <- input$temporal_active %||% character(0)
     if (length(active) == 0) return(NULL)
@@ -4434,45 +4438,41 @@ server <- function(input, output, session) {
     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
+    bar_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]
+    df_all$in_win <- df_all$ym >= ym_lo & df_all$ym <= ym_hi
 
-    # Year-only x ticks: pick every Jan in the data range.
+    # Year-only x ticks across the full slider span.
     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_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)
-
-    p +
+    ggplot(df_all, aes(x = ym, y = n, fill = in_win)) +
+      geom_col(width = 1, color = NA) +
+      scale_fill_manual(values = c(`FALSE` = "#ffffff22",
+                                    `TRUE`  = bar_color)) +
       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))) +
+      scale_y_continuous(expand = expansion(mult = c(0, 0.05))) +
       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 = "#ffffff14", linewidth = 0.25),
-            axis.title         = element_blank(),
-            axis.text.x        = element_text(size = 8, color = "#cbd5e1"),
-            axis.text.y        = element_blank(),
-            axis.ticks         = element_blank(),
-            legend.position    = "none",
-            plot.margin        = margin(1, 6, 1, 6))
+      theme_minimal(base_size = 8) +
+      theme(plot.background  = element_rect(fill = "transparent", color = NA),
+            panel.background = element_rect(fill = "transparent", color = NA),
+            panel.grid       = element_blank(),
+            axis.title       = element_blank(),
+            axis.text.x      = element_text(size = 7.5, color = "#94a3b8"),
+            axis.text.y      = element_blank(),
+            axis.ticks       = element_blank(),
+            legend.position  = "none",
+            plot.margin      = margin(0, 4, 0, 4))
   }, bg = "transparent", res = 110)
 
   # PAM month-window re-aggregation: when the strip range changes and PAM is

styles.css

@@ -2509,6 +2509,9 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
   display: flex;
   flex-direction: column;
   gap: 4px;
+  /* Honeycomb-style: keep the chart inside the rounded card no matter what
+     Shiny does with the plotOutput dimensions on first render. */
+  overflow: hidden;
   pointer-events: auto;
 }
 
@@ -2522,9 +2525,15 @@ body.tooltips-off .maplibregl-popup { display: none !important; }
 
 .temporal-strip-chart {
   width: 100%;
+  height: 52px;
+  overflow: hidden;
 }
-.temporal-strip-chart .shiny-plot-output {
+.temporal-strip-chart .shiny-plot-output,
+.temporal-strip-chart .shiny-plot-output > img {
   background: transparent;
+  width: 100% !important;
+  height: 52px !important;
+  display: block;
 }
 
 .temporal-strip-controls {