inst/app/code/ui/Introduction.R

In chemokine/OmicsSBGN: Overlay omics data onto SBGN pathway diagram

fluidPage(
    # box(
    #     id = "dataIntro",
    #     title = "Brief Workflow Procedure Details",
    #     status = "primary",
    #     solidHeader = FALSE,
    #     collapsible = TRUE,
    #     collapsed = TRUE,
    #     width = 12
    #         ,h3("inbox")
    # ),
    fluidRow(
        div(
            style="max-width:800px; word-wrap:break-word;",
            id = "introPage",
            h3("Getting Started"),
            p(
                "SBGNview is a tool set for visualizing omics data on 
                
                ", 
                a(href = paste0("https://sbgn.github.io/"),
                  "SBGN", target = "_blank")
                ,"
                  
                pathway maps.
                ",
                br(),
                h4("Input"),
                HTML("<ol type='1'>"
                         ,"<li>", "SBGN-ML file
                            <ul style='list-style-type:circle;'>
                                <li>
                                    Built-in pre-collected files:
                                    ",paste(
                                             a(href = paste0("https://reactome.org/",
                                                             ".gov/pmc/articles/PMC3119870/"),
                                               "Reactome", target = "_blank"))
                                    ,"; "
                                    ,paste(
                                             a(href = paste0("http://smpdb.ca/"),
                                               "SMPDB", target = "_blank"))
                                    ,"; "
                                    ,paste(
                                         a(href = paste0("http://smpdb.ca/"),
                                           "SMPDB", target = "_blank")),"
                                    <ul style='list-style-type:square;'>
                                         <li>Pathway ID</li>
                                         <li>Omics data species</li>
                                         <li>Omics data ID type</li>
                                    </ul>
                                </li>
                                
                                <li>
                                    User defined SBGN-ML file:
                                    <ul style='list-style-type:square;'>
                                         <li>
                                            Glyph ID type of the SBGN-ML file
                                         </li>
                                         <li>
                                            ID mapping table from omics ID to glyph ID.
                                         </li>
                                    </ul>
                                </li>
                                
                                
                            </ul>
                        </li>"
                     
                        ,"<li>", "Omics data table:
                             <ul style='list-style-type:circle;'>
                                 <li>
                                    Supported pecies:
                                     <ul style='list-style-type:square;'>
                                         <li>
                                            Human (KEGG code: hsa)
                                         </li>
                                         <li>
                                            Mouse (KEGG code: mmu)
                                         </li>
                                     </ul>
                                 </li>
                                 
                                 <li>
                                     Supported ID types: 
                                     <ul style='list-style-type:square;'>
                                         <li>
                                            Entrez gene ID
                                         </li>
                                         <li>
                                            Ensembl gene ID
                                         </li>
                                     </ul>
                                 </li>
                             </ul>
                         "
                         ,"</li>",
                     "</ol>"
                 ),
                h4('Output'),
                HTML("<ul >"
                         ,"<li>", "Pathway image files (svg, png, pdf, ps)"
                         ,"</li>",
                     "</ul>"
                 ),
                br(),"
                For a detailed guide, please refer
                to the ",
                a(href = ProjectUrl, "R package.",
                  target = "_blank"), br(), br(),
                ""
            )
            # ,p("In this web app, two example Omics datasets are available and can be downloaded as tab seperated tables.
            #     The downloaded table can be uploaded as input Omics data.
            #   "),
            # p( 
            #     "Three pathway databases from", 
            #          a(href = paste0("https://www.pathwaycommons.org/"),
            #            "Pathway Commons", target = "_blank")," are supported in this web app.
            #             More databases and functions are supported by the R package."
            # )
            ,tags$p(
                style = "font-size:25px;display: inline-block;",
                class = "img",
                tags$img(
                    src = "ifng.png",
                    width = "800px", height = "800px",
                    alt = "demo img"
                )
                ,tags$img(
                    src = "intro.png",
                    width = "800px", height = "800px",
                    # style = "position: absolute; left: 5px;
                    #         padding: 8px;",
                    # srcset = "test.shiny_P00001.png 0.2x",
                    alt = "demo img"
                )
            , radioButtons("loadData", "",
                           choices = c(
                               Demo = "loadDataset"
                           ),
                           selected = "loadDataset")
            ,textOutput("loaded")
            )
        )
    )
)