Team:UPO-Sevilla/Project/Epigenetic Flip Flop/Data Page

From 2011.igem.org

(Difference between revisions)
 
(26 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
 +
 +
<script type="text/javascript">
 +
            ddmenuactual = 1;
 +
            $("#menuPEpigenetic").addClass("TopMenuSelected");
 +
</script>
                     <div id="principal">
                     <div id="principal">
                         <div class="main">
                         <div class="main">
Line 17: Line 22:
                             <h1>Data Page</h1>
                             <h1>Data Page</h1>
 +
                           
 +
<style type="text/css">
 +
        .dataPage{width:700px; height:475px; background: url(https://static.igem.org/mediawiki/2011/d/d8/UPOSevillaEpigeneticFlipFlop.png);}
 +
              .tour_nmt41X{
 +
    border: 3px solid transparent;
 +
    bottom: -5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 31.5em;
 +
    position: relative;
 +
    width: 3.7em;}
 +
.tour_TetR{     
 +
    border: 3px solid transparent;
 +
    bottom: -5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 31.5em;
 +
    position: relative;
 +
    width: 2em;}
 +
.tour_nmt1{
 +
  border: 3px solid transparent;
 +
    bottom: -5em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: 30.5em;
 +
    position: relative;
 +
    width: 4em;}
 +
        .tour_Adh1{
 +
    border: 3px solid transparent;
 +
    bottom: -3em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -6em;
 +
    position: relative;
 +
    width: 6.5em;}
 +
  .tour_Operator{
 +
    border: 3px solid transparent;
 +
    bottom: 2em;
 +
    display: inline-block;
 +
    height: 1em;
 +
    position: relative;
 +
    right: 2.5em;
 +
    top: 3em;
 +
    width: 6.7em;}
 +
        .tour_urg1{        border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -15em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 4em;}
 +
.tour_GFP{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 1em;
 +
    left: -17.3em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 4.7em;}
 +
.tour_Act1{
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: -17.5em;
 +
    position: relative;
 +
    top: 3em;
 +
    width: 6.7em;}
 +
.tour_KAN{ 
 +
    border: 3px solid transparent;
 +
    display: inline-block;
 +
    height: 4em;
 +
    left: 5.5em;
 +
    position: relative;
 +
    top: -2em;
 +
    width: 4.7em;}
 +
</style>
 +
<div class="wrapper">
 +
<div class="content">
 +
 +
                            <div class="dataPage">
 +
                              <div class="tour_nmt41X"></div>
-
                            <div class="center">
+
                              <div class="tour_TetR"></div>
-
                                <img width="700px" src="https://static.igem.org/mediawiki/2011/d/d8/UPOSevillaEpigeneticFlipFlop.png" alt="Data Page Epigenetic Flip Flop"/>
+
 
-
                            </div>      
+
                              <div class="tour_nmt1"></div>
 +
 
 +
                              <div class="tour_Adh1"></div>
 +
 
 +
                              <div class="tour_Operator"></div>
 +
 
 +
                              <div class="tour_urg1"></div>
 +
 
 +
                              <div class="tour_GFP"></div>
 +
 
 +
      <div class="tour_Act1"></div>
 +
 
 +
      <div class="tour_KAN"></div>
 +
                </div>
 +
</div>
 +
 
 +
 
 +
                        <h2>Registry Parts</h2>
 +
 
 +
                        <ol>
 +
 
 +
                        <li><p><strong>urg1 promoter </strong>(Part: <a href="http://partsregistry.org/wiki/index.php?title=Part:BBa_K510032" target="_blank">BBa_K510032</a>): Uracil-regulable urg1 promoter that allows tight expression control of ectopic genes with otherwise minimal side effects on genome-wide gene expression. Transcription is activated after 5 minutes of uracil addition and peaks within 30 minutes. Similarly, transcription rapidly drops after transfer to medium without uracil. (<a href="http://www.plosone.org/article/info:doi/10.1371/journal.pone.0001428" target="_blank">Watt et al, 2008)</a></p></li>
 +
 
 +
                        <li><p><strong>T adh1-tetO2 </strong>(Part: <a href="http://partsregistry.org/wiki/index.php?title=Part:BBa_K510030" target="_blank">BBa_K510030</a>): It is composed of two parts. The first one is adh1 terminator, which functions as an insulator or boundary for transcription isolation. The second one is formed by two tetR operator sequences (tetO2), of 19 nucleotides each one, alternated with spacers. This composite part should be inserted just in front of a promoter, in order to control its regulations by generating a nucleated structure of heterochromatinic DNA, together with its associated part, tetO4-terminator. Compaction of DNA is due to binding of engineered silencing proteins (tetR+heterochromatin forming protein) to tetO sequences.</p></li>
 +
 
 +
                        <li><p><strong>GFP-Tadh1-tetO4-Tact1 </strong>(Part: <a href="http://partsregistry.org/wiki/index.php?title=Part:BBa_K510031" target="_blank">BBa_K510031</a>): This composite part is formed by four main elements: GFP, adh1 terminator, tetO4 and act1 terminator. Coding sequence of GFP reporter protein is followed by the transcriptional terminator of adh1 gene. The next part is denominated tetO4, that consist of four 19 nucleotices tetR operator sequences, alternated with spacers. And the last part is the Act1 transcriptional terminator that function as insulator. This part should be interted behind a promoter. In association with Tadh1-tetO2 part, it functions as a transcription regulator, by compacting intermediate sequence.</p></li>
 +
 
 +
                        <li><p><strong>TetR-CSD </strong>(Part: <a href="http://partsregistry.org/wiki/index.php?title=Part:BBa_K510033" target="_blank">BBa_K510033</a>): It is composed by tetracycline repressor and the chromoshadow domain of Swi6. TetR is responsible for binding to tetR operator sites, flanking reporter marker. CSD is a protein-protein interaction domain that contains a dimerization motif that creates a cleft, mediating compaction of reporter module. (<a href="http://www.cell.com/current-biology/abstract/S0960-9822%2800%2900467-X" target="_blank">Cowieson et al, 2000</a>; <a href="http://www.jbc.org/content/early/2011/01/11/jbc.M110.143198" target="_blank">Haldar et al, 2011</a>)</p></li>
 +
 
 +
                        <li><p><strong>Swi6, SP </strong>(Part: <a href="http://partsregistry.org/wiki/index.php?title=Part:BBa_K510035" target="_blank">BBa_K510035</a>): Critical protein for heterochromatin assembly in fission yeast, involved in stabilization of heterochromatin structure, because it contains a chromodomain (CD) and a chromoshadow domain (CSD). The property of Swi6 to form multimers is thought to cause folding of chromatin into a transcriptionally inactive structure.  (<a href="http://www.nature.com/emboj/journal/v28/n15/full/emboj2009185a.html" target="_blank">Bühler & Gasser, 2009</a>; <a href="http://www.cell.com/current-biology/abstract/S0960-9822%2800%2900467-X" target="_blank">Cowieson et al, 2000</a>; <a href="http://www.jbc.org/content/early/2011/01/11/jbc.M110.143198" target="_blank">Haldar et al, 2011</a>)</p></li>
 +
 
 +
                        </ol>
 +
 
 +
</div>
 +
 
 +
<!-- The JavaScript -->
 +
      <script src="https://2011.igem.org/Team:UPO-Sevilla/js/jqueryeasing.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
        <script type="text/javascript">
 +
$(function() {
 +
/*
 +
the json config obj.
 +
name: the class given to the element where you want the tooltip to appear
 +
bgcolor: the background color of the tooltip
 +
color: the color of the tooltip text
 +
text: the text inside the tooltip
 +
time: if automatic tour, then this is the time in ms for this step
 +
position: the position of the tip. Possible values are
 +
TL top left
 +
TR  top right
 +
BL  bottom left
 +
BR  bottom right
 +
LT  left top
 +
LB  left bottom
 +
RT  right top
 +
RB  right bottom
 +
T  top
 +
R  right
 +
B  bottom
 +
L  left
 +
*/
 +
var config = [
 +
{
 +
"name" : "tour_nmt41X",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"position" : "T",
 +
"text" : "nmt41X (no message in thiamine) promoter: Repressible promoter by thiamine.",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_TetR",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "TetR-SP (silencing protein). Composed of  tetracycline repressor and Swi6, this fusion protein is responsible for binding to tetO sequences, flanking reporter marker, and generating a nucleated structure of silencing proteins around  P urg1 promoter. ",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_nmt1",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "nmt1 Terminator. Transcription terminator of nmt1.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_Adh1",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "Adh1 Terminator. Transcription terminator of Adh1 gene.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_Operator",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"position" : "T",
 +
"text" : "Operator sites of tetR (tetO). The binding of  fusion silencing proteins to this site give rise to compaction of reporter module and silencing of urg1 promoter.",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_urg1",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "urg1 promoter. uracil-inducible urg1 promoter, that allows expression of reporter GFP . (Watt et al, 2008) ",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_GFP",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "GFP. Marker protein used to measure the efficiency of the designed system.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
{
 +
"name" : "tour_Act1",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "Act1 Terminator. Transcription terminator of  act1 gene.",
 +
"position" : "T",
 +
"time" : 5000
 +
},
 +
                    {
 +
"name" : "tour_KAN",
 +
"bgcolor" : "white",
 +
"color" : "black",
 +
"text" : "KAN. Marker cassette for selection after positive integration of reporter module in S. pombe genome.",
 +
"position" : "T",
 +
"time" : 5000
 +
}
 +
 
 +
],
 +
//define if steps should change automatically
 +
autoplay = false,
 +
//timeout for the step
 +
showtime,
 +
//current step of the tour
 +
step = 0,
 +
//total number of steps
 +
total_steps = config.length;
 +
 +
//show the tour controls
 +
showControls();
 +
 +
/*
 +
we can restart or stop the tour,
 +
and also navigate through the steps
 +
*/
 +
$('#activatetour').live('click',startTour);
 +
$('#canceltour').live('click',endTour);
 +
$('#endtour').live('click',endTour);
 +
$('#restarttour').live('click',restartTour);
 +
$('#nextstep').live('click',nextStep);
 +
$('#prevstep').live('click',prevStep);
 +
 +
function startTour(){
 +
$('#activatetour').remove();
 +
$('#endtour,#restarttour').show();
 +
if(!autoplay)
 +
                                          if(total_steps > 1)
 +
$('#nextstep').show();
 +
showOverlay();
 +
nextStep();
 +
}
 +
 +
function nextStep(){
 +
if(!autoplay){
 +
if(step > 0)
 +
$('#prevstep').show();
 +
else
 +
$('#prevstep').hide();
 +
if(step == total_steps-1)
 +
$('#nextstep').hide();
 +
else
 +
$('#nextstep').show();
 +
}
 +
if(step >= total_steps){
 +
//if last step then end tour
 +
endTour();
 +
return false;
 +
}
 +
++step;
 +
showTooltip();
 +
}
 +
 +
function prevStep(){
 +
if(!autoplay){
 +
if(step > 2)
 +
$('#prevstep').show();
 +
else
 +
$('#prevstep').hide();
 +
if(step == total_steps)
 +
$('#nextstep').show();
 +
}
 +
if(step <= 1)
 +
return false;
 +
--step;
 +
showTooltip();
 +
}
 +
 +
function endTour(){
 +
step = 0;
 +
if(autoplay) clearTimeout(showtime);
 +
removeTooltip();
 +
hideControls();
 +
hideOverlay();
 +
}
 +
 +
function restartTour(){
 +
step = 0;
 +
if(autoplay) clearTimeout(showtime);
 +
nextStep();
 +
}
 +
 +
function showTooltip(){
 +
//remove current tooltip
 +
removeTooltip();
 +
 +
var step_config = config[step-1];
 +
var $elem = $('.' + step_config.name);
 +
 +
if(autoplay)
 +
showtime = setTimeout(nextStep,step_config.time);
 +
 +
var bgcolor = step_config.bgcolor;
 +
var color = step_config.color;
 +
 +
var $tooltip = $('<div>',{
 +
id : 'tour_tooltip',
 +
className : 'tooltip',
 +
html : '<p>'+step_config.text+'</p><span class="tooltip_arrow"></span>'
 +
}).css({
 +
'display' : 'none',
 +
'background-color' : bgcolor,
 +
'color' : color
 +
});
 +
 +
//position the tooltip correctly:
 +
 +
//the css properties the tooltip should have
 +
var properties = {};
 +
 +
var tip_position = step_config.position;
 +
 +
//append the tooltip but hide it
 +
$('BODY').prepend($tooltip);
 +
 +
//get some info of the element
 +
var e_w = $elem.outerWidth();
 +
var e_h = $elem.outerHeight();
 +
var e_l = $elem.offset().left;
 +
var e_t = $elem.offset().top;
 +
 +
 +
switch(tip_position){
 +
case 'TL' :
 +
properties = {
 +
'left' : e_l,
 +
'top' : e_t + e_h + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_TL');
 +
break;
 +
case 'TR' :
 +
properties = {
 +
'left' : e_l + e_w - $tooltip.width() + 'px',
 +
'top' : e_t + e_h + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_TR');
 +
break;
 +
case 'BL' :
 +
properties = {
 +
'left' : e_l + 'px',
 +
'top' : e_t - $tooltip.height() + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_BL');
 +
break;
 +
case 'BR' :
 +
properties = {
 +
'left' : e_l + e_w - $tooltip.width() + 'px',
 +
'top' : e_t - $tooltip.height() + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_BR');
 +
break;
 +
case 'LT' :
 +
properties = {
 +
'left' : e_l + e_w + 'px',
 +
'top' : e_t + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_LT');
 +
break;
 +
case 'LB' :
 +
properties = {
 +
'left' : e_l + e_w + 'px',
 +
'top' : e_t + e_h - $tooltip.height() + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_LB');
 +
break;
 +
case 'RT' :
 +
properties = {
 +
'left' : e_l - $tooltip.width() + 'px',
 +
'top' : e_t + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_RT');
 +
break;
 +
case 'RB' :
 +
properties = {
 +
'left' : e_l - $tooltip.width() + 'px',
 +
'top' : e_t + e_h - $tooltip.height() + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_RB');
 +
break;
 +
case 'T' :
 +
properties = {
 +
'left' : e_l + e_w/2 - $tooltip.width()/2 + 'px',
 +
'top' : e_t + e_h + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_T');
 +
break;
 +
case 'R' :
 +
properties = {
 +
'left' : e_l - $tooltip.width() + 'px',
 +
'top' : e_t + e_h/2 - $tooltip.height()/2 + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_R');
 +
break;
 +
case 'B' :
 +
properties = {
 +
'left' : e_l + e_w/2 - $tooltip.width()/2 + 'px',
 +
'top' : e_t - $tooltip.height() + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_B');
 +
break;
 +
case 'L' :
 +
properties = {
 +
'left' : e_l + e_w  + 'px',
 +
'top' : e_t + e_h/2 - $tooltip.height()/2 + 'px'
 +
};
 +
$tooltip.find('span.tooltip_arrow').addClass('tooltip_arrow_L');
 +
break;
 +
}
 +
 +
 +
/*
 +
if the element is not in the viewport
 +
we scroll to it before displaying the tooltip
 +
*/
 +
var w_t = $(window).scrollTop();
 +
var w_b = $(window).scrollTop() + $(window).height();
 +
//get the boundaries of the element + tooltip
 +
var b_t = parseFloat(properties.top,10);
 +
 +
if(e_t < b_t)
 +
b_t = e_t;
 +
 +
var b_b = parseFloat(properties.top,10) + $tooltip.height();
 +
if((e_t + e_h) > b_b)
 +
b_b = e_t + e_h;
 +
 +
 +
if((b_t < w_t || b_t > w_b) || (b_b < w_t || b_b > w_b)){
 +
$('html, body').stop()
 +
.animate({scrollTop: b_t}, 500, 'easeInOutExpo', function(){
 +
//need to reset the timeout because of the animation delay
 +
if(autoplay){
 +
clearTimeout(showtime);
 +
showtime = setTimeout(nextStep,step_config.time);
 +
}
 +
//show the new tooltip
 +
$tooltip.css(properties).show();
 +
});
 +
}
 +
else
 +
//show the new tooltip
 +
$tooltip.css(properties).show();
 +
}
 +
 +
function removeTooltip(){
 +
$('#tour_tooltip').remove();
 +
}
 +
 +
function showControls(){
 +
/*
 +
we can restart or stop the tour,
 +
and also navigate through the steps
 +
*/
 +
var $tourcontrols  = '<div id="tourcontrols" class="tourcontrols">';
 +
$tourcontrols += '<p>Data Page. Step by Step</p>';
 +
$tourcontrols += '<span class="button" id="activatetour">Start the tour</span>';
 +
if(!autoplay){
 +
$tourcontrols += '<div class="nav"><span class="button" id="prevstep" style="display:none;">< Previous</span>';
 +
$tourcontrols += '<span class="button" id="nextstep" style="display:none;">Next ></span></div>';
 +
}
 +
$tourcontrols += '<a id="restarttour" style="display:none;">Restart the tour</span>';
 +
$tourcontrols += '<a id="endtour" style="display:none;">End the tour</a>';
 +
$tourcontrols += '<span class="close" id="canceltour"></span>';
 +
$tourcontrols += '</div>';
 +
 +
$('BODY').prepend($tourcontrols);
 +
$('#tourcontrols').animate({'right':'30px'},500);
 +
}
 +
 +
function hideControls(){
 +
$('#tourcontrols').remove();
 +
}
 +
 +
function showOverlay(){
 +
var $overlay = '<div id="tour_overlay" class="overlay"></div>';
 +
$('BODY').prepend($overlay);
 +
}
 +
 +
function hideOverlay(){
 +
$('#tour_overlay').remove();
 +
}
 +
 +
});
 +
        </script> 
Line 28: Line 532:
                         </div>
                         </div>
                         <div class="left">
                         <div class="left">
-
                               </html>{{:Team:UPO-Sevilla/leftTemplateProject}}<html>
+
                               </html>{{:Team:UPO-Sevilla/leftTemplateProjectEpigenetic}}<html>
 +
 
 +
                              <script type="text/javascript">
 +
                                          $("#menuVEDataPage").addClass("menuSelected");
 +
                              </script>
                         </div>
                         </div>
</html>
</html>
{{:Team:UPO-Sevilla/footTemplate}}
{{:Team:UPO-Sevilla/footTemplate}}

Latest revision as of 22:27, 27 October 2011

Grey iGEM Logo UPO icon

Data Page

Registry Parts

  1. urg1 promoter (Part: BBa_K510032): Uracil-regulable urg1 promoter that allows tight expression control of ectopic genes with otherwise minimal side effects on genome-wide gene expression. Transcription is activated after 5 minutes of uracil addition and peaks within 30 minutes. Similarly, transcription rapidly drops after transfer to medium without uracil. (Watt et al, 2008)

  2. T adh1-tetO2 (Part: BBa_K510030): It is composed of two parts. The first one is adh1 terminator, which functions as an insulator or boundary for transcription isolation. The second one is formed by two tetR operator sequences (tetO2), of 19 nucleotides each one, alternated with spacers. This composite part should be inserted just in front of a promoter, in order to control its regulations by generating a nucleated structure of heterochromatinic DNA, together with its associated part, tetO4-terminator. Compaction of DNA is due to binding of engineered silencing proteins (tetR+heterochromatin forming protein) to tetO sequences.

  3. GFP-Tadh1-tetO4-Tact1 (Part: BBa_K510031): This composite part is formed by four main elements: GFP, adh1 terminator, tetO4 and act1 terminator. Coding sequence of GFP reporter protein is followed by the transcriptional terminator of adh1 gene. The next part is denominated tetO4, that consist of four 19 nucleotices tetR operator sequences, alternated with spacers. And the last part is the Act1 transcriptional terminator that function as insulator. This part should be interted behind a promoter. In association with Tadh1-tetO2 part, it functions as a transcription regulator, by compacting intermediate sequence.

  4. TetR-CSD (Part: BBa_K510033): It is composed by tetracycline repressor and the chromoshadow domain of Swi6. TetR is responsible for binding to tetR operator sites, flanking reporter marker. CSD is a protein-protein interaction domain that contains a dimerization motif that creates a cleft, mediating compaction of reporter module. (Cowieson et al, 2000; Haldar et al, 2011)

  5. Swi6, SP (Part: BBa_K510035): Critical protein for heterochromatin assembly in fission yeast, involved in stabilization of heterochromatin structure, because it contains a chromodomain (CD) and a chromoshadow domain (CSD). The property of Swi6 to form multimers is thought to cause folding of chromatin into a transcriptionally inactive structure. (Bühler & Gasser, 2009; Cowieson et al, 2000; Haldar et al, 2011)

Retrieved from "http://2011.igem.org/Team:UPO-Sevilla/Project/Epigenetic_Flip_Flop/Data_Page"