| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <meta name="color-scheme" content="light"> |
| <title>Transcriptomes Explorer</title> |
| <link rel="stylesheet" href="assets/style.css"> |
| <script src="assets/plotly.min.js" defer></script> |
| <script src="assets/app.js" defer></script> |
| </head> |
| <body> |
| <main class="shell"> |
| <header class="hero"> |
| <h1>Transcriptomes Explorer</h1> |
| <p>Assembly, functional annotation, differential expression and enrichment analyses</p> |
| </header> |
|
|
| <nav class="tabs" aria-label="Explorer sections"> |
| <button class="tab active" data-tab="overview">Overview</button> |
| <button class="tab" data-tab="expression">3D expression landscape</button> |
| <button class="tab" data-tab="de">Differential expression</button> |
| <button class="tab" data-tab="enrichment">Functional enrichment</button> |
| </nav> |
|
|
| <section id="overview" class="panel active"> |
| <figure class="workflow-figure"> |
| <img src="assets/transcriptome_workflow_space_v1.drawio.svg" alt="Integrated transcriptome workflow"> |
| </figure> |
| <div class="table-wrap"><table id="assembly-table" class="data-table"></table></div> |
| <div class="controls"> |
| <label>Select a species to explore the functional-annotation summary<select id="overview-species"></select></label> |
| </div> |
| <h2 id="annotation-title"></h2> |
| <div class="table-wrap"><table id="annotation-table" class="data-table"></table></div> |
| </section> |
|
|
| <section id="expression" class="panel"> |
| <p class="caption">Sample-level expression is transformed as <code>log2(TMM + 1)</code>. Points are colored by development stage and shaped by temperature.</p> |
| <div class="controls"> |
| <label>Species<select id="dim-species"></select></label> |
| <label>Reduction method<select id="dim-method"><option>PCA</option><option>UMAP</option></select></label> |
| <label>Most variable genes<select id="dim-genes"><option value="all">All expressed genes</option><option value="5000">5,000</option><option value="1000">1,000</option></select></label> |
| <button id="dim-run" class="primary">Compute 3D projection</button> |
| </div> |
| <div id="dim-plot" class="plot wide"></div> |
| <div id="dim-status" class="note">Choose settings and compute the projection.</div> |
| <div class="table-wrap"><table id="dim-table" class="data-table"></table></div> |
| </section> |
|
|
| <section id="de" class="panel"> |
| <div class="controls"> |
| <label>Species<select id="de-species"></select></label> |
| <label>Contrast<select id="de-contrast"></select></label> |
| <label>Method<select id="de-method"><option>DESeq2</option><option>edgeR</option></select></label> |
| <label>Maximum p-value<input id="de-pvalue" type="number" min="0" max="1" step="0.001" value="1"></label> |
| <label>Maximum adjusted p-value / FDR<input id="de-adjusted" type="number" min="0" max="1" step="0.001" value="0.05"></label> |
| <label>Minimum absolute fold change<input id="de-fold" type="number" min="0" step="0.1" value="0"></label> |
| <label>Volcano Y axis<select id="de-y"><option value="adjusted">Adjusted p-value / FDR</option><option value="pvalue">p-value</option></select></label> |
| <button id="de-run" class="primary">Query DEGs</button> |
| </div> |
| <div id="de-plot" class="plot wide"></div> |
| <div id="de-summary" class="note"></div> |
| <div class="table-wrap results-table-wrap"><table id="de-table" class="data-table"></table></div> |
| <button id="de-download" class="download">Download filtered differential-expression CSV</button> |
| </section> |
|
|
| <section id="enrichment" class="panel"> |
| <div class="controls"> |
| <label>Species<select id="en-species"></select></label> |
| <label>Contrast<select id="en-contrast"></select></label> |
| <label>Method<select id="en-method"><option>DESeq2</option><option>edgeR</option></select></label> |
| <label>Maximum p-value<input id="en-de-pvalue" type="number" min="0" max="1" step="0.001" value="1"></label> |
| <label>Maximum adjusted p-value / FDR<input id="en-de-adjusted" type="number" min="0" max="1" step="0.001" value="0.05"></label> |
| <label>Minimum absolute fold change<input id="en-de-fold" type="number" min="0" step="0.1" value="0"></label> |
| <label>Functional source<select id="en-source"></select></label> |
| <label>Hierarchy / level<select id="en-hierarchy"></select></label> |
| <label>Maximum ORA p-value<input id="en-pvalue" type="number" min="0" max="1" step="0.001" value="1"></label> |
| <label>Maximum ORA adjusted p-value<input id="en-adjusted" type="number" min="0" max="1" step="0.001" value="0.05"></label> |
| <button id="en-run" class="primary">Query ORA</button> |
| </div> |
| <div id="en-plot" class="plot wide"></div> |
| <div id="en-summary" class="note"></div> |
| <div class="table-wrap results-table-wrap"><table id="en-table" class="data-table"></table></div> |
| <button id="en-download" class="download">Download filtered enrichment CSV</button> |
| </section> |
|
|
| <footer> |
| <div id="inria-logo" class="institutional-footer"></div> |
| <p><a href="https://inria.cl/es" target="_blank" rel="noopener noreferrer">Inria Chile Research Center</a> and collaborators.</p> |
| </footer> |
| </main> |
| </body> |
| </html> |
|
|
