shinyproxy/templates/index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">

    <title th:text="${title}"></title>

     <!-- ------- Metadata ------- --> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bioinformatic tools to analyse gene expression and alternative splicing in samples from normal and disease individuals from TCGA, GTEx and SRA">
    <meta name="keywords" content="bioinformatics, cancer, neuroscience, ageing, single-cell, app, dashboard, online, user-friendly"> 

    <!-- ------- Style, icons, etc ------- --> 
    <!-- ------- Style ------- --> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
     <link rel="stylesheet" type="text/css" href="assets/shinyproxy.css"/>
     <script type="text/javascript" src="assets/scripts.js"></script>
   
     <!-- ------- Fonts ------- -->  
    <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@200&family=Syne+Mono&display=swap" rel="stylesheet">

     <!-- ------- Icons ------- --> 
    <script src="https://kit.fontawesome.com/2c90bf8329.js" crossorigin="anonymous"></script>


    <script th:src="@{${cookieJs}}"></script>
    <script th:src="@{/js/new_version_check.js}"></script>
    <script async defer data-domain="compbio.imm.medicina.ulisboa.pt" data-api="/api/event" src="/js/plausible.js"></script>    


    <style> </style>

    </head>

<body>

    <!-- Navbar (sit on top) -->
    <div class="w3-top">
        <div class="w3-bar w3-white" id="myNavbar" style="background-color: white;" >
            <a class="w3-bar-item w3-button w3-hover-black w3-hide-large w3-right"
                href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
                <i class="fa fa-bars"></i>
            </a>

             <a class="w3-bar-item w3-button w3-left"
                th:href="@{/}"  title="Home"> <i class="fa fa-house"></i></a>

            <a href="#apps" class="w3-bar-item w3-button w3-hide-small w3-left w3-hide-medium"> Web Apps</a>
            <a href="#developapps" class="w3-bar-item w3-button w3-hide-small w3-left w3-hide-medium"> Other Apps in Development</a>
            <a href="#dockerimages" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-left"> Docker Images </a>

            <a href="mailto:imm-nmorais@medicina.ulisboa.pt?subject=NMorais app server" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-right" target="_blank"><i class="fa fa-envelope"></i> Suggestions / Report Issue </a>
            <a href="https://github.com/nuno-agostinho/compbio-app-server" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-right" target="_blank"><i class="fa fa-github"></i> GitHub </a>
             
        </div>


        <!-- Navbar on small screens -->
        <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large ">

            <a href="#apps" class="w3-bar-item w3-button w3-right" onclick="toggleFunction()"> Bioinformatic Web Apps </a>
            <a href="#developapps" class="w3-bar-item w3-button w3-right" onclick="toggleFunction()"> Other Apps in Development </a>
            <a href="#dockerimages" class="w3-bar-item w3-button w3-right" onclick="toggleFunction()"> Docker Images </a>

            <a href="https://github.com/nuno-agostinho/compbio-app-server" class="w3-bar-item w3-button w3-right " onclick="toggleFunction()" target="_blank">GitHub</a>

            <a href="mailto:imm-nmorais@medicina.ulisboa.pt?subject=NMorais app server" class="w3-bar-item w3-button w3-right" onclick="toggleFunction()" target="_blank"> Suggestions / Report Issue </a>
 

        </div>
    </div>

    <!-- Header -->
    <div class="header" id="home">
    <img src="assets/img/logos/logolab_inv.png" alt=" "  class="responsive">  
                    <p class="wrapper" style="color:white; font-size: 1.1em;">
                    <!-- The Disease Transcriptomics Lab at iMM, led by Nuno Barbosa-Morais, is a group of researchers applying computational approaches involving the analysis of high-throughput genomic and transcriptomic data aiming to understand how changes at the RNA-level increase proneness to diseases, namely cancer, neurodegenerative disorders and other ageing-related pathologies. Along the way, we develop some tools for assisting non-computational scientists in their analyses of transcriptomic data. -->

                    We are a group of researchers applying computational approaches involving the analysis of high-throughput genomic and transcriptomic data aiming to understand how changes at the RNA-level increase proneness to diseases, namely cancer, neurodegenerative disorders and other ageing-related pathologies. Along the way, we develop some tools for assisting non-computational scientists in their analyses of transcriptomic data.


                    </p>

                <div class="wrapper">
                        <a class="button" href="https://imm.medicina.ulisboa.pt/group/distrans/" >Know more ...</a>
                </div>
    </div>
 
    <!-- Mission -->
    <div class="w3-content w3-container w3-padding-24" id="mission">
    <h1 class="w3-center">Our Mission </h1>
    <p class="wrapper">
        We develop applications for assisting non-computational scientists in their analyses of transcriptomic data. We aim to contribute towards bridging the conceptual and knowledge gaps between wet- and dry-lab researchers, by transparently sharing our approaches to data analysis in ways that make them understandable and therefore open for scrutiny by fellow scientists, also facilitating their reproducibility. Our bioinformatics tools empower colleagues to intelligibly perform similar analyses to ours, by visually assisting their decision-making process, avoiding “black boxes”.  We make our applications open source, user-friendly and freely available on our webserver, to democratise their use by the entire scientific community. We further increase their usability through the creation of accompanying tutorials and other training materials. 
    </p>
    </div>


    <!-- Web Apps -->
    <div class="w3-content w3-container w3-padding-24 reveal" id="apps">
    <h1 class="w3-center">Bioinformatic Web Apps</h1>
    <div class="cards_grid reveal" >

         <!--  ------ psichomics ------ -->
         <div class="card reveal">
            <div>
                <h1><b>
                    <!-- Icon App -->
                    <i class="fa-solid fa-magnifying-glass-chart"></i> 
                    <!-- Name App -->
                    psichomics 
                </b></h1> 

                <!-- App Resources -->
                <p> 
                    <!--<a href="https://link.springer.com/protocol/10.1007%2F978-1-0716-0301-7_10">Tutorial</a>
                    <a href="https://doi.org/10.1093/nar/gky888">Paper</a> -->

                    Paper    
                        <a style="margin-right: 0em;" href="https://doi.org/10.1093/nar/gky888">[1]</a> 
                        <a href="https://link.springer.com/protocol/10.1007%2F978-1-0716-0301-7_10">[2]</a>  

                    <a href="https://bioconductor.org/packages/release/bioc/html/psichomics.html">R package</a> 
                    <a href="https://nuno-agostinho.github.io/psichomics/">GitHub</a> 
                 </p>

                 <!-- App Description -->
                 <p style="font-family: Syne Mono;" > Alternative splicing quantification, visualisation and analysis  </p>
                 
                 <!-- App link -->
                 <div class="wrapper">
                        <a class="button" href="/app/psichomics" >Go <i class="fa-solid fa-chevron-right"></i> </a>
                 </div>
                 
                 <!-- Examples of App Impact -->
                 <p style="color: grey; ">  
                     Impact (examples):
                      <a href="https://www.nature.com/articles/s41467-019-14020-5" style="margin-left:1em">Neurobiology</a>
                      <a href="https://www.sciencedirect.com/science/article/pii/S0092867418316246" >  Splicing Regulation</a> 
                     <a href="https://elifesciences.org/articles/47678">Cancer</a> 
                     
                  </p>
            </div>
         </div>
        
         <!-- ------ scStudio ------ -->
         <div class="card reveal">
            <div>
                <h1><b> 
                    <!-- Icon App 
                    <i class="fa-solid fa-sliders"></i> -->
                    
                    <img src="assets/img/scStudio_icon.png" style="height: 1.2em;  vertical-align: -0.15em;">

                    <!-- Name App -->
                    scStudio 
                </b></h1> 
                <!-- App Resources -->
                <p> 
                    <a href=""> </a>
                 </p>

                <!-- App Description -->
                 <p style="font-family: Syne Mono; margin-bottom: 3em;"> Interactive and flexible analysis of single-cell RNA-seq data </p>  

 
                 <!-- App link -->
                  <div class="wrapper">
                        <a class="button" href="/app/scStudio" >Go <i class="fa-solid fa-chevron-right"></i> </a>
                </div>
            </div>
         </div>

         <!-- ------ cTRAP ------ -->
         <div class="card reveal">
            <div>
                <h1> <b> 
                    <!-- Icon App -->
                    <i class="fa-solid fa-pills"></i>
                    <!-- Name App --> 
                    cTRAP 
                </b></h1> 

                <!-- App Resources -->
                <p>  
                     <!-- <a href="http://www.bioconductor.org/packages/devel/bioc/vignettes/cTRAP/inst/doc/cTRAP.html">Tutorial</a> -->
                     <a href="https://www.bioconductor.org/packages/release/bioc/html/cTRAP.html">R package</a> 
                    <a href="https://nuno-agostinho.github.io/cTRAP/">GitHub</a>
                 </p>

                 <!-- App Description -->
                 <p style="font-family: Syne Mono;"> Identifying candidate causal perturbations from differential gene expression data </p> 

                 <!-- App link -->
                <div class="wrapper">
                    <a class="button" href="/app/cTRAP" >Go <i class="fa-solid fa-chevron-right"></i> </a>
                 </div>

                 <!-- Examples of App Impact -->
                 <p style="color: grey;">  
                     Impact (examples):
                     <br> 
                     <a href="https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1006832">Cancer</a> 
                 
                </p>
            </div>
         </div>

          <!-- ------ voyAGEr ------ -->
         <div class="card reveal">
            <div>
                <h1> <b> 
                    <!-- Icon App -->
                    <i class="fa-solid fa-hourglass-end"></i> 
                    <!-- Name App --> 
                    voyAGEr
                </b> </h1>

                <!-- App Resources -->
                 <p> 
                    <a href="https://doi.org/10.7554/eLife.88623.3">Paper</a> 
                    <a href="https://github.com/DiseaseTranscriptomicsLab/voyAGEr">GitHub</a> 
                    <a href="https://diseasetranscriptomicslab.github.io/voyAGEr/www/voyAGEr-WebAppTutorial.html">Tutorial</a>  
                  </p> 

                <!-- App Description -->
                 <p style="font-family: Syne Mono;"> Analysis of age-related gene expression changes in human transcriptomic data </p>  

                 <!-- App link -->
                <div class="wrapper">
                    <a class="button" href="/app/voyAGEr" > Go <i class="fa-solid fa-chevron-right"></i> </a>
                 </div>
            </div>
         </div>

         <!-- ------ betAS ------ -->
         <div class="card reveal">
            <div>
                <h1> <b> 
                    <!-- Icon App 
                    <i class="fa-solid fa-mountain-sun"></i>-->
                    
                    <img src="assets/img/betAS_icon.png" style="height: 1.2em;  vertical-align: -0.15em;">

                    <!-- Name App --> 
                    betAS 
                </b> </h1> 
                <!-- App Resources -->
                <p> 
                	<a href="https://rnajournal.cshlp.org/content/30/4/337.abstract">Paper</a> 
                    <a href="https://github.com/DiseaseTranscriptomicsLab/betAS/tree/dev">GitHub</a> 
         
                     Tutorial
                        <a style="margin-right: 0em;" href="https://compbio.imm.medicina.ulisboa.pt/betas/tutorial">[1]</a>
                        <a href="https://diseasetranscriptomicslab.github.io/betAS/inst/betAS_tutorial.html">[2]</a>
                     
                 </p>

                <!-- App Description -->
                 <p style="font-family: Syne Mono;"> Intuitive differential alternative splicing analyses using beta distributions </p>

                 <!-- App link -->   
                <div class="wrapper">
                    <a class="button" href="/app/betAS" > Go <i class="fa-solid fa-chevron-right"></i> </a>
                 </div>
                
                <!-- Examples of App Impact -->
                 <p style="color: grey;"> 
                     Impact (examples):
                     <br> 
                     Alternative Splicing    
                        <a style="margin-right: 0em;" href="https://rnajournal.cshlp.org/content/26/12/1935.long">[1]</a> 
                        <a href="https://www.nature.com/articles/s41467-021-23505-1">[2]</a>  
                 
                </p>

            </div>
         </div>

         <!-- ------ missing card ------ -->
         <div class="missing_card reveal w3-hide-small   ">
         </div> 
         

    </div>
    </div>

    <!-- Apps in Development -->
    <div class="w3-content w3-container w3-padding-24 reveal" id="developapps">
    <h1 class="w3-center">Other Apps in Development</h1>
    <div class="cards_grid " >
 
         <!-- ------ CREOLE ------ -->
         <div class="card ">
            <div>
                <h1> <b> 
                    <!-- Icon App -->
                    <i class="fa-solid fa-align-left"></i> 
                    <!-- Name App --> 
                    CREOLE 
                </b></h1>  

                <!-- App Resources -->
                 <p>  
                    <a href="https://github.com/comprna/CREOLE">GitHub</a> 
                 </p>

                 <!-- App Description -->
                 <p style="font-family: Syne Mono;"> Reference-free identification of open reading frames and encoded proteins from nanopore transcriptomic long reads  </p>
            </div>
         </div>

         <!-- ------ markeR ------ -->
         <div class="card ">
            <div>
                <h1> <b> 
                    <!-- Icon App -->
                    <i class="fa-solid fa-align-left"></i> 
                    <!-- Name App --> 
                    markeR 
                </b></h1>  

                <!-- App Resources -->
                 <p>  
                    <a href="https://github.com/DiseaseTranscriptomicsLab/markeR/">GitHub</a> 
                 </p>

                 <!-- App Description -->
                 <p style="font-family: Syne Mono;"> Toolkit for Evaluating Gene Signatures as Phenotype Markers in R  </p>
            </div>
         </div>

         <!-- ------ missing card ------ --> 
         <div class="missing_card reveal">
             
         </div> 

         <!-- ------ missing card ------ 
         <div class="missing_card reveal">
             
         </div> -->

    </div>
    </div>


<!-- Docker Images -->
    <div class="w3-content w3-container w3-padding-24 reveal" id="dockerimages">
        <h1 class="w3-center"> <i class="fa-brands fa-docker"></i> Docker Images</h1>
        <p class="w3-center">
            At iMM, we have the opportunity of using Lobo, a multi-hundred node computer cluster. Lobo makes extensive use of Docker images, each a read-only templates that carries the instructions to build a Docker container. Containers are packaged applications that carry the necessary dependencies to allow running the program in every computer environment.
            
            The following Docker images were developed by people in the Disease Transcriptomics team (in <span style="color: #18a986;"><strong>green</strong></span>, those under active maintenance).
        </p>
        <div class="smallercard_grid reveal" >

              <div class="smallercard reveal" style="background-color: rgba(113, 213, 189, 0.25);">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/psichomics">psichomics</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative-splicing </p>
                </div>
             </div>

              <div class="smallercard reveal" style="background-color: rgba(113, 213, 189, 0.25);">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/ctrap">cTRAP</a>  </b></h5> 
                <p style="color:#a0a0a0;"> gene-expression | connectivity-map </p>
                </div>
             </div>

             <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/bwa">bwa</a>  </b></h5> 
                <p style="color:#a0a0a0;"> aligner </p>
                </div>
             </div>


            <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/whippet">whippet</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative-splicing  </p>
                </div>
             </div>

              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/miso">miso</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative-splicing  </p>
                </div>
             </div>

              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/suppa">suppa</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative-splicing  </p>
                </div>
             </div>

             <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/rmats4">rmats4</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative_splicing </p>
                </div>
             </div>

              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/rmats">rmats</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative_splicing </p>
                </div>
             </div>


              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/vast-tools">vast-tools</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative-splicing </p>
                </div>
             </div>


              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/ciri-as">ciri-as</a>  </b></h5> 
                <p style="color:#a0a0a0;"> alternative-splicing | circular-RNA </p>
                </div>
             </div>

              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/big_matrix_corr">big_matrix_corr</a>  </b></h5> 
                <p style="color:#a0a0a0;"> correlation | matrix | big-data </p>
                </div>
             </div>


              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/gdc-client">gdc-client</a>  </b></h5> 
                <p style="color:#a0a0a0;"> GDC | data-transfer </p>
                </div>
             </div>


              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/sailfish">sailfish</a>  </b></h5> 
                <p style="color:#a0a0a0;"> isoform-quantification </p>
                </div>
             </div>


              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/parallel-fastq-dump">parallel-fastq-dump</a>  </b></h5> 
                <p style="color:#a0a0a0;"> ncbi | download | fastq  </p>
                </div>
             </div>

              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> genomeptimm/ </p>
                    <h5><b> <a href = "https://hub.docker.com/repository/docker/genomeptimm/fastqc">fastqc</a>  </b></h5> 
                <p style="color:#a0a0a0;"> quality-control | RNA-seq  </p>
                </div>
             </div>

            <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/multiqc">multiqc</a>  </b></h5> 
                <p style="color:#a0a0a0;"> quality-control | RNA-seq </p>
                </div>
             </div>

              
              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/r-machine-learning">r-machine-learning</a>  </b></h5> 
                <p style="color:#a0a0a0;"> R | programming | machine-learning </p>
                </div>
             </div>


              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> genomeptimm/ </p>
                    <h5><b> <a href = "https://hub.docker.com/repository/docker/genomeptimm/cellranger">cellranger</a>  </b></h5> 
                <p style="color:#a0a0a0;"> scRNA-seq | 10XGenomics  </p>
                </div>
             </div>


              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/tophat">tophat</a>  </b></h5> 
                <p style="color:#a0a0a0;"> splice-read | mapper </p>
                </div>
             </div>

              <div class="smallercard reveal">
                <div>
                    <p style="font-family: Syne Mono;"> nunoagostinho/ </p>
                    <h5><b> <a href = "https://hub.docker.com/r/nunoagostinho/rsem">rsem</a>  </b></h5> 
                <p style="color:#a0a0a0;"> transcript-quantification </p>
                </div>
             </div>


        </div>
    </div>


    <!-- Footer -->
    <footer class="w3-center" style="padding: 1px;">
        
        <div class="w3-xlarge w3-section">
          <!-- LOGOS -->
          <a href="https://imm.medicina.ulisboa.pt/pt-pt/" style="text-decoration: none;">
            <img target="_blank" src="assets/img/logos/imm.png" alt="" height="50px">
          </a>
          <a href="https://www.embo.org/funding/fellowships-grants-and-career-support/young-investigator-programme/" style="text-decoration: none;">
            <img target="_blank" src="assets/img/logos/embo2.png" alt="" height="50px"> 
          </a>

          <a href="https://www.fct.pt/index.phtml.en" style="text-decoration: none;">
            <img target="_blank" src="assets/img/logos/fct.png" alt="" height="50px">
          </a>
          <a href="https://ribomed.imm.medicina.ulisboa.pt/pt-pt/#homepage" style="text-decoration: none;">
            <img target="_blank" src="assets/img/logos/ribomed.png" alt="" height="50px">
          </a>

          <a href="https://www.genomept.pt/" style="text-decoration: none;">
            <img target="_blank" src="assets/img/logos/genomept.png" alt="" height="50px">
          </a>          

          <a href="https://imm.medicina.ulisboa.pt/bioinformaticsmatters/doku.php?id=start" style="text-decoration: none;">
              <img target="_blank" src="assets/img/logos/bm.png" alt="" height="50px">
          </a>

             
        <!-- Footer end. -->
    </footer>
 

</body>

</html>