Responding to Risk

Oil Spill Simulation

This project, commissioned by NOAA, is an emergency response application designed for configuring, running, and managing ocean particle simulations through a modern web app. It integrates with external APIs for authentication and simulation processing using the OpenDrift framework.

Features

• Scenario-based Simulation Creation: Create new simulations for specific use cases:
  • Larval Fish: Track dispersal patterns of fish larvae with species-specific configurations (e.g., hatched state).
  • Search and Rescue (SAR): Simulate drift patterns for various objects and people in water.
  • Oil Spill: Model the spread and environmental processes (emulsification, dispersion, evaporation, biodegradation) of different oil types.
  • Physics: Generic particle tracking to analyze ocean currents and physical processes.
• Ocean Model Selection: Choose from available ocean models (e.g., CIOFSOP, NWGOA) with dynamically constrained date ranges.
• Detailed Configuration:
  • Time & Space: Define simulation start time, duration, and seeding location using GeoJSON points.
  • Particle Properties: Configure particle depth and number of drifters.
  • Physics Options: Toggle and set levels for horizontal/vertical mixing, Stokes drift (wave effects), and wind drift.
  • 3D Simulation: Option to enable 3D visualization, mandatory for certain scenarios like Larval Fish.
• Dashboard & Management:
  • View all your simulations in a list or grid format.
  • Filter and sort simulations.
  • Monitor simulation status (In Progress, Completed, Failed).
  • Automatic polling for in-progress simulation updates.
  • Bulk delete selected simulations.
• Simulation Details: Access detailed information for each simulation, including its full configuration and generated plots (animations, spaghetti, oil plots for oil spills).
• Template Management: Save your custom simulations as templates and use predefined templates to quickly start new simulations.
• Authentication: Secure user login, signup, and password reset functionality. Automatic session management and logout on token expiry.
• Responsive UI: Optimized for both desktop and mobile viewing.

Technology Stack

• Frontend: Next.js (React), Zustand (state management), Shadcn UI (component library).
• Styling: Tailwind CSS, PostCSS.
• Forms: @axdspub/axiom-ui-forms, React Hook Form, Zod (schema validation).
• API Client: Axios.
• Date Handling: date-fns, React Datepicker.
• CI/CD: GitLab CI.
• Containerization: Docker.

Getting Started

Local Development

1. Install Dependencies:

   npm install

2. Run Development Server:

   npm run dev

   Open http://localhost:3000 in your browser. The application will hot-reload as you make changes.

Docker

You can also run the application using Docker:

1. Build the Docker Image:

   docker build -t particle-ui .

2. Run the Docker Container:

   docker run -p 3000:3000 particle-ui

   The application will be accessible at http://localhost:3000.

Deployment

This Next.js application is configured for deployment with Vercel or as a standalone Docker container. The .gitlab-ci.yml provides an example of a CI/CD pipeline for building and deploying to staging and production environments using Docker images.

Learn More

To learn more about Next.js, refer to the official documentation:

• Next.js Documentation
• Learn Next.js