Update app.R

app.R

@@ -10,19 +10,26 @@ library(rnaturalearth)
 library(rnaturalearthdata)
 library(countrycode)
 library(ggplot2)
-library(ggiraph)
+library(ggiraph)  # For interactive hover tooltips
+#library(extrafont)
+#font_import()    # run
+#loadfonts()      # load the fonts into R session
 
 # =============================
 #            UI
 # =============================
 ui <- dashboardPage(
+  
+  # Use black skin for the dashboard
   skin = "black",
+  
   dashboardHeader(
     title = span(
       style = "font-weight: 600; font-size: 18px;",
       "Country Representation"
     )
   ),
+  
   dashboardSidebar(
     sidebarMenu(
       menuItem("Map Type", tabName = "cartogramTab", icon = icon("globe"))
@@ -38,21 +45,27 @@ ui <- dashboardPage(
       )
     )
   ),
+  
   dashboardBody(
+    # Bring in the OCR A Extended font from Google Fonts
     tags$head(
       tags$link(
         href = "https://fonts.googleapis.com/css2?family=OCR+A+Extended&display=swap",
         rel = "stylesheet"
       ),
       tags$style(HTML("
+        /* Force OCR A Extended font across the entire UI and all HTML elements */
         html, body, h1, h2, h3, h4, h5, h6, p, div, span, label, input, button, select,
         .box, .content-wrapper, .main-sidebar, .main-header .navbar, .main-header .logo,
         .sidebar-menu, .sidebar-menu li a, .sidebar-menu .fa {
           font-family: 'OCR A Extended', monospace !important;
         }
+        
+        /* Header gradient background */
         .main-header .navbar {
           background: linear-gradient(to right, #3b6978, #204051) !important;
         }
+        /* Logo area (left corner of the header) */
         .main-header .logo {
           background: #1b2a2f !important;
           color: #ffffff !important;
@@ -60,23 +73,31 @@ ui <- dashboardPage(
           font-size: 18px;
           font-weight: 600;
         }
+        /* Sidebar background */
         .main-sidebar {
           background-color: #1b2a2f !important;
         }
+        /* Active or hovered tab in the sidebar */
         .sidebar-menu > li.active > a,
         .sidebar-menu > li:hover > a {
           background-color: #344e5c !important;
           border-left-color: #78cdd7 !important;
           color: #ffffff !important;
         }
+        
+        /* Sidebar menu item icons */
         .sidebar-menu .fa {
           color: #78cdd7 !important;
         }
+        
+        /* Sidebar menu item text */
         .sidebar-menu > li > a {
           color: #b8c7ce !important;
           font-size: 15px;
           font-weight: 500;
         }
+        
+        /* Customize the boxes */
         .box {
           border-top: none !important;
           box-shadow: 0 4px 8px rgba(0,0,0,0.1);
@@ -87,14 +108,17 @@ ui <- dashboardPage(
           color: #fff;
           border-radius: 6px 6px 0 0;
         }
+        /* Plot box spacing */
         .box .box-body {
           padding: 0 !important;
         }
+        /* Footer text styling (plot captions, etc.) */
         .small, small {
           font-size: 75%;
         }
       "))
     ),
+    
     tabItems(
       tabItem(
         tabName = "cartogramTab",
@@ -103,15 +127,11 @@ ui <- dashboardPage(
             width = 12,
             title = strong("Global Leadership Project (GLP)"),
             solidHeader = TRUE,
+            # Use girafeOutput instead of plotOutput
             div(
               style = "height: 80vh; padding: 10px;",
               girafeOutput("cartogramPlot", width = "100%", height = "100%")
             )
-          ),
-          box(
-            width = 12,
-            title = "Country Details",
-            verbatimTextOutput("countryDetails")
           )
         )
       )
@@ -124,7 +144,28 @@ ui <- dashboardPage(
 # =============================
 server <- function(input, output, session) {
   
-  custom_iso_matches <- c("Kosovo" = "XKX", "Somaliland" = "SOM")
+  # Reactive value to store the currently clicked country
+  clicked_country <- reactiveVal(NULL)
+  
+  # Observe clicks on the map
+  observeEvent(input$cartogramPlot_selected, {
+    selected_id <- input$cartogramPlot_selected
+    current_clicked <- clicked_country()
+    
+    if (identical(selected_id, current_clicked)) {
+      # Unclick: set clicked_country to NULL
+      clicked_country(NULL)
+    } else {
+      # Click new country: update clicked_country
+      clicked_country(selected_id)
+    }
+  }, ignoreNULL = FALSE)
+  
+  # 1. Custom matches for countries not recognized by default in 'countrycode'
+  custom_iso_matches <- c("Kosovo" = "XKX",
+                          "Somaliland" = "SOM")  # or any valid code you prefer
+  
+  # 2. Read CSV data and create ISO3 codes with custom matches
   rankings_data <- reactive({
     read_csv("CountryRepresentationRankings.csv", show_col_types = FALSE) %>%
       mutate(iso_a3 = countrycode(
@@ -135,24 +176,31 @@ server <- function(input, output, session) {
       ))
   })
   
+  # 3. Read/prepare world map shapefile
   world_sf <- reactive({
     ne_countries(scale = "medium", returnclass = "sf") %>%
       dplyr::select(name, iso_a3, pop_est, geometry) %>%
-      st_transform(crs = "ESRI:54009")
+      st_transform(crs = "ESRI:54009")  # Mollweide projection
   })
   
+  # 4. Create the joined sf object (currently just a regular map)
   cartogram_sf <- reactive({
     merged_sf <- world_sf() %>%
       left_join(rankings_data(), by = "iso_a3")
-    merged_sf[!is.na(merged_sf$Overall),]
+    # Filter out rows with missing 'Overall', if you want to exclude them
+    merged_sf <- merged_sf[!is.na(merged_sf$Overall),]
+    merged_sf
   })
   
+  # 5. Render the interactive map with ggiraph
   output$cartogramPlot <- renderGirafe({
     req(input$indexChoice)
     
     plot_data <- cartogram_sf()
     index_col <- input$indexChoice
+    selected_country_id <- clicked_country()
     
+    # Build a tooltip string: customize to your preference
     plot_data$tooltip_text <- paste0(
       "<b>Country:</b> ", plot_data$Country, "<br/>",
       "<b>Overall:</b> ", ifelse(!is.na(plot_data$Overall), plot_data$Overall, "N/A"), "<br/>",
@@ -163,6 +211,7 @@ server <- function(input, output, session) {
       "<b>Language:</b> ", ifelse(!is.na(plot_data$Language), plot_data$Language, "N/A")
     )
     
+    # Use geom_sf_interactive with aes() + get() instead of aes_string()
     p <- ggplot(plot_data) +
       geom_sf_interactive(
         aes(
@@ -175,6 +224,8 @@ server <- function(input, output, session) {
       ) +
       scale_fill_viridis_c(option = "D", na.value = "white") +
       coord_sf(expand = FALSE) +
+      # Use a generic base_family to avoid font errors
+      #theme_void(base_size = 14, base_family = "Courier New") +
       theme_void(base_size = 14, base_family = "sans") +
       labs(
         fill = paste(index_col, "Index"),
@@ -191,52 +242,22 @@ server <- function(input, output, session) {
         legend.key.width = unit(2, "cm")
       )
     
+    # Wrap the ggplot in a girafe object, including tooltip styling and click handling
     girafe(
       ggobj = p,
       width_svg  = 10,
       height_svg = 6,
       options = list(
         opts_tooltip(
-          css = "background-color: white; 
-                 font-family: 'OCR A Extended', monospace; 
+          css = "background-color: white;
+                 font-family: 'OCR A Extended', monospace;
                  color: black;"
         ),
-        opts_selection(
-          type = "single",
-          css = "stroke:yellow;stroke-width:2px;"
-        )
+        opts_selection(type = "single", selected = selected_country_id),
+        opts_zoom(max = 5)
       )
     )
   })
-  
-  selected_country_data <- reactive({
-    selected_iso <- input$cartogramPlot_selected
-    if (length(selected_iso) == 0) {
-      return(NULL)
-    }
-    plot_data <- cartogram_sf()
-    country_data <- plot_data %>% filter(iso_a3 == selected_iso)
-    if (nrow(country_data) == 0) {
-      return(NULL)
-    }
-    country_data
-  })
-  
-  output$countryDetails <- renderText({
-    country_data <- selected_country_data()
-    if (is.null(country_data)) {
-      return("Click on a country to see details.")
-    }
-    paste0(
-      "Country: ", country_data$Country, "\n",
-      "Overall: ", ifelse(is.na(country_data$Overall), "N/A", country_data$Overall), "\n",
-      "Representation Gap: ", ifelse(is.na(country_data$RepresentationGap), "N/A", country_data$RepresentationGap), "\n",
-      "Ethnicity: ", ifelse(is.na(country_data$Ethnicity), "N/A", country_data$Ethnicity), "\n",
-      "Gender: ", ifelse(is.na(country_data$Gender), "N/A", country_data$Gender), "\n",
-      "Religion: ", ifelse(is.na(country_data$Religion), "N/A", country_data$Religion), "\n",
-      "Language: ", ifelse(is.na(country_data$Language), "N/A", country_data$Language)
-    )
-  })
 }
 
 # =============================