This is the frontend application of the MiST4.0 database, a comprehensive platform for the analysis and exploration of bacterial and archaeal signal transduction systems.
Built with modern technologies, the application delivers an intuitive and responsive user experience for biomedical researchers and bioinformaticians.
The web application is available at mistdb.com
-
RESTful API Integration: Seamlessly connects to the MiST4.0 API, offering programmatic access to microbial genome and gene data. JSON responses support high-throughput analysis.
-
Smart Search System: Allows querying microbial genomes and genes by various identifiers including organism names, taxonomy levels, RefSeq accessions, locus tags, and more—no need to specify identifier types.
-
Advanced Filtering: Users can refine search results by taxonomy or genome assembly level via built-in filters or dropdown menus.
-
Detailed Genome and Gene Views:
- Genome detail pages show comprehensive information about the selected genome, Bioproject metadata, and signal transduction profiles as interactive graphs and tables.
- Gene detail pages present domain architectures, feature annotations, and graphical gene neighborhoods.
- The chemosensory systems table shows all the chemosensory pathways encoded in the given genome.
-
Scope Search: Search genes and proteins within a specific genome context by setting a “scope” from search or genome detail pages.
-
Cart System: Add genomes or genes to a cart for batch analysis or sequence download.
-
Dual Database Navigation: Easily switch between Genomes and Metagenomes views using an integrated interface switcher, with distinct color themes and seamless backend routing.
-
Enhanced Visuals: Protein domain diagrams are scaled proportionally with length indicators for visual comparison.
Angular • Angular Material • TypeScript • JavaScript • NgRx • RxJS
D3.js and custom packages for data visualization
SCSS • PUG • HTML • Font Awesome
Explore the frontend powering a cutting-edge microbial informatics platform - designed for performance, clarity, and scientific insight.
Run npm start or yarn start for a dev server. Navigate to http://localhost:4300/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ./node_modules/.bin/webpack to build the project. The build artifacts will be stored in the dist/ directory. Use the -p flag for a production build.