The Fly Disco Data Showcase

A modern, interactive web application for browsing and analyzing fly behavioral experiment data from split-GAL4 fly lines. Built with Next.js, TypeScript, and Tailwind CSS.

Features

• Home Page: Overview of all fly lines with experiment counts and key metrics
• Fly Line Details: Detailed view of experiments for each GAL4 driver line
• Experiment View: Interactive plots, videos, and comprehensive behavioral data
• Data Browser: Searchable table of behavioral metrics across experiments
• Comparison Tool: Side-by-side experiment comparisons
• Glossary: Comprehensive definitions of behavioral terms and metrics

Technology Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS + shadcn/ui components
• Language: TypeScript
• Charts: Recharts for data visualization
• Icons: Lucide React

Quick Start for Local Deployment

1. Install Dependencies

   npm install

2. Development Server

   npm run dev

   Open http://localhost:3000

3. Build for Production

   npm run build
   npm start

Data Structure

The application expects data in the following structure:

public/data/disco_data/
├── Metadata.xml                    # Experiment metadata
├── QuickStats.txt                  # Behavioral statistics
└── disco_public/
    ├── plots/                      # Analysis plots (PNG)
    ├── videos/                     # Tracking videos (MP4)
    ├── gifs/                       # Activation GIFs
    └── Fly_Bowl_Glossary.txt      # Term definitions

Adding New Experiment Data

1. Prepare Data Directory

   mkdir -p public/data/[experiment_name]

2. Required Files

   • Metadata.xml: Experiment metadata
   • QuickStats.txt: Behavioral statistics
   • disco_public/plots/: Analysis plots
   • disco_public/videos/: Tracking videos
   • disco_public/gifs/: Activation period GIFs

3. Update Data Loader Modify src/lib/data-loader.ts to include new experiment directories

Deployment

Vercel (Recommended)

1. Connect Repository

   • Import project to Vercel
   • Deploy automatically on push

2. Manual Deployment

   npm run build
   # Deploy .next directory

Netlify

1. Build Settings
   • Build command: npm run build
   • Publish directory: .next

GitHub Pages (Static Export)

1. Enable Static Export Uncomment lines in next.config.ts:

   output: 'export',
   trailingSlash: true,
   distDir: 'out',

2. Build and Deploy

   npm run build
   # Deploy contents of 'out' directory

File Structure

src/
├── app/                           # Next.js app router pages
│   ├── page.tsx                   # Home page
│   ├── fly-lines/                 # Fly line pages
│   ├── data-browser/              # Data browser
│   ├── compare/                   # Comparison tool
│   └── glossary/                  # Glossary page
├── components/                    # Reusable components
│   ├── ui/                        # shadcn/ui components
│   ├── navigation.tsx             # Main navigation
│   └── fly-line-card.tsx         # Fly line display card
└── lib/                           # Utilities and data processing
    ├── types.ts                   # TypeScript interfaces
    ├── data-parser.ts             # XML and data parsing
    └── data-loader.ts             # Data loading logic

Customization

Adding New Pages

1. Create page in src/app/[page-name]/page.tsx
2. Add to navigation in src/components/navigation.tsx

Styling

• Modify src/app/globals.css for global styles
• Use Tailwind classes for component styling
• Customize theme with shadcn/ui

Data Sources

• Update src/lib/data-loader.ts for new data sources
• Modify src/lib/types.ts for new data structures
• Extend src/lib/data-parser.ts for new file formats

Browser Support

• Chrome/Edge 90+
• Firefox 90+
• Safari 14+

License

MIT License

Support

For questions or issues, create a GitHub issue or check the documentation.

Reference

• andy and claude for Branson lab mock-up