# Campaign Attribution Tuner

An interactive web application for tuning campaign attribution weights and visualizing their impact on attribution scores.

## Features

- Interactive UI for adjusting various attribution parameters.
- Real-time visualization of attribution results.
- React frontend with Material-UI.
- Flask backend for attribution calculations.

## Docker-based Setup (Recommended)

This is the easiest way to get the application running.

### Prerequisites

- [Docker](https://docs.docker.com/get-docker/)
- [Docker Compose](https://docs.docker.com/compose/install/) (optional, but recommended)

### Option 1: Using Docker Compose (Recommended)

This method runs both frontend and backend services together with proper networking.

1.  **Create an environment file:**
    Create a `.env` file in this directory (`notebooks/data_discovery/marketing/attribution_app`) with the following content:
    ```
    GCP_PROJECT_ID=your-gcp-project-id
    ```
    Replace `your-gcp-project-id` with your actual Google Cloud Project ID.

2.  **Build and run the containers:**
    ```bash
    docker-compose up --build
    ```
    This command will build the Docker images for the frontend and backend and start the services.

3.  **Access the application:**
    - The frontend will be available at [http://localhost:8080](http://localhost:8080).
    - The backend API will be available at [http://localhost:5002](http://localhost:5002).

4.  **Stopping the application:**
    To stop the services, press `Ctrl+C` in the terminal where `docker-compose` is running, or run:
    ```bash
    docker-compose down
    ```

### Option 2: Using Standalone Docker Containers

If Docker Compose is not available, you can run the containers separately.

1.  **Start the backend first:**
    ```bash
    # Build the backend image
    docker build -t attribution-backend ./backend
    
    # Run the backend container
    docker run --rm -p 5002:5002 -e GCP_PROJECT_ID=your-gcp-project-id attribution-backend
    ```

2.  **In a new terminal, start the frontend:**
    ```bash
    # Build the frontend image
    docker build -t attribution-frontend ./frontend
    
    # Run the frontend container (choose one of the following options)
    
    # For macOS/Windows:
    docker run --rm -p 8080:8080 -e BACKEND_URL=http://host.docker.internal:5002 attribution-frontend
    
    # For Linux:
    docker run --rm --network host -e BACKEND_URL=http://localhost:5002 attribution-frontend
    
    # Alternative for any OS (replace with your machine's IP):
    docker run --rm -p 8080:8080 -e BACKEND_URL=http://YOUR_MACHINE_IP:5002 attribution-frontend
    ```

3.  **Access the application:**
    - The frontend will be available at [http://localhost:8080](http://localhost:8080).

### Option 3: Using Pre-built Images

If you have pre-built images in a registry:

1.  **Start the backend:**
    ```bash
    docker run --rm -p 5002:5002 -e GCP_PROJECT_ID=your-gcp-project-id your-backend-image:latest
    ```

2.  **Start the frontend:**
    ```bash
    # For macOS/Windows:
    docker run --rm -p 8080:8080 -e BACKEND_URL=http://host.docker.internal:5002 your-frontend-image:latest
    
    # For Linux:
    docker run --rm --network host -e BACKEND_URL=http://localhost:5002 your-frontend-image:latest
    ```

## Troubleshooting

### Common Issues

1.  **504 Gateway Timeout Error:**
    - This usually means the frontend can't reach the backend.
    - Make sure the backend is running on port 5002.
    - For standalone containers, use `host.docker.internal:5002` (macOS/Windows) or your machine's IP address.

2.  **500 Internal Server Error:**
    - Check that the `BACKEND_URL` environment variable is set correctly.
    - Verify the backend is accessible by testing: `curl http://localhost:5002/api/attribution/config/default`

3.  **Docker Compose not found:**
    - Install Docker Compose: `brew install docker-compose` (macOS) or follow [official instructions](https://docs.docker.com/compose/install/).
    - Alternatively, use the standalone container method above.

### Finding Your Machine's IP Address

If you need to use your machine's IP address for the `BACKEND_URL`:

```bash
# macOS/Linux:
ifconfig | grep "inet " | grep -v 127.0.0.1 | head -1 | awk '{print $2}'

# Windows:
ipconfig | findstr "IPv4"
```

## Local Development Setup

### Backend

1.  **Navigate to the backend directory:**
    ```bash
    cd backend
    ```

2.  **Install dependencies:**
    ```bash
    pip install -r requirements.txt
    ```

3.  **Set the environment variable:**
    ```bash
    export GCP_PROJECT_ID=your-gcp-project-id
    ```

4.  **Start the backend server:**
    ```bash
    python app.py
    ```
    The backend will run on `http://localhost:5002`.

### Frontend

1.  **Navigate to the frontend directory:**
    ```bash
    cd frontend
    ```

2.  **Install dependencies:**
    ```bash
    npm install
    ```

3.  **Start the development server:**
    ```bash
    npm run dev
    ```
    The frontend will be available at `http://localhost:5173`.

## Architecture

- **Frontend**: React, Vite, Material-UI, Recharts, Express (for production serving)
- **Backend**: Flask API with the attribution engine in Python.
- **Data**: BigQuery integration for campaign and opportunity data.
- **Containerization**: Docker and Docker Compose.

## Environment Variables

### Frontend
- `BACKEND_URL`: URL of the backend API (e.g., `http://localhost:5002` or `http://host.docker.internal:5002`)
- `PORT`: Port for the frontend server (default: 8080)

### Backend
- `GCP_PROJECT_ID`: Your Google Cloud Project ID for BigQuery access