GffColors

gff color is a visualization tool for GFF3 files, allowing users to explore and understand the genomic data base on specified attirubutes.

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'
//intialize ColorService with the color dictionary (can be a json or a variable)
const colorService = new ColorService(dictionary)
// selcet the color dictionary you want to use
await colorService.setCurrentDict('product')
// use the colorService on the gene to get the color
const color = colorService.getColorByAttribute(gene, 'product') //returns a color object {label: 'kinase ', color: '#FF0000', match: 'GO:0003674' }

here is an exemple of a color dictionary

{
  "customColorsList": [
    {
      "title": "Example mRNA", // the title of the mRNA color dictionary must be unique across all mRNA color dictionaries, used to set the working dictionary
      "level": "CDS", // the omique type that the color dictionary applies to
      "attribute": "Dbxref", // the attribute key that the color dictionary applies to
      "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 customColorsList , there musn't be a color in default that is found in color in mRNA

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 Unit Tests with Vitest

npm run test:unit

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