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

• 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'].

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

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
    :data="geneToDisplay"
    :selectedStructure="toDisplayStructure"
  >
  </gene-description-component>
</template>

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