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

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/components/util.ts

@@ -60,3 +60,16 @@ export function getRelativeX<
 >(event: T, element: HTMLElement | null) {
   return event.clientX - (element?.getBoundingClientRect().left || 0)
 }
+
+export function getCytobands(assembly: Assembly | undefined, refName: string) {
+  return (
+    assembly?.cytobands
+      ?.map(f => ({
+        refName: assembly.getCanonicalRefName(f.get('refName')),
+        start: f.get('start'),
+        end: f.get('end'),
+        type: f.get('type'),
+      }))
+      .filter(f => f.refName === refName) || []
+  )
+}

package/src/LinearGenomeView/index.test.ts

@@ -7,13 +7,17 @@ import {
 } from '@jbrowse/core/pluggableElementTypes/models'
 import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
 import PluginManager from '@jbrowse/core/PluginManager'
-import { Instance, types } from 'mobx-state-tree'
-import { LinearGenomeViewStateModel, stateModelFactory } from '.'
+import { types } from 'mobx-state-tree'
+
+// locals
+import { LinearGenomeViewModel, stateModelFactory } from '.'
 import { BaseLinearDisplayComponent } from '..'
 import { stateModelFactory as LinearBasicDisplayStateModelFactory } from '../LinearBareDisplay'
 import hg38Regions from './hg38DisplayedRegions.json'
 import volvoxDisplayedRegions from './volvoxDisplayedRegions.json'
 
+type LGV = LinearGenomeViewModel
+
 // use initializer function to avoid having console.warn jest.fn in a global
 function initialize() {
   console.warn = jest.fn()
@@ -92,14 +96,14 @@ function initialize() {
       assemblyManager: types.optional(AssemblyManager, {
         assemblies: {
           volvox: {
-            // @ts-ignore
+            // @ts-expect-error
             regions: volvoxDisplayedRegions,
           },
         },
       }),
     })
     .actions(self => ({
-      setView(view: Instance<LinearGenomeViewStateModel>) {
+      setView(view: LGV) {
         self.view = view
         return view
       },
@@ -306,8 +310,7 @@ test('can navToMultiple', () => {
 
 describe('Zoom to selected displayed regions', () => {
   const { Session, LinearGenomeModel } = initialize()
-  let model: Instance<ReturnType<typeof stateModelFactory>>
-  let largestBpPerPx: number
+  let model: LGV
   beforeEach(() => {
     const session = Session.create({
       configuration: {},
@@ -353,7 +356,6 @@ describe('Zoom to selected displayed regions', () => {
       },
     )
 
-    largestBpPerPx = model.bpPerPx
     expect(model.offsetPx).toEqual(0)
     expect(model.bpPerPx).toBeCloseTo(31.408)
   })
@@ -380,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', () => {
@@ -407,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', () => {
@@ -435,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', () => {
@@ -581,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
@@ -674,7 +673,7 @@ describe('get sequence for selected displayed regions', () => {
   /* the start of all the results should be +1
   the sequence dialog then handles converting from 1-based closed to interbase
   */
-  let model: Instance<ReturnType<typeof stateModelFactory>>
+  let model: LGV
   beforeEach(() => {
     const session = Session.create({
       configuration: {},
@@ -932,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'
@@ -51,14 +52,11 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn'
 import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 
 // locals
-import { renderToSvg } from './components/LinearGenomeViewSvg'
-import RefNameAutocomplete from './components/RefNameAutocomplete'
-import SearchBox from './components/SearchBox'
+import { renderToSvg } from './svgcomponents/SVGLinearGenomeView'
+
 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(
@@ -76,12 +74,19 @@ export interface BpOffset {
   assemblyName?: string
   oob?: boolean
 }
-
 export interface ExportSvgOptions {
   rasterizeLayers?: boolean
   filename?: string
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Wrapper?: React.FC<any>
+  fontSize?: number
+  rulerHeight?: number
+  textHeight?: number
+  paddingHeight?: number
+  headerHeight?: number
+  cytobandHeight?: number
+  trackLabels?: string
+  themeName?: string
 }
 
 function calculateVisibleLocStrings(contentBlocks: BaseBlock[]) {
@@ -358,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))
       },
 
       /**
@@ -471,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
       },
 
@@ -576,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
@@ -637,8 +640,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
        */
       horizontallyFlip() {
         self.displayedRegions = cast(
-          self.displayedRegions
-            .slice()
+          [...self.displayedRegions]
             .reverse()
             .map(region => ({ ...region, reversed: !region.reversed })),
         )
@@ -663,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(
@@ -907,7 +911,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
 
       /**
-       * #action
+       * #method
        * creates an svg export and save using FileSaver
        */
       async exportSvg(opts: ExportSvgOptions = {}) {
@@ -1359,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()
@@ -1579,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/SVGBackground.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useTheme } from '@mui/material'
+
+export default function SVGBackground({
+  width,
+  height,
+  shift,
+}: {
+  width: number
+  height: number
+  shift: number
+}) {
+  const theme = useTheme()
+  return (
+    <rect
+      width={width + shift * 2}
+      height={height}
+      fill={theme.palette.background.default}
+    />
+  )
+}

package/src/LinearGenomeView/svgcomponents/SVGHeader.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { getSession } from '@jbrowse/core/util'
+import Base1DView from '@jbrowse/core/util/Base1DViewModel'
+import { useTheme } from '@mui/material'
+
+// locals
+import { LinearGenomeViewModel, HEADER_OVERVIEW_HEIGHT } from '..'
+import Cytobands from '../components/Cytobands'
+import { Polygon } from '../components/OverviewScalebar'
+import SVGRuler from './SVGRuler'
+import SVGScalebar from './SVGScalebar'
+
+type LGV = LinearGenomeViewModel
+
+export default function SVGHeader({
+  model,
+  fontSize,
+  cytobandHeight,
+  rulerHeight,
+}: {
+  model: LGV
+  rulerHeight: number
+  fontSize: number
+  cytobandHeight: number
+}) {
+  const { width, assemblyNames, showCytobands, displayedRegions } = model
+  const { assemblyManager } = getSession(model)
+  const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0]
+  const assembly = assemblyManager.get(assemblyName)
+  const theme = useTheme()
+
+  const overview = Base1DView.create({
+    displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+    interRegionPaddingWidth: 0,
+    minimumBlockWidth: model.minimumBlockWidth,
+  })
+  const visibleRegions = model.dynamicBlocks.contentBlocks
+
+  overview.setVolatileWidth(width)
+  overview.showAllRegions()
+  const block = overview.dynamicBlocks.contentBlocks[0]
+
+  const first = visibleRegions[0]
+  const firstOverviewPx =
+    overview.bpToPx({
+      ...first,
+      coord: first.reversed ? first.end : first.start,
+    }) || 0
+
+  const last = visibleRegions[visibleRegions.length - 1]
+  const lastOverviewPx =
+    overview.bpToPx({
+      ...last,
+      coord: last.reversed ? last.start : last.end,
+    }) || 0
+  const c = +showCytobands * cytobandHeight
+  return (
+    <g id="header">
+      <text
+        x={0}
+        y={fontSize}
+        fontSize={fontSize}
+        fill={theme.palette.text.primary}
+      >
+        {assemblyName}
+      </text>
+
+      {showCytobands ? (
+        <g transform={`translate(0 ${rulerHeight})`}>
+          <Cytobands overview={overview} assembly={assembly} block={block} />
+          <rect
+            stroke="red"
+            fill="rgb(255,0,0,0.1)"
+            width={Math.max(lastOverviewPx - firstOverviewPx, 0.5)}
+            height={HEADER_OVERVIEW_HEIGHT - 1}
+            x={firstOverviewPx}
+            y={0.5}
+          />
+          <g transform={`translate(0,${HEADER_OVERVIEW_HEIGHT})`}>
+            <Polygon overview={overview} model={model} useOffset={false} />
+          </g>
+        </g>
+      ) : null}
+
+      <g transform={`translate(0 ${fontSize + c})`}>
+        <SVGScalebar model={model} fontSize={fontSize} />
+      </g>
+      <g transform={`translate(0 ${rulerHeight + c})`}>
+        <SVGRuler model={model} fontSize={fontSize} />
+      </g>
+    </g>
+  )
+}

package/src/LinearGenomeView/svgcomponents/SVGLinearGenomeView.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { when } from 'mobx'
+import { getSession, max, measureText, sum } from '@jbrowse/core/util'
+import { ThemeProvider } from '@mui/material'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+
+// locals
+import { LinearGenomeViewModel, ExportSvgOptions } from '..'
+import SVGBackground from './SVGBackground'
+import SVGTracks from './SVGTracks'
+import SVGHeader from './SVGHeader'
+
+import { getTrackName } from '@jbrowse/core/util/tracks'
+
+type LGV = LinearGenomeViewModel
+
+interface Display {
+  height: number
+}
+interface Track {
+  displays: Display[]
+}
+
+export function totalHeight(
+  tracks: Track[],
+  textHeight: number,
+  trackLabels: string,
+) {
+  return sum(
+    tracks.map(
+      t =>
+        t.displays[0].height +
+        (['none', 'left'].includes(trackLabels) ? 0 : textHeight),
+    ),
+  )
+}
+
+// render LGV to SVG
+export async function renderToSvg(model: LGV, opts: ExportSvgOptions) {
+  await when(() => model.initialized)
+  const {
+    textHeight = 18,
+    headerHeight = 40,
+    rulerHeight = 50,
+    fontSize = 13,
+    cytobandHeight = 100,
+    trackLabels = 'offset',
+    themeName = 'default',
+    Wrapper = ({ children }) => <>{children}</>,
+  } = opts
+  const session = getSession(model)
+  const theme = session.allThemes?.()[themeName]
+  const { width, tracks, showCytobands } = model
+  const shift = 50
+  const c = +showCytobands * cytobandHeight
+  const offset = headerHeight + rulerHeight + c + 10
+  const height = totalHeight(tracks, textHeight, trackLabels) + offset + 100
+  const displayResults = await Promise.all(
+    tracks.map(async track => {
+      const display = track.displays[0]
+      await when(() => (display.ready !== undefined ? display.ready : true))
+      return { track, result: await display.renderSvg({ ...opts, theme }) }
+    }),
+  )
+  const trackLabelMaxLen =
+    max(
+      tracks.map(t =>
+        measureText(getTrackName(t.configuration, session), fontSize),
+      ),
+      0,
+    ) + 40
+  const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0
+  const w = width + trackLabelOffset
+
+  // the xlink namespace is used for rendering <image> tag
+  return renderToStaticMarkup(
+    <ThemeProvider theme={createJBrowseTheme(theme)}>
+      <Wrapper>
+        <svg
+          width={w}
+          height={height}
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox={[0, 0, w + shift * 2, height].toString()}
+        >
+          <SVGBackground width={w} height={height} shift={shift} />
+          <g transform={`translate(${shift} 0)`}>
+            <g transform={`translate(${trackLabelOffset})`}>
+              <SVGHeader
+                model={model}
+                fontSize={fontSize}
+                rulerHeight={rulerHeight}
+                cytobandHeight={cytobandHeight}
+              />
+            </g>
+            <SVGTracks
+              textHeight={textHeight}
+              fontSize={fontSize}
+              model={model}
+              displayResults={displayResults}
+              offset={offset}
+              trackLabels={trackLabels}
+              trackLabelOffset={trackLabelOffset}
+            />
+          </g>
+        </svg>
+      </Wrapper>
+    </ThemeProvider>,
+  )
+}
+
+export { default as SVGRuler } from './SVGRuler'
+export { default as SVGTracks } from './SVGTracks'

package/src/LinearGenomeView/svgcomponents/SVGRegionSeparators.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+// locals
+import { LinearGenomeViewModel } from '..'
+
+type LGV = LinearGenomeViewModel
+
+// SVG component, region separator
+export default function SVGRegionSeparators({
+  model,
+  height,
+}: {
+  height: number
+  model: LGV
+}) {
+  const { dynamicBlocks, offsetPx, interRegionPaddingWidth } = model
+  return (
+    <>
+      {dynamicBlocks.contentBlocks.slice(1).map(block => (
+        <rect
+          key={block.key}
+          x={block.offsetPx - offsetPx - interRegionPaddingWidth}
+          width={interRegionPaddingWidth}
+          y={0}
+          height={height}
+          fill="grey"
+        />
+      ))}
+    </>
+  )
+}