SBML Model Simulator - React TypeScript

A React TypeScript application with Tailwind CSS for simulating SBML (Systems Biology Markup Language) models using WebAssembly.

Features

• React + TypeScript: Modern, type-safe React application
• Tailwind CSS: Utility-first CSS framework for styling
• Chart.js: Interactive data visualization
• WebAssembly Integration: High-performance simulation engine
• Responsive Design: Works on desktop and mobile devices

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to http://localhost:3000

Building for Production

npm run build

The built files will be in the dist directory.

Project Structure

src/
  components/     # React components
  hooks/          # Custom React hooks
  types/          # TypeScript type definitions
  App.tsx         # Main application component
  main.tsx        # Application entry point
  index.css       # Global styles with Tailwind

Components

• Header: Displays model title and metadata
• StatusBar: Shows application status messages
• ParameterPanel: Model parameter configuration
• SimulationControl: Simulation settings and event management
• ChartPanel: Interactive chart visualization
• ResultsPanel: Numerical results display
• Footer: Application footer with links

Technologies

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Chart.js / react-chartjs-2
• WebAssembly (WASM)

License

See LICENSE file for details.