@jbrowse/plugin-linear-genome-view 2.4.0 → 2.4.1

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -60,81 +60,84 @@ interface Props {
   className?: string
 }
 
-const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
-  ({ track, className }, ref) => {
-    const { classes, cx } = useStyles()
-    const view = getContainingView(track) as LGV
-    const session = getSession(track)
-    const trackConf = track.configuration
-    const minimized = track.minimized
-    const trackId = getConf(track, 'trackId')
-    const trackName = getTrackName(trackConf, session)
+const TrackLabel = React.forwardRef<HTMLDivElement, Props>(function (
+  { track, className },
+  ref,
+) {
+  const { classes, cx } = useStyles()
+  const view = getContainingView(track) as LGV
+  const session = getSession(track)
+  const trackConf = track.configuration
+  const minimized = track.minimized
+  const trackId = getConf(track, 'trackId')
+  const trackName = getTrackName(trackConf, session)
 
-    const popupState = usePopupState({
-      popupId: 'trackLabelMenu',
-      variant: 'popover',
-    })
+  const popupState = usePopupState({
+    popupId: 'trackLabelMenu',
+    variant: 'popover',
+  })
 
-    const items = [
-      {
-        label: minimized ? 'Restore track' : 'Minimize track',
-        icon: minimized ? AddIcon : MinimizeIcon,
-        onClick: () => track.setMinimized(!minimized),
-      },
-      ...(session.getTrackActionMenuItems?.(trackConf) || []),
-      ...track.trackMenuItems(),
-    ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
+  const items = [
+    {
+      label: minimized ? 'Restore track' : 'Minimize track',
+      icon: minimized ? AddIcon : MinimizeIcon,
+      onClick: () => track.setMinimized(!minimized),
+    },
+    ...(session.getTrackActionMenuItems?.(trackConf) || []),
+    ...track.trackMenuItems(),
+  ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 
-    return (
-      <Paper ref={ref} className={cx(className, classes.root)}>
-        <span
-          draggable
-          className={classes.dragHandle}
-          onDragStart={event => {
-            const target = event.currentTarget
-            if (target.parentNode) {
-              const parent = target.parentNode as HTMLElement
-              event.dataTransfer.setDragImage(parent, 20, 20)
-              view.setDraggingTrackId(track.id)
-            }
-          }}
-          onDragEnd={() => view.setDraggingTrackId(undefined)}
-          data-testid={`dragHandle-${view.id}-${trackId}`}
-        >
-          <DragIcon className={classes.dragHandleIcon} fontSize="small" />
-        </span>
-        <IconButton
-          onClick={() => view.hideTrack(trackId)}
-          className={classes.iconButton}
-          title="close this track"
-        >
-          <CloseIcon fontSize="small" />
-        </IconButton>
+  return (
+    <Paper ref={ref} className={cx(className, classes.root)}>
+      <span
+        draggable
+        className={classes.dragHandle}
+        onDragStart={event => {
+          const target = event.currentTarget
+          if (target.parentNode) {
+            const parent = target.parentNode as HTMLElement
+            event.dataTransfer.setDragImage(parent, 20, 20)
+            view.setDraggingTrackId(track.id)
+          }
+        }}
+        onDragEnd={() => view.setDraggingTrackId(undefined)}
+        data-testid={`dragHandle-${view.id}-${trackId}`}
+      >
+        <DragIcon className={classes.dragHandleIcon} fontSize="small" />
+      </span>
+      <IconButton
+        onClick={() => view.hideTrack(trackId)}
+        className={classes.iconButton}
+        title="close this track"
+      >
+        <CloseIcon fontSize="small" />
+      </IconButton>
 
-        <Typography
-          variant="body1"
-          component="span"
-          className={classes.trackName}
-        >
-          <SanitizedHTML html={trackName + (minimized ? ' (minimized)' : '')} />
-        </Typography>
-        <IconButton
-          {...bindTrigger(popupState)}
-          className={classes.iconButton}
-          data-testid="track_menu_icon"
-          disabled={!items.length}
-        >
-          <MoreVertIcon fontSize="small" />
-        </IconButton>
-        <CascadingMenu
-          {...bindPopover(popupState)}
-          onMenuItemClick={(_: unknown, callback: Function) => callback()}
-          menuItems={items}
-          popupState={popupState}
+      <Typography
+        variant="body1"
+        component="span"
+        className={classes.trackName}
+      >
+        <SanitizedHTML
+          html={`${trackName}${minimized ? ' (minimized)' : ''}`}
         />
-      </Paper>
-    )
-  },
-)
+      </Typography>
+      <IconButton
+        {...bindTrigger(popupState)}
+        className={classes.iconButton}
+        data-testid="track_menu_icon"
+        disabled={items.length === 0}
+      >
+        <MoreVertIcon fontSize="small" />
+      </IconButton>
+      <CascadingMenu
+        {...bindPopover(popupState)}
+        onMenuItemClick={(_: unknown, callback: Function) => callback()}
+        menuItems={items}
+        popupState={popupState}
+      />
+    </Paper>
+  )
+})
 
 export default observer(TrackLabel)

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -20,15 +20,11 @@ const useStyles = makeStyles()({
     position: 'relative',
     overflow: 'hidden',
   },
-  spacer: {
-    position: 'relative',
-    height: 3,
-  },
 })
 
 type LGV = LinearGenomeViewModel
 
-function TracksContainer({
+export default observer(function TracksContainer({
   children,
   model,
 }: {
@@ -60,6 +56,12 @@ function TracksContainer({
       ref={ref}
       data-testid="trackContainer"
       className={classes.tracksContainer}
+      onClick={event => {
+        if (event.detail === 2) {
+          const left = ref.current?.getBoundingClientRect().left || 0
+          model.zoomTo(model.bpPerPx / 2, event.clientX - left, true)
+        }
+      }}
       onMouseDown={event => {
         mouseDown1(event)
         mouseDown2(event)
@@ -106,6 +108,4 @@ function TracksContainer({
       {children}
     </div>
   )
-}
-
-export default observer(TracksContainer)
+})

package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`renders one track, one region 1`] = `
       >
         <div
           class="css-dznme2-rubberbandControl"
-          role="presentation"
         >
           <div
             class="css-16vhz0m-scalebar"
@@ -160,11 +159,11 @@ exports[`renders one track, one region 1`] = `
             <div
               class="MuiAutocomplete-root css-l3ln04-MuiAutocomplete-root"
               data-testid="autocomplete"
-              style="width: 200px;"
+              style="width: 175px;"
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1efd6m0-MuiFormControl-root-MuiTextField-root-headerRefName"
-                style="margin: 7px; min-width: 175px;"
+                style="margin: 7px;"
               >
                 <div
                   class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
@@ -177,7 +176,7 @@ exports[`renders one track, one region 1`] = `
                     autocapitalize="none"
                     autocomplete="off"
                     class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
-                    id="refNameAutocomplete-lgv"
+                    id="mui-7"
                     placeholder="Search for location"
                     role="combobox"
                     spellcheck="false"
@@ -276,8 +275,7 @@ exports[`renders one track, one region 1`] = `
                 style="left: 0%; width: 0%;"
               />
               <span
-                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-14gf62f-MuiSlider-thumb"
-                data-focusvisible="false"
+                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-14gf62f-MuiSlider-thumb"
                 data-index="0"
                 style="left: 0%;"
               >
@@ -571,7 +569,6 @@ exports[`renders two tracks, two regions 1`] = `
       >
         <div
           class="css-dznme2-rubberbandControl"
-          role="presentation"
         >
           <div
             class="css-16vhz0m-scalebar"
@@ -740,7 +737,7 @@ exports[`renders two tracks, two regions 1`] = `
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1efd6m0-MuiFormControl-root-MuiTextField-root-headerRefName"
-                style="margin: 7px; min-width: 175px;"
+                style="margin: 7px;"
               >
                 <div
                   class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
@@ -753,7 +750,7 @@ exports[`renders two tracks, two regions 1`] = `
                     autocapitalize="none"
                     autocomplete="off"
                     class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
-                    id="refNameAutocomplete-lgv"
+                    id="mui-9"
                     placeholder="Search for location"
                     role="combobox"
                     spellcheck="false"
@@ -854,8 +851,7 @@ exports[`renders two tracks, two regions 1`] = `
                 style="left: 0%; width: 9.774680693120512%;"
               />
               <span
-                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-14gf62f-MuiSlider-thumb"
-                data-focusvisible="false"
+                class="MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeSmall MuiSlider-thumbColorPrimary css-14gf62f-MuiSlider-thumb"
                 data-index="0"
                 style="left: 9.774680693120512%;"
               >

package/src/LinearGenomeView/components/hooks.ts

@@ -239,7 +239,12 @@ export function useRangeSelect(
 
 export function useWheelScroll(
   ref: React.RefObject<HTMLDivElement>,
-  model: LGV,
+  model: {
+    bpPerPx: number
+    zoomTo: (arg: number, arg2?: number) => void
+    setScaleFactor: (arg: number) => void
+    horizontalScroll: (arg: number) => void
+  },
 ) {
   const delta = useRef(0)
   const timeout = useRef<Timer>()
@@ -266,6 +271,7 @@ export function useWheelScroll(
             delta.current > 0
               ? model.bpPerPx * (1 + delta.current)
               : model.bpPerPx / (1 - delta.current),
+            origEvent.clientX - (curr?.getBoundingClientRect().left || 0),
           )
           delta.current = 0
         }, 300)

package/src/LinearGenomeView/index.test.ts

@@ -96,7 +96,7 @@ function initialize() {
       assemblyManager: types.optional(AssemblyManager, {
         assemblies: {
           volvox: {
-            // @ts-ignore
+            // @ts-expect-error
             regions: volvoxDisplayedRegions,
           },
         },
@@ -311,7 +311,6 @@ test('can navToMultiple', () => {
 describe('Zoom to selected displayed regions', () => {
   const { Session, LinearGenomeModel } = initialize()
   let model: LGV
-  let largestBpPerPx: number
   beforeEach(() => {
     const session = Session.create({
       configuration: {},
@@ -357,7 +356,6 @@ describe('Zoom to selected displayed regions', () => {
       },
     )
 
-    largestBpPerPx = model.bpPerPx
     expect(model.offsetPx).toEqual(0)
     expect(model.bpPerPx).toBeCloseTo(31.408)
   })
@@ -384,7 +382,6 @@ describe('Zoom to selected displayed regions', () => {
     expect(model.offsetPx).toEqual(0)
     // 10000 - 5000 = 5000 / 800 = 6.25
     expect(model.bpPerPx).toEqual(6.25)
-    expect(model.bpPerPx).toBeLessThan(largestBpPerPx)
   })
 
   it('can select one region with start or end outside of displayed region', () => {
@@ -411,7 +408,6 @@ describe('Zoom to selected displayed regions', () => {
     expect(Math.abs(model.offsetPx)).toEqual(0)
     // endOffset 19000 - (-1) = 19001 /  800 = zoomTo(23.75)
     expect(model.bpPerPx).toBeCloseTo(23.75)
-    expect(model.bpPerPx).toBeLessThan(largestBpPerPx)
   })
 
   it('can select over two regions in the same reference sequence', () => {
@@ -439,7 +435,6 @@ describe('Zoom to selected displayed regions', () => {
     expect(model.bpPerPx).toBeCloseTo(27.78, 0)
     // offset 5000 / bpPerPx (because that is the starting) = 180.5
     expect(model.offsetPx).toBe(181)
-    expect(model.bpPerPx).toBeLessThan(largestBpPerPx)
   })
 
   it('can navigate to overlapping regions with a region between', () => {
@@ -585,7 +580,7 @@ test('can perform bpToPx in a way that makes sense on things that happen outside
   model.toggleHeaderOverview()
   expect(model.hideHeaderOverview).toEqual(true)
   model.toggleHeaderOverview()
-  model.setError(Error('pxToBp failed to map to a region'))
+  model.setError(new Error('pxToBp failed to map to a region'))
   expect(`${model.error}`).toEqual('Error: pxToBp failed to map to a region')
 })
 // determined objectively by looking at
@@ -936,7 +931,7 @@ test('navToLocString with human assembly', async () => {
     assemblyManager: {
       assemblies: {
         hg38: {
-          // @ts-ignore
+          // @ts-expect-error
           regions: hg38Regions,
         },
       },

package/src/LinearGenomeView/index.ts

@@ -4,15 +4,14 @@ import { ViewType } from '@jbrowse/core/pluggableElementTypes'
 import { stateModelFactory } from './model'
 
 export default (pluginManager: PluginManager) => {
-  pluginManager.addViewType(
-    () =>
-      new ViewType({
-        name: 'LinearGenomeView',
-        displayName: 'Linear genome view',
-        stateModel: stateModelFactory(pluginManager),
-        ReactComponent: lazy(() => import('./components/LinearGenomeView')),
-      }),
-  )
+  pluginManager.addViewType(() => {
+    return new ViewType({
+      name: 'LinearGenomeView',
+      displayName: 'Linear genome view',
+      stateModel: stateModelFactory(pluginManager),
+      ReactComponent: lazy(() => import('./components/LinearGenomeView')),
+    })
+  })
 }
 
 export * from './model'

package/src/LinearGenomeView/model.ts

@@ -17,6 +17,7 @@ import {
   measureText,
   parseLocString,
   springAnimate,
+  sum,
 } from '@jbrowse/core/util'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes'
@@ -52,13 +53,10 @@ import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 
 // locals
 import { renderToSvg } from './svgcomponents/SVGLinearGenomeView'
-import RefNameAutocomplete from './components/RefNameAutocomplete'
-import SearchBox from './components/SearchBox'
+
 import ExportSvgDlg from './components/ExportSvgDialog'
 import MiniControls from './components/MiniControls'
 import Header from './components/Header'
-import ZoomControls from './components/ZoomControls'
-import LinearGenomeView from './components/LinearGenomeView'
 
 // lazies
 const SequenceSearchDialog = lazy(
@@ -365,9 +363,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
        * #getter
        */
       get trackHeights() {
-        return self.tracks
-          .map(t => t.displays[0].height)
-          .reduce((a, b) => a + b, 0)
+        return sum(self.tracks.map(t => t.displays[0].height))
       },
 
       /**
@@ -478,14 +474,14 @@ export function stateModelFactory(pluginManager: PluginManager) {
        */
       rankSearchResults(results: BaseResult[]) {
         // order of rank
-        const openTrackIds = self.tracks.map(
-          track => track.configuration.trackId,
+        const openTrackIds = new Set(
+          self.tracks.map(track => track.configuration.trackId),
         )
-        results.forEach(result => {
-          if (openTrackIds.includes(result.trackId)) {
+        for (const result of results) {
+          if (openTrackIds.has(result.trackId)) {
             result.updateScore(result.getScore() + 1)
           }
-        })
+        }
         return results
       },
 
@@ -583,25 +579,25 @@ export function stateModelFactory(pluginManager: PluginManager) {
       /**
        * #action
        */
-      zoomTo(bpPerPx: number) {
+      zoomTo(bpPerPx: number, offset = self.width / 2, centerAtOffset = false) {
         const newBpPerPx = clamp(bpPerPx, self.minBpPerPx, self.maxBpPerPx)
         if (newBpPerPx === self.bpPerPx) {
           return newBpPerPx
         }
         const oldBpPerPx = self.bpPerPx
-        self.bpPerPx = newBpPerPx
 
         if (Math.abs(oldBpPerPx - newBpPerPx) < 0.000001) {
           console.warn('zoomTo bpPerPx rounding error')
           return oldBpPerPx
         }
+        self.bpPerPx = newBpPerPx
 
-        // tweak the offset so that the center of the view remains at the same coordinate
-        const viewWidth = self.width
+        // tweak the offset so that the center of the view remains at the same
+        // coordinate
         this.scrollTo(
           Math.round(
-            ((self.offsetPx + viewWidth / 2) * oldBpPerPx) / newBpPerPx -
-              viewWidth / 2,
+            ((self.offsetPx + offset) * oldBpPerPx) / newBpPerPx -
+              (centerAtOffset ? self.width / 2 : offset),
           ),
         )
         return newBpPerPx
@@ -644,8 +640,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
        */
       horizontallyFlip() {
         self.displayedRegions = cast(
-          self.displayedRegions
-            .slice()
+          [...self.displayedRegions]
             .reverse()
             .map(region => ({ ...region, reversed: !region.reversed })),
         )
@@ -670,9 +665,11 @@ export function stateModelFactory(pluginManager: PluginManager) {
           throw new Error(`Unknown track type ${conf.type}`)
         }
         const viewType = pluginManager.getViewType(self.type)
-        const supportedDisplays = viewType.displayTypes.map(d => d.name)
+        const supportedDisplays = new Set(
+          viewType.displayTypes.map(d => d.name),
+        )
         const displayConf = conf.displays.find((d: AnyConfigurationModel) =>
-          supportedDisplays.includes(d.type),
+          supportedDisplays.has(d.type),
         )
         if (!displayConf) {
           throw new Error(
@@ -1366,7 +1363,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
           })
         } else {
           self.setDisplayedRegions(
-            // @ts-ignore
+            // @ts-expect-error
             locations.map(r => (r.start === undefined ? r.parentRegion : r)),
           )
           self.showAllRegions()
@@ -1586,22 +1583,23 @@ export function stateModelFactory(pluginManager: PluginManager) {
        * #getter
        */
       get centerLineInfo() {
-        return self.displayedRegions.length
+        return self.displayedRegions.length > 0
           ? this.pxToBp(self.width / 2)
           : undefined
       },
     }))
 }
 
-export {
-  renderToSvg,
-  RefNameAutocomplete,
-  SearchBox,
-  ZoomControls,
-  LinearGenomeView,
-}
-
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>
 
-export { default as ReactComponent } from './components/LinearGenomeView'
+export {
+  default as ReactComponent,
+  default as LinearGenomeView,
+} from './components/LinearGenomeView'
+
+export { default as RefNameAutocomplete } from './components/RefNameAutocomplete'
+export { default as SearchBox } from './components/SearchBox'
+export { default as ZoomControls } from './components/ZoomControls'
+
+export { renderToSvg } from './svgcomponents/SVGLinearGenomeView'

package/src/LinearGenomeView/svgcomponents/SVGLinearGenomeView.tsx

@@ -10,7 +10,7 @@ import { LinearGenomeViewModel, ExportSvgOptions } from '..'
 import SVGBackground from './SVGBackground'
 import SVGTracks from './SVGTracks'
 import SVGHeader from './SVGHeader'
-import SVGRuler from './SVGRuler'
+
 import { getTrackName } from '@jbrowse/core/util/tracks'
 
 type LGV = LinearGenomeViewModel
@@ -65,9 +65,8 @@ export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
   )
   const trackLabelMaxLen =
     max(
-      tracks.map(
-        t => measureText(getTrackName(t.configuration, session), fontSize),
-        fontSize,
+      tracks.map(t =>
+        measureText(getTrackName(t.configuration, session), fontSize),
       ),
       0,
     ) + 40
@@ -111,4 +110,5 @@ export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
   )
 }
 
-export { SVGTracks, SVGRuler }
+export { default as SVGRuler } from './SVGRuler'
+export { default as SVGTracks } from './SVGTracks'

package/src/LinearGenomeView/svgcomponents/SVGTrackLabel.tsx

@@ -17,6 +17,7 @@ export default function SVGTrackLabel({
   const theme = useTheme()
   const fill = theme.palette.text.primary
   const xoff = trackLabels === 'overlay' ? 5 : 0
+  const yoff = trackLabels === 'offset' ? 5 : 0
   return trackLabels !== 'none' ? (
     <g>
       {trackLabels === 'left' ? (
@@ -33,6 +34,7 @@ export default function SVGTrackLabel({
       ) : (
         <text
           x={x + xoff}
+          y={yoff}
           fill={fill}
           fontSize={fontSize}
           dominantBaseline="hanging"

package/src/LinearGenomeView/util.ts

@@ -10,7 +10,7 @@ export function chooseGridPitch(
 ) {
   scale = Math.abs(scale)
   const minMajorPitchBp = minMajorPitchPx * scale
-  const majorMagnitude = parseInt(
+  const majorMagnitude = Number.parseInt(
     Number(minMajorPitchBp).toExponential().split(/e/i)[1],
     10,
   )

package/src/index.ts

@@ -9,32 +9,16 @@ import LineStyleIcon from '@mui/icons-material/LineStyle'
 import {
   BaseLinearDisplay,
   BaseLinearDisplayComponent,
-  BlockModel,
-  BlockMsg,
   baseLinearDisplayConfigSchema,
 } from './BaseLinearDisplay'
-import LinearBareDisplayF, {
-  configSchemaFactory as linearBareDisplayConfigSchemaFactory,
-} from './LinearBareDisplay'
+import LinearBareDisplayF from './LinearBareDisplay'
 import LinearGenomeViewF, {
-  LinearGenomeViewModel,
-  LinearGenomeViewStateModel,
-  RefNameAutocomplete,
   SearchBox,
   ZoomControls,
   LinearGenomeView,
 } from './LinearGenomeView'
 
-import {
-  renderToSvg,
-  totalHeight,
-  SVGTracks,
-  SVGRuler,
-} from './LinearGenomeView/svgcomponents/SVGLinearGenomeView'
-import LinearBasicDisplayF, {
-  configSchema as linearBasicDisplayConfigSchemaFactory,
-  modelFactory as linearBasicDisplayModelFactory,
-} from './LinearBasicDisplay'
+import LinearBasicDisplayF from './LinearBasicDisplay'
 
 import FeatureTrackF from './FeatureTrack'
 import BasicTrackF from './BasicTrack'
@@ -74,22 +58,28 @@ export default class LinearGenomeViewPlugin extends Plugin {
   }
 }
 
+export type { BaseLinearDisplayModel, BlockModel } from './BaseLinearDisplay'
+
+export { configSchemaFactory as linearBareDisplayConfigSchemaFactory } from './LinearBareDisplay'
 export {
+  BlockMsg,
   baseLinearDisplayConfigSchema,
-  linearBareDisplayConfigSchemaFactory,
-  linearBasicDisplayConfigSchemaFactory,
-  linearBasicDisplayModelFactory,
-  renderToSvg,
-  totalHeight,
-  SVGTracks,
-  SVGRuler,
   BaseLinearDisplayComponent,
   BaseLinearDisplay,
+} from './BaseLinearDisplay'
+export {
+  type LinearGenomeViewModel,
   RefNameAutocomplete,
+  type LinearGenomeViewStateModel,
   SearchBox,
-  BlockMsg,
-}
-
-export type { LinearGenomeViewModel, LinearGenomeViewStateModel, BlockModel }
-
-export type { BaseLinearDisplayModel } from './BaseLinearDisplay'
+} from './LinearGenomeView'
+export {
+  renderToSvg,
+  SVGTracks,
+  totalHeight,
+  SVGRuler,
+} from './LinearGenomeView/svgcomponents/SVGLinearGenomeView'
+export {
+  configSchema as linearBasicDisplayConfigSchemaFactory,
+  modelFactory as linearBasicDisplayModelFactory,
+} from './LinearBasicDisplay'