inst/app/ui_home.R

In avucoh/nPOD: What the Package Does (One Line, Title Case)

fluidPage(id = "home",
  fluidRow(id = "header-buffer"),
  fluidRow(id = "header-row",
           div(style = "display: inline-block; margin-left: 50px;",
               div(id = "main-title", "Discover data from 10+ years of nPOD diabetes research")),
           div(style = "display: inline-block; margin-right: 50px; float: right;", htmlOutput("metrics"))
  ),
  fluidRow(
    column(5, class = "col-500",
           div(class = "feature-container", style = "margin-top: 0",
               div(class = "feature-head", icon("chevron-circle-right"), HTML("Let data connect investigators for collective knowledge & new collaborations.")),
               div(class = "feature-subtext", includeMarkdown("www/content/feature1.Rmd")),
               selectizeInput("connections", label = NULL, choices = c("", visNetD$nodes$label2), options = list(placeholder = "select a study"))
           )
    ),
    column(2, class = "col-500",
          div(id = "network-graph-container",
              shinycssloaders::withSpinner(visNetwork::visNetworkOutput("studynetwork", height = "650px"), color = "lemonchiffon", type = 7))
    ),
    column(5, class = "col-500",
           div(class = "feature-container", style = "margin-top: 0",
               div(class = "feature-head", icon("chevron-circle-right"), HTML("Discover new relationships even between different types of data.")),
               div(class = "feature-subtext", includeMarkdown("www/content/feature2.Rmd"))
           )
      )
    ),
  fluidRow(
    column(8, class = "col-350",
             div(style = "margin-top: -120px;", DIVE::HPCGraphOutput("landing"))
    ),
    column(4, class = "col-350",
           div(style = "margin-top: -50px; margin-left: -60px;", DIVE::cellPackUI("landing", width = "500px", height = "400px"))
    )
  ),
  fluidRow(
    column(5, class = "col-500",
           div(class = "feature-container",
               div(class = "feature-head", icon("chevron-circle-right"), HTML("Compare data & match donors across cohorts.")),
               div(class = "feature-subtext", includeMarkdown("www/content/feature3.Rmd"))
           )
    ),
    column(2, class = "col-500"),
    column(5, class = "col-500",
           div(class = "feature-container",
               div(class = "feature-head", icon("chevron-circle-right"), HTML("Share FAIR.")),
               div(class = "feature-subtext", includeMarkdown("www/content/feature4.Rmd"))
           )
    ),
  ),
  fluidRow(id = "footer-row", class = "col-white",
           column(4,
                  div(class = "feature-container",
                      div(class = "feature-head", "Installation & Documentation"),
                      div(span(class = "more-feature", icon("r-project"), "R package"),
                          span(class = "more-subtext", "Documentation")),
                      div(span(class = "more-feature", icon("code"), "Open-source"),
                          span(class = "more-subtext", "Github code and documentation")),
                      div(span(class = "more-feature", icon("docker"), "Docker"),
                          span(class = "more-subtext", "Docker install and documentation"))
                  )
           ),
          column(4,
                 div(class = "feature-container",
                     div(class = "feature-head", "Engagement"),
                     div(span(class = "more-feature", icon("hand-holding-heart"), "This is great! How do I contribute data?"),
                         span(class = "more-subtext", "We're currently working on it. See details under More.")),
                     div(span(class = "more-feature", icon("comment-dots"), "I have suggestions or bug reports."),
                         span(class = "more-subtext", "Please use this form or (if you use Github) submit an issue.")),
                     div(span(class = "more-feature", icon("user-plus"), "I'm now interested in using nPOD samples."),
                         span(class = "more-subtext", "Go to https://www.jdrfnpod.org/for-investigators/."))
            )),
          column(4,
                 div(class = "feature-container",
                     div(class = "feature-head", "About"),
                     div(span(class = "more-feature", icon("graduation-cap"), "How do I cite this work?"),
                         span(class = "more-subtext", "Please cite: (TBD)."))
                 ))

  )
)