Team:UCSD Software

From 2014.igem.org

(Difference between revisions)
 
(255 intermediate revisions not shown)
Line 1: Line 1:
-
{{CSS/Main}}
+
{{Team:UCSD Software/CSS}}
<html>
<html>
-
<h1>Project Description</h1>
+
<head>
-
<h3>Problem Statement</h3>
+
     
-
<p>
+
        <meta charset="UTF-8">
-
Synthetic genetic circuits created by synthetic biologists have yielded exciting applications such as biofuels production and cancer killing bacteria. These circuits are often difficult to engineer, requiring months to design, build, and test each individual genetic device involved in the circuit. Although there are many genetic devices that have been built, re-using these devices often requires a time-consuming review of the literature. The UCSD Software iGEM team will address this challenge by creating a web-tool that leverages existing genetic devices to create complex genetic circuits. We will accomplish this by:
+
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
</p>
+
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-
<ol>
+
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
-
<li>building a comprehensive database that captures the behavior, composition, and interactions of existing genetic devices in the literature</li>
+
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-
<li>constructing and visualizing the network of all synthetic genetic circuits that can interact with one another</li>
+
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-
<li>devising algorithms to search this network for the set of genetic devices that can be used to construct a complex genetic circuit.</li>
+
       
-
</ol>
+
    <Style>
-
<h3>Aim 1</h3>
+
#avant{
-
<p>
+
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
 +
}
 +
body{
 +
    background-color: #0174DF;
 +
   
 +
}
 +
* {
 +
  .border-radius(0) !important;
 +
}
 +
h2, h1 {
 +
border-bottom: 0px solid #57c4d0;
 +
}
-
</p>
+
#nav .btn{
 +
    //border-right: 2px solid grey;
 +
   
 +
   
 +
}
 +
p{
 +
color: black;
 +
}
-
<!--main content -->
 
-
<table width="70%" align="center">
 
-
<!--welcome box -->
+
#thumbnail-preview-indicators {
-
<tr>
+
  position: relative;
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
  margin-top: -20px;
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
  overflow: hidden;
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
}
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
+
#thumbnail-preview-indicators .slides .slide-1,  
-
<br>
+
#thumbnail-preview-indicators .slides .slide-2,
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:UCSD_Software&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
#thumbnail-preview-indicators .slides .slide-3 {
-
</td>
+
  background-size: cover;
-
</tr>
+
  background-position: center center;
 +
  background-repeat: no-repeat;
 +
 
 +
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
}
-
<!-- end welcome box -->
+
    #thumbnail-preview-indicators,
-
<tr>  
+
    #thumbnail-preview-indicators .slides,
 +
    #thumbnail-preview-indicators .slides .slide-1,
 +
    #thumbnail-preview-indicators .slides .slide-2,
 +
    #thumbnail-preview-indicators .slides .slide-3 {
 +
      height: 480px;
 +
    }
 +
#thumbnail-preview-indicators .slides .slide-1 {
 +
  background-image: url(http://www.desktopaper.com/wp-content/uploads/creative-lajolla-web.jpg);
 +
 
 +
}
 +
#thumbnail-preview-indicators .slides .slide-2 {
 +
    background-image: url(http://i.imgur.com/N40l0eb.png?1);
 +
}
 +
#thumbnail-preview-indicators .slides .slide-3 {
 +
  background-image: url(http://i.imgur.com/EfXmCOj.jpg?1);//(http://i.imgur.com/iokYtgR.jpg);
 +
}
 +
#thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
 +
  top: 20%;
 +
  bottom: inherit;
 +
}
 +
#thumbnail-preview-indicators .carousel-indicators li,
 +
#thumbnail-preview-indicators .carousel-indicators li.active {
 +
  position: relative;
 +
  width: 100px;
 +
  height: 8px; 
 +
}
 +
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
 +
  position: absolute;
 +
  top: 0;
 +
  width: 100px;
 +
  display: none;
 +
  opacity: 0;
 +
  left: 50%;
 +
  margin-top: -80px;
 +
  margin-left: -50px;
 +
}
 +
#thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail,
 +
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail {
 +
  display: block;
 +
  opacity: .8;
 +
}
 +
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover{
 +
  opacity: 1;
 +
}
 +
@media screen and (max-width : 480px) {   
 +
    #thumbnail-preview-indicators .carousel-indicators li,
 +
    #thumbnail-preview-indicators .carousel-indicators li.active {
 +
      width: 50px;
 +
      height: 8px;
 +
      position: relative;
 +
    }
 +
    #thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
 +
      width: 50px;
 +
      left: 50%;
 +
      margin-top: -50px;
 +
      margin-left: -25px;
 +
    }
 +
}
-
<!--navigation menu -->
+
/******************************DEFAULT WIKI SETTINGS CSS: CHANGING IT TO REFLECT OUR OWN PAGE********************
-
<td align="center" colspan="3">
+
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
******************************* THIS IS TO MAKE THE DISTINCTION CLEAR *******************************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************
 +
*******************************/
 +
.firstHeading {
 +
width: 975px;
 +
margin: 0px auto;
 +
padding-top: 100px;
 +
margin-bottom: 0px;
 +
font-family: Georgia, Times, "Times New Roman", serif;
 +
}
-
<table  width="100%">
+
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}
-
<tr heigth="15px"></tr>
+
-
<tr heigth="75px">
+
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
-
<a href="https://2014.igem.org/Team:UCSD_Software"style="color:#000000">Home </a> </td>
+
background-color: #003D99;//#383838;
 +
border: 0 none;
 +
height: 1px; // 46 px
 +
z-index: 100;
 +
top: 0;
 +
        color: #fff;
 +
        //display: none;
 +
position: static;
 +
width: 100%;//1000px;//2975px;
 +
left: 50%;
 +
margin-left: -480px;//-687px;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
-
<a href="https://2014.igem.org/Team:UCSD_Software/Team"style="color:#000000"> Team </a> </td>
+
background-color: #333;
 +
height: 1px; //DEFAULT 14 PX
 +
//display: none;//block;
 +
        color: #fff;
 +
z-index: 10;
 +
position: fixed;
 +
width: 100%;
 +
top: 0;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=UCSD_Software"style="color:#000000"> Official Team Profile </a></td>
 
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
 
-
<a href="https://2014.igem.org/Team:UCSD_Software/Project"style="color:#000000"> Project</a></td>
 
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
/*#top-section {
-
<a href="https://2014.igem.org/Team:UCSD_Software/Parts"style="color:#000000"> Parts</a></td>
+
background-color: #333;//#383838;
 +
border: 0 none;
 +
height: 46px; // DEFAULT 14 px
 +
z-index: 100;
 +
top: 0;
 +
        //display: none;
 +
position: fixed;
 +
width: 2975px;
 +
left: 50%;
 +
margin-left: -687px;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
#top-section-bar {
-
<a href="https://2014.igem.org/Team:UCSD_Software/Modeling"style="color:#000000"> Modeling</a></td>
+
background-color: #333;
 +
height: 1px; //DEFAULT 14 PX
 +
display: none;//block;
 +
       
 +
z-index: 10;
 +
position: fixed;
 +
width: 100%;
 +
top: 0;
 +
}*/
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
-
<a href="https://2014.igem.org/Team:UCSD_Software/Notebook"style="color:#000000"> Notebook</a></td>
+
color: #727272;
 +
text-decoration: none;
 +
background-color: transparent;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:UCSD_Software/Safety"style=" color:#000000"> Safety </a></td>
 
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:UCSD_Software/Attributions"style="color:#000000"> Attributions </a></td>
 
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
html, body, .wrapper { /*-- changes default wiki settings --*/
-
</tr>
+
width: 100%;
-
</table>
+
height: 100%;
 +
background-color: #003D99;//#5C8AE6;//#003D99;//transparent;
 +
}
-
<!--end navigation menu -->
+
#contentcontainer { /*-- creates container for all content on page --*/
-
</tr>
+
font-family: Arial, Helvetica, sans-serif;
 +
font-weight: normal;
 +
font-size: 14px;
 +
color: #414141;
 +
width: 960px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #transparent;
 +
margin-top: 0px;
 +
}
-
</tr>
+
</style>
-
+
 +
 
 +
 
 +
    </head>
 +
<body>
 +
<div style="background-color:#fff">
 +
<!--<div class="container-fluid" id="allHome">-->
 +
        <!--<div class = "nav nav-justified " role = "navigation">-->
 +
<!-- UNCOMMENT TO REMOVE FULL WIDTH NAV BAR <div class="container-fluid"> -->
 +
           
 +
            <!--navbar -->
 +
       
 +
            <!--<nav class="navbar  nav-justified" role="navigation" id='nav'>
 +
                <div class="btn-group  btn-group btn-group-justified">
 +
                <ul class="nav  navbar-nav" role="navigation" id='nav'>
 +
                    <li class = "active"><div class="btn btn-lg" id="home">Home</div></li>
 +
                    <li><div class="btn btn-lg" id="team">Team</div></li>
-
</td>
+
                    <li class="dropdown">
 +
              <div class="btn btn-lg dropdown-toggle" data-toggle="dropdown" id="project">Project <span class="caret"></span></div>
 +
              <ul class="dropdown-menu" role="menu">
 +
                <li id = "database"><a href = "#">Database</a></li>
 +
                <li id = "traversal"><a href = "#">Traversal algorithms</a></li>
 +
                <li id = "app"><a href = "#">Web application</a></li>
 +
                <li id = "parts"><a href = "#">Parts</a></li>
 +
                <li id = "modeling"><a href = "#">Modeling</a></li>
 +
              </ul>
 +
            </li>
 +
                   
 +
                   
 +
                    <li><div class="btn btn-lg" id="notebook">Notebook</div></li>
 +
                    <li><div class="btn btn-lg" id="safety">Safety</div></li>
 +
                    <li><div class="btn btn-lg" id="achieve">Software Achievements</div></li>
 +
                    <li><div class="btn btn-lg" id="attributions">Attributions</div></li>
 +
                    <li><div class="btn btn-lg" id="test">Tester</div></li>
 +
                    </ul>
 +
                   
 +
              </div>
 +
             
 +
               
 +
               
 +
        </nav>-->
 +
        <!-- FOR IMAGE! LOGOS IGEM & UCSD --><!--<nav class="navbar nav-justified" role="navigation" id='nav'>
 +
                <div class="btn-group  btn-group btn-group-justified" >
 +
                <div class="btn btn-lg " id="avant">UC San Diego</div>-->
 +
                <!--<font size = 4px>UC San Diego</font>-->
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
              <!--<div class="btn-group  btn-group btn-group-justified">
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
                <img src = "http://i.imgur.com/mGHw11P.png?1">
-
<tr> <td colspan="3" height="5px"> </td></tr>
+
              </div>
 +
                </div>
 +
          </nav>-->
 +
        <nav class="navbar nav-justified" role="navigation" id='nav'>
 +
                <div class="btn-group btn-group btn-group-justified">
 +
                    <div class="btn btn-lg " id="home">Home</div>
 +
                    <div class="btn btn-lg " id="team">Team</div>
 +
                    <div class="btn btn-lg " id="project">Project</div>
 +
                    <div class="btn btn-lg " id="doc">Documentation</div>
 +
                    <div class="btn btn-lg" id="notebook">Notebook</div>
 +
                    <div class="btn btn-lg" id="safety">Safety</div>
 +
                    <div class="btn btn-lg" id="attributions">Sponsors</div>
 +
                    <div class="btn btn-lg" id="achieve">Achievements</div>
 +
                    <div class="btn btn-lg" id="logo"><a href = "https://igem.org/Main_Page"><img src = "http://i.imgur.com/mGHw11P.png?1"></a></div>
 +
                   
 +
              </div>
 +
               
 +
            </nav>
 +
     
 +
        <!-- container fluid END </div> -->
 +
 +
<!--slider-->
 +
<div id="thumbnail-preview-indicators" class="carousel slide" data-ride="carousel">
 +
         
 +
          <!--<ol class="carousel-indicators">
 +
            <li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active">
 +
              <div class="thumbnail">
 +
                <img class="img-responsive" src="http://www.desktopaper.com/wp-content/uploads/creative-lajolla-web.jpg">
 +
              </div>
 +
            </li>
 +
            <li data-target="#thumbnail-preview-indicators" data-slide-to="1">
 +
            <div class="thumbnail">
 +
                <img class="img-responsive" src="http://i.imgur.com/iokYtgR.jpg">
 +
              </div>
 +
            </li>
 +
            <li data-target="#thumbnail-preview-indicators" data-slide-to="2">
 +
            <div class="thumbnail">
 +
                <img class="img-responsive" src="http://i.imgur.com/N40l0eb.png?1">
 +
              </div>
 +
            </li>
 +
          </ol>-->
 +
          <div class="carousel-inner">
 +
            <div class="item slides active">
 +
              <div class="slide-1"></div>
 +
              <div class="container">
 +
                <div class="carousel-caption">
 +
                  <h1><font color = "gold">UC San Diego Tritons</font></h1>
 +
                  <p><a class="btn btn-lg btn-primary" href="https://2014.igem.org/Team:UCSD_Software/Teaml" role="button">The Team</a></p>
 +
                </div>
 +
              </div>
 +
            </div>
-
<!--requirements section -->
+
            <div class="item slides">
-
<tr><td colspan="3"> <h3> Requirements </h3></td></tr>
+
              <div class="slide-2"></div>
-
<tr>
+
              <div class="container">
-
<td width="45%" valign="top">  
+
                <div class="carousel-caption">
 +
                  <h1><font color = "#000000">SBiDer</font></h1>
 +
                  <p><a class="btn btn-lg btn-primary" href="#" role="button">Take me to the app!</a></p>         
 +
                </div>
 +
              </div>
 +
            </div>
 +
            <div class="item slides">
 +
              <div class="slide-3"></div>
 +
              <div class="container">
 +
                <div class="carousel-caption">
 +
                  <br><br><h1><font color = "gold">The Notebook</font></h1>
 +
                  <p><a class="btn btn-lg btn-primary" href="https://2014.igem.org/Team:UCSD_Software/Notebook" role="button">View the Notebook</a></p>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <a class="left carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 +
          <a class="right carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 +
      </div>  
-
<p> Please be sure to keep these links, your audience will want to find your: </p>
 
-
<!-- Links to other team pages -->
 
-
<ul>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software">Home</a> </li>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software/Team">Team</a> </li>
 
-
<li><a href="https://igem.org/Team.cgi?year=2013&team_name=UCSD_Software">Official Team Profile</a> </li>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software/Project">Project</a> </li>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software/Parts">Parts</a> </li>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software/Modeling">Modeling</a> </li>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software/Notebook">Notebook</a> </li>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software/Safety">Safety</a> </li>
 
-
<li><a href="https://2014.igem.org/Team:UCSD_Software/Attributions">Attributions</a> </li>
 
-
</ul>
 
-
</td>
+
<!--slider end-->
 +
<!-- TUTORIAL & LAUNCH START -->
-
<td > </td>
+
<div class="row" id="extraInfo" style="background-color:#fff">
-
<td width="45%">
+
-
<p>There are a few wiki requirements teams must follow:</p>
+
          <div class="col-md-4" id="btmOne">
-
<ul>
+
              <div class="thumbnail text-center" id="thumbOne">
-
<li>All pages, images and files must be hosted on the <a href ="https://2014.igem.org/Special:Upload"> 2014.igem.org server</a>. </li>
+
                  <h1>Tutorial</h1>
-
<li>All pages must be created under the team’s name space.</li>
+
                  <span class="glyphicon glyphicon-question-sign"></span>
-
<li>As part of your documentation, keep the links from the menu to the left. </li>
+
                 
-
<li>Do not use flash in wiki code. </li>
+
               
-
<li>The <a href="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png"> iGEM logo </a> should be placed on the upper part of every page and should link to <a href="https://2014.igem.org/Main_Page">2014.igem.org</a>.</li>
+
              </div>
-
</ul>
+
              </div>
-
<p>Visit the <a href="https://2014.igem.org/Wiki_How-To"> Wiki How To page </a> for a complete list of requirements, tips and other useful information. </p>
+
               
 +
              <div class="col-md-4 ">
 +
           
 +
              <div class="thumbnail text-center" id="thumbTwo">
 +
                  <h1>Explore our Code</h1>
 +
                  <span class="glyphicon glyphicon-search"></span>
 +
                 
 +
              </div>
 +
              </div>
-
</td>
+
 
-
</tr>
+
              <div class="col-md-4">
 +
             
 +
              <div class="thumbnail text-center" id="thumbThree">
 +
                  <H1>Launch!</h1>
 +
                  <span class="glyphicon glyphicon-circle-arrow-right"></span>
 +
              </div>
 +
              </div>
 +
       
 +
            </div>
 +
         
 +
<!-- TUTORIAL & LAUNCH END -->
-
<tr> <td colspan="3"  height="15px"> </td></tr>
 
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1"> </tr>
 
 +
<div class = "neighborhood-guides">
 +
        <div class = "container">
 +
<!-- https://raw.githubusercontent.com/igemsoftware/UCSD-iGEM_2014/Valeriy/CircuitNetwork/web/ProfilePics/igemlogo.png -->
 +
<h1>SBiDer: Synthetic Biocircuit Developer <p class = "pull-right"><a href = "https://igem.org/About"><img src = "http://i.imgur.com/Ch9fpo8.png?1" height = 100px width = 100px></a></p></h1>
 +
<h3>Abstract</h3>
 +
<p>
 +
Genetic circuits are often difficult to engineer, requiring months to design, build, and test each individual genetic device involved in the circuit. SBiDer, a web tool developed by the UCSD Software iGEM team, will leverage existing devices to construct a database with consideration for the function of each device interpreted as boolean logic. The data can be queried by the user through SBiDer's visual interface to explore circuit designs. Users can search for existing circuits that can be used to assemble a complex circuit. The displayed circuit's literature reference, characterization data, and images of included devices can be viewed through the built-in table. We also provide a standalone modelling Python package that can be used to model circuits given by our online webtool. SBiDer's web of information can be expanded through user-generated additions to the database to improve the efficiency of the application and the accuracy of the models. <br>
 +
<p>
-
<!--tips  -->
+
<h1>Project Description</h1>
-
<tr><td colspan="3" > <h3> Tips </h3></td></tr>
+
<h3>Problem Statement</h3>
 +
<p>
 +
Synthetic genetic circuits created by synthetic biologists have yielded exciting applications such as biofuels production and cancer killing bacteria. These circuits are often difficult to engineer, requiring months to design, build, and test each individual genetic device involved in the circuit. Although there are many genetic devices that have been built, re-using these devices often requires a time-consuming review of the literature. The UCSD Software iGEM team will address this challenge by creating a web-tool that leverages existing genetic devices to create complex genetic circuits. We will accomplish this by:
 +
</p>
 +
<ol>
 +
<li>building a comprehensive database that captures the behavior, composition, and interactions of existing genetic devices in the literature</li>
 +
<li>constructing and visualizing the network of all synthetic genetic circuits that can interact with one another</li>
 +
<li>devising algorithms to search this network for the set of genetic devices that can be used to construct a complex genetic circuit.</li>
 +
<li>Perform some basic validation via kinetic modelling.</li>
 +
</ol>
 +
<h3>Aim 1 - Building a Database</h3>
 +
<p>
 +
We will mine the scientific literature for existing genetic devices and then construct a database that captures device characteristics such as:
 +
</p>
 +
<ol>
 +
<li>composition of devices</li>
 +
<li>function</li>
 +
<li>characterization data</li>
 +
<li>literature reference</li>
 +
</ol>
 +
We will design our database by rigorously constructing an entity relationship diagram and then normalizing these relationships to construct tables for a relational database.
 +
<h3>Aim 2 - Constructing Network of Interacting Devices</h3>
 +
<p>
 +
We will connect known genetic devices together via device input and outputs to create a network of devices that can interact. We define a genetic device as a DNA construct transformed into cells that can cause expression of some protein in response to stimuli (or input). We will develop a web interface to facilitate access to the complex network that we have constructed. Our Web interface makes extensive use of Cytoscape, an open source bioinformatics software package for metabolic network visualization and simulation.  In addition, the interface will generate SBOL Visual Images, a standard language that is easily understood by synthetic biologists all over the world.  Users can also update our database with additional devices through this interface.  Using the Cynetshare framework, users can share their circuit designs</p>
 +
<h3>Aim 3 - Searching the Network</h3>
 +
<p>
 +
This interface will allow researchers to query our database network for a circuit design expressed as logical operators such as “AND”, “OR”, and “NOR”, and retrieve the subnetwork of genetic devices that satisfies the circuit design. To Perform our search  we modified several traditional graph search algorithms to traverse this graph, including but not limited to Prim’s algorithm (minimum spanning tree), Dijkstra’s algorithm and a breadth-first search. Results are visualized graphically in our web interface.
 +
</p>
 +
</div>
 +
</div>
 +
</div>
 +
<script>
 +
$(document).ready(function(){
 +
    //redirecting to other pages
 +
    $('h1.firstHeading').remove();
 +
    $("#home").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software";
 +
    });
 +
   
 +
    $("#database").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Database";
 +
    }); 
-
<tr>
+
    $("#test").click(function(){
-
<td width="45%" valign="top">
+
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Test";
-
<p>We are currently working on providing teams with some easy to use design templates.
+
    });
-
<br> In the meantime you can also view other team wikis for inspiration! Here are some very good examples</p>
+
-
<ul>
+
    $("#thumbThree").click(function(){
-
<li> <a href="https://2013.igem.org/Team:SDU-Denmark/"> 2013 SDU Denmark </a> </li>
+
      window.location.href="http://glassome.ucsd.edu:8080/CircuitNetwork/";
-
<li> <a href="https://2013.igem.org/Team:SYSU-China">2013 SYSU China</a> </li>
+
    });
-
<li> <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG"> 2013 Shenxhen BGIG ATCG </a></li>
+
    $("#thumbTwo").click(function(){
-
<li> <a href="https://2013.igem.org/Team:Colombia_Uniandes">2013 Colombia Unianades </a></li>
+
      window.location.href=" https://github.com/igemsoftware/UCSD-iGEM_2014";
-
<li> <a href="https://2013.igem.org/Team:Lethbridge">2013 Lethbridge</a></li>
+
    });
-
</ul>
+
-
<p>For a full wiki list, you can visit <a href="https://igem.org/Team_Wikis?year=2013">iGEM 2013 web sites </a> and <a href="https://igem.org/Team_Wikis?year=2012">iGEM 2012 web sites</a>  lists. </p>
+
    $("#thumbOne").click(function(){
-
</td>
+
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Documentation";
 +
    });
 +
   
 +
    $("#database").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Database";
 +
    }); 
 +
 
 +
    $("#app").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/App";
 +
    }); 
-
<td> </td>
+
    $("#parts").click(function(){
-
<td width="45%">
+
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Parts";
 +
    }); 
-
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
    $("#modeling").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Modeling";
 +
    }); 
-
<ul>
+
    $("#doc").click(function(){
-
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Documentation";
-
<li>Be clear about what you are doing and what you plan to do.</li>
+
    });   
-
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
 
-
<li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li>
+
 
-
<li>Avoid using very small fonts and low contrast colors; information should be easy to read. </li>
+
    $("#traversal").click(function(){
-
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="">iGEM 2013 calendar</a> </li>
+
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Traversal";
-
<li>Have lots of fun! </li>
+
    });  
-
</ul>
+
   
-
</br>
+
    $("#team").click(function(){
-
</td>
+
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Teaml";
-
</tr>
+
    });
-
</table>
+
    $("#officialTeam").click(function(){
 +
      window.location.href="https://igem.org/Team.cgi?year=2013&team_name=UCSD_Software";
 +
    });
 +
    $("#project").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Project";
 +
    });
 +
   
 +
    $("#notebook").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Notebook";
 +
    });
 +
    $("#achieve").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/SoftwareAchievements";
 +
    });
 +
    $("#safety").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Safety";
 +
    });
 +
    $("#attributions").click(function(){
 +
      window.location.href="https://2014.igem.org/Team:UCSD_Software/Attributions";
 +
    });
 +
   
 +
    });
 +
</script>
 +
</body>
 +
</html>

Latest revision as of 03:05, 18 October 2014


Tutorial

Explore our Code

Launch!

SBiDer: Synthetic Biocircuit Developer

Abstract

Genetic circuits are often difficult to engineer, requiring months to design, build, and test each individual genetic device involved in the circuit. SBiDer, a web tool developed by the UCSD Software iGEM team, will leverage existing devices to construct a database with consideration for the function of each device interpreted as boolean logic. The data can be queried by the user through SBiDer's visual interface to explore circuit designs. Users can search for existing circuits that can be used to assemble a complex circuit. The displayed circuit's literature reference, characterization data, and images of included devices can be viewed through the built-in table. We also provide a standalone modelling Python package that can be used to model circuits given by our online webtool. SBiDer's web of information can be expanded through user-generated additions to the database to improve the efficiency of the application and the accuracy of the models.

Project Description

Problem Statement

Synthetic genetic circuits created by synthetic biologists have yielded exciting applications such as biofuels production and cancer killing bacteria. These circuits are often difficult to engineer, requiring months to design, build, and test each individual genetic device involved in the circuit. Although there are many genetic devices that have been built, re-using these devices often requires a time-consuming review of the literature. The UCSD Software iGEM team will address this challenge by creating a web-tool that leverages existing genetic devices to create complex genetic circuits. We will accomplish this by:

  1. building a comprehensive database that captures the behavior, composition, and interactions of existing genetic devices in the literature
  2. constructing and visualizing the network of all synthetic genetic circuits that can interact with one another
  3. devising algorithms to search this network for the set of genetic devices that can be used to construct a complex genetic circuit.
  4. Perform some basic validation via kinetic modelling.

Aim 1 - Building a Database

We will mine the scientific literature for existing genetic devices and then construct a database that captures device characteristics such as:

  1. composition of devices
  2. function
  3. characterization data
  4. literature reference
We will design our database by rigorously constructing an entity relationship diagram and then normalizing these relationships to construct tables for a relational database.

Aim 2 - Constructing Network of Interacting Devices

We will connect known genetic devices together via device input and outputs to create a network of devices that can interact. We define a genetic device as a DNA construct transformed into cells that can cause expression of some protein in response to stimuli (or input). We will develop a web interface to facilitate access to the complex network that we have constructed. Our Web interface makes extensive use of Cytoscape, an open source bioinformatics software package for metabolic network visualization and simulation. In addition, the interface will generate SBOL Visual Images, a standard language that is easily understood by synthetic biologists all over the world. Users can also update our database with additional devices through this interface. Using the Cynetshare framework, users can share their circuit designs

Aim 3 - Searching the Network

This interface will allow researchers to query our database network for a circuit design expressed as logical operators such as “AND”, “OR”, and “NOR”, and retrieve the subnetwork of genetic devices that satisfies the circuit design. To Perform our search we modified several traditional graph search algorithms to traverse this graph, including but not limited to Prim’s algorithm (minimum spanning tree), Dijkstra’s algorithm and a breadth-first search. Results are visualized graphically in our web interface.

Retrieved from "http://2014.igem.org/Team:UCSD_Software"