npm package: @lipme/vue-gff3-utils
Description: A set of utils functions and components to get attribute values, links to Dbxref databases, display gene modals, and more.
Latest version: 0.0.38

# Vue Gff3 Utils

This library exports 2 components bundled to view a single gene structure and textual 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/vue-gff3-utils`

## 🚀 Getting Started

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

`import { GeneDescription, GeneSchemaComponent } from '@lipme/vue-gff3-utils'`

Add this line if you use typescript

`import type { IGeneAdapter } from  '@lipme/vue-gff3-utils'`

## Components

### GeneSchemaCompent Api

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

![Gene Description Component Demo](https://forgemia.inra.fr/lipme/vue-gff3-utils/-/raw/134c4f84a67b47ce62ac796cfcfd59ef1a010158/img/vue-gff3-utils-GeneSchemaCompent.gif)

#### 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.

### GeneDescription Api

Display textual information with links on Dbxref and EC Number

![Gene Description Component Demo](https://forgemia.inra.fr/lipme/vue-gff3-utils/-/raw/134c4f84a67b47ce62ac796cfcfd59ef1a010158/img/vue-gff3-utils-GeneDescription.gif)


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

## Exported Functions

### getAttValue

Retrieves the values of a specified attribute from a GeneData object.
This function searches for the attribute in the GeneData object's attributes and, if not found, looks in the attributes of its child features.


```typescript
 // Get 'product' attribute values from a gene
  const gene = {
    attributes: {
      'locus_tag': ['gene1'],
      'product': ['hypothetical protein']
    }
  };
  const productValues = getAttValue(gene, 'product');
  // Returns: ['hypothetical protein']
  
  // Get values from child features when not in parent
  const geneWithChild = {
    attributes: { 'locus_tag': ['gene1'] },
    child_features: [[
      { attributes: { 'product': ['enzyme'] } }
    ]]
  };
  const childProductValues = getAttValue(geneWithChild, 'product');
  // Returns: ['enzyme']
 ```

### getFeatureTypeInfo

Retrieves information about a specific feature type from a GeneData object.
This function filters the GeneData object for features of the specified type, and collects their attributes, regions, and strands into an Attribute object.
 
 ```typescript
// Get information about 'CDS' features, excluding 'ID' and 'Parent' attributes
const gene = { 
// GeneData object with features
  child_features: [[
     { type: 'CDS', start: 100, end: 200, strand: '+', attributes: { ID: ['gene1'], product: ['protein X'] } }
  ]]
     };
     const hiddenAtts = ['ID', 'Parent'];
     const cdsInfo = getFeatureTypeInfo(gene, hiddenAtts, 'CDS');
     // Result: { region: ['100..200'], strand: ['+'], product: ['protein X'] }
```

### getFeatureTypes
Extracts all unique feature types from a GeneData object.
This function processes the GeneData object using a GeneAdapterFactory and collects all unique feature types (like 'gene', 'CDS', 'mRNA', etc.) present in the data.
 
```typescript
// Get all feature types from a gene object
const gene = {
// GeneData object with various features
// ...
};
const types = getFeatureTypes(gene);
// Result might be: ['gene', 'CDS', 'mRNA', 'exon']
```

## 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/vue-gff3-utils";
  import type { IGeneAdapter, GeneData } from "@lipme/vue-gff3-utils";
  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>
```

## Authors

- Sebastien Carrere
- Walid Sbyi

## License

- Apache 2.0