CHITRA: Interactive Chromosomal Rearrangement Visualization

A web-based tool for interactive visualization of synteny blocks, chromosomal rearrangements, and breakpoints

✨ Try CHITRA  •  📖 Documentation

---

Features

• Interactive linear and circular (chord map) visualizations.
• Customizable ribbon colors for rearrangement types.
• Breakpoint mapping.
• Gene annotation integration.

Figure . The workflow encompasses four sequential phases: (A) Data input supporting direct CSV upload, NCBI Feature Table conversion, or example datasets; (B) Automated data processing with validation, filtering, and coordinate transformation; (C) Interactive visualization generation featuring linear synteny views, mutation type annotation, and detailed chord diagrams; and (D) Collaborative output system with multi-format export capabilities, cloud-based link sharing, and persistent state management for reproducible research workflows. (Additionally, CHITRA includes an integrated NCBI RefSeq Feature Table converter that automatically generates reference genome and annotation files from standard NCBI feature tables.)

---

Example data files, which can serve as a useful starting point or template for your own datasets, are located in the /public/example directory of this repository.

You can browse all example sets directly on GitHub: ➡️ Browse All Example Sets on GitHub

Here are direct links to the curated example sets, as featured in the "Quick Demos" section of the application:

• Set 1: Basic Synteny - Simple synteny visualization between species.
  • View Set 1 Files on GitHub
• Set 2: Multi-Species - Complex synteny relationships across multiple species.
  • View Set 2 Files on GitHub
• Set 3: Annotated Genome - Detailed genome annotations with gene information and breakpoints.
  • View Set 3 Files on GitHub

Data Format

CHITRA requires three CSV files as input:

1. Synteny Data (synteny_data.csv)

This file contains the pairwise synteny blocks between the query and reference species.

Column	Description
query_name	Query species name
query_chr	Query chromosome ID
query_start	Start position in query
query_end	End position in query
query_strand	Orientation (+/-)
ref_chr	Reference chromosome ID
ref_start	Start position in reference
ref_end	End position in reference
ref_species	Reference species name
qry_lvl	Query level

2. Species Data (species_data.csv)

This file contains information about the chromosomes of each species.

Column	Description
species_name	Name of the species
chr_id	Chromosome identifier
chr_type	Type of chromosome
chr_size_bp	Chromosome size in base pairs
centromere_start	Centromere start position (optional)
centromere_end	Centromere end position (optional)

3. Reference Chromosome Sizes (ref_chromosome_sizes.csv)

This file contains the sizes of the reference chromosomes.

Column	Description
chromosome	Chromosome identifier
size	Chromosome size in base pairs
centromere_start	Centromere start position (optional)
centromere_end	Centromere end position (optional)

Optional Input Files

4. Gene Annotations (ref_gene_annotations.csv) (Optional)

This file contains information about gene annotations.

Column	Description
chromosome	Chromosome ID
genomic_accession	Genomic accession number
start	Start position
end	End position
strand	Strand (+/-)
class	Gene class
locus_tag	Locus tag (optional)
symbol	Gene symbol (optional)
name	Gene name (optional)
GeneID	Gene ID

5. Breakpoints Data (breakpoints.csv) (Optional)

This file contains information about chromosome breakpoints.

Column	Description
ref_chr	Reference chromosome ID
ref_start	Start position
ref_end	End position
breakpoint	Breakpoint identifier

Implementation

Built with ❤️, React, ShadCN UI, Tailwind CSS, Motion, D3.js, and jsSVG.

Availability

• Web: https://chitra.bioinformaticsonline.com/
• Docs: https://chitra.bioinformaticsonline.com/docs
• Source: https://github.com/pranjalpruthi/CHITRA

Quick Deploy 🚀

In-Browser Development

Instantly launch a complete development environment in your browser. This is ideal for exploring the code, testing changes, or contributing without any local setup.

One-Click Cloud Deployment

Deploy a live, public instance of CHITRA to the cloud with a single click.

---

Get Started (Locally & Self-Hosted) 🚀

Follow these steps to set up and run CHITRA on your local machine or a self-hosted server.

1. Prerequisites

• Node.js: We recommend the latest LTS version. Download from nodejs.org.
• pnpm: This project uses pnpm for efficient dependency management. Install via npm install -g pnpm.

2. Clone the Repository

Open your terminal and run the following command to clone the CHITRA repository:

git clone https://github.com/pranjalpruthi/CHITRA.git

3. Navigate to the Project Directory

Change into the newly cloned directory:

cd CHITRA

4. Install Dependencies

Install the project dependencies using pnpm:

pnpm install

5. Run the Development Server

Start the Next.js development server:

pnpm dev

This will typically start the application on http://localhost:3000. Open this URL in your web browser to see CHITRA running.

Docker Deployment 🐳

The fastest way to deploy CHITRA is using Docker:

# Clone and navigate to the repository
git clone https://github.com/pranjalpruthi/CHITRA.git
cd CHITRA

# Start with Docker Compose (recommended)
pnpm docker:compose

# Or build and run manually
pnpm docker:build
pnpm docker:run

CHITRA will be available at http://localhost:3000

Docker Compose Features:

• ✅ Production-ready setup
• ✅ Automatic restarts
• ✅ Health checks
• ✅ Optional nginx reverse proxy
• ✅ Volume mounting for example data

Stop the application:

pnpm docker:down

Other Production Options

• Self-hosting (Node.js server): Build using pnpm build and start with pnpm start
• Static Export: Use next export for static HTML/CSS/JS files
• Vercel: Deploy directly to Vercel for automatic scaling

For detailed deployment guides, refer to the official Next.js deployment documentation.

Funding

Funded by The Rockefeller Foundation and CSIR-IGIB.

License

MIT License.