Update cram-js to avoid requesting file size for more CORS compatibil…

…ity (#4729)

packages/app-core/src/ui/App/ViewsContainer.tsx

@@ -1,12 +1,15 @@
+import { Suspense, lazy } from 'react'
+
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import ViewLauncher from './ViewLauncher'
 import ViewPanel from './ViewPanel'
 
 import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util'
 
+const ViewLauncher = lazy(() => import('./ViewLauncher'))
+
 const useStyles = makeStyles()({
   viewsContainer: {
     overflowY: 'auto',
@@ -34,7 +37,9 @@ const ViewsContainer = observer(function ViewsContainer(props: Props) {
           <ViewPanel key={`view-${view.id}`} view={view} session={session} />
         ))
       ) : (
-        <ViewLauncher {...props} />
+        <Suspense fallback={null}>
+          <ViewLauncher {...props} />
+        </Suspense>
       )}
 
       {/* blank space at the bottom of screen allows scroll */}

packages/core/ui/index.ts

@@ -5,13 +5,11 @@ export { default as CascadingMenu } from './CascadingMenu'
 export { default as Dialog } from './Dialog'
 export { default as EditableTypography } from './EditableTypography'
 export { default as ErrorMessage } from './ErrorMessage'
-export { default as FactoryResetDialog } from './FactoryResetDialog'
 export { default as FatalErrorDialog } from './FatalErrorDialog'
 export { default as FileSelector } from './FileSelector'
 export { default as LoadingEllipses } from './LoadingEllipses'
 export { default as Menu } from './Menu'
 export { default as PrerenderedCanvas } from './PrerenderedCanvas'
-export { default as ReturnToImportFormDialog } from './ReturnToImportFormDialog'
 export { default as ResizeHandle } from './ResizeHandle'
 export { default as SanitizedHTML } from './SanitizedHTML'
 export * from './Menu'

plugins/linear-genome-view/src/LinearGenomeView/components/Highlight.tsx

@@ -25,9 +25,12 @@ const useStyles = makeStyles()(theme => ({
   linkIcon: {
     color: colord(theme.palette.highlight.main).darken(0.2).toRgbString(),
   },
+  z3: {
+    zIndex: 3,
+  },
 }))
 
-const Highlight = observer(function Highlight({
+const Highlight = observer(function ({
   model,
   highlight,
 }: {
@@ -94,10 +97,10 @@ const Highlight = observer(function Highlight({
       <Tooltip title="Highlighted from URL parameter" arrow>
         <IconButton
           ref={anchorEl}
+          className={classes.z3}
           onClick={() => {
             setOpen(true)
           }}
-          style={{ zIndex: 3 }}
         >
           <LinkIcon fontSize="small" className={classes.linkIcon} />
         </IconButton>
@@ -140,18 +143,4 @@ const Highlight = observer(function Highlight({
   ) : null
 })
 
-const HighlightGroup = observer(function HighlightGroup({
-  model,
-}: {
-  model: LGV
-}) {
-  return model.highlight.map((highlight, idx) => (
-    <Highlight
-      key={`${JSON.stringify(highlight)}-${idx}`}
-      model={model}
-      highlight={highlight}
-    />
-  ))
-})
-
-export default HighlightGroup
+export default Highlight

plugins/linear-genome-view/src/LinearGenomeView/components/TracksContainer.tsx

@@ -1,15 +1,12 @@
-import { useRef } from 'react'
+import { Suspense, lazy, useRef } from 'react'
 
 import { Menu } from '@jbrowse/core/ui'
 import { getEnv } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import CenterLine from './CenterLine'
 import Gridlines from './Gridlines'
-import HighlightGroup from './Highlight'
 import Rubberband from './Rubberband'
-import RubberbandSpan from './RubberbandSpan'
 import Scalebar from './Scalebar'
 import VerticalGuide from './VerticalGuide'
 import { SCALE_BAR_HEIGHT } from '../consts'
@@ -19,6 +16,10 @@ import { useWheelScroll } from './useWheelScroll'
 
 import type { LinearGenomeViewModel } from '..'
 
+const CenterLine = lazy(() => import('./CenterLine'))
+const Highlight = lazy(() => import('./Highlight'))
+const RubberbandSpan = lazy(() => import('./RubberbandSpan'))
+
 const useStyles = makeStyles()({
   tracksContainer: {
     position: 'relative',
@@ -62,7 +63,6 @@ const TracksContainer = observer(function TracksContainer({
     undefined,
     { model },
   ) as React.ReactNode
-
   return (
     <div
       ref={ref}
@@ -76,17 +76,21 @@ const TracksContainer = observer(function TracksContainer({
       onMouseUp={mouseUp}
     >
       {showGridlines ? <Gridlines model={model} /> : null}
-      {showCenterLine ? <CenterLine model={model} /> : null}
+      <Suspense fallback={null}>
+        {showCenterLine ? <CenterLine model={model} /> : null}
+      </Suspense>
       {guideX !== undefined ? (
         <VerticalGuide model={model} coordX={guideX} />
       ) : rubberbandOn ? (
-        <RubberbandSpan
-          leftBpOffset={leftBpOffset}
-          rightBpOffset={rightBpOffset}
-          numOfBpSelected={numOfBpSelected}
-          width={width}
-          left={left}
-        />
+        <Suspense fallback={null}>
+          <RubberbandSpan
+            leftBpOffset={leftBpOffset}
+            rightBpOffset={rightBpOffset}
+            numOfBpSelected={numOfBpSelected}
+            width={width}
+            left={left}
+          />
+        </Suspense>
       ) : null}
       {anchorPosition ? (
         <Menu
@@ -121,4 +125,22 @@ const TracksContainer = observer(function TracksContainer({
   )
 })
 
+const HighlightGroup = observer(function HighlightGroup({
+  model,
+}: {
+  model: LGV
+}) {
+  return model.highlight.length ? (
+    <Suspense fallback={null}>
+      {model.highlight.map((highlight, idx) => (
+        <Highlight
+          key={`${JSON.stringify(highlight)}-${idx}`}
+          model={model}
+          highlight={highlight}
+        />
+      ))}
+    </Suspense>
+  ) : null
+})
+
 export default TracksContainer

plugins/sv-inspector/src/SvInspectorView/index.ts

@@ -1,9 +1,10 @@
+import { lazy } from 'react'
+
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
 import { getContainingView, getSession } from '@jbrowse/core/util'
 import { navToMultiLevelBreak } from '@jbrowse/sv-core'
 import { type IAnyStateTreeNode, getParent } from 'mobx-state-tree'
 
-import ReactComponent from './components/SvInspectorView'
 import stateModelFactory from './model'
 
 import type { SvInspectorViewModel } from './model'
@@ -42,7 +43,7 @@ export default function SvInspectorViewF(pluginManager: PluginManager) {
       name: 'SvInspectorView',
       displayName: 'SV inspector',
       stateModel,
-      ReactComponent,
+      ReactComponent: lazy(() => import('./components/SvInspectorView')),
     })
   })
 }

products/jbrowse-web/src/components/Loader.tsx

@@ -15,9 +15,8 @@ import '@fontsource/roboto'
 import JBrowse from './JBrowse'
 import Loading from './Loading'
 import SessionLoader from '../SessionLoader'
-import factoryReset from '../factoryReset'
-import StartScreenErrorMessage from './StartScreenErrorMessage'
 import { createPluginManager } from '../createPluginManager'
+import factoryReset from '../factoryReset'
 
 import type { SessionLoaderModel, SessionTriagedInfo } from '../SessionLoader'
 import type { WebRootModel } from '../rootModel/rootModel'
@@ -26,6 +25,7 @@ import type PluginManager from '@jbrowse/core/PluginManager'
 const ConfigWarningDialog = lazy(() => import('./ConfigWarningDialog'))
 const SessionWarningDialog = lazy(() => import('./SessionWarningDialog'))
 const StartScreen = lazy(() => import('./StartScreen'))
+const StartScreenErrorMessage = lazy(() => import('./StartScreenErrorMessage'))
 
 function normalize<T>(param: T | null | undefined) {
   return param === null ? undefined : param
@@ -162,7 +162,11 @@ const Renderer = observer(function ({
 
   const err = configError || error
   if (err) {
-    return <StartScreenErrorMessage error={err} />
+    return (
+      <Suspense fallback={null}>
+        <StartScreenErrorMessage error={err} />
+      </Suspense>
+    )
   } else if (sessionTriaged) {
     return <SessionTriaged loader={loader} sessionTriaged={sessionTriaged} />
   } else if (pluginManager) {