vector-filter

A React-based interactive data filtering and visualization tool leveraging D3 for graphics and TensorFlow.js for vector operations.

Overview

vector-filter provides an intuitive interface for filtering and visualizing high-dimensional vector data. Built with modern web technologies, it enables real-time data exploration through interactive visualizations powered by D3, with TensorFlow.js handling efficient vector computations directly in the browser.

Features

• Interactive Data Filtering: Dynamic filtering of vector datasets with real-time visual feedback
• D3-Powered Visualizations: Rich, responsive charts and graphs for data exploration
• Vector Operations: High-performance computations using TensorFlow.js
• Type-Safe Development: Built with TypeScript for robust code quality
• Modern UI: Styled with Tailwind CSS for a clean, responsive interface
• Tested: Unit tests with Vitest and React Testing Library

Project Structure

vector-filter/
├── frontend/           # Frontend React application
│   ├── src/
│   │   ├── components/   # React components
│   │   ├── data/         # Data files and sources
│   │   ├── hooks/        # Custom React hooks
│   │   ├── test/         # Component tests
│   │   ├── types/        # TypeScript type definitions
│   │   ├── utils/        # Utility functions
│   │   ├── App.tsx       # Main application component
│   │   ├── main.tsx      # Application entry point
│   │   └── index.css     # Global styles
│   └── index.html      # HTML template
├── src/                # Root source directory
├── tests/              # Test files
├── package.json        # Project dependencies and scripts
├── tsconfig.json       # TypeScript configuration
├── vite.config.ts      # Vite build configuration
├── vitest.config.ts    # Vitest test configuration
├── tailwind.config.js  # Tailwind CSS configuration
├── postcss.config.js   # PostCSS configuration
├── .gitignore          # Git ignore patterns
└── README.md           # This file

Tech Stack

Category	Technology
Framework	React 18
Language	TypeScript 5
Build Tool	Vite 4
Styling	Tailwind CSS 3
Visualization	D3 7
ML/Vectors	TensorFlow.js 4
Testing	Vitest, React Testing Library

Getting Started

Prerequisites

• Node.js 16+ installed
• npm or yarn package manager

Installation

# Clone the repository
git clone <repository-url>

# Navigate to project directory
cd vector-filter

# Install dependencies
npm install

Development

# Start development server
npm run dev

# Run tests
npm test

# Run linter
npm run lint

# Type check
npm run type-check

Build

# Build for production
npm run build

# Preview production build
npm run preview

Available Scripts

Script	Description
npm run dev	Start Vite development server
npm run build	Build for production
npm run preview	Preview production build locally
npm test	Run Vitest test suite
npm run lint	Run ESLint on source files
npm run type-check	Run TypeScript compiler without emit

Documentation

• AGENTS.md - AI agent rules and templates
• GUIDE.md - Human operator guide (if available)
• TASKS.md - Task tracking (if available)
• LOG.md - Session activity log (if available)
• CONTEXT.md - Project context (if available)

Contributing

1. Ensure all tests pass: npm test
2. Run linter: npm run lint
3. Verify types: npm run type-check
4. Commit using conventional commits format

License

[License information to be added]