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

(Prototype team page)
 
Line 1: Line 1:
{{CGU_Taiwan}}
 
 
<html>
 
<html>
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
<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
 +
        {
 +
        display:none; /* Disable the display of the annoying side main menu*/
 +
        }
 +
       
 +
        #top_title
 +
        {
 +
        display:none; /* Disable the annoying title*/
 +
        }
  
 +
#content { padding:0px; width:100%; margin-left:0%; margin-right:0%;}
 +
</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 /////////////////////// -->
 +
<head>
 +
<style>
 +
body {
 +
  background-color:white;
 +
}
 +
.top {
 +
  position: absolute;
 +
  top: -10px;
 +
  left: 0px;
 +
  background:  #140731;
 +
  width: 100%;
 +
  height: 110px;
 +
  font-family: Corbel;
 +
  overflow: visible;
 +
}
 +
.mid {
 +
  position: absolute;
 +
  left: 0px;
 +
  width: 100%;
 +
  height: 120%;
 +
  font-family: Corbel;
 +
  z-index:-1;
 +
}
 +
.headline {
 +
  font-size:45px;
 +
  color: #ffe;
 +
  text-align: center;
 +
  padding-top: 30px;
 +
  padding-bottom: 40px;
 +
}
 +
.header-subnav  {
 +
  background: #140731;
 +
  width: 100%;
 +
  position: absolute;
 +
  text-align: center;
 +
  margin: 0 auto;
 +
  top: 100px;
 +
  left:-20px;
 +
  font-family: Corbel;
 +
}
 +
.header-subnav li {
 +
  float: none;
 +
  display: inline-block;
 +
}
 +
.header-subnav li a {
 +
  padding: 15px 1rem;
 +
  font-size: 13px;
 +
  text-decoration: none;
 +
  color: #ffe;
 +
  text-transform: uppercase;
 +
  display: block;
 +
  font-weight: bold;
 +
  letter-spacing: 1px;
 +
  transition: all 0.35s ease-in-out;
 +
  border-radius: 4px;
 +
}
 +
.header-subnav li a.is-active {
 +
  background: rgba(250, 250, 250, 0.15);
 +
}
 +
.header-subnav li a:hover {
 +
  background: #d0d0d0;
 +
  color: #140731;
 +
  transition: all 0.35s ease-in-out;
 +
}
 +
.fixed1 {
 +
  position: fixed;
 +
  top: 13px;
 +
}
 +
.circle {
 +
  position:absolute;
 +
  left: 1110px;
 +
  top: 30px;
 +
  width: 180px;
 +
  height: 180px;
 +
  background: #140731;
 +
  -moz-border-radius: 90px;
 +
  -webkit-border-radius: 90px;
 +
  border-radius: 90px;
 +
}
 +
.left {
 +
  position: fixed;
 +
  left: 25px;
 +
  top: 200px;
 +
  font-family: Corbel;
 +
  background: rgba(250, 250, 250, 0.15);
 +
  width: 170px;
 +
  z-index:+1;
 +
}
 +
.left-tab {
 +
  background-color: rgba(250, 250, 250, 0.1);
 +
  display: block;
 +
  font-size: 20px;
 +
  color: #140731;
 +
  -webkit-transition-duration: 0.4s;
 +
  transition-duration: 0.4s;
 +
  padding-right: 40px;
 +
  padding-left: 5px;
 +
  padding-top: 5px;
 +
  padding-bottom: 5px;
 +
  z-index:+1;
 +
}
 +
.left-tab:hover {
 +
  background-color: #FF8800;
 +
  color: #140731;
 +
  font-size: 20px;
 +
  -webkit-transition-duration: 0.4s;
 +
  transition-duration: 0.4s;
 +
  padding-right: -20px;
 +
  padding-left: 5px;
 +
  border-radius: 4px;
 +
}
 +
.button {
 +
  background-color: rgba(250, 250, 250, 0.1);
 +
  display: block;
 +
  font-size: 16px;
 +
  color: #140731;
 +
  -webkit-transition-duration: 0.4s;
 +
  transition-duration: 0.4s;
 +
  padding-right: 40px;
 +
  padding-left: 5px;
 +
  padding-top: 5px;
 +
  padding-bottom: 5px;
 +
  z-index:+1;
 +
}
 +
.wrapper {
 +
  background: white;
 +
  width: 900px;
 +
  height: 500px;
 +
  border-radius: 5px;
 +
  position: relative;
 +
  overflow: hidden;
 +
  backface-visibility: hidden;
 +
}
  
<div class="column full_size">
+
.frame{
 +
  background: transparent;
 +
  width: 600px;
 +
  height: 500px;
 +
  border-top: solid 45px white;
 +
  border-right: solid 5px white;
 +
  border-bottom: solid 5px white;
 +
  border-left: solid 5px white;
 +
  position: absolute;
 +
  z-index: 1;
 +
}
  
 +
input[type='radio'] {
 +
  -webkit-appearance: none;
 +
  background: #FF8800;
 +
  border-radius: 4px;
 +
  border-color: #FF8800;
 +
  width: 119px;
 +
  height: 35px;
 +
  margin: 5px 0 5px 5px;
 +
  background-size: 225px 70px;
 +
  position: relative;
 +
  left: 200px;
 +
  float: left;
 +
  display: inline;
 +
  top: 0;
 +
  border-radius: 5px;
 +
  z-index: 99999;
 +
  cursor: pointer;
 +
}
  
<p>Each team will make new parts during iGEM and will submit them to the Registry of Standard Biological Parts. The iGEM software provides an easy way to present the parts your team has created. The <code>&lt;groupparts&gt;</code> tag (see below) will generate a table with all of the parts that your team adds to your team sandbox.</p>
+
input[type='radio']:before{
<p>Remember that the goal of proper part documentation is to describe and define a part, so that it can be used without needing to refer to the primary literature. Registry users in future years should be able to read your documentation and be able to use the part successfully. Also, you should provide proper references to acknowledge previous authors and to provide for users who wish to know more.</p>
+
  content: attr(data-tooltip);
 +
  color: black;
 +
  font-size: 20px;
 +
  font-family: Corbel;
 +
  font-weight:bold;
 +
  text-align:center;
 +
  position: absolute;
 +
  top:5px;
 +
  left:25px;
 +
}
  
 +
input[type='radio']:hover{
 +
  background: white; 
 +
  color: #FF8800;
 +
  border-color: #FF8800;
 +
}
  
</div>
+
input[type='radio']:checked{
 +
  background: white;
 +
  border-color: #FF8800;
 +
}
 +
.tab {
 +
  margin-left: -20px;
 +
  transition: .3s ease-out;
 +
}
 +
.tab li{
 +
  background: #fff;
 +
  color: black;
 +
  width: 1000px;
 +
  height: 500px;
 +
  display: inline;
 +
  float: left;
 +
  bottom: 0;
 +
  z-index: -1;
 +
}
 +
.tab1:checked ~ ul{
 +
  transform: translateY(0);
 +
}
  
 +
.tab2:checked ~ ul{
 +
  transform: translateY(-500px);
 +
}
  
 +
.tab3:checked ~ ul{
 +
  transform: translateY(-1000px);
 +
}
  
 +
.tab4:checked ~ ul{
 +
  transform: translateY(-1500px);
 +
}
 +
</style>
 +
</head>
  
 +
<script>
 +
/* Dynamic top menu positioning
 +
*
 +
*/
 +
var num = 110; //number of pixels before modifying styles
 +
$(window).bind('scroll', function () {
 +
    if ($(window).scrollTop() > num) {
 +
        $('.header-subnav').addClass('fixed1');
 +
    } else {
 +
        $('.header-subnav').removeClass('fixed1');
 +
    }
 +
});
  
<div class="column half_size">
 
<div class="highlight">
 
<h5>Note</h5>
 
<p>Note that parts must be documented on the <a href="http://parts.igem.org/Main_Page"> Registry</a>. This page serves to <i>showcase</i> the parts you have made. Future teams and other users and are much more likely to find parts by looking in the Registry than by looking at your team wiki.</p>
 
</div>
 
</div>
 
  
 +
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
 +
</script>
  
 
+
<body>
 
+
<div class="top">
<div class="column half_size">
+
<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">
<h5>Adding parts to the registry</h5>
+
<a name='anchor0'></a>
<p>You can add parts to the Registry at our <a href="http://parts.igem.org/Add_a_Part_to_the_Registry">Add a Part to the Registry</a> link.</p>
+
<div class="circle"></div>
<p>We encourage teams to start completing documentation for their parts on the Registry as soon as you have it available. The sooner you put up your parts, the better you will remember all the details about your parts. Remember, you don't need to send us the DNA sample before you create an entry for a part on the Registry. (However, you <b>do</b> need to send us the DNA sample before the Jamboree. If you don't send us a DNA sample of a part, that part will not be eligible for awards and medal criteria.)</p>
+
 
</div>
 
</div>
  
 +
<header class="top">
 +
<h1 class="headline">Leijuvant <small></small></h1>
 +
<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/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/Model">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/Team">PEOPLE</a></li>
 +
<li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Interlab">INTERLAB</a></li>
 +
<li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Safety">SAFETY</a></li>
 +
<li><a href="https://2016.igem.org/Team:CGU_Taiwan/Parts">PARTS</a></li>
 +
</ul>
 +
</header>
  
  
  
 
+
<div class="mid" style="top:405px;background-color:white;">
<div class="column half_size">
+
<a name='anchor1'></a>
 
+
<br><br><br>
<h5>What information do I need to start putting my parts on the Registry?</h5>
+
<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>
<p>The information needed to initially create a part on the Registry is:</p>
+
<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;">  
<ul>
+
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>
<li>Part Name</li>
+
<span style="font-weight:bold;">1. Protein Structure</span><br>
<li>Part type</li>
+
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>
<li>Creator</li>
+
<span style="font-weight:bold;">2. MHC Affinity Graphs</span><br>
<li>Sequence</li>
+
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>
<li>Short Description (60 characters on what the DNA does)</li>
+
<span style="font-weight:bold;">3. Modification Sites</span><br>
<li>Long Description (Longer description of what the DNA does)</li>
+
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>
<li>Design considerations</li>
+
<span style="font-weight:bold;">4. Conservation Level</span><br>
</ul>
+
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>
<p>
+
We encourage you to put up <em>much more</em> information as you gather it over the summer. If you have images, plots, characterization data and other information, please also put it up on the part page. </p>
+
 
+
 
</div>
 
</div>
  
 
+
<div class="mid" style="top:1220px;background-color:white;">
<div class="column half_size">
+
<a name='anchor2'></a>
 
+
<br><br><br>
<h5>Inspiration</h5>
+
<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>
<p>We have a created  a <a href="http://parts.igem.org/Well_Documented_Parts">collection of well documented parts</a> that can help you get started.</p>
+
<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;">  
 
+
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>
<p> You can also take a look at how other teams have documented their parts in their wiki:</p>
+
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.
<ul>
+
</p>
<li><a href="https://2014.igem.org/Team:MIT/Parts"> 2014 MIT </a></li>
+
<li><a href="https://2014.igem.org/Team:Heidelberg/Parts"> 2014 Heidelberg</a></li>
+
<li><a href="https://2014.igem.org/Team:Tokyo_Tech/Parts">2014 Tokyo Tech</a></li>
+
</ul>
+
 
</div>
 
</div>
  
<div class="column full_size">
+
<div class="mid" style="top:1680px;background-color:white;">
<h5>Part Table </h5>
+
<a name='anchor4'></a>
<div class="highlight">
+
<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>
 
+
<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>
</html>
+
<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>
<groupparts>iGEM2016 Example</groupparts>
+
<span style="font-weight:bold;font-size:20px;">Result for OVA protein</span><br><br><br>
<html>
+
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.
</div>
+
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>
 
</div>
 
</div>
  
Line 88: Line 356:
  
  
 +
</body>
 
</html>
 
</html>

Revision as of 10:39, 19 October 2016

Leijuvant




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.