mirror of
https://github.com/dylanbenzi/hurricane_normalization_app.git
synced 2026-07-30 05:08:57 +00:00
add data export ui
This commit is contained in:
+231
-5
@@ -734,14 +734,240 @@ fillCol(
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Data Export {data-navmenu="Compute"}
|
Data Export {data-navmenu="Compute"}
|
||||||
===
|
===
|
||||||
|
|
||||||
|
```{r}
|
||||||
|
# Dataset information
|
||||||
|
datasets_info <- data.frame(
|
||||||
|
id = c("hurricane_costs", "population_housing", "fatalities", "storm_tracks", "affected_areas", "economic_data"),
|
||||||
|
name = c("Hurricane Cost Normalization", "Population & Housing", "Storm Fatalities",
|
||||||
|
"Hurricane Best Track", "Affected Areas", "Yearly Economics"),
|
||||||
|
description = c(
|
||||||
|
"Normalized economic damage estimates for US landfalling hurricanes 1900-2023 using updated RMW methodology",
|
||||||
|
"County-level population and housing unit data used for normalization calculations",
|
||||||
|
"Direct and indirect fatalities from hurricane impacts by location and storm",
|
||||||
|
"Best track data including storm positions, intensities, and wind radii from HURDAT2",
|
||||||
|
"Geographic areas impacted by hurricane landfalls with RMW coverage percentages",
|
||||||
|
"Yearly economic data used in normalization calculations"
|
||||||
|
),
|
||||||
|
size = c("~200 storms", "3,000+ counties", "150+ storms", "2,000+ storms", "5,000+ records", "100+ years"),
|
||||||
|
last_updated = c("2024-12-01", "2024-11-15", "2024-10-30", "2024-12-15", "2024-11-30", "2025-01-01"),
|
||||||
|
tables = c("econ.normalized_landfalls, econ.storm_base_loss",
|
||||||
|
"metrics.pop_and_housing",
|
||||||
|
"fatal.storm_total_fatalities, fatal.storm_fatalities_type",
|
||||||
|
"hurdat.best_track, hurdat.hurdat_storms",
|
||||||
|
"gis.affected_area_landfalls", "econ.usa_yearly"),
|
||||||
|
stringsAsFactors = FALSE
|
||||||
|
)
|
||||||
|
|
||||||
|
# Reactive values to store selected datasets
|
||||||
|
values <- reactiveValues(selected_datasets = character(0))
|
||||||
|
```
|
||||||
|
|
||||||
|
Column {data-width=600}
|
||||||
|
-------------------------------------
|
||||||
|
|
||||||
|
### Available Datasets
|
||||||
|
|
||||||
|
```{r}
|
||||||
|
# Function to create dataset cards
|
||||||
|
create_dataset_card <- function(dataset_row) {
|
||||||
|
card_id <- paste0("card_", dataset_row$id)
|
||||||
|
|
||||||
|
div(
|
||||||
|
class = "dataset-card",
|
||||||
|
id = card_id,
|
||||||
|
style = "border: 2px solid #e3e3e3; border-radius: 8px; padding: 15px; margin: 10px 0; cursor: pointer; transition: all 0.3s ease;",
|
||||||
|
|
||||||
|
div(
|
||||||
|
style = "display: flex; justify-content: space-between; align-items: flex-start;",
|
||||||
|
|
||||||
|
# Left content
|
||||||
|
div(
|
||||||
|
style = "flex: 1;",
|
||||||
|
tags$b(dataset_row$name, style = "font-size: 16px; margin: 0 0 8px 0; color: #2c3e50; display: block;"),
|
||||||
|
p(dataset_row$description, style = "margin: 0 0 10px 0; color: #5a6c7d; font-size: 14px; line-height: 1.4;"),
|
||||||
|
|
||||||
|
# Metadata row
|
||||||
|
div(
|
||||||
|
style = "display: flex; gap: 20px; flex-wrap: wrap;",
|
||||||
|
span(icon("database"), strong("Size: "), dataset_row$size, style = "color: #7f8c8d; font-size: 12px;"),
|
||||||
|
span(icon("calendar"), strong("Updated: "), dataset_row$last_updated, style = "color: #7f8c8d; font-size: 12px;"),
|
||||||
|
span(icon("table"), strong("Tables: "), dataset_row$tables, style = "color: #7f8c8d; font-size: 11px;")
|
||||||
|
)
|
||||||
|
),
|
||||||
|
|
||||||
|
# Selection checkbox
|
||||||
|
div(
|
||||||
|
style = "margin-left: 15px;",
|
||||||
|
checkboxInput(
|
||||||
|
inputId = paste0("select_", dataset_row$id),
|
||||||
|
label = NULL,
|
||||||
|
value = FALSE,
|
||||||
|
width = "20px"
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
# Add CSS for card interactions
|
||||||
|
#tags$head(tags$style(HTML("
|
||||||
|
# .dataset-card:hover {
|
||||||
|
# border-color: #3498db !important;
|
||||||
|
# box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3) !important;
|
||||||
|
# }
|
||||||
|
# .dataset-card.selected {
|
||||||
|
# border-color: #27ae60 !important;
|
||||||
|
# background-color: #f8fff9 !important;
|
||||||
|
# box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3) !important;
|
||||||
|
# }
|
||||||
|
# .export-box {
|
||||||
|
# border: 2px solid #34495e;
|
||||||
|
# border-radius: 8px;
|
||||||
|
# padding: 20px;
|
||||||
|
# background-color: #f8f9fa;
|
||||||
|
# margin-bottom: 20px;
|
||||||
|
# }
|
||||||
|
# .selected-item {
|
||||||
|
# background-color: #e8f5e8;
|
||||||
|
# border: 1px solid #27ae60;
|
||||||
|
# border-radius: 4px;
|
||||||
|
# padding: 8px 12px;
|
||||||
|
# margin: 4px;
|
||||||
|
# display: inline-block;
|
||||||
|
# }
|
||||||
|
# .info-box {
|
||||||
|
# border: 2px solid #95a5a6;
|
||||||
|
# border-radius: 8px;
|
||||||
|
# padding: 20px;
|
||||||
|
# background-color: #ecf0f1;
|
||||||
|
# }
|
||||||
|
#")))
|
||||||
|
|
||||||
|
# Update selected datasets based on checkboxes
|
||||||
|
observe({
|
||||||
|
selected <- character(0)
|
||||||
|
for(i in 1:nrow(datasets_info)) {
|
||||||
|
dataset_id <- datasets_info[i, "id"]
|
||||||
|
if(isTruthy(input[[paste0("select_", dataset_id)]])) {
|
||||||
|
selected <- c(selected, dataset_id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
values$selected_datasets <- selected
|
||||||
|
})
|
||||||
|
|
||||||
|
# Add JavaScript for card click interaction
|
||||||
|
tags$script(HTML("
|
||||||
|
$(document).on('click', '.dataset-card', function() {
|
||||||
|
var checkbox = $(this).find('input[type=\"checkbox\"]');
|
||||||
|
checkbox.prop('checked', !checkbox.prop('checked')).trigger('change');
|
||||||
|
|
||||||
|
if(checkbox.prop('checked')) {
|
||||||
|
$(this).addClass('selected');
|
||||||
|
} else {
|
||||||
|
$(this).removeClass('selected');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
"))
|
||||||
|
|
||||||
|
# Instructions
|
||||||
|
div(
|
||||||
|
style = "margin-bottom: 20px; padding: 15px; background-color: #f0f8ff; border-radius: 0; border-left: 4px solid #3498db;",
|
||||||
|
p(strong("Instructions:"), "Select datasets from the cards below by clicking on them. Your selected datasets will appear in the export panel on the right.",
|
||||||
|
style = "margin: 0; color: #2c3e50;")
|
||||||
|
)
|
||||||
|
|
||||||
|
# Render dataset cards
|
||||||
|
output$dataset_cards <- renderUI({
|
||||||
|
cards <- lapply(1:nrow(datasets_info), function(i) {
|
||||||
|
create_dataset_card(datasets_info[i, ])
|
||||||
|
})
|
||||||
|
do.call(tagList, cards)
|
||||||
|
})
|
||||||
|
|
||||||
|
uiOutput("dataset_cards")
|
||||||
|
```
|
||||||
|
|
||||||
|
Column {data-width=400}
|
||||||
|
-------------------------------------
|
||||||
|
|
||||||
|
### Data Export {data-height=600}
|
||||||
|
|
||||||
|
```{r}
|
||||||
|
div(
|
||||||
|
class = "export-box",
|
||||||
|
|
||||||
|
tags$b("Export Selected Data", style = "font-size: 18px; margin-top: 0; color: #2c3e50; display: block; margin-bottom: 15px;"),
|
||||||
|
|
||||||
|
# Selected datasets display
|
||||||
|
tags$b("Selected Datasets:", style = "font-size: 14px; margin-bottom: 10px; color: #34495e; display: block;"),
|
||||||
|
div(
|
||||||
|
id = "selected-datasets-display",
|
||||||
|
style = "min-height: 60px; margin-bottom: 20px; padding: 10px; background-color: white; border-radius: 4px; border: 1px solid #ddd;",
|
||||||
|
uiOutput("selected_datasets_display")
|
||||||
|
),
|
||||||
|
|
||||||
|
# Format selection
|
||||||
|
tags$b("Export Format:", style = "font-size: 14px; margin-bottom: 10px; color: #34495e; display: block;"),
|
||||||
|
radioButtons(
|
||||||
|
"export_format",
|
||||||
|
label = NULL,
|
||||||
|
choices = list(
|
||||||
|
"CSV (Comma Separated)" = "csv",
|
||||||
|
"JSON" = "json"
|
||||||
|
),
|
||||||
|
selected = "csv",
|
||||||
|
inline = FALSE
|
||||||
|
),
|
||||||
|
|
||||||
|
# Export options
|
||||||
|
checkboxInput(
|
||||||
|
"include_documentation",
|
||||||
|
"Include documentation",
|
||||||
|
value = TRUE
|
||||||
|
),
|
||||||
|
|
||||||
|
# Export button
|
||||||
|
br(),
|
||||||
|
downloadButton(
|
||||||
|
"download_data",
|
||||||
|
"Export Selected Data",
|
||||||
|
class = "btn-primary",
|
||||||
|
style = ""
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
# Display selected datasets
|
||||||
|
output$selected_datasets_display <- renderUI({
|
||||||
|
if(length(values$selected_datasets) == 0) {
|
||||||
|
p("No datasets selected", style = "color: #95a5a6; font-style: italic; margin: 20px 0;")
|
||||||
|
} else {
|
||||||
|
selected_names <- datasets_info$name[datasets_info$id %in% values$selected_datasets]
|
||||||
|
lapply(selected_names, function(name) {
|
||||||
|
span(
|
||||||
|
class = "selected-item",
|
||||||
|
icon("check-circle"), " ", name
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Contact {data-height=400}
|
||||||
|
|
||||||
|
```{r}
|
||||||
|
div(
|
||||||
|
class = "info-box",
|
||||||
|
tags$b("Need More Data?", style = "font-size: 16px; margin-top: 0; color: #2c3e50; display: block; margin-bottom: 10px;"),
|
||||||
|
p("Additional datasets, custom queries, and research collaborations are available through our team.",
|
||||||
|
style = "margin-bottom: 15px; color: #5a6c7d; font-size: 14px;"),
|
||||||
|
|
||||||
|
p(icon("envelope"), strong(" Email:"), " [CONTACT US EMAIL]", style = "margin: 5px 0; color: #34495e; font-size: 14px;")
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
Tracked Storms {data-navmenu="All Storms"}
|
Tracked Storms {data-navmenu="All Storms"}
|
||||||
===
|
===
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user