Team:Wellesley Desyne/Eugenie

From 2013.igem.org

(Difference between revisions)
 
(45 intermediate revisions not shown)
Line 12: Line 12:
<!-- Title Area -->
<!-- Title Area -->
<li class="name">
<li class="name">
-
<h1><a href="#">WHCI</a></h1>
+
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1>
</li>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
Line 65: Line 65:
<div class="row">
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns">
-
<h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2>
+
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a>
</div>
</div>
</div>
</div>
Line 84: Line 84:
<h4>TOOL OVERVIEW</h4>
<h4>TOOL OVERVIEW</h4>
<br>
<br>
-
<p>Eugenie is a multi touch application which allows synthetic biologists to utilize the programming language Eugene without having to write Eugene code and to create biological circuits. The application consists of three representations of the circuit: “Treeview,” “FlowView,” and “EugeneView.” The user can search through the Clotho and iGEM databases to find the biological parts desired and can drag them to the workspace, edit behavior and properties, and view live-updating Eugene code for the circuit. After the user is finished creating a circuit, they can then view the search results which display the permutations of the circuit. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to reduce the number of results.</p>
+
<div style = "float:right; padding-bottom: 20px;"><img src="https://static.igem.org/mediawiki/2013/f/fc/Eugenie_logo_small.png" width="180"></div>
 +
<p>Eugenie is a multi-touch application for designing biological circuits using the programming language <a href="http://eugenecad.org/">Eugene</a>. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through <a href="http://clothocad.org/">Clotho</a> and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.</p>
</div>
</div>
<h4>Design</h4>
<h4>Design</h4>
-
 
+
The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or <a href="http://pigeoncad.org/">Pigeon</a> files in the ResultsView.
 +
<br><br>
<table width="900" align="center">
<table width="900" align="center">
<tr>
<tr>
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Create the structure of the circuit in the TreeView. </figcaption></div></td>
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/9b/Whci_Eugenie_treeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Create the structure of the circuit in the TreeView. </figcaption></div></td>
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Define rules for the interaction between parts in the BehaviorView.</figcaption></div></td>
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/3/3b/S3.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Define rules between parts in the FlowView.</figcaption></div></td>
</tr>
</tr>
<tr>
<tr>
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">View live-updating Eugene code in the CodeView.</figcaption></div></td>
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/9/93/Whci_Eugenie_codeview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">View live-updating Eugene code in the EugeneView.</figcaption></div></td>
-
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Generate and parse results in the ResultsView.</figcaption></div></td>
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_Eugenie_resultsview.jpg" width="400" height="250"><br><br><div style="width: 350px"><figcaption width="350">Generate and export results in the ResultsView.</figcaption></div></td>
</tr>
</tr>
Line 107: Line 109:
<h4> Implementation </h4>
<h4> Implementation </h4>
-
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the <a href="http://en.wikipedia.org/wiki/Model_View_ViewModel"> MVVM </a> framework and <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits.  
+
<p>We implemented Eugenie using C#, XAML and the Surface <a href="http://msdn.microsoft.com/en-us/library/ff727815.aspx"> SDK 2.0</a>. We also used the MVC framework, <a href = "http://www.eugenecad.org/"> Eugene </a> for the creation of synthetic biology circuits, and <a href="http://pigeoncad.org/">Pigeon</a> to display the circuits visually. </p>
<h4> Goals </h4>
<h4> Goals </h4>
 +
We had four goals in creating Eugenie:
<ul class="list_default">
<ul class="list_default">
-
<li>Implementing top-down design</li>
+
<li>Implementing top-down design<br>We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits&mdash;design that begins by specifying devices and then instantiating parts.</li>
-
<li>Enhancing sensemaking</li>
+
<li>Enhancing sensemaking<br>We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.</li>
-
<li>Supporting resource integration</li>
+
<li>Supporting resource integration<br>We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.</li>
-
<li>Fostering collaboration</li>
+
<li>Fostering collaboration<br> We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.</li>
</ul>
</ul>
Line 120: Line 123:
<div style = "float:right; width:"400px"; margin:"40px">
<div style = "float:right; width:"400px"; margin:"40px">
-
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><div style="width: 300px"><figcaption width="300"> Results showing users' positive experience with Eugenie. </figcaption></div></div>
+
<img src="https://static.igem.org/mediawiki/2013/8/8f/Eugenie_chart.png" width="300"><figcaption class="caption" width="300"> Results showing users' experience with Eugenie. </figcaption></div>
-
<p>We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, students were given a brief explanation of synthetic biology, Eugene, the visual language we had created and the Eugenie user interface, and our project goals, and were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. Then, participants were tasked with using our program to create one of the genetic devices they had translated. We asked participants to rate the ease of understanding the visual language and using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work.
+
<p>We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as with Wellesley College students; the majority of the 15 participants were biology or other science majors. Our study began with a brief introduction to the Eugene programming language, the visual language we had created, and the Eugenie user interface. Users were first tasked with interpreting genetic devices from our visual language and then translating SBOL representations of genetic devices into our visual language.  
-
</p>
+
 +
<p>We next asked participants to use Eugenie to specify one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved.
 +
 +
<p>The majority of users found it easier to create a device using Eugenie than to draw one by hand. Some participants also remarked that the multiple panels were helpful for understanding the device. Overall, users' response to Eugenie was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work.
 +
</p>
<h4>Demo</h4>
<h4>Demo</h4>
Line 131: Line 137:
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe>
<iframe float="center" width="640" height="360" src="//www.youtube.com/embed/EQoIXLh1SxI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
-
 
+
<br>
<h4>Future Work</h4>
<h4>Future Work</h4>
 +
 +
<div class="panel" style = "float:right; width:"400px"; margin:"40px">
 +
<img src="https://static.igem.org/mediawiki/2013/7/75/Whci_Eugenie_viz_language.jpg"><figcaption class="caption" width="300">Our visual language</figcaption></div>
<ul class="list_default">
<ul class="list_default">
     <li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li>
     <li>Supplement part information with additional information from previous iGEM projects and other synthetic biology databases</li>
     <li>Allow users to access more parts from other synthetic biology databases</li>
     <li>Allow users to access more parts from other synthetic biology databases</li>
     <li>Expedite the process for synthetic biologists to create genetic circuits</li>
     <li>Expedite the process for synthetic biologists to create genetic circuits</li>
 +
    <li>Further incorporate the visual language we created into Eugenie's interface</li>
 +
    <li>Develop a companion web application to enable widespread access to Eugenie</li>
</ul>
</ul>
-
<div class="row">
+
<div class="row">
<hr>
<hr>
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png">
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png">
Line 149: Line 160:
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script>
 
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script>
 
-
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script>
 
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
<script>
<script>

Latest revision as of 18:02, 27 September 2013

Wellesley HCI iGEM Team: Welcome

Eugenie

TOOL OVERVIEW


Eugenie is a multi-touch application for designing biological circuits using the programming language Eugene. The visual language we created for Eugenie allows synthetic biologists to harness the power of Eugene without having to write Eugene code. The application consists of three representations of the circuit: “TreeView,” “FlowView,” and “EugeneView.” The user can search through Clotho and iGEM databases to find the biological parts desired and can drag them to the workspace, graphically create Eugene rules, and view live-updating Eugene code for the circuit. After the user is done specifying a circuit, she or he can then view the search results, which display the possible permutations of a circuit based on a collection of parts. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to prune the results.

Design

The design process is divided into three main views: TreeView, FlowView, and EugeneView. A user starts by searching for parts from the Part Registry or their Clotho database and bringing them into their worskspace. In the TreeView, users can specify the order and structure of their design. The behavior of parts in the device is specified using the FlowView. Users specify structure and behavior using a visual language that we developed specifically for the application; the language utilizes SBOL symbols, an open-source standard for in silico representation of genetic designs. The EugeneView updates automatically throughout the design process, and users may click on individual parts in order to see the corresponding code highlighted in the EugeneView. Finally, users may view and export their results to a CSV or Pigeon files in the ResultsView.



Create the structure of the circuit in the TreeView.


Define rules between parts in the FlowView.


View live-updating Eugene code in the EugeneView.

Generate and export results in the ResultsView.

Implementation

We implemented Eugenie using C#, XAML and the Surface SDK 2.0. We also used the MVC framework, Eugene for the creation of synthetic biology circuits, and Pigeon to display the circuits visually.

Goals

We had four goals in creating Eugenie:
  • Implementing top-down design
    We utilized the functionality of Eugene, a programming language that is used to implement top-down design of novel genetic circuits—design that begins by specifying devices and then instantiating parts.
  • Enhancing sensemaking
    We implemented sliding panel views, which allow users the option to view multiple sets of information simultaneously or one set at a time, helping users understand the connection between the different types of presentation.
  • Supporting resource integration
    We give users the option to load parts from the parts registry, access parts in a Clotho database, or use a local database.
  • Fostering collaboration
    We used the Microsoft PixelSense, which allows multiple people to use Eugenie simultaneously.

Results

Results showing users' experience with Eugenie.

We conducted user studies of Eugenie with members of the BU and MIT iGEM teams as well as with Wellesley College students; the majority of the 15 participants were biology or other science majors. Our study began with a brief introduction to the Eugene programming language, the visual language we had created, and the Eugenie user interface. Users were first tasked with interpreting genetic devices from our visual language and then translating SBOL representations of genetic devices into our visual language.

We next asked participants to use Eugenie to specify one of the genetic devices they had translated. Post task, participants rated the ease of understanding the visual language and of using the program. We also asked participants for their feedback on how the program could be improved.

The majority of users found it easier to create a device using Eugenie than to draw one by hand. Some participants also remarked that the multiple panels were helpful for understanding the device. Overall, users' response to Eugenie was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work.

Demo


Future Work

Our visual language
  • Supplement part information with additional information from previous iGEM projects and other synthetic biology databases
  • Allow users to access more parts from other synthetic biology databases
  • Expedite the process for synthetic biologists to create genetic circuits
  • Further incorporate the visual language we created into Eugenie's interface
  • Develop a companion web application to enable widespread access to Eugenie

Retrieved from "http://2013.igem.org/Team:Wellesley_Desyne/Eugenie"