A beautiful, modern web application for labeling CSV data with complaint classification and test results. Built with React and Vite.

• 📄 CSV Import: Upload and parse CSV files with automatic header detection
• 🏷️ Labeling Interface:
  • Complaint/Not Complaint classification
  • Five independent test labels (test_1 through test_5) with Pass/Fail options
• 📊 Progress Tracking: Visual progress bar and labeled count display
• ⌨️ Keyboard Navigation: Use arrow keys to navigate between records
• 💾 CSV Export: Export labeled data with all original columns plus new label columns
• 🎨 Modern UI: Clean, professional interface inspired by DataEQ design

• Node.js (version 18 or higher recommended)
• npm (comes with Node.js) or yarn or pnpm

To check if you have Node.js installed:

node --version
npm --version

If you don't have Node.js installed, download it from nodejs.org

1. Clone or download this repository

   If you have the repository:

   cd labeler

   Or extract the files to a directory of your choice.

2. Install dependencies

   Using npm:

   npm install

   Or using yarn:

   yarn install

   Or using pnpm:

   pnpm install

   This will install all required packages including React, Vite, PapaParse (for CSV handling), and Tailwind CSS.

Start the development server:

npm run dev

Or with yarn:

yarn dev

Or with pnpm:

pnpm dev

The application will start and you should see output like:

  VITE v7.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open your browser and navigate to http://localhost:5173/ (or the URL shown in the terminal).

To create a production build:

npm run build

The built files will be in the dist/ directory.

To preview the production build:

npm run preview

1. Import CSV File

   • Click "Choose CSV File" button
   • Select your CSV file
   • The file will be parsed and displayed

2. Label Data

   • Review the data record on the left side
   • Use the labeling panel on the right to:
     • Select "Complaint" or "Not Complaint"
     • For each test (test_1 through test_5), select "Pass" or "Fail"
   • Use the "Previous" and "Next" buttons or arrow keys to navigate between records

3. Export Labeled Data

   • Click the "Export CSV" button in the header
   • The exported file will include all original columns plus:
     • complaint_label: The complaint classification
     • test_1 through test_5: The test results

labeler/
├── src/
│   ├── App.jsx          # Main application component
│   ├── App.css          # App-specific styles
│   ├── index.css        # Global styles with Tailwind imports
│   └── main.jsx         # Application entry point
├── public/              # Static assets
├── index.html           # HTML template
├── package.json         # Dependencies and scripts
├── vite.config.js       # Vite configuration
├── tailwind.config.js   # Tailwind CSS configuration
└── postcss.config.js    # PostCSS configuration

• React - UI library
• Vite - Build tool and dev server
• PapaParse - CSV parsing and generation
• Tailwind CSS - Utility-first CSS framework
• PostCSS - CSS processing

If port 5173 is already in use, Vite will automatically try the next available port. You can also specify a port:

npm run dev -- --port 3000

If you encounter build errors, try:

1. Delete node_modules folder
2. Delete package-lock.json (or yarn.lock / pnpm-lock.yaml)
3. Run npm install again

If styles aren't loading, ensure:

• Tailwind CSS is properly configured in tailwind.config.js
• PostCSS is configured in postcss.config.js
• The CSS import is in src/index.css

This project is private and for internal use.