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"}
|
||||
===
|
||||
|
||||
```{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"}
|
||||
===
|
||||
|
||||
|
||||
Reference in New Issue
Block a user