Added basic app

loosolab · Nov 13, 2017 · da646a8 · da646a8
1 parent 0bc5290
commit da646a8
Show file tree

Hide file tree

Showing 64 changed files with 1,448 additions and 0 deletions.
diff --git a/wilson-basic/.DS_Store b/wilson-basic/.DS_Store
diff --git a/wilson-basic/app.R b/wilson-basic/app.R
diff --git a/wilson-basic/introduction/Thumbs.db b/wilson-basic/introduction/Thumbs.db
diff --git a/wilson-basic/introduction/case1_1_no_filter.png b/wilson-basic/introduction/case1_1_no_filter.png
diff --git a/wilson-basic/introduction/case1_2_contrast1.png b/wilson-basic/introduction/case1_2_contrast1.png
diff --git a/wilson-basic/introduction/case1_2_contrast2.png b/wilson-basic/introduction/case1_2_contrast2.png
diff --git a/wilson-basic/introduction/case1_2_feature.png b/wilson-basic/introduction/case1_2_feature.png
diff --git a/wilson-basic/introduction/case1_3_table.png b/wilson-basic/introduction/case1_3_table.png
diff --git a/wilson-basic/introduction/case1_4_plot1.png b/wilson-basic/introduction/case1_4_plot1.png
diff --git a/wilson-basic/introduction/case1_4_plot2.png b/wilson-basic/introduction/case1_4_plot2.png
diff --git a/wilson-basic/introduction/case1_4_plot3.png b/wilson-basic/introduction/case1_4_plot3.png
diff --git a/wilson-basic/introduction/case1_4_ui.png b/wilson-basic/introduction/case1_4_ui.png
diff --git a/wilson-basic/introduction/case2_1_pvalue.png b/wilson-basic/introduction/case2_1_pvalue.png
diff --git a/wilson-basic/introduction/case2_2_pathway.png b/wilson-basic/introduction/case2_2_pathway.png
diff --git a/wilson-basic/introduction/case2_3_lineplot.png b/wilson-basic/introduction/case2_3_lineplot.png
diff --git a/wilson-basic/introduction/case2_4_fin_subset.png b/wilson-basic/introduction/case2_4_fin_subset.png
diff --git a/wilson-basic/introduction/case2_4_reorder.png b/wilson-basic/introduction/case2_4_reorder.png
diff --git a/wilson-basic/introduction/case2_5_lineplot.png b/wilson-basic/introduction/case2_5_lineplot.png
diff --git a/wilson-basic/introduction/clarion_excel.png b/wilson-basic/introduction/clarion_excel.png
diff --git a/wilson-basic/introduction/clarion_excel_colored.png b/wilson-basic/introduction/clarion_excel_colored.png
diff --git a/wilson-basic/introduction/clarion_sublime.PNG b/wilson-basic/introduction/clarion_sublime.PNG
diff --git a/wilson-basic/introduction/data.png b/wilson-basic/introduction/data.png
diff --git a/wilson-basic/introduction/example_barplot.png b/wilson-basic/introduction/example_barplot.png
diff --git a/wilson-basic/introduction/example_boxplot.png b/wilson-basic/introduction/example_boxplot.png
diff --git a/wilson-basic/introduction/example_global_corr_heatmap1.png b/wilson-basic/introduction/example_global_corr_heatmap1.png
diff --git a/wilson-basic/introduction/example_global_corr_heatmap2.png b/wilson-basic/introduction/example_global_corr_heatmap2.png
diff --git a/wilson-basic/introduction/example_heatmap1.png b/wilson-basic/introduction/example_heatmap1.png
diff --git a/wilson-basic/introduction/example_heatmap2.png b/wilson-basic/introduction/example_heatmap2.png
diff --git a/wilson-basic/introduction/example_heatmap3_NOT USED.png b/wilson-basic/introduction/example_heatmap3_NOT USED.png
diff --git a/wilson-basic/introduction/example_heatmap4.png b/wilson-basic/introduction/example_heatmap4.png
diff --git a/wilson-basic/introduction/example_lineplot.png b/wilson-basic/introduction/example_lineplot.png
diff --git a/wilson-basic/introduction/example_pca.png b/wilson-basic/introduction/example_pca.png
diff --git a/wilson-basic/introduction/example_pca2.png b/wilson-basic/introduction/example_pca2.png
diff --git a/wilson-basic/introduction/example_scatterplot1.png b/wilson-basic/introduction/example_scatterplot1.png
diff --git a/wilson-basic/introduction/example_scatterplot2.png b/wilson-basic/introduction/example_scatterplot2.png
diff --git a/wilson-basic/introduction/example_scatterplot3.png b/wilson-basic/introduction/example_scatterplot3.png
diff --git a/wilson-basic/introduction/example_scatterplot4.png b/wilson-basic/introduction/example_scatterplot4.png
diff --git a/wilson-basic/introduction/example_scatterplot5.png b/wilson-basic/introduction/example_scatterplot5.png
diff --git a/wilson-basic/introduction/example_scatterplot6.png b/wilson-basic/introduction/example_scatterplot6.png
diff --git a/wilson-basic/introduction/example_scatterplot7.png b/wilson-basic/introduction/example_scatterplot7.png
diff --git a/wilson-basic/introduction/example_scatterplot8.png b/wilson-basic/introduction/example_scatterplot8.png
diff --git a/wilson-basic/introduction/example_scatterplot9.png b/wilson-basic/introduction/example_scatterplot9.png
diff --git a/wilson-basic/introduction/example_violinplot.png b/wilson-basic/introduction/example_violinplot.png
diff --git a/wilson-basic/introduction/feature_selector_annotation_field.PNG b/wilson-basic/introduction/feature_selector_annotation_field.PNG
diff --git a/wilson-basic/introduction/feature_selector_filter_ui_NOT USED.PNG b/wilson-basic/introduction/feature_selector_filter_ui_NOT USED.PNG
diff --git a/wilson-basic/introduction/feature_selector_range_slider.PNG b/wilson-basic/introduction/feature_selector_range_slider.PNG
diff --git a/wilson-basic/introduction/feature_selector_row_selector.png b/wilson-basic/introduction/feature_selector_row_selector.png
diff --git a/wilson-basic/introduction/feature_selector_table.png b/wilson-basic/introduction/feature_selector_table.png
diff --git a/wilson-basic/introduction/format.md b/wilson-basic/introduction/format.md
@@ -0,0 +1,114 @@
+---
+output: html_document
+---
+# Data Format
+<p class="font">
+  <b>CLARION: generiC fiLe formAt foR quantItative cOmparsions of high throughput screeNs</b>
+  <br><br>
+   CLARION is a data format especially developed to be used with WIlsON, which relies on a tab-delimited table with a metadata header to describe the following columns. It is based on the Summarized Experiment format and supports all types of data which can be reduced to features (e.g. genes, transcripts, proteins, probes) with assigned numerical values (e.g. count, score, log2foldchange, zscore, pvalue). Most result tables derived from RNA-Seq, ChIP/ATAC-Seq, Proteomics, Microarrays, and many other analyses can thus be easily reformatted to become compatible, without having to modify the code of WIlsON for each specific experiment.
+  <br><br>
+  <img src="clarion_excel_colored.png" width="100%">
+  <br><br>
+  <p class="font">
+  The format consists of three blocks of data with distinct structures:
+  <ul class="font">
+    <li><b>Header</b>: Parameters concerning the global experiment</li>
+    <li><b>Metadata</b>: Parameters describing the content of each data column</li>
+    <li><b>Data</b>: Matrix of data columns bearing textual and numerical information per feature</li>
+  </ul>
+  </p>
+</p>
+
+</br>
+## <a name="header"></a> Header:
+<img src="header.png"/>
+<p class="font">
+  <ul class="font">
+    <li>Line identifier '!'</li>
+    <li>Syntax: name = value</li>
+    <li>Mandatory columns: *</li>
+  </ul>
+</p>
+### Parameters:
+<p class="font">
+  <ul class="font">
+    <li><b>format</b>: Name of the file format (must be Clarion)</li>
+    <li><b>version</b>: Version of the file format (1.0)</li>
+    <li><b>experiment_id</b>: Unique id to be used for the experiment</li>
+    <li><b>delimiter</b>: In-field delimiter for multi-value fields (e.g. multiple kegg pathways)</li>
+  </ul>
+</p>
+
+</br>
+## <a name="metadata"></a> Metadata:
+<img src="metadata.png"/>
+<p class="font">
+  <ul class="font">
+    <li>Line identifier '#'</li>
+    <li>Mandatory columns: *</li>
+  </ul>
+</p>
+### Columns:
+<p class="font">
+  <ul class="font">
+    <li><b>key</b>*:</li>
+      <ul class="font">
+        <li>Reference to data matrix (column headline)</li>
+        <li>Must be unique</li>
+      </ul>
+    <li><b>factor1 - factorN</b>:</li>
+      <ul class="font"><li>Denotes experimental factors (e.g. wildtype, mutant, time point) per sample and condition</li></ul>
+      <ul class="font"><li>One or more columns (factor1, factor2, ..., factorN)</li></ul>
+      <ul class="font"><li>Used for grouping</li></ul>
+    <li><b>level</b>*:</li>
+      <ul class="font">
+        <li>Classifies content of column</li>
+        <li>Must be one of:</li>
+        <ul class="font">
+          <li><i>sample:</i> Data relating to a single sample</li>
+          <li><i>condition:</i> Data relating to a single condition</li>
+          <li><i>contrast:</i> Data relating to a single contrast (pairwise comparison of conditions)</li>
+          <li><i>feature:</i> Annotation relating to a feature</li>
+        </ul>
+      </ul>
+    <li><b>type</b>:</li>
+      <ul class="font">
+        <li>Further classify content level</li>
+        <li>Must be one of:</li>
+        <li>For level = feature = values to be filtered for</li>
+        <ul class="font">
+          <li><i>unique_id:</i> Unique identifier</li>
+          <li><i>name:</i> Main feature name / symbol / label</li>
+          <li><i>category_s:</i> Single value per field; categorical data</li>
+          <li><i>category_m:</i> Multiple delimited values per field; categorical data</li>
+        </ul>
+        <li>For levels = sample, condition, contrast = values to be plotted</li>
+        <ul class="font">
+          <li><i>score:</i> count, intensity, ...</li>
+          <li><i>ratio:</i> foldchange, log2foldchange, ...</li>
+          <li><i>probability:</i> pvalue, padj, ...</li>
+          <li><i>category_s:</i> Categorical data (not numeric); single value per field</li>
+          <li><i>category_m:</i> Categorical data (not numeric); multiple values per field</li>
+        </ul>
+      </ul>
+    <li><b>label</b>:</li>
+      <ul class="font">
+        <li>Optional label alternative to column name</li>
+        <li>Can be used for plotting</li>
+        <li>Should be unique</li>
+        <li>For level = contrast delimited by '|' (condition1|condition2)</li>
+      </ul>
+    <li><b>sub_label</b>:</li>
+      <ul class="font"><li>Optional more detailed label to permit further branching</li></ul>
+  </ul>
+</p>
+
+</br>
+## <a name="data"></a> Data:
+<img src="data.png"/>
+<p class="font">
+  <ul class="font">
+    <li>Traditional tab-delimited data matrix</li>
+    <li>Minimum: one column with a unique id; one column with a numerical value</li>
+  </ul>
+</p>
diff --git a/wilson-basic/introduction/global_corr_heatmap.png b/wilson-basic/introduction/global_corr_heatmap.png
diff --git a/wilson-basic/introduction/guide_button.png b/wilson-basic/introduction/guide_button.png
diff --git a/wilson-basic/introduction/header.png b/wilson-basic/introduction/header.png
diff --git a/wilson-basic/introduction/heatmap.png b/wilson-basic/introduction/heatmap.png
diff --git a/wilson-basic/introduction/help_button.png b/wilson-basic/introduction/help_button.png
diff --git a/wilson-basic/introduction/intro.html b/wilson-basic/introduction/intro.html
diff --git a/wilson-basic/introduction/intro.md b/wilson-basic/introduction/intro.md
@@ -0,0 +1,259 @@
+---
+output: html_document
+---
+<head>
+ <style>
+ img.example {
+ width: 15%;
+ height: 15%;
+ }
+ img.plot {
+ width: 30%;
+ height: 30%;
+ float: left;
+ margin-right: 20px;
+ }
+ .font {
+ font-size: large;
+ display: table;
+ }
+ p.plot {
+ display: table;
+ }
+ hr {
+ margin-top: 20px;
+ margin-bottom: 50px;
+ border-top: 2px solid;
+ border-top-color: #CECECE;
+ }
+ </style>
+</head>
+
+# WIlsON: Webbased Interactive Omics visualizatioN
+
+<p class="font" class="justify">
+ The WIlsON app is based on a tab-delimited input file format derived from a "summarized experiment" of interest (format is called CLARION, see Introduction-->Data Format). All types of data which can be broken down to a feature with assigned numerical values can be deployed on the WIlsON server (e.g. multi-omics). A user can then generate various plots following four basic steps:</br>
+
+ <ol class="font">
+ <li>Filter for features of interest based on categorical or numerical values (e.g. transcripts, genes, proteins, probes)</li>
+ <li>Select plot type</li>
+ <li>Adjust plot parameters</li>
+ <li>Render/download result</li>
+ </ol>
+</p>
+
+## <a name="examples"></a> Examples
+
+<img src="example_boxplot.png" class="example" />
+<img src="example_barplot.png" class="example"/>
+<img src="example_violinplot.png" class="example"/>
+<img src="example_lineplot.png" class="example"/>
+<img src="example_pca2.png" class="example"/>
+<img src="example_global_corr_heatmap1.png" class="example"/>
+<img src="example_global_corr_heatmap2.png" class="example"/>
+<img src="example_scatterplot1.png" class="example"/>
+<img src="example_scatterplot8.png" class="example"/>
+<img src="example_scatterplot9.png" class="example"/>
+<img src="example_heatmap4.png" class="example"/>
+<img src="example_heatmap2.png" class="example"/>
+
+<hr>
+## <a name="basic_structure"></a> Basic Structure
+
+<p class="font" class="justify">
+ The layout of each page is fairly similar. The top bar permits selection of a plotting application while the remaining space is usually divided the following way:
+</p>
+
+<img src="layout.png" style="width: 70%; height: 70%"/>
+### Sidebar
+<p class="font">
+ It shows the currently selected features as well as global parameters depending on the plot/filter.
+</p>
+### Options
+<p class="font">
+ These tabs provide access to several subsections:  plots, plot variants, filters or data tables. Tables contain the specific subset of data used for the plot.
+</p>
+### Plot area / result
+<p class="font">
+ This area will show the result of the current rendering/filtering: either a plot or the data as a table.
+</p>
+### Interface
+<p class="font">
+ The bottom interface contains most of the parameters defining a plot, including axis transformation, coloring etc.
+</p>
+
+<hr>
+## <a name="feature_selection"></a> Feature Selection
+
+<p class="font justify">
+ As mentioned above, the first step of WILsON is to select the tab "Feature Selection" at the top menue. This allows to select a subset of data to be used for plotting by applying filtering steps (without filtering all features of the dataset will be plotted).
+ The table at the top of the "Feature Selection" page displays the current selection. Several tabs located below the table are intended for filtering steps based on various criteria available per feature.WILsON supports a presorting for sample, condition and contrasts among others.
+ The "highlight" pane supports the creation of a subset of the selected features. The highlighted data can be used in certain plots which support highlighting (e.g. scatterplot) to either add a fixed color or labels.
+ After filtering, plots of interest can be selected and generated via the tabs on top.
+</p>
+
+### Table
+<img src="feature_selector_table.png"/>
+
+<p class="font" class="justify">
+ <i>This is an example on a dataset filtered for various criteria. Within the selected feature table browsing, sorting and selection is supported. Some cells are truncated due to long text blocks('...'): to display these data just hover over the specific cell.</i>
+</p>
+
+### Filter
+<p class="font">
+ Based on the columns content (textual, multi textual,numeric) WIlsON's featureSelector will provide a appropriate filter visualization, enabling an efficient way to select data. 
+</p>
+
+#### **Textual (Annotation)**
+<img src="feature_selector_annotation_field.png"/>
+<p class="font"><i>
+ Annotations can be filtered by clicking a dropdown menu containing all available values. The filter box supports querying as well. 'Backspace' can be used to deselect prior selections.
+</i>
+</p>
+
+#### **Numeric (Value)**
+<img src="feature_selector_range_slider.png"/>
+<p class="font"><i>
+ This filter is intented to select a numeric range. The 'inner' or 'outer' options allows the definition of either the range within the set markers (inner) or outside of the marker (outer), which is also displayed trough the slider coloring. The markers are draggable. As the step size is scaled according to the spread of the data, editable value fields aside the slider can be utilized to change the minimum and maximum value (slider range is recalculate). 
+</i>
+</p>
+
+### Additional options
+<p class="font">
+ Once the data is filtered, the remaining subset of features is displayed in the table on top of the feature selection page (see table above). This selection can be narrowed down further by e.g. a keyword search field on the top right of the table. Additionally, manual selection of rows by marking is supported as well. Sorting on specific columns by clicking the <b>column title</b> might help to find spcific features of interest. Once the table is given in the correct order, it can be filtered for a specific number of entries as given below.
+</p>
+
+<img src="feature_selector_row_selector.png"/></br>
+<p class="font">
+<i>Finally, specific <b>rows</b> (row numbers) can be selected from the feature table via the slider shown above, a powerful filter in combination with column sorting and nummeric filtering on e.g. fold changes. For example, this filter allows the generation of a featureset of the top 50 up and down regulated genes on chromosome 3.
+</i>
+</p>
+
+<hr>
+## <a name="plots"></a> Plots
+
+### Gene View
+<p class="font plot">
+<img src="lineplot.png" class="plot"/>
+ The Gene Viewer consists of multiple plot types including line-, box-, violin- & barplots. It supports the visualization and comparison of individual genes and/or conditions.
+</p>
+
+### Data Reduction
+#### PCA (Principal Component Analysis)
+<p class="font plot">
+ <img src="example_pca2.png" class="plot"/>
+ A PCA is used to get an overview on the variation of the data based on the selected features. By default the two dimensions with the highest variation are selected (PC 1 and PC2), presented in a two-dimensional scatterplot.
+</p>
+
+#### Global Correlation Heatmap
+<p class="font plot">
+ <img src="global_corr_heatmap.png" class="plot"/>
+ Similar to the PCA, this plot will show the global clustering of samples or conditions based on the selected features. A distance matrix is created using one of various options (e.g. euclidean, pearson, spearman, etc.) and visualized by a heatmap.
+</p>
+
+### Scatterplot
+<p class="font plot">
+ <img src="scatterplot.png" class="plot"/>
+ This plot illustrates the dependency of two (X/Y axes) or three (X/Y/color) attributes. It supports a density estimation (kernel smoothing) and trend lines. The axes to be displayed can be chosen among the numeric columns to e.g. create Volcano, MA, or other kinds of scatter plots. The scatterplot supports highlighting of a subset of data (feature selection, pane highlight).
+</p>
+
+### Heatmap
+<p class="font plot">
+ <img src="heatmap.png" class="plot"/>
+ Various parameters permit the creation of highly customized heatmaps of the selected features. Among these are different kinds of clusterings, transformations (log2, log10, rlog, zscore), and color schemes. The Heatmap module supports interactive and static heatmaps.
+</p>
+
+<hr>
+## <a name="interactivity"></a> Interactivity
+<p class="font">
+Thanks to the plotly package, several plots are available as an interactive version offering a range of additional options:
+</p>
+
+<ul class="font">
+  <li>Zoom / pan plot (either via UI or directly in plot)</li>
+  <li>Mouse-over popup text box containing information of the selected feature</li>
+  <li>Download currently selected viewport</li>
+</ul>
+
+<p class="font">
+<b>It should be noted that the plotly plot versions generate a higher computational load (slower) than the default ggplot2 versions.</b>
+</br>
+</p>
+<img src="plotly_ui.png" width="50%" height="50%"/>
+
+<hr>
+## <a name="help"></a> Help
+
+<p class="font">
+ <ul class="font">
+ <li>All plots include an interactive help section. Click on <img src="guide_button.png"/> for a step by step tour on how to use the current interface.</li>
+ <li>Even more details are given with the <img src="help_button.png"/> symbols.</li>
+ </ul>
+</p>
+
+<hr>
+## <a name="use_cases"></a> Use Cases
+
+### Case 1
+<p class="font">
+<b>Create a heatmap of significantly differentially expressed protein coding genes involved in BMP signaling pathway</b></br>
+</br>
+ Whenever planning a plot it is vital to filter the available features/values down to the required set. By default the whole dataset will be used, which might result in a non-sensical plot and a warning message.
+</p>
+<img src="case1_1_no_filter.png" width="70%" height="70%"/>
+
+<p class="font">
+ In order to filter, use the Feature Selection tab in a first step. For this example we want to filter for significantly differentially expressed genes, which is done on the <b>contrast</b> level. Set the following thresholds using inner/outer in combination with the range slider: log2 fold change less than -1 <b>or</b> greater than 1 <b>and</b>  adjusted p-value smaller than 0.01. As the latter might be difficult to select due to the tiny interval, change the max value of the slider using the box on the right side (essentially a zoom).
+</p>
+</p>
+<img src="case1_2_contrast2.png" width="70%" height="70%"/>
+
+<p class="font">
+ In order to narrow down the selection further to <b>protein coding genes</b> involved in the <i>BMP signaling pathway</i>, select the <b>feature</b> level next and enter the desired annotation filters.
+</p>
+<img src="case1_2_feature.png" width="70%" height="70%"/>
+
+<p class="font">
+ Finally click the select button to apply all filters and create the subset of interest, leading to the table below.
+</p>
+<img src="case1_3_table.png" width="70%" height="70%"/>
+
+<p class="font">
+ Now with this preselction of features move on to the heatmap module (here not interactive). Select the <b>samples</b> of interest and click on the plot button.
+</p>
+<img src="case1_4_plot1.png"/>
+
+<p class="font">
+ The resulting plot is troubled by the large range of the values (0-7000) which can reduce the recognition of patterns. A row-wise z-score <b>Transformation</b> might help.
+</p>
+<img src="case1_4_plot2.png"/>
+
+<p class="font">
+ Since the z-score transformation leads to a diverging (2-sided: -x..0..+x) distribution of values, another color palette would be optimal. Set <b>Data distribution</b> to diverging and select the <i>spectral color</i> scheme. To simplify interpretation, a label should be set for the legend (e.g. z score).
+</p>
+<img src="case1_4_ui.png" width="70%" height="70%" style="margin-bottom:20px"/>
+<img src="case1_4_plot3.png"/>
+
+### Case 2
+<p class="font">
+<b>Plot Top15 most highly expressed genes, which are significantly differentially expressed, and involved in apoptosis</b></br>
+</br>
+To accomplish this task the first step is to create a suitable subset. Use the feature selector to filter for significant genes by setting the threshold of the multiple testing adjusted p-value (padj) to <= 0.01. This is done in the <b>contrast</b> level.
+</p>
+<img src="case2_1_pvalue.png"/>
+
+<p class="font">
+Further filter for the <i>apoptosis pathway</i> within the <b>feature</b> level.
+</p>
+<img src="case2_2_pathway.png"/>
+
+<p class="font">
+The following line plot shows the counts per condition per gene using a random order and including also genes with a low expression on average.
+</p>
+<img src="case2_3_lineplot.png" width="40%" height="40%"/>
+
+<p class="font">
+To only select genes with a relatively high expression, reorder the table by clicking the desired column name. In this case we reorder the table descending after the <b>baseMean</b> column (=average counts of both conditions). Furthermore the amount of features is limited to the top 15 with the slider below. Now the first 15 rows will be highlighted and are forwarded for plotting.
+</p>
+<img src="case2_4_fin_subset.png" style="margin-bottom:20px"/>
+<img src="case2_5_lineplot.png" width="40%" height="40%"/>