@jbrowse/plugin-linear-genome-view 2.5.0 → 2.6.2

package/src/LinearGenomeView/svgcomponents/SVGBackground.tsx

@@ -1,21 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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
-  const yoff = trackLabels === 'offset' ? 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}
-          y={yoff}
-          fill={fill}
-          fontSize={fontSize}
-          dominantBaseline="hanging"
-        >
-          {trackName}
-        </text>
-      )}
-    </g>
-  ) : null
-}

package/src/LinearGenomeView/svgcomponents/SVGTracks.tsx

@@ -1,67 +0,0 @@
-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

@@ -1,33 +0,0 @@
-import { makeTicks } from './util'
-
-describe('tick calculation', () => {
-  test('one', () => {
-    const result = Array.from(makeTicks(0, 10, 0.05))
-    expect(result).toEqual([
-      { type: 'major', base: -1, index: 0 },
-      { type: 'minor', base: 0, index: 1 },
-      { type: 'minor', base: 1, index: 2 },
-      { type: 'minor', base: 2, index: 3 },
-      { type: 'minor', base: 3, index: 4 },
-      { type: 'minor', base: 4, index: 5 },
-      { type: 'minor', base: 5, index: 6 },
-      { type: 'minor', base: 6, index: 7 },
-      { type: 'minor', base: 7, index: 8 },
-      { 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: '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 },
-    ])
-  })
-})