<html>

<head>
<style type="text/css">
.inline {
  background-color: #f7f7f7;
  border:solid 1px #B0B0B0;
}
.error {
	font-weight: bold;
	color: #FF0000;
}
.warning {
	font-weight: bold;
}
.message {
	font-style: italic;
}
.source, .output, .warning, .error, .message {
	padding: 0 1em;
  border:solid 1px #F7F7F7;
}
.source {
  background-color: #f5f5f5;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.hl.num {
  color: #AF0F91;
}
.hl.str {
  color: #317ECC;
}
.hl.com {
  color: #AD95AF;
  font-style: italic;
}
.hl.opt {
  color: #000000;
}
.hl.std {
  color: #585858;
}
.hl.kwa {
  color: #295F94;
  font-weight: bold;
}
.hl.kwb {
  color: #B05A65;
}
.hl.kwc {
  color: #55aa55;
}
.hl.kwd {
  color: #BC5A65;
  font-weight: bold;
}
</style>
<title>ProVision</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/Css/font-awesome.min.css">
<!--CSS-->

<style>
html { scroll-behavior: smooth; } 
.trueBody {
  background:"white"
}

.mainNavHeader {
  height:10vh;
  background-color:#2b579e;
  color:white;
  border-style: outset;
  border-radius:10px;
  box-shadow: 3% 1% #888888;
}

.navList {
  padding-top:2%;
  font-size:1.2em;
}
.navList li {
  display:inline;
  padding:1%;
}

.navList li:hover {
  background-color:#ebeced;
  border-radius:10px;
}

.navList li a {
  color:white;
  text-decoration: none;
}
.navList li:hover a {
  color:black;
  text-decoration: none;
}

.trueHeader {
  background:white;
  border-style: outset;
  border-radius:10px;
  box-shadow: 3% 1% #888888;
  display: flex;
  flex-direction: row;
}

.headerBox {
  margin: auto;
  font-style:bold;
}

.section2{
  background-color:white;
  border-style: outset;
  text-align: justify;
  text-justify: inter-word;
  border-radius:10px;
  border-color:#edeceb;
  box-shadow: 3% 1% #888888;
  padding-left:8%;
  padding-right:8%;
}
.vidBox {
  background-color:black;
  border-style: outset;
  border-radius:10px;
  border-color:#edeceb;
  box-shadow: 3% 1% #888888;
  width:100%;
  height:60vh;
}

.vidPos {
  display:block;
  margin-left:12%;
  margin-top:2%;
}


</style>

<body>
<div class="trueBody">
    <div class="mainNavHeader">
    <ul class="navList" style="list-style:none;">
      <li><a href="#requirements"> Requirements </a></li>
      <li><a href="#defaults"> Default parameters </a></li>
      <li><a href="#reactivity"> Reactivity </a></li>
    </ul>
  </div>
  <div class="trueHeader">
    <div class="headerBox" style="width:70%; padding-left:10%">
      <h1>ProVision: Getting started</h1>
    </div>
  </div>
  <div class = "section1"> <!---top section --->
    <div class="vidBox">
      <img src="../media/vidTut2.svg" style="width:100%; height:100%;">
    </div>
  </div><!---top section close --->
  <div class="section2">
  <h2 id = "requirements">Requirements </h2>
      <p style="font-size:1.2em">ProVision is designed for statistical analysis of label free and tandem mass tagged proteomics data that was generated using the popular <b>MaxQuant</b> computational proteomics platform. The only requirement to use ProVision is a file called protienGroups.txt. If your samples were not searched by MaxQuant and you would like to use this platform, you can find how to do the searches yourself<a href="https://www.maxquant.org/" target="_blank"> here.</a>Finally to export to Excel you will need updated java on your system. To get java, download it <a href="https://www.java.com/en/download/" target="_blank">here</a> </p>
      <h2 id = "defaults"> Default parameters </h2>
      <p style="font-size:1.2em">Pre processing of output data is important to the downstream statistical tests and accurate visualisation but may also be the most unintuitive step of the pipeline. Default parameters are pre chosen to yield optimal results and can simply be followed as is. Options are however in place to alter the pre chosen values if that is desired. The full tutorial will walk through the use of ProVision step by step and explain as much as possible as we go.</p>
      <h2 id = "reactivity"> Reactivity </h2>
      <p style="font-size:1.2em"> We have designed the application with a high degree of reactivity. Choices as far as the first filtering steps will propagate throughout the program and influence the final graphs. Thus it is possible to go through the data analysis process and come back to the data processing page and alter the parameters to obtain a different result. This may be useful if the initial parameters are too lenient and a large amount of proteins are statistically significant.</p>
  <br>
</div>
</body>
</html>
