-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui.R
207 lines (197 loc) · 8.5 KB
/
ui.R
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
ui <- page_navbar(
title = "AMR-SDG Alignment Explorer", fluid = TRUE, id = "navbar",
theme = bs_theme(version = 4, bootswatch = "yeti"),
# Article Info ------------------------------------------------------
nav_panel(
title = "Article Info",
fluidRow(column(width = 12, strong("This is the supplementary materials for the article:"),
br(),
em("When Global Health meets Global Goals”: A comparative analysis the alignment between National Action Plans for AMR and Sustainable Development"),
br(),
"Luong Nguyen-Thanh", tags$sup("1,2,4,"), "Didier Wernli", tags$sup("3,"), "Mats Målqvist", tags$sup("1,"), "Peter Søgaard Jørgensen", tags$sup("1,4,5"),
br(),
br(),
strong("Affiliations:"),
br(),
"1. SWEDESD – Sustainability Learning and Research Center, Department of Women’s and Children’s Health, Uppsala University, Uppsala, Sweden",
br(),
"2. Uppsala Antibiotic Centre (UAC), Uppsala University",
br(),
"3. Global Studies Institute and Faculty of Science, University of Geneva, Geneva, Switzerland",
br(),
"4. Global Economic Dynamics and the Biosphere, Royal Swedish Academy of Sciences, Stockholm, Sweden",
br(),
"5. Stockholm Resilience Centre, Stockholm University, Stockholm, Sweden",
br(),
br(),
strong("Table of Contents"),
br(),
tags$ul(
tags$li(tags$strong("Annex 1. Country selection")),
tags$ul(
tags$li(tags$a(href = "#", onclick = "Shiny.setInputValue('navTo', 'country-selection')", "Figure S1. Country’s document selection process for reviewing")),
tags$li(tags$a(href = "#", onclick = "Shiny.setInputValue('navTo', 'country-selection')", "Figure S2. Map of countries selected into the study"))),
tags$li(tags$strong("Annex 2. Supporting results")),
tags$ul(
tags$li(tags$a(href = "#", onclick = "Shiny.setInputValue('navTo', 'cross-link')", "Figure S3. Coverage of drivers or AMR in the WHO-GAP and UN-SDGs agenda")),
tags$li(tags$a(href = "#", onclick = "Shiny.setInputValue('navTo', 'link-amr-sdg')", "Figure S4. Link between UN-SDGs & WHO-GAP"))
)
)
))
),
# Document selection process ----------------------------------------
nav_panel(
title = "Country selection",
value = "country-selection",
# Defining the layout
fluidPage(
# Add custom CSS for label styling
tags$head(
tags$style(HTML("
pre#n_countries.shiny-text-output.noplaceholder.shiny-bound-output {
background-color: #f2f2f2 !important;
font-weight: bold;
font-family: var(--bs-btn-font-family);
text-align: center;
font-size: 13px;
width: 100%; /* Ensure same width */
text-align: center;
box-sizing: border-box; /* Include padding in the element's total width */
border-radius: 10;
padding: 18px;
}
.btn.radiobtn.btn-primary {
font-size: 12px;
border-radius: 10;
display: flex;
align-items: center;
font-weight: bold;
width: 100%; /* Ensure same width */
text-align: center;
box-sizing: border-box; /* Include padding in the element's total width */
padding: 10px;
}
"))
),
fluidRow(
column(6, img(src = "study-selection.png", height = "100%", width = "100%")),
column(6, plotOutput("AMR_SDG_available", width = "100%", height = "100%"))
),
br(),
# Caption for the image, text should be aligned center, make text figure 1 bold
fluidRow(
column(6, strong("Figure S1:"), span("Country’s document selection process for reviewing"), align = "center"),
column(6, strong("Figure S2:"), span("Map of countries selected into the study (step 4)"), align = "center")
),
br(),
fluidRow(
column(6, radioGroupButtons(
inputId = "step",
label = NULL, # Label is styled separately now
choices = c(
"Step 1: Retrieve AMR-NAP documents from WHO database",
"Step 2: Keep only eligible AMR-NAP documents",
"Step 3: Keep only eligible SDG-NAP documents",
"Step 4: Purposively select 10 countries"
),
selected = "Step 4: Purposively select 10 countries",
status = "primary", # Change this to your desired theme color
checkIcon = list(
yes = icon("check-circle"), # Use FontAwesome "check-circle" for selected
no = icon("circle-thin") # Use FontAwesome "circle-thin" for unselected
)
)),
column(6, verbatimTextOutput("n_countries"))
),
fluidRow(dataTableOutput("country_table"))
)),
# Coverage AMR-SDG ----------------------------------------
navbarMenu(
"Link between UN-SDGs & WHO-GAP",
tabPanel(
"Coverage of AMR drivers in UN-SDGs & WHO-GAP agenda",
value = "cross-link",
tags$head(tags$style(HTML("
.well .custom-sidebar {
width: 80% !important; /* Reduces the width to 70% of its original size */
float: left;
height: 800px !important;
}
.well {
height: 800px !important;
}
.custom-main {
width: 100% !important; /* Set the width to 70% */
float: left;
}
.shiny-text-output.noplaceholder.shiny-bound-output {
text-wrap: balance !important;
}
"))),
sidebarLayout(
sidebarPanel(
class = "custom-sidebar",
tags$style(HTML("
.btn.dropdown-toggle.btn-light {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
width: 100%; /* Ensures the button fits within the column */
}
")),
fluidRow(h3(strong("Filters"))),
fluidRow(pickerInput("AMR_selection", "Select AMR objectives",
choices = amr_selection,
multiple = TRUE,
selected = amr_selection,
options = pickerOptions(
liveSearch = TRUE,
size = 10))),
fluidRow(pickerInput("SDG_selection", "Select SDGs",
choices = sdg_selection,
multiple = TRUE,
selected = sdg_selection,
options = pickerOptions(
liveSearch = TRUE,
size = 10))),
fluidRow(actionButton("apply_filters", "Apply Filters", class = "custom-action-button")),
fluidRow(verbatimTextOutput("text_output"))
),
mainPanel(
class = "custom-main",
plotOutput("AMR_SDG_coverage", width = "100%", height = "800px"),
fluidRow(
column(12,
div(style = "text-align: center;",
strong("Figure S3."),
span("Coverage of drivers or AMR in the WHO-GAP and UN-SDGs agenda")
)
)
)
)
),
fluidRow(dataTableOutput("interactive_table"))
),
tabPanel(
"Shared drivers between UN-SDGs & WHO-GAP agenda",
value = "link-amr-sdg",
# Embedding the external HTML content
HTML('
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link between UN-SDGs & WHO-GAP</title>
</head>
<body>
<div class="flourish-embed flourish-sankey" data-src="visualisation/16246534">
<script src="https://public.flourish.studio/resources/embed.js"></script>
</div>
</body>
</html>
')
)
)
)