Update app.R

app.R

@@ -1,3 +1,4 @@
+# setwd("~/Downloads")
 
 options(error = NULL)
 library(shiny)
@@ -9,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)
 
 # =============================
 #            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"))
@@ -44,27 +38,21 @@ 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;
@@ -72,31 +60,23 @@ 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);
@@ -107,17 +87,14 @@ 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",
@@ -126,11 +103,15 @@ 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")
           )
         )
       )
@@ -143,11 +124,7 @@ ui <- dashboardPage(
 # =============================
 server <- function(input, output, session) {
   
-  # 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
+  custom_iso_matches <- c("Kosovo" = "XKX", "Somaliland" = "SOM")
   rankings_data <- reactive({
     read_csv("CountryRepresentationRankings.csv", show_col_types = FALSE) %>%
       mutate(iso_a3 = countrycode(
@@ -158,30 +135,24 @@ 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")  # Mollweide projection
+      st_transform(crs = "ESRI:54009")
   })
   
-  # 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")
-    # Filter out rows with missing 'Overall', if you want to exclude them
-    merged_sf <- merged_sf[!is.na(merged_sf$Overall),]
-    merged_sf
+    merged_sf[!is.na(merged_sf$Overall),]
   })
   
-  # 5. Render the interactive map with ggiraph
   output$cartogramPlot <- renderGirafe({
     req(input$indexChoice)
     
     plot_data <- cartogram_sf()
     index_col <- input$indexChoice
     
-    # 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/>",
@@ -192,7 +163,6 @@ 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(
@@ -205,8 +175,6 @@ 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"),
@@ -223,7 +191,6 @@ server <- function(input, output, session) {
         legend.key.width = unit(2, "cm")
       )
     
-    # Wrap the ggplot in a girafe object, including tooltip styling
     girafe(
       ggobj = p,
       width_svg  = 10,
@@ -233,10 +200,43 @@ server <- function(input, output, session) {
           css = "background-color: white; 
                  font-family: 'OCR A Extended', monospace; 
                  color: black;"
+        ),
+        opts_selection(
+          type = "single",
+          css = "stroke:yellow;stroke-width:2px;"
         )
       )
     )
   })
+  
+  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)
+    )
+  })
 }
 
 # =============================