Team:USTC-Software/Technology
Frontend Technology
In a word, users can manage their works in the Project System, communicate with others in the Communication System, create or edit biological maps or networks in the Pano Unit, do functional works in the Plugin Unit. All these are based on our users-friendly UI Framework.
Generally, our front-end is based on Google Chrome Explorer, using Material Design Standard as the framework of display, and, jQuery and D3 as the framework of visualization. Our basis and frameworks provide a clear view, and if more, rich environment for responsiveness. These features provide a great experience for users and meet the demand of functional usages properly.
UI Framework
We build our UI following the Standard of Material Design by Google, in order to make our website tidy to look and convenient to operate. Our framework makes users feel free in visualization, allowing smooth actions to perform while the interfaces keep clear. Aiming at demonstrating information properly and provide good experience for users, we tried our best to show richer content in fewer frames.
Project System
Project is the smallest unit to work in BioHub, in which information as below is saved:
Nodes and links are edited in Pano Unit and shown as thumbnails in the project page, allowing users to view their projects clearly.
Project information is determined when a new empty project starts, showing basic properties about projects.
Functional work information is what users do in Plugin Unit.
All projects are edited and saved on the cloud, allowing other users to comment on your work.
Communication System
We designed a communication system in order to make users worldwide able to view and make comments on your projects. The system is like a forum, where sharing ideas is never more convenient. The ability to comment on others’ work make our BioHub more like a laboratory, not a single software.
Pano Units
Pano is a module to display the biological network, and it is the most important part of this software, so it receives the most concern. A svg is used for storing and showing edges and nodes of the pano. Besides, several Javascript libraries, such as d3.js and jQuery is used for processing and transfering the data.
d3.behavior is used for zooming and dragging by using the mousel and your finger, and we use ajax by jQuery to fetch node information and pathway finding. The smart map, a module in order to arrange nodes automatically, depends on codes about force layout in d3.js heavily.
Plugin Units
We use d3.js for data visualization in plugins, in BLAST we build a more user-friendly interface way for user to understand the Blast result fluently, in Simulation d3.js is also used for data visualization and unit mapping. D3.js’s selector and data-unit oriented model mapping tool can accelerate develop process a lot. Plugins use jQuery’s ajax to transfer data asynchronously so you can use the UI fluently without suspend the page while requesting data.
Backend Technology
Framework
Our backend is written in Python3, which is easy to be deployed on either Windows or UNIX-based systems. We use Flask as our web server framework, which provides many fantastic and reliable extensions such as flask-login, a secure flask extension for managing user logins. Mysql or any other relational database can be connected to our system, storing user data and synthetic biology database which can be updated whenever you want.
Plugin System
We have implemented a plugin system which is very easy to use. Any developers can fork our example plugin to write their own plugins, even if they only know little about Python. You can write a plugin for your lab or modify an existing plugin. Plugins can be easily enabled or disabled by editing the plugin list file. Even our official tools are running as plugins, so that you can enable and disable any of them whenever you want to fit the special requirements of your lab.
Continuous Integration & Deployment
Our development is based on Git version control with multiple branches. All pushed commits will be automatically tested on our test server at once and we can see the testing result soon. Besides unit tests, our test server will also process code analyzing to prevent fault codes and ensure that all classes and functions are well composed. When all is done, the new docker image will be generated automatically on DockerHub so that anyone can install and run our program with only one command.
