|
|
| Line 6: |
Line 6: |
| | <head> | | <head> |
| | <!--- Basic Page Needs========================================================================= --> | | <!--- Basic Page Needs========================================================================= --> |
| − | <meta charset="utf-8"> | + | <meta charset="utf-8"/> |
| − | <title>Overview</title>
| + | <title></title> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
| + | <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="description" content="Wiki of Peking iGEM 2016" /> |
| − | <meta name="author" content="Li Jiamian & Wang Yuqing">
| + | <meta name="author" content="Li Jiamian & Wang Yuqing"/> |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| − | <!-- Mobile Specific Metas===================================================================== -->
| + | <!-- Mobile Specific Metas===================================================================== --> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
| + | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> |
| − | <!-- Fix Overwrite the original iGEM style=================================================== -->
| + | <!-- Fix Overwrite the original iGEM style=================================================== --> |
| − | <link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" />
| + | <link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" /> |
| − | <!-- CSS======================================================================================= -->
| + | <!-- 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/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" />
| + | <link href="https://2016.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" /> |
| − | <!-- CSS======================================================================================= -->
| + | <!-- 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/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/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/media-queries?action=raw&ctype=text/css"/> |
| − | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/priorstyle?action=raw&ctype=text/css">
| + | <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/> |
| − | <style>
| + | <style> |
| − | .home_img{
| + | .texttitle{ |
| − | padding: 10px;
| + | color: #11abb0; |
| − | margin: 10px;
| + | font-size: 38px; |
| − | width: 420px;
| + | line-height: 48px; |
| − | float: left;
| + | margin-bottom: 12px; |
| − | height: 300px;
| + | font-family: raleway-bold, sans-serif !important; |
| − | }
| + | background: transparent; |
| − | .home_text{
| + | letter-spacing: 3px; |
| − | padding-top: 20px;
| + | text-transform: uppercase; |
| − | margin: 10px;
| + | font-weight: 350; |
| − | float: left;
| + | text-align: center; |
| − | height: 300px;
| + | padding-top:40px; |
| − | }
| + | } |
| − | .texttitle{
| + | sup{font-size:11px;} |
| − | color: #11abb0;
| + | .references{margin-top:150px;margin-bottom:40px;} |
| − | font-size: 38px;
| + | .references p{font-size:14px !important; color:#666161 !important;} |
| − | line-height: 48px;
| + | .classic-title {font-weight: 300;padding-top:30px;} |
| − | margin-bottom: 12px;
| + | .classic-title span { |
| − | font-family: raleway-bold, sans-serif;
| + | padding-bottom: 8px; |
| − | background: transparent;
| + | border-bottom: 1px solid #383232; |
| − | letter-spacing: 3px;
| + | font-weight: 400; |
| − | text-transform: uppercase;
| + | } |
| − | font-weight: 350;
| + | figure{margin-top:40px;margin-bottom:40px;height:auto;} |
| − | text-align: center;
| + | .anchor{padding-top:100px;margin-top:-100px;} |
| − | }
| + | </style> |
| − | sup{
| + | |
| − | font-size:11px;
| + | </head> |
| − | }
| + | |
| − | .references{margin-top:150px;margin-bottom:40px;}
| + | |
| − | .references p{font-size:14px !important; color:#666161 !important;}
| + | |
| − |
| + | |
| − | .classic-title {font-weight: 300;}
| + | |
| − | .classic-title span {
| + | |
| − | padding-bottom: 8px;
| + | |
| − | border-bottom: 1px solid #383232;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | figure{margin-top:40px;margin-bottom:40px;height:auto;}
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | </head>
| + | |
| − |
| + | |
| | <body> | | <body> |
| | + | <!--sidebar 引用==============================================================================--> |
| | + | <style> |
| | + | #primary span{ |
| | + | display:block; |
| | + | word-break:break-all |
| | + | } |
| | + | |
| | + | #page-wrap { |
| | + | width: 25%; |
| | + | margin: 0px; |
| | + | position: relative; |
| | + | } |
| | + | |
| | + | #sidebar { |
| | + | width: 25%; |
| | + | margin-left: 0px; |
| | + | } |
| | + | @media (min-width:1024px){ |
| | + | #sidebar{position:relative;top:120px;max-width:200px;}} |
| | + | @media (max-width: 1023px){ |
| | + | #sidebar{display:none; |
| | + | } |
| | + | #page-wrap{display:none;} |
| | + | } |
| | + | </style> |
| | + | |
| | + | |
| | + | <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'; |
| | + | } |
| | + | } |
| | + | </script> |
| | + | |
| | + | <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 --> | | <!-- Navigation --> |
| | <div id="navigation" class="navbar navbar-fixed-top"> | | <div id="navigation" class="navbar navbar-fixed-top"> |
| Line 75: |
Line 225: |
| | </a> | | </a> |
| | <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img | | <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img |
| − | src="https://static.igem.org/mediawiki/2018/e/e2/T--Peking--_toolbar.jpeg" width="45%"></a></div> | + | src="https://static.igem.org/mediawiki/2018/3/36/T--Peking--Logo.png"></a></div> |
| | | | |
| | <div class="nav-collapse collapse"> | | <div class="nav-collapse collapse"> |
| − | <ul class="nav"> | + | <ul class="nav"> |
| − | <li class=" dropdown menu-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >              Project</a> | + | |
| | + | <li class="menu-1"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking">Home</a> |
| | + | </li> |
| | + | |
| | + | <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Project</a> |
| | <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Project">Project</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Project" class="barfont1">Description</a></li> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Description" 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/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/Demonstrate" class="barfont1">Demonstration</a></li> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Future_Plan" class="barfont1">Future Plan</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Prospective" class="barfont1">Prospective</a></li> |
| | </ul> | | </ul> |
| | </li> | | </li> |
| − | <li class="dropdown menu- 2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" > Data Page</a> | + | <li class="dropdown menu- 3"><a class="dropdown-toggle" data-toggle="dropdown" href="#" > Modeling</a> |
| | <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Results">Data Page</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Model">Overview</a></li> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_D" class="barfont1">Phase Separation</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/Functions_D" class="barfont1">Functions</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Application" class="barfont1">Application</a></li> |
| | </ul> | | </ul> |
| | </li> | | </li> |
| − | <li class=" dropdown menu- 3"><a class=" dropdown- toggle" data-toggle="dropdown" href="#" >Model</a> | + | <li class="menu- 4"><a class=" colapse- menu1" href="https://2018.igem.org/Team:Peking/ Software"> Software</a> |
| − | <ul class="dropdown-menu">
| + | |
| − | <li><a href="https://2018.igem.org/Team:Peking/Model">Model</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_M" class="barfont1">Phase Separation</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Peking/Functions_M" class="barfont1">Functions</a></li>
| + | |
| − | </ul>
| + | |
| | </li> | | </li> |
| − | <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software" >Software</a>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown menu- 5"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Human Practices </a> | + | <li class="dropdown menu- 6"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices</a> |
| − | <ul class="dropdown-menu">
| + | |
| − | <li><a href="https://2018.igem.org/Team:Peking/Human_Practices/Gold" class="barfont1">Human Practices</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Peking/Public_Engagement" class="barfont1">Public Engagement</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown menu-6"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Team</a>
| + | |
| | <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Team_Members" class="barfont1">Team Members</a></li> | + | <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/Attributions" class="barfont1">Attributions</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/Safety" class="barfont1">Safety</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/Notebook" class="barfont1">Notebook</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Other" class="barfont1">Other</a></li> |
| | </ul> | | </ul> |
| | </li> | | </li> |
| − | <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Collaborations</a> | + | <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Achevement</a> |
| | <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</a></li> | + | <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/Acknowledgement" class="barfont1">Acknowledgement</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> | | <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li> |
| | + | |
| | </ul> | | </ul> |
| | </li> | | </li> |
| − | <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Parts</a> | + | <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Lab</a> |
| | <ul class="dropdown-menu"> | | <ul class="dropdown-menu"> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Parts">Parts</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Team_Members">Team Members</a></li> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Favorite_Parts" class="barfont1">Favorite Parts</a></li> | + | <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li> |
| − | <li><a href="https://2018.igem.org/Team:Peking/Part_Table" class="barfont1">Part Table</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/Part_Collection" class="barfont1">Part Collection</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> | | </ul> |
| | </li> | | </li> |
| Line 138: |
Line 283: |
| | </div> | | </div> |
| | <!--/Navigation --> | | <!--/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 class="content-outer"> | + | |
| − | <div id="page-content" class="row page"> | + | <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 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 formation</a></li> |
| | + | </ul> |
| | + | <h4><a href="javascript:void(0);" onclick="naver('C')">Functional 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"> |
| | | | |
| | + | <div class="coll"> |
| | + | |
| | + | <div class="content"> |
| | + | <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> |
| | + | </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> |
| | + | |
| | + | |
| | | | |
| | + | <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"> |
| | | | |
| − | Modelling part for wiki
| + | <div class="content"> |
| − | Simulation for phase separation
| + | <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> |
| − | Considering our project is mainly predicated on liquid-liquid phase separation, we simulated phase separation of a ternary mixture in silico for deeper understanding and approximate predictions of our experiments. To better demonstrate, we start with a binary mixture to see why and when will two components separate.
| + | </div> |
| | + | </div> |
| | + | |
| | + | <div class="coll"> |
| | | | |
| − | Generally, when intermolecular interaction is neglected (i.e. all molecules can be treated independently), two components tend to mix with each other where entropy reaches its maximum. Homogeneous mixed state remains stable in this case, for instance, water and alcohol mix at random ratio.
| + | <div class="content"> |
| | + | <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> |
| | + | </div> |
| | + | |
| | + | <div class="coll"> |
| | | | |
| − | fig1(left): mixed binary mixture, rounds with different colors denote different molecules
| + | <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> |
| − | fig1(right): demixed binary mixture, one component forms a dense liquid droplet
| + | |
| | | | |
| − | Things might get a little different when interaction among molecules are considered. Under the conditions of constant temperature, volume and particle numbers, the system is at equilibrium when the Helmholtz free energy F is the lowest. Based on regular solution model, the free energy density f takes the following form in the unit of k_B T[1]:
| |
| − | f=ϕ lnϕ+(1-ϕ) ln(1-ϕ)++χϕ(1-ϕ)+λ/2 |∇ϕ|^2, (1)
| |
| − | where ϕ is the volume fraction of one component (let us say component A), χ is a parameter characterizing the strength of intermolecular interactions and λ is related to the surface tension between interfaces. The volume fraction of A is defined as the volume of A molecules divided by the total volume of the system. In a binary system, the volume fraction of the other component, let us say component B, becomes naturally 1-ϕ.
| |
| − | First let’s focus on the symmetric part of f , i.e f_0=ϕ lnϕ+(1-ϕ) ln(1-ϕ)+χϕ(1-ϕ), and see how its shape changes as we vary χ. When A and B attract, χ is less than 0; on the contrary, when A and B repulse, χ is greater than 0. Easily seen from fig2, when χ<2, f_0 only has one minimum; when χ>2, f_0 has two minima and one maximum. A bifurcation takes place when χ=2 and essentially alters the feature of free energy density.
| |
| − |
| |
| − | fig2: plot of symmetric part of free energy density under various χ
| |
| | | | |
| − | For better illustration, we scrutinize two typical cases, χ=0 and χ=4. Fig3 shows the free energy density for mixed state in blue solid line and demixed state in green dotted line. Obviously seen from fig3, when χ=0, for any initial concentration represented by ϕ_0, it always requires extra free energy for the system to demix into any two separate states ϕ_1 and ϕ_2, where the green dotted line is higher than any point on the blue solid line between ϕ_1 and ϕ_2; when χ=4, there exists a range of ϕ_0 to separate into two demixed compositions ϕ_1 and ϕ_2, where the green dotted line is lower than any point on the blue solid line between ϕ_1 and ϕ_2. This is the situation where phase separation could happen spontaneously.
| + | <div class="coll"> |
| | + | <div class="info"> |
| | + | <a id="B2"></a> |
| | + | <div class="ordi">2.</div> |
| | + | </div> |
| | + | <div class="content"> |
| | + | <h3>The formation of organelles has flexible but predictable properties and kinetics in different conditions</h3> |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | <div class="coll"> |
| | | | |
| − |
| + | <div class="content"> |
| − | fig3: The blue solid line and the green dotted line represent the free energy density for mixed state and demixed state respectively. (A)χ=0. The green dotted line is always higher than the blue solid line, indicating an extra energy for separation; (B)χ=4. The green dotted line is below the blue solid line, making spontaneous phase separation possible.
| + | <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"> |
| | | | |
| − | To be more precious, we can specify the conditions where separation could happen. According to fundamental work on liquid-liquid phase separation, when d^2 f/dϕ^2<0, any local perturbation will result in spontaneous separation, such a formation is named spinodal decomposition; when d^2 f/dϕ^2>0 and between the two minima, only sufficiently large global perturbation can make phase separation happen, such an approach is called nucleation; and their boundary is named spinodal line. Now, if the free energy density function is symmetric, when ϕ lies outside the two minima, phase separation cannot happen. The boundary between whether phase separation can take place or not is called binodal line.
| + | <div class="content"> |
| | + | <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/> |
| | | | |
| − | Based on the criteria above, we plot the phase diagram of a binary mixture. In fig4, we represent the initial concentration by ϕ in the x-axis and vary χ in the y-axis. The region confined by spinodal line is the unstable region, for separation can take place under any local perturbation. In contrast, the region between the binodal line and the spinodal line is the metastable region, where only sufficiently large global perturbation can initiate separation.
| + | </div> |
| − |
| + | <div class="coll"> |
| − | fig4: Binary phase diagram. Binodal line shows the boundary between whether phase can separate or not. Spinidal line shows the boundary between two different formations: spinodal decomposition and nucleation. The area confined by spinodal line is the unstable region while the area between bimodal line and spinodal line is the metastable region.
| + | |
| | | | |
| − | As aforementioned, our system is a ternary mixture system consisting of two multivalent proteins and water, which is a bit more complicated. To capture the basic feature of three-component phase separation, we use a similar theoretical model for simulation. The free energy density f is now written in the unit of k_B T as:
| + | <div class="content"> |
| − | f=ϕ_1 ln〖ϕ_1 〗+ϕ_2 ln〖ϕ_2 〗+ϕ_3 ln〖ϕ_3 〗+χ_(1-2) ϕ_1 ϕ_2+χ_(1-3) ϕ_1 ϕ_3+χ_(2-3) ϕ_2 ϕ_3+λ_1/2 |∇ϕ_1 |^2+λ_2/2 |∇ϕ_2 |^2+λ_3/2 |∇ϕ_3 |^2,
| + | <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> |
| − | where ϕ_1 denotes the first multivalent protein (FKBP for example), ϕ_2 denotes the second multivalent protein (Frb for example) and ϕ_3 denotes water. An intrinsic relation of the three is given by:
| + | </div> |
| − | ϕ_1+ϕ_2+ϕ_3=1
| + | </div> |
| − | Phenomenologically speaking, ϕ_1 and ϕ_2 condensate together and separate from ϕ_3. For computational convenience, χ_(1-2) and χ_(1-3) are taken value above 2 and χ_(2-3) below 2. A ternary phase diagram is calculated in a similar way by determining whether ϕ_1 and ϕ_3 separate and whether ϕ_2 and ϕ_3 separate. The results are shown in fig5.
| + | <div class="coll"> |
| − |
| + | <br/> |
| − | fig5: Ternary phase diagrams. (A)χ_(1-2)=0; χ_(1-3)=8; χ_(2-3)=3; (B) χ_(1-2)=0; χ_(1-3)=8; χ_(2-3)=4.
| + | 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/> |
| | | | |
| − | The phase diagram only provides a rough approximation on where phase separation can happen, it is insufficient to predict what happens after the separation. Hence, we further recur to the continuum model first proposed by Cahn and Hilliard to simulate a dynamic process.
| + | </div> |
| − | ∂c/∂t=∇⋅(M∇μ)
| + | <div class="coll"> |
| − | μ=df/dc-λ∇^2 c
| + | |
| − | We use finite element method in a 100×100 mesh and select Neumann boundary condition to solve the partial differential equations above. Crank-Nicolson method is used for time-stepping with a footstep of 2.0×〖10〗^(-3). The initial composition is given by adding a perturbation of strength 〖10〗^(-2) to a homogenous sate. A typical result is given as followed:
| + | |
| − |
| + | |
| − | fig6: Simulation for dynamic evolution of phase separation under χ_(1-2)=0, χ_(1-3)=3, χ_(2-3)=4. (A) The concentration distribution of ϕ_1; (B) The centration of ϕ_1 on the sampled red dotted line in (A). （wiki上用gif）
| + | |
| | | | |
| − | We further adjust the interaction strength between two proteins, thus affecting both χ_(1-3) and χ_(2-3). As χ increases, indicating a stronger interaction, the time for phase separation to occur is decreased, which is in accordance with our experimental results. | + | <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> |
| | | | |
| − |
| + | |
| − | fig7: Simulation for phase separation under different interaction strengths. The stronger the interaction, the faster separation emerges.
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | References:
| + | |
| − | [1] Joel Berry el.al (2018). Physical principles of intracellular organization via active and passive phase transitions
| + | |
| | | | |
| | + | <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/> |
| | | | |
| | + | </div> |
| | + | |
| | | | |
| − | | + | <div class="texttitle">Perspective |
| − | | + | <a id="D"></a></div> |
| − | </div> <!-- page-content End-->
| + | <hr style="border:2px dashed; height:2px" color="#666666"> |
| − | </div> <!-- Content End-->
| + | <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--> |
| | | | |
| | | | |
| Line 241: |
Line 517: |
| | <ul class="copyright"> | | <ul class="copyright"> |
| | <!--<li>© 2014 Sparrow</li> --> | | <!--<li>© 2014 Sparrow</li> --> |
| − | <li><a href="2018.igem.org/Team:Peking">Home</a> <a href="mailto:pkuigem2016@126.com">Contact</a></li> | + | <li><a href=" https://2018.igem.org/Team:Peking">Home</a> <a href="mailto: indigomad@ pku.edu. cn">Contact</a></li> |
| | <span> ©2018 PEKING IGEM. All Rights Reserved.</span> | | <span> ©2018 PEKING IGEM. All Rights Reserved.</span> |
| | <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li> | | <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li> |
| Line 275: |
Line 551: |
| | <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/scripts?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--> | | <!--quotations from black: end--> |
| − |
| |
| − |
| |
| | </body> | | </body> |
| | </html> | | </html> |
（这里可能需要一张cartoon的设计图）
b, c fluorescence images of spontaneous organelles (SUMO-SIM based) and inducible synthetic organelles (FKBP-Frb based, after adding 10000 nM rapamycin)