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

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

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.

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

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

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

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 )

npm run dev

Example

<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