DDDS Visualization Tool

Presentation-grade concept simulator for DDDS — Distributed Drone Detection System.

The app shows a non-operational classroom demo of distributed acoustic and environmental sensing around Ukrainian cities, defaulting to Kharkiv. It visualizes a selected city boundary, a deterministic ring of triangular DDDS cells, conceptual detection zones, a simulated UAV route, synthetic telemetry, spectrogram-style panels, sensor health, safe alert cards, and presentation controls.

This simulator does not provide tactical recommendations, weapon guidance, target assignment, response-team coordinates, routing, engagement logic, or cost estimates.

Run With Docker Compose

Prerequisites:

• Docker with the docker compose plugin
• Internet access for the first image build and for live map/boundary data

Build and start the app:

docker compose up --build

Open:

http://127.0.0.1:8080/

Stop the app:

docker compose down

Rebuild after source changes:

docker compose build --no-cache
docker compose up

Container Layout

Compose builds the app through a multi-stage image:

• node:22-alpine installs dependencies with npm ci.
• Vite builds the static production bundle.
• nginx:1.27-alpine serves the generated dist/ output.
• nginx.conf provides single-page app fallback routing and static asset caching.

The Compose service is named ddds and publishes container port 80 to host port 8080.

Demo Flow

1. Open http://127.0.0.1:8080/.
2. The app starts with a Ukraine-wide map.
3. Kharkiv is selected by default.
4. Click Start Kharkiv demo to focus the city, reveal the DDDS ring, and launch the simulated UAV route.
5. Use the dashboard tabs for map overview, detection events, acoustic/spectrogram visuals, sensor health, and conceptual operator alerts.
6. Use the presentation controls to step through scenes.

Keyboard shortcuts:

• Space: play or pause simulation
• R: reset
• N: next scene
• P: previous scene

Data And Network Notes

The app renders OpenStreetMap raster tiles through MapLibre and requests city boundary geometry from OpenStreetMap Nominatim where available.

If exact city boundary data cannot be loaded, the UI displays a warning and uses a labeled offline demo envelope so the presentation remains usable.

Configuration

Simulator geometry, colors, animation durations, map defaults, and synthetic telemetry values are centralized in:

src/config/dddsConfig.ts

Important DDDS values should be changed there rather than hard-coded in components.

Project Structure

src/
  App.tsx
  config/
  data/
  lib/
    ddds/
    geodata/
  store/
  components/
    dashboard/
    map/

Maintenance Commands

The Docker image uses the npm scripts in package.json internally:

npm run build
npm run dev
npm run preview

These commands are useful for local development, but the supported packaged run path is Docker Compose.

Generated local artifacts such as node_modules/, dist/, logs, environment files, and TypeScript build metadata are excluded from the image and ignored by git.