Add ability to use CSI indexes in @jbrowse/img (#4478)

products/jbrowse-img/data/volvox/volvox-sorted.bam.csi

@@ -0,0 +1 @@
+../../../../test_data/volvox/volvox-sorted.bam.csi

products/jbrowse-img/src/index.test.ts

@@ -57,6 +57,21 @@ test('renders volvox with variety of args', async () => {
   expect(result).toBeTruthy()
 }, 40000)
 
+test('renders volvox with csi index', async () => {
+  const result = await renderRegion({
+    fasta: fp('volvox.fa'),
+    trackList: [
+      [
+        'bam',
+        [fp('volvox-sorted.bam'), 'index:' + fp('volvox-sorted.bam.csi')],
+      ],
+    ],
+    loc: 'ctgA:1000-2000',
+  })
+  fs.writeFileSync(pa('../test/svg_from_volvox_fasta_and_bam_csi.svg'), result)
+  expect(result).toBeTruthy()
+}, 40000)
+
 test('renders volvox alignments as snpcov', async () => {
   const result = await renderRegion({
     fasta: fp('volvox.fa'),

products/jbrowse-img/src/renderRegion.tsx

@@ -1,18 +1,15 @@
-import React from 'react'
+import { createRoot } from 'react-dom/client'
 import { createViewState } from '@jbrowse/react-linear-genome-view'
 import {
   LinearGenomeViewModel,
   renderToSvg,
 } from '@jbrowse/plugin-linear-genome-view'
-import createCache from '@emotion/cache'
-import { CacheProvider } from '@emotion/react'
 import path from 'path'
 import fs from 'fs'
 
 // local
 import { Entry } from './parseArgv'
 import { booleanize } from './util'
-import { createRoot } from 'react-dom/client'
 
 export interface Opts {
   noRasterize?: boolean
@@ -173,7 +170,8 @@ export function readData({
 
   trackList.forEach(track => {
     const [type, opts] = track
-    const [file] = opts
+    const [file, ...rest] = opts
+    const index = rest.find(r => r.startsWith('index:'))?.replace('index:', '')
 
     if (type === 'bam') {
       configData.tracks = [
@@ -186,7 +184,10 @@ export function readData({
           adapter: {
             type: 'BamAdapter',
             bamLocation: makeLocation(file),
-            index: { location: makeLocation(file + '.bai') },
+            index: {
+              location: makeLocation(index || file + '.bai'),
+              indexType: index?.endsWith('.csi') ? 'CSI' : 'BAI',
+            },
             sequenceAdapter: configData.assembly.sequence.adapter,
           },
           ...(opts.includes('snpcov')
@@ -213,7 +214,7 @@ export function readData({
           adapter: {
             type: 'CramAdapter',
             cramLocation: makeLocation(file),
-            craiLocation: makeLocation(file + '.crai'),
+            craiLocation: makeLocation(index || file + '.crai'),
             sequenceAdapter: configData.assembly.sequence.adapter,
           },
           ...(opts.includes('snpcov')
@@ -257,7 +258,8 @@ export function readData({
             type: 'VcfTabixAdapter',
             vcfGzLocation: makeLocation(file),
             index: {
-              location: makeLocation(file + '.tbi'),
+              location: makeLocation(index || file + '.tbi'),
+              indexType: index?.endsWith('.csi') ? 'CSI' : 'TBI',
             },
           },
         },
@@ -276,7 +278,8 @@ export function readData({
             type: 'Gff3TabixAdapter',
             gffGzLocation: makeLocation(file),
             index: {
-              location: makeLocation(file + '.tbi'),
+              location: makeLocation(index || file + '.tbi'),
+              indexType: index?.endsWith('.csi') ? 'CSI' : 'TBI',
             },
           },
         },
@@ -325,7 +328,8 @@ export function readData({
             type: 'BedTabixAdapter',
             bedGzLocation: makeLocation(file),
             index: {
-              location: makeLocation(file + '.tbi'),
+              location: makeLocation(index || file + '.tbi'),
+              indexType: index?.endsWith('.csi') ? 'CSI' : 'TBI',
             },
           },
         },
@@ -347,13 +351,6 @@ export function readData({
   return configData
 }
 
-// without this, the styles can become messed up especially in lgv header
-// xref https://github.com/garronej/tss-react/issues/25
-export const muiCache = createCache({
-  key: 'mui',
-  prepend: true,
-})
-
 function process(
   trackEntry: Entry,
   view: LinearGenomeViewModel,
@@ -474,8 +471,5 @@ export async function renderRegion(opts: Opts) {
   return renderToSvg(view, {
     rasterizeLayers: !opts.noRasterize,
     ...opts,
-    Wrapper: ({ children }) => (
-      <CacheProvider value={muiCache}>{children}</CacheProvider>
-    ),
   })
 }