diff --git a/app.R b/app.R new file mode 100644 index 0000000..6459ebc --- /dev/null +++ b/app.R @@ -0,0 +1,58 @@ +shiny::devmode(TRUE) + +library(shiny) +library(bslib) +theme <- bs_theme( + primary = "#7faeff" # blue-light +) + +source("R/Global.R") +source("home_page.R") +source("explore_page.R") + + + + +inspect_page <- tagList( + tags$div( + "Hello World – Page C") +) + +optimize_page <- tagList( + tags$div( + "Hello World – Page D") +) + +# --- UI --- + +ui <- page_navbar( + title = tags$img( + "Plateflow", + src = "logo.svg", + height = "35px", + alt = "InnerAnalyticsLogo" + ), + header = tags$head( + tags$link(rel = "stylesheet", href = "styles.css") + ), + theme = theme, + + nav_panel("Home", home_page), + nav_panel("EXPLORE", explore_page), + nav_panel("INSPECT", inspect_page), + nav_panel("OPTIMIZE", optimize_page) +) + +# --- Server --- + +server <- function(input, output, session) { + # input$page holds the currently active tab name if you ever need it + # e.g. observeEvent(input$page, { cat("Switched to:", input$page, "\n") }) + output$sessioninfo <- renderPrint({ sessionInfo()}) + + +} + + + +shinyApp(ui = ui, server = server) \ No newline at end of file diff --git a/dev/app.R b/dev/app.R index 3d99621..5252304 100644 --- a/dev/app.R +++ b/dev/app.R @@ -441,7 +441,7 @@ server <- function(input, output, session) { numericInput("dilutionFac", "dilution factor", value = NA, min = 0, max = 10), numericInput("NoDil", "no. of dilutions", value = NA, min = 8), numericInput("NoDilSer", "no. of dil. series", value = NA), - verbatimTextOutput("dilutions") + verbatimTextOutput("dilutions") #TODO_BARBARA Was wird hier ausgegeben? Sehe in ui nichts ), h4("log-dilutions from settings above"), column( diff --git a/explore_page.R b/explore_page.R new file mode 100644 index 0000000..da6a223 --- /dev/null +++ b/explore_page.R @@ -0,0 +1,72 @@ +explore_4pl <- tagList( + tags$p("hallo") +) + +explore_linear <- tagList( + tags$p("linear") +) + + + + +explore_page <- layout_sidebar( + sidebar = sidebar( + class = "sidebar", + tags$div( class = "sidebar_collector", + tags$h5( class = "sidebar_collector_header", + "Exploration Settings" + ), + sliderInput("sdfac", "Variability of lower to upper asymptote [%]:", min = 0, max = 100, value = 50), + sliderInput("potencydiff", "Potency of test [%]:", min = 0, max = 200, value = 100), + checkboxInput("PureErrMeta","Use pure error", FALSE), + checkboxInput("heterosked","Heteroskedastic noise", FALSE), + ), + tags$div( class = "sidebar_collector", + tags$h5( class = "sidebar_collector_header", "Curve Settings"), + numericInput("lowAsymptREF", "lower asymptote REF", 10, step = 1, min = 0), + numericInput("lowAsymptTEST", "lower asymptote TEST", 10, step = 1, min = 0), + numericInput("uppAsymptREF", "upper asymptote REF", 110, step = 1, min = 0), + numericInput("uppAsymptTEST", "upper asymptote TEST", 110, step = 1, min = 0), + numericInput("slopeREF", "slope REF", 1, step = 0.1, min = -10), + numericInput("slopeTEST", "slope TEST", 1, step = 0.1, min = -10), + numericInput("EC50", "EC50 REF", -3.5), + numericInput("potDiff", "potency difference", 0) + ), + tags$div( class = "sidebar_collector", + tags$h5( class = "sidebar_collector_header", "Dilutions"), + numericInput("CONC1", "highest concentration", 0.3, min = -3.5), + numericInput("CONC2", "2nd concentration", 0.15), + numericInput("CONC3", "3rd concentration", 0.075), + numericInput("CONC4", "4th concentration", 0.0375), + numericInput("CONC5", "5th concentration", 0.01875), + numericInput("CONC6", "6th concentration", 0.00938), + numericInput("CONC7", "7th concentration", 0.00469), + numericInput("CONC8", "8thd concentration", 0.00235), + numericInput("CONC9", "9thd concentration", value = NA), + numericInput("CONC10", "10th concentration", value = NA), + numericInput("CONC11", "11th concentration", value = NA), + numericInput("CONC12", "lowest concentration", NA) + ), + tags$div( class = "sidebar_collector", + tags$h5( class = "sidebar_collector_header", "Geometric Dilution Scheme"), + numericInput("ConcStart", "starting concentration", value = NA, min = 0), + numericInput("dilutionFac", "dilution factor", value = NA, min = 0, max = 10), + numericInput("NoDil", "no. of dilutions", value = NA, min = 8), + numericInput("NoDilSer", "no. of dil. series", value = NA, min = 0), #TODO 1? + ), + ), + + + # Main content goes here (can be multiple elements) + navset_pill( + id = "tab_menu", + nav_panel("4PL", explore_4pl), + nav_panel("LINEAR", explore_linear) + ), + tags$div( + box( # TODO + title = "Simulated data per log-concentration", solidHeader = TRUE, width = 12, "incl. mean, sd and CV%", + DT::dataTableOutput("ConctabMeta") + ), + ) +) diff --git a/home_page.R b/home_page.R new file mode 100644 index 0000000..79efdf2 --- /dev/null +++ b/home_page.R @@ -0,0 +1,44 @@ +home_page <- tagList( + tags$div( style = "align-self: center", + tags$div( class = "home-text-section", + tags$h3("Welcome to Plateflow"), + tags$p("Plateflow allows you to EXPLORE, INSPECT and OPTIMIZE your data in + the context of a 4 PL fit or a linear regression fit. "), + ), + + tags$div( class = "home-text-section", + tags$h4("Readable formats and expected structure"), + tags$p("Plateflow is optimized for uploadfiles in the folowing formats: + .xlsx, .csv and .numbers."), + tags$ul( + tags$li("1 column with the dilution concentrations (first or last column) is expected"), + tags$li("The column name of the dilution concentrations can be as follows: concentration, dose, log_concentration, log_dose (first letter can be capital). + It is assumed, that the concentrations are in anti-log or in natural log mode."), + tags$li("2 columns of reference and test sample readouts, respectively, in this order, are expected"), + tags$li("The column names for reference and test are free to set, but must differ for all columns"), + ), + tags$p("You can download an example", tags$a("TestFile.xlsx ", target = "self", href = "TestFile.xlsx"), "File here."), + tags$h6("Example filestructure:"), + tags$img(src= "example_file.png", width = "800px", alt="example filestructure for upload", style = " max-width:800px"), + tags$br(), + ), + + tags$div( class = "home-text-section", + tags$br(), + tags$h4("Information on dilution settings"), #TODO + tags$p("Bend points are calculated according to following formula:", + withMathJax(" $$bp_{1/2} = \\pm\\frac{1.31696}{Hill's slope}$$"), + "Please refer to this", a(href = "ADONIS.pdf", "Whitepaper", download = NA, target = "_blank"), "for further details.", #TODO this link does not work for me + ), + tags$br(), + ), + + tags$div( class = "home-text-section", + tags$h4("Plateflow Point of Contact"), + tags$p("At InnerAnalytics, we are happy to hear from you. You can contact us under: ", + tags$a("info@inner-analytics.eu", href = "mailto:info@inner-analytics.eu")), + tags$p("If you would like to report a bug, we would appreciate it if you sent us the following infos to help us solve your request as fast as possible: "), + verbatimTextOutput("sessioninfo"), #TODO actually output this + ), + ) +) \ No newline at end of file diff --git a/www/ExampleXL.png b/www/example_file.png similarity index 100% rename from www/ExampleXL.png rename to www/example_file.png diff --git a/www/logo.png b/www/logo.png deleted file mode 100644 index c6a6fc3..0000000 Binary files a/www/logo.png and /dev/null differ diff --git a/www/logov2.svg b/www/logo.svg similarity index 100% rename from www/logov2.svg rename to www/logo.svg diff --git a/www/styles.css b/www/styles.css new file mode 100644 index 0000000..6107667 --- /dev/null +++ b/www/styles.css @@ -0,0 +1,104 @@ +:root { + color-scheme: light; + --text-dark: #000000; + --text-light: #ffffff; + + --grey-900: #1f2937; + --grey-800: #2b3441; + --grey-200: #b1b9c5; + --grey-100: #e7f1ff; + --grey-white: #ffffff; + + --blue-light: #7faeff; + --blue: #5757fd; + --blue-dark: #4545ba; + +} + +body { + background: var(--grey-white); + color: var(--text-dark); +} + +/*------------------------header-------------------------------------------*/ +.navbar { + background-color: var(--grey-100); + border-bottom: 1px solid var(--blue-light) !important; + align-items: center; + width: 100; +} + +/* The app title */ +.navbar-brand { + color: var(--text-dark); + font-size: 1.4rem; +} + +/* Nav container */ +.navbar-nav { + display: flex; + justify-content: space-evenly; + align-self: center; +} + +/*Header buttons*/ +.navbar-nav .nav-link { + padding: 0.2rem 1.2rem !important; + margin: 0.4rem 0rem; + border: none; + border-radius: 5px; +} + +/*----------------------------------------------------------------------------*/ + +.navbar-nav .nav-link.active, +.tab-button:hover, +.navbar-nav .nav-link.focus, +.tab-button:focus, +#tab_menu .nav-link.active { + background-color: var(--blue-light); + color: var(--text-light) +} + +/* Center the tab buttons */ +#tab_menu { + justify-content: center; +} + +/* Style individual tab buttons */ +#tab_menu .nav-link { + background-color: var(--grey-100); + border-radius: 4px; + margin: 0rem 1rem; + color: var(--text-dark) +} + + + +/*----------------------------------------------------------------------------*/ + +.sidebar { + background-color: var(--grey-100) !important; + border-right: 1px solid var(--blue-light) !important; +} + +.sidebar_collector{ + border: 1px solid var(--blue-light); + border-radius: 4px; + padding: 10px; +} + +.sidebar_collector_header{ + border-bottom: 1px dashed var(--blue-light); + padding: 0 0 15px 0; +} +/*----------------------------------------------------------------------------*/ +.home-text-section{ + background-color: var(--grey-white); + padding: 10px; + border-radius: 4px; + max-width: 900px; + align-self: start; +} + +