Difference between revisions of "Team:Peking/Human Practices"

Line 1: Line 1:
−
<html>
+
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
−
 
+
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
−
<head>
+
<!--[if (gte IE 8)|!(IE)]><!-->
−
<style>
+
<html class="no-js" lang="en">
−
             #home_logo, #sideMenu {
+
    <!--<![endif]-->
−
             display: none;
+
    <head>
 +
        <!--- Basic Page Needs========================================================================= -->
 +
        <meta charset="utf-8"/>
 +
        <title></title>
 +
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
 +
        <meta name="description" content="Wiki of Peking iGEM 2016" />
 +
        <meta name="author" content="Li Jiamian & Wang Yuqing"/>
 +
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
        <!-- Mobile Specific Metas===================================================================== -->
 +
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
 +
        <!-- Fix  Overwrite the original iGEM style=================================================== -->
 +
        <link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" />
 +
        <!-- CSS======================================================================================= -->
 +
        <link href="https://2016.igem.org/Template:Peking/css/bootstrap_min?action=raw&ctype=text/css" rel="stylesheet" />
 +
        <link href="https://2016.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" />
 +
        <!-- CSS======================================================================================= -->
 +
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/default?action=raw&ctype=text/css"/>
 +
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/layout?action=raw&ctype=text/css"/>
 +
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css"/>
 +
        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
 +
        <style>
 +
             .texttitle{
 +
                color: #11abb0;
 +
                font-size: 38px;
 +
                line-height: 48px;
 +
                margin-bottom: 12px;
 +
                font-family: raleway-bold, sans-serif !important;
 +
                background: transparent;
 +
                letter-spacing: 3px;
 +
                text-transform: uppercase;
 +
                font-weight: 350;
 +
                text-align: center;
 +
                padding-top:40px;
 +
            }
 +
        sup{font-size:11px;}
 +
        .references{margin-top:150px;margin-bottom:40px;}
 +
        .references p{font-size:14px !important; color:#666161 !important;}
 +
        .classic-title {font-weight: 300;padding-top:30px;}
 +
        .classic-title span {
 +
            padding-bottom: 8px;
 +
            border-bottom: 1px solid #383232;
 +
             font-weight: 400;
 
         }
 
         }
−
 
+
        figure{margin-top:40px;margin-bottom:40px;height:auto;}
−
         #sideMenu, #top_title, .patrollink {
+
         .anchor{padding-top:100px;margin-top:-100px;}
−
             display: none;
+
             </style>
 +
       
 +
    </head>
 +
    <body>
 +
        <!--sidebar 引用==============================================================================-->
 +
        <style>
 +
            #primary span{
 +
                display:block;
 +
                word-break:break-all
 +
            }
 +
       
 +
        #page-wrap {
 +
            width: 25%;
 +
            margin: 0px;
 +
            position: relative;
 
         }
 
         }
−
 
+
       
−
         #content {
+
         #sidebar {
−
             width: 100%;
+
             width: 25%;
−
            padding: 0px;
+
−
            margin-top: 0px;
+
 
             margin-left: 0px;
 
             margin-left: 0px;
−
            margin-right: 0px;
 
 
         }
 
         }
−
 
+
         @media (min-width:1024px){
−
         body {
+
             #sidebar{position:relative;top:120px;max-width:200px;}}
−
             background-color: #FAFAFA;
+
         @media (max-width: 1023px){
−
         !important;
+
            #sidebar{display:none;
 +
            }
 +
            #page-wrap{display:none;}
 
         }
 
         }
−
 
+
        </style>
−
         #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
          
−
             margin-bottom: 0px;
+
       
 +
        <script type="text/javascript">
 +
            function menuFixed(id){
 +
                var obj = document.getElementById(id);
 +
                var _getHeight = obj.offsetTop;
 +
               
 +
                window.onscroll = function(){
 +
                    changePos(id,_getHeight);
 +
                }
 +
            }
 +
        function changePos(id,height){
 +
            var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
            if(w>=1024){
 +
                if($(window).scrollTop() + $(window).height() > $(document).height() - 230){
 +
                    $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");}
 +
             }
 +
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop -230;
 +
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
            var w = window.innerWidth;
 +
           
 +
            if(scrollTop < height){ obj.style.position = 'relative';
 +
            }else{
 +
                obj.style.position = 'fixed';
 +
            }
 
         }
 
         }
−
a:link {
+
        </script>
−
                        text-decoration: none;
+
       
−
                    }
+
        <script type="text/javascript">
 +
            window.onload = function(){
 +
                menuFixed('sidebar');
 +
            }
 +
        </script>
 +
        <script>
 +
            function naver(id){
 +
                var obj=document.getElementById(id);
 +
                var oPos=obj.offsetTop;
 +
                return window.scrollTo(0,oPos+250);
 +
            }
 +
        </script>
 +
        <!--sidebar 引用 end ==============================================================================-->
 +
        <!--panel 引用==================================================================================-->
 +
        <style type="text/css">
 +
            .panel-default .panel-heading a{
 +
                text-decoration: none;
 +
                display:block;
 +
                padding:10px;
 +
            }
 +
        .panel-heading.panel-title{
 +
            text-decoration: none;
 +
            padding-top:0px;
 +
            padding-bottom:0px;
 +
            padding-left:0px;
 +
            padding-right:0px;
 +
            text-align:center;
 +
            font-size:19px;
 +
           
 +
        }
 +
        a[aria-expanded="true"] {
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 +
       
 +
        .panel-default .panel-heading a[aria-expanded="false"]{
 +
            -o-transition: background-color 1s linear;
 +
            -moz-transition: background-color 1s linear;
 +
            -khtml-transition: background-color 1s linear;
 +
            -webkit-transition: background-color 1s linear;
 +
            -ms-transition: background-color 1s linear;
 +
            transition: background-color 1s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="false"]:hover{
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]{
 +
            -o-transition: opacity 1s linear;
 +
            -moz-transition: opacity 1s linear;
 +
            -khtml-transition: opacity 1s linear;
 +
            -webkit-transition: opacity 1s linear;
 +
            -ms-transition: opacity 1s linear;
 +
            transition: opacity 0.7s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]:hover{
 +
            opacity:0.7;
 +
        }
 +
       
 +
        .coll p a{
 +
            color:#5c9085 !important;
 +
        }
 +
        .coll p a:hover{
 +
            color:#11abb0 !important;
 +
        }
 +
        .coll {
 +
            width:100%;
 +
            float:left;
 +
        }
 +
        .coll .info {
 +
            width:6%;
 +
            font-size:11px;
 +
            color:#a4a4a4;
 +
            margin-top:0px;
 +
            float:left;
 +
           
 +
        }
 +
        .coll .content {
 +
            width:94%;
 +
            float:left;
 +
            margin-left:40px;
 +
            margin-top:-3px;
 +
        }
 +
        .coll .ordi {
 +
            width;100%;
 +
            margin:0px 0px 0px 0px;
 +
            font-size:35px;
 +
            font-style:italic;
 +
            float:left;
 +
            color:#11abb0;
 +
            opacity:0.8;
 +
        }
 +
       
 +
            </style>
 +
       
 +
        <script type="text/javascript">
 +
            $(document).ready(function(){
 +
                              $("#button1").click(function(){
 +
                                                  $(".panel-collapse").collapse("show");
 +
                                                  });
 +
                              });
 +
                              $(document).ready(function(){
 +
                                                $("#button2").click(function(){
 +
                                                                    $(".panel-collapse").collapse("hide");
 +
                                                                    });
 +
                                                });
 +
                                                $("#notebook").addClass("navbar-active");
 +
            </script>
 +
        <!--panel 引用 end ==================-->
 +
       
 +
          <!-- Navigation -->
 +
        <div id="navigation" class="navbar navbar-fixed-top">
 +
            <div class="navbar-inner ">
 +
                <div class="container no-padding">
 +
                    <a class="show-menu" data-toggle="collapse" data-target=".nav-collapse"><span class="show-menu-bar"></span>
 +
                    </a>
 +
                    <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img
 +
                    src="https://static.igem.org/mediawiki/2018/3/36/T--Peking--Logo.png"></a></div>
 +
                 
 +
                    <div class="nav-collapse collapse">
 +
                        <ul class="nav">                         
  
−
                    a:visited {
+
                            <li class="menu-1"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking">Home</a>
−
                        text-decoration: none;
+
                            </li>
−
                    }
+
  
−
                    a:active {
+
                            <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Project</a>
−
                        text-decoration: none;
+
                                <ul class="dropdown-menu">
−
                    }
+
                                    <li><a href="https://2018.igem.org/Team:Peking/Project" class="barfont1">Description</a></li>
 +
                                    <li><a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a></li>
 +
                                    <li><a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a></li>
 +
                                    <li><a href="https://2018.igem.org/Team:Peking/Prospective" class="barfont1">Prospective</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Modeling</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li><a href="https://2018.igem.org/Team:Peking/Model">Overview</a></li>
 +
                                    <li><a href="https://2018.igem.org/Team:Peking/SPOT_Formation" class="barfont1">SPOT Formation</a></li>
 +
                                    <li><a href="https://2018.igem.org/Team:Peking/Application" class="barfont1">Application</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software">Software</a>
 +
                            </li>
  
−
                    a:hover {
 
−
                    }
 
−
.dropbtn {
 
−
    background-color: #4CAF50;
 
−
    color: white;
 
−
    padding: 16px;
 
−
    font-size: 16px;
 
−
    border: none;
 
−
    cursor: pointer;
 
−
}
 
  
−
.dropdown {
+
                                <li class="dropdown menu-6"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices</a>
−
    position: relative;
+
                                    <ul class="dropdown-menu">
−
    display: inline-block;
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Human_Practices" class="barfont1">Overview</a></li>
−
}
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Statistics" class="barfont1">Statistics</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Public_Engagement" class="barfont1">Public Engagement</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Other" class="barfont1">Other</a></li>
 +
                                    </ul>
 +
                                </li>
 +
                                <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Achevement</a>
 +
                                    <ul class="dropdown-menu">
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Judging_Form" class="barfont1">Judging Form</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Parts" class="barfont1">Parts</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Improve" class="barfont1">Improvement</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li>
  
−
.dropdown-content {
+
                                    </ul>
−
    display: none;
+
                                </li>
−
    position: absolute;
+
                                <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Lab</a>
−
    background-color: #f9f9f9;
+
                                    <ul class="dropdown-menu">
−
    min-width: 140px;
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Team_Members">Team Members</a></li>
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li>
−
}
+
                                        <li><a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Safety" class="barfont1">Safety</a></li>
 +
                                    </ul>
 +
                                </li>
 +
                                </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <!--/Navigation -->
 +
       
 +
       
 +
        <!-- Page Title======================================================================== -->
 +
        <div id="page-title">
 +
            <div class="row">
 +
                <div class="twelve columns centered text-center">
 +
                    <h1>Demonstrate</h1>
 +
                    <p class="title1" style="text-align:center">In this section, you could see the demonstration.</p>
 +
                </div>
 +
            </div>
 +
        </div><!-- Page Title End-->
 +
       
 +
       
 +
        <div id="page-content" class="row page">
 +
            <div id="primary" class="twelve columns">
 +
                <section>
 +
                    <div class="row">
 +
                       
 +
                       
 +
                       
 +
                       
 +
                        <div class="three columns">
 +
                            <div id="page-wrap">
 +
                                <div id="sidebar" style="color:#000000">
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('A')">Overview</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('B')">Phase&nbsp;Separation</a></h4>
 +
                                    <ul>
 +
                                        <li><a href="javascript:void(0);" onclick="naver('B1')">Spontaneous</a></li>
 +
                                        <li><a href="javascript:void(0);" onclick="naver('B2')">The&nbsp;formation</a></li>
 +
                                    </ul>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('C')">Functional&nbsp;Organelles</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('D')">Perspective</a></h4>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                       
 +
                       
 +
                       
 +
                       
 +
                        <div class="nine columns">
 +
                           
 +
                            <div class="texttitle">Overview
 +
<a id="A"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
−
.dropdown-content a {
+
                            <div class="coll">
−
    color: black;
+
                               
−
    padding: 12px 16px;
+
                                <div class="content">
−
    text-decoration: none;
+
                                    <p>The aim of our project is to build a synthetic organelle based on phase separation as a multifunctional platform. Based on the principle of multivalence and interaction, we fused interactional modules into homo-oligomeric tags (HOtags) to form granules in S. cerevisiae.</p>
−
    display: block;
+
                                </div>
−
}
+
                            </div>
 +
                            <div class="coll">
 +
                               
 +
                                <div class="content">
 +
                                    <p>We have built spontaneous and induced synthetic organelles by specific interaction modules, so that we can control the formation process by different ways for demands in biological engineering. Then we characterized the kinetics and properties of synthetic organelles theoretically and experimentally. These results confirm the potential of synthetic organelles in synthetic biology.</p>
 +
                                </div>
 +
                            </div>
 +
<div class="coll">
 +
                               
 +
                                <div class="content">
 +
                                    <p>It inspired us to propose some specific applications of our synthetic organelles, including organization hub, sensor, and metabolism regulator. We have verified the feasibility of them by loading GFP-nanobody module, NAD+ sensor module and carotene production module to the whole system.</p>
 +
                                </div>
 +
                            </div>
 +
<div class="coll">
 +
                               
 +
                                <div class="content">
 +
                                    <p>We believe that our work has reached the medal requirements of demonstration as we have confirmed that our synthetic organelles can be formed in vivo and deliver a range of functions both for engineering and research due to their amazing properties. The concrete demonstration of the whole platform is shown below. You can see more details of experiments and modeling in our <a href="https://2018.igem.org/Team:Peking/Results"/>Data Page</a> and <a href="https://2018.igem.org/Team:Peking/Model"/>Modeling</a></p><br/><br/><br/>     
 +
                                </div>
 +
                            </div>
 +
         
 +
                   
  
−
.dropdown-content a:hover {background-color: #f1f1f1}
+
<div class="texttitle">Phase Separation System
 +
<a id="B"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
 +
                            <div class="coll">
 +
                                <div class="info">
 +
<a id="B1"></a>
 +
                                    <div class="ordi">1.</div>
 +
                                </div>
 +
                                <div class="content">
 +
                                    <h3>Spontaneous and induced synthetic organelles can be formed by phase separation</h3>
 +
                                </div>
 +
                            </div>
 +
                           
 +
                            <div class="coll">
  
−
.dropdown:hover .dropdown-content {
+
                                <div class="content">
−
    display: block;
+
                                    <p>Our basic system consists of two components of synthetic organelles. Either of them has a specific HOtag to form homo-oligomers. We expect that they are able to form synthetic organelles due to the principles of phase separation. To verify the feasibility of the design, we fused two fluorescence proteins with the two components of synthetic organelles (Figure1.a) so that we can observe the self-organization of components and the formation of granules under fluorescence microscope.</p>
−
}
+
                                </div>
 +
                            </div>
 +
                           
 +
                            <div class="coll">
  
−
.dropdown:hover .dropbtn {
+
                                <div class="content">
−
    background-color: #3e8e41;
+
                                    <p>We used SUMO-SIM interaction module to build a spontaneous organelle. When two components are expressed in yeasts, granules with the two fluorescence proteins can be observed in vivo (Figure1.b). </p>
−
} 
+
                                </div>
−
u{ text-decoration:none}
+
                            </div>
−
a{ text-decoration:none}
+
                           
 +
                            <div class="coll">
  
 +
                                <div class="content">
 +
                                    <p>Meanwhile, by rapamycin induced interaction module, FKBP-Frb, we have built an inducible organelle. We can see granules occurs in yeasts within minutes after adding the inducer.</a> </p>
 +
                                </div>
 +
Figure1.a The basic design of synthetic organelles with florescence reporters. <img src="https://static.igem.org/mediawiki/2018/3/36/T--Peking--Logo.png" style="width:100%;" alt="">（这里可能需要一张cartoon的设计图）
 +
            b, c fluorescence images of spontaneous organelles (SUMO-SIM based) and inducible synthetic organelles (FKBP-Frb based, after adding 10000 nM rapamycin)<br/><br/>
  
 +
                            </div>
  
  
−
/*Major body*/
+
                            <div class="coll">
−
#MajorBody{position:absolute; top:24px; left:0px; width:1200px; height:1200px; background-color:#ffffff;}
+
                                <div class="info">
−
#LeftNavigation{position:fixed; top:80px; float:left; width:200px; height:100%; background-color:#313131; z-index:1050;}
+
<a id="B2"></a>
−
#Content{position:absolute; left:200px;}
+
                                    <div class="ordi">2.</div>
−
#ProjectList{position:absolute; top:40px; left:0px; color:#ffffff; font-family: calibri, arial, helvetica, sans-serif;}
+
                                </div>
−
#ProjectList > li {display:block; list-style-type:none; width:180px; height:30px; font-size:20px; text-align:left; background-color:transparent;}
+
                                <div class="content">
−
.Left>a {color:#ffffff; text-decoration:none;}
+
                                    <h3>The formation of organelles has flexible but predictable properties and kinetics in different conditions</h3>
−
.Left:hover >a{color:#999999;}
+
                                </div>
 +
                            </div>
 +
                           
 +
                            <div class="coll">
  
 +
                                <div class="content">
 +
                                    <p>Then we combined <a href="https://2018.igem.org/Team:Peking/Phase_Separation_M"/>modeling of phase separation</a> and experiment to research the kinetics of the organelles formation process expecting that a well-characterized system can reach its whole potential in complex applications. </p>
 +
                                </div>
 +
                            </div>
 +
                           
 +
                            <div class="coll">
  
−
/*end of Major body*/
+
                                <div class="content">
−
#AcknowledgementBox{ position:absolute; left:0px; top:590px; width:1200px;display:none;}
+
                                    <p>As the model predicts, the concentration of components and the interaction strength affect the kinetics of phase separation. First we controlled the expression levels of components by using several stable or inducible promoters and observe the system's behavior. We found that the formation of organelles happened in specific promoter combinations and can be controlled by inducible promoters. The analysis result does not only fit well with the simulation, but provides potential methods to control the organelles in applications. </p>
 +
                                </div>
 +
                            </div>
 +
                           
 +
                            <div class="coll">
 +
<br/>
 +
Figure2 (a) Phase diagram of a phase separation system with three components(simulation). To fit our system, the x-axis and the y-axis stands for the two components in the granules. The asymmetry comes from the assumption that the two components have different interactions with water.
 +
(b) Fluorescence movies of different promoter combinations of FKBP-Frb mediated system after adding rapamycin. Only in specific combinations, synthetic organelles can be formed by phase separation.
 +
(c) The formation process of SUMO-SIM mediated synthetic organelles can be controlled by inducible promoters. While the expression of Tet07-SIM-mCherry-HoTag6 is induced by dox gradually, the granules will occur abruptly in some time.<br/><br/>
  
 +
                            </div>
 +
                            <div class="coll">
  
 +
                                <div class="content">
 +
                                    <p>The strength of interaction modules can be also controlled. In the rapamycin-induced organelle system, changing the concentration of rapamycin will affect the apparent value of K, a parameter reflecting the interaction strength in our model. In a gradient rapamycin-inducing experiment, the delay time from adding inducer to granules formation was found to be shorter when concentration of rapamycin increases. So we have confirmed the influence of two parameters in models and increased the flexibility of our synthetic organelles.</p>
 +
                                </div>
 +
                            </div>
 +
                            <div class="coll">
 +
<br/>
 +
Figure3 (a) A simulation of organelle formation process in different interaction strength of components.
 +
(b) The speed of FKBP-Frb mediated organelle formation increases with the increasing concentration of rapamycin.
 +
<br/><br/>
  
 +
                            </div>                           
 +
                            <div class="coll">
  
 +
                                <div class="content">
 +
                                    <p>We also tried to characterized other properties, like the liquid-like property of the synthetic organelles, as they may affect the functions. See more details about our characterizations in <a href="https://2018.igem.org/Team:Peking/Phase_Separation_D"/>DataPage Phase separation</a>.</p><br/><br/><br/>
 +
                                </div>
 +
                            </div>
  
 +
                       
 +
                           
  
−
    </style>
+
                            <div class="texttitle">Functional Organelles
 +
<a id="C"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
 +
                            <div class="coll">
 +
                                <div class="content">
 +
                                    <p>Since SPOT can form in the cell and be controlled, we go further to consider the functions of SPOT. The functions of SPOT can be descripted in three catalogs: Spatial segmentation, Sensor and metabolic regulation. We verified the spatial segmentation with the condensation of substrates, also we can load the protein we want by fusing it with nanobody. We then verified the sensor with detecting rapamycin and ABA, which shows strong relativity between the concentration and the proportion of yeasts with SPOT. To find the law behind metabolism in the SPOT, we fuse the enzymes that can produce β-carotene into SPOT and measure the difference between with or without SPOT in produce of β-carotene.</p>
 +
                                </div>
 +
                            </div>
 +
                                                       
 +
                            <div class="coll">
 +
Figure4 (organization hub)
 +
Design of GFP-nanobody based system
 +
fluorescence images of GFP-nanobody based system
 +
Figure5 (sensor)
 +
(a)~(?) fluorescence images of sensor based system
 +
Figure6 (metabolism)
 +
Characterization of carotene production system
 +
（phase内和phase外的胡萝卜素生产实验）<br/><br/><br/><br/><br/>
  
−
    <link rel="stylesheet" type="text/css"
+
                            </div>
−
          href="https://2018.igem.org/Template:Peking/css/menubar?action=raw&ctype=text/css">
+
                           
−
    <link rel="stylesheet" type="text/css"
+
−
          href="https://2018.igem.org/Template:Peking/css/main?action=raw&ctype=text/css">
+
−
 
+
−
 
+
−
 
+
−
</head>
+
−
 
+
−
<body>
+
−
 
+
−
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
−
    <header class="mdl-layout__header" style="position:fixed; margin-top: -9px; !important;">
+
−
        <div class="mdl-layout__header-row">
+
−
            <!-- Title -->
+
−
            <a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking"
+
−
              style="color: #000000; font-size: x-large"><strong>Peking iGEM 2018</strong></a>
+
−
            <a href="https://2018.igem.org/Team:Peking"><img
+
−
                    src="https://static.igem.org/mediawiki/2018/e/e2/T--Peking--_toolbar.jpeg" height="50"></a>
+
−
            <!-- Add spacer, to align navigation to the right -->
+
−
            <div class="mdl-layout-spacer"></div>
+
−
            <!-- Navigation. We hide it in small screens. -->
+
−
            <nav class="mdl-navigation mdl-layout--large-screen-only">
+
−
 
+
−
    <a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking"
+
−
    style="color: #000; font-weight: 500;"><b>Home</b></a>
+
−
        <div class="dropdown">
+
−
            <a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Project">Project</a></span>
+
−
                <div class="dropdown-content">
+
−
                    <a href="https://2018.igem.org/Team:Peking/Description" class="barfont1">Description</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Future_Plan" class="barfont1">Future Plan</a>
+
−
                </div></div>
+
−
        <div class="dropdown">
+
−
            <span><a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Results">Data Page</a></span>
+
−
                <div class="dropdown-content">
+
−
                    <a href="https://2018.igem.org/Team:Peking/Phase_Separation_D" class="barfont1">Phase Separation</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Functions_D" class="barfont1">Functions</a>
+
−
                </div></div>
+
−
        <div class="dropdown">
+
−
            <span><a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Model">Model</a></span>
+
−
                <div class="dropdown-content">
+
−
                    <a href="https://2018.igem.org/Team:Peking/Phase_Separation_M" class="barfont1">Phase Separation</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Functions_M" class="barfont1">Functions</a>
+
−
                </div></div>
+
−
        <div class="dropdown">
+
−
            <span><a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Software">Software</a></span></div>
+
−
        <div class="dropdown">
+
−
            <span><a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Human_Practices">Human Practices</a></span>
+
−
                <div class="dropdown-content">
+
−
                    <a href="https://2018.igem.org/Team:Peking/Human_Practices/Gold" class="barfont1">Human Practices</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Public_Engagement" class="barfont1">Public Engagement</a>
+
−
                </div></div>
+
−
        <div class="dropdown">
+
−
            <span><a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Team">Team</a></span>
+
−
                <div class="dropdown-content">
+
−
                    <a href="https://2018.igem.org/Team:Peking/Team_Members" class="barfont1">Team Members</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Safety" class="barfont1">Safety</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</a>
+
−
                </div></div>
+
−
        <div class="dropdown">
+
−
            <span><a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Collaborations">Collaborations</a></span>
+
−
                <div class="dropdown-content">
+
−
                    <a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Acknowledgement" class="barfont1">Acknowledgement</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a>
+
−
                </div></div>
+
−
                <div class="dropdown">
+
−
            <span><a class="mdl-navigation__link" href="https://2018.igem.org/Team:Peking/Parts">Parts</a></span>
+
−
                <div class="dropdown-content">
+
−
                    <a href="https://2018.igem.org/Team:Peking/Favorite_Parts" class="barfont1">Favorite Parts</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Part_Table" class="barfont1">Part Table</a>
+
−
                    <a href="https://2018.igem.org/Team:Peking/Part_Collection" class="barfont1">Part Collection</a>
+
−
                </div></div>
+
−
            <span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</span></div>
+
−
            </nav>
+
−
        </div>
+
−
    </header>
+
−
 
+
−
</div>
+
−
 
+
−
<!--MajorBody-->
+
−
<div id="MajorBody"> 
+
−
    <div id="LeftNavigation">
+
−
          <ul id="ProjectList">
+
−
                <li class="Left"><a href="https://2018.igem.org/Team:Peking/Human_Practices"><b>Human Practices</b></a></li><br/><br/>
+
−
                <li class="Left"><a href="https://2018.igem.org/Team:Peking/HumanPractices">&#9674;&#160;&#160;&#160;Human Practices</a><li>
+
−
                <li class="Left"><a href="https://2018.igem.org/Team:Peking/Public_Engagement">&#9674;&#160;&#160;&#160;Public Engagement</a><li>
+
−
                </ul>
+
−
    </div>
+
−
   
+
−
 
+
−
<div class="two_thirds_size" >
+
−
<p>Welcome to our wiki!</p>
+
−
 
+
−
</div>
+
−
<div id="Content">
+
−
Human Practices
+
−
</div>
+
−
</div>
+
−
 
+
−
</body>
+
  
 +
                            <div class="texttitle">Perspective
 +
<a id="D"></a></div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
 +
                            <div class="coll">
 +
                                <div class="content">
 +
                                    <p>SPOT has been well verified and has various functions. And in the future, this modular system will have great potential in science and practice using. SPOT can change the modules to gain more different properties like diverse inducing method, we can also use it as a platform and then load other protein with some interactions like the interaction between nanobody and GFP. What’s more, we might have the ability to form differernt SPOTs in the cell and regulate them respectively. The functions of SPOT can also diverse. We can build a real time sensor for molecule in living cells to monitoring the concentration changing in environment or in cells. More metabolism pathway can be test in SPOT and we will find some laws of the function of regulate the metabolism. To be summary, more achievement is coming true with SPOT.</p>
 +
                                </div>
 +
                            </div>                           
 +
                           
 +
                        </div><!--9 columns end-->
 +
                       
 +
                    </div>
 +
                   
 +
                   
 +
                   
 +
                   
 +
                    </div><!--row end-->
 +
            </section>
 +
        </div><!--12 columes end-->
 +
        </div><!--page-content end-->
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
        <!-- footer============================================================================== -->
 +
        <style>
 +
            footer .copyright span:before {
 +
                content: "|";
 +
                padding-left: 10px;
 +
                padding-right: 12px;
 +
                color: #b4bbbb;
 +
            }
 +
        footer .copyright span:after {
 +
            content: "|";
 +
            padding-left: 10px;
 +
            padding-right: 12px;
 +
            color: #b4bbbb;
 +
        }
 +
        </style>
 +
        <footer id="page-footer">
 +
            <div class="row">
 +
                <div class="twelve columns" >
 +
                    <ul class="copyright">
 +
                        <!--<li>&copy; 2014 Sparrow</li> -->
 +
                        <li><a href="https://2018.igem.org/Team:Peking">Home</a>&nbsp;&nbsp;&nbsp;<a href="mailto:indigomad@pku.edu.cn">Contact</a></li>
 +
                        <span> &copy;2018 PEKING IGEM. All Rights Reserved.</span>
 +
                        <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li>
 +
                    </ul>
 +
                </div>
 +
                <div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
 +
            </div>
 +
        </footer> <!-- Footer End-->
 +
       
 +
       
 +
        <!-- Java Script======================================================================= -->
 +
        <script>window.jQuery || document.write('<script src="https://2016.igem.org/Template:Peking/Javascript/jquery_1_10_2_min?action=raw&ctype=text/javascript"><\/script>')</script>
 +
        <script type="text/javascript" src="https://2016.igem.org/Template:Peking/Javascript/jquery_migrate_1_2_1_min?action=raw&ctype=text/javascript"></script>
 +
       
 +
        <script src="https://2016.igem.org/Template:Peking/Javascript/jquery_flexslider?action=raw&ctype=text/javascript"></script>
 +
        <script src="https://2016.igem.org/Template:Peking/Javascript/doubleaptogo?action=raw&ctype=text/javascript"></script>
 +
        <script src="https://2016.igem.org/Template:Peking/Javascript/init?action=raw&ctype=text/javascript"></script>
 +
       
 +
       
 +
        <!--quotations from black: start-->
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_sticky?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_easing_1_3_pack?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/bootstrap_min?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_patallax_1_1_3?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/appear?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/modernizr?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_prettyPhoto?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/isotope?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_bxslider_min?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_cycle_all?action=raw&ctype=text/javascript" ></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_maximage?action=raw&ctype=text/javascript"></script>
 +
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/scripts?action=raw&ctype=text/javascript "></script>
 +
        <!--quotations from black: end-->
 +
    </body>
 
</html>
 
</html>

Revision as of 13:48, 14 October 2018

Demonstrate

In this section, you could see the demonstration.

Overview

The aim of our project is to build a synthetic organelle based on phase separation as a multifunctional platform. Based on the principle of multivalence and interaction, we fused interactional modules into homo-oligomeric tags (HOtags) to form granules in S. cerevisiae.

We have built spontaneous and induced synthetic organelles by specific interaction modules, so that we can control the formation process by different ways for demands in biological engineering. Then we characterized the kinetics and properties of synthetic organelles theoretically and experimentally. These results confirm the potential of synthetic organelles in synthetic biology.

It inspired us to propose some specific applications of our synthetic organelles, including organization hub, sensor, and metabolism regulator. We have verified the feasibility of them by loading GFP-nanobody module, NAD+ sensor module and carotene production module to the whole system.

We believe that our work has reached the medal requirements of demonstration as we have confirmed that our synthetic organelles can be formed in vivo and deliver a range of functions both for engineering and research due to their amazing properties. The concrete demonstration of the whole platform is shown below. You can see more details of experiments and modeling in our Data Page and Modeling




Phase Separation System
1.

Spontaneous and induced synthetic organelles can be formed by phase separation

Our basic system consists of two components of synthetic organelles. Either of them has a specific HOtag to form homo-oligomers. We expect that they are able to form synthetic organelles due to the principles of phase separation. To verify the feasibility of the design, we fused two fluorescence proteins with the two components of synthetic organelles (Figure1.a) so that we can observe the self-organization of components and the formation of granules under fluorescence microscope.

We used SUMO-SIM interaction module to build a spontaneous organelle. When two components are expressed in yeasts, granules with the two fluorescence proteins can be observed in vivo (Figure1.b).

Meanwhile, by rapamycin induced interaction module, FKBP-Frb, we have built an inducible organelle. We can see granules occurs in yeasts within minutes after adding the inducer.

Figure1.a The basic design of synthetic organelles with florescence reporters. （这里可能需要一张cartoon的设计图） b, c fluorescence images of spontaneous organelles (SUMO-SIM based) and inducible synthetic organelles (FKBP-Frb based, after adding 10000 nM rapamycin)

2.

The formation of organelles has flexible but predictable properties and kinetics in different conditions

Then we combined modeling of phase separation and experiment to research the kinetics of the organelles formation process expecting that a well-characterized system can reach its whole potential in complex applications.

As the model predicts, the concentration of components and the interaction strength affect the kinetics of phase separation. First we controlled the expression levels of components by using several stable or inducible promoters and observe the system's behavior. We found that the formation of organelles happened in specific promoter combinations and can be controlled by inducible promoters. The analysis result does not only fit well with the simulation, but provides potential methods to control the organelles in applications.


Figure2 (a) Phase diagram of a phase separation system with three components(simulation). To fit our system, the x-axis and the y-axis stands for the two components in the granules. The asymmetry comes from the assumption that the two components have different interactions with water. (b) Fluorescence movies of different promoter combinations of FKBP-Frb mediated system after adding rapamycin. Only in specific combinations, synthetic organelles can be formed by phase separation. (c) The formation process of SUMO-SIM mediated synthetic organelles can be controlled by inducible promoters. While the expression of Tet07-SIM-mCherry-HoTag6 is induced by dox gradually, the granules will occur abruptly in some time.

The strength of interaction modules can be also controlled. In the rapamycin-induced organelle system, changing the concentration of rapamycin will affect the apparent value of K, a parameter reflecting the interaction strength in our model. In a gradient rapamycin-inducing experiment, the delay time from adding inducer to granules formation was found to be shorter when concentration of rapamycin increases. So we have confirmed the influence of two parameters in models and increased the flexibility of our synthetic organelles.


Figure3 (a) A simulation of organelle formation process in different interaction strength of components. (b) The speed of FKBP-Frb mediated organelle formation increases with the increasing concentration of rapamycin.

We also tried to characterized other properties, like the liquid-like property of the synthetic organelles, as they may affect the functions. See more details about our characterizations in DataPage Phase separation.




Functional Organelles

Since SPOT can form in the cell and be controlled, we go further to consider the functions of SPOT. The functions of SPOT can be descripted in three catalogs: Spatial segmentation, Sensor and metabolic regulation. We verified the spatial segmentation with the condensation of substrates, also we can load the protein we want by fusing it with nanobody. We then verified the sensor with detecting rapamycin and ABA, which shows strong relativity between the concentration and the proportion of yeasts with SPOT. To find the law behind metabolism in the SPOT, we fuse the enzymes that can produce β-carotene into SPOT and measure the difference between with or without SPOT in produce of β-carotene.

Figure4 (organization hub) Design of GFP-nanobody based system fluorescence images of GFP-nanobody based system Figure5 (sensor) (a)~(?) fluorescence images of sensor based system Figure6 (metabolism) Characterization of carotene production system （phase内和phase外的胡萝卜素生产实验）




Perspective

SPOT has been well verified and has various functions. And in the future, this modular system will have great potential in science and practice using. SPOT can change the modules to gain more different properties like diverse inducing method, we can also use it as a platform and then load other protein with some interactions like the interaction between nanobody and GFP. What’s more, we might have the ability to form differernt SPOTs in the cell and regulate them respectively. The functions of SPOT can also diverse. We can build a real time sensor for molecule in living cells to monitoring the concentration changing in environment or in cells. More metabolism pathway can be test in SPOT and we will find some laws of the function of regulate the metabolism. To be summary, more achievement is coming true with SPOT.