Fix shadow dom example

GMOD · Feb 4, 2025 · 4ed0400 · 4ed0400
1 parent 6f53fbd
commit 4ed0400
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 45 deletions.
diff --git a/plugins/alignments/src/BamAdapter/BamAdapter.ts b/plugins/alignments/src/BamAdapter/BamAdapter.ts
@@ -80,39 +80,27 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
     return bam.getHeaderText()
   }
 
-  private async setupPre(opts?: BaseOptions) {
-    const { statusCallback = () => {} } = opts || {}
+  private async setupPre(_opts?: BaseOptions) {
     const { bam } = await this.configure()
-    console.log('wow')
-    this.samHeader = await updateStatus(
-      'Downloading index',
-      statusCallback,
-      async () => {
-        return new Promise(res =>
-          setTimeout(async () => {
-            const samHeader = await bam.getHeader()
-
-            // use the @SQ lines in the header to figure out the
-            // mapping between ref ref ID numbers and names
-            const idToName: string[] = []
-            const nameToId: Record<string, number> = {}
-            samHeader
-              ?.filter(l => l.tag === 'SQ')
-              .forEach((sqLine, refId) => {
-                const SN = sqLine.data.find(item => item.tag === 'SN')
-                if (SN) {
-                  // this is the ref name
-                  const refName = SN.value
-                  nameToId[refName] = refId
-                  idToName[refId] = refName
-                }
-              })
-
-            res({ idToName, nameToId })
-          }, 4000),
-        )
-      },
-    )
+    const samHeader = await bam.getHeader()
+
+    // use the @SQ lines in the header to figure out the
+    // mapping between ref ref ID numbers and names
+    const idToName: string[] = []
+    const nameToId: Record<string, number> = {}
+    samHeader
+      ?.filter(l => l.tag === 'SQ')
+      .forEach((sqLine, refId) => {
+        const SN = sqLine.data.find(item => item.tag === 'SN')
+        if (SN) {
+          // this is the ref name
+          const refName = SN.value
+          nameToId[refName] = refId
+          idToName[refId] = refName
+        }
+      })
+
+    this.samHeader = { idToName, nameToId }
     return this.samHeader
   }
 

diff --git a/plugins/alignments/src/LinearPileupDisplay/doAfterAttach.ts b/plugins/alignments/src/LinearPileupDisplay/doAfterAttach.ts
@@ -1,13 +1,13 @@
-import { AnyConfigurationModel, getConf } from '@jbrowse/core/configuration'
 import { getContainingView, getSession } from '@jbrowse/core/util'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { isAlive } from 'mobx-state-tree'
 
 import { getUniqueModifications } from '../shared/getUniqueModifications'
 import { createAutorun } from '../util'
 
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import type { ModificationType, SortedBy } from '../shared/types'
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 type LGV = LinearGenomeViewModel
 

diff --git a/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts b/plugins/alignments/src/SNPCoverageRenderer/SNPCoverageRenderer.ts
@@ -1,7 +1,7 @@
+import { updateStatus } from '@jbrowse/core/util'
 import { WiggleBaseRenderer } from '@jbrowse/plugin-wiggle'
 
 import type { RenderArgsDeserializedWithFeatures } from './types'
-import { updateStatus } from '@jbrowse/core/util'
 
 export default class SNPCoverageRenderer extends WiggleBaseRenderer {
   // note: the snps are drawn on linear scale even if the data is drawn in log

diff --git a/products/jbrowse-react-linear-genome-view/stories/examples/ShadowDOMOneLinearGenomeView.tsx b/products/jbrowse-react-linear-genome-view/stories/examples/ShadowDOMOneLinearGenomeView.tsx
@@ -1,5 +1,4 @@
-// @ts-nocheck
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import createCache from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
@@ -90,14 +89,16 @@ const ShadowComponent = () => {
   }, [])
   return (
     <div ref={node}>
-      {rootNode &&
-        createPortal(
-          <CacheProvider value={cacheNode}>
-            <JBrowseLinearGenomeView viewState={config} />
-            <div ref={nodeForPin} />
-          </CacheProvider>,
-          rootNode,
-        )}
+      {rootNode && config
+        ? createPortal(
+            // @ts-expect-error
+            <CacheProvider value={cacheNode}>
+              <JBrowseLinearGenomeView viewState={config} />
+              <div ref={nodeForPin} />
+            </CacheProvider>,
+            rootNode,
+          )
+        : null}
     </div>
   )
 }
@@ -112,6 +113,7 @@ export const ShadowDOMOneLinearGenomeView = () => {
   }
   return (
     <div>
+      {/* @ts-expect-error */}
       <jbrowse-linear-view />
       <a href="https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/ShadowDOMOneLinearGenomeView.tsx">
         Source code