Merge pull request #7 from bitowaqr/main

some suggestions

README.md

@@ -32,41 +32,10 @@ Robert Smith<sup>1,2,3</sup> &  Paul Schneider<sup>2,3</sup>
 <img src='app_files/www/process_diagram.PNG' height="300" align="center"/>
 
 
-## Project Organization
-
-Show the project structure here, overwriting the default as necessary.
-
-------------------------
-
-```
-├── data
-│   └── processed      <- Processed, cleaned data - likely not used here.
-│
-├── outputs            <- Generated outputs (reports, figures, etc)
-│
-├── report             <- Write up for external use. Rmarkdown files, bibtex etc.. include templates if not in BresMed package.
-│
-├── R                  <- Source code for use in this project, all functions.
-│
-├── tests              <- Tests for this project - e.g. testthat.
-│
-├── scripts            <- Scripts that may run specific analyses
-│
-├── app_files          <- Folder for Shiny App content, includes file app.R.
-│  └── UI              <- folder with UI content.
-│  └── server          <- folder containing server file.
-│  └── www             <- other content.
-│
-├──.github 
-│  └── workflows       <- contains all workflows for github actions.
-│
-├── .gitignore         <- indicating which files should be ignored by git
-│
-└── README.md          <- Top-level README - this file.
-```
-
 ## Instructions for using the API only
 
+<!-- THE INSTRUCTIONS ARE NOT CLEAR: HOW DO I RUN THE WORKFLOW? WHERE CAN I FIND THE CONNECT_KEY ? -->
+
 The file `scripts/run_darthAPI.R` is the file run by the automated workflow.
 Within this file is a call to the API, shown below, undertaken using the `httr` package.
 To run this function you will need the api key, which I have stored as an environment variable `CONNECT_KEY`.

app_files/landing_div.R

@@ -13,13 +13,13 @@ landingDiv = function(){
                     </div>
                     <div class = "logos d-flex flex-row justify-content-center flex-wrap mx-auto px-5">
                         <div class="cell">
-                            <img  class ="image" src="sheffield_logo.png" style="height:50px;width:auto">
+                            <img  class ="image" src="sheffield_logo.png" style="height:70px;width:auto">
                         </div>
                         <div class="cell">
-                            <img class ="image" src="lumanity_logo.png" style="height:50px;width:auto">
+                            <img class ="image" src="lumanity_logo.png" style="height:70px;width:auto">
                         </div>
                         <div class="cell">
-                            <img class ="image" src="dpa_logo.png" style="height:50px;width:auto">
+                            <img class ="image" src="dpa_logo.png" style="height:70px;width:auto">
                         </div>
                     </div>
                     <div class="progress">

app_files/server.R

@@ -14,6 +14,13 @@ server <- function(input, output) {
 
   list_results <- eventReactive(input$runModel, {
 
+    # PS: error message when api key not provided? 
+    # Is the API/key supposed accessible to everyone?
+    if(Sys.getenv("CONNECT_KEY") == ""){
+      shiny::showNotification(type = "error","Error: No API Key provided")
+      return(NULL)
+    }
+
     # convert inputs into a single data-frame to be passed to the API call
     df_input <- data.frame(
       parameter = c("p_HS1", "u_S1"),
@@ -42,6 +49,7 @@ server <- function(input, output) {
         # set of parameters to be changed ... we are allowed to change these but not some others...
         body = jsonlite::toJSON(df_input),
         # we include a key here to access the API ... like a password protection
+
         config = httr::add_headers(Authorization = paste0("Key ", 
                                                           Sys.getenv("CONNECT_KEY")))
       )

app_files/style.css

@@ -18,6 +18,7 @@ html, body {
   font-weight: 400;
   width: 100%;
   height: 100%;
+  font-size: 10pt;
 }
 
 body {

app_files/ui.R

@@ -3,6 +3,24 @@ source("./landing_div.R")
 # Define UI for application that draws a histogram
 ui <- fillPage(
 
+  shiny::tags$head(
+    tags$title(
+      "PlumberHE demo"
+    )
+  ),
+  # suppressDependencies("bootstrap"),
+  tags$link(
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
+    rel="stylesheet",
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",
+    crossorigin="anonymous"
+  ),
+  # tags$script(
+  #   src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
+  #   integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM",
+  #   crossorigin="anonymous"
+  # ),
+
   # enable shinyjs
   #useShinyjs(),
   # load js scripts
@@ -15,16 +33,16 @@ ui <- fillPage(
 
   # Application title
   titlePanel( h1("Living HTA - Demo Shiny App", 
-                 align = "center",color = "#012d5c")
-              ),
+                 align = "center",color = "#012d5c", style = "margin-bottom: 20px;")
+  ),
 
   # Sidebar with a slider input for number of bins 
   sidebarLayout(
 
     sidebarPanel(
 
       tabsetPanel(
-            
+
         tabPanel(title = "State Trans Probs", 
 
                  #=====================================#
@@ -47,7 +65,7 @@ ui <- fillPage(
                               min = 0,
                               max = 200,
                               value = 170)
-                 ),
+        ),
 
         tabPanel(title = "Utilities", 
                  #=====================================#
@@ -70,65 +88,70 @@ ui <- fillPage(
                               min = 0,
                               max = 200,
                               value = 45)
-                 )
+        )
       ),
 
-
+      
 
 
 
       # action button to run the model
-      actionButton("runModel", "Run Model"),
+      actionButton("runModel", "Run Model", class = "btn btn-primary btn-lg"),
 
     ),
 
     # Show a plot of the generated distribution
     mainPanel(
       tabsetPanel(
         tabPanel(title = "Model Output",
+                class = "p-3",
                  column(width = 6,align="center",
                         h2("QALYs"),
                         tableOutput(outputId = "ResultsTab_Q")),
                  column(width = 6,align="center",
                         h2("Costs"),
                         tableOutput(outputId = "ResultsTab_C"))),
         tabPanel(title = "CE Plane", 
+                 class = "p-3",
                  plotOutput(outputId = "CEPlane")),
         tabPanel(title = "CEAC", 
+                 class = "p-3",
                  plotOutput(outputId = "CEAC"))
       )
 
     )
   ),
 
-  fluidRow(
-  column(
-    width = 10,
-    offset = 1,
-    p(
-      "The take-home from this very simple demo app is that the designer of the app
+  div(
+    class = "card mt-3 mb-5 shadow-lg w-50 mx-auto",
+    div(
+      class = "card-header",
+      "Take-home messager"
+    ),
+    div(
+      class = "card-body",
+      div(
+
+        p(
+          "The take-home from this very simple demo app is that the designer of the app
        does not need to have: the model code, any data, any knowledge of health economics.
        They just connect numeric inputs to JSON inputs to the model as requested by a health economist"
-    )
-  )), # end row
-
-  br(),
-
-  fluidRow(
-  column(
-    offset = 3,
-    width = 3,
-    actionButton("code", "code", icon = icon("code"), class = "btn-info-2 my-2")
-  ),
-  column(
-    width = 3,
-    actionButton(
-      "contact",
-      "contact",
-      icon = icon("envelope"),
-      class = "btn-info-2 my-2"
-    )
+        )
+      )), # end row
+
+
+
+    div(
+      class = "d-flex justify-content-center w-100 mb-4", 
+      actionButton("code", "code", icon = icon("code"), class = "btn-info-2"),
+
+      actionButton(
+        "contact",
+        "contact",
+        icon = icon("envelope"),
+        class = "btn-info-2"
+      )
   )
-) # end row
-
+  )
+  
 )