gene-map-component

Vue Component to display genes.

Overview

GeneMapComponent is a Vue component designed to visualize gene data in a structured and interactive manner. It supports features like compressed views, pagination, highlighting regions, and exporting visualizations as images.

Features

- Visualize gene data with customizable labels, tooltips, and links.
- Support for compressed and paginated views.
- Highlight specific regions of interest.
- Export the visualization as an image.
- Fully configurable dimensions and layout.

Props

$3

- Type: (x: GeneData) => string
- Description: A function to define how each gene should be labeled.
- Default: Returns the Name attribute of the gene.
- Example:

``typescript
label: (gene) => gene.attributes!.Name![0] || 'Unnamed Gene'
`

$3

- Type: (x: GeneData) => string | undefined
- Description: A function to generate a URL for each gene, used for redirection when a gene is clicked.
- Default: undefined
- Example:

`typescript
linksGenerator: (gene) => https://example.com/gene/${gene.attributes!.ID![0]}
`

$3

- Type: (x: GeneData) => string
- Description: A function to define the tooltip content for each gene.
- Default: Returns the Alias attribute of the gene if available.
- Example:

`typescript
tooltip: (gene) => Gene: ${gene.attributes!.Alias![0]}
`

$3

- Type: RegionInputType | PaginationInputType
- Description: Specifies the region or pagination configuration for gene display.
- Required: Yes
- Types:

- RegionInputType: For displaying a specific region

`typescript
{
seqID: string;
start: number;
end: number;
compressed?: {
offset: number;
};
}
`

- PaginationInputType: For paginated display

`typescript
{
seqID: string
index: number
config: {
numberOfRows: number
}
}
`

- Examples:

- Region view:

`typescript
selection: {
seqID: 'chromosome1',
start: 1000,
end: 5000,
compressed: { offset: 50 }
}
`

- Paginated view:

`typescript
selection: {
seqID: 'chromosome1',
index: 2,
config: { numberOfRows: 8 }
}
`

$3

- Type: string
- Description: The HTTP source of the GFF3 file containing gene data.
- Example:

`typescript
fileUrl: 'https://example.com/data/genes.gff3'
`

$3

- Type: boolean
- Description: Whether to display the legend in the visualization.
- Default: true

$3

- Type: string | undefined
- Description: The index file URL for the GFF3 file. Defaults to the fileUrl with .tbi appended.
- Default: undefined

$3

- Type: ColorService
- Description: A service to manage color schemes for the visualization.
- Example:

`typescript
import { ColorService } from '@lipme/gffcolors'
const colors = new ColorService()
`

$3

- Type: Array<[number, number]> | undefined
- Description: An array of regions to highlight in the visualization.
- Default: undefined
- Example:

`typescript
highlight: [
[1000, 2000],
[3000, 4000]
]
`

$3

- Type: { width: number; height: number; rowSize: number }
- Description: Configuration for the visualization layout.
- width: Width of the visualization in pixels.
- height: Height of the visualization in pixels.
- rowSize: Size of each level.
- Default: { width: 1000, height: 800, rowSize: 30000 }
- Example:

`typescript
config: { width: 1200, height: 900, rowSize: 20000 }
`

Emits

$3

- Type: (value: GeneData) => void
- Description: Emitted when a gene is selected (clicked).
- Example:

`html


`

Slots

$3

- Props: { screenshotFunction: () => void }
- Description: Slot to provide a custom button or UI for exporting the visualization as an image.
- Example:

`html

`

Examples

$3

`vue



`

$3

`vue



`

$3

`vue



`

$3

`vue



`

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize Configuration

See Vite Configuration Reference.

Project Setup

`sh
npm install
`

$3

`sh
npm run dev
`

$3

`sh
npm run build
`

$3

`sh
npm run test:unit
`

$3

`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
`

$3

`sh
npm run lint
``