npm package: @lipme/gff3lib
Description: This library is 2 components bundled to view a single gene structure and information it use d3 and vuetify.
Author: Walid SBYI
Latest version: 0.0.18

# Gene structure viewer

This library is 2 components bundled to view a single gene structure and information it use d3 and vuetify.

It's based on Gmod/gff3 for gene structure

## 💿 Install

To install the library use the command `npm i @lipme/gff3lib`

## 🚀 Getting Started

to use the components in your project, add the following line

`import { GeneDescription, GeneSchemaComponent } from '@lipme/gff3lib'`

Add this line if you use typescript

`import type { IGeneAdapter } from '@lipme/gff3lib'`

### GeneSchemaCompent Api

display the gene structure from top to bottom starting from the gene

#### Props

- `gene`**(required)** : A `GeneData` object representing the gene structure to be displayed.

#### Events

- `onSelectStructure(gene: IGeneAdapter)` (optional): Emitted when a gene structure is

selected. The selected `IGeneAdapter` is passed as a parameter and is used in the `GeneDescription` component.

### Gene Description Api

#### Props

- `data` **(required)** : The `GeneData` object that contains the information of the gene.

- `hiddenAttributes` (optional) : An array of strings that contains the names of the gene attributes that should be hidden. By default, the values are `["ID", "Parent"]`.

- `mainAttributes` (optional) : An array of strings that contains the names of the gene attributes that should considered first. By default, the values are `['locus_tag', 'Name', 'product', 'function', 'Note', 'functional_category', 'description', 'Alias', 'Symbol']`.

- `identifier` (optional): Main identifier attribute to use

- `selectedStructure` (optional) : An `IGeneAdapter` object that contains the information of the selected gene structure.

#### Events

- `updateSubFeatureData(data:GeneData)`: Gene actually displayed (usefull in case of alternative transcripts) 

### Update Xrefs links

Get the latest Xref file and run build or dev to rebuild Xref.json file

```bash
curl https://current.geneontology.org/metadata/GO.xrf_abbs -o src/utils/GO.xrf_abbs.txt
```

Check or fix the following entries (issue open at: https://github.com/geneontology/go-site/issues/2374#issue-2588663286 )

<pre>
abbreviation: COG
database: NCBI Clusters of Orthologous Groups
generic_url: http://www.ncbi.nlm.nih.gov/COG/
entity_type: BET:0000000 ! entity
example_id: COG:COG0001
<font color="red">url_syntax: https://www.ncbi.nlm.nih.gov/research/cog/cog/[example_id]</font>

abbreviation: COG_Cluster
database: NCBI COG cluster
generic_url: http://www.ncbi.nlm.nih.gov/COG/
<font color="red">url_syntax: https://www.ncbi.nlm.nih.gov/research/cog/cog/[example_id]</font>
example_id: COG_Cluster:COG0001
url_example: http://www.ncbi.nlm.nih.gov/COG/new/release/cow.cgi?cog=COG0001
entity_type: BET:0000000 ! entity
</pre>

```bash
npm run dev
```

### Example

```html
<template>
  <gene-schema-component
    :gene="geneToDisplay"
    @onSelectStructure="selectedStructureF"
  >
  </gene-schema-component>
  <gene-description-component
    identifier="locus_tag"
    :data="geneToDisplay"
    :selectedStructure="toDisplayStructure"
    @updateSubFeatureData="handleSelectedFeature"
  >
  </gene-description-component>
</template>

<script setup lang="ts">
  import { GeneDescription, GeneSchemaComponent } from "@lipme/gff3lib";
  import type { IGeneAdapter, GeneData } from "@lipme/gff3lib";
  import { ref } from "vue";
  const toDisplayStructure = ref<IGeneAdapter | null>(null);
  function selectedStructureF(structure: IGeneAdapter) {
    toDisplayStructure.value = structure;
  }

 function handleSubFeatureData(subFeatureData: GeneData) {
  console.log('Received sub feature data:', subFeatureData);
  // Handle the sub feature data as needed
}

</script>
```