npm package: @lipme/gffcolors
Description: A library for handling GFF colors in bioinformatics applications, providing utilities for color management and visualization.
Author: Walid Sbyi
Latest version: 0.2.4

# GffColors

GffColors is a visualization tool for GFF3 files, allowing users to explore and understand the genomic data based on specified attributes.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Quick Start

### Install

```bash
npm install @lipme/gffcolors
```

### Use in a Vue Project

```ts
import { ColorService } from '@lipme/gffcolors'
import { OntologyStrategy } from '@lipme/gffcolors'
// Initialize ColorService with the color dictionary (can be a JSON or a variable)
const colorDict = new ColorService(colors)
// Set the current dictionary you want to use
colorDict.setCurrentDict('MolecularFunction')
// set a specific coloring strategy
const ontology = new OntologyStrategy()
// Adapt the dictionary to the coloring strategy
await ontology.adaptDict(colorDict.currentDict!)
//set the coloring strategy
colorDict.coloringStrategy = ontology
// Use the colorService on the gene to get the color
const color = colorDict.getCdsColor(gene)
```

```ts
import { ColorService } from '@lipme/gffcolors'
import { ClassificationStrategy } from '@lipme/gffcolors'
// Initialize ColorService with the color dictionary (can be a JSON or a variable)
const colorDict = new ColorService(colors)
// Set the current dictionary you want to use
colorDict.setCurrentDict('COG')
// set a specific coloring strategy
const dbXrefStrategy = new ClassificationStrategy()
//set the coloring strategy
colorDict.coloringStrategy = dbXrefStrategy
// Use the colorService on the gene to get the color
const color = colorDict.getCdsColor(gene)
```

```ts
import { ColorService } from '@lipme/gffcolors'
import { DefaultColorStrategy } from '@lipme/gffcolors'
// Initialize ColorService with the color dictionary (can be a JSON or a variable)
const colorDict = new ColorService(colors)
// Set the current dictionary you want to use
colorDict.setCurrentDict('FunctionalClass')
// Optionally, set a specific coloring strategy
const defaultColorStrategy = new DefaultColorStrategy()
//  Optionally,set the coloring strategy
colorDict.coloringStrategy = defaultColorStrategy
// Use the colorService on the gene to get the color
const color = colorDict.getCdsColor(gene)
```

### Example of a Color Dictionary

```json
{
  "customColorsList": [
    {
      "title": "Example mRNA",
      "level": "CDS",
      "attribute": "Dbxref",
      "colors": [{ "match": "Example Match", "color": "#FF0000", "label": "Example Label" }]
    }
  ],
  "default": {
    "mRNA": "blue",
    "ncRNA": "green",
    "rRNA": "red",
    "tRNA": "purple",
    "insertion_sequence": "orange",
    "unknown": "black",
    "match_part": "gray",
    "region": "yellow",
    "utr": "pink"
  }
}
```

There must be a type color dictionary and at least one element in `customColorsList`. There must not be a color in `default` that is found in `customColorsList`.

## Customize Configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Run End-to-End Tests with [Cypress](https://www.cypress.io/)

```sh
npm run test:e2e:dev
```

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with `test:e2e` before deploying (e.g., in CI environments):

```sh
npm run build
npm run test:e2e
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

## Dependencies

- `@gmod/gff`: GFF (General Feature Format) parser
- `@gmod/tabix`: Tabix index file parser
- `generic-filehandle`: Generic file handle library
- `idb`: IndexedDB library
- `vite-plugin-dts`: Vite plugin for generating type definitions
- `vue`: Vue.js 3 framework
- `yaml`: YAML parser