Add fix for potential hydration mismatch errors

package.json

@@ -146,7 +146,7 @@
     "tslib": "^2.0.1",
     "tss-react": "^4.0.0",
     "tsx": "^4.17.0",
-    "typescript": "^5.5.0",
+    "typescript": "~5.6.0",
     "typescript-eslint": "^8.0.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^5.1.4",

plugins/circular-view/src/BaseChordDisplay/models/model.tsx

@@ -5,8 +5,6 @@ import { getParent, isAlive, types } from 'mobx-state-tree'
 // jbrowse
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import CircularChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType'
-import RendererType from '@jbrowse/core/pluggableElementTypes/renderers/RendererType'
 import {
   getContainingView,
   getSession,
@@ -61,12 +59,33 @@ export const BaseChordDisplayModel = types
   .volatile(() => ({
     // NOTE: all this volatile stuff has to be filled in at once
     // so that it stays consistent
+    /**
+     * #volatile
+     */
     filled: false,
+    /**
+     * #volatile
+     */
     reactElement: undefined as React.ReactElement | undefined,
+    /**
+     * #volatile
+     */
     data: undefined,
+    /**
+     * #volatile
+     */
     html: undefined as string | undefined,
+    /**
+     * #volatile
+     */
     message: '',
+    /**
+     * #volatile
+     */
     renderingComponent: undefined as undefined | AnyReactComponentType,
+    /**
+     * #volatile
+     */
     refNameMap: undefined as Record<string, string> | undefined,
   }))
   .actions(self => {
@@ -131,29 +150,17 @@ export const BaseChordDisplayModel = types
       return getEnv(self).pluginManager.getRendererType(self.rendererTypeName)
     },
 
-    /**
-     * #method
-     */
-    isCompatibleWithRenderer(renderer: RendererType) {
-      return !!(renderer instanceof CircularChordRendererType)
-    },
-
     /**
      * #getter
-     * returns a string feature ID if the globally-selected object
-     * is probably a feature
+     * returns a string feature ID if the globally-selected object is probably
+     * a feature
      */
     get selectedFeatureId() {
       if (!isAlive(self)) {
         return undefined
       }
-      const session = getSession(self)
-      const { selection } = session
-      // does it quack like a feature?
-      if (isFeature(selection)) {
-        return selection.id()
-      }
-      return undefined
+      const { selection } = getSession(self)
+      return isFeature(selection) ? selection.id() : undefined
     },
   }))
   .actions(self => ({
@@ -179,11 +186,11 @@ export const BaseChordDisplayModel = types
       html,
       renderingComponent,
     }: {
-      message: string
-      data: any
-      html: string
-      reactElement: React.ReactElement
-      renderingComponent: AnyReactComponentType
+      message?: string
+      data?: any
+      html?: string
+      reactElement?: React.ReactElement
+      renderingComponent?: AnyReactComponentType
     }) {
       if (message) {
         self.filled = false
@@ -230,12 +237,9 @@ export const BaseChordDisplayModel = types
       makeAbortableReaction(
         self,
         renderReactionData,
-
-        // @ts-expect-error
         renderReactionEffect,
         {
           name: `${self.type} ${self.id} rendering`,
-          // delay: self.renderDelay || 300,
           fireImmediately: true,
         },
         self.renderStarted,
@@ -245,27 +249,34 @@ export const BaseChordDisplayModel = types
 
       makeAbortableReaction(
         self,
-        () => ({
-          assemblyNames: getTrackAssemblyNames(self.parentTrack),
-
-          adapter: getConf(getParent<any>(self, 2), 'adapter'),
-          assemblyManager: getSession(self).assemblyManager,
-        }),
-
-        async ({ assemblyNames, adapter, assemblyManager }: any, stopToken) => {
-          return assemblyManager.getRefNameMapForAdapter(
-            adapter,
-            assemblyNames[0],
-            { stopToken, sessionId: getRpcSessionId(self) },
-          )
+        () => {
+          return {
+            assemblyNames: getTrackAssemblyNames(self.parentTrack),
+            adapter: getConf(getParent<any>(self, 2), 'adapter'),
+            assemblyManager: getSession(self).assemblyManager,
+          } as const
+        },
+        async (args, stopToken) => {
+          return args
+            ? args.assemblyManager.getRefNameMapForAdapter(
+                args.adapter,
+                args.assemblyNames[0],
+                {
+                  stopToken,
+                  sessionId: getRpcSessionId(self),
+                },
+              )
+            : undefined
         },
         {
           name: `${self.type} ${self.id} getting refNames`,
           fireImmediately: true,
         },
         () => {},
         refNameMap => {
-          self.setRefNameMap(refNameMap)
+          if (refNameMap) {
+            self.setRefNameMap(refNameMap)
+          }
         },
         error => {
           console.error(error)
@@ -284,15 +295,11 @@ export const BaseChordDisplayModel = types
       },
     ) {
       const data = renderReactionData(self)
-      const rendering = await renderReactionEffect(
-        {
-          ...data,
-          exportSVG: opts,
-          theme: opts.theme || data.renderProps.theme,
-        },
-        undefined,
-        self,
-      )
+      const rendering = await renderReactionEffect({
+        ...data,
+        exportSVG: opts,
+        theme: opts.theme || data.renderProps.theme,
+      })
       return <ReactRendering rendering={rendering} />
     },
   }))

plugins/circular-view/src/BaseChordDisplay/models/renderReaction.ts

@@ -1,6 +1,8 @@
 import clone from 'clone'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { getSession, getContainingView } from '@jbrowse/core/util'
+
+// locals
 import { CircularViewModel } from '../../CircularView/models/model'
 
 export function renderReactionData(self: any) {
@@ -24,11 +26,7 @@ export function renderReactionData(self: any) {
   }
 }
 
-export async function renderReactionEffect(
-  props: any,
-  stopToken: string | undefined,
-  self: any,
-) {
+export async function renderReactionEffect(props?: any, stopToken?: string) {
   if (!props) {
     throw new Error('cannot render with no props')
   }
@@ -51,17 +49,11 @@ export async function renderReactionEffect(
     return { message: 'Skipping render' }
   }
 
-  // check renderertype compatibility
-  if (!self.isCompatibleWithRenderer(rendererType)) {
-    throw new Error(
-      `renderer ${rendererType.name} is not compatible with this display type`,
-    )
-  }
-
   const { html, ...data } = await rendererType.renderInClient(rpcManager, {
     ...renderArgs,
     ...renderProps,
     exportSVG,
+    stopToken,
   })
 
   return {

plugins/gccontent/src/GCContentAdapter/GCContentAdapter.ts

@@ -4,8 +4,14 @@ import {
 } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { firstValueFrom } from 'rxjs'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
-import { SimpleFeature, Feature, Region } from '@jbrowse/core/util'
+import {
+  SimpleFeature,
+  Feature,
+  Region,
+  updateStatus,
+} from '@jbrowse/core/util'
 import { toArray } from 'rxjs/operators'
+import { checkStopToken } from '@jbrowse/core/util/stopToken'
 
 export default class GCContentAdapter extends BaseFeatureDataAdapter {
   private gcMode = 'content'
@@ -20,12 +26,13 @@ export default class GCContentAdapter extends BaseFeatureDataAdapter {
     return adapter.dataAdapter as BaseFeatureDataAdapter
   }
 
-  public async getRefNames() {
+  public async getRefNames(opts?: BaseOptions) {
     const adapter = await this.configure()
-    return adapter.getRefNames()
+    return adapter.getRefNames(opts)
   }
 
-  public getFeatures(query: Region, opts: BaseOptions) {
+  public getFeatures(query: Region, opts?: BaseOptions) {
+    const { statusCallback = () => {}, stopToken } = opts || {}
     return ObservableCreate<Feature>(async observer => {
       const sequenceAdapter = await this.configure()
       const windowSize = this.getConf('windowSize')
@@ -42,50 +49,61 @@ export default class GCContentAdapter extends BaseFeatureDataAdapter {
         return
       }
 
-      const ret = sequenceAdapter.getFeatures(
-        {
-          ...query,
-          start: queryStart,
-          end: queryEnd,
-        },
-        opts,
+      const feats = await firstValueFrom(
+        sequenceAdapter
+          .getFeatures(
+            {
+              ...query,
+              start: queryStart,
+              end: queryEnd,
+            },
+            opts,
+          )
+          .pipe(toArray()),
       )
-      const feats = await firstValueFrom(ret.pipe(toArray()))
       const residues = feats[0]?.get('seq') || ''
 
-      for (let i = hw; i < residues.length - hw; i += windowDelta) {
-        const r = f ? residues[i] : residues.slice(i - hw, i + hw)
-        let nc = 0
-        let ng = 0
-        let len = 0
-        for (const letter of r) {
-          if (letter === 'c' || letter === 'C') {
-            nc++
-          } else if (letter === 'g' || letter === 'G') {
-            ng++
+      let start = performance.now()
+      await updateStatus('Calculating GC', statusCallback, () => {
+        for (let i = hw; i < residues.length - hw; i += windowDelta) {
+          if (performance.now() - start > 400) {
+            checkStopToken(stopToken)
+            start = performance.now()
           }
-          if (letter !== 'N') {
-            len++
+          const r = f ? residues[i] : residues.slice(i - hw, i + hw)
+          let nc = 0
+          let ng = 0
+          let len = 0
+          for (const letter of r) {
+            if (letter === 'c' || letter === 'C') {
+              nc++
+            } else if (letter === 'g' || letter === 'G') {
+              ng++
+            }
+            if (letter !== 'N') {
+              len++
+            }
           }
+          const pos = queryStart
+          const score =
+            this.gcMode === 'content'
+              ? (ng + nc) / (len || 1)
+              : this.gcMode === 'skew'
+                ? (ng - nc) / (ng + nc || 1)
+                : 0
+
+          observer.next(
+            new SimpleFeature({
+              uniqueId: `${this.id}_${pos + i}`,
+              refName: query.refName,
+              start: pos + i,
+              end: pos + i + windowDelta,
+              score,
+            }),
+          )
         }
-        const pos = queryStart
-        const score =
-          this.gcMode === 'content'
-            ? (ng + nc) / (len || 1)
-            : this.gcMode === 'skew'
-              ? (ng - nc) / (ng + nc || 1)
-              : 0
+      })
 
-        observer.next(
-          new SimpleFeature({
-            uniqueId: `${this.id}_${pos + i}`,
-            refName: query.refName,
-            start: pos + i,
-            end: pos + i + windowDelta,
-            score,
-          }),
-        )
-      }
       observer.complete()
     })
   }

plugins/linear-comparative-view/src/LGVSyntenyDisplay/model.ts

@@ -119,12 +119,13 @@ function stateModelFactory(schema: AnyConfigurationSchemaType) {
         }
         session.setSelection(feature)
       },
+      /**
+       * #autorun
+       */
       afterCreate() {
         // use color by stand to help indicate inversions better on first load,
         // otherwise use selected orientation
-        if (self.colorBy) {
-          self.setColorScheme({ ...self.colorBy })
-        } else {
+        if (!self.colorBySetting && self.colorBy.type === 'normal') {
           self.setColorScheme({ type: 'strand' })
         }
       },