--- a/index.Rmd	Tue Feb 27 10:40:20 2018 -0500
+++ b/index.Rmd	Sun Dec 30 12:48:14 2018 -0500
@@ -1,22 +1,51 @@
----
-title: "FastQC Report"
-output: html_document
----
-
-```{r setup, include=FALSE, warning=FALSE, message=FALSE}
-knitr::opts_chunk$set(echo = TRUE, error = TRUE)
-```
-
 
 
-## References
+```{css, echo=FALSE}
+pre code, pre, code {
+  white-space: pre !important;
+  overflow-x: scroll !important;
+  word-break: keep-all !important;
+  word-wrap: initial !important;
+}
+```
 
-* Bioinformatics, Babraham (2014). FastQC.
+```{r, echo=FALSE}
+# to make the css theme to work, <link></link> tags cannot be added directly 
+# as <script></script> tags as below.
+# it has to be added using a code chunk with the htmltool functions!!!
+css_link = tags$link()
+css_link$attribs = list(rel="stylesheet", href="vakata-jstree-3.3.5/dist/themes/default/style.min.css")
+css_link
+```
 
-* Allaire, J and Cheng, Joe and Xie, Yihui and McPherson, Jonathan and Chang, Winston and Allen, Jeff and Wickham, Hadley and Atkins, Aron and Hyndman, Rob (2016). rmarkdown: Dynamic Documents for R, 2016. In R package version 0.9, 6.
+```{r, eval=FALSE, echo=FALSE}
+# this code chunk is purely for adding comments
+# below is to add jQuery and jstree javascripts
+```
+
+<script src="vakata-jstree-3.3.5/dist/jstree.min.js"></script>
 
-* Xie, Yihui (2015). Dynamic Documents with R and knitr, CRC Press, Vol.29.
 
-* Carson Sievert and Chris Parmer and Toby Hocking and Scott Chamberlain and Karthik Ram and Marianne Corvellec and Pedro Despouy (2017). plotly: Create Interactive Web Graphics via 'plotly.js'. R package version 4.6.0. [Link]
+```{r, eval=FALSE, echo=FALSE}
+# this code chunk is purely for adding comments
+# javascript code below is to build the file tree interface
+# see this for how to implement opening hyperlink: https://stackoverflow.com/questions/18611317/how-to-get-i-get-leaf-nodes-in-jstree-to-open-their-hyperlink-when-clicked-when
+```
+<script>
+  jQuery(function () {
+    // create an instance when the DOM is ready
+    jQuery('#jstree').jstree().bind("select_node.jstree", function (e, data) {
+     window.open( data.node.a_attr.href, data.node.a_attr.target )
+    });
+  });
+</script>
 
-* Wickham, H. (2016). ggplot2: elegant graphics for data analysis. Springer. Chicago
+## Outputs
+
+```{r, echo=FALSE}
+# create a div container to store the file tree interface
+tags$div(
+  id="jstree",
+  file_tree(Sys.getenv('REPORT_FILES_PATH'))
+)
+```