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 + Volar (and disable Vetur).

Quick Start

Install

npm install @lipme/gffcolors

Use in a Vue Project

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)

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)

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

{
  "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.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run End-to-End Tests with Cypress

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):

npm run build
npm run test:e2e

Lint with ESLint

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