Team:HFUT-China/Design

HFUT-China | Design

User Interface Design

Before we designed the UI of the Biodesigner, we had to consider who will use our product. certainly, the user of the BioDesigner is who engage in synthetic biology work like designing biology devices. But it is a trouble that we have no idea for the thought of them. So we tried to contact other teams of iGEM and talked with them about requirement of this new tool. Then, we understood that they previous habit of synthetic biology work is consulting many document. That is troublesome and uncertain. They need a powerful platform to get clear and wide information. So BioDesigner is aimed to private lots of information and have a friendly interaction, and focus on overcoming any trouble in user experience.

To make sure that user can have a suitable interaction as their expectation, there are five interfaces, welcome, project, device design, system design, simulation. welcome interface is the first interface, and project interface connect all other interface. the logic of interaction is very certain. we keep the consistency of visual style and interacting method, but it is certain difference between interfaces.So they can recognize it immediately when users enter a interface, and they do not feel confused after the interface changed.

By the way, the design of Logo is based on a DNA shape in a unique angle. We design it in minimalism style, to make sure it can give people a deep impression, and hope it can apply in any kinds of instance.

Algorithm

Markov

The biobrick chain recommendation function was achieved by markov transition matrix, which consists of probabilities of successive biobricks. Thus, the first step is to calculate the probabilities of successive biobricks. For a given biobrick A, the probabilities of A transferring to B is calculated by the number of biobrick A transferring to B over the number of A transferring to all biobricks. The transition probabilities of any two biobricks were calculated to form the markov transition matrix.

The biobrick chain recommendation function was achieved by markov transition matrix, which consists of probabilities of successive biobricks. Thus, the first step is to calculate the probabilities of successive biobricks. For a given biobrick A, the probabilities of A transferring to B is calculated by the number of biobrick A transferring to B over the number of A transferring to all biobricks. The transition probabilities of any two biobricks were calculated to form the markov transition matrix.

For example, Given four chains: “jfa”, “f'kj”, “ruv”, “agf”. One letter represent one BioBrick. We could see BioBricks “a” and “k” follow the “f”, so the number of “f” is two (ignore the end BioBrick of chain), the number of “a” following “f” is one and the number of “k” following the “f” is one. We can calculate the probability from “f” to “a” is 1/2 and the probability from “f” to “k” is 1/2. Then, we can calculate all probability through above process. After calculate, the result is as follows:

With the given BioBricks, we calculate probabilities of next BioBricks. The probabilities and parent node of these next BioBricks are recorded. In order to save memory, we only record the BioBricks’ information with nonzero probability. When two same BioBricks have different probabilities, we compare the probabilities and save the higher probability BioBricks information. When we iterate the length size time, we would get some predicted chain whose length is user’ demand. Then we sort brobick chains according to the probabilities. Finally, we provide some predicted chains that user maybe need.
Aprior

First using the apriori algorithm to find frequent item sets of all parts.The first step we set a number between 0 and 1, and call this number for the support degree,the second step requires count frequency of all parts’ occurrence ,reserved the parts whose frequency of occurrence is greater than support degree ,forming the frequent item sets whose length is one . Make the above-mentioned part into pairwise combinations .And count the frequency of appearing in the original data for the each combination of part,reserved the parts whose frequency of occurrence is greater than support degree,forming the frequent item sets whose length is two.Repeat the above steps to get all the frequent item sets.

Then traverse the database to find the twins component of all part .

Finally, the part and its twin components currently used in the current design chain concentrated in frequent items matching to identify highly relevant part,and these parts will be sorted according to the degree of association, the result is sorted recommend results.

Example

  1. Suppose the original data is four chains: [1,3,4], [2,3,5], [2,3,5], [2,5]
  2. We set Support degree 0.5
  3. Count frequency of all parts’ occurrence,as the four chains, part1 appear twice,so the frequency of 1 is 0.5; the frequency of 2 is 0.75;the frequency of 3 is 0.75;the frequency of 4 is 0.25;the frequency of 5 is 0.75
  4. Reserve the parts whose frequency of occurrence is greater than support degree,[1,2,3,5] is the frequent item sets whose length is one
  5. Make the above-mentioned part into pairwise combinations:（1，2）、（1,3）、（1,5）、（2,3）、（2,5）、（3,5
  6. And count the frequency of appearing for the each combination of part,（1,2）：0.25；（1,3）：0.5；（1,5）：0.25；（2,3）：0.5；（2,5）：0.75；（3,5）：0.5
  7. Reserve the parts whose frequency of occurrence is greater than support degree,[（1,3）、（2,3）、（2,5）、（3,5）]is the frequent item sets whose length is two
  8. Repeat the above steps to get all the frequent item sets.[1,2,3,5];[（1,3）、（2,3）、（2,5）、（3,5）];[(2,3,5)]
  9. If the current chain is [2,3]，the recommended result is 5 and 1,and because the large degree of association with the 2,3 ,5 sort in the front.

Web Pages

For the web pages, we used the advanced HTML5 and CSS3 technology. By using media query, the pages can adapt to different type of screens. Also, we used bootstrap to make the page be responsive.

Server Side

The speed of access and response are key factors in UX. To make the server response time as short as it can be, we used lots of strategies. We use nginx as our server for its stability and high performance. Also, by separating the static from the dynamic, the load on the server side can be balanced. For we use Django as the web framework and its multi threading feature, the server can also handle multiple request simultaneously.