Misc

Author: cmdcolin

.storybook/preview.ts

@@ -8,6 +8,13 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      // The `a` and `b` arguments in this function have a type of `import('@storybook/types').IndexEntry`. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it.
+      storySort: (a, b) =>
+        a.id === b.id
+          ? 0
+          : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    },
   },
 }
 

README.md

@@ -12,24 +12,27 @@
 ```bash
 git clone [email protected]:GMOD/genomefeatures
 yarn
-yarn dev
+yarn dev # vite demo
+yarn storybook # storybook examples
 ```
 
 # Screenshot
 
 ![Example 1](images/ExampleIsoform1.png)
 
-## Live demo
+## Demo
 
-https://gmod.org/genomefeatures/
+Demo https://gmod.org/genomefeatures/
 
-## Loading data
+Storybook https://gmod.org/genomefeatures/storybook
 
-### Apollo REST API
+## Loading data
 
-The original component accessed data via an Apollo REST API
+### Legacy access pattern - Apollo REST API
 
-This is still supported, though it is a overkill for most usages
+The original implementation of this component required fetching data from an
+Apollo REST API endpoint. This is still supported, though it is a overkill for
+most usages
 
 ```typescript
 import {
@@ -61,7 +64,7 @@ const gfc = new GenomeFeatureViewer(
     genome,
     tracks: [
       {
-        type,
+        type: 'ISOFORM_EMBEDDED_VARIANT',
         trackData,
         variantData,
       },
@@ -79,24 +82,37 @@ And then in your HTML
 <svg id="svgelement"></svg>
 ```
 
-### Accessing JBrowse NCList files via @gmod/nclist
+### Static access pattern - Accessing JBrowse NCList files and VCF tabix files
 
-Uses a "baseUrl" and "urlTemplate" similar to JBrowse 1 configs
+After the refactor, we can now fetch files from static files like JBrowse 1
+NCList and VCF tabix files. This means you do not need a complex apollo
+deployment to use this component: just some static files
 
 ```typescript
 import {
   fetchNCListData,
+  fetchTabixVcfData,
   parseLocString,
   GenomeFeatureViewer,
 } from 'genomefeatures'
 
-const locString = 'NC_045512.2:17894..28259'
-const genome = 'SARS-CoV-2'
+const locString = '2L:130639..135911'
+const genome = 'fly'
+
+const vcfTabixUrl =
+  'https://s3.amazonaws.com/agrjbrowse/VCF/7.0.0/fly-latest.vcf.gz'
+const ncListUrlTemplate =
+  'https://s3.amazonaws.com/agrjbrowse/docker/7.0.0/FlyBase/fruitfly/tracks/All_Genes/{refseq}/trackData.jsonz'
+
 const region = parseLocString(locString)
 const trackData = await fetchNCListData({
   region,
-  baseUrl: `https://s3.amazonaws.com/agrjbrowse/docker/3.2.0/SARS-CoV-2/tracks/`,
-  urlTemplate: 'All%20Genes/NC_045512.2/trackData.jsonz',
+  urlTemplate: ncListUrlTemplate,
+})
+
+const variantData = await fetchTabixVcfData({
+  url: vcfTabixUrl,
+  region,
 })
 
 const gfc = new GenomeFeatureViewer(
@@ -105,8 +121,9 @@ const gfc = new GenomeFeatureViewer(
     genome,
     tracks: [
       {
-        type,
+        type: 'ISOFORM_EMBEDDED_VARIANT',
         trackData,
+        variantData,
       },
     ],
   },
@@ -124,5 +141,4 @@ And then in your HTML
 
 ## Notes
 
-Can be run in ReactJS, VueJS, VanillaJS. Height is calculated on the fly for
-'global' isoform tracks.
+Can be run in ReactJS, VueJS, VanillaJS

eslint.config.mjs

@@ -13,6 +13,7 @@ export default tseslint.config(
       'vite.config.ts',
       'vite-gh-pages.config.ts',
       '.storybook/*',
+      'out/*',
     ],
   },
   {

src/GMODVcfFetcher.ts

@@ -37,27 +37,26 @@ export async function fetchTabixVcfData({
         parser,
         id: `${i++}`,
       })
+      const info = f.get('INFO') as Record<string, string[]>
+      // @ts-expect-error
       feats.push({
         id: f.get('ID'),
         reference_allele: f.get('REF'),
-        // @ts-expect-error
-        alt_allele: f.get('ALT'),
+        alternative_alleles: { values: f.get('ALT') },
         name: f.get('name'),
         seqId: f.get('refName'),
         fmin: f.get('start'),
         fmax: f.get('end'),
         strand: 1,
         source: '',
-        type: stripQuotes(f.get('INFO').soTerm[0]) ?? f.get('type'),
+        type: stripQuotes(info.soTerm[0]) ?? f.get('type'),
         ...Object.fromEntries(
-          Object.entries(f.get('INFO') as Record<string, string[]>).map(
-            ([key, val]) => [
-              key,
-              {
-                values: val.map(v => stripQuotes(v)),
-              },
-            ],
-          ),
+          Object.entries(info).map(([key, val]) => [
+            key,
+            {
+              values: [JSON.stringify(val.map(v => stripQuotes(v)))],
+            },
+          ]),
         ),
       })
     },

src/main.ts

@@ -190,7 +190,6 @@ export class GenomeFeatureViewer {
 
       if (track.type === TRACK_TYPE.ISOFORM_AND_VARIANT) {
         const isoformVariantTrack = new IsoformAndVariantTrack({
-          region,
           viewer,
           height,
           width,

src/stories/util.ts

@@ -111,7 +111,7 @@ export function createExampleApollo({
   showVariantLabel,
   variantFilter,
   isoformFilter,
-  showVariants,
+  showVariants = true,
 }: {
   locString: string
   genome: string

src/tracks/IsoformAndVariantTrack.ts

@@ -26,7 +26,6 @@ import {
 
 import type { VariantFeature } from '../services/VariantService'
 import type { SimpleFeatureSerialized } from '../services/types'
-import type { Region } from '../types'
 import type { Selection } from 'd3'
 
 export default class IsoformAndVariantTrack {
@@ -41,7 +40,6 @@ export default class IsoformAndVariantTrack {
   private transcriptTypes: string[]
   private variantTypes: string[]
   private binRatio: number
-  private region: Region
   private showVariantLabel: boolean
 
   constructor({
@@ -57,7 +55,6 @@ export default class IsoformAndVariantTrack {
     initialHighlight,
     trackData,
     variantData,
-    region,
   }: {
     viewer: Selection<SVGGElement, unknown, HTMLElement | null, undefined>
     height: number
@@ -71,9 +68,7 @@ export default class IsoformAndVariantTrack {
     initialHighlight?: string[]
     trackData?: SimpleFeatureSerialized[]
     variantData?: VariantFeature[]
-    region: Region
   }) {
-    this.region = region
     this.trackData = trackData ?? []
     this.variantData = variantData ?? []
     this.viewer = viewer
@@ -89,22 +84,20 @@ export default class IsoformAndVariantTrack {
   }
 
   DrawTrack() {
-    const variantDataPre = this.variantData
-    const trackData = this.trackData
     const isoformFilter = this.isoformFilter
-    let isoformData = trackData
+    let isoformData = this.trackData
     const initialHighlight = this.initialHighlight
     const variantData = this.filterVariantData(
-      variantDataPre,
+      this.variantData,
       this.variantFilter,
     )
     const viewer = this.viewer
     const width = this.width
     const binRatio = this.binRatio
     const distinctVariants = getVariantTrackPositions(variantData)
     const numVariantTracks = distinctVariants.length
-    const source = trackData[0].source
-    const chr = trackData[0].seqId
+    const source = this.trackData[0].source
+    const chr = this.trackData[0].seqId
     const MAX_ROWS = isoformFilter.length === 0 ? 9 : 30
 
     const UTR_feats = ['UTR', 'five_prime_UTR', 'three_prime_UTR']
@@ -188,7 +181,7 @@ export default class IsoformAndVariantTrack {
     )
 
     // We need to do all of the deletions first...
-    const deletionBins = variantBins.filter(v => v.type == 'deletion')
+    const deletionBins = variantBins.filter(v => v.type === 'deletion')
     const otherBins = variantBins.filter(v => v.type !== 'deletion')
 
     const deletionSpace = [] as { fmin: number; fmax: number; row: number }[] // Array of array of objects for deletion layout.