Browser-based time-series sensor labeling tool for uploading CSV files, visualizing signals, creating/editing label segments, and exporting updated labels.

• Pure frontend app (React + TypeScript + Vite), no backend required.
• CSV ingestion with configurable Skip Rows and automatic header detection fallback.
• X-axis mode selection:
  • Time Column
  • Row Index (0..N-1)
• Automatic column suggestions for time/timestamp and label/annotation columns.
• Interactive labeling workflow:
  • Draw, move, resize, delete segments
  • Label classes with custom colors
  • Rename label classes
• Signal selection and per-signal color customization.
• Smooth zoom/pan interactions:
  • Mouse wheel: X-axis zoom
  • Shift + Wheel: Y-axis zoom
  • Drag pan support
  • Fit Y reset control
• Export:
  • Labeled CSV merged with original rows
  • Segments JSON

• Node.js 20+ (Node 22 recommended)
• npm 10+

npm install
npm run dev

Open the local URL shown by Vite (typically http://localhost:5173).

1. Upload CSV

• Click Choose File in the top toolbar.

2. Configure parsing

• Set Skip Rows if metadata exists before headers.
• Set X Axis mode:
  • Time Column for timestamp-based x-axis
  • Row Index for sequential index-based x-axis
• Select Time and Label columns as needed.
• Click Parse CSV.

3. Select visible signals

• Use the left Signals panel to toggle lines.
• Change signal colors using each signal color picker.

4. Manage label classes

• Use bottom Labels panel to:
  • + Add new class
  • Rename existing class
  • Change class color
  • Remove class

5. Create/edit segments

• Toggle Label Mode (L) from the toolbar or press L.
• Draw: click-drag in plot region.
• Move: drag segment body.
• Resize: drag segment edges.
• Delete: right-click segment or select and press Delete.

6. Navigate chart

• Wheel: zoom X-axis.
• Shift + Wheel: zoom Y-axis.
• Drag-pan to move viewport.
• Click Fit Y to auto-fit Y to visible data.

7. Export results

• Export Labels CSV to download CSV with merged labels.
• Export Segments JSON to download segment/category state.

• L: Toggle Label Mode
• Space (hold in label mode): Temporarily navigate/pan/zoom
• Delete: Remove selected segment

npm run dev      # Start Vite dev server
npm run build    # Type-check and production build
npm run preview  # Preview built app locally
npm run lint     # Run ESLint

src/
  components/    UI panels and chart interaction
  hooks/         chart instance/state hooks
  store/         Zustand global app state
  types/         strict TypeScript interfaces
  utils/         CSV parsing, inference, export helpers

• React 19 + TypeScript
• Vite
• Tailwind CSS
• Apache ECharts (echarts-for-react)
• PapaParse
• Zustand

The app is static-host friendly (GitHub Pages compatible) and uses hash-based routing-safe setup.

Build for deployment:

npm run build

Deploy the dist/ directory.