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

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()
@@ -99,7 +103,7 @@ function initialize() {
       }),
     })
     .actions(self => ({
-      setView(view: Instance<LinearGenomeViewStateModel>) {
+      setView(view: LGV) {
         self.view = view
         return view
       },
@@ -306,7 +310,7 @@ test('can navToMultiple', () => {
 
 describe('Zoom to selected displayed regions', () => {
   const { Session, LinearGenomeModel } = initialize()
-  let model: Instance<ReturnType<typeof stateModelFactory>>
+  let model: LGV
   let largestBpPerPx: number
   beforeEach(() => {
     const session = Session.create({
@@ -674,7 +678,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: {},

package/src/LinearGenomeView/model.ts

@@ -51,7 +51,7 @@ import ZoomInIcon from '@mui/icons-material/ZoomIn'
 import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 
 // locals
-import { renderToSvg } from './components/LinearGenomeViewSvg'
+import { renderToSvg } from './svgcomponents/SVGLinearGenomeView'
 import RefNameAutocomplete from './components/RefNameAutocomplete'
 import SearchBox from './components/SearchBox'
 import ExportSvgDlg from './components/ExportSvgDialog'
@@ -76,12 +76,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[]) {
@@ -907,7 +914,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
 
       /**
-       * #action
+       * #method
        * creates an svg export and save using FileSaver
        */
       async exportSvg(opts: ExportSvgOptions = {}) {

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 SVGRuler from './SVGRuler'
+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),
+        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 { SVGTracks, SVGRuler }

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"
+        />
+      ))}
+    </>
+  )
+}

package/src/LinearGenomeView/svgcomponents/SVGRuler.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { getTickDisplayStr } from '@jbrowse/core/util'
+import { useTheme } from '@mui/material'
+
+// locals
+import { makeTicks } from '../util'
+
+import { LinearGenomeViewModel } from '..'
+import SVGRegionSeparators from './SVGRegionSeparators'
+
+type LGV = LinearGenomeViewModel
+
+function Ruler({
+  start,
+  end,
+  bpPerPx,
+  reversed = false,
+  major = true,
+  minor = true,
+  hideText = false,
+}: {
+  start: number
+  end: number
+  bpPerPx: number
+  reversed?: boolean
+  major?: boolean
+  minor?: boolean
+  hideText?: boolean
+}) {
+  const ticks = makeTicks(start, end, bpPerPx, major, minor)
+  const theme = useTheme()
+  return (
+    <>
+      {ticks.map(tick => {
+        const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx
+        return (
+          <line
+            key={tick.base}
+            x1={x}
+            x2={x}
+            y1={0}
+            y2={tick.type === 'major' ? 6 : 4}
+            strokeWidth={1}
+            stroke={theme.palette.text.secondary}
+          />
+        )
+      })}
+      {!hideText
+        ? ticks
+            .filter(tick => tick.type === 'major')
+            .map(tick => {
+              const x =
+                (reversed ? end - tick.base : tick.base - start) / bpPerPx
+              return (
+                <text
+                  x={x - 3}
+                  y={7 + 11}
+                  key={`label-${tick.base}`}
+                  fontSize={11}
+                  fill={theme.palette.text.primary}
+                >
+                  {getTickDisplayStr(tick.base + 1, bpPerPx)}
+                </text>
+              )
+            })
+        : null}
+    </>
+  )
+}
+
+export default function SVGRuler({
+  model,
+  fontSize,
+}: {
+  model: LGV
+  fontSize: number
+}) {
+  const {
+    dynamicBlocks: { contentBlocks },
+    offsetPx: viewOffsetPx,
+    bpPerPx,
+  } = model
+  const renderRuler = contentBlocks.length < 5
+  const theme = useTheme()
+  return (
+    <>
+      <SVGRegionSeparators model={model} height={30} />
+      {contentBlocks.map(block => {
+        const { start, end, key, reversed, offsetPx, refName, widthPx } = block
+        const offset = offsetPx - viewOffsetPx
+        const clipid = `clip-${key}`
+        return (
+          <g key={key}>
+            <defs>
+              <clipPath id={clipid}>
+                <rect x={0} y={0} width={widthPx} height={100} />
+              </clipPath>
+            </defs>
+            <g transform={`translate(${offset} 0)`}>
+              <g clipPath={`url(#${clipid})`}>
+                <text
+                  x={4}
+                  y={fontSize}
+                  fontSize={fontSize}
+                  fill={theme.palette.text.primary}
+                >
+                  {refName}
+                </text>
+                <g transform="translate(0 20)">
+                  <Ruler
+                    hideText={!renderRuler}
+                    start={start}
+                    end={end}
+                    bpPerPx={bpPerPx}
+                    reversed={reversed}
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        )
+      })}
+    </>
+  )
+}

package/src/LinearGenomeView/svgcomponents/SVGScalebar.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { getBpDisplayStr } from '@jbrowse/core/util'
+import { useTheme } from '@mui/material'
+import { LinearGenomeViewModel } from '..'
+
+type LGV = LinearGenomeViewModel
+
+export default function SVGScalebar({
+  model,
+  fontSize,
+}: {
+  model: LGV
+  fontSize: number
+}) {
+  const {
+    offsetPx,
+    dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp },
+  } = model
+  const theme = useTheme()
+  const displayBp = getBpDisplayStr(totalBp)
+  const x0 = Math.max(-offsetPx, 0)
+  const x1 = x0 + totalWidthPx
+  return (
+    <>
+      <line
+        x1={x0}
+        x2={x1}
+        y1={10}
+        y2={10}
+        stroke={theme.palette.text.secondary}
+      />
+      <line
+        x1={x0}
+        x2={x0}
+        y1={5}
+        y2={15}
+        stroke={theme.palette.text.secondary}
+      />
+      <line
+        x1={x1}
+        x2={x1}
+        y1={5}
+        y2={15}
+        stroke={theme.palette.text.secondary}
+      />
+      <text
+        x={x0 + (x1 - x0) / 2}
+        y={fontSize * 2}
+        textAnchor="middle"
+        fontSize={fontSize}
+        fill={theme.palette.text.primary}
+      >
+        {displayBp}
+      </text>
+    </>
+  )
+}

package/src/LinearGenomeView/svgcomponents/SVGTrackLabel.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useTheme } from '@mui/material'
+
+export default function SVGTrackLabel({
+  trackLabels,
+  trackName,
+  fontSize,
+  trackLabelOffset,
+  x,
+}: {
+  trackName: string
+  trackLabels: string
+  fontSize: number
+  trackLabelOffset: number
+  x: number
+}) {
+  const theme = useTheme()
+  const fill = theme.palette.text.primary
+  const xoff = trackLabels === 'overlay' ? 5 : 0
+  return trackLabels !== 'none' ? (
+    <g>
+      {trackLabels === 'left' ? (
+        <text
+          x={trackLabelOffset - 40}
+          y={20}
+          fill={fill}
+          fontSize={fontSize}
+          dominantBaseline="hanging"
+          textAnchor="end"
+        >
+          {trackName}
+        </text>
+      ) : (
+        <text
+          x={x + xoff}
+          fill={fill}
+          fontSize={fontSize}
+          dominantBaseline="hanging"
+        >
+          {trackName}
+        </text>
+      )}
+    </g>
+  ) : null
+}

package/src/LinearGenomeView/svgcomponents/SVGTracks.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import { getTrackName } from '@jbrowse/core/util/tracks'
+import { getSession } from '@jbrowse/core/util'
+// locals
+import { LinearGenomeViewModel } from '..'
+import SVGRegionSeparators from './SVGRegionSeparators'
+import SVGTrackLabel from './SVGTrackLabel'
+
+type LGV = LinearGenomeViewModel
+
+interface DisplayResult {
+  track: {
+    configuration: AnyConfigurationModel
+    displays: { height: number }[]
+  }
+  result: string
+}
+
+// SVG component, tracks
+export default function SVGTracks({
+  displayResults,
+  model,
+  offset,
+  textHeight,
+  fontSize,
+  trackLabels = 'offset',
+  trackLabelOffset = 0,
+}: {
+  displayResults: DisplayResult[]
+  model: LGV
+  offset: number
+  textHeight: number
+  fontSize: number
+  trackLabels?: string
+  trackLabelOffset?: number
+}) {
+  const session = getSession(model)
+  const textOffset = trackLabels === 'offset' ? textHeight : 0
+  return (
+    <>
+      {displayResults.map(({ track, result }) => {
+        const current = offset
+        const conf = track.configuration
+        const trackName = getTrackName(conf, session)
+        const display = track.displays[0]
+        const x = Math.max(-model.offsetPx, 0)
+        offset += display.height + textOffset
+        return (
+          <g key={conf.trackId} transform={`translate(0 ${current})`}>
+            <g transform={`translate(${trackLabelOffset} ${textOffset})`}>
+              <SVGRegionSeparators model={model} height={display.height} />
+              {result}
+            </g>
+            <SVGTrackLabel
+              trackName={trackName}
+              fontSize={fontSize}
+              trackLabels={trackLabels}
+              trackLabelOffset={trackLabelOffset}
+              x={x}
+            />
+          </g>
+        )
+      })}
+    </>
+  )
+}

package/src/LinearGenomeView/util.test.ts

@@ -16,15 +16,18 @@ describe('tick calculation', () => {
       { type: 'minor', base: 8, index: 9 },
       { type: 'major', base: 9, index: 10 },
       { type: 'minor', base: 10, index: 11 },
+      { type: 'minor', base: 11, index: 12 },
     ])
   })
   test('two', () => {
     const result = Array.from(makeTicks(0, 50, 1))
     expect(result).toEqual([
-      { type: 'major', base: -1, index: 0 },
-      { type: 'minor', base: 19, index: 1 },
-      { type: 'minor', base: 39, index: 2 },
-      { type: 'minor', base: 59, index: 3 },
+      { type: 'minor', base: -21, index: 0 },
+      { type: 'major', base: -1, index: 1 },
+      { type: 'minor', base: 19, index: 2 },
+      { type: 'minor', base: 39, index: 3 },
+      { type: 'minor', base: 59, index: 4 },
+      { type: 'minor', base: 79, index: 5 },
     ])
   })
 })

package/src/LinearGenomeView/util.ts

@@ -68,8 +68,8 @@ export function makeTicks(
   let index = 0
   const ticks = []
   for (
-    let base = Math.ceil(minBase / iterPitch) * iterPitch;
-    base < maxBase;
+    let base = Math.floor(minBase / iterPitch) * iterPitch;
+    base < Math.ceil(maxBase / iterPitch) * iterPitch + 1;
     base += iterPitch
   ) {
     if (emitMinor && base % (gridPitch.majorPitch * 2)) {