Update app.R

app.R

@@ -10,26 +10,19 @@ library(rnaturalearth)
 library(rnaturalearthdata)
 library(countrycode)
 library(ggplot2)
-library(ggiraph)  # For interactive hover tooltips
-#library(extrafont)
-#font_import()    # run
-#loadfonts()      # load the fonts into R session
+library(ggiraph)  # For interactive hover tooltips and selections
 
 # =============================
 #            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"))
@@ -45,9 +38,7 @@ 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",
@@ -118,7 +109,6 @@ ui <- dashboardPage(
         }
       "))
     ),
-    
     tabItems(
       tabItem(
         tabName = "cartogramTab",
@@ -127,12 +117,20 @@ ui <- dashboardPage(
             width = 12,
             title = strong("Global Leadership Project (GLP)"),
             solidHeader = TRUE,
-            # Use girafeOutput instead of plotOutput
             div(
-              style = "height: 80vh; padding: 10px;",
+              style = "height: 70vh; padding: 10px;",  # Adjusted height to make space
               girafeOutput("cartogramPlot", width = "100%", height = "100%")
             )
           )
+        ),
+        # New box for displaying selected country data
+        fluidRow(
+          box(
+            width = 12,
+            title = strong("Selected Country Data"),
+            solidHeader = TRUE,
+            uiOutput("selectedCountryData")
+          )
         )
       )
     )
@@ -144,23 +142,6 @@ ui <- dashboardPage(
 # =============================
 server <- function(input, output, session) {
   
-  # 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
@@ -187,7 +168,6 @@ server <- function(input, output, session) {
   cartogram_sf <- reactive({
     merged_sf <- world_sf() %>%
       left_join(rankings_data(), by = "iso_a3")
-    # Filter out rows with missing 'Overall', if you want to exclude them
     merged_sf <- merged_sf[!is.na(merged_sf$Overall),]
     merged_sf
   })
@@ -198,9 +178,8 @@ server <- function(input, output, session) {
     
     plot_data <- cartogram_sf()
     index_col <- input$indexChoice
-    selected_country_id <- clicked_country()
     
-    # Build a tooltip string: customize to your preference
+    # Build a tooltip string (same as data to display on click)
     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/>",
@@ -211,21 +190,18 @@ 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(
           fill = get(index_col),
           tooltip = tooltip_text,
-          data_id = iso_a3
+          data_id = iso_a3  # Enable selection with unique identifier
         ),
         color = "grey20",
         size = 0.1
       ) +
       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"),
@@ -242,22 +218,54 @@ 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", selected = selected_country_id),
-        opts_zoom(max = 5)
+        opts_selection(type = "single")  # Single selection: one country at a time
       )
     )
   })
+  
+  # Reactive to track the selected country's ISO code
+  selected_iso <- reactive({
+    input$cartogramPlot_selected  # Returns the data_id of the selected country or NULL
+  })
+  
+  # Reactive to fetch the selected country's data
+  selected_data <- reactive({
+    if (is.null(selected_iso())) {
+      return(NULL)
+    } else {
+      rankings_data() %>%
+        filter(iso_a3 == selected_iso())
+    }
+  })
+  
+  # Render the selected country data below the map
+  output$selectedCountryData <- renderUI({
+    if (is.null(selected_data())) {
+      HTML("<p>Select a country by clicking on the map.</p>")
+    } else {
+      data <- selected_data()
+      html_content <- paste0(
+        "<b>Country:</b> ", data$Country, "<br/>",
+        "<b>Overall:</b> ", ifelse(is.na(data$Overall), "N/A", data$Overall), "<br/>",
+        "<b>Representation Gap:</b> ", ifelse(is.na(data$RepresentationGap), "N/A", data$RepresentationGap), "<br/>",
+        "<b>Ethnicity:</b> ", ifelse(is.na(data$Ethnicity), "N/A", data$Ethnicity), "<br/>",
+        "<b>Gender:</b> ", ifelse(is.na(data$Gender), "N/A", data$Gender), "<br/>",
+        "<b>Religion:</b> ", ifelse(is.na(data$Religion), "N/A", data$Religion), "<br/>",
+        "<b>Language:</b> ", ifelse(is.na(data$Language), "N/A", data$Language)
+      )
+      HTML(html_content)
+    }
+  })
 }
 
 # =============================