Merge branch 'redesign' into carbon-tracking

h2/app.r

@@ -1,15 +1,39 @@
 source("./global.r")
 
-ui <- fluidPage(
+ui <- fluidPage(theme = shinythemes::shinytheme("readable"),
   includeCSS("./components/layout/style copy.css"),
+  tags$div(class = "container",
+           tags$img(src = "images/earth-header.png", height = "300px", width = "100%", class = "earth", alt = "Earth's atmosphere"),
+           tags$div(
+               a(
+                   img(src = "images/GCIMS_logo_alt.svg", class = "logo"), href = "https://gcims.pnnl.gov/", target = "_blank"),
+               h1("HectorUI", class = "header-text-title"),
+               h2("An Interactive Climate Model", class = "header-text-sub", style = "font-weight:normal; "),
+           ),
+  ),
   navbarPage(
     id = "nav",
     title = "",
     collapsible = TRUE,
     tabPanel(title = "Home",
-             includeHTML("./components/layout/homepage.html")),
+             fluidRow(
+                 column(7,
+                        includeHTML("./components/layout/homepage.html")
+                 ),
+                 column(4, div(
+                     br(),
+                     br(),
+                     actionButton(inputId = "launch_scenario",
+                                  label = "Explore Hector",
+                                  style = "background: #4174C3; color: white;
+                                                             font-size: 24px; padding: 32px 24px;
+                                                             box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);"),
+                     align = "center"
+                 ))
+             )
+    ),
     tabPanel(title = "Guides"),
-    tabPanel(title = "Explore Hector",
+    tabPanel(title = "Run Hector",
              fluidRow(
                run_ui("run_1"),
              )
@@ -21,11 +45,14 @@ ui <- fluidPage(
     ),
     tabPanel(title = "About")
   ),
+  hr(),
+  includeHTML("./components/layout/footer.html")
 )
 
 server <- function(input, output, session) {
   r6 <- HectorInputs$new() # r6 class
   r6_tracking <- HectorInputs$new() # separate r6 class for carbon tracking
+  observeEvent(input$launch_scenario, updateTabsetPanel(session, "nav", selected = "Run Hector"), ignoreInit = TRUE)
 
   run_server("run_1", r6 = r6)
   summary_server("summary_1", r6 = r6)

h2/components/functions/func_graph_plots.R

@@ -5,19 +5,19 @@ graph_plots <- function(r6) {
     if (r6$save == TRUE) {
         #browser()
 
-        {ggplot(r6$no_save_output) +
-                geom_line(aes(x = year, y = value, color = ssp)) +
+        {ggplot(last(r6$output)) +
+                geom_line(aes(x = year, y = value, color = Scenario)) +
                 labs(x = "Year", y = last(r6$output)$variable[1],
-                     title = paste0("Run Name: ",  last(r6$output)$run[1], "\n", "Variable: ", last(r6$output)$variable[1])) +
+                     title = paste0("Run Name: ",  last(r6$output)$run[1], "\n", "Variable: ", last(r6$output)$variable[1],"\nPermafrost: ",r6$permafrost)) +
                 theme(legend.position = "bottom")} %>%
             plotly::ggplotly()
 
     } else if(r6$save == FALSE) {
 
        {ggplot(r6$no_save_output) +
-            geom_line(aes(x = year, y = value, color = ssp)) +
+            geom_line(aes(x = year, y = value, color = Scenario)) +
             labs(x = "Year", y = r6$no_save_output$variable[1],
-                 title = paste0("Run Name: Unsaved Run\n", "Variable: ", r6$no_save_output$variable[1]))} %>%
+                 title = paste0("Run Name: Unsaved Run\n", "Variable: ", r6$no_save_output$variable[1],"\nPermafrost: ",r6$permafrost))} %>%
             plotly::ggplotly() %>%
             layout(
                 legend = list(

h2/components/layout/footer.html

@@ -0,0 +1 @@
+<p class = "sticky-footer" > This research was supported in part by the  <a href = "https://www.energy.gov/science/office-science"> U.S. Department of Energy, Office of Science,</a> as part of research in <a href = "https://climatemodeling.science.energy.gov/program/multisector-dynamics"> MultiSector Dynamics </a> Earth and Environmental System Modeling Program. <a href = "https://www.pnnl.gov/"> The Pacific Northwest National Laboratory </a> is operated for DOE by Battelle Memorial Institute. The authors also received support for this research through the U.S. Environmental Protection Agency. </p>

h2/components/layout/homepage.html

@@ -1,4 +1,4 @@
-<p class = "test">Welcome to the user interface for <b>Hector</b>: an open source, object-oriented, and interactive simple global climate carbon-cycle model. It runs essentially instantaneously while still representing the most critical global scale earth system processes, and is one of a class of models heavily used for for emulating complex climate models and uncertainty analyses.
+<p class = "home-text"> Welcome to the user interface for <b>Hector</b>: an open source, object-oriented, and interactive simple global climate carbon-cycle model. It runs essentially instantaneously while still representing the most critical global scale earth system processes, and is one of a class of models heavily used for for emulating complex climate models and uncertainty analyses.
 </br>
 </br>
 This interactive version is built upon previous work by developers at the <a href = "https://www.pnnl.gov/projects/jgcri">Joint Global Change Research Institute (JGCRI)</a>, including the development of the initial C++ version of Hector, and the follow up R Package "Hector R".</p>

h2/components/layout/style copy.css

@@ -1,8 +1,110 @@
 
-.test {
-    font-family:"Barlow Regular", Sans-Serif !important;
-}
-
 h5 {
   font-weight: bold;
 }
+
+body
+{
+	font-family:"Barlow Regular", Sans-Serif !important;
+}
+
+.about-info
+{
+    font-size: 12px;
+}
+
+.c-emissions
+{
+    font-size: 14px;
+}
+
+.container {
+    position: relative;
+    width:100%;
+}
+
+.header-text-title
+{
+    position: absolute;
+    color: #FFFFFF;
+    top: 40%;
+    left: 50%;
+    text-align: center;!important
+    max-width: 120px;
+    margin-right: -50%;
+    transform: translate(-50%, -50%)
+}
+
+.header-text-sub
+{
+    position: absolute;
+    color: #FFFFFF;
+    text-align: center;
+    font-size: 100%;
+    top: 60%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%)
+}
+
+.home-text
+{
+    font-size: 16px;
+}
+
+.hrNav
+{
+    font-size: 50px;
+}
+
+.logo
+{
+
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    margin:20px;
+  padding:0px 8px;
+  width:5em;
+}
+
+.maps
+{
+    font-size: 16px;
+}
+
+.nav-tabs
+{
+    font-size: 14px;
+}
+
+.output-vars
+{
+    font-size: 16px;
+}
+
+.params
+{
+    font-size: 14px;
+}
+
+.navbar-nav
+{
+    float:none;
+    margin:0 auto;
+    display: block;
+    text-align: center;
+    color: #000000;
+}
+
+.navbar-nav > li {
+    display: inline-block;
+    float:none;
+    color: #000000;
+}
+
+.sticky-footer
+{
+    font-size: 12px;
+}
+}