Difference between revisions of "Team:CGU Taiwan/Software"

 
(92 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
<style>
 
<style>
−
.mchug {
 
−
    background-color: #4CAF50; /* Green */
 
−
    border: none;
 
−
    color: white;
 
−
    padding: 6px 12px;
 
−
    text-align: center;
 
−
    text-decoration: none;
 
−
    display: inline-block;
 
−
    font-size: 16px;
 
−
    margin: 4px 2px;
 
−
    -webkit-transition-duration: 0.4s; /* Safari */
 
−
    transition-duration: 0.4s;
 
−
    cursor: pointer;
 
−
    border-radius:4px;
 
−
    height:50px;
 
−
    width:100px;
 
−
}
 
−
.mchug5 {
 
−
    background-color: white;
 
−
    color: black;
 
−
    border: 2px solid #555555;
 
−
  border-radius:4px;
 
−
}
 
−
 
−
.mchug5:hover {
 
−
    background-color: #555555;
 
−
    color: white;
 
−
    border-radius:4px;
 
−
}
 
−
 
−
 
 
         #sideMenu
 
         #sideMenu
 
         {
 
         {
Line 46: Line 14:
 
#content { padding:0px; width:100%; margin-left:0%; margin-right:0%;}
 
#content { padding:0px; width:100%; margin-left:0%; margin-right:0%;}
 
</style>
 
</style>
−
 
−
<head>
 
−
<meta charset="utf-8">
 
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
</head>
 
 
<!-- ////////////////////// START  TOP HEADER /////////////////////// -->
 
<!-- ////////////////////// START  TOP HEADER /////////////////////// -->
 
<head>
 
<head>
Line 60: Line 22:
 
.top {
 
.top {
 
   position: absolute;
 
   position: absolute;
−
   top: -10px;
+
   top: -1%;
−
   left: 0px;
+
   left: 0%;
−
  background:  #140731;
+
 
   width: 100%;
 
   width: 100%;
−
   height: 110px;
+
  box-sizing:border-box;
 +
   height: 115px;
 
   font-family: Corbel;
 
   font-family: Corbel;
−
   overflow: visible;
+
   overflow:visible;
 +
  z-index: +1;
 
}
 
}
 
.mid {
 
.mid {
 
   position: absolute;
 
   position: absolute;
−
   left: 0px;
+
   left: 5%;
−
   width: 100%;
+
   width: 80%;
−
   height: 120%;
+
   height: 100%;
 
   font-family: Corbel;
 
   font-family: Corbel;
−
  z-index:-1;
 
 
}  
 
}  
 
.headline {
 
.headline {
−
  font-size:45px;
 
 
   color: #ffe;
 
   color: #ffe;
 
   text-align: center;
 
   text-align: center;
−
   padding-top: 30px;
+
   padding-top: 40px;
−
   padding-bottom: 40px;
+
   padding-bottom: 60px;
 
}
 
}
 
.header-subnav  {
 
.header-subnav  {
−
   background: #140731;
+
   background: #0D014D;
 
   width: 100%;
 
   width: 100%;
 
   position: absolute;
 
   position: absolute;
 
   text-align: center;
 
   text-align: center;
 
   margin: 0 auto;
 
   margin: 0 auto;
−
   top: 100px;
+
   top: 117%;
−
  left:-20px;
+
  left: 0%;
 
   font-family: Corbel;
 
   font-family: Corbel;
 +
  z-index:-1;
 
}
 
}
 
.header-subnav li {
 
.header-subnav li {
Line 121: Line 83:
 
   top: 13px;
 
   top: 13px;
 
}
 
}
 +
 
.circle {
 
.circle {
 
   position:absolute;
 
   position:absolute;
−
   left: 1110px;
+
   left: 85.5%;
−
   top: 30px;
+
   top: 70%;
 
   width: 180px;
 
   width: 180px;
 
   height: 180px;
 
   height: 180px;
−
   background: #140731;
+
   background: #0D014D;
 
   -moz-border-radius: 90px;
 
   -moz-border-radius: 90px;
 
   -webkit-border-radius: 90px;
 
   -webkit-border-radius: 90px;
Line 133: Line 96:
 
}
 
}
 
.left {
 
.left {
−
   position: fixed;
+
  padding: 10px;
 +
  height:155px;
 +
  border-color:#140731;
 +
  border-radius:8px;
 +
  border-width:2px;
 +
  border-style:solid;
 +
   position: absolute;
 
   left: 25px;
 
   left: 25px;
−
   top: 200px;
+
   top: 230px;
 
   font-family: Corbel;
 
   font-family: Corbel;
 
   background: rgba(250, 250, 250, 0.15);
 
   background: rgba(250, 250, 250, 0.15);
Line 163: Line 132:
 
   padding-left: 5px;
 
   padding-left: 5px;
 
   border-radius: 4px;
 
   border-radius: 4px;
 +
}
 +
.fixed2 {
 +
  position: fixed;
 +
  top: 65px;
 
}
 
}
 
.button {
 
.button {
Line 177: Line 150:
 
   z-index:+1;
 
   z-index:+1;
 
}
 
}
 +
 
.wrapper {
 
.wrapper {
 
   background: white;
 
   background: white;
Line 191: Line 165:
 
   width: 600px;
 
   width: 600px;
 
   height: 500px;
 
   height: 500px;
−
  border-top: solid 45px white;
 
−
  border-right: solid 5px white;
 
−
  border-bottom: solid 5px white;
 
−
  border-left: solid 5px white;
 
 
   position: absolute;
 
   position: absolute;
 
   z-index: 1;
 
   z-index: 1;
Line 268: Line 238:
 
.tab4:checked ~ ul{
 
.tab4:checked ~ ul{
 
   transform: translateY(-1500px);
 
   transform: translateY(-1500px);
 +
}
 +
 +
hr1 {
 +
  border: 0;
 +
  width: 80%;
 +
  color: #140731;
 +
  background-color: #140731;
 +
  height: 2px;
 +
}
 +
 +
hr {
 +
  border: 0;
 +
  width: 80%;
 +
  color: #FF8800;
 +
  background-color: #FF8800;
 +
  height: 2px;
 +
}
 +
.list li {
 +
  list-style:none;
 +
  background-image:url(https://static.igem.org/mediawiki/2016/b/ba/CGU_Taiwan--point.jpg);
 +
  background-repeat:no-repeat;
 +
  background-position:-10 5px;
 +
  padding-left:3%;
 +
  background-size:2.5%;
 +
}
 +
 +
.end2 {
 +
  background-color:#0D014D;
 +
  position: absolute;
 +
  width: 100%;
 +
  height: 220%;
 +
  font-family: Corbel;
 +
  z-index:+1;
 +
}
 +
.sitemap {
 +
  background-color:#0D014D;
 +
  position: absolute;
 +
  width: 20%;
 +
  height: 40%;
 +
  font-family: Corbel;
 +
}
 +
.list1 li {
 +
  list-style:none;
 +
  background-image:url(https://static.igem.org/mediawiki/2016/5/58/CGU_Taiwan--sitemap.jpg);
 +
  background-repeat:no-repeat;
 +
  background-position:10px;
 +
  background-size:9%;
 +
    margin-bottom:-20%;
 +
}
 +
.list2 li {
 +
  list-style:none;
 +
  background-image:url(https://static.igem.org/mediawiki/2016/2/2f/CGU_Taiwan--sitemap2.jpg);
 +
  background-repeat:no-repeat;
 +
  background-position:6px;
 +
  background-size:7%;
 +
  margin-bottom:-10%;
 +
}
 +
.list3 li {
 +
  list-style:none;
 +
  background-image:url(https://static.igem.org/mediawiki/2016/3/31/CGU_Taiwan--sitemap3.jpg);
 +
  background-repeat:no-repeat;
 +
  background-position:5%;
 +
  background-size:2%;
 +
  margin-bottom:-10%;
 
}
 
}
 
</style>
 
</style>
Line 276: Line 310:
 
  *
 
  *
 
  */
 
  */
−
var num = 110; //number of pixels before modifying styles
+
var num = 132; //number of pixels before modifying styles
 
$(window).bind('scroll', function () {
 
$(window).bind('scroll', function () {
 
     if ($(window).scrollTop() > num) {
 
     if ($(window).scrollTop() > num) {
Line 282: Line 316:
 
     } else {
 
     } else {
 
         $('.header-subnav').removeClass('fixed1');
 
         $('.header-subnav').removeClass('fixed1');
 +
    }
 +
});
 +
 +
var num = 132; //number of pixels before modifying styles
 +
$(window).bind('scroll', function () {
 +
    if ($(window).scrollTop() > num) {
 +
        $('.left').addClass('fixed2');
 +
    } else {
 +
        $('.left').removeClass('fixed2');
 
     }
 
     }
 
});
 
});
Line 287: Line 330:
  
 
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
 
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
 +
 +
 +
</script>
 +
<script>
 +
var slideIndex = 1;
 +
showDivs(slideIndex);
 +
 +
function plusDivs(n) {
 +
  showDivs(slideIndex += n);
 +
}
 +
 +
function currentDiv(n) {
 +
  showDivs(slideIndex = n);
 +
}
 +
 +
function showDivs(n) {
 +
  var i;
 +
  var x = document.getElementsByClassName("mySlides");
 +
  var dots = document.getElementsByClassName("demo");
 +
  if (n > x.length) {slideIndex = 1}
 +
  if (n < 1) {slideIndex = x.length}
 +
  for (i = 0; i < x.length; i++) {
 +
    x[i].style.display = "none";
 +
  }
 +
  for (i = 0; i < dots.length; i++) {
 +
    dots[i].className = dots[i].className.replace(" w3-border-red", "");
 +
  }
 +
  x[slideIndex-1].style.display = "block";
 +
  dots[slideIndex-1].className += " w3-border-red";
 +
}
 
</script>
 
</script>
  
 
<body>
 
<body>
−
<div class="top">
 
−
<img alt="" style="position:absolute;z-index:++1;float:left;margin-top:20px;width:390px;height:80px;"  src="https://static.igem.org/mediawiki/2016/b/bb/CGU_Taiwan--logo2.jpg">
 
−
<img style="position:absolute;left:1120px;top:35px;z-index:+1;width:155px;height:180px;" src="https://static.igem.org/mediawiki/2016/8/8a/CGU_Taiwan--logo9.jpg">
 
 
<a name='anchor0'></a>
 
<a name='anchor0'></a>
−
<div class="circle"></div>
+
<div class="top">
 +
<img style="margin-top:-2%;width:100%;height:140%;position:absolute;" src="https://static.igem.org/mediawiki/2016/0/0b/CGU_Taiwan--top.jpg">
 +
</div>
 
</div>
 
</div>
  
 
<header class="top">
 
<header class="top">
−
<h1 class="headline">Leijuvant <small></small></h1>
 
 
<ul class="header-subnav">
 
<ul class="header-subnav">
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan">HOME</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan">HOME</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Achievements">ACHIEVEMENTS</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Achievements">ACHIEVEMENTS</a></li>
−
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Project">PROJECT</a></li>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Description">PROJECT</a></li>
−
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Model">MODELING</a></li>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Software">MODELING</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices">HUMAN PRACTICES</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices">HUMAN PRACTICES</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Team">PEOPLE</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Team">PEOPLE</a></li>
Line 310: Line 381:
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Parts">PARTS</a></li>
 
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Parts">PARTS</a></li>
 
</ul>
 
</ul>
 +
<div class="circle"><img style="position:absolute;z-index:+1;width:90%;height:95%;margin-left:3%;margin-top:2%;" src="https://static.igem.org/mediawiki/2016/8/8a/CGU_Taiwan--logo9.jpg"></div>
 
</header>
 
</header>
  
  
  
−
 
+
<ul class="left">
−
<div class="left" style="height:225px; border-color:#140731; border-radius:8px;border-width:2px;border-style:solid;">
+
<a href="#anchor0"><section class="left-tab" style="top:240px;" id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()"><b>TOP</b></section></a>
−
<a href="#anchor0"><section class="left-tab" style="position:fixed;top:210px;left:35px;" id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">TOP</section>
+
<a href="#anchor1"><section class="left-tab" style="top:275px;left:50px;">Motivation</section></a>
−
<a href="#anchor1"><section class="left-tab" style="position:fixed;top:245px;left:50px;">Motivation</section>
+
<a href="#anchor2"><section class="left-tab" style="top:310px;left:50px;">Demo</section></a>
−
<a href="#anchor2"><section class="left-tab" style="position:fixed;top:280px;left:50px;">Demo</section>
+
<a target="_blank" href="http://163.25.92.36/igemcgu/igemwebhome.htm"><section class="left-tab" style="top:420px;left:50px;">McHug</section></a>
−
<a target="_blank" href="http://163.25.92.36/igemcgu/igemwebhome.htm"><section class="left-tab" style="position:fixed;top:390px;left:50px;">McHug</section>
+
<a href="#anchor4"><section class="left-tab" style="top:345px;left:50px;">Results</section></a>
−
<a href="#anchor4"><section class="left-tab" style="position:fixed;top:315px;left:50px;">Results</section>
+
</ul>
−
<a href="#anchor5"><section class="left-tab" style="position:fixed;top:350px;left:50px;">Notebook</section>
+
−
</div>
+
  
  
−
<img src="https://static.igem.org/mediawiki/2016/a/a1/Drylab.png" width=550px height=300px style="border:2px black solid;border-radius:8px;margin-left:400px;margin-top:170px;"></img>
 
−
 
−
<div class="mid" style="top:405px;background-color:white;">
 
−
<a name='anchor1'></a>
 
 
<br><br><br>
 
<br><br><br>
−
<h1 style="font-size:30px;color:#FF8800;text-decoration:none;position:absolute;left:200px;top:70px;margin:20px;">Modeling Motivation<HR style="border-color:#FF8800;width:780px;position:absolute;left:300px;top:5px;size:2px;"></h1>
+
<div class="mid">
−
<p style="color:black;text-decoration:none;font-size:15px;position:absolute;left:200px;top:110px;margin-right:80px;margin-left:50px;margin-top:30px;text-align:justify;">  
+
<a name='anchor0'></a>
 +
<div style="font-size:60px;color:#FF8800;text-decoration:none;margin-left:22%;margin-top:20%;">
 +
Modeling
 +
</div>
 +
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2016/a/a1/Drylab.png" width=550px height=300px style="border:2px black solid;border-radius:8px;margin-left:30%;"></img>
 +
<br><br><br>
 +
<a name='anchor1'></a>
 +
<b style="color:#FF8800;font-size:28px;margin-left:22%;">Modeling Motivation</b>
 +
<br><br>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
 
In our 2016 iGEM project, immune and protein information searching is inevitably required. Therefore, McHug is a software platform that is created to arrange your data and search the protein infomation from several databases. We will output your data with a user-friendly interface and you can easily browse the results by submitting in a requested form. The concept of McHug software is originated from 2016 CGU iGEM group. We aim to test the potential of Leishmania to be a new vaccine adjuvant by carrying antigens directly into immune cells. The antigen peptides will be presented on MHCI or II molecules to activate T cells. Therefore, McHug is created to predict the peptides on MHC molecules and help to optimize the peptide presentation and T cell activation. Also, cloning efficiency is considered to be an important step of the experiment. We then expect that this platform and help us shorten the antigen sequence so that it can be more effective to subclone the shuttle vector. The major functions of McHug can be sorted into 3 parts:<br>
 
In our 2016 iGEM project, immune and protein information searching is inevitably required. Therefore, McHug is a software platform that is created to arrange your data and search the protein infomation from several databases. We will output your data with a user-friendly interface and you can easily browse the results by submitting in a requested form. The concept of McHug software is originated from 2016 CGU iGEM group. We aim to test the potential of Leishmania to be a new vaccine adjuvant by carrying antigens directly into immune cells. The antigen peptides will be presented on MHCI or II molecules to activate T cells. Therefore, McHug is created to predict the peptides on MHC molecules and help to optimize the peptide presentation and T cell activation. Also, cloning efficiency is considered to be an important step of the experiment. We then expect that this platform and help us shorten the antigen sequence so that it can be more effective to subclone the shuttle vector. The major functions of McHug can be sorted into 3 parts:<br>
−
<span style="font-weight:bold;">1. Protein Structure</span><br>
 
−
Protein structure can affect the possibility of being epitope. Peptides in strong structural sequences like alpha-helix have small chance to be antigenic determinant. On the other hand, sequences in loop structure tend to be recognized by the immune system, specifically by antibodies, B cells, or T cells. Here, McHug shows you the 3D structure of your protein and you can select the peptide sequence to be colored. In case you want to design an epitope sequence to generate antibodies, you can choose sequences on the protein surface in a visible way.<br>
 
−
<span style="font-weight:bold;">2. MHC Affinity Graphs</span><br>
 
−
Pathogenic proteins will be chopped into peptides and presented by MHC molecules to activate T cells. Therefore, the prediction of MHC affinity in your protein sequence can help you design your experiment. McHug is generated to arrange your numerical data into an easy understanding graph. We can show your IEDB prediction result in a trend chart. Also, users can enter the affinity threshold to curtail the signal in low-affinity position. Each affinity of amino acid in the chart stands for the nonamer starting from the specific amino acid position. Users can easily choose the high-affinity sequence and optimize their experiment.<br>
 
−
<span style="font-weight:bold;">3. Modification Sites</span><br>
 
−
McHug will provide you the basic information of protein modifications. Moreover, the modification sites will be shown correspondingly to the amino acid position of MHC affinity chart. With the information, users can twig the profile of the protein.<br>
 
−
<span style="font-weight:bold;">4. Conservation Level</span><br>
 
−
Protein conservation level will be given after BLASTing and multiple sequence aligning the submitted protein sequence. The outcome indicates the protein sequence conservation level between homologous protein sequences in different species. The conservation data will also be shown correspondingly to the amino acid position of MHC affinity chart. Users can choose the highly conserved peptide sequence to perform their experiment. In the project of CGU iGEM 2016, highly conserved region of pathogenic antigens sequence indicates a higher common share of pathogens. This can ensure the high coverage of the vaccine. (Future Work)<br>
 
−
</p>
 
 
</div>
 
</div>
−
 
+
<br><br>
−
<div class="mid" style="top:1220px;background-color:white;">
+
<b style="color:#0D014D;font-size:20px;margin-left:22%;">1. Protein Structure</b>
−
<a name='anchor2'></a>
+
<br><br>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
 +
Protein structure can affect the possibility of being epitope. Peptides in strong structural sequences like alpha-helix have small chance to be antigenic determinant. On the other hand, sequences in loop structure tend to be recognized by the immune system, specifically by antibodies, B cells, or T cells. Here, McHug shows you the 3D structure of your protein and you can select the peptide sequence to be colored. In case you want to design an epitope sequence to generate antibodies, you can choose sequences on the protein surface in a visible way.
 +
</div>
 +
<br><br>
 +
<b style="color:#0D014D;font-size:20px;margin-left:22%;">2. MHC Affinity Graphs</b>
 +
<br><br>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
 +
Pathogenic proteins will be chopped into peptides and presented by MHC molecules to activate T cells. Therefore, the prediction of MHC affinity in your protein sequence can help you design your experiment. McHug is generated to arrange your numerical data into an easy understanding graph. We can show your IEDB prediction result in a trend chart. Also, users can enter the affinity threshold to curtail the signal in low-affinity position. Each affinity of amino acid in the chart stands for the nonamer starting from the specific amino acid position. Users can easily choose the high-affinity sequence and optimize their experiment.
 +
</div>
 +
<br><br>
 +
<b style="color:#0D014D;font-size:20px;margin-left:22%;">3. Modification Sites</b>
 +
<br><br>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
 +
McHug will provide you the basic information of protein modifications. Moreover, the modification sites will be shown correspondingly to the amino acid position of MHC affinity chart. With the information, users can twig the profile of the protein.
 +
</div>
 +
<br><br>
 +
<b style="color:#0D014D;font-size:20px;margin-left:22%;">4. Conservation Level</b>
 +
<br><br>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
 +
Protein conservation level will be given after BLASTing and multiple sequence aligning the submitted protein sequence. The outcome indicates the protein sequence conservation level between homologous protein sequences in different species. The conservation data will also be shown correspondingly to the amino acid position of MHC affinity chart. Users can choose the highly conserved peptide sequence to perform their experiment. In the project of CGU iGEM 2016, highly conserved region of pathogenic antigens sequence indicates a higher common share of pathogens. This can ensure the high coverage of the vaccine. (Future Work)
 +
</div>
 
<br><br><br>
 
<br><br><br>
−
<h1 style="font-size:30px;color:#FF8800;text-decoration:none;position:absolute;left:200px;top:50px;margin:20px;">Demo<HR style="border-color:#FF8800;width:930px;position:absolute;left:150px;top:5px;size:2px;"></h1>
+
<a name='anchor2'></a>
−
<iframe style="margin-left:230px; margin-top:90px;" width="390" height="285" src="https://www.youtube.com/embed/8dglgo3zfuo" frameborder="0" allowfullscreen></iframe>
+
<b style="color:#FF8800;font-size:28px;margin-left:22%;">Demo</b>
−
<p style="color:black;text-decoration:none;font-size:15px;position:absolute;left:600px;top:100px;margin-right:80px;margin-left:50px;margin-top:30px;text-align:justify;">  
+
<br><br>
−
This demo clip was filmed to showcase how to use McHug software and explan the function of result page. The protein ID we used in this clip was OVA protein so that you can see the result of our targeting antigen. The ultimate goal of McHug platform is to integrate several protein databases and provide the users with easy-understanding illustrations. <br>
+
<iframe style="float:left;margin-bottom:4%;margin-left:22%;width:74%;height:250%;margin-right:5%;" src="https://www.youtube.com/embed/67MteERKOes" frameborder="0" allowfullscreen></iframe>
−
 
+
<br>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
 +
This demo clip was filmed to showcase how to use McHug software and explan the function of result page. The protein ID we used in this clip was OVA protein so that you can see the result of our targeting antigen. The ultimate goal of McHug platform is to integrate several protein databases and provide the users with easy-understanding illustrations.
 +
<br><br>
 
So far, we are able to show you protein 3D structure on the top of the interface. You can easily zoom in and zoom out to peek every part of your protein. And even select a partial peptide sequence. The peptide sequence in the protein will light up and reveal its position in the 3D structure. Moreover, MHC binding affinity and protein annotations are shown below. Amino acid positions are arranged correspondingly so that you can check all the information side by side. McHug 2016 also features the visualized interface which can transform loads of numerical data into legible charts and all basic protein information are integrated into a canvas penal at the buttom of the page.
 
So far, we are able to show you protein 3D structure on the top of the interface. You can easily zoom in and zoom out to peek every part of your protein. And even select a partial peptide sequence. The peptide sequence in the protein will light up and reveal its position in the 3D structure. Moreover, MHC binding affinity and protein annotations are shown below. Amino acid positions are arranged correspondingly so that you can check all the information side by side. McHug 2016 also features the visualized interface which can transform loads of numerical data into legible charts and all basic protein information are integrated into a canvas penal at the buttom of the page.
−
</p>
 
 
</div>
 
</div>
−
 
+
<br><br><br>
−
<div class="mid" style="top:1680px;background-color:white;">
+
 
<a name='anchor4'></a>
 
<a name='anchor4'></a>
 +
<b style="color:#FF8800;font-size:28px;margin-left:22%;">Results</b>
 +
<br><br>
 +
<a target="_blank" href="http://163.25.92.36/igemcgu/igemwebhome.htm"><button style="margin-left:22%;" class="mchug mchug5">McHug</button></a>
 +
<br><br>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
 +
McHug was programmed by computer languages such as Php, javascript, css and html. The major sources from published databases are Uniprot, IEDB and PDB. We thank Dr. Chi-Ching Lee for guiding us programming this software platform. We would also like to thank Chang-Gung Molecular Medicine Research Center for providing us server. This work was supported by several faculties of Chang-Gung University. We are grateful for sponsors and donations from all the supporters.
 +
</div>
 
<br><br><br>
 
<br><br><br>
−
<h1 style="font-size:30px;color:#FF8800;text-decoration:none;position:absolute;left:200px;top:50px;margin:20px;">Results<HR style="border-color:#FF8800;width:930px;position:absolute;left:150px;top:5px;size:2px;"></h1>
+
<b style="color:#0D014D;font-size:20px;margin-left:22%;">Result for OVA protein</b>
−
<p style="color:black;text-decoration:none;font-size:15px;position:absolute;left:200px;top:100px;margin-right:80px;margin-left:50px;margin-top:30px;text-align:justify;">  
+
<br><br>
−
<a target="_blank" href="http://163.25.92.36/igemcgu/igemwebhome.htm"><button class="mchug mchug5">McHug</button></a><br>
+
<img src="https://static.igem.org/mediawiki/2016/3/38/OVAchart.png" style="border:2px black solid;border-radius:8px;margin-left:24%;width:70%;height:220%;"></img>
−
<br>McHug was programmed by computer languages such as Php, javascript, css and html. The major sources from published databases are Uniprot, IEDB and PDB. We thank Dr. Chi-Ching Lee for guiding us programming this software platform. We would also like to thank Chang-Gung Molecular Medicine Research Center for providing us server. This work was supported by several faculties of Chang-Gung University. We are grateful for sponsors and donations from all the supporters.  <br><br>
+
<br><br>
−
<span style="font-weight:bold;font-size:20px;">Result for OVA protein</span><br>
+
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;text-align:justify;text-decoration:none;">
−
<img src="https://static.igem.org/mediawiki/2016/3/38/OVAchart.png" style="border:2px black solid;border-radius:8px;" width=900px height=500px></img><br><br>
+
Based on our experimental design, this result was analysed under condition of mouse MHC molecules and OVA protein. As the penal shown above, there are two MHC high affinity regions on OVA protein which are amino acid 0-50th and 150-250th. However, the 0-50th sequence is also around the signal peptide sequence rendering a possibility of cutting off. Therefore, we predict that sequence 150-250th is the best part to be a high antigenicity peptide sequence. Besides, this sequence will remain its 3D structure due to enough length of the peptide which means B cell will also able to recognize this antigen-like-sequence by binding on it. In the future, we expect that this can help us shortening the sequence cloned into the shuttle vector and enhance the efficiency of transfection by designing this peptide sequence. Moreover, we will test the actual peptides binding to MHC molecules to directly elucidate this result in our in vitro test.
−
Based on our experimental design, this result was analysed under condition of mouse MHC molecules and OVA protein. As the penal shown above, there are two MHC high affinity regions on OVA protein which are amino acid 0-50th and 150-250th. However, the 0-50th sequence is also around the signal peptide sequence rendering a possibility of cutting off. Therefore, we predict that sequence 150-250th is the best part to be a high antigenicity peptide sequence. Besides, this sequence will remain its 3D structure due to enough length of the peptide which means B cell will also able to recognize this antigen-like-sequence by binding on it. In the future, we expect that this can help us shortening the sequence cloned into the shuttle vector and enhance the efficiency of transfection by designing this peptide sequence. Moreover, we will test the actual peptides binding to MHC molecules to directly elucidate this result in our in vitro test.<br><br>
+
</div>
−
<img src="https://static.igem.org/mediawiki/2016/7/72/OVA3D.png" style="float:left;margin:20px;border:2px black solid;border-radius:8px;" width=400px height=500px></img>
+
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2016/7/72/OVA3D.png" style="float:left;margin-right:5%;border:2px black solid;border-radius:8px;margin-left:22%;width:30%;height:200%;"></img>
 +
<div style="color:black;font-size:18px;margin-left:22%;margin-right:5%;margin-top:5%;text-align:justify;text-decoration:none;">
 
The 150-250th sequence on the 3D structure shows that the sequence is on the shell of the protein. In other words, the sequence has a higher possibility to be a epitope sequence to activate B cell and generate antibody against the OVA antigen.
 
The 150-250th sequence on the 3D structure shows that the sequence is on the shell of the protein. In other words, the sequence has a higher possibility to be a epitope sequence to activate B cell and generate antibody against the OVA antigen.
−
</p>
+
<br>
 +
Our vision for protein searching has always been that the most user-friendly sogware should deliver incredible experience without the complexity.
 +
McHug 2016 makes the protein research you do most even better. It changes the way people discover, study and analyse.
 
</div>
 
</div>
 +
<br><br><br><br><br><br><br><br><br>
  
 +
</div>
  
  
−
<div class="mid" style="top:3500px;background-color:white;">
 
−
<a name='anchor5'></a>
 
−
<br><br><br>
 
−
<h1 style="font-size:30px;color:#FF8800;text-decoration:none;position:absolute;left:200px;top:50px;margin:20px;">Notebook<HR style="border-color:#FF8800;width:930px;position:absolute;left:150px;top:5px;size:2px;"></h1>
 
−
<div class="wrapper" style="position:absolute;left:350px;top:130px;">
 
−
  <div class="frame"></div>
 
−
  <input checked='' data-tooltip="May" class='tab1' name='thumbnail' type='radio' />
 
−
  <input class='tab2' data-tooltip="June" name='thumbnail' type='radio' />
 
−
  <input class='tab2' data-tooltip="July" name='thumbnail' type='radio' />
 
−
  <input class='tab2' data-tooltip="August" name='thumbnail' type='radio' />
 
−
  <input class='tab3' data-tooltip="September" name='thumbnail' type='radio' />
 
−
    <ul class="tab">
 
−
    <li>
 
−
      <h3>Week 1 (5/1~5/8)</h3>
 
−
      <p>Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood the unrealized potential of millions of computers connected together through the Internet.
 
−
      </p>
 
−
      <h3>Week 2 (5/9~5/15)</h3>
 
−
      <p></p>
 
−
      <h3>Week 3 (5/16~5/22)</h3>
 
−
      <p></p>
 
−
      <h3>Week 4 (5/23~5/31)</h3>
 
−
      <p></p>
 
−
    </li>
 
−
    <li>
 
−
      <h3>Week 1 (6/1~6/5)</h3>
 
−
      <p>Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood the unrealized potential of millions of computers connected together through the Internet.
 
−
      </p>
 
−
      <h3>Week 2 (6/6~6/12)</h3>
 
−
      <p></p>
 
−
      <h3>Week 3 (6/13~6/19)</h3>
 
−
      <p></p>
 
−
      <h3>Week 4 (6/20~6/26)</h3>
 
−
      <p></p>
 
−
      <h3>Week 5 (6/27~7/3)</h3>
 
−
      <p></p>
 
−
    </li>
 
  
−
    <li>
+
<div class="end2" style="margin-top:320%;">
−
      <h3>Week 1 (7/4~7/10)</h3>
+
<br>
−
      <p>Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood the unrealized potential of millions of computers connected together through the Internet.
+
<ul class="list3" class="margin-left:1%;margin-top:2%;">
−
      </p>
+
<li><a href="#anchor0"><b style="color:white;font-size:28px;margin-left:7%;">TOP</a></li>
−
      <h3>Week 2 (7/11~7/17)</h3>
+
</ul>
−
      <p></p>
+
<br>
−
      <h3>Week 3 (7/18~7/24)</h3>
+
<div class="sitemap" style="margin-left:5%;">
−
      <p></p>
+
<br>
−
      <h3>Week 4 (7/25~7/31)</h3>
+
<b style="color:white;font-size:28px;margin-top:5%;margin-left:4%;text-decoration:none;">SITE MAP</b><br>
−
      <p></p>
+
<br><br>
−
    </li>
+
<img style="background-color:#0D014D;margin-left:20%;border-radius:50%;border:6px solid white;padding:5px;width:40%;height:70%;position:absolute;margin-left:2%;" src="https://static.igem.org/mediawiki/2016/0/03/CGU_Taiwan--leishmania3.jpg">
−
    <li>
+
</div>
−
      <h3>Week 1 (8/1~8/7)</h3>
+
<br>
−
      <p>Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood the unrealized potential of millions of computers connected together through the Internet.
+
−
      </p>
+
−
      <h3>Week 2 (8/8~8/14)</h3>
+
−
      <p></p>
+
−
      <h3>Week 3 (8/15~8/21)</h3>
+
−
      <p></p>
+
−
      <h3>Week 4 (8/22~8/28)</h3>
+
−
      <p></p>
+
−
      <h3>Week 5 (8/19~9/4)</h3>
+
  
−
    </li>
+
<div class="sitemap" style="margin-left:22%;margin-top:-1%;">
−
<li>
+
<ul class="list1" class="margin-left:5%;">
−
      <h3>Week 1 (9/5~9/11)</h3>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan"><b style="color:white;font-size:18px;margin-left:20%;">HOME</li></a>
−
      <p>Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood the unrealized potential of millions of computers connected together through the Internet.
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Achievements"><b style="color:white;font-size:18px;margin-left:20%;">ACHIEVEMENTS</li></a>
−
      </p>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Interlab"><b style="color:white;font-size:18px;margin-left:20%;">INTERLAB</li></a>
−
      <h3>Week 2 (9/12~9/18)</h3>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Safety"><b style="color:white;font-size:18px;margin-left:20%;">SAFETY</li></a>
−
      <p></p>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Parts"><b style="color:white;font-size:18px;margin-left:20%;">PARTS</li></a>
−
      <h3>Week 3 (9/19~9/25)</h3>
+
</ul>
−
      <p></p>
+
</div>
−
      <h3>Week 4 (9/26~10/2)</h3>
+
 
−
      <p></p>
+
<div class="sitemap" style="margin-left:40%;margin-top:-2%;">
−
      <h3>Week 5 (8/19~9/4)</h3>
+
<ul class="list1" class="margin-left:5%;">
−
      <p></p>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Description"><b style="color:white;font-size:18px;margin-left:20%;">PROJECT</li></a>
−
    </li>
+
<br><br>
−
  </ul>
+
<ul class="list2" class="margin-left:6%;margin-top:50%;">
−
</div>
+
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Design"><b style="color:white;font-size:17px;margin-left:10%;">Design</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Background"><b style="color:white;font-size:17px;margin-left:10%;">Background</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Results"><b style="color:white;font-size:17px;margin-left:10%;">Results</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Proof"><b style="color:white;font-size:17px;margin-left:10%;">Proof</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Notebook"><b style="color:white;font-size:17px;margin-left:10%;">Notebook</li></a>
 +
<br><br>
 +
</ul>
 +
</ul>
 +
</div>
 +
 
 +
<div class="sitemap" style="margin-left:55%;margin-top:-3.5%;">
 +
<ul class="list1" class="margin-left:5%;">
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices"><b style="color:white;font-size:18px;margin-left:20%;">HUMAN PRACTICES</li></a>
 +
<br><br>
 +
<ul class="list2" class="margin-left:6%;margin-top:50%;">
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices_Survey"><b style="color:white;font-size:17px;margin-left:10%;">Survey</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices_Education"><b style="color:white;font-size:17px;margin-left:10%;">Education</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices_Communication"><b style="color:white;font-size:17px;margin-left:10%;">Communication</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Entrepreneurship"><b style="color:white;font-size:17px;margin-left:10%;">Entrepreneurship</li></a>
 +
</ul>
 +
</ul>
 +
</div>
 +
 
 +
<div class="sitemap" style="margin-left:75%;margin-top:-3.5%;">
 +
<ul class="list1" class="margin-left:5%;">
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Software"><b style="color:white;font-size:18px;margin-left:20%;">MODELING</li></a>
 +
<br><br>
 +
<ul class="list2" class="margin-left:6%;">
 +
<li><a href="http://163.25.92.36/igemcgu/igemwebhome.htm"><b style="color:white;font-size:17px;margin-left:10%;">McHug</li></a>
 +
</ul>
 +
</ul>
 +
<ul class="list1" class="margin-left:1%;margin-top:-10%;">
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Team"><b style="color:white;font-size:18px;margin-left:20%;">OUR TEAM</li></a>
 +
<br><br>
 +
<ul class="list2" class="margin-left:6%;margin-top:-5%;">
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Collaborations"><b style="color:white;font-size:17px;margin-left:10%;">Collaborations</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Attributions"><b style="color:white;font-size:17px;margin-left:10%;">Attributions</li></a>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Team#anchor2"><b style="color:white;font-size:17px;margin-left:10%;">Sponsors</li></a>
 +
</ul>
 +
</ul>
 +
</div>
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 07:07, 2 December 2016




Modeling





Modeling Motivation

In our 2016 iGEM project, immune and protein information searching is inevitably required. Therefore, McHug is a software platform that is created to arrange your data and search the protein infomation from several databases. We will output your data with a user-friendly interface and you can easily browse the results by submitting in a requested form. The concept of McHug software is originated from 2016 CGU iGEM group. We aim to test the potential of Leishmania to be a new vaccine adjuvant by carrying antigens directly into immune cells. The antigen peptides will be presented on MHCI or II molecules to activate T cells. Therefore, McHug is created to predict the peptides on MHC molecules and help to optimize the peptide presentation and T cell activation. Also, cloning efficiency is considered to be an important step of the experiment. We then expect that this platform and help us shorten the antigen sequence so that it can be more effective to subclone the shuttle vector. The major functions of McHug can be sorted into 3 parts:


1. Protein Structure

Protein structure can affect the possibility of being epitope. Peptides in strong structural sequences like alpha-helix have small chance to be antigenic determinant. On the other hand, sequences in loop structure tend to be recognized by the immune system, specifically by antibodies, B cells, or T cells. Here, McHug shows you the 3D structure of your protein and you can select the peptide sequence to be colored. In case you want to design an epitope sequence to generate antibodies, you can choose sequences on the protein surface in a visible way.


2. MHC Affinity Graphs

Pathogenic proteins will be chopped into peptides and presented by MHC molecules to activate T cells. Therefore, the prediction of MHC affinity in your protein sequence can help you design your experiment. McHug is generated to arrange your numerical data into an easy understanding graph. We can show your IEDB prediction result in a trend chart. Also, users can enter the affinity threshold to curtail the signal in low-affinity position. Each affinity of amino acid in the chart stands for the nonamer starting from the specific amino acid position. Users can easily choose the high-affinity sequence and optimize their experiment.


3. Modification Sites

McHug will provide you the basic information of protein modifications. Moreover, the modification sites will be shown correspondingly to the amino acid position of MHC affinity chart. With the information, users can twig the profile of the protein.


4. Conservation Level

Protein conservation level will be given after BLASTing and multiple sequence aligning the submitted protein sequence. The outcome indicates the protein sequence conservation level between homologous protein sequences in different species. The conservation data will also be shown correspondingly to the amino acid position of MHC affinity chart. Users can choose the highly conserved peptide sequence to perform their experiment. In the project of CGU iGEM 2016, highly conserved region of pathogenic antigens sequence indicates a higher common share of pathogens. This can ensure the high coverage of the vaccine. (Future Work)



Demo


This demo clip was filmed to showcase how to use McHug software and explan the function of result page. The protein ID we used in this clip was OVA protein so that you can see the result of our targeting antigen. The ultimate goal of McHug platform is to integrate several protein databases and provide the users with easy-understanding illustrations.

So far, we are able to show you protein 3D structure on the top of the interface. You can easily zoom in and zoom out to peek every part of your protein. And even select a partial peptide sequence. The peptide sequence in the protein will light up and reveal its position in the 3D structure. Moreover, MHC binding affinity and protein annotations are shown below. Amino acid positions are arranged correspondingly so that you can check all the information side by side. McHug 2016 also features the visualized interface which can transform loads of numerical data into legible charts and all basic protein information are integrated into a canvas penal at the buttom of the page.



Results



McHug was programmed by computer languages such as Php, javascript, css and html. The major sources from published databases are Uniprot, IEDB and PDB. We thank Dr. Chi-Ching Lee for guiding us programming this software platform. We would also like to thank Chang-Gung Molecular Medicine Research Center for providing us server. This work was supported by several faculties of Chang-Gung University. We are grateful for sponsors and donations from all the supporters.



Result for OVA protein



Based on our experimental design, this result was analysed under condition of mouse MHC molecules and OVA protein. As the penal shown above, there are two MHC high affinity regions on OVA protein which are amino acid 0-50th and 150-250th. However, the 0-50th sequence is also around the signal peptide sequence rendering a possibility of cutting off. Therefore, we predict that sequence 150-250th is the best part to be a high antigenicity peptide sequence. Besides, this sequence will remain its 3D structure due to enough length of the peptide which means B cell will also able to recognize this antigen-like-sequence by binding on it. In the future, we expect that this can help us shortening the sequence cloned into the shuttle vector and enhance the efficiency of transfection by designing this peptide sequence. Moreover, we will test the actual peptides binding to MHC molecules to directly elucidate this result in our in vitro test.


The 150-250th sequence on the 3D structure shows that the sequence is on the shell of the protein. In other words, the sequence has a higher possibility to be a epitope sequence to activate B cell and generate antibody against the OVA antigen.
Our vision for protein searching has always been that the most user-friendly sogware should deliver incredible experience without the complexity. McHug 2016 makes the protein research you do most even better. It changes the way people discover, study and analyse.












SITE MAP